.loan-page{--loan-primary: #0f6a8f;--loan-primary-dark: #0a4f6b;--loan-accent: #14b8a6;--loan-border: #d7e3f0;--loan-text-soft: #4a6179;--loan-surface: #ffffff;--loan-surface-soft: #f5f9fd;display:grid;gap:1.4rem;width:100%;max-width:100%}.loan-page *,.loan-page *:before,.loan-page *:after{box-sizing:border-box;min-width:0}.loan-hero{background:transparent;border:0;border-radius:0;padding:0}.loan-lead{margin:0;color:var(--loan-text-soft);font-size:1rem}.loan-card{background:var(--loan-surface);border:1px solid var(--loan-border);border-radius:16px;padding:1.1rem 1rem 1.2rem;box-shadow:0 12px 30px -24px #10425e80;width:100%;max-width:100%}.loan-card h2{margin:0;padding-top:0}.loan-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.95rem;margin-top:.85rem}.loan-field{display:flex;flex-direction:column;gap:.45rem}.loan-field-full{grid-column:1 / -1}.loan-field>span{font-size:.92rem;color:#334155;font-weight:600}.date-input-wrap{position:relative;--date-picker-trigger-right: .44rem;--date-picker-trigger-size: 1.7rem}.date-text-input{padding-right:2.8rem!important}.native-date-picker{position:absolute;inset:0;opacity:0;pointer-events:none}.date-picker-trigger{position:absolute;right:var(--date-picker-trigger-right);top:50%;transform:translateY(-50%);z-index:1;width:var(--date-picker-trigger-size);height:var(--date-picker-trigger-size);border-radius:8px;border:1px solid #c8d8e8;background:#fff;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.date-picker-trigger:hover{background:#f1f7fd}.date-picker-trigger span{width:1rem;height:1rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='4' width='18' height='17' rx='2' stroke='%23334155' stroke-width='1.8'/%3E%3Cpath d='M8 2v4M16 2v4M3 9h18' stroke='%23334155' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain}@media (hover: none),(pointer: coarse){.native-date-picker{inset:auto;right:var(--date-picker-trigger-right);top:50%;transform:translateY(-50%);width:var(--date-picker-trigger-size);height:var(--date-picker-trigger-size);z-index:2;pointer-events:auto;cursor:pointer}.date-picker-trigger{pointer-events:none}}.loan-checkbox-field{margin-top:.1rem}.prepayment-checkbox-row{display:inline-flex;align-items:center;gap:.55rem;color:#1e293b;font-size:.95rem;font-weight:600;cursor:pointer;user-select:none}.prepayment-checkbox-row input[type=checkbox]{width:1.05rem;height:1.05rem;margin:0;accent-color:var(--loan-primary);cursor:pointer}.prepayment-settings{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.95rem;border:1px dashed #c7d9e8;border-radius:12px;padding:.9rem;background:#fbfdff}.prepayment-settings[hidden]{display:none}.field-with-suffix{position:relative}.field-with-unit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem;align-items:center}.term-unit-select{width:clamp(6.8rem,22vw,8.8rem)}.field-suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.8rem;color:#64748b;pointer-events:none}.loan-field input,.loan-field select{width:100%;border:1px solid #c8d8e8;border-radius:11px;background:var(--loan-surface-soft);color:#0f172a;padding:.78rem .74rem;font-size:1rem;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.loan-field input{padding-right:5.5rem}.loan-field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:2.15rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 10px) center;background-size:12px 12px}.loan-field select::-ms-expand{display:none}.loan-field .field-with-unit input{padding-right:.74rem}.loan-field input[type=number]::-webkit-outer-spin-button,.loan-field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.loan-field input[type=number]{appearance:textfield;-moz-appearance:textfield}.loan-field input:focus,.loan-field select:focus{border-color:#7ab2cf;box-shadow:0 0 0 3px #0f6a8f24;background:#fff;outline:0}.field-label-with-tip{display:inline-flex;align-items:center;gap:.4rem}.loan-tooltip{position:relative;display:inline-flex;align-items:center}.loan-tooltip-trigger{width:1.2rem;height:1.2rem;border-radius:50%;border:0;background:var(--loan-primary);color:#fff;cursor:help;font-size:.75rem;line-height:1;padding:0}.loan-tooltip-content{position:absolute;z-index:6;left:50%;bottom:calc(100% + 10px);transform:translate(-50%) translateY(4px);width:min(290px,80vw);padding:.62rem .72rem;border-radius:10px;border:1px solid #9ec6da;background:#fff;box-shadow:0 18px 28px -22px #0f172a73;color:#334155;font-size:.8rem;line-height:1.35;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.loan-tooltip:hover .loan-tooltip-content,.loan-tooltip:focus-within .loan-tooltip-content{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.calc-error{margin:.8rem 0 0;color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;border-radius:9px;padding:.5rem .65rem;font-size:.9rem}.loan-results{margin-top:.8rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.result-item{background:linear-gradient(180deg,#f9fcff,#f3f9ff);border:1px solid #d8e7f3;border-radius:12px;padding:.78rem;display:flex;flex-direction:column;gap:.3rem}.result-label{font-size:.84rem;color:var(--loan-text-soft)}.result-value{font-size:1.15rem;line-height:1.3;color:#0f172a;overflow-wrap:anywhere}.result-item-alert{background:linear-gradient(180deg,#fff6f6,#ffecec);border-color:#fecaca}.result-item-alert .result-label{color:#9f1239}.result-value-alert{color:#b91c1c}.schedule-hint{margin:.35rem 0 0;color:var(--loan-text-soft);font-size:.92rem}.schedule-table-wrap{overflow-x:auto;overflow-y:hidden;max-width:100%;-webkit-overflow-scrolling:touch;margin-top:.8rem;border:1px solid #d7e3f0;border-radius:12px}.schedule-table{width:100%;border-collapse:collapse;min-width:760px;background:#fff}.schedule-table thead th{background:#eef5fc;color:#1e293b;font-size:.83rem;font-weight:700;text-align:left;padding:.62rem .65rem;border-bottom:1px solid #d7e3f0;white-space:nowrap}.schedule-table tbody td{padding:.6rem .65rem;border-bottom:1px solid #edf2f7;font-size:.88rem;color:#334155;white-space:nowrap}.schedule-table tbody tr:last-child td{border-bottom:0}.schedule-table tbody tr:nth-child(2n){background:#fbfdff}.schedule-table tbody tr.schedule-row-prepayment td{background:#ecfdf7;color:#0f5132}.schedule-table tbody tr.schedule-row-prepayment td:first-child{box-shadow:inset 3px 0 #14b8a6}.toggle-schedule{margin-top:.75rem;border:1px solid #bfd6e6;background:#f7fbff;color:var(--loan-primary-dark);border-radius:10px;padding:.58rem .7rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.toggle-schedule:hover{background:#eef6fd;border-color:#99c1d8}.loan-info{background:transparent;border:0;border-radius:0;padding:0;width:100%;max-width:100%}.loan-info h2{padding-top:0;margin:0}.loan-info h3{margin-top:.7rem}.loan-info ul,.loan-info ol{margin-top:.2rem;padding-left:1.35rem}.loan-info ul{list-style:disc}.loan-info ol{list-style:decimal}.loan-info li{color:#334155}@media (min-width: 1024px){.loan-page{gap:1.9rem}.loan-lead{font-size:1.2rem;line-height:1.65;max-width:90ch}.loan-card{padding:1.5rem 1.5rem 1.6rem;border-radius:18px}.loan-form{gap:1.2rem 1.3rem}.loan-field>span{font-size:1.02rem}.prepayment-checkbox-row{font-size:1.08rem}.prepayment-settings{gap:1.15rem 1.2rem;padding:1.1rem}.loan-field input,.loan-field select{font-size:1.14rem;padding:.94rem .9rem}.date-text-input{padding-right:3.05rem!important}.date-input-wrap{--date-picker-trigger-right: .48rem;--date-picker-trigger-size: 1.95rem}.loan-field input{padding-right:6.2rem}.loan-field select{padding-right:2.35rem;background-position:calc(100% - 12px) center;background-size:13px 13px}.loan-field .field-with-unit input{padding-right:.9rem}.field-suffix{font-size:.93rem}.loan-tooltip-trigger{width:1.35rem;height:1.35rem;font-size:.8rem}.loan-tooltip-content{width:min(340px,35vw);font-size:.9rem}.result-label{font-size:1rem}.result-value{font-size:1.45rem}.schedule-hint{font-size:1rem}.schedule-table thead th{font-size:.97rem;padding:.8rem .85rem}.schedule-table tbody td{font-size:.98rem;padding:.76rem .85rem}.toggle-schedule{font-size:1rem;padding:.7rem .95rem}}@media (max-width: 880px){.loan-form,.loan-results,.prepayment-settings{grid-template-columns:1fr}.loan-hero,.loan-card,.loan-info{padding:.9rem .85rem 1rem}.loan-hero,.loan-info{padding:0}}@media (max-width: 640px){.loan-page{gap:1rem}.result-value{font-size:1.05rem}.loan-field input,.loan-field select{font-size:16px}.field-with-unit{grid-template-columns:1fr;gap:.45rem}.term-unit-select{width:100%}.schedule-table{min-width:0;table-layout:fixed}.schedule-table thead th,.schedule-table tbody td{white-space:normal;word-break:break-word;overflow-wrap:anywhere;font-size:.78rem;padding:.42rem .45rem}}
