.utility-switcher {
  display: flex;
  gap: 8px;
  margin: 22px 0 0;
  padding: 6px;
  border: 1px solid #273847;
  border-radius: 14px;
  background: #101925;
}

.utility-tab {
  flex: 1;
  min-height: 44px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #91a5b4;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
}

.utility-tab:hover { color: #dfeae8; background: #182633; }
.utility-tab.active { color: #e8fff8; border-color: #3b7569; background: #1d453e; }
[data-tool-panel][hidden] { display: none !important; }

.tool-page { margin-top: 32px; }
.tool-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.tool-hero h1 { margin: 0; color: #f7fafc; font-size: clamp(1.8rem, 4vw, 2.75rem); line-height: 1.08; letter-spacing: -.05em; }
.tool-badge { flex: none; margin-bottom: 4px; padding: 8px 12px; border: 1px solid #335246; border-radius: 999px; color: #8ee5c8; background: #142b29; font-size: .76rem; }

.upload-card, .loan-form, .loan-results, .schedule-card {
  border: 1px solid #2b3b49;
  border-radius: 18px;
  background: #141e2b;
}

.upload-card { padding: 24px; }
.drop-zone { display: grid; place-items: center; min-height: 220px; cursor: pointer; border: 2px dashed #3b5364; border-radius: 14px; background: #0e1824; text-align: center; transition: border-color .16s, background .16s; }
.drop-zone:hover, .drop-zone.dragging { border-color: #55d6b2; background: #132a2a; }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-zone strong { margin: 10px 0 5px; color: #eef9f5; font-size: 1.05rem; }
.drop-zone span:last-of-type { color: #8fa3b1; font-size: .8rem; }
.drop-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: #09231c; background: #50dcb4; font-size: 1.5rem; font-weight: 800; }
.video-settings { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 16px; margin-top: 20px; }
.video-settings label, .loan-form > label { color: #dbe4ec; font-size: .84rem; font-weight: 650; }
.size-input { max-width: 280px; margin-top: 8px; }
.size-input input, .loan-form input { width: 100%; height: 44px; border: 1px solid #344757; border-radius: 9px; outline: none; background: #0d1824; color: #f5f8fa; padding: 0 12px; font: inherit; }
.size-input input:focus, .loan-form input:focus { border-color: #64d9b7; box-shadow: 0 0 0 3px #49d8b025; }
.primary-action { min-height: 44px; cursor: pointer; border: 0; border-radius: 9px; padding: 0 20px; background: #49d8b0; color: #08231c; font: inherit; font-weight: 800; }
.primary-action:disabled { cursor: not-allowed; opacity: .4; }
.privacy-note { margin: 13px 0 0; color: #8196a4; font-size: .75rem; }

.video-queue { display: grid; gap: 12px; margin-top: 16px; }
.video-job { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px 18px; padding: 17px 19px; border: 1px solid #2c3e4c; border-radius: 13px; background: #121d29; }
.video-job-name { overflow: hidden; color: #e6edf2; font-size: .9rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.video-job-meta, .video-job-status { color: #8fa3b0; font-size: .76rem; }
.video-job-status { text-align: right; }
.progress-track { grid-column: 1/-1; overflow: hidden; height: 7px; border-radius: 999px; background: #253441; }
.progress-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#37cda3,#73e9ca); transition: width .3s; }
.video-job-actions { grid-column: 1/-1; display: flex; gap: 10px; }
.download-button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 8px; background: #24584c; color: #c9fff0; font-size: .8rem; font-weight: 750; }
.job-error { color: #ff9f9f; }

.loan-layout { display: grid; grid-template-columns: minmax(280px,.78fr) minmax(0,1.22fr); gap: 18px; }
.loan-form { display: grid; gap: 18px; padding: 22px; }
.loan-form > label { display: block; }
.loan-form > label > div { margin-top: 8px; }
.money-input { position: relative; }
.money-input span { position: absolute; left: 12px; top: 12px; color: #8ea2b1; font-size: .85rem; }
.money-input input { padding-left: 39px; }
.loan-form .input-suffix input { padding-right: 70px; }
.loan-form .input-suffix span { top: 13px; font-size: .78rem; }
.method-choice { display: grid; gap: 9px; margin: 0; padding: 16px; border: 1px solid #304250; border-radius: 12px; }
.method-choice legend { padding: 0 6px; color: #bdcbd4; font-size: .78rem; font-weight: 700; }
.method-choice label { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; cursor: pointer; color: #e5edf2; font-size: .88rem; font-weight: 700; }
.method-choice input { width: 17px; height: 17px; accent-color: #4bd8b1; }
.method-choice small { grid-column: 2; color: #8296a5; font-size: .72rem; font-weight: 400; }
.loan-results { padding: 22px; }
.loan-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.loan-summary > div { display: flex; flex-direction: column; min-height: 112px; justify-content: center; padding: 17px; border: 1px solid #31515a; border-radius: 12px; background: #17313a; }
.loan-summary span { color: #98b6b7; font-size: .78rem; }
.loan-summary strong { margin-top: 7px; color: #e5fff6; font-size: clamp(1.25rem,2.5vw,1.8rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.loan-rate-note { margin: 15px 2px 0; color: #8fa4b0; font-size: .78rem; }
.schedule-card { margin-top: 18px; padding: 20px 22px; }
.schedule-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 15px; }
.schedule-heading h2 { margin: 0; font-size: 1.05rem; }
.schedule-heading span { color: #6fddbf; font-size: .77rem; }
.table-scroll { overflow: auto; max-height: 470px; border: 1px solid #2e414f; border-radius: 10px; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: .8rem; }
th, td { padding: 11px 13px; border-bottom: 1px solid #293a47; text-align: right; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: center; }
th { position: sticky; top: 0; z-index: 1; color: #a7bac5; background: #182531; font-size: .73rem; }
td { color: #c7d3da; }
tbody tr:last-child td { border-bottom: 0; }
.simulation-disclaimer { margin: 12px 3px 0; color: #7f929f; font-size: .74rem; }

@media (max-width: 760px) {
  .utility-switcher { overflow-x: auto; }
  .utility-tab { flex: 0 0 auto; min-width: 155px; padding: 0 14px; }
  .tool-hero { display: block; }
  .tool-badge { display: inline-block; margin-top: 14px; }
  .video-settings, .loan-layout { grid-template-columns: 1fr; }
  .size-input { max-width: none; }
  .primary-action { width: 100%; }
}

@media (max-width: 480px) {
  .upload-card, .loan-form, .loan-results, .schedule-card { padding: 17px; }
  .drop-zone { min-height: 185px; padding: 18px; }
  .loan-summary { grid-template-columns: 1fr; }
  .loan-summary > div { min-height: 88px; }
  .video-job { grid-template-columns: 1fr; }
  .video-job-status { text-align: left; }
}