:root{--primary: #3b82f6;--primary-dark: #2563eb;--border: #e5e7eb;--surface: #ffffff;--shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.05);--surface-muted: #f9fafb;--text-main: #1a202c;--text-muted: #4a5568;}
.auto-loan-calculator-wrapper{margin: 0 auto;padding: 1.25rem 0 2rem;}
.auto-loan-ui-grid{display: grid;grid-template-columns: minmax(340px, 1fr) minmax(420px, 1fr);gap: 1.5rem;align-items: start;margin-bottom: 2rem;}
.calculator-card{background: rgba(255, 255, 255, 0.9);border: 1px solid rgba(226, 232, 240, 0.9);border-radius: 16px;box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);padding: 1.25rem;backdrop-filter: blur(8px);}
.section-title{font-size: 1.125rem;font-weight: 700;color: #0f172a;margin: 0 0 0.75rem;}
.input-group{margin-bottom: 0.9rem;}
.input-label{display: block;font-size: 0.8rem;font-weight: 700;color: rgba(15, 23, 42, 0.7);letter-spacing: 0.04em;text-transform: uppercase;margin-bottom: 0.4rem;}
.input-field{width: 100%;padding: 0.9rem 0.95rem;border: 1px solid rgba(148, 163, 184, 0.35);border-radius: 12px;background: rgba(248, 250, 252, 0.9);color: #0f172a;font-size: 1rem;font-weight: 600;transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;}
.input-field:focus{outline: none;border-color: rgba(59, 130, 246, 0.6);background: #ffffff;box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);}
.select-field{appearance: none;background-image: linear-gradient(45deg, transparent 50%, rgba(15, 23, 42, 0.55) 50%), linear-gradient(135deg, rgba(15, 23, 42, 0.55) 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;background-size: 5px 5px, 5px 5px, 2.5em 2.5em;background-repeat: no-repeat;padding-right: 2.75rem;}
.input-grid-2{display: grid;grid-template-columns: 1fr 1fr;gap: 0.75rem;}
.inline-check{display: flex;align-items: center;gap: 0.6rem;padding: 0.6rem 0.75rem;border: 1px solid rgba(148, 163, 184, 0.25);border-radius: 12px;background: rgba(248, 250, 252, 0.7);}
.inline-check input[type="checkbox"]{width: 18px;height: 18px;accent-color: var(--primary);}
.check-label{margin: 0;font-weight: 700;color: rgba(15, 23, 42, 0.75);font-size: 0.95rem;}
.actions-row{display: grid;grid-template-columns: 1fr 1fr;gap: 0.75rem;margin-top: 0.2rem;}
.action-btn{padding: 0.85rem 1rem;border-radius: 12px;font-weight: 800;border: 1px solid transparent;cursor: pointer;transition: transform 0.15s, box-shadow 0.15s, background 0.15s;}
.action-primary{background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);color: #ffffff;box-shadow: 0 12px 24px rgba(37, 99, 235, 0.25);}
.action-primary:hover{transform: translateY(-1px);box-shadow: 0 16px 28px rgba(37, 99, 235, 0.28);}
.action-ghost{background: rgba(255, 255, 255, 0.8);border-color: rgba(148, 163, 184, 0.35);color: rgba(15, 23, 42, 0.8);}
.action-ghost:hover{transform: translateY(-1px);box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);}
.tools-row{display: flex;gap: 0.5rem;flex-wrap: wrap;margin-top: 0.9rem;}
.tool-chip{padding: 0.55rem 0.75rem;border-radius: 999px;border: 1px solid rgba(148, 163, 184, 0.35);background: rgba(255, 255, 255, 0.8);color: rgba(15, 23, 42, 0.8);font-weight: 800;font-size: 0.9rem;cursor: pointer;transition: background 0.15s, transform 0.15s;}
.tool-chip:hover{background: rgba(248, 250, 252, 1);transform: translateY(-1px);}
.results-card-single{padding: 1.25rem;}
.results-card-header{display: flex;align-items: center;justify-content: space-between;gap: 0.75rem;margin-bottom: 0.75rem;}
.copy-mini{margin-left: auto;padding: 0.55rem 0.75rem;border-radius: 999px;border: 1px solid rgba(148, 163, 184, 0.35);background: rgba(255, 255, 255, 0.8);color: rgba(15, 23, 42, 0.8);font-weight: 800;cursor: pointer;}
.result-block{border-top: 1px solid rgba(226, 232, 240, 0.9);padding-top: 0.9rem;margin-top: 0.9rem;}
.result-block-hero{border-top: none;padding-top: 0;margin-top: 0;}
.result-label{font-size: 0.8rem;font-weight: 800;letter-spacing: 0.04em;text-transform: uppercase;color: rgba(15, 23, 42, 0.55);}
.result-value{font-size: clamp(2rem, 3.2vw, 2.75rem);font-weight: 900;color: #0f172a;margin-top: 0.2rem;}
.result-formula{margin-top: 0.5rem;color: rgba(15, 23, 42, 0.65);font-weight: 600;background: rgba(248, 250, 252, 0.85);border: 1px solid rgba(226, 232, 240, 0.9);padding: 0.75rem;border-radius: 12px;}
.result-title{font-size: 0.95rem;font-weight: 900;color: rgba(15, 23, 42, 0.85);margin: 0 0 0.75rem;}
.result-kpi-grid{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 0.6rem;}
.kpi-item{border: 1px solid rgba(226, 232, 240, 0.9);border-radius: 14px;padding: 0.75rem;background: rgba(255, 255, 255, 0.8);}
.kpi-label{display: block;font-size: 0.75rem;font-weight: 900;letter-spacing: 0.04em;text-transform: uppercase;color: rgba(15, 23, 42, 0.55);}
.kpi-value{display: block;margin-top: 0.25rem;font-weight: 900;color: rgba(15, 23, 42, 0.85);}
.chart-shell{border: 1px solid rgba(226, 232, 240, 0.9);border-radius: 14px;padding: 0.85rem;background: rgba(248, 250, 252, 0.85);height: 280px;}
.chart-shell-sm{height: 190px;margin-top: 0.75rem;}
.year-summary{border: 1px solid #e5e7eb;border-radius: 6px;margin-bottom: 0.5rem;overflow: hidden;}
.year-header{background: #f9fafb;padding: 1rem;cursor: pointer;display: flex;justify-content: space-between;align-items: center;transition: background-color 0.2s;}
.year-header:hover{background: #f3f4f6;}
.year-title{font-weight: 600;color: #374151;}
.year-totals{display: flex;gap: 2rem;font-size: 0.875rem;color: #6b7280;}
.expand-icon{width: 20px;height: 20px;color: #9ca3af;transition: transform 0.3s;}
.year-summary.expanded .expand-icon{transform: rotate(180deg);}
.monthly-details{display: none;border-top: 1px solid #e5e7eb;}
.year-summary.expanded .monthly-details{display: block;}
.monthly-table{width: 100%;border-collapse: collapse;}
.monthly-table th,.monthly-table td{padding: 0.75rem;text-align: right;border-bottom: 1px solid #f3f4f6;}
.monthly-table th{background: #f9fafb;font-weight: 600;color: #374151;font-size: 0.875rem;}
.monthly-table td{font-size: 0.875rem;color: #6b7280;}
.monthly-table td:first-child{text-align: left;font-weight: 500;}
.share-modal{display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);}
.share-modal-content{background-color: #ffffff;margin: 15% auto;padding: 3rem 4rem;border-radius: 8px;width: 90%;max-width: 750px;position: relative;}
.share-modal-close{position: absolute;right: 3rem;top: 3rem;font-size: 1.5rem;font-weight: bold;cursor: pointer;color: #9ca3af;}
.share-modal-close:hover{color: #374151;}
.share-url-container{display: flex;gap: 0.5rem;margin-top: 1rem;}
.share-url-input{flex: 1;padding: 0.75rem;border: 1px solid #d1d5db;border-radius: 6px;font-size: 0.875rem;}
.btn-copy-url{padding: 0.75rem 1rem;background: #3b82f6;color: #ffffff;border: none;border-radius: 6px;cursor: pointer;font-size: 0.875rem;font-weight: 500;}
.btn-copy-url:hover{background: #2563eb;}
.info-section{background: #ffffff;border-radius: 12px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);padding: 2rem;margin-bottom: 2rem;animation: fadeInUp 0.6s ease-out 0.2s both;}
.info-section h2{font-size: 1.75rem;font-weight: 700;color: #1a202c;margin-bottom: 1.5rem;}
@keyframes fadeInDown{from{opacity: 0;transform: translateY(-20px);}to{opacity: 1;transform: translateY(0);}}
@keyframes fadeInUp{from{opacity: 0;transform: translateY(20px);}to{opacity: 1;transform: translateY(0);}}
@media (max-width: 992px){.auto-loan-ui-grid{grid-template-columns: 1fr;}.result-kpi-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}.chart-shell{height: 260px;}}
@media (max-width: 768px){.auto-loan-calculator-wrapper{padding: 1rem 0 1.5rem;}.calculator-card{padding: 1rem;}.input-grid-2{grid-template-columns: 1fr;}.actions-row{grid-template-columns: 1fr;}.result-kpi-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}.year-totals{flex-direction: column;gap: 0.5rem;align-items: flex-start;}.monthly-table{font-size: 0.75rem;}.monthly-table th,.monthly-table td{padding: 0.5rem 0.25rem;}.share-modal-content{padding: 1.5rem;}}
@media (max-width: 480px){.result-kpi-grid{grid-template-columns: 1fr;}.tools-row{gap: 0.4rem;}.tool-chip{width: 100%;}}
.visually-hidden{position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}
*:focus-visible{outline: 2px solid #3b82f6;outline-offset: 2px;}