/* Purpose-built financial planners; all selectors are scoped to this workspace. */
.usp {
  --usp-bg: #171528;
  --usp-panel: #242039;
  --usp-line: #514565;
  --usp-text: #f5f1ff;
  --usp-muted: #c8bfd9;
  --usp-accent: #ba9aff;
  color: var(--usp-text);
  max-width: 1500px;
  margin: 0 auto;
  padding: 16px;
  font-family: inherit;
}
.usp * { box-sizing: border-box; }
.usp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  padding: 32px;
  border: 1px solid #77628e;
  border-radius: 24px;
  background: linear-gradient(120deg, #392654, #211d38 75%);
}
.usp-hero h1 { color: white; margin: 12px 0; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.15; }
.usp-hero p { max-width: 800px; color: #e3d8f2; line-height: 1.7; }
.usp-eyebrow { font-size: .78rem; letter-spacing: .13em; font-weight: 700; color: #d9c1ff; }
.usp-steps { display: grid; gap: 16px; align-content: center; list-style: none; padding: 0; }
.usp-steps b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #6846a0; margin-right: 12px; }
.usp-toolbar, .usp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; }
.usp button, .usp-file {
  border: 1px solid #79668f;
  border-radius: 10px;
  color: #f5efff;
  background: #3b304f;
  padding: 11px 16px;
  cursor: pointer;
  font: inherit;
  line-height: 1.3;
}
.usp button:hover, .usp-file:hover { background: #57406f; }
.usp button:disabled { opacity: .5; cursor: not-allowed; }
.usp button:focus-visible, .usp input:focus-visible, .usp summary:focus-visible { outline: 3px solid #e0c7ff; outline-offset: 3px; }
.usp .usp-primary { background: #8857cf; color: white; border-color: #bc93ef; font-weight: 700; }
.usp-grid { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(0, 1.6fr); gap: 20px; align-items: start; }
.usp-panel { background: var(--usp-panel); border: 1px solid var(--usp-line); border-radius: 18px; padding: 22px; min-width: 0; margin-bottom: 18px; }
.usp-panel h2 { font-size: 1.25rem; margin: 0 0 16px; color: white; }
.usp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; margin: 18px 0; }
.usp-field { display: grid; align-content: start; gap: 8px; font-size: .9rem; color: var(--usp-muted); }
.usp input:not([type=checkbox]):not([type=file]) { width: 100%; min-width: 0; color: white; background: #151323; border: 1px solid #766585; border-radius: 8px; padding: 12px; font: inherit; }
.usp input[type=checkbox] { width: 20px; height: 20px; accent-color: #a67af0; }
.usp-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.usp details { border-top: 1px solid var(--usp-line); padding-top: 16px; margin-top: 18px; }
.usp summary { cursor: pointer; font-weight: 700; }
.usp-results { position: sticky; top: 14px; }
.usp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.usp-kpi { background: #191627; border: 1px solid #514266; border-radius: 14px; padding: 18px; overflow-wrap: anywhere; }
.usp-kpi:first-child { background: #3b2858; border-color: #b790ea; }
.usp-kpi span { display: block; color: #cec2dc; font-size: .83rem; min-height: 2.5em; }
.usp-kpi strong { display: block; font-size: clamp(1.2rem, 2vw, 1.85rem); margin-top: 10px; }
.usp-chart { width: 100%; height: 235px; display: block; margin: 14px 0; }
.usp-caption, .usp-hint { font-size: .88rem; color: var(--usp-muted); line-height: 1.6; }
.usp-status { padding: 12px 16px; border-left: 4px solid #b78ae9; background: #211b31; min-height: 45px; }
.usp-status[data-error=true] { border-color: #ff9393; color: #ffd6d6; }
.usp-table { overflow: auto; max-height: 440px; border: 1px solid var(--usp-line); border-radius: 10px; }
.usp table { border-collapse: collapse; width: 100%; font-size: .86rem; white-space: nowrap; }
.usp th, .usp td { padding: 12px 14px; text-align: right; border-bottom: 1px solid #514565; }
.usp th { background: #322740; position: sticky; top: 0; color: white; }
.usp th:first-child, .usp td:first-child { text-align: left; }
.usp li { margin-bottom: 9px; line-height: 1.6; }
.usp .usp-saved { display: flex; gap: 8px; flex-wrap: wrap; }
.usp-scenario { border: 1px solid var(--usp-line); border-radius: 12px; padding: 12px; }
.usp-bar { display: grid; grid-template-columns: 1fr auto; gap: 10px; border-bottom: 1px solid var(--usp-line); padding: 10px 0; font-size: .9rem; }
.usp a { color: #d6b7ff; }
.usp [hidden] { display: none !important; }
@media (max-width: 1000px) {
  .usp-grid { grid-template-columns: 1fr; }
  .usp-results { position: static; }
  .usp-hero { grid-template-columns: 1fr; }
  .usp-steps { display: flex; flex-wrap: wrap; }
}
@media (max-width: 550px) {
  .usp { padding: 6px; }
  .usp-hero, .usp-panel { padding: 18px; }
  .usp-kpis { grid-template-columns: 1fr 1fr; }
  .usp-fields { grid-template-columns: 1fr; }
  .usp-toolbar button, .usp-file { flex: 1 1 auto; text-align: center; }
}
@media print {
  body * { visibility: hidden; }
  .usp, .usp * { visibility: visible; }
  .usp { position: absolute; inset: 0; color: #111; background: white; max-width: none; }
  .usp-toolbar, .usp-inputs, .usp-actions, .usp-saved, .usp-steps { display: none !important; }
  .usp-grid { display: block; }
  .usp-results { position: static; }
  .usp-panel, .usp-hero, .usp-kpi { background: white; color: #111; border-color: #aaa; }
  .usp h1, .usp h2, .usp p, .usp span, .usp strong, .usp li, .usp a { color: #111; }
  .usp-table { max-height: none; overflow: visible; }
}

.usp-results { min-width: 0; }
.usp-grid > * { min-width: 0; }