.app-shell{min-height:100vh;display:flex}.sidebar{background:var(--surface);border-right:1px solid var(--border-light);z-index:100;flex-direction:column;width:240px;padding:24px 16px;display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar-brand{align-items:center;gap:12px;margin-bottom:32px;padding:4px 12px;display:flex}.brand-icon{background:linear-gradient(135deg, var(--primary), var(--primary-light));border-radius:var(--radius-sm);color:#fff;width:36px;height:36px;box-shadow:var(--shadow-glow);justify-content:center;align-items:center;font-size:18px;font-weight:800;display:flex}.brand-name{color:var(--text-primary);letter-spacing:-.03em;font-size:20px;font-weight:700}.sidebar-nav{flex-direction:column;flex:1;gap:4px;display:flex}.nav-item{border-radius:var(--radius-sm);color:var(--text-secondary);transition:all var(--transition-fast);align-items:center;gap:12px;padding:10px 12px;font-size:15px;font-weight:500;text-decoration:none;display:flex;position:relative}.nav-item:hover{background:var(--surface-hover);color:var(--text-primary)}.nav-item--active{background:var(--primary-glow);color:var(--primary);font-weight:600}.nav-item--active:before{content:"";background:var(--primary);border-radius:0 4px 4px 0;width:4px;height:20px;position:absolute;top:50%;left:-4px;transform:translateY(-50%)}.nav-icon{text-align:center;flex-shrink:0;width:24px;font-size:18px}.sidebar-footer{border-top:1px solid var(--border-light);padding:16px 12px}.sidebar-user{align-items:center;gap:10px;margin-bottom:12px;display:flex}.sidebar-user-avatar{background:var(--primary-glow);width:32px;height:32px;color:var(--primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex}.sidebar-user-info{flex-direction:column;min-width:0;display:flex}.sidebar-user-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.sidebar-user-email{color:var(--text-tertiary);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.sidebar-signin-btn{border-radius:var(--radius-sm);background:var(--primary);color:#fff;cursor:pointer;width:100%;transition:all var(--transition-fast);border:none;margin-bottom:8px;padding:8px 12px;font-family:inherit;font-size:13px;font-weight:600}.sidebar-signin-btn:hover{background:var(--primary-dark);box-shadow:0 2px 8px #6c63ff4d}.sidebar-logout{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;padding:8px 12px;font-family:inherit;font-size:13px;font-weight:500}.sidebar-logout:hover{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}.main-content{background:var(--bg);flex:1;min-height:100vh;margin-left:240px}.page-container{max-width:960px;margin:0 auto;padding:32px 40px;animation:.3s fadeIn}@media (width<=768px){.sidebar{border-right:none;border-top:1px solid var(--border-light);flex-direction:row;width:100%;height:auto;padding:8px 16px;position:fixed;inset:auto 0 0;box-shadow:0 -4px 12px #0000000d}.sidebar-brand,.sidebar-footer{display:none}.sidebar-nav{flex-direction:row;justify-content:space-around;gap:0;width:100%}.nav-item{flex-direction:column;gap:2px;padding:8px 12px;font-size:11px}.nav-item--active:before{display:none}.nav-icon{font-size:20px}.nav-label{font-size:11px}.main-content{margin-left:0;padding-bottom:80px}.page-container{padding:20px 16px}}.landing{background:var(--bg);min-height:100vh}.landing-nav{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:20px 48px;display:flex}.landing-nav-brand{align-items:center;gap:12px;display:flex}.landing-brand-icon{background:linear-gradient(135deg, var(--primary), var(--primary-light));border-radius:var(--radius-sm);color:#fff;width:40px;height:40px;box-shadow:var(--shadow-glow);justify-content:center;align-items:center;font-size:20px;font-weight:800;display:flex}.landing-brand-name{color:var(--text-primary);letter-spacing:-.03em;font-size:22px;font-weight:800}.landing-nav-actions{gap:10px;display:flex}.landing-btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:none;justify-content:center;align-items:center;padding:10px 22px;font-family:inherit;font-size:14px;font-weight:600;display:inline-flex}.landing-btn:active{transform:scale(.97)}.landing-btn--primary{background:var(--primary);color:#fff;box-shadow:0 2px 12px #6c63ff4d}.landing-btn--primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 20px #6c63ff66}.landing-btn--ghost{color:var(--text-secondary);background:0 0}.landing-btn--ghost:hover{color:var(--text-primary);background:var(--surface-hover)}.landing-btn--outline{border:2px solid var(--primary);color:var(--primary);background:0 0}.landing-btn--outline:hover{background:var(--primary-glow)}.landing-btn--white{color:var(--primary);background:#fff}.landing-btn--white:hover{background:#f0f0ff;transform:translateY(-1px)}.landing-btn--outline-white{color:#fff;background:0 0;border:2px solid #fff6}.landing-btn--outline-white:hover{background:#ffffff1a;border-color:#fff}.landing-btn--large{border-radius:var(--radius-md);padding:14px 32px;font-size:16px}.landing-hero{grid-template-columns:1fr 1fr;align-items:center;gap:64px;max-width:1200px;margin:0 auto;padding:80px 48px 100px;display:grid}.landing-badge{background:var(--primary-glow);color:var(--primary);border-radius:var(--radius-full);margin-bottom:20px;padding:6px 16px;font-size:13px;font-weight:600;display:inline-block}.landing-headline{letter-spacing:-.04em;color:var(--text-primary);margin-bottom:20px;font-size:52px;font-weight:800;line-height:1.1}.landing-headline-accent{background:linear-gradient(135deg, var(--primary), var(--primary-light));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.landing-subheadline{color:var(--text-secondary);max-width:500px;margin-bottom:36px;font-size:18px;line-height:1.6}.landing-cta-group{flex-wrap:wrap;gap:12px;display:flex}.landing-cta-note{color:var(--text-tertiary);margin-top:14px;font-size:13px}.landing-hero-visual{height:420px;position:relative}.landing-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--shadow-lg);min-width:220px;padding:24px 28px;position:absolute}.landing-card--1{color:#fff;background:linear-gradient(135deg,#6c63ff 0%,#8b83ff 50%,#a78bfa 100%);border:none;animation:.6s .1s both slideUp;top:0;left:20px}.landing-card--1 .landing-card-label{color:#ffffffb3}.landing-card--1 .landing-card-value{color:#fff}.landing-card--2{text-align:center;animation:.6s .25s both slideUp;top:80px;right:0}.landing-card--3{animation:.6s .4s both slideUp;bottom:40px;left:40px}.landing-card-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:12px;font-weight:500}.landing-card-value{letter-spacing:-.03em;color:var(--text-primary);font-size:32px;font-weight:800}.landing-card-score{letter-spacing:-.04em;color:var(--primary);margin-bottom:8px;font-size:48px;font-weight:800;line-height:1}.landing-card-badge{background:var(--success-bg);color:var(--success);border-radius:var(--radius-full);padding:4px 12px;font-size:12px;font-weight:600;display:inline-block}.landing-card-sub{color:var(--text-secondary);margin-top:4px;font-size:14px}.landing-card--1 .landing-card-sub{color:#ffffffb3}.landing-features{text-align:center;max-width:1200px;margin:0 auto;padding:80px 48px}.landing-section-title{letter-spacing:-.03em;margin-bottom:8px;font-size:36px;font-weight:800}.landing-section-subtitle{color:var(--text-secondary);margin-bottom:48px;font-size:18px}.landing-features-grid{text-align:left;grid-template-columns:repeat(4,1fr);gap:20px;display:grid}.landing-feature{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);transition:all var(--transition-fast);padding:28px 24px}.landing-feature:hover{border-color:var(--primary);box-shadow:var(--shadow-md), 0 0 0 1px var(--primary-glow-strong);transform:translateY(-4px)}.landing-feature-icon{background:var(--primary-glow);width:44px;height:44px;color:var(--primary);border-radius:var(--radius-sm);justify-content:center;align-items:center;margin-bottom:16px;font-size:20px;display:flex}.landing-feature h3{margin-bottom:8px;font-size:16px;font-weight:700}.landing-feature p{color:var(--text-secondary);font-size:14px;line-height:1.5}.landing-cta-section{max-width:1200px;margin:0 auto;padding:0 48px 100px}.landing-cta-card{border-radius:var(--radius-xl);text-align:center;color:#fff;background:linear-gradient(135deg,#6c63ff 0%,#8b83ff 50%,#a78bfa 100%);padding:64px}.landing-cta-card h2{letter-spacing:-.03em;color:#fff;margin-bottom:8px;font-size:32px;font-weight:800}.landing-cta-card p{color:#fffc;margin-bottom:32px;font-size:18px}.landing-cta-card .landing-cta-group{justify-content:center}.landing-footer{border-top:1px solid var(--border-light);max-width:1200px;color:var(--text-tertiary);justify-content:space-between;margin:0 auto;padding:24px 48px;font-size:13px;display:flex}@media (width<=768px){.landing-nav{padding:16px 20px}.landing-hero{grid-template-columns:1fr;gap:40px;padding:40px 20px 60px}.landing-headline{font-size:36px}.landing-subheadline{font-size:16px}.landing-hero-visual{height:300px}.landing-card{min-width:180px;padding:18px 20px}.landing-card--1{left:0}.landing-card--2{top:60px;right:0}.landing-card--3{bottom:20px;left:10px}.landing-card-value{font-size:24px}.landing-card-score{font-size:36px}.landing-features{padding:40px 20px}.landing-features-grid{grid-template-columns:1fr}.landing-section-title{font-size:28px}.landing-cta-section{padding:0 20px 60px}.landing-cta-card{padding:40px 24px}.landing-cta-card h2{font-size:24px}.landing-footer{text-align:center;flex-direction:column;gap:8px;padding:20px}}.loan-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);cursor:pointer;transition:all var(--transition-fast);margin-bottom:12px;padding:20px 24px;animation:.3s both fadeIn}.loan-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md), 0 0 0 1px var(--primary-glow-strong);transform:translateY(-2px)}.loan-card:active{box-shadow:var(--shadow-sm);transform:translateY(0)}.loan-card-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.loan-card-amount{color:var(--text-primary);letter-spacing:-.02em;font-size:24px;font-weight:700}.loan-badge{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;padding:4px 12px;font-size:12px;font-weight:600}.loan-badge--active{background:var(--success-bg);color:var(--success)}.loan-badge--paid_off{background:var(--primary-glow);color:var(--primary)}.loan-badge--defaulted{background:var(--danger-bg);color:var(--danger)}.loan-card-details{border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light);align-items:center;gap:16px;padding:12px 0;display:flex}.loan-detail{flex-direction:column;flex:1;gap:2px;display:flex}.loan-detail-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:500}.loan-detail-value{color:var(--text-primary);font-size:15px;font-weight:600}.loan-detail-divider{background:var(--border-light);width:1px;height:32px}.loan-card-footer{padding-top:12px}.loan-card-view{color:var(--primary);transition:gap var(--transition-fast);align-items:center;gap:4px;font-size:13px;font-weight:600;display:inline-flex}.loan-card:hover .loan-card-view{gap:8px}.dashboard-greeting{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.dashboard-title{letter-spacing:-.03em;font-size:28px;font-weight:800}.dashboard-stats{grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:24px;display:grid}.stat-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);flex-direction:column;gap:8px;padding:20px 24px;animation:.4s both slideUp;display:flex;position:relative;overflow:hidden}.stat-card--hero{color:#fff;background:linear-gradient(135deg,#6c63ff 0%,#8b83ff 50%,#a78bfa 100%);border:none}.stat-card--hero .stat-label{color:#ffffffbf}.stat-card--hero .stat-value{color:#fff}.stat-card-inner{z-index:1;flex-direction:column;gap:8px;display:flex;position:relative}.stat-card-accent{background:#ffffff1a;border-radius:50%;width:120px;height:120px;position:absolute;top:-20px;right:-20px}.stat-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;font-size:13px;font-weight:500}.stat-value{color:var(--text-primary);letter-spacing:-.03em;font-size:28px;font-weight:800}.stat-value--large{font-size:36px}.stat-value--score{color:var(--primary)}.dashboard-quickpay{background:var(--surface);border:2px solid var(--primary-glow-strong);border-radius:var(--radius-lg);justify-content:space-between;align-items:center;margin-bottom:28px;padding:18px 24px;animation:.4s .1s both scaleIn;display:flex}.quickpay-info{flex-direction:column;gap:2px;display:flex}.quickpay-label{color:var(--text-secondary);font-size:13px;font-weight:500}.quickpay-loan{color:var(--text-primary);font-size:16px;font-weight:600}.dashboard-section{animation:.4s .2s both fadeIn}.section-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.section-title{font-size:18px;font-weight:700}.empty-state{text-align:center;background:var(--surface);border-radius:var(--radius-lg);border:2px dashed var(--border);padding:48px 24px}.empty-icon{opacity:.3;margin-bottom:12px;font-size:40px}.empty-title{margin-bottom:6px;font-size:18px;font-weight:600}.empty-text{color:var(--text-secondary);margin-bottom:20px;font-size:14px}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:none;justify-content:center;align-items:center;gap:6px;padding:10px 20px;font-size:14px;font-weight:600;display:inline-flex}.btn:active{transform:scale(.97)}.btn--primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px #6c63ff4d}.btn--primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 16px #6c63ff66}.btn--primary:active{transform:translateY(0)scale(.97)}.btn--glow{animation:2s infinite glow}.btn--ghost{color:var(--primary);background:0 0;padding:8px 12px}.btn--ghost:hover{background:var(--primary-glow)}.btn--outline{border:2px solid var(--primary);color:var(--primary);background:0 0}.btn--outline:hover{background:var(--primary-glow)}.btn--danger{background:var(--danger);color:#fff}.btn--danger:hover{background:#dc2626}.btn--large{border-radius:var(--radius-md);padding:14px 28px;font-size:16px}.btn--full{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}@media (width<=768px){.dashboard-stats{grid-template-columns:1fr}.dashboard-greeting{flex-direction:column;align-items:flex-start;gap:12px}}.loans-page{animation:.3s fadeIn}.loans-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.loans-title{letter-spacing:-.03em;font-size:28px;font-weight:800}.loans-filters{gap:8px;margin-bottom:20px;display:flex}.filter-chip{border-radius:var(--radius-full);border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;display:inline-flex}.filter-chip:hover{border-color:var(--primary);color:var(--primary)}.filter-chip--active{background:var(--primary);border-color:var(--primary);color:#fff}.filter-chip--active:hover{background:var(--primary-dark);color:#fff}.filter-count{border-radius:var(--radius-full);background:#0000001a;padding:1px 6px;font-size:11px;font-weight:700}.filter-chip--active .filter-count{background:#ffffff40}.loans-summary{margin-bottom:16px}.loans-summary-text{color:var(--text-tertiary);font-size:13px;font-weight:500}.loans-list>div{animation:.3s both fadeIn}.payment-row{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-md);transition:all var(--transition-fast);justify-content:space-between;align-items:center;margin-bottom:8px;padding:14px 20px;animation:.3s both fadeIn;display:flex}.payment-row:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}.payment-row-left{align-items:center;gap:14px;display:flex}.payment-icon{border-radius:var(--radius-sm);justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;font-weight:700;display:flex}.payment-icon.status--success{background:var(--success-bg);color:var(--success)}.payment-icon.status--warning{background:var(--warning-bg);color:var(--warning)}.payment-icon.status--danger{background:var(--danger-bg);color:var(--danger)}.payment-info{flex-direction:column;gap:1px;display:flex}.payment-info-amount{color:var(--text-primary);font-size:15px;font-weight:600}.payment-info-date{color:var(--text-tertiary);font-size:13px}.payment-row-right{align-items:center;gap:12px;display:flex}.payment-type-badge{color:var(--text-tertiary);background:var(--bg);border-radius:var(--radius-full);padding:3px 10px;font-size:12px;font-weight:500}.payment-status{font-size:13px;font-weight:600}.payment-status.status--success{color:var(--success)}.payment-status.status--warning{color:var(--warning)}.payment-status.status--danger{color:var(--danger)}.payments-page{animation:.3s fadeIn}.payments-header{justify-content:space-between;align-items:flex-start;margin-bottom:24px;display:flex}.payments-title{letter-spacing:-.03em;font-size:28px;font-weight:800}.payments-subtitle{color:var(--text-secondary);margin-top:4px;font-size:14px}.payments-summary-cards{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;display:grid}.payments-summary-card{background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border-light);flex-direction:column;gap:6px;padding:18px 20px;animation:.4s both slideUp;display:flex}.payments-summary-card:nth-child(2){animation-delay:50ms}.payments-summary-card:nth-child(3){animation-delay:.1s}.payments-summary-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:500}.payments-summary-value{color:var(--text-primary);letter-spacing:-.02em;font-size:24px;font-weight:800}.payments-summary--success{color:var(--success)}.payments-filters{gap:8px;margin-bottom:16px;display:flex}.payments-list>div{animation:.3s both fadeIn}@media (width<=768px){.payments-summary-cards{grid-template-columns:1fr}}.gauge-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);padding:32px 24px;animation:.4s both scaleIn}.gauge-visual{justify-content:center;margin-bottom:28px;display:flex}.gauge-ring{width:180px;height:180px;position:relative}.gauge-svg{width:100%;height:100%}.gauge-progress{transition:stroke-dasharray 1s}.gauge-center{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.gauge-score{letter-spacing:-.03em;font-size:40px;font-weight:800;line-height:1}.gauge-label{color:var(--text-secondary);margin-top:4px;font-size:14px;font-weight:600}.gauge-stats{grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px;display:grid}.gauge-stat{background:var(--bg);border-radius:var(--radius-sm);flex-direction:column;align-items:center;gap:2px;padding:12px 4px;display:flex}.gauge-stat-value{color:var(--text-primary);font-size:20px;font-weight:700}.gauge-stat--success{color:var(--success)!important}.gauge-stat--warning{color:var(--warning)!important}.gauge-stat--danger{color:var(--danger)!important}.gauge-stat-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:500}.gauge-total{border-top:1px solid var(--border-light);justify-content:space-between;align-items:center;padding:16px 0 0;display:flex}.gauge-total-label{color:var(--text-secondary);font-size:14px;font-weight:500}.gauge-total-value{color:var(--text-primary);font-size:20px;font-weight:700}.profile-page{animation:.3s fadeIn}.profile-title{letter-spacing:-.03em;margin-bottom:4px;font-size:28px;font-weight:800}.profile-subtitle{color:var(--text-secondary);margin-bottom:28px;font-size:14px}.profile-grid{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:32px;display:grid}.profile-main{min-width:0}.profile-aside{flex-direction:column;gap:16px;display:flex}.profile-loading{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);overflow:hidden}.loading-shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200% 100%;animation:1.5s infinite shimmer}.profile-info-card,.profile-ranges{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);padding:20px 24px;animation:.4s both fadeIn}.profile-info-title{margin-bottom:16px;font-size:15px;font-weight:600}.profile-info-items{flex-direction:column;gap:14px;display:flex}.profile-info-item{align-items:flex-start;gap:12px;display:flex}.profile-info-bullet{border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:6px}.profile-info-item strong{color:var(--text-primary);font-size:13px;font-weight:600;display:block}.profile-info-item p{color:var(--text-secondary);margin-top:1px;font-size:12px}.range-items{flex-direction:column;gap:8px;display:flex}.range-item{align-items:center;gap:10px;display:flex}.range-bar{border-radius:2px;width:4px;height:24px}.range-label{color:var(--text-primary);min-width:70px;font-size:13px;font-weight:600}.range-name{color:var(--text-secondary);font-size:13px}.profile-recent{animation:.4s .2s both fadeIn}.profile-recent .section-title{margin-bottom:12px;font-size:18px;font-weight:700}@media (width<=768px){.profile-grid{grid-template-columns:1fr}}.chart-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);animation:.4s both fadeIn;overflow:hidden}.chart-header{justify-content:space-between;align-items:center;padding:20px 24px 0;display:flex}.chart-title{font-size:16px;font-weight:600}.chart-legend{gap:16px;display:flex}.legend-item{color:var(--text-secondary);align-items:center;gap:6px;font-size:12px;font-weight:500;display:flex}.legend-dot{border-radius:50%;width:8px;height:8px}.chart-body{padding:16px 8px 8px}.projection-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);padding:24px;animation:.4s both fadeIn}.projection-title{margin-bottom:20px;font-size:16px;font-weight:600}.projection-progress-section{margin-bottom:24px}.projection-progress-labels{justify-content:space-between;margin-bottom:8px;display:flex}.projection-progress-text{color:var(--text-secondary);font-size:13px;font-weight:500}.projection-progress-pct{color:var(--primary);font-size:13px;font-weight:700}.projection-bar{background:var(--bg);border-radius:var(--radius-full);height:8px;overflow:hidden}.projection-bar-fill{background:linear-gradient(90deg, var(--primary), var(--primary-light));border-radius:var(--radius-full);min-width:4px;height:100%;transition:width 1s}.projection-metrics{grid-template-columns:1fr 1fr;gap:12px;display:grid}.projection-metric{background:var(--bg);border-radius:var(--radius-sm);flex-direction:column;gap:4px;padding:14px;display:flex}.projection-metric-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:500}.projection-metric-value{color:var(--text-primary);font-size:18px;font-weight:700}.projection-metric--highlight{color:var(--primary)}.loan-detail-page{animation:.3s fadeIn}.back-btn{color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;align-items:center;gap:4px;margin-bottom:20px;padding:8px 0;font-size:14px;font-weight:500;display:inline-flex}.back-btn:hover{color:var(--primary)}.detail-hero{background:var(--surface);border-radius:var(--radius-xl);border:1px solid var(--border-light);justify-content:space-between;align-items:center;margin-bottom:20px;padding:32px;animation:.4s both slideUp;display:flex}.detail-hero-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:13px;font-weight:500}.detail-hero-amount{letter-spacing:-.04em;color:var(--text-primary);margin-bottom:12px;font-size:44px;font-weight:800}.detail-metrics{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;display:grid}.detail-metric{background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border-light);flex-direction:column;gap:6px;padding:18px 20px;animation:.4s both slideUp;display:flex}.detail-metric:nth-child(2){animation-delay:50ms}.detail-metric:nth-child(3){animation-delay:.1s}.detail-metric:nth-child(4){animation-delay:.15s}.detail-metric-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:500}.detail-metric-value{color:var(--text-primary);letter-spacing:-.02em;font-size:22px;font-weight:700}.detail-content{grid-template-columns:1.2fr 1fr;gap:16px;margin-bottom:28px;display:grid}.detail-loading{animation:1.5s infinite pulse}.detail-schedule{animation:.4s .3s both fadeIn}.detail-schedule .section-title{margin-bottom:16px;font-size:18px;font-weight:700}.schedule-table-wrapper{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);overflow:hidden}.schedule-table{border-collapse:collapse;width:100%;font-size:13px}.schedule-table th{text-align:left;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;background:var(--bg);border-bottom:1px solid var(--border-light);padding:12px 16px;font-size:11px;font-weight:600}.schedule-table td{border-bottom:1px solid var(--border-light);color:var(--text-primary);padding:10px 16px}.schedule-table tbody tr:last-child td{border-bottom:none}.schedule-table tbody tr{transition:background var(--transition-fast)}.schedule-table tbody tr:hover{background:var(--bg)}.row-paid{opacity:.5}.schedule-status{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;font-size:11px;font-weight:600}.schedule-status--pending{background:var(--warning-bg);color:var(--warning)}.schedule-status--paid{background:var(--success-bg);color:var(--success)}.schedule-status--late{background:var(--danger-bg);color:var(--danger)}.schedule-status--skipped{background:var(--bg);color:var(--text-tertiary)}@media (width<=768px){.detail-metrics{grid-template-columns:repeat(2,1fr)}.detail-content{grid-template-columns:1fr}.detail-hero{flex-direction:column;align-items:flex-start;gap:16px}.detail-hero-amount{font-size:32px}.schedule-table-wrapper{overflow-x:auto}}.new-loan-page{animation:.3s fadeIn}.new-loan-layout{grid-template-columns:1.2fr 1fr;align-items:flex-start;gap:24px;display:grid}.new-loan-form-card{background:var(--surface);border-radius:var(--radius-xl);border:1px solid var(--border-light);padding:36px;animation:.4s both slideUp}.new-loan-title{letter-spacing:-.03em;margin-bottom:4px;font-size:24px;font-weight:800}.new-loan-subtitle{color:var(--text-secondary);margin-bottom:28px;font-size:14px}.new-loan-form{flex-direction:column;gap:20px;display:flex}.form-error{background:var(--danger-bg);color:var(--danger);border-radius:var(--radius-sm);padding:12px 16px;font-size:14px;font-weight:500;animation:.2s scaleIn}.form-group{flex-direction:column;flex:1;gap:6px;display:flex}.form-label{color:var(--text-secondary);font-size:13px;font-weight:600}.form-row{gap:16px;display:flex}.input-wrapper{align-items:center;display:flex;position:relative}.input-prefix{color:var(--text-tertiary);z-index:1;font-size:16px;font-weight:600;position:absolute;left:14px}.input-suffix{color:var(--text-tertiary);font-size:14px;font-weight:500;position:absolute;right:14px}.form-input{border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);width:100%;color:var(--text-primary);transition:all var(--transition-fast);outline:none;padding:12px 16px;font-size:16px}.form-input--prefixed{padding-left:32px}.form-input--suffixed{padding-right:42px}.form-input:hover{border-color:var(--text-tertiary)}.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.form-input::placeholder{color:var(--text-tertiary)}.form-actions{gap:12px;padding-top:8px;display:flex}.form-actions .btn{flex:1;padding:14px}.new-loan-preview{position:sticky;top:32px}.preview-card{background:var(--surface);border-radius:var(--radius-xl);border:1px solid var(--border-light);padding:28px;animation:.4s .1s both scaleIn}.preview-title{margin-bottom:24px;font-size:15px;font-weight:600}.preview-hero{text-align:center;margin-bottom:24px}.preview-hero-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:12px;font-weight:500;display:block}.preview-hero-value{color:var(--primary);letter-spacing:-.04em;transition:all var(--transition-base);font-size:40px;font-weight:800;display:block}.preview-details{background:var(--bg);border-radius:var(--radius-sm);flex-direction:column;gap:12px;margin-bottom:24px;padding:16px;display:flex}.preview-row{color:var(--text-secondary);justify-content:space-between;font-size:14px;display:flex}.preview-row-value{color:var(--text-primary);font-weight:600}.preview-bar-section{border-top:1px solid var(--border-light);padding-top:16px}.preview-bar-labels{color:var(--text-tertiary);justify-content:space-between;margin-bottom:8px;font-size:12px;font-weight:500;display:flex}.preview-bar{background:var(--warning-bg);border-radius:var(--radius-full);height:10px;overflow:hidden}.preview-bar-principal{background:linear-gradient(90deg, var(--primary), var(--primary-light));border-radius:var(--radius-full);height:100%;transition:width var(--transition-base)}.preview-empty{text-align:center;color:var(--text-tertiary);padding:40px 16px;font-size:14px}@media (width<=768px){.new-loan-layout{grid-template-columns:1fr}.new-loan-preview{position:static}.form-row{flex-direction:column;gap:20px}}.checkout-page{animation:.3s fadeIn}.checkout-layout{grid-template-columns:1.3fr 1fr;align-items:flex-start;gap:24px;display:grid}.checkout-card{background:var(--surface);border-radius:var(--radius-xl);border:1px solid var(--border-light);padding:36px;animation:.4s both slideUp}.checkout-title{letter-spacing:-.03em;margin-bottom:28px;font-size:24px;font-weight:800}.checkout-amount-section{text-align:center;border-bottom:1px solid var(--border-light);margin-bottom:24px;padding:24px 0 28px}.checkout-amount-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:12px;font-weight:500;display:block}.checkout-amount{color:var(--primary);letter-spacing:-.04em;font-size:48px;font-weight:800;animation:.4s both scaleIn;display:block}.checkout-due{color:var(--text-secondary);margin-top:6px;font-size:14px;display:block}.checkout-stripe-element{margin-bottom:24px}.checkout-secure{text-align:center;color:var(--text-tertiary);margin-top:16px;font-size:12px}.btn-loading{animation:1s infinite pulse}.checkout-empty{text-align:center;padding:40px 24px}.checkout-empty .empty-icon{color:var(--success);margin-bottom:12px;font-size:48px}.checkout-empty h3{margin-bottom:6px;font-size:20px;font-weight:700}.checkout-empty p{color:var(--text-secondary);margin-bottom:20px;font-size:14px}.checkout-loading .loading-shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200% 100%;animation:1.5s infinite shimmer}.checkout-sidebar{position:sticky;top:32px}.checkout-summary-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);padding:24px;animation:.4s .1s both scaleIn}.checkout-summary-title{margin-bottom:20px;font-size:15px;font-weight:600}.checkout-summary-rows{flex-direction:column;gap:12px;display:flex}.checkout-summary-row{color:var(--text-secondary);justify-content:space-between;font-size:14px;display:flex}.checkout-summary-row span:last-child{color:var(--text-primary);font-weight:600}.checkout-summary-row--total{border-top:1px solid var(--border-light);padding-top:12px;font-size:16px;font-weight:700}.checkout-summary-row--total span{color:var(--text-primary)!important;font-weight:700!important}@media (width<=768px){.checkout-layout{grid-template-columns:1fr}.checkout-sidebar{position:static}.checkout-amount{font-size:36px}}.auth-page{background:var(--bg);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{background:var(--surface);border-radius:var(--radius-xl);border:1px solid var(--border-light);width:100%;max-width:420px;box-shadow:var(--shadow-lg);padding:40px 36px;animation:.4s both scaleIn}.auth-brand{align-items:center;gap:12px;margin-bottom:32px;display:flex}.auth-brand-icon{background:linear-gradient(135deg, var(--primary), var(--primary-light));border-radius:var(--radius-md);color:#fff;width:44px;height:44px;box-shadow:var(--shadow-glow);justify-content:center;align-items:center;font-size:22px;font-weight:800;display:flex}.auth-brand-name{letter-spacing:-.03em;margin:0;font-size:24px;font-weight:800}.auth-title{margin-bottom:6px;font-size:22px;font-weight:700}.auth-subtitle{color:var(--text-secondary);margin-bottom:28px;font-size:14px}.auth-error{background:var(--danger-bg);color:var(--danger);border-radius:var(--radius-sm);margin-bottom:20px;padding:12px 16px;font-size:14px;font-weight:500;animation:.2s scaleIn}.auth-form{flex-direction:column;gap:18px;display:flex}.auth-field{flex-direction:column;gap:6px;display:flex}.auth-label{color:var(--text-secondary);font-size:13px;font-weight:600}.auth-input{border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);width:100%;color:var(--text-primary);transition:all var(--transition-fast);box-sizing:border-box;outline:none;padding:12px 16px;font-size:15px}.auth-input:hover{border-color:var(--text-tertiary)}.auth-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.auth-input::placeholder{color:var(--text-tertiary)}.auth-submit{border-radius:var(--radius-sm);background:var(--primary);color:#fff;cursor:pointer;width:100%;transition:all var(--transition-fast);border:none;margin-top:4px;padding:14px;font-size:15px;font-weight:600;box-shadow:0 2px 8px #6c63ff4d}.auth-submit:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 16px #6c63ff66}.auth-submit:active{transform:translateY(0)scale(.98)}.auth-submit:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.auth-footer{text-align:center;color:var(--text-secondary);margin-top:24px;font-size:14px}.auth-link{color:var(--primary);transition:color var(--transition-fast);font-weight:600;text-decoration:none}.auth-link:hover{color:var(--primary-dark)}*,:before,:after{box-sizing:border-box}:root{--primary:#6c63ff;--primary-light:#8b83ff;--primary-dark:#5549e8;--primary-glow:#6c63ff26;--primary-glow-strong:#6c63ff4d;--success:#22c55e;--success-bg:#f0fdf4;--warning:#f59e0b;--warning-bg:#fffbeb;--danger:#ef4444;--danger-bg:#fef2f2;--bg:#f8f9fc;--surface:#fff;--surface-hover:#f3f4f8;--surface-elevated:#fff;--border:#e5e7eb;--border-light:#f0f1f4;--text-primary:#111827;--text-secondary:#6b7280;--text-tertiary:#9ca3af;--text-inverse:#fff;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 30px #0000001f;--shadow-glow:0 0 20px #6c63ff40;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease;color:var(--text-primary);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5}body{min-height:100vh;margin:0}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{color:var(--text-primary);letter-spacing:-.02em;margin:0;font-weight:700}p{margin:0}a{color:var(--primary);text-decoration:none}button,input,select,textarea{font-family:inherit}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes glow{0%,to{box-shadow:0 0 20px #6c63ff33}50%{box-shadow:0 0 30px #6c63ff66}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}