/* Full-height tenant subpage; sibling dialogs retain the shared overlay contract. */
.message-detail-modal.deposit-screen { padding: 0; backdrop-filter: none; background: #e9f0f3; }
.deposit-page { position: relative; width: min(100%, 448px); height: 100%; overflow: auto; overscroll-behavior: contain; background: #f2f8fd; color: #142544; scrollbar-width: thin; letter-spacing: 0; }
.deposit-page * { box-sizing: border-box; }
.deposit-header { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: #1398ed; color: #fff; }
.deposit-header h1 { margin: 0; text-align: center; font-size: 18px; line-height: 28px; font-weight: 600; }
.deposit-header button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; color: #fff; background: transparent; border-radius: 8px; }
.deposit-header .ui-icon { width: 24px; height: 24px; }
.deposit-hero { min-height: 180px; padding: 25px 24px 28px; background: linear-gradient(to bottom, rgb(242 248 253 / 0) 80%, #f2f8fd 100%), #319eef url('/assets/tenant-deposit-hero.png?v=1.0.5.5') center 65% / cover no-repeat; color: #fff; }
@supports (background-image: url('/assets/tenant-deposit-hero.webp')) {
  .deposit-hero { background-image: linear-gradient(to bottom, rgb(242 248 253 / 0) 80%, #f2f8fd 100%), #319eef url('/assets/tenant-deposit-hero.webp?v=1.0.5.5'); }
}
.deposit-hero p { margin: 0 0 12px; font-family: 'Kaiti SC', 'STKaiti', 'KaiTi', serif; font-size: 25px; line-height: 1.5; text-shadow: 0 1px 4px #127bbb66; }
.deposit-hero p span { margin-left: 12px; }
.deposit-hero small { display: block; font-size: 12px; line-height: 20px; text-shadow: 0 1px 3px #176cad; }
.deposit-main { position: relative; padding: 0 16px max(18px, env(safe-area-inset-bottom)); margin-top: -8px; }
.deposit-summary { padding: 22px 20px 12px; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px #7db9e311; }
.deposit-summary h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.deposit-amount { display: flex; align-items: baseline; gap: 7px; padding-top: 5px; color: #0d1838; font-variant-numeric: tabular-nums; }
.deposit-amount > span { flex: 0 0 auto; font-size: 26px; font-weight: 700; }
.deposit-amount strong { min-width: 0; overflow-wrap: anywhere; font-size: 42px; line-height: 1.3; font-weight: 750; }
.deposit-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; padding: 5px 12px; border-radius: 24px; background: #eaf4fb; color: #346c91; font-size: 14px; line-height: 20px; font-weight: 600; }
.deposit-status:is(.is-paid, .is-refunded, .is-settled, .is-not_required) { background: #d5f7ee; color: #008565; }
.deposit-status:is(.is-unpaid, .is-processing, .is-adjusting) { background: #fff0d9; color: #986114; }
.deposit-assurance { display: flex; gap: 12px; align-items: center; margin: 14px -8px 8px; padding: 14px 12px; background: #edf7fe; border-radius: 12px; }
.deposit-assurance > .ui-icon { width: 34px; height: 38px; flex-shrink: 0; color: #1c9df1; }
.deposit-assurance p { margin: 0; font-size: 13px; line-height: 21px; color: #34537d; }
.deposit-facts { margin: 0; }
.deposit-facts > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f4f9; font-size: 13px; line-height: 21px; }
.deposit-facts > div:last-child { border: 0; }
.deposit-facts dt { color: #798aa4; }
.deposit-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: 500; }
.deposit-facts .deposit-fact-status { color: #007f78; }
.deposit-services { display: grid; margin-top: 14px; gap: 3px; }
.deposit-service { display: grid; grid-template-columns: 38px auto minmax(0, 1fr) 16px; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 10px 14px; border: 0; border-radius: 14px; background: #fff; color: #152440; text-align: left; }
.deposit-service strong { font-size: 14px; line-height: 22px; font-weight: 600; }
.deposit-service > span:not(.deposit-service-icon) { color: #7988a1; font-size: 12px; line-height: 18px; }
.deposit-service > .ui-icon { width: 16px; color: #7d91aa; }
.deposit-service-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(145deg, #8bcfff, #167ff9); color: #fff; box-shadow: inset 0 1px 2px #ffffff88; }
.deposit-service-icon.gold { background: linear-gradient(145deg, #ffdb76, #ffa00e); }
.deposit-service-icon.violet { background: linear-gradient(145deg, #c6ceff, #616ff0); }
.deposit-service-icon .ui-icon { width: 24px; height: 24px; }
.deposit-apply { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 56px; margin-top: 26px; padding: 14px 20px; border: 0; border-radius: 30px; background: linear-gradient(105deg, #ffab22 0%, #ff9e25 25%, #09cacc 88%); box-shadow: 0 6px 20px #ffaf3124; color: #142f3c; font-size: 18px; line-height: 26px; font-weight: 700; }
.deposit-apply .ui-icon { width: 24px; height: 24px; }
.deposit-apply .ui-icon:last-child { width: 20px; margin-left: auto; }
.deposit-apply .ui-icon:first-child { margin-left: auto; }
.deposit-footer { display: flex; justify-content: center; align-items: center; gap: 7px; padding-top: 16px; color: #72849f; font-size: 11px; line-height: 18px; }
.deposit-footer .ui-icon { width: 14px; height: 14px; }
.deposit-state { margin: 24px 16px; padding: 36px 20px; text-align: center; background: #fff; border-radius: 16px; }
.deposit-state h2, .deposit-state strong { font-size: 18px; }
.deposit-state p { font-size: 14px; color: #637e94; line-height: 24px; }
.deposit-state :is(button, a) { display: inline-block; min-height: 44px; padding: 12px 20px; border: 0; border-radius: 8px; color: #fff; background: #007f87; font-size: 14px; text-decoration: none; }
.deposit-page button { cursor: pointer; font-family: inherit; }
.deposit-page button:focus-visible { outline: 3px solid #102c58; outline-offset: -3px; }
.deposit-detail-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 0; border-block: 1px solid #deebf4; }
.deposit-detail-totals dt { font-size: 12px; color: #647991; }
.deposit-detail-totals dd { margin: 6px 0 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.deposit-records { list-style: none; padding: 0; }
.deposit-records li { padding: 16px 0; border-bottom: 1px solid #deebf4; }
.deposit-records li > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.deposit-records li p { margin: 6px 0; }
.deposit-subpanel h3 { font-size: 15px; margin: 20px 0 8px; }
@media (max-width: 360px) {
  .deposit-main { padding-inline: 12px; }
  .deposit-summary { padding-inline: 16px; }
  .deposit-amount strong { font-size: 34px; }
  .deposit-service { gap: 8px; padding-inline: 10px; }
  .deposit-service > span:not(.deposit-service-icon) { font-size: 11px; }
}