:root {
  --mobile-nav-h: 70px;
  --td-mobile-blue: #1e3a8a;
  --td-mobile-ink: #14213a;
  --td-mobile-muted: #64748b;
  --td-mobile-line: #dbe3ef;
  --td-mobile-surface: #ffffff;
}

html.td-access-locked #root { visibility: hidden; }
#td-access-gate {
  position: fixed; z-index: 99999; inset: 0; display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 5%, #24365f 0, #101d3d 45%, #091229 100%);
  color: #eef4ff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.td-gate-card {
  box-sizing: border-box; width: min(410px, 100%); padding: 34px 26px;
  border: 1px solid #ffffff24; border-radius: 24px; background: #ffffff10;
  box-shadow: 0 28px 80px #0008; text-align: center; backdrop-filter: blur(20px);
}
.td-gate-logo {
  display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 18px;
  border: 1px solid #ffffff22; border-radius: 20px; background: #ffffff14;
  font-size: 25px; font-weight: 750; letter-spacing: .04em;
}
.td-gate-card h1 { margin: 0; font-size: 24px; }
.td-gate-card p { margin: 8px 0 24px; color: #aebbd5; }
.td-gate-card form { display: grid; gap: 12px; }
.td-gate-card input {
  box-sizing: border-box; width: 100%; min-height: 52px; padding: 0 16px;
  border: 1px solid #ffffff30; border-radius: 13px; outline: none;
  background: #07112690; color: white; text-align: center; font-size: 20px; letter-spacing: .2em;
}
.td-gate-card input:focus { border-color: #8ab4ff; box-shadow: 0 0 0 3px #4f8cff28; }
.td-gate-card button {
  min-height: 50px; border: 0; border-radius: 13px; background: #315ac5;
  color: white; font-size: 16px; font-weight: 650;
}
.td-gate-card small { min-height: 18px; color: #ffb4b4; }

html, body, #root { width: 100%; min-height: 100%; }
body { margin: 0; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font-size: 16px; touch-action: manipulation; }
.mobile-bottom-nav, .mobile-preview-toggle { display: none; }

/* The switch is injected into the current page toolbar so it remains reachable
   on iPhone, iPad and desktop layouts. */
.td-layout-switch {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; padding: 3px;
  border: 1px solid #d7e0ed; border-radius: 12px; background: #eef3f8;
  box-shadow: inset 0 1px 0 #fff; white-space: nowrap;
}
.td-layout-switch button {
  display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 5px;
  padding: 0 9px; border: 0; border-radius: 9px; background: transparent;
  color: #64748b; font-size: 12px; font-weight: 650;
}
.td-layout-switch button span { font-size: 14px; line-height: 1; }
.td-layout-switch button b { font: inherit; }
.td-layout-switch button.is-active {
  background: white; color: #183b86; box-shadow: 0 1px 4px rgba(15, 23, 42, .13);
}

/* Desktop mode can be requested even from an iPhone. The original application
   is kept intact and may scroll horizontally on very narrow screens. */
html.td-layout-desktop body { overflow: auto; padding-bottom: 0; }
html.td-layout-desktop .mobile-bottom-nav,
html.td-layout-desktop .mobile-preview-toggle { display: none !important; }
html.td-layout-desktop .td-layout-switch {
  position: fixed; z-index: 1200; right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  background: rgba(238, 243, 248, .94); box-shadow: 0 8px 26px rgba(15, 23, 42, .18);
  backdrop-filter: blur(16px);
}
@media (max-width: 1179px) {
  html.td-layout-desktop #root { min-width: 1180px; }
  html.td-layout-desktop #root > div { min-height: 760px; }
}

/* Touch layout: shared by iPhone and iPad, regardless of physical width. */
html.td-layout-mobile { overscroll-behavior: none; }
html.td-layout-mobile body {
  overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom); background: #f4f6fa;
  color: var(--td-mobile-ink);
}
html.td-layout-mobile #root > div {
  min-height: 100dvh; height: auto !important;
  padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
}
html.td-layout-mobile #root > div > aside:first-child { display: none !important; }
html.td-layout-mobile #root > div > div:last-child {
  width: 100% !important; min-width: 0 !important; min-height: 100dvh;
}
html.td-layout-mobile #root header {
  position: sticky; z-index: 70; top: 0; padding: calc(12px + env(safe-area-inset-top)) 14px 12px !important;
  background: rgba(255, 255, 255, .96) !important; backdrop-filter: blur(18px);
}
html.td-layout-mobile #root header > div { gap: 10px !important; }
html.td-layout-mobile #root header h1 { font-size: 19px !important; line-height: 1.25; }
html.td-layout-mobile #root header p { font-size: 12px !important; line-height: 1.4; }
html.td-layout-mobile #root header .titlebar-no-drag:not(.td-layout-switch) {
  max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html.td-layout-mobile #root header .titlebar-no-drag:not(.td-layout-switch)::-webkit-scrollbar { display: none; }
