html body:is([data-s5-page="shop"], [data-s5-page="bank"]) :is(.student-shop-notebook-sheet, .economy-bank-notebook-shell) {
  padding: clamp(10px, 1.6vw, 24px);
  border: 1px solid var(--s5-line);
  border-radius: 10px;
  background: #fff;
}
html body:is([data-s5-page="shop"], [data-s5-page="bank"]) :is(.student-economy-shell, .student-economy-main-shell) {
  padding-block-start: 0;
}
html body[data-s5-page="shop"] .student-shop-header,
.s5-bank-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 0;
  margin-bottom: 12px;
  padding: 0;
}
.s5-bank-heading .s5-page-title,
[data-s5-page="shop"] .s5-page-title { margin: 0; }
html body[data-s5-page="shop"] .student-shop-header :is(.eyebrow, .student-shop-date, #studentShopDescription) { display: none; }
html body[data-s5-page="bank"] .s5-bank-heading .economy-bank-today-date { display: none; }
html body[data-s5-page="bank"] .s5-bank-heading .economy-bank-hero-actions { position: static; flex-flow: row wrap; gap: 6px; }
html body:is([data-s5-page="bank"], [data-s5-page="shop"]) :is(#studentShopTutorialOpen, #studentBankTutorialReplay, #studentCatalogRefresh, #studentBankRefresh) {
  min-width: 44px; min-height: 44px; padding: 5px 10px; border: 1px solid var(--s5-line);
  border-radius: 7px; background: #fff; box-shadow: none; color: var(--s5-ink); font-size: 13px;
}
html body[data-s5-page="shop"] #studentCatalogRefresh span,
html body[data-s5-page="bank"] #studentBankRefresh span { position: absolute; clip-path: inset(50%); }

html body[data-s5-page="shop"] .student-shop-tabs,
html body[data-s5-page="bank"][data-economy-step] .economy-bank-notebook .economy-bank-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
}
html body[data-s5-page="shop"] .student-shop-tabs button,
html body[data-s5-page="bank"][data-economy-step] .economy-bank-notebook .economy-bank-nav button {
  display: flex;
  flex: 1 1 max-content;
  min-width: 0;
  min-height: 48px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  white-space: normal;
  word-break: keep-all;
  transform: none;
  border-radius: 7px;
  background: var(--s5-tab, var(--s5-pale-blue));
  box-shadow: none;
  font-size: clamp(12px, 1.2vw, 16px);
}
html body[data-s5-page="bank"][data-economy-step] .economy-bank-notebook .economy-bank-nav button[aria-pressed="true"] {
  min-height: 48px; transform: none; border-radius: 7px; background: var(--s5-blue); box-shadow: none; color: #fff;
}
html body[data-s5-page="bank"][data-economy-step] .economy-bank-notebook .economy-bank-nav strong { color: inherit; font: inherit; font-weight: 750; }
html body[data-s5-page="bank"] #studentBankMessage:empty { display: none; }
html body[data-s5-page="bank"] .economy-bank-notebook-content { margin: 0; padding: 0; border: 0; background: none; }

