/* Mobile-first interaction layer. Loaded after legacy desktop styles. */
:root { --mobile-nav-height: 66px; --safe-bottom: env(safe-area-inset-bottom, 0px); }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #148c82; outline-offset: 3px; }
input, select, textarea { min-width: 0; max-width: 100%; }
dialog { overscroll-behavior: contain; }
body:has(dialog[open]) { overflow: hidden; }
.mobile-bottom-nav { position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 5px max(8px, env(safe-area-inset-right)) calc(5px + var(--safe-bottom)) max(8px, env(safe-area-inset-left)); border-top: 1px solid #dce9e6; background: #fff; box-shadow: 0 -5px 24px #254b4810; }
.mobile-bottom-nav a, .mobile-bottom-nav button { min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; color: #61756f; border: 0; border-radius: 12px; background: transparent; font-size: 12px; font-weight: 650; }
.mobile-bottom-nav svg { width: 23px; height: 23px; }
.mobile-bottom-nav [aria-current], .mobile-bottom-nav .active { color: #086b62; background: #edf7f4; }
.mobile-more-sheet { width: min(560px, 100%); max-width: 100%; max-height: 85vh; max-height: 85dvh; margin: auto auto 0; padding: 22px 18px calc(22px + var(--safe-bottom)); border: 0; border-radius: 24px 24px 0 0; background: #fff; }
.mobile-more-sheet::backdrop { background: #122c3980; }
.mobile-sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mobile-sheet-heading h2 { margin: 0; font-size: 22px; }
.mobile-sheet-heading p { margin: 6px 0; color: var(--muted); overflow-wrap: anywhere; }
.mobile-more-links { display: grid; gap: 8px; margin: 20px 0; }
.mobile-more-links a { min-height: 72px; display: grid; align-content: center; gap: 5px; padding: 14px; border-radius: 13px; background: #f1f7f5; }
.mobile-more-links strong { color: #0b766e; font-size: 16px; }
.mobile-more-links span { color: #5a7069; font-size: 13px; }
.mobile-admin-switch { display: none; }

/* Bound formerly viewport-scaled leave pages to a readable content width. */
.leave-app { width: min(590px, 100%); min-height: 100dvh; padding: 0 0 32px; }
.leave-app-header { position: sticky; inset: auto; top: 0; width: 100%; height: auto; padding: 20px 16px 14px; border-bottom: 1px solid #e7e4ef; }
.mobile-leave-heading { margin: 0 0 16px; font-size: 26px; color: #292c3b; }
.leave-header-panel { position: static; width: 100%; height: auto; display: flex; gap: 10px; padding: 0; background: transparent; }
.leave-calendar-icon { position: static; flex: 0 0 100px; width: auto; height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; margin: 0; border: 1px solid #dcd6ed; border-radius: 12px; background: #fff; }
.leave-calendar-icon::after { content: "个人资料"; color: #514879; font-size: 14px; }
.leave-calendar-icon img { width: 20px; height: 20px; }
.leave-header-title { position: static; flex: 1; width: auto; min-height: 48px; height: auto; margin: 0; padding: 10px; border: 0; border-radius: 12px; color: #fff; background: #6657d9; }
.leave-header-title strong { font-size: 16px; }
.leave-native-list { display: grid; padding: 16px; gap: 14px; }
.native-leave-card, .native-leave-card.with-actions { width: 100%; min-height: 0; height: auto; margin: 0; padding: 16px; border-radius: 16px; }
.native-leave-heading { height: auto; min-height: 48px; padding: 0; gap: 12px; }
.native-type { height: auto; min-height: 48px; gap: 10px; }.native-type strong { font-size: 20px; line-height: 1.4; }
.native-type > span, .native-type > span img { width: 28px; height: 28px; }
.native-status-stamp, .native-status-stamp img { position: static; width: 78px; height: 54px; object-fit: contain; margin: 0; }
.native-leave-time { height: auto; margin: 12px 0 0; font-size: 14px; line-height: 1.8; white-space: normal; overflow-wrap: anywhere; }
.native-leave-actions { min-height: 0; height: auto; margin-top: 14px; padding-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.native-leave-actions .native-btn { width: 100%; min-width: 0; min-height: 44px; height: auto; margin: 0; padding: 9px 4px; font-size: 14px; line-height: 1.5; border-radius: 10px; }
.leave-native-empty { min-height: 220px; padding: 70px 12px; font-size: 16px; }
.leave-sheet { width: min(590px, 100%); max-height: 92dvh; height: auto; margin: auto; border-radius: 20px; }
.leave-sheet-head { height: 60px; padding: 0 16px; }.leave-sheet-head strong { font-size: 17px; }.leave-sheet-head button { padding: 10px; min-height: 44px; font-size: 15px; }
.leave-form-card { margin: 14px; padding: 0 18px; border-radius: 14px; }.leave-form-card label { min-height: 60px; grid-template-columns: 110px minmax(0, 1fr); font-size: 14px; }
.leave-form-card input, .leave-form-card select, .leave-form-card textarea { padding: 12px 0; font-size: 16px; }.leave-form-card .leave-reason-row { min-height: 140px; }.leave-form-note { margin: 14px 20px; font-size: 13px; }
.detail-app { padding-top: 60px; padding-bottom: 28px; }.leave-native-nav { width: min(590px, 100%); height: 58px; left: 50%; right: auto; transform: translateX(-50%); padding: 0 16px; }
.leave-native-nav a { min-width: 44px; min-height: 44px; font-size: 32px; display: flex; align-items: center; }.leave-native-nav span { font-size: 12px; }
.detail-status-card, .native-info-group { margin: 14px; padding: 18px; border-radius: 14px; }.detail-school-line { gap: 10px; padding-bottom: 14px; }.detail-school-line > img, .detail-school-line > span { width: 38px; height: 38px; flex-shrink: 0; }.detail-school-line > div { min-width: 0; overflow-wrap: anywhere; }.detail-school-line small { font-size: 12px; }
.native-status { min-width: 60px; padding: 6px 8px; font-size: 12px; border-radius: 10px; flex-shrink: 0; }.detail-type-line { gap: 12px; padding-top: 16px; }.detail-type-line > span { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; }.detail-type-line strong { font-size: 20px; }.detail-type-line p { margin: 6px 0 0; font-size: 13px; }
.native-info-group h2 { margin: 0 0 12px; font-size: 18px; }.native-info-group dl div { min-height: 44px; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 8px 0; }.native-info-group dt, .native-info-group dd { font-size: 14px; overflow-wrap: anywhere; }.native-info-group .wide { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
.native-bottom-action { position: static; height: auto; min-height: 48px; margin: 16px; padding: 12px; border-radius: 12px; font-size: 16px; }.native-waiting-tip { margin: 16px; padding: 14px; border-radius: 12px; font-size: 14px; }
.native-certificate { width: min(560px, 100%); min-height: 100vh; margin: 0 auto; padding-bottom: 24px; }
.certificate-hero { height: 130px; padding: 26px 22px; }.certificate-hero h1 { font-size: 27px; line-height: 1.4; }.certificate-hero p { font-size: 14px; line-height: 1.6; }
.certificate-hero-art { width: 150px; height: 100px; }
.certificate-student { width: auto; height: auto; min-height: 96px; margin: -14px 16px 14px; padding: 18px; border-radius: 14px; }
.certificate-student > div { min-width: 0; height: auto; padding: 0; }.certificate-student strong { font-size: 22px; line-height: 1.5; overflow-wrap: anywhere; }.certificate-student span { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.certificate-student img, .certificate-student em { width: 56px; height: 56px; flex-shrink: 0; font-size: 22px; }
.certificate-qr-card, .certificate-time-card, .certificate-info-card { margin: 14px 16px 0; padding: 18px; border-radius: 14px; }
.certificate-qr-card { min-height: 0; padding-top: 20px; }.certificate-qr-card > img { width: min(280px, 100%); height: auto; aspect-ratio: 1; }
.qr-brand { display: none; } /* Keep the verification QR fully unobscured. */
.certificate-qr-card time { height: auto; margin-top: 10px; font-size: 14px; line-height: 1.8; }.certificate-qr-card time b { margin-left: 4px; font-size: 16px; }
.certificate-time-card { height: auto; }.certificate-time-card span { margin: 0 0 8px; font-size: 14px; line-height: 1.7; }.certificate-time-card strong { font-size: 16px; line-height: 1.8; }
.certificate-info-card h2 { margin: 0 0 14px; font-size: 20px; line-height: 1.5; }.certificate-info-card dl div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; min-height: 42px; padding: 8px 0; }
.certificate-info-card dt, .certificate-info-card dd { margin: 0; font-size: 14px; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  body { font-size: 15px; line-height: 1.6; }
  body:has(.mobile-bottom-nav) { padding-bottom: calc(var(--mobile-nav-height) + var(--safe-bottom)); }
  .leave-app, .native-certificate { min-height: calc(100dvh - var(--mobile-nav-height) - var(--safe-bottom)); }
  .leave-app-header { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  .leave-native-nav { height: calc(58px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
  .detail-app { padding-top: calc(60px + env(safe-area-inset-top, 0px)); }
  body.mobile-editing .mobile-bottom-nav { display: none; }
  .topbar { position: sticky; top: 0; height: auto; min-height: 58px; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; z-index: 30; gap: 10px; }
  .topnav, .mobile-nav, .brand small, .user-copy, .user-menu form { display: none; }
  .brand strong { font-size: 16px; }.brand-mark { width: 34px; height: 34px; }.user-menu { margin-left: auto; }
  .app-shell { width: auto; max-width: 600px; margin: auto; padding: 22px 14px 28px; }
  .page-heading { gap: 14px; margin-bottom: 18px; }.page-heading h1 { font-size: 26px; line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
  .page-heading, .panel-title { flex-direction: column; align-items: stretch; }
  .page-heading p { font-size: 14px; line-height: 1.7; }.eyebrow { font-size: 11px; letter-spacing: .08em; }
  .metric-grid, .metric-grid-four, .metric-grid-five, .metric-grid-six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  .metric-grid article { min-height: 104px; padding: 14px; border-radius: 15px; box-shadow: none; }
  .metric-grid article::after { width: 60px; height: 60px; }.metric-grid strong { margin: 3px 0; font-size: 27px; line-height: 1.25; }
  .metric-grid span { font-size: 13px; }.metric-grid small { font-size: 12px; line-height: 1.4; }
  [data-page="dashboard"] #openAccountDialog:disabled { display: none; }
  [data-page="dashboard"] .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  [data-page="dashboard"] .metric-grid article { min-height: 78px; padding: 11px 8px; }
  [data-page="dashboard"] .metric-grid span { font-size: 12px; }
  [data-page="dashboard"] .metric-grid strong { font-size: 22px; overflow-wrap: anywhere; }
  [data-page="dashboard"] .metric-grid small { display: none; }
  [data-page="dashboard"] .panel-title p { display: none; }
  [data-page="dashboard"] .panel-actions > a[href="/billing"] { display: none; }
  .admin-shell .metric-grid article { min-height: 86px; padding: 10px 13px; }.admin-shell .metric-grid small { display: none; }
  .content-panel, .admin-panel { padding: 16px; border-radius: 18px; box-shadow: 0 4px 20px #193a4005; }
  .panel-title { gap: 14px; margin-bottom: 16px; }.panel-title h2 { font-size: 19px; }.panel-title p { font-size: 13px; line-height: 1.7; }
  .btn, .btn-small, .text-button, .icon-button { min-height: 44px; font-size: 14px; }
  .btn:hover { transform: none; }.icon-button { min-width: 44px; width: 44px; height: 44px; flex-shrink: 0; }
  .inline-actions, .panel-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .inline-actions > .btn, .panel-actions > .btn { flex: 1 1 auto; width: auto; }
  .account-grid, .school-admin-grid, .form-grid, .two-column-form { grid-template-columns: minmax(0, 1fr); }
  .account-card { padding: 14px; }.account-head h3 { font-size: 19px; }.account-head p { font-size: 14px; }
  .account-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 13px; }.account-meta span { overflow-wrap: anywhere; }
  .account-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-actions .run-account { grid-column: 1 / -1; min-height: 48px; }
  .account-editor summary, #auditLogList summary { min-height: 44px; padding: 10px 0; font-size: 14px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea { min-height: 46px; font-size: 16px; line-height: 1.4; border-radius: 11px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex-shrink: 0; }
  .check-row { min-height: 44px; }.form-grid label, .stack-form label { min-width: 0; font-size: 14px; }
  .time-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }.full-field { grid-column: 1 / -1; }
  .modal, .leave-sheet { width: min(600px, 100%); max-width: 100%; height: auto; max-height: 92vh; max-height: 92dvh; margin: auto auto 0; border-radius: 22px 22px 0 0; overflow-y: auto; }
  .modal form { padding: 18px 16px calc(16px + var(--safe-bottom)); }.modal-head { gap: 12px; margin-bottom: 18px; }.modal-head h2 { font-size: 21px; }
  .modal .modal-actions { position: sticky; bottom: calc(-16px - var(--safe-bottom)); padding: 14px 0 calc(14px + var(--safe-bottom)); margin-bottom: calc(-16px - var(--safe-bottom)); background: #fff; gap: 10px; border-top: 1px solid #e4ece9; }
  .modal-actions .btn { flex: 1; }.leave-sheet-head { height: auto; min-height: 60px; }.leave-sheet-head button { min-width: 44px; min-height: 44px; font-size: 16px; }
  .leave-sheet { padding-bottom: calc(16px + var(--safe-bottom)); }.leave-form-card { padding: 10px 14px; }.leave-form-card label { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 12px 0; }
  .leave-form-card input, .leave-form-card select { text-align: left; padding: 10px 8px; background: #f6f5f9; }.leave-form-card .leave-reason-row { min-height: 0; }
  .mobile-admin-switch { position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 15; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px; border: 1px solid #dce8e4; border-radius: 14px; background: #f7fbf9; scroll-margin-top: 70px; }
  .mobile-admin-switch span { color: #45645a; font-weight: 700; font-size: 14px; }
  .admin-tabs { display: none; }.bulk-account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mobile-records { display: block; }.mobile-records thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mobile-records tbody { display: grid; gap: 14px; }.mobile-records tbody tr { display: block; min-width: 0; padding: 10px 12px; border: 1px solid #dce8e4; border-radius: 14px; background: #fbfdfc; }
  .mobile-records td { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 10px 0; font-size: 14px; }
  .mobile-records td::before { content: attr(data-label); color: #657b72; font-size: 13px; line-height: 1.8; }
  .mobile-cell-content { min-width: 0; overflow-wrap: anywhere; }.mobile-records td:last-child { border-bottom: 0; }
  .mobile-records .mobile-empty-cell { display: block; }.mobile-empty-cell::before { display: none; }
  .mobile-records .user-row-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }.cell-sub { font-size: 13px; }
  .log-entry { padding: 14px; }.log-entry header { display: grid; gap: 6px; }.log-entry h3 { font-size: 15px; overflow-wrap: anywhere; }.log-entry time { font-size: 12px; }.log-entry p { font-size: 13px; overflow-wrap: anywhere; }
  .log-entry pre { max-width: 100%; font-size: 13px; }.pagination-bar { flex-wrap: wrap; gap: 8px; }.pagination-bar span { order: -1; flex-basis: 100%; text-align: center; }.pagination-bar .btn { flex: 1; }
  .toast { right: 14px; left: 14px; bottom: calc(80px + var(--safe-bottom)); max-width: none; text-align: center; }
  .billing-summary { gap: 16px; padding: 18px; }.billing-summary h2 { font-size: 22px; overflow-wrap: anywhere; }.billing-summary-values { display: grid; grid-template-columns: 1fr; width: 100%; }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.plan-card { padding: 14px 10px; }.plan-card > strong { font-size: 17px; padding-top: 20px; padding-right: 0; }.plan-kicker { padding-right: 22px; }.plan-price { flex-wrap: wrap; gap: 2px; }.plan-price b { font-size: 30px; }
  .payment-method-grid { grid-template-columns: 1fr; }.payment-method { padding: 16px; }.payment-method img { width: min(220px, 100%); align-self: center; }
  .ticket-summary-card { grid-template-columns: 1fr 1fr; padding: 16px; }.ticket-summary-card > div:last-child { grid-column: 1 / -1; }.ticket-message { width: 100%; padding: 14px; }.ticket-message header { flex-wrap: wrap; gap: 6px; }.ticket-message header strong { font-size: 14px; }.ticket-message header time { font-size: 12px; }
  .ticket-list-card h3 { overflow-wrap: anywhere; }.ticket-list-meta { flex-wrap: wrap; overflow-wrap: anywhere; }.ticket-filter { flex-direction: column; align-items: stretch; }
  .jwsession-tool-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }.jwsession-result-card { padding: 16px; }.captcha-heading { flex-wrap: wrap; }.captcha-panel { padding: 12px; }
  .pdf-viewer { height: 60vh; min-height: 260px; }
  .auth-layout { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-start; padding: calc(28px + env(safe-area-inset-top, 0px)) 18px 32px; }
  .auth-brand { position: static; align-self: flex-start; margin-bottom: 28px; }.auth-card { padding: 24px 20px; border-radius: 20px; }.auth-copy h1 { font-size: 27px; line-height: 1.3; }.auth-copy p, .auth-note { font-size: 14px; }
  .auth-switch a { display: inline-flex; align-items: center; min-height: 44px; }.auth-note { max-width: 450px; margin-top: 24px; }
  .marketing-nav { width: auto; margin: 0 16px; height: 70px; }.marketing-nav nav { gap: 8px; }.marketing-nav .btn-secondary { display: inline-flex; }.marketing-nav nav > a:not(.btn) { display: none; }
  .marketing-hero { width: auto; margin: 0 18px; min-height: 0; grid-template-columns: 1fr; padding: 34px 0; gap: 30px; }.marketing-hero h1 { font-size: 36px; line-height: 1.15; }.marketing-hero .hero-copy > p { font-size: 16px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }.trust-row { flex-wrap: wrap; }.product-preview { transform: none; }.preview-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }.preview-stats article { padding: 10px 6px; }.preview-stats strong { font-size: 23px; }
  .marketing-section { width: auto; margin: 0 18px; padding: 32px 0; }.marketing-footer { flex-wrap: wrap; padding: 24px 18px; }.security-band { padding: 24px 18px; }
  .announcement-card { padding: 22px 18px; }.announcement-content { max-height: 40dvh; font-size: 15px; }.announcement-history-card { padding: 18px; }.announcement-history-content { overflow-wrap: anywhere; }
  .verify-shell { padding: 24px 14px; }.verify-card { max-width: 100%; padding: 22px 16px; }.verify-card dd { overflow-wrap: anywhere; }
}
@media (min-width: 761px) { .mobile-bottom-nav, .mobile-more-sheet { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }