:root{--color-background: #f9fafb;--color-surface: #ffffff;--color-surface-muted: #f3f4f6;--color-border: #e5e7eb;--color-border-strong: #d1d5db;--color-text-primary: #1f2937;--color-text-secondary: #4b5563;--color-text-muted: #6b7280;--color-primary: #0b7f73;--color-primary-hover: #096b61;--color-accent: #004a8f;--color-error: #b91c1c;--color-sidebar-start: #064e3b;--color-sidebar-end: #065f46;color:var(--color-text-primary);background:var(--color-background);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;line-height:1.5;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);min-height:100vh}.workspace{display:flex;flex-direction:column;gap:32px;padding:48px}.copy-block{max-width:780px}.brand-title{color:var(--color-text-primary);font-size:clamp(3rem,8vw,6rem);font-weight:850;line-height:.96;margin:0;max-width:100%}.brand-title span{color:var(--color-accent);font-weight:900}.headline-subtitle{color:var(--color-text-primary);font-size:clamp(1.3rem,3vw,2rem);font-weight:800;margin:10px 0 0}.copy-block p:last-child{color:var(--color-text-secondary);font-size:1.05rem;margin:20px 0 0;max-width:680px}.calculator-grid{align-items:stretch;display:grid;gap:24px;grid-template-columns:minmax(280px,420px) minmax(320px,1fr)}.control-panel,.result-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 18px 50px #1f293714}.control-panel{display:grid;gap:22px;padding:24px}label{color:var(--color-text-secondary);display:grid;font-size:.9rem;font-weight:750;gap:8px}input,select{background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:6px;color:var(--color-text-primary);min-height:46px;outline:none;padding:0 12px;width:100%}input:focus,select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #10b98129}input:hover,select:hover{border-color:var(--color-primary)}button{background:var(--color-primary);border:0;border-radius:6px;color:var(--color-surface);cursor:pointer}button:hover{background:var(--color-primary-hover)}.money-input{display:grid;gap:8px;grid-template-columns:minmax(0,1fr) 104px}.range-row{align-items:center;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) 76px}.range-row strong{color:var(--color-primary)}input[type=range]{appearance:none;background:linear-gradient(90deg,var(--color-primary) var(--range-progress, 0%),var(--color-border) var(--range-progress, 0%));border:0;border-radius:999px;cursor:pointer;height:6px;min-height:6px;padding:0}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--color-primary);border:2px solid var(--color-surface);border-radius:999px;box-shadow:0 2px 8px #1f29372e;height:18px;width:18px}input[type=range]::-moz-range-track{background:var(--color-border);border-radius:999px;height:6px}input[type=range]::-moz-range-progress{background:var(--color-primary);border-radius:999px;height:6px}input[type=range]::-moz-range-thumb{background:var(--color-primary);border:2px solid var(--color-surface);border-radius:999px;box-shadow:0 2px 8px #1f29372e;height:16px;width:16px}input[type=range]:hover::-webkit-slider-thumb,input[type=range]:focus::-webkit-slider-thumb{background:var(--color-primary-hover)}input[type=range]:hover::-moz-range-thumb,input[type=range]:focus::-moz-range-thumb{background:var(--color-primary-hover)}input[type=range]:focus{box-shadow:0 0 0 3px #10b98129}.line-details{border-top:1px solid var(--color-border);display:grid;gap:12px;margin:0;padding-top:18px}.line-details div{align-items:center;display:flex;justify-content:space-between}dt{color:var(--color-text-muted)}dd{color:var(--color-primary);font-weight:800;margin:0}.result-panel{display:flex;flex-direction:column;gap:22px;justify-content:space-between;min-height:100%;padding:28px}.state{color:var(--color-text-secondary);margin:0}.error{color:var(--color-error)}.main-result{border-bottom:1px solid var(--color-border);display:grid;gap:8px;padding-bottom:24px}.main-result span,.metrics span{color:var(--color-text-muted);font-size:.9rem;font-weight:750}.main-result strong{color:var(--color-primary);font-size:clamp(2.4rem,6vw,4.6rem);font-weight:900;letter-spacing:0;line-height:1;overflow-wrap:anywhere}small{color:var(--color-text-muted)}.metrics{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}.metrics article{background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:8px;display:grid;gap:6px;min-height:126px;padding:18px}.metrics strong{color:var(--color-primary);font-size:1.35rem;font-weight:850;line-height:1.15;overflow-wrap:anywhere}.rates-strip{align-items:center;border-top:1px solid var(--color-border);color:var(--color-text-muted);display:flex;flex-wrap:wrap;font-size:.86rem;gap:12px 20px;padding-top:18px}.site-footer{align-items:flex-start;color:var(--color-text-muted);display:flex;flex-wrap:wrap;font-size:.92rem;gap:10px 18px}.site-footer p{flex-basis:100%;margin:0;max-width:780px}.site-footer div{align-items:center;display:flex;flex-wrap:wrap;gap:10px 18px}.site-footer a{color:var(--color-primary);font-weight:750;text-decoration-color:#10b98159;text-underline-offset:4px}.site-footer a:hover{color:var(--color-primary-hover)}.context-panel{background:linear-gradient(180deg,var(--color-sidebar-start),var(--color-sidebar-end));color:var(--color-surface);display:grid;grid-template-rows:minmax(280px,44vh) minmax(0,1fr);min-height:100vh}.context-panel img{height:100%;object-fit:cover;width:100%}.context-panel div{display:grid;gap:12px;padding:28px}.context-panel p,.context-panel span,.context-panel a{color:#d1fae5;margin:0}.context-panel a{text-decoration-color:#d1fae573;text-underline-offset:4px}.context-panel a:hover{color:var(--color-surface)}.context-panel strong{color:var(--color-surface);font-size:1.8rem;line-height:1.08}@media(max-width:1060px){.app-shell{grid-template-columns:1fr}.context-panel{grid-template-columns:minmax(180px,32vw) 1fr;grid-template-rows:none;min-height:auto}}@media(max-width:820px){.workspace{padding:28px 18px}.calculator-grid,.metrics,.context-panel{grid-template-columns:1fr}.context-panel img{max-height:260px}}
