.pc-tuition-screen {
  min-width: 0;
  color: #20365b;
}

#tuitionRoot { width: 540px; max-width: 100%; }

.tuition-heading, .tuition-school-buttons, .tuition-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tuition-heading { justify-content: space-between; margin-bottom: 16px; }
.tuition-school-button, .tuition-reset {
  border: 1px solid #a9c1d5;
  border-radius: 7px;
  background: #fff;
  color: #20365b;
  padding: 9px 22px;
  font: inherit;
  cursor: pointer;
}
.tuition-school-button[aria-pressed="true"], .tuition-school-button[aria-pressed="true"]:hover { background: #203b70; border-color: #203b70; color: #fff; }
.tuition-table-scroll { max-width: 100%; border: 1px solid #c6d2de; border-radius: 8px; background: #fff; }
.tuition-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.tuition-table th, .tuition-table td { padding: 7px 3px; overflow-wrap: anywhere; white-space: normal; border-bottom: 1px solid #dce4ed; text-align: center; }
.tuition-table .tuition-product { min-width: 0; padding: 10px 3px; vertical-align: middle; background: #edf3f8; }
.tuition-product-name { padding-inline: 2px; display: inline-flex; flex-direction: column; align-items: center; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.tuition-product-name > span { display: block; flex: none; }
.tuition-product-long-vowel { transform: rotate(90deg); }
.tuition-table .tuition-subject { min-width: 0; padding: 7px 4px; text-align: left; font-weight: 500; color: #53697e; }
.tuition-table tbody + tbody { border-top: 2px solid #bacddd; }
.tuition-product-column { width: 32px; }
.tuition-subject-column { width: 64px; }
.tuition-subtotal-column { width: 88px; }
.tuition-table tbody tr:nth-child(even) { background: #f7f9fc; }
.tuition-price-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; width: 38px; max-width: 100%; min-height: 36px; padding: 5px 1px;
  border: 1px solid #bacddd; border-radius: 6px; background: #fff; color: #243b55;
  font: inherit; font-size: 12px; cursor: pointer; white-space: normal; overflow-wrap: anywhere; line-height: 1.2;
}
.tuition-price-button[aria-pressed="true"] { background: #dceffa; border-color: #147fbc; color: #124b73; box-shadow: inset 0 0 0 1px #147fbc; }
.tuition-price-button + .tuition-price-button { margin-top: 4px; }
.tuition-price-button[aria-pressed="true"]::before { content: "✓"; position: absolute; top: 0; left: 2px; font-size: 9px; }
.tuition-grade { font-weight: 700; }
.tuition-unavailable { color: #8f9aa5; }
.tuition-subtotal { font-weight: 700; white-space: nowrap; min-width: 0; font-variant-numeric: tabular-nums; }
.tuition-footer { margin-top: 18px; justify-content: space-between; align-items: flex-start; }
.tuition-summary-wrap { width: 360px; max-width: 100%; margin-left: auto; }
.tuition-summary-label { margin: 0 0 8px; font-size: 13px; }
.tuition-summary { margin: 0; padding: 8px 16px; border: 1px solid #bccddd; border-radius: 8px; background: #fff; }
.tuition-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; }
.tuition-summary dd { margin: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tuition-total-gross { border-top: 2px solid #203b70; font-size: 18px; }
.tuition-price-button:focus-visible, .tuition-school-button:focus-visible, .tuition-reset:focus-visible { outline: 3px solid #f0ad32; outline-offset: 2px; }
@media (max-width: 760px) {
  .tuition-heading { gap: 14px; }
  .tuition-product-column { width: 28px; }
  .tuition-subject-column { width: 40px; }
  .tuition-subtotal-column { width: 76px; }
  .tuition-table { font-size: 11px; }
  .tuition-table th, .tuition-table td { padding: 4px 1px; }
  .tuition-table .tuition-product { padding: 8px 2px; }
  .tuition-table .tuition-subject { padding: 6px 3px; }
  .tuition-price-button { width: 100%; max-width: 32px; min-height: 36px; font-size: 11px; }
  .tuition-subtotal { font-size: 10px; }

  .tuition-school-buttons { width: 100%; gap: 8px; }
  .tuition-school-button { flex: 1; padding: 9px 12px; }
  .tuition-summary-wrap { width: 100%; }
}

.tuition-actions { display: grid; gap: 10px; }
.tuition-payment-button {
  border: 1px solid #203b70; border-radius: 7px;
  padding: 10px 22px; background: #203b70; color: #fff;
  font: inherit; cursor: pointer;
}
.tuition-payment-button:hover { background: #294b8b; color: #fff; }
.tuition-payment-button:focus-visible { outline: 3px solid #f0ad32; outline-offset: 2px; }
.tuition-payment-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tuition-payment-title { margin: 0; font-size: 22px; }
.tuition-payment-panel { margin-bottom: 14px; border: 1px solid #bccddd; border-radius: 8px; background: #fff; }
.tuition-payment-panel h3 { margin: 0; padding: 10px 14px; font-size: 17px; background: #edf3f8; border-radius: 8px 8px 0 0; }
.tuition-payment-amounts { margin: 0; padding: 4px 14px; }
.tuition-payment-amounts > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; }
.tuition-payment-amounts > div + div { border-top: 1px solid #e1e7ee; }
.tuition-payment-amounts dt { min-width: 0; }
.tuition-payment-amounts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tuition-payment-amounts > div:last-child { font-weight: 700; }

.tuition-table.is-high-school .tuition-subject-column { width: 112px; }
.tuition-table.is-high-school .tuition-subject { white-space: nowrap; overflow-wrap: normal; }

.tuition-plan-controls { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; background: #edf3f8; border-radius: 8px 8px 0 0; }
.tuition-plan-count { width: 100%; min-width: 0; padding: 8px 6px; border: 1px solid #b4c8da; border-radius: 6px; background: #fff; color: #20365b; font: inherit; }
.tuition-bonus-label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 13px; }
.tuition-bonus-input { width: 100%; min-width: 0; padding: 8px 6px; border: 1px solid #b4c8da; border-radius: 6px; color: #20365b; background: #fff; text-align: right; font: inherit; }
.tuition-bonus-input[aria-invalid="true"] { border-color: #b42318; }
.tuition-plan-note, .tuition-plan-error { margin: 0; padding: 8px 14px; font-size: 12px; }
.tuition-plan-note { color: #53697e; text-align: right; }
.tuition-plan-error { color: #a32218; }
.tuition-plan-count:focus-visible, .tuition-bonus-input:focus-visible { outline: 3px solid #f0ad32; outline-offset: 2px; }
@media (max-width: 380px) {
  .tuition-plan-controls { grid-template-columns: 78px minmax(0, 1fr); padding: 10px; gap: 8px; }
  .tuition-bonus-label { gap: 4px; font-size: 12px; }
}

/* Keep payment controls at 16px to prevent iPhone focus zoom. */
.tuition-bonus-input, .tuition-plan-count { font-size: 16px; }


.tuition-pattern-register { max-width: 100%; padding: 9px 12px; font-size: 14px; white-space: normal; }
.tuition-pattern-tabs { display: flex; gap: 10px; margin-bottom: 14px; }
.tuition-pattern-tabs button { flex: 1; min-width: 0; }
.tuition-pattern-tabs button:disabled { opacity: .45; cursor: default; }

.tuition-plan-details-trigger { cursor: pointer; }
.tuition-plan-details-trigger:focus-visible { outline: 3px solid #f0ad32; outline-offset: -3px; }
.tuition-detail-dialog { box-sizing: border-box; width: 480px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px 14px; border: 1px solid #bccddd; border-radius: 10px; background: #fff; color: #20365b; }
.tuition-detail-dialog::backdrop { background: rgb(20 35 55 / 45%); }
.tuition-detail-dialog h3 { margin: 0 0 8px; padding: 0; background: none; }
.tuition-detail-dialog .tuition-payment-amounts { padding: 0; font-size: 14px; }
.tuition-detail-dialog > button { display: block; margin: 14px 0 0 auto; font-size: 16px; }

.tuition-finance-choices { display: grid; gap: 10px; margin-top: 16px; }
.tuition-finance-choices button { font-size: 16px; }
.tuition-finance-company { margin: 12px 0; font-size: 14px; font-weight: 600; }

.tuition-plan-details-trigger { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 12px; }
.tuition-plan-details-trigger > div { display: grid; grid-column: 1; grid-template-columns: 3.2em minmax(0, 1fr); gap: 6px; }
.tuition-plan-details-trigger .tuition-month-detail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 5px; min-width: 0; }
.tuition-month-value, .tuition-month-count, .tuition-month-total { text-align: left; }
.tuition-month-total { margin-left: 6px; }
.tuition-month-total::before { content: "= "; font-weight: 400; }
.tuition-month-count { font-size: .85em; font-weight: 500; }
.tuition-plan-details-trigger > .tuition-grand-summary { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; border-top: 0; padding-left: 10px; border-left: 1px solid #e1e7ee; }
.tuition-grand-summary dt { font-size: 11px; font-weight: 500; }
@media (max-width: 760px) {
  .tuition-plan-details-trigger { padding: 4px 10px; font-size: 12px; column-gap: 6px; }
  .tuition-plan-details-trigger > div { grid-template-columns: 3.8em minmax(0, 1fr); gap: 4px; }
  .tuition-plan-details-trigger .tuition-month-detail { gap: 3px; }
  .tuition-month-total { margin-left: 3px; }
  .tuition-plan-details-trigger > .tuition-grand-summary { padding-left: 6px; }
}

.tuition-pattern-column { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 8px; }
.tuition-pattern-details { padding: 9px 4px; font-size: 13px; white-space: normal; }

/* Match the host workspace and keep all controls within narrow mobile screens. */
.tuition-screen { min-width: 0; grid-column: 2 / -1; padding: 16px; border: 1.5px solid var(--panel-border); border-radius: 9px; background: var(--panel-blue); color: #20365b; }
.tuition-screen h1 { font-size: 22px; margin: 0 0 16px; }
.tuition-footer { flex-direction: column; }
.tuition-summary-wrap { width: 100%; }
.tuition-actions { width: 100%; }
.tuition-payment-heading { flex-direction: column; align-items: stretch; }
@media (max-width: 380px) {
 .tuition-product-column { width: 22px; }
 .tuition-subject-column { width: 28px; }
 .tuition-subtotal-column { width: 61px; }
 .tuition-table.is-high-school .tuition-subject-column { width: 100px; }
 .tuition-plan-details-trigger { font-size: 10px; padding: 4px 6px; }
 .tuition-plan-details-trigger > div { grid-template-columns: 3.8em minmax(0,1fr); gap: 2px; }
}

@media (max-width: 760px) { .tuition-screen { grid-column: 1 / -1; padding: 8px; } }

.tuition-plan-details-trigger > div > dt { white-space: nowrap; }