html.td-layout-mobile .titlebar-drag { -webkit-app-region: no-drag !important; }
html.td-layout-mobile div[class*="p-6"] { padding: 12px !important; }
html.td-layout-mobile div[class*="rounded-xl"],
html.td-layout-mobile section[class*="rounded-xl"] { border-radius: 16px !important; }

html.td-layout-mobile .btn,
html.td-layout-mobile button:not(.td-layout-switch button) { min-height: 44px; }
html.td-layout-mobile .field-input,
html.td-layout-mobile input,
html.td-layout-mobile select,
html.td-layout-mobile textarea {
  min-height: 46px; border-radius: 11px !important; font-size: 16px !important;
}
html.td-layout-mobile textarea { line-height: 1.45; }
html.td-layout-mobile input[type="checkbox"],
html.td-layout-mobile input[type="radio"] { min-width: 22px; min-height: 22px; }
html.td-layout-mobile label { line-height: 1.35; }

/* Toolbars, document tabs and filter rows scroll with one finger rather than
   shrinking their buttons into unusable targets. */
html.td-layout-mobile div[class*="shrink-0"][class*="border-b"],
html.td-layout-mobile div[class*="overflow-x-auto"] {
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html.td-layout-mobile div[class*="shrink-0"][class*="border-b"]::-webkit-scrollbar,
html.td-layout-mobile div[class*="overflow-x-auto"]::-webkit-scrollbar { display: none; }
html.td-layout-mobile div[class*="shrink-0"][class*="border-b"] button { flex: 0 0 auto; }

/* Data tables become labelled record cards. */
html.td-layout-mobile table.mobile-data-table {
  display: block; width: 100% !important; min-width: 0 !important; border-collapse: separate;
}
html.td-layout-mobile table.mobile-data-table thead {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
}
html.td-layout-mobile table.mobile-data-table tbody {
  display: grid; gap: 12px; width: 100%; padding: 10px; box-sizing: border-box;
}
html.td-layout-mobile table.mobile-data-table tbody tr {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px;
  padding: 14px; border: 1px solid #dfe7f2 !important; border-radius: 16px;
  background: white; box-shadow: 0 3px 12px rgba(15, 23, 42, .055);
}
html.td-layout-mobile table.mobile-data-table tbody td {
  display: flex; min-width: 0; max-width: none !important; flex-direction: column; gap: 3px;
  padding: 0 !important; white-space: normal !important; overflow-wrap: anywhere;
  text-align: left !important;
}
html.td-layout-mobile table.mobile-data-table tbody td[data-label]::before {
  content: attr(data-label); color: #8797b2; font-size: 10px; font-weight: 700;
  line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
}
html.td-layout-mobile table.mobile-data-table tbody td:first-child { grid-column: 1 / -1; }
html.td-layout-mobile table.mobile-data-table tbody td:last-child {
  grid-column: 1 / -1; margin-top: 2px; padding-top: 10px !important; border-top: 1px solid #eef2f7;
}
html.td-layout-mobile table.mobile-data-table tbody td:last-child > div {
  justify-content: flex-start !important; flex-wrap: wrap; gap: 5px 10px !important;
}
html.td-layout-mobile table.mobile-data-table tbody td:last-child button,
html.td-layout-mobile table.mobile-data-table tbody td:last-child a { min-height: 40px; padding: 8px 6px; }

/* Bottom navigation follows iOS safe areas and exposes a clear selected item. */
html.td-layout-mobile .mobile-bottom-nav {
  position: fixed; z-index: 900; left: 0; right: 0; bottom: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
  padding: 6px 8px env(safe-area-inset-bottom); box-sizing: border-box;
  border-top: 1px solid var(--td-mobile-line); background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 30px rgba(15, 23, 42, .08); backdrop-filter: blur(18px);
}
html.td-layout-mobile .mobile-bottom-nav button {
  display: flex; min-width: 0; min-height: 54px; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; border: 0; border-radius: 13px;
  background: transparent; color: #66758d;
}
html.td-layout-mobile .mobile-bottom-nav button:active { background: #eef4ff; }
html.td-layout-mobile .mobile-bottom-nav button.is-active { background: #edf3ff; color: #1e3a8a; }
html.td-layout-mobile .mobile-bottom-nav span { font-size: 20px; line-height: 1; }
html.td-layout-mobile .mobile-bottom-nav small { font-size: 11px; font-weight: 650; }

/* The editor and A4 preview are separate full-width workspaces on touch
   devices. This prevents a tiny, unusable two-column editor on iPhone. */
html.td-layout-mobile .preview-canvas {
  display: none !important; width: 100% !important; padding: 8px !important;
  overflow: auto !important; box-sizing: border-box;
}
html.td-layout-mobile .mobile-editor-pane { width: 100% !important; min-width: 0 !important; }
html.td-layout-mobile body.mobile-preview-mode .mobile-editor-pane { display: none !important; }
html.td-layout-mobile body.mobile-preview-mode .preview-canvas { display: block !important; zoom: .48; }
html.td-layout-mobile body.mobile-preview-mode .preview-canvas ~ * { display: none !important; }
html.td-layout-mobile body.mobile-preview-mode .preview-canvas::before {
  content: "A4 预览 · 可横向滑动查看细节"; display: block; margin: 0 0 12px;
  color: #64748b; font-size: 26px; font-weight: 650;
}
html.td-layout-mobile .mobile-preview-toggle {
  position: fixed; z-index: 920; right: 14px;
  bottom: calc(var(--mobile-nav-h) + 14px + env(safe-area-inset-bottom));
  display: flex; min-height: 46px; align-items: center; gap: 6px; padding: 0 15px;
  border: 0; border-radius: 24px; background: var(--td-mobile-blue); color: white;
  box-shadow: 0 8px 28px rgba(30, 58, 138, .32);
}
html.td-layout-mobile .mobile-preview-toggle b { font-size: 13px; }

/* Modals use bottom sheets on phones and centered touch dialogs on iPad. */
html.td-layout-mobile .fixed.inset-0 { padding: 10px !important; }
html.td-layout-mobile .fixed.inset-0 > div {
  width: min(100%, 760px) !important; max-width: calc(100vw - 20px) !important;
  max-height: calc(100dvh - 24px) !important; border-radius: 20px !important;
}
html.td-layout-mobile .td-customer-card,
html.td-layout-mobile .td-export-card {
  width: calc(100vw - 24px) !important; max-width: 760px !important;
  max-height: 86dvh !important; padding: 16px !important; box-sizing: border-box;
}
html.td-layout-mobile .td-bilingual-input { grid-template-columns: 1fr !important; }
html.td-layout-mobile [role="menu"],
html.td-layout-mobile [role="listbox"] {
  max-width: calc(100vw - 20px) !important; max-height: min(60dvh, 520px) !important;
}

/* Phone-only refinements. */
@media (max-width: 599px) {
  html.td-layout-mobile #root header > div > .titlebar-no-drag:not(.td-layout-switch) { width: 100%; }
  html.td-layout-mobile #root header > div > .titlebar-no-drag:not(.td-layout-switch) > button { flex: 1 0 auto; }
  html.td-layout-mobile .td-layout-switch button { padding-inline: 7px; }
  html.td-layout-mobile .td-layout-switch button b { font-size: 11px; }
  html.td-layout-mobile #root [class*="grid-cols-2"],
  html.td-layout-mobile #root [class*="grid-cols-3"],
  html.td-layout-mobile #root [class*="grid-cols-4"] { grid-template-columns: minmax(0, 1fr) !important; }
  html.td-layout-mobile table.mobile-data-table tbody tr { grid-template-columns: minmax(0, 1fr); }
  html.td-layout-mobile table.mobile-data-table tbody td,
  html.td-layout-mobile table.mobile-data-table tbody td:first-child,
  html.td-layout-mobile table.mobile-data-table tbody td:last-child { grid-column: 1 !important; }
  html.td-layout-mobile .fixed.inset-0 { align-items: flex-end !important; padding: 0 !important; }
  html.td-layout-mobile .fixed.inset-0 > div {
    width: 100vw !important; max-width: 100vw !important; max-height: 94dvh !important;
    border-radius: 22px 22px 0 0 !important;
  }
}

/* iPad: roomier cards, centered floating navigation and a larger A4 preview. */
@media (min-width: 700px) {
  html.td-layout-mobile { --mobile-nav-h: 72px; }
  html.td-layout-mobile #root header { padding-inline: 20px !important; }
  html.td-layout-mobile div[class*="p-6"] { padding: 20px !important; }
  html.td-layout-mobile .mobile-bottom-nav {
    left: 50%; right: auto; bottom: max(12px, env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 32px));
    height: 68px; padding: 6px 10px; transform: translateX(-50%);
    border: 1px solid #d9e2ee; border-radius: 20px; box-shadow: 0 14px 38px rgba(15, 23, 42, .17);
  }
  html.td-layout-mobile .mobile-preview-toggle {
    right: 22px; bottom: calc(84px + env(safe-area-inset-bottom));
  }
  html.td-layout-mobile body.mobile-preview-mode .preview-canvas { zoom: .72; }
  html.td-layout-mobile body.mobile-preview-mode .preview-canvas::before { font-size: 19px; }
  html.td-layout-mobile table.mobile-data-table tbody { padding: 14px; }
  html.td-layout-mobile table.mobile-data-table tbody tr { padding: 16px 18px; }
  html.td-layout-mobile .td-customer-card,
  html.td-layout-mobile .td-export-card { padding: 20px !important; }
}

@media print {
  .mobile-bottom-nav, .mobile-preview-toggle, .td-layout-switch { display: none !important; }
  body.mobile-preview-mode .preview-canvas, .preview-canvas {
    display: block !important; zoom: 1 !important; padding: 0 !important;
  }
  body.mobile-preview-mode .preview-canvas::before { display: none !important; }
}