/* Pair Chinese controls with Lao without changing their source text or data values. */
:root {
  --lao-font: "Noto Sans Lao", "Lao UI", "Phetsarath OT", "Leelawadee UI", sans-serif;
  --ui-text: 1rem;
  --ui-text-small: .875rem;
  --ui-text-lao: .9375rem;
  --ui-text-title-lao: 1.125rem;
  --ui-language-gap: .375rem;
  --ui-navigation-height: 6.5rem;
}
body { line-height: 1.6; }
[lang="lo"] { font-family: var(--lao-font); letter-spacing: 0; }
ty-label { display: inline-flex; flex-direction: column; align-items: inherit; max-width: 100%; min-width: 0; vertical-align: middle; white-space: normal; line-height: 1.45; letter-spacing: normal; text-indent: 0; }
ty-lo, .ui-select-lo, .ui-input-lo { display: block; min-width: 0; max-width: 100%; margin: var(--ui-language-gap) 0 0; font-family: var(--lao-font); font-size: var(--ui-text-lao); font-style: normal; font-weight: 400; line-height: 1.7; letter-spacing: 0; text-transform: none; white-space: normal; overflow-wrap: anywhere; opacity: 1; }
ty-lo::before { content: attr(data-text); }
.ui-select-lo[hidden] { display: none; }
.ui-select-lo { color: #bdd0df; margin: var(--ui-language-gap) 0 0; }
button ty-label, a ty-label { pointer-events: none; }
h1 ty-lo, h2 ty-lo { font-size: var(--ui-text-title-lao); margin-top: .5rem; }
h3 ty-lo { font-size: var(--ui-text); }
button, a, h2, h3, label { min-width: 0; }
.topbar { height: auto; }
.brand { align-items: center; justify-content: flex-start; gap: 14px; width: fit-content; }
.brand-name ty-label, .home-view > .section-title ty-label { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.brand-name ty-lo { margin: 0; font-size: var(--ui-text-small); }
.hero-actions button { min-height: 58px; }
.hero-actions .button-gold > img, .hero-actions .button-gold > span { display: none; }
.hero-actions ty-lo { white-space: normal; }
.quick-copy b { overflow: visible; white-space: normal; line-height: 1.4; }
.bottom-item { gap: 2px; align-self: stretch; }
.bottom-item > span { width: 100%; }
.bottom-item ty-label { width: 100%; align-items: center; }
.bottom-item ty-lo { width: 100%; line-height: 1.55; white-space: normal; text-align: center; }
.category-heading { min-height: 62px; height: auto; }
.browse-row { display: none; }
.eyebrow, #service-kicker, #service-hero-label { display: none; }
.service-section-heading > small, .opportunity-section-heading > span { display: none; }
.service-heading { min-height: 65px; height: auto; }
.service-heading h2 { line-height: 1.3; }
.service-actions button { min-height: 55px; }
.local-tool-entry > span > small { display: none; }
.phonebook-heading h2 { margin: 0; }
.phonebook-heading > div > span { display: none; }
.phonebook-categories button { white-space: normal; }
.phonebook-categories ty-lo { max-width: 190px; }
.phonebook-tags { align-items: flex-start; }
.phonebook-tags > span { white-space: normal; }
.phonebook-tags ty-lo { font-size: var(--ui-text-small); line-height: 1.7; }
.phonebook-card-actions { flex-wrap: wrap; }
.yellow-toolbar button, .yellow-workbench .phonebook-add { min-height: 48px; white-space: normal; }
.yellow-search-row { align-items: stretch; }
.ui-search-field { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 5px 0; }
.ui-search-field input, .yellow-workbench .phonebook-search .ui-search-field input { flex: none; width: 100%; min-height: 28px; padding: 0; }
.ui-input-lo { font-size: var(--ui-text-lao); color: #b4cadb; margin-top: .25rem; }
.phonebook-search, .anime-search { min-height: 62px; }
.phonebook-form-actions button, .yellow-pagination button { min-height: 55px; }
.phonebook-form-head > div > small, .tool-dialog-head > div > small { display: none; }
.phonebook-address { display: flex; align-items: flex-start; gap: 10px; }
.phonebook-address > span:first-child { flex: 0 0 86px; }
.phonebook-address > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.yellow-source summary { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.anime-categories button { min-height: 58px; }
.anime-heading h2 > small { display: none; }
.anime-pagination button { min-height: 52px; }
.anime-source > span:empty { display: none; }
.anime-watch-heading > div > small { display: none; }
.anime-watch-controls button { min-height: 55px; }
.anime-watch-episodes button { min-height: 51px; }
.currency-tool-tabs button { min-height: 58px; }
.currency-heading { align-items: center; }
.currency-heading h2 { margin: 0; }
.currency-heading button { min-height: 50px; }
.converter-button { min-height: 58px; }
.tool-primary, .tool-secondary { height: auto; min-height: 55px; }
.tool-lease-footer > button { height: auto; min-height: 55px; }
.contact-person-copy > span, .contact-qr-heading > small { display: none; }
@media (max-width: 360px) {
  .brand { gap: 8px; }
  .brand-name { font-size: 17px; }
  .quick-card { gap: 8px; }
}
/* Text controls: one Chinese heading, one Lao caption, consistent spacing. */
.topbar { min-height: 56px; padding: 10px 0; }
.brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: .6px; }
.brand-name ty-lo { color: #bed0dd; }
.home-view { display: grid; grid-template-rows: max-content max-content minmax(244px, 1fr); gap: 10px; padding-top: 10px; }
.home-hero { flex: none; min-height: 0; height: auto; padding: 16px; border: 1px solid #304d74; border-radius: 20px; background: linear-gradient(125deg, #143770, #0d2345 78%); box-shadow: 0 12px 28px #0002; }
.home-hero h1 { margin: 0 0 12px; font-size: 1.75rem; font-weight: 750; line-height: 1.2; letter-spacing: .5px; }
.home-hero h1 ty-lo { margin-top: 4px; color: #c2d8e6; font-size: var(--ui-text); line-height: 1.5; }
.hero-actions { margin-top: 0; gap: 10px; }
.hero-actions > button { min-height: 60px; padding: 6px 10px; border-radius: 11px; box-shadow: none; font-size: var(--ui-text); font-weight: 650; }
.hero-actions .button-gold { background: var(--brand-action); border-color: var(--brand-action); color: var(--lao-white); }
.hero-actions .button-glass { background: #ffffff09; border-color: #5a7ca9; color: var(--lao-white); }
.hero-actions ty-lo { margin-top: 4px; font-size: var(--ui-text-small); line-height: 1.55; }
.section-title { padding: 1px 2px 0; }
.section-title b { font-size: var(--ui-text); letter-spacing: .5px; }
.section-title ty-lo { font-size: var(--ui-text-small); color: #bbcedd; margin: 0; }
.quick-grid { min-height: 244px; grid-template-rows: repeat(3, minmax(76px, 1fr)); gap: 8px; padding-bottom: 0; }
.quick-card { min-height: 76px; height: auto; align-items: center; padding: 10px 12px; border-color: var(--panel-line); border-radius: var(--panel-radius); background: linear-gradient(130deg, #142b4d, var(--panel-night)); box-shadow: 0 4px 14px #0001; transition: border-color .18s, background-color .18s; }
.quick-copy { gap: 0; }
.quick-copy b { font-size: var(--ui-text); font-weight: 650; letter-spacing: .3px; line-height: 1.5; }
.quick-copy ty-label { width: 100%; }
.quick-copy ty-lo { margin-top: 4px; color: #bfd2df; font-size: var(--ui-text-lao); font-weight: 400; line-height: 1.6; letter-spacing: 0; }
.quick-card[data-placeholder="租金周转"], .quick-card[data-placeholder="商业拆借"] { border-inline-start: 3px solid var(--lao-red); }
.quick-card[data-placeholder="天佑置业"], .quick-card[data-placeholder="天佑天梯"] { border-inline-start: 3px solid #477cc6; }
.quick-card[data-category] { border-inline-start: 3px solid #d5dfef; }
.quick-card:hover, .quick-card:focus-visible { border-color: #608bc7; background: #17315a; }
.bottom-nav { height: calc(var(--ui-navigation-height) + var(--safe-bottom)); padding: 8px 6px calc(8px + var(--safe-bottom)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; align-items: stretch; background: #07162cf5; border-top: 1px solid var(--panel-line); }
.bottom-item { position: relative; min-height: 86px; padding: 8px 0; justify-content: flex-start; border: 1px solid transparent; border-radius: 10px; color: #c0ceda; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.bottom-item.active { border-color: #345b91; background: #163866; color: var(--lao-white); font-weight: 700; box-shadow: inset 0 2px var(--lao-red); }
.bottom-item ty-lo { margin-top: 6px; font-size: var(--ui-text-small); color: inherit; opacity: 1; min-height: 2.9em; }
.phonebook-heading { padding-top: 9px; }
.phonebook-heading h2, .anime-heading h2, .currency-heading h2, .service-heading h2, .contact-heading h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: .5px; line-height: 1.4; }
.phonebook-heading h2 ty-lo, .anime-heading h2 ty-lo, .currency-heading h2 ty-lo { font-size: var(--ui-text-title-lao); font-weight: 400; color: #bfd3e1; }
.phonebook-view { gap: 13px; }
.yellow-workbench { border-radius: var(--panel-radius); background: var(--panel-soft); box-shadow: none; }
.yellow-search-row { gap: 12px; padding: 12px; }
.yellow-workbench .phonebook-search { padding: 0; }
.yellow-workbench .phonebook-search input { font-size: var(--ui-text); }
.yellow-workbench .phonebook-add { min-height: 68px; padding: 10px; border-radius: 9px; border-color: #3f6a80; background: #244a5e; font-size: var(--ui-text-small); }
.yellow-workbench .phonebook-add ty-lo { max-width: 124px; font-size: var(--ui-text-small); }
.yellow-workbench .yellow-toolbar { margin: 0 11px; padding: 8px 0; gap: 7px; }
.yellow-workbench .yellow-toolbar button { min-height: 66px; padding: 9px 8px; font-size: var(--ui-text-small); border-radius: 8px; }
.yellow-toolbar ty-lo { margin-top: 6px; font-size: var(--ui-text-small); }
.phonebook-categories { gap: 8px; padding: 0 0 9px; border-bottom: 1px solid #213747; }
.phonebook-categories button { min-height: 68px; min-width: 108px; max-width: 212px; padding: 10px 14px; border-radius: var(--control-radius); border-color: var(--panel-line); background: var(--panel-soft); font-size: var(--ui-text-small); }
.phonebook-categories button[aria-pressed=true] { background: var(--panel-raised); border-color: #5c82b4; color: var(--lao-white); }
.phonebook-categories ty-lo { margin-top: 6px; font-size: var(--ui-text-small); }
.phonebook-list { gap: 14px; }
.phonebook-card { padding: 18px 16px; border-radius: var(--panel-radius); background: var(--panel-night); border-color: var(--panel-line); }
.phonebook-card h3 { font-size: 1.125rem; font-weight: 650; line-height: 1.6; margin-bottom: 8px; }
.phonebook-card-head { gap: 12px; }
.phonebook-tags { gap: 7px; }
.phonebook-tags > span { padding: 6px 8px; font-size: var(--ui-text-small); line-height: 1.6; }
.phonebook-card .phonebook-address { margin-top: 14px; font-size: var(--ui-text-small); line-height: 1.8; }
.phonebook-card-actions { margin-left: 0; width: 100%; gap: 8px; }
.phonebook-card-actions > button, .phonebook-card-actions > a { min-height: 64px; padding: 9px 12px; border-radius: 9px; font-size: var(--ui-text-small); text-align: center; }
.phonebook-card-actions ty-lo { font-size: var(--ui-text-small); }
.phonebook-number { border-radius: 10px; padding: 12px; }
.phonebook-number strong { font-size: 1.125rem; font-weight: 650; letter-spacing: .3px; }
.phonebook-number > b { font-size: var(--ui-text-small); }
.phonebook-card .yellow-source { margin-top: 15px; padding-top: 12px; }
.phonebook-search, .anime-search { gap: 0; padding-left: 15px; }
.anime-search .ui-search-field { padding: 8px 0; }
.anime-search .ui-search-field input { height: 26px; }
.anime-categories, .currency-tool-tabs { padding: 5px; gap: 6px; }
.anime-categories button, .currency-tool-tabs button { min-height: 74px; font-size: var(--ui-text-small); display: flex; align-items: flex-start; justify-content: center; padding: 10px 6px; }
.anime-categories ty-lo, .currency-tool-tabs ty-lo { margin-top: 6px; font-size: var(--ui-text-small); }
.local-tool-entry { min-height: 80px; padding: 15px 16px; border-radius: 12px; }
.local-tool-entry > span { flex: 1; min-width: 0; color: inherit; font-size: inherit; }
.local-tool-entry b { font-size: var(--ui-text); font-weight: 650; }
.local-tool-entry ty-lo { margin-top: 6px; font-size: var(--ui-text-lao); }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] > summary { color: #c4eaff; }
.property-owner-entry > span { color: inherit; font-size: inherit; }
.close-button, .tool-close, .anime-watch-close, .phonebook-form-head button, .film-details > header button, .ladder-close { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 72px; width: auto; min-height: 62px; height: auto; padding: 8px 12px; border: 1px solid #355165; border-radius: 10px; background: #142735; color: #c6dfed; font-size: var(--ui-text-small); font-weight: 500; line-height: 1.3; }
.close-button ty-lo, .tool-close ty-lo, .anime-watch-close ty-lo, .phonebook-form-head button ty-lo, .film-details > header button ty-lo, .ladder-close ty-lo { font-size: var(--ui-text-small); margin-top: 6px; }
.phonebook-form-dialog { scroll-padding-block: 8rem 16px; }
.phonebook-form-head { position: sticky; top: 0; z-index: 2; background: var(--page-night); }
select.hidden + .ui-select-lo, select[hidden] + .ui-select-lo { display: none; }
@media (max-width: 360px) {
  .bottom-nav { padding-left: 7px; padding-right: 7px; gap: 3px; }
  .bottom-item { font-size: var(--ui-text-small); }
  .bottom-item ty-lo { font-size: var(--ui-text-small); }
  .quick-card { padding: 9px 10px; }
  .quick-copy ty-lo { font-size: var(--ui-text-small); }
  .yellow-search-row { gap: 8px; padding-left: 12px; }
  .yellow-workbench .phonebook-add { max-width: 124px; padding: 9px; }
}
/* Readable supporting copy and form controls share the same type scale. */
.phonebook-card > p, .phonebook-feedback, .phonebook-form-feedback,
.yellow-source, .yellow-consent, .yellow-remove-dialog p,
.anime-status, .anime-empty, .anime-source, .anime-watch-now, .currency-workbench-meta, .tool-note, .tool-feedback, .tool-empty, .currency-money-inline .tool-note,
.modal-intro, .form-feedback {
  font-size: var(--ui-text-small);
  line-height: 1.8;
}
.phonebook-card > p, .yellow-source, .yellow-consent,
.anime-status, .anime-empty, .anime-source, .anime-watch-now, .currency-workbench-meta, .tool-note, .tool-empty, .currency-money-inline .tool-note, .modal-intro { color: #b6c9d8; }
.tool-grid label, .currency-workbench .converter-fields label { font-size: var(--ui-text-lao); line-height: 1.6; }
:where(.tool-dialog input:not([type=checkbox]), .tool-dialog select, .tool-dialog textarea),
.currency-workbench .converter-fields input, .currency-workbench .converter-fields select,
.currency-money-inline input, .currency-money-inline select { font-size: var(--ui-text); min-height: 50px; height: auto; }
.tool-dialog input::placeholder, .tool-dialog textarea::placeholder,
.currency-money-inline input::placeholder { font-size: var(--ui-text-small); }
/* Shared form rows keep Chinese/Lao labels and controls aligned across businesses. */
.business-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.business-field { min-width: 0; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 8px; margin: 0 0 12px; color: #c4d2df; font-size: var(--ui-text-small); line-height: 1.5; }
.business-field-wide { grid-column: 1 / -1; }
.business-field-label { display: flex; align-items: flex-start; gap: 8px; min-width: 0; min-height: 54px; }
.business-field-label ty-lo { margin-top: 6px; color: #b8ccdf; font-size: var(--ui-text-lao); line-height: 1.6; }
.business-field :where(input:not([type=file]), select, textarea) { display: block; width: 100%; min-width: 0; height: 50px; margin: 0; padding: 0 12px; border: 1px solid #34495d; border-radius: 10px; outline-color: #86afe8; background: #0a1421; color: #f3f7fa; font: inherit; font-size: var(--ui-text); font-variant-numeric: tabular-nums; }
.business-field select { padding-inline: 10px; }
.business-field textarea { min-height: 112px; height: auto; padding-block: 12px; resize: vertical; line-height: 1.7; }
.business-field input::placeholder, .business-field textarea::placeholder { color: #8c9fb3; font-size: var(--ui-text-small); }
.business-field input[readonly] { background: #122237; color: #b8ccdf; }
.business-field-note { min-width: 0; display: grid; align-content: start; gap: 6px; color: #9cabbc; font-size: .8125rem; line-height: 1.65; }
.business-field-note:empty { display: none; }
.business-field-note > small { margin: 0; color: inherit; font: inherit; }
.business-field-note .ui-select-lo { margin: 0; color: #b8ccdf; font-size: var(--ui-text-lao); line-height: 1.6; }
.inquiry-modal .modal-head { gap: 16px; }
.inquiry-modal .modal-intro { margin: 0 0 20px; padding: 12px; border: 1px solid var(--panel-line); border-radius: 10px; background: var(--panel-soft); overflow-wrap: anywhere; }
.inquiry-modal .form-feedback { margin: 0; }
.inquiry-modal .submit-button { margin-top: 0; border-radius: 10px; }
:is(.inquiry-modal, .property-financing-dialog) { padding: 0; overflow: hidden; }
.inquiry-modal, .property-financing-dialog[open] { display: flex; flex-direction: column; }
:is(.inquiry-modal, .property-financing-dialog) .modal-head { flex: none; margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--panel-line); background: var(--page-night); }
.modal-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 20px 20px; scroll-padding-block: 16px; }
@supports (grid-template-rows: subgrid) {
  .business-field { grid-row: span 3; grid-template-rows: subgrid; }
}
@supports not (grid-template-rows: subgrid) {
  .business-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 350px) {
  .business-fields { grid-template-columns: minmax(0, 1fr); }
  .lease-calc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
}
.tool-primary, .tool-secondary, .tool-lease-footer > button,
.phonebook-form-actions button, .yellow-pagination button, .anime-pagination button,
.anime-watch-controls button, .anime-watch-lines button, .anime-watch-episodes button,
.currency-heading button, .converter-button, .service-actions button, .primary-button {
  font-size: var(--ui-text-lao);
  min-height: 66px;
  height: auto;
  padding: 10px 12px;
}
.phonebook-search, .anime-search { min-height: 72px; }
.anime-search .ui-search-field input { font-size: var(--ui-text); height: 30px; }
.phonebook-number small, .yellow-page, .anime-pagination > span { font-size: var(--ui-text-small); }
.anime-card > b { font-size: var(--ui-text-small); line-height: 1.7; }
.anime-poster > small { font-size: .8125rem; line-height: 1.6; white-space: normal; }
.anime-poster ty-lo { font-size: var(--ui-text-small); }
/* Shared surfaces and controls for the business views. */
:is(.service-hero, .service-cooperation, .currency-workbench, .contact-person-card, .contact-phone, .local-tool-entry) {
  border-color: var(--panel-line);
  border-radius: var(--panel-radius);
  background: var(--panel-night);
  box-shadow: none;
}
:is(.anime-categories, .currency-tool-tabs, .contact-qr-switch) { border-color: var(--panel-line); background: var(--panel-soft); }
:is(.anime-categories, .currency-tool-tabs, .phonebook-categories, .yellow-toolbar, .contact-qr-switch) button:is([aria-pressed=true], [aria-selected=true], .active) {
  border-color: #547db2;
  background: var(--panel-raised);
  color: var(--lao-white);
  box-shadow: inset 0 -2px var(--lao-red);
}
:is(.phonebook-search, .anime-search) { border-color: var(--panel-line); border-radius: var(--control-radius); background: var(--panel-soft); }
:is(.phonebook-search, .anime-search):focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 2px #86afe81c; }
:is(.tool-dialog, .phonebook-form-dialog, .inquiry-modal, .property-financing-dialog, .film-details, .anime-theatre) { border-color: #3a5578; border-radius: 20px; background: var(--page-night); }
:is(.tool-dialog, .currency-workbench, .phonebook-form-dialog, .inquiry-modal, .property-financing-dialog, .placeholder-view, .auction-payment-dialog, .ladder-trade-dialog)
:is(.tool-primary, .property-primary, .lease-calculate-button, .auction-pay-button, .ladder-button.primary, button[type=submit].primary-button) {
  border-color: var(--brand-action);
  background: var(--brand-action);
  color: var(--lao-white);
  box-shadow: none;
}
.phonebook-form-actions button[type=submit], .yellow-workbench .phonebook-add { border-color: var(--brand-action); background: var(--brand-action); color: var(--lao-white); }
.service-hero p, .service-cooperation p { font-size: var(--ui-text-small); line-height: 1.8; }
.service-section-heading h3, .service-feature-card b, .service-steps b { font-size: var(--ui-text); line-height: 1.6; }
.service-feature-card { gap: 8px; padding: 16px; border-color: var(--panel-line); border-radius: var(--panel-radius); background: var(--panel-night); }
.service-feature-card small { font-size: var(--ui-text-small); line-height: 1.8; }
.service-feature-number, .service-steps li > span { font-size: .75rem; background: var(--panel-raised); color: #d8e8ff; }
.service-steps li { padding: 14px 12px; min-height: 66px; background: var(--panel-soft); border-color: var(--panel-line); }
.contact-content { gap: 14px; }
.contact-phone { padding: 16px; }
.contact-person-copy p, .contact-phone small, .contact-phone > b { font-size: var(--ui-text-small); }
.contact-phone strong { font-size: var(--ui-text); }
.contact-phone > b { border-color: #547db2; border-radius: var(--control-radius); background: var(--panel-raised); color: white; }
.contact-qr-heading { margin-top: 8px; }
.currency-reference > span, .currency-reference-quotes > span { font-size: var(--ui-text-small); }
.currency-reference-quotes b { font-size: var(--ui-text-lao); }
.currency-source { flex: none; margin: 4px 2px 12px; text-align: right; font-size: .8125rem; }
.currency-source p { margin: 0; }
.currency-source a { color: var(--text-muted-night); text-decoration: none; }
.lease-calculation-rules { margin-top: 16px; border-top: 1px solid var(--panel-line); }
.lease-calculation-rules summary { padding: 12px 0; color: #bdcfe5; font-size: var(--ui-text-small); cursor: pointer; }
.lease-calculation-rules .lease-calc-note { margin: 0; font-size: var(--ui-text-small); line-height: 1.8; }
.anime-source { display: flex; flex-wrap: wrap; padding-top: 10px; margin-top: 16px; font-size: .8125rem; }
.film-details-availability { padding: 8px 12px; width: fit-content; border: 1px solid var(--panel-line); border-radius: 8px; background: var(--panel-soft); font-size: var(--ui-text-small); }
@media (prefers-reduced-motion: reduce) { .quick-card { transition: none; } }
@media (max-height: 700px) {
  .topbar { min-height: 54px; padding: 8px 0; }
  .home-view { gap: 8px; padding-top: 8px; grid-template-rows: max-content max-content minmax(232px, 1fr); }
  .home-hero { padding: 10px 14px; }
  .home-hero h1 { margin-bottom: 8px; font-size: 1.625rem; }
  .quick-grid { min-height: 232px; grid-template-rows: repeat(3, minmax(72px, 1fr)); }
  .quick-card { min-height: 72px; }
}
/* Scroll the whole catalogue so larger controls do not shrink the reading area. */
.phonebook-view, .anime-view { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3c5266 transparent; }
.phonebook-scroll, .anime-scroll { flex: none; min-height: auto; overflow: visible; }
@media (max-width: 360px) {
  .phonebook-card-head { gap: 10px; }
}
/* One viewport contract for app browsers, keyboards, safe areas and dialogs. */
:root {
  --viewport-height: 100vh;
  --viewport-top: 0px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --page-gutter: 18px;
}
@supports (height: 100dvh) { :root { --viewport-height: 100dvh; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.app-shell {
  height: var(--viewport-height);
  top: var(--viewport-top);
  padding: var(--safe-top) max(var(--page-gutter), var(--safe-right)) calc(var(--ui-navigation-height) + 12px + var(--safe-bottom)) max(var(--page-gutter), var(--safe-left));
}
:where(dialog, .inquiry-modal, .editor-modal, .ladder-trade-dialog) {
  max-height: min(calc(var(--viewport-height) * var(--dialog-ratio, .92)), calc(var(--viewport-height) - var(--safe-top) - var(--safe-bottom) - var(--dialog-gap, 24px)));
}
:where(dialog) {
  position: fixed;
  top: calc(var(--viewport-top) + var(--safe-top));
  bottom: calc(100% - var(--viewport-top) - var(--viewport-height) + var(--safe-bottom));
}
.film-details { --dialog-ratio: .86; }
.ladder-trade-dialog { --dialog-ratio: .88; }
.operations-dialog { --dialog-ratio: .9; }
.editor-modal { --dialog-ratio: .94; }
.phonebook-form-dialog { --dialog-ratio: 1; --dialog-gap: 36px; }
.auction-payment-dialog { --dialog-ratio: 1; --dialog-gap: 32px; }
.modal-backdrop, .ladder-modal {
  top: var(--viewport-top);
  bottom: auto;
  height: var(--viewport-height);
  padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
}
.toast { max-width: calc(100% - 32px); white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 700px) and (min-height: 500px) {
  .app-shell { height: min(900px, calc(var(--viewport-height) - 36px)); }
}
@media (max-height: 760px) { :root { --page-gutter: 14px; } }
@media (max-width: 360px) { :root { --page-gutter: 12px; } }
@media (max-width: 480px) { .anime-theatre { --dialog-ratio: .95; } }
@media (hover: none), (max-width: 699px) {
  :is(.app-shell, dialog, .admin-main) :is(input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea) { font-size: max(16px, 1rem); }
  .app-shell :is(.listing-card, .photo-stage, .opportunity-card, .opportunity-video-stage, .property-project-browser) { touch-action: pinch-zoom; }
}