.s5-economy-columns { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(0, 1fr); gap: clamp(12px, 2.3vw, 30px); }
.s5-bank-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s5-economy-columns > :nth-child(2) { min-width: 0; border-inline-start: 1px solid var(--s5-line); padding-inline-start: clamp(12px, 2.3vw, 30px); }
.s5-economy-section-title {
  display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  color: var(--s5-ink); font-size: clamp(17px, 2vw, 24px); line-height: 1.3;
}
.s5-economy-section-title::after { content: ''; flex: 1; height: 1px; background: #69a9f7; }
.s5-economy-empty { margin: 0; padding: 12px; color: var(--s5-muted); font-size: 14px; }

html body[data-s5-page="shop"] .student-shop-summary { display: none; }
html body[data-s5-page="shop"] .student-shop-page { min-height: 0; }
.s5-shop-balance {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px;
  margin-bottom: 16px; padding: 4px 12px; border: 1px solid var(--s5-line); border-radius: 7px; background: #f4f8fd;
}
.s5-shop-balance h2 { margin: 0; font-size: 14px; color: var(--s5-ink); }
.s5-shop-balance h2 strong { margin-inline-start: 7px; font-size: clamp(16px, 2vw, 22px); }
.s5-shop-balance i { margin-inline-end: 6px; color: var(--s5-muted); }
#studentShopWorkspace:not([data-s5-shop-tab="today"]) .s5-shop-balance button { display: none; }
.s5-shop-balance button,
.s5-shop-recent button {
  min-height: 44px; padding: 6px 12px; border: 1px solid #adcaef; border-radius: 6px;
  background: #fff; color: var(--s5-blue); font: inherit; font-weight: 700; cursor: pointer;
}
.s5-shop-recent button { margin-top: 10px; }
.s5-shop-insight { margin-top: 16px; color: var(--s5-muted); font-size: 14px; }
.s5-shop-insight summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.s5-shop-insight p { margin: 0 0 5px; }

html body[data-s5-page="shop"] :is(.student-shop-product-grid, #s5ShopTodayItems) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
}
html body[data-s5-page="shop"] .student-shop-product-card {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; grid-template-rows: auto auto;
  grid-template-areas: 'image title action' 'image meta action';
  align-items: center; gap: 2px 12px; min-width: 0; padding: 8px 10px; min-height: 74px;
  border: 1px solid var(--s5-line); border-radius: 8px; background: #fff; box-shadow: none;
}
html body[data-s5-page="shop"] .student-shop-product-card .student-shop-product-visual {
  grid-area: image; display: grid; place-items: center; width: 100%; height: 56px; min-height: 0;
  padding: 4px; aspect-ratio: auto; border: 0; border-radius: 6px; background: #eee9fb;
}
html body[data-s5-page="shop"] .student-shop-product-card .student-shop-product-visual img { width: 100%; height: 48px; object-fit: contain; }
html body[data-s5-page="shop"] .student-shop-product-card h3 { grid-area: title; margin: 0; color: var(--s5-ink); font-size: clamp(14px, 1.55vw, 19px); overflow-wrap: anywhere; }
html body[data-s5-page="shop"] .student-shop-product-card .student-shop-product-meta {
  grid-area: meta; display: flex; flex-wrap: wrap; justify-content: start; gap: 2px 10px;
  color: var(--s5-muted); font-size: 12px;
}
html body[data-s5-page="shop"] .student-shop-product-card .shop-card-price { padding: 2px 6px; border-radius: 4px; background: var(--s5-pale-green); color: #185d43; font-size: 13px; }
html body[data-s5-page="shop"] .student-shop-product-card .shop-card-actions { grid-area: action; margin: 0; }
html body[data-s5-page="shop"] .student-shop-product-card button {
  min-width: 0; min-height: 44px; padding-inline: 8px; border: 1px solid #adcaef; border-radius: 6px;
  background: #fff; color: var(--s5-blue); font-size: 12px; box-shadow: none;
}
html body[data-s5-page="shop"] .student-shop-product-card button:disabled { border-color: #cfdae6; background: #e8edf4; color: #536078; opacity: 1; }
html body[data-s5-page="shop"] .s5-product-sold-out .student-shop-product-visual { filter: grayscale(1); }
html body[data-s5-page="shop"] .student-shop-recent-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; }
html body[data-s5-page="shop"] .student-shop-recent-table td { padding: 9px 3px; border-bottom: 1px solid var(--s5-line); }
html body[data-s5-page="shop"] .student-shop-recent-table td:first-child,
html body[data-s5-page="shop"] .student-shop-recent-table td:last-child { white-space: nowrap; }
html body[data-s5-page="shop"] :is(.student-shop-filter-panel, .student-shop-price-notice) { padding: 8px 12px; margin-block: 0 8px; }
html body[data-s5-page="shop"] .student-shop-price-notice .student-shop-price-changes { display: none; }

.s5-bank-assets { margin: 0; padding: 4px 12px; border: 1px solid var(--s5-line); border-radius: 8px; }
.s5-bank-assets > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; }
.s5-bank-assets > div + div { border-top: 1px solid var(--s5-line); }
.s5-bank-assets dt, .s5-bank-assets dd { margin: 0; color: var(--s5-ink); font-weight: 750; }
.s5-bank-assets dt { display: inline-flex; gap: 8px; align-items: center; }
.s5-bank-assets dd { text-align: end; }
.s5-account-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 7px; background: var(--s5-pale-blue); }
.s5-bank-assets > div:nth-child(2) .s5-account-icon { background: var(--s5-pale-green); }
.s5-bank-assets > div:nth-child(3) .s5-account-icon { background: var(--s5-pale-violet); }
.s5-bank-assets > div:nth-child(4) .s5-account-icon { background: var(--s5-pale-amber); }
.s5-bank-work { display: grid; align-content: start; gap: 16px; }
.s5-bank-actions { display: flex; flex-wrap: wrap; gap: 6px; }
html body[data-s5-page="bank"] .s5-bank-actions .economy-button {
  flex: 1 1 auto; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; margin: 0;
  padding-inline: 10px; border: 1px solid var(--s5-line); background: #fff; box-shadow: none; color: var(--s5-ink);
}
html body[data-s5-page="bank"] .s5-bank-actions .primary { background: var(--s5-blue); color: #fff; }
.s5-bank-due { color: var(--s5-muted); font-size: 14px; }
.s5-bank-record { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; min-height: 46px; padding: 6px 10px; border: 1px solid var(--s5-line); border-radius: 7px; font-size: 14px; }
.s5-bank-record + .s5-bank-record { margin-top: 6px; }
.s5-bank-record time { color: var(--s5-muted); }
html body[data-s5-page="bank"] :is(.economy-bank-page-head-art-story, .economy-bank-page-head .economy-kicker, .economy-bank-steps span em) { display: none; }
html body[data-s5-page="bank"] .economy-bank-page-head { min-height: 0; padding: 10px 12px; }
html body[data-s5-page="bank"] .economy-bank-transfer-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html body[data-s5-page="bank"] .economy-market-guide-panel { max-height: calc(100dvh - 24px); overflow-y: auto; }

@media (max-width: 780px), (max-width: 1024px) and (orientation: portrait) {
  .s5-economy-columns { grid-template-columns: minmax(0, 1fr); }
  .s5-economy-columns > :nth-child(2) { border-inline-start: 0; border-top: 1px solid var(--s5-line); padding: 12px 0 0; }
  html body[data-s5-page="bank"] .economy-bank-transfer-flow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  html body[data-s5-page="shop"] .student-shop-tabs button,
  html body[data-s5-page="bank"][data-economy-step] .economy-bank-notebook .economy-bank-nav button { flex-basis: 30%; min-height: 44px; }
  html body[data-s5-page="bank"][data-economy-step] .economy-bank-notebook .economy-bank-nav button[data-bank-notebook-tab] { flex-basis: 30%; white-space: normal; }
  html body[data-s5-page="shop"] .student-shop-product-card { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 6px; padding-inline: 6px; }
  html body[data-s5-page="bank"] .s5-bank-heading .economy-bank-hero-actions { justify-content: end; }
}

html body[data-s5-page="shop"] .student-shop-header {
  height: auto;
  flex-direction: row;
  justify-content: space-between;
}
html body[data-s5-page="shop"] .student-shop-notebook-sheet { background: #fff; }
html body[data-s5-page="shop"] #studentShopTitle::before { content: none; }
html body[data-s5-page="shop"] .student-shop-tabs button:is(.is-active, [aria-pressed="true"]) :is(span, i) { color: #fff; }
html body[data-s5-page="shop"] .student-shop-tabs button i { color: var(--s5-blue); }
html body[data-s5-page="shop"] .student-shop-product-card .shop-card-actions {
  position: static; width: auto; height: auto; justify-content: end;
}
html body[data-s5-page="shop"] .student-shop-product-card .shop-card-actions button { width: auto; min-width: 66px; height: auto; opacity: 1; white-space: nowrap; }
html body[data-s5-page="bank"][data-economy-step] .economy-bank-notebook .economy-bank-nav strong {
  white-space: normal; word-break: keep-all; letter-spacing: normal;
}
.s5-bank-work > section:first-child .s5-economy-section-title::after { background: #a278ea; }
@media (max-width: 520px) {
  html body[data-s5-page="shop"] .student-shop-header-actions { flex: 0 1 auto; }
  html body[data-s5-page="shop"] .student-shop-header h1 { white-space: nowrap; font-size: clamp(24px, 7vw, 32px); }
  .s5-shop-balance {
    align-items: center;
    padding: 5px 8px;
    background: #165ab7;
  }
  .s5-shop-balance h2, .s5-shop-balance i { color: #fff; }
  .s5-shop-balance button { padding-inline: 6px; font-size: 12px; }
  html body[data-s5-page="bank"][data-economy-step] .economy-bank-notebook .economy-bank-nav button { gap: 4px; padding-inline: 3px; }
}
@media (max-width: 360px) {
  html body[data-s5-page="bank"][data-economy-step] .economy-bank-notebook .economy-bank-nav button i { display: none; }
}

/* Keep the task and its controls ahead of the original educational artwork. */
html body[data-s5-page="bank"][data-economy-step] #studentBankWorkspace .economy-bank-page-head {
  display: flex;
  flex-wrap: wrap;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  gap: 8px 16px;
}
html body[data-s5-page="bank"] #studentBankWorkspace :is(.economy-bank-page-head-art, .economy-bank-page-head-art-story,
  .economy-bank-page-head-copy .economy-kicker, .economy-bank-page-head-copy p, .economy-bank-steps,
  .economy-bank-invest-route, .economy-bank-learning-card, .economy-bank-record-guide) { display: none; }
html body[data-s5-page="bank"] #studentBankWorkspace :is(.economy-bank-page-head-copy h2, .economy-bank-section-head h3) {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 25px);
}
html body[data-s5-page="bank"] #studentBankWorkspace :is(.economy-bank-action-card, .economy-bank-task-panel) {
  background: white;
  box-shadow: none;
  border: 1px solid var(--s5-line);
  min-width: 0;
}
html body[data-s5-page="bank"] #studentBankWorkspace :is(.economy-bank-transfer-flow, .economy-bank-loan-workflow) {
  gap: 10px;
}
html body[data-s5-page="bank"] #studentBankWorkspace .economy-bank-transfer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html body[data-s5-page="bank"] #studentBankWorkspace .economy-bank-transfer-actions > button {
  flex: 1 1 110px;
  min-width: 0;
  min-height: 44px;
}
html body[data-s5-page="bank"] #studentBankWorkspace .economy-bank-records-page {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s5-bank-record-summary { order: 3; }
.s5-bank-exchange-tabs { display: flex; gap: 8px; margin: 0 0 10px; }
.s5-bank-exchange-tabs button { flex: 1; min-width: 0; min-height: 44px; }
.s5-bank-exchange-tabs button[aria-pressed="true"] { color: white; background: var(--s5-blue); }
html body[data-s5-page="bank"] #studentBankWorkspace [data-bank-invest-section][hidden] { display: none; }
html body[data-s5-page="bank"] #studentBankWorkspace .economy-bank-invest-body,
html body[data-s5-page="bank"] #studentBankWorkspace [data-bank-invest-section] > section { display: block; }
#studentBankAmount[aria-invalid="true"] { border-color: #b93835; }
#s5BankAvailable { margin-block: 8px; }
.s5-bank-confirm {
  width: min(420px, calc(100% - 28px));
  color: var(--s5-ink);
  background: white;
  border: 1px solid var(--s5-line);
  border-radius: 10px;
  padding: 20px;
}
.s5-bank-confirm::backdrop { background: #101b3666; }
.s5-bank-confirm h2 { font-size: 22px; margin: 0 0 12px; }
.s5-bank-confirm .s5-bank-actions { margin-top: 16px; }
.s5-bank-confirm button { flex: 1; min-height: 44px; }

@media (max-width: 760px) {
  html body[data-s5-page="bank"] #studentBankWorkspace :is(.economy-bank-transfer-flow, .economy-bank-loan-workflow) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.s5-bank-transfer-balances { margin: 12px 0; }
.s5-bank-transfer-balances > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding-block: 9px;
  border-bottom: 1px solid var(--s5-line);
}
.s5-bank-transfer-balances dd { margin: 0; text-align: end; }
html body[data-s5-page="bank"] #studentBankWorkspace :is(.economy-bank-transfer-compose, .economy-bank-choice-panel) {
  min-height: 0;
  gap: 8px;
}
html body[data-s5-page="bank"] #studentBankWorkspace .economy-bank-choice-panel button.selected,
html body[data-s5-page="bank"] #studentBankWorkspace .economy-bank-transfer-actions .primary {
  background: var(--s5-blue);
  color: white;
}
html body[data-s5-page="bank"] #studentBankWorkspace .economy-bank-choice-panel button.selected :is(strong,em) { color: inherit; }
html body[data-s5-page="bank"] #studentBankWorkspace .economy-bank-choice-panel button :is(img,b) { display: none; }
.s5-bank-record-date { font-size: 14px; margin: 8px 0 0; padding: 6px 8px; background: var(--s5-pale-blue); }

html body[data-s5-page="bank"] #studentBankWorkspace :is([data-bank-page-panel="transfer"], [data-bank-page-panel="saving"], [data-bank-page-panel="loan"]) > .economy-bank-page-head {
  display: none;
}
html body[data-s5-page="bank"] #studentBankWorkspace [data-bank-page-panel="exchange"] .economy-bank-page-head {
  min-height: 0;
  padding: 0;
}
html body[data-s5-page="bank"] #studentBankWorkspace [data-bank-page-panel="exchange"] .economy-bank-page-head :is(.economy-bank-pig-story,.economy-bank-page-head-date) {
  display: none;
}
.s5-bank-record-period { display: flex; align-items: center; gap: 8px; }
.s5-bank-record-period select { min-height: 44px; max-width: 100%; }
html body[data-s5-page="bank"] #studentBankWorkspace [data-bank-page-panel="exchange"] .economy-bank-route-map { display: none; }