/* V61 — shared-facility workspace.
   This stylesheet is loaded last. It replaces layout decisions while keeping
   the existing controls, permissions, configured login artwork and data intact. */
:root {
  color-scheme: light;
  --ink: #202e2b;
  --muted: #60716a;
  --line: #dce4df;
  --bg: #f4f6f5;
  --panel: #fff;
  --blue: #17634f;
  --blue-dark: #104b3c;
  --teal: #17634f;
  --green: #17634f;
  --gold: #926022;
  --red: #a93b35;
  --slot: #f4f7f5;
  --selected: #d4eee3;
  --pending: #fff1cd;
  --busy: #eee8e5;
  --maintenance: #ece9f8;
  --shadow: 0 2px 8px rgb(25 46 36 / 3%);
  --ops-ink: var(--ink);
  --ops-muted: var(--muted);
  --ops-green: var(--blue);
  --ops-green-dark: var(--blue-dark);
  --ops-mint: #edf6f1;
  --ops-lime: #d4eee3;
  --ops-paper: var(--bg);
  --ops-line: var(--line);
  --ops-shadow: var(--shadow);
  --v57-ink: var(--ink);
  --v57-muted: var(--muted);
  --v57-green: var(--blue);
  --v57-green-soft: #edf6f1;
  --v57-line: var(--line);
  --sidebar-width: 212px;
  --topbar-height: 68px;
}

html, body, body.app-active {
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
html { scroll-padding-top: 88px; }
body {
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #81b5a2;
  outline-offset: 3px;
}
label { min-width: 0; gap: 7px; color: #43564d; font-size: 14px; line-height: 1.5; }
input, select, textarea {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cdd9d2;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
  font-size: 14px;
}
input::placeholder, textarea::placeholder { color: #7c8983; }
input:focus, select:focus, textarea:focus { border-color: #47866d; }
input[type="checkbox"], input[type="radio"] { min-height: 18px; accent-color: var(--blue); }
textarea { resize: vertical; line-height: 1.65; }
.primary-btn, .secondary-btn, .text-btn {
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: none;
  white-space: normal;
}
.primary-btn { color: #fff; background: var(--blue); }
.primary-btn:hover:not(:disabled) { background: var(--blue-dark); }
.primary-btn:disabled { color: #fff; background: #8fa59a; opacity: 1; }
.secondary-btn { color: #344f42; border-color: #d1ddd5; background: #fff; }
.secondary-btn:hover:not(:disabled) { border-color: #a3b9ac; background: #f0f6f2; }
.secondary-btn.danger { color: var(--red); }
.secondary-btn:disabled { opacity: .65; }
.hint, .scope-note, .training-copy { color: var(--muted); font-size: 14px; line-height: 1.65; }
.summary { min-height: 0; padding: 14px 16px; color: #385545; background: #f0f6f2; font-size: 14px; }

/* App frame: quiet, stable navigation and a readable account identity. */
.app-view { min-height: 100vh; background: var(--bg); }
.topbar, body.app-active .topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  padding: 0 28px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: #fff;
  backdrop-filter: none;
}
.page-context { min-width: 0; }
.page-context p { display: none; }
.page-context h1 { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.4; letter-spacing: normal; }
.account-card, body.app-active .account-card {
  display: block;
  max-width: 52%;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  text-align: right;
}
.account-card strong, body.app-active .account-card strong { color: var(--ink); font-size: 14px; line-height: 1.45; }
.account-card small, body.app-active .account-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.shell { width: 100%; min-height: 100vh; margin: 0; padding: var(--topbar-height) 0 0 var(--sidebar-width); }
.nav-tabs {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-width);
  padding: 22px 14px 16px;
  gap: 5px;
  border-right: 1px solid var(--line);
  color: #42574c;
  background: #fbfcfb;
  box-shadow: none;
}
.side-brand { gap: 10px; margin: 0 5px 25px; }
.side-brand-mark { width: 37px; height: 37px; border-radius: 10px; color: #fff; background: var(--blue); font-size: 13px; }
.side-brand strong { color: var(--ink); font-size: 16px; }
.side-brand small { color: var(--muted); font-size: 12px; }
.nav-group-label { margin: 8px 12px 6px; color: #76837b; font-size: 12px; font-weight: 500; letter-spacing: normal; }
.nav-secondary-label { margin-top: 20px; }
.nav-tabs .nav-btn { min-height: 44px; padding: 10px 12px; color: #4f6458; font-size: 14px; font-weight: 500; border-radius: 8px; }
.nav-tabs .nav-btn:hover { color: var(--blue-dark); background: #edf3ef; }
.nav-tabs .nav-btn.active { color: #145a44; background: #e4f0e9; font-weight: 650; }
.nav-tabs .nav-btn.ghost { color: #6f7d73; }
.nav-icon { flex-shrink: 0; width: 22px; color: currentColor; font-size: 17px; }
.nav-badge { color: #fff; background: var(--blue); font-size: 11px; }
.page { width: min(1640px, 100%); max-width: 100%; min-width: 0; margin: 0 auto; padding: 24px 28px 40px; }
.page > *, .panel > *, .ops-grid-two > *, .ops-form-layout > *, .edit-grid > * { min-width: 0; }
.panel, .ops-project-card, .ops-metric-card, .training-module-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.panel, .ops-section-card { padding: 22px; }
.panel-heading, .section-title { gap: 14px; flex-wrap: wrap; }
.panel-heading h2, .ops-section-card .panel-heading h2 { margin-bottom: 4px; font-size: 17px; line-height: 1.45; }
.panel-heading p, .ops-section-card .panel-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.panel-heading.compact { margin-bottom: 18px; }

/* Start with the next useful action, then the work waiting for this person. */
.ops-hero {
  display: block;
  min-height: 0;
  padding: 25px 28px;
  border: 1px solid #d8e5dd;
  border-radius: 12px;
  background: #edf5ef;
  color: var(--ink);
  box-shadow: none;
}
.ops-hero::before { display: none; }
.ops-kicker, .ops-hero .ops-kicker { color: #47745a; font-size: 12px; font-weight: 600; letter-spacing: normal; }
.ops-hero h2 { margin: 5px 0 7px; color: #223f2f; font-size: 27px; line-height: 1.4; letter-spacing: normal; }
.ops-hero p { max-width: 780px; color: #55725e; font-size: 14px; line-height: 1.65; }
.ops-hero-actions { gap: 10px; margin-top: 18px; }
.ops-hero .primary-btn { color: #fff; background: var(--blue); }
.ops-hero .secondary-btn { color: #2f5f43; border-color: #becfc2; background: #fff; }
.ops-live-card { display: none; }
.ops-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.ops-metric-card { min-height: 106px; gap: 2px; padding: 18px 20px; }
.ops-metric-card span { color: var(--muted); font-size: 14px; }
.ops-metric-card strong { margin: 2px 0; color: var(--ink); font-size: 28px; line-height: 1.3; letter-spacing: normal; font-variant-numeric: tabular-nums; }
.ops-metric-card small { color: var(--muted); font-size: 12px; }
.ops-grid-two { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ops-form-layout { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); }
.ops-form-layout:has(> .hidden) { grid-template-columns: minmax(0, 1fr); }
.ops-feed { gap: 0; }
.ops-feed-item { gap: 13px; padding: 16px 0; }
.ops-feed-item strong { font-size: 15px; }
.ops-feed-item small { font-size: 13px; line-height: 1.65; }
.ops-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ops-action-card { min-height: 102px; gap: 6px; padding: 16px; border-color: #e0e8e2; border-radius: 9px; background: #fafcfb; }
.ops-action-card:hover { transform: none; background: #eef5f0; border-color: #b8d1c1; }
.ops-action-card strong { font-size: 15px; line-height: 1.5; }
.ops-action-card small { color: var(--muted); font-size: 13px; line-height: 1.55; }
.ops-page-head { align-items: center; gap: 18px; margin: 0 0 18px; padding: 0; }
.ops-page-head h2 { margin: 4px 0 7px; font-size: 24px; line-height: 1.4; letter-spacing: normal; }
.ops-page-head p { max-width: 860px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.ops-chip { padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; }

/* Booking: one catalog, one full-width calendar, confirmation below it.
   Only these two height declarations override legacy !important rules. */
#bookingPage .filters { padding: 17px 20px; margin-bottom: 16px; }
#bookingPage .filters .panel-heading { display: none; }
#bookingPage .filter-grid { grid-template-columns: 170px minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; margin: 0; }
#bookingPage .booking-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: stretch;
  height: clamp(660px, calc(100dvh - 220px), 1080px);
  min-height: 0;
  gap: 16px;
}
#bookingPage .equipment-panel, #bookingPage .detail-panel { height: 100% !important; min-height: 0; max-height: none; }
#bookingPage .equipment-panel { display: flex; flex-direction: column; padding: 18px 12px 10px; overflow: hidden; }
#bookingPage .equipment-panel .panel-heading { flex: 0 0 auto; padding: 0 6px; margin-bottom: 14px; }
#bookingPage .equipment-panel .panel-heading h2 { font-size: 16px; }
#bookingPage .equipment-panel .panel-heading p { font-size: 13px; }
#bookingPage .equipment-cards {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 1px 3px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: none;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
#bookingPage .equipment-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  flex: 0 0 auto;
  gap: 11px;
  width: 100%;
  min-width: 0;
  min-height: 98px;
  height: auto;
  padding: 12px 10px;
  border: 1px solid #e2e9e4;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: none;
}
#bookingPage .equipment-card:hover { border-color: #abc9b6; background: #f7faf8; }
#bookingPage .equipment-card.active { border-color: #448363; background: #edf6ef; box-shadow: inset 3px 0 0 #33704f; }
#bookingPage .equipment-card .thumb { width: 54px; height: 60px; align-self: start; background-color: #f4f6f4; }
#bookingPage .equipment-card-body { gap: 6px; }
#bookingPage .equipment-card-title { display: block; max-height: none; overflow: visible; font-size: 14px; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; -webkit-line-clamp: unset; }
#bookingPage .equipment-card .card-meta { gap: 4px; }
#bookingPage .equipment-card .card-meta span { max-width: 100%; min-height: 20px; padding: 1px 5px; border-radius: 4px; color: #506653; background: #f0f3ef; font-size: 12px; white-space: normal; }
#bookingPage .equipment-card-location { min-height: 0; padding: 0; color: #68786c; background: transparent; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
#bookingPage .detail-panel { display: block; min-width: 0; padding: 20px; overflow: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
#bookingPage .detail-top { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: start; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
#bookingPage .equipment-sketch { width: 78px; height: 92px; flex: none; border: 1px solid #e6ece7; background-size: contain; background-repeat: no-repeat; background-color: #fafbf9; }
#bookingPage .detail-top h2 { margin: 7px 0 4px; font-size: 20px; line-height: 1.45; overflow-wrap: anywhere; }
#bookingPage #selectedDetail { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
#bookingPage .fact-row { gap: 5px; margin-top: 8px; }
#bookingPage .tag, #bookingPage .fact-row span { min-height: 22px; padding: 2px 6px; border-radius: 5px; color: #49634f; background: #eff5ee; font-size: 12px; }
#bookingPage .detail-open-btn { min-height: 36px; margin-top: 9px; padding: 6px 10px; font-size: 13px; }
#bookingPage .price-box { width: auto; min-width: 100px; padding: 0; background: transparent; text-align: right; }
#bookingPage .price-box span, #bookingPage .price-box small { font-size: 12px; }
#bookingPage .price-box strong { margin: 4px 0; color: #385b42; font-size: 22px; line-height: 1.3; white-space: nowrap; }
#bookingPage .reservation-grid { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; flex: none; gap: 20px; margin-top: 20px; padding: 0; overflow: visible; }
#bookingPage .schedule-panel { min-width: 0; padding: 0; overflow: visible; }
#bookingPage .section-title { align-items: start; gap: 8px; margin-bottom: 14px; }
#bookingPage .section-title h3 { margin: 0; font-size: 16px; line-height: 1.5; }
#bookingPage .legend { flex-wrap: wrap; gap: 7px 12px; overflow: visible; }
#bookingPage .legend span { display: inline-flex; align-items: center; gap: 5px; color: #667368; font-size: 12px; }
#bookingPage .legend i { width: 9px; height: 9px; border: 1px solid rgb(55 75 60 / 12%); border-radius: 2px; }
#bookingPage .calendar-controls, body.app-active #bookingPage .calendar-controls { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
#bookingPage .calendar-controls label, body.app-active #bookingPage .calendar-controls label { width: auto; max-width: 200px; min-width: 0; margin: 0; font-size: 12px; }
#bookingPage .calendar-controls .secondary-btn { min-height: 42px; padding: 8px 12px; font-size: 13px; }
#bookingPage .schedule-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 6px; min-width: 0; overflow: visible; }
#bookingPage .day { min-width: 0; min-height: 0; padding: 5px; border: 1px solid #e1e8e3; border-radius: 7px; background: #fff; }
#bookingPage .day h4 { margin: 0 0 6px; font-size: 12px; }
#bookingPage .day-select-btn { min-height: 44px; padding: 6px 1px; color: #3b5543; font-size: 12px; line-height: 1.4; }
#bookingPage .slot { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; min-height: 65px; padding: 7px 3px; margin-bottom: 6px; border: 1px solid #e3ebe5; border-radius: 5px; color: #637668; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
#bookingPage .slot:last-child { margin-bottom: 0; }
#bookingPage .slot strong { margin: 0; color: #3a5844; font-size: 11px; font-weight: 600; white-space: normal; line-height: 1.45; }
#bookingPage .slot.selected { color: #164d35; background: #d8eddf; border-color: #528a62; }
#bookingPage .slot.selected strong { color: #164d35; }
#bookingPage .slot.busy { color: #695c55; background: #eee8e5; border-color: #e1d6d0; }
#bookingPage .slot.busy strong { color: #695c55; }
#bookingPage .slot.pending { color: #72551c; background: #fff2d3; border-color: #e9d7ad; }
#bookingPage .slot.pending strong { color: #72551c; }
#bookingPage .slot.maintenance { color: #665783; background: #f0ebf7; border-color: #e2d8ef; }
#bookingPage .slot.maintenance strong { color: #665783; }
#bookingPage .slot.expired, #bookingPage .slot.expired strong { color: #89928b; background: #f5f6f4; border-color: #e9ece7; }
#bookingPage .slot.admin-reviewable-slot, #bookingPage .slot.admin-inspectable-slot { outline-width: 1px; }
#bookingPage .confirm-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; align-items: start; gap: 14px 18px; margin: 0; padding: 20px; border: 1px solid #dce7df; border-radius: 9px; background: #f9fbf8; scroll-margin-top: 24px; }
#bookingPage .confirm-panel h3 { grid-column: 1 / -1; grid-row: auto; font-size: 17px; }
#bookingPage .confirm-panel .summary { grid-column: 1; grid-row: auto; min-height: 0; padding: 12px; font-size: 14px; }
#bookingPage .confirm-panel .booking-account-hint { grid-column: 2; grid-row: 2; min-height: 0; gap: 3px; padding: 12px; border: 0; border-radius: 7px; background: #edf4ed; }
#bookingPage .booking-account-hint span, #bookingPage .booking-account-hint small { font-size: 12px; }
#bookingPage .booking-account-hint strong { font-size: 14px; }
#bookingPage .confirm-panel label { grid-column: 1 / -1; grid-row: auto; grid-template-rows: auto; font-size: 14px; }
#bookingPage .confirm-panel textarea { height: auto; min-height: 86px; }
#bookingPage .confirm-panel > button { grid-column: 2; grid-row: auto; width: auto; min-width: 0; justify-self: end; align-self: center; transform: none; }
#bookingPage #submitInlineMaintenanceBtn, #bookingPage #submitBookingBtn { transform: none; min-height: 44px; }
#bookingPage .confirm-panel #submitInlineMaintenanceBtn:not(.hidden) { grid-column: 1; justify-self: start; }
#mobileBookingBack, .mobile-booking-back { display: none; }
#bookingProgress, .booking-progress { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
#bookingProgress > *, .booking-progress > * { display: flex; align-items: center; gap: 7px; color: #77867c; font-size: 13px; }
#bookingProgress > * + *::before, .booking-progress > * + *::before { content: "›"; margin: 0 5px; color: #9ba79e; }
#bookingProgress .active, #bookingProgress [aria-current="step"], .booking-progress .active { color: var(--blue); font-weight: 600; }
#bookingProgress b, .booking-progress b { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e8efea; font-size: 12px; }
#bookingProgress .active b, .booking-progress .active b { color: #fff; background: var(--blue); }
#bookingSelectionBar { position: sticky; top: 0; bottom: auto; z-index: 12; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 15px; padding: 12px 14px; border: 1px solid #a9c5b2; border-radius: 8px; background: #edf6ef; box-shadow: 0 -3px 14px rgb(40 70 49 / 5%); }
#bookingSelectionBar strong { color: #215835; font-size: 14px; }
#bookingSelectionBar .selection-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; min-width: 0; }
#selectionCost { color: #506d57; font-size: 13px; }
#bookingSelectionBar small { display: block; color: var(--muted); font-size: 12px; }
#bookingSelectionBar button { flex: 0 0 auto; min-height: 44px; }

/* My bookings gives returning users a direct, legible place to resume work. */
#myBookingsList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#myBookingsList > article, .my-booking-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
#myBookingsList h3 { margin: 10px 0; color: var(--ink); font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
#myBookingsList p { margin: 7px 0; color: var(--muted); font-size: 14px; }
#myBookingsList small { color: var(--muted); font-size: 13px; }
#myBookingsList .button-row { margin-top: 16px; }
.my-booking-head, .my-booking-meta, .my-booking-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.my-booking-meta { justify-content: flex-start; margin: 8px 0; color: var(--muted); }
.my-booking-actions { justify-content: flex-start; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e8ede8; }
.my-booking-time { color: #365a41; font-weight: 600; font-variant-numeric: tabular-nums; }
.my-booking-times { display: grid; gap: 6px; margin: 13px 0; padding: 13px 15px; border-radius: 7px; background: #f4f8f2; color: #365a41; font-size: 14px; font-variant-numeric: tabular-nums; }
.my-booking-times > * { min-width: 0; overflow-wrap: anywhere; }
#myBookingsFilter { width: min(100%, 250px); min-height: 44px; }
.my-booking-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.my-booking-facts small, .my-booking-facts strong { display: block; }
.my-bookings-filters, .booking-status-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.my-bookings-filters button, .booking-status-filters button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fff; }
.my-bookings-filters button.active, .booking-status-filters button.active { color: var(--blue-dark); background: #e8f3eb; border-color: #b4d0bd; }

/* Services, accounts and training share the same information hierarchy. */
.project-segments { gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 9px; }
.project-segments button { min-height: 42px; padding: 9px 15px; font-size: 14px; font-weight: 500; }
.project-segments button.active { color: var(--blue-dark); background: #e6f1e9; }
.ops-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.ops-project-card { padding: 20px; }
.ops-project-card h3 { min-height: 0; margin: 15px 0 8px; font-size: 19px; line-height: 1.5; overflow-wrap: anywhere; }
.ops-project-top, .ops-project-foot { flex-wrap: wrap; gap: 8px; }
.ops-project-top span, .ops-project-top small, .ops-project-card p, .ops-project-foot span { font-size: 13px; line-height: 1.65; }
.ops-project-foot { margin-top: 16px; padding-top: 15px; }
.ops-project-foot strong { font-size: 23px; }
.ops-project-settlement span { color: #4a6653; padding: 4px 7px; border-radius: 5px; background: #edf3ee; font-size: 12px; }
.ops-project-actions { gap: 8px; margin-top: 14px; padding-top: 14px; }
.ops-project-actions button { min-height: 40px; padding: 8px 11px; font-size: 13px; }
.ops-account-summary { gap: 14px; margin-bottom: 2px; }
.ops-account-summary article { padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ops-account-summary article.total { color: var(--ink); border-color: #cbdece; background: #eaf3ed; }
.ops-account-summary span, .ops-account-summary small, .ops-account-summary .total span, .ops-account-summary .total small { color: #577060; font-size: 13px; }
.ops-account-summary strong { color: var(--ink); font-size: 26px; line-height: 1.35; }
.ops-org-account-list { max-width: 100%; overflow-x: auto; }
.ops-org-account-row { min-width: 520px; font-size: 13px; }
#organizationAccountSummary .ops-org-account-row > strong { font-size: 15px; line-height: 1.6; }
#organizationAccountSummary .ops-org-account-row.head > strong { font-size: 13px; font-weight: 500; }
.ops-ledger-row { gap: 16px; padding: 16px 0; font-size: 14px; }
.ops-ledger-row small { font-size: 13px; }
.ops-task-card { gap: 10px; padding: 16px; margin-bottom: 12px; border-radius: 9px; background: #fcfdfb; }
.ops-task-card > div { flex-wrap: wrap; }
.ops-task-card p, .ops-task-card small { font-size: 13px; line-height: 1.65; }
.ops-status { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; padding: 3px 8px; border-radius: 5px; font-size: 12px; line-height: 1.5; white-space: normal; }
.training-module-grid { gap: 16px; }
.training-module-card { padding: 20px; }
.training-module-card h3 { margin: 14px 0 8px; font-size: 18px; }
.training-module-card p, .training-module-meta, .training-module-top span, .training-module-top strong, .training-module-meta span { font-size: 13px; line-height: 1.65; }
.training-question { padding: 18px; border-radius: 9px; }
.training-question label { min-height: 44px; padding: 10px; font-size: 14px; }
.cooperation-card, .material-card { border-radius: 10px; }
.cooperation-card-head span, .cooperation-meta span, .cooperation-card dt, .cooperation-card dd, .material-card p, .material-card small, .material-card-side > span { font-size: 13px; line-height: 1.65; }
.cooperation-actions, .material-actions { flex-wrap: wrap; }
.cooperation-actions button, .material-actions button { min-height: 40px; font-size: 13px; }
.usage-chain-card { padding: 20px; border: 1px solid var(--line); border-radius: 10px; }
.usage-chain-head, .usage-chain-foot { gap: 10px; flex-wrap: wrap; }
.usage-chain-head h3 { font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.usage-chain-head span, .usage-chain-head small, .usage-chain-foot span, .usage-chain-flow span { font-size: 13px; }
.usage-chain-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; }
.usage-chain-flow > div { min-width: 0; padding: 12px; border-radius: 7px; }
.usage-chain-flow strong { font-size: 14px; overflow-wrap: anywhere; }
.usage-photo-pair { gap: 12px; }
.usage-photo-pair img { width: 100%; height: 160px; object-fit: contain; background: #f3f6f2; }
.usage-photo-pair span { color: #fff; font-size: 12px; }
.notice-item { padding: 17px; gap: 16px; border-radius: 9px; }
.notice-heading, .notice-title-row { gap: 9px; flex-wrap: wrap; }
.notice-title-row strong { font-size: 15px; }
.notice-heading time, .notice-item p { font-size: 13px; }
.notice-actions .primary-btn, .notice-actions .secondary-btn { min-height: 40px; font-size: 13px; }

/* Administration uses local table scrolling instead of stretching the page. */
.admin-tabs { flex-wrap: wrap; padding: 5px; gap: 4px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.admin-tab { min-height: 40px; padding: 8px 14px; color: #5b6c60; font-size: 14px; border-radius: 6px; }
.admin-tab.active { color: var(--blue-dark); background: #e8f2eb; }
.admin-section.active { min-width: 0; gap: 16px; }
.admin-card { min-width: 0; max-width: 100%; }
.table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid #e2e8e2; border-radius: 8px; }
.table-wrap.tall { max-height: 64vh; }
.table-wrap table { min-width: 680px; width: 100%; border-collapse: collapse; background: #fff; }
.table-wrap th { padding: 12px 14px; color: #5b6d5f; background: #f4f7f3; font-size: 13px; font-weight: 600; white-space: nowrap; }
.table-wrap td { padding: 13px 14px; color: #344a3b; font-size: 13px; line-height: 1.6; vertical-align: top; }
.table-wrap small { font-size: 12px; }
.table-actions { flex-wrap: wrap; gap: 6px; }
.table-actions .secondary-btn { min-height: 36px; padding: 7px 10px; font-size: 12px; }
.admin-filter-grid { gap: 12px; margin-bottom: 16px; }
.ops-kpi-card, .backup-status-item { border-radius: 8px; background: #f6f9f4; }
.ops-kpi-card span, .ops-kpi-card small { font-size: 13px; }
.platform-card-title { font-size: 18px; }
.platform-stat-grid { gap: 10px; }
.platform-stat-item span, .platform-stat-item small { font-size: 13px; }
.profile-panel { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr); gap: 24px; }
.info-line { padding: 13px; gap: 6px; background: #f6f8f4; }
.info-line span { font-size: 13px; }
.info-line strong { color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.invoice-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.invoice-form .primary-btn { min-width: 0; }

/* On-site use and dialogs: large controls, usable at zoom and with keyboards. */
.ops-operate-shell { margin: 0 auto; }
.ops-device-card { gap: 20px; padding: 28px; border-radius: 12px; }
.ops-device-head h2 { margin: 7px 0; color: var(--ink); font-size: 26px; line-height: 1.4; letter-spacing: normal; overflow-wrap: anywhere; }
.ops-device-head p { font-size: 14px; }
.ops-device-rule-grid > div { padding: 13px; border-radius: 8px; }
.ops-device-rule-grid span { font-size: 13px; }
.ops-camera-field { padding: 20px; border-radius: 10px; background: #edf5ee; }
.ops-camera-field input { padding: 8px; }
.ops-full-btn, #operateStartBtn, #operateEndBtn { min-height: 50px; font-size: 16px; }
.ops-running-banner { align-items: center; flex-wrap: wrap; border-radius: 8px; font-size: 14px; }
.ops-empty, .ops-loading, .empty-state { min-height: 130px; padding: 26px; border-radius: 9px; color: #6c7a70; font-size: 14px; line-height: 1.7; }
.modal { z-index: 100; align-items: center; padding: 24px; overflow-y: auto; background: rgb(19 36 26 / 45%); }
.modal-card { min-width: 0; max-width: min(1120px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 24px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgb(22 39 28 / 22%); }
.modal-card h2 { font-size: 22px; line-height: 1.5; }
.modal-card .confirm-actions { position: sticky; bottom: -24px; z-index: 5; margin: 20px -24px -24px; padding: 16px 24px; border-top: 1px solid var(--line); background: #fff; }
.modal-card .icon-button, .modal-card .close-btn { min-width: 44px; min-height: 44px; }
.detail-modal-card { padding: 0; }
.equipment-detail-hero { grid-template-columns: 144px minmax(0, 1fr) auto; gap: 20px; padding: 26px; }
.equipment-detail-photo.equipment-sketch { width: 144px; height: 150px; background-size: contain; background-color: #fff; }
.equipment-detail-hero .poster-copy h2 { font-size: 25px; overflow-wrap: anywhere; }
.equipment-detail-content { padding: 24px 26px; }
.equipment-detail-overview p, .equipment-detail-sections p { font-size: 14px; line-height: 1.8; }
.equipment-detail-facts dd { font-size: 15px; }
.equipment-detail-footer { padding: 18px 26px; }
.toast { z-index: 150; max-width: min(460px, calc(100vw - 32px)); padding: 13px 18px; font-size: 14px; line-height: 1.6; }

/* Preserve custom login imagery and all configured left/right/center modes. */
.auth-view { grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); gap: clamp(32px, 6vw, 100px); min-height: 100dvh; padding: 56px clamp(28px, 7vw, 120px) 86px; }
.auth-view[data-layout="reverse"] { grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); }
.auth-view[data-layout="reverse"] .auth-panel { order: -1; }
.auth-view[data-layout="center"] { grid-template-columns: minmax(0, 520px); justify-content: center; gap: 26px; text-align: center; }
.auth-copy { min-width: 0; }
.auth-copy h1 { margin-bottom: 18px; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.5; letter-spacing: normal; overflow-wrap: anywhere; }
.auth-copy p { font-size: 16px; line-height: 1.8; }
.auth-copy .eyebrow { font-size: 12px; }
.wechat-note { width: min(100%, 520px); margin-top: 28px; padding: 16px 18px; border-radius: 9px; }
.wechat-note span { font-size: 14px; line-height: 1.8; }
.auth-panel { width: 100%; min-width: 0; padding: 30px; border-radius: 14px; border-color: rgb(255 255 255 / 65%); box-shadow: 0 20px 60px rgb(0 22 11 / 17%); text-align: left; }
.auth-tabs { gap: 4px; padding: 4px; border-radius: 8px; background: #eef3ef; }
.auth-tabs button { min-height: 44px; color: #58715f; font-size: 15px; }
.auth-tabs button.active { color: #194f31; border-radius: 6px; box-shadow: 0 1px 4px rgb(32 52 38 / 8%); }
.auth-form { gap: 18px; margin-top: 26px; }
.auth-form input { min-height: 46px; }
.auth-form .primary-btn { min-height: 46px; }
.auth-form small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-filing-footer { left: clamp(28px, 7vw, 120px); bottom: 24px; font-size: 12px; }

@media (min-width: 761px) and (max-width: 1180px) {
  :root { --sidebar-width: 196px; }
  .topbar, body.app-active .topbar { padding-inline: 20px; }
  .page { padding: 20px 20px 36px; }
  #bookingPage .booking-layout { grid-template-columns: 242px minmax(0, 1fr); gap: 12px; }
  #bookingPage .equipment-panel { padding-inline: 9px; }
  #bookingPage .equipment-card { grid-template-columns: 42px minmax(0, 1fr); gap: 9px; padding-inline: 8px; }
  #bookingPage .equipment-card .thumb { width: 42px; height: 48px; }
  #bookingPage .detail-panel { padding: 15px; }
  #bookingPage .detail-top { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
  #bookingPage .equipment-sketch { width: 58px; height: 68px; }
  #bookingPage .price-box { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 7px 12px; text-align: left; }
  #bookingPage .price-box strong { font-size: 20px; }
  #bookingPage .detail-top h2 { font-size: 18px; }
  #bookingPage .schedule-grid { grid-template-columns: repeat(7, minmax(80px, 1fr)); overflow-x: auto; padding-bottom: 8px; overscroll-behavior-x: contain; }
  #bookingPage .confirm-panel { padding: 16px; }
  .ops-grid-two, .ops-form-layout { grid-template-columns: minmax(0, 1fr); }
  .ops-metric-grid { gap: 10px; }
  .ops-metric-card { padding: 16px; }
  .ops-metric-card strong { font-size: 24px; }
  .profile-panel { grid-template-columns: minmax(0, 1fr); }
  .auth-view { padding-inline: 38px; gap: 35px; grid-template-columns: minmax(0, 1fr) 380px; }
  .auth-view[data-layout="reverse"] { grid-template-columns: 380px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  :root { --topbar-height: 62px; --sidebar-width: 0px; }
  html { scroll-padding-top: 78px; }
  body.app-active { padding: 0; }
  .topbar, body.app-active .topbar { height: 62px; min-height: 62px; left: 0; gap: 12px; padding: 0 16px; flex-direction: row; align-items: center; }
  .page-context { flex: 1 1 auto; }
  .page-context h1 { font-size: 17px; }
  .account-card, body.app-active .account-card { flex: 0 1 44%; max-width: 44%; }
  .account-card strong, body.app-active .account-card strong { color: var(--ink); font-size: 13px; }
  .account-card small, body.app-active .account-card small { display: none; }
  .shell { padding: 62px 0 0; min-height: 100dvh; }
  .page { padding: 18px 14px calc(96px + env(safe-area-inset-bottom)); }
  body.app-active .nav-tabs { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: stretch; height: calc(66px + env(safe-area-inset-bottom)); padding: 5px 6px env(safe-area-inset-bottom); gap: 2px; border-top: 1px solid #dce6dc; background: #fff; box-shadow: 0 -3px 16px rgb(26 50 32 / 4%); }
  #bookingPage .filter-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #bookingPage .filter-grid label { gap: 4px; font-size: 12px; }
  #bookingPage .filter-grid label:has(#processKeyword) { display: none; }
  body.app-active .nav-tabs .nav-btn:not(.nav-secondary) { flex: 1 1 0; min-width: 0; width: auto; min-height: 56px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 5px 2px; color: #66756a; font-size: 12px; line-height: 1.4; border-radius: 7px; background: transparent; }
  body.app-active .nav-tabs .nav-btn.active { color: var(--blue); background: #edf5ef; }
  body.app-active .nav-tabs .nav-btn.role-hidden { display: none; }
  body.app-active .nav-tabs { margin: 0; }
  .nav-icon { min-height: 22px; font-size: 19px; }
  .mobile-more-menu:not(.hidden) { bottom: calc(75px + env(safe-area-inset-bottom)); padding: 16px; border-radius: 13px; }
  .mobile-more-menu > button:not(#closeMobileMoreBtn) { min-height: 48px; font-size: 14px; }
  .mobile-more-head button { width: 44px; height: 44px; }
  .panel, .ops-section-card { padding: 18px; border-radius: 11px; }
  .panel-heading h2, .ops-section-card .panel-heading h2 { font-size: 17px; }
  .panel-heading p, .ops-section-card .panel-heading p { font-size: 13px; }
  .panel-heading.compact { margin-bottom: 15px; }
  input, select, textarea { min-height: 46px; font-size: 16px; }
  .primary-btn, .secondary-btn, .text-btn { min-height: 46px; padding: 10px 14px; font-size: 14px; }
  .ops-hero { padding: 21px; border-radius: 11px; }
  .ops-hero h2 { font-size: 25px; line-height: 1.45; }
  .ops-hero p { font-size: 14px; }
  .ops-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
  .ops-hero-actions button { padding: 11px 7px; }
  .ops-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
  .ops-metric-card { min-height: 105px; padding: 16px; }
  .ops-metric-card span { font-size: 13px; }
  .ops-metric-card strong { font-size: 26px; }
  .ops-metric-card small { font-size: 12px; }
  .ops-grid-two, .ops-form-layout, .ops-project-grid, .edit-grid, .ops-inline-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ops-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .ops-action-card { min-height: 110px; padding: 14px; }
  .ops-action-card strong { font-size: 15px; }
  .ops-action-card small { font-size: 12px; }
  .ops-feed-item { padding: 15px 0; }
  .ops-page-head { flex-direction: column; align-items: flex-start; gap: 14px; margin: 0 0 18px; padding: 0; }
  .ops-page-head h2 { font-size: 23px; }
  .ops-page-head p { font-size: 14px; }
  .ops-page-head > button { width: 100%; }
  .ops-chip { font-size: 12px; }
  #bookingProgress, .booking-progress { gap: 5px; margin: 0 0 16px; }
  #bookingProgress > *, .booking-progress > * { gap: 5px; font-size: 12px; }
  #bookingProgress > * + *::before, .booking-progress > * + *::before { margin-inline: 2px; }
  #bookingPage .filters { padding: 16px; margin-bottom: 14px; }
  #bookingPage .filter-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
  #bookingPage .filter-grid label { font-size: 13px; }
  #bookingPage .filter-grid input, #bookingPage .filter-grid select { min-height: 46px; font-size: 16px; }
  #bookingPage .booking-layout { display: block; height: auto; min-height: 0; }
  #bookingPage .equipment-panel, #bookingPage .detail-panel { height: auto !important; }
  #bookingPage .equipment-panel { padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  #bookingPage .equipment-panel .panel-heading { padding: 0 2px; margin-bottom: 12px; }
  #bookingPage .equipment-cards { display: flex; flex-direction: column; flex: none; gap: 10px; padding: 0; overflow: visible; scroll-snap-type: none; }
  #bookingPage .equipment-card { flex: none; grid-template-columns: 66px minmax(0, 1fr); width: 100%; min-width: 0; min-height: 106px; gap: 13px; padding: 16px; border-radius: 10px; scroll-snap-align: none; }
  #bookingPage .equipment-card .thumb { width: 66px; height: 70px; }
  #bookingPage .equipment-card-title { font-size: 16px; line-height: 1.5; }
  #bookingPage .equipment-card .card-meta span, #bookingPage .equipment-card-location { font-size: 12px; }
  #bookingPage .mobile-equipment-picker { display: none; }
  #bookingPage[data-stage="catalog"] .detail-panel { display: none; }
  #bookingPage[data-stage="schedule"] .filters, #bookingPage[data-stage="schedule"] .equipment-panel { display: none; }
  #bookingPage[data-stage="schedule"] #mobileBookingBack, #bookingPage[data-stage="schedule"] .mobile-booking-back { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 10px; padding: 8px 0; color: var(--blue); border: 0; background: transparent; font-size: 14px; }
  #bookingPage .detail-panel { display: block; margin-top: 0; padding: 17px; overflow: visible; }
  #bookingPage .detail-top { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
  #bookingPage .equipment-sketch { width: 58px; height: 70px; }
  #bookingPage .detail-top h2 { font-size: 19px; margin: 6px 0; }
  #bookingPage #selectedDetail { display: none; }
  #bookingPage .tag, #bookingPage .fact-row span { font-size: 12px; }
  #bookingPage .detail-open-btn { width: auto; min-height: 44px; margin-top: 8px; padding: 8px 11px; font-size: 13px; }
  #bookingPage .price-box { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; grid-column: 1 / -1; width: 100%; min-width: 0; gap: 5px 10px; padding: 12px 0 0; border-top: 1px solid #e5ece5; background: transparent; text-align: left; }
  #bookingPage .price-box span, #bookingPage .price-box small { font-size: 12px; }
  #bookingPage .price-box strong { font-size: 23px; }
  #bookingPage .reservation-grid { gap: 18px; margin-top: 17px; overflow: visible; }
  #bookingPage .schedule-panel { padding: 0; overflow: visible; }
  #bookingPage .section-title { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; }
  #bookingPage .section-title h3 { font-size: 17px; }
  #bookingPage .legend { flex-wrap: wrap; gap: 7px 11px; overflow: visible; }
  #bookingPage .legend span { font-size: 12px; }
  #bookingPage .calendar-controls, body.app-active #bookingPage .calendar-controls { display: grid; grid-template-columns: 68px minmax(0, 1fr) 68px; gap: 8px; align-items: end; }
  #bookingPage .calendar-controls label, body.app-active #bookingPage .calendar-controls label { grid-column: 2; grid-row: 1; width: 100%; max-width: none; text-align: left; font-size: 12px; }
  #bookingPage .calendar-controls label input { width: 100%; padding: 8px; font-size: 14px; }
  #bookingPage #prevWeekBtn { grid-column: 1; grid-row: 1; }
  #bookingPage #nextWeekBtn { grid-column: 3; grid-row: 1; }
  #bookingPage .calendar-controls .secondary-btn { width: 100%; min-height: 46px; padding: 8px 3px; font-size: 13px; }
  #bookingPage .schedule-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; overflow: visible; padding: 0; }
  #bookingPage .day { padding: 0; border: 0; background: transparent; }
  #bookingPage .day h4 { margin-bottom: 10px; }
  #bookingPage .day-select-btn { min-height: 44px; padding: 8px; font-size: 14px; background: #f1f6f0; }
  #bookingPage .day .slot { display: flex; flex-direction: row; justify-content: space-between; align-items: center; min-height: 54px; margin-bottom: 8px; padding: 12px; border-radius: 7px; gap: 14px; font-size: 13px; text-align: left; }
  #bookingPage .slot strong { flex: 0 1 56%; font-size: 14px; line-height: 1.5; }
  #bookingPage .confirm-panel { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 14px; scroll-margin-top: 84px; }
  #bookingPage .confirm-panel h3, #bookingPage .confirm-panel .summary, #bookingPage .confirm-panel .booking-account-hint, #bookingPage .confirm-panel label, #bookingPage .confirm-panel > button { grid-column: 1; grid-row: auto; }
  #bookingPage .confirm-panel .booking-account-hint { min-height: 0; }
  #bookingPage .confirm-panel > button, #bookingPage .confirm-panel #submitInlineMaintenanceBtn:not(.hidden) { grid-column: 1; justify-self: stretch; width: 100%; min-height: 48px; }
  #bookingPage .confirm-panel textarea { min-height: 96px; }
  #bookingSelectionBar { position: fixed; top: auto; left: 14px; right: 14px; bottom: calc(66px + env(safe-area-inset-bottom)); padding: 12px; gap: 10px; }
  #bookingPage:has(#bookingSelectionBar:not(.hidden)) { padding-bottom: calc(210px + env(safe-area-inset-bottom)); }
  #bookingSelectionBar button { flex: 1 0 auto; }
  #myBookingsList { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #myBookingsList > article, .my-booking-card { padding: 18px; }
  #myBookingsList h3 { font-size: 18px; }
  #myBookingsList .button-row button, .my-booking-actions button { flex: 1 1 auto; min-height: 46px; }
  .my-bookings-filters, .booking-status-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; gap: 7px; }
  .my-bookings-filters button, .booking-status-filters button { flex: 0 0 auto; white-space: nowrap; }
  .project-segments { position: static; width: 100%; gap: 3px; margin-bottom: 16px; padding: 4px; overflow-x: auto; }
  .project-segments button { min-height: 44px; padding: 9px 12px; font-size: 13px; }
  .ops-project-card { padding: 18px; }
  .ops-project-card h3 { font-size: 19px; }
  .ops-project-actions button { min-height: 44px; }
  .ops-account-summary { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ops-account-summary article { padding: 17px 18px; }
  .ops-account-summary strong { font-size: 25px; }
  .ops-ledger-row { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding-block: 16px; }
  .ops-ledger-row > div { grid-column: 1 / -1; }
  .cooperation-card dl { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .cooperation-actions button, .material-actions button { min-height: 44px; }
  .training-module-grid { grid-template-columns: minmax(0, 1fr); }
  .training-module-card { padding: 18px; }
  .usage-chain-card { padding: 17px; }
  .usage-chain-flow { grid-template-columns: minmax(0, 1fr); }
  .usage-chain-flow > i { display: none; }
  .usage-photo-pair img { height: 130px; }
  .notice-item { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .notice-actions { justify-content: flex-start; flex-wrap: wrap; }
  .notice-actions .primary-btn, .notice-actions .secondary-btn { min-height: 44px; }
  #adminPage .mobile-admin-picker { position: static; margin-bottom: 12px; padding: 13px; font-size: 13px; border-radius: 9px; box-shadow: none; }
  #adminPage .mobile-admin-note { margin-bottom: 14px; border-radius: 8px; font-size: 13px; background: #f1f5ef; }
  #adminPage .admin-card { padding: 16px; overflow: visible; }
  #adminPage .table-wrap { overflow-x: auto; }
  #adminPage .admin-section[data-admin-section="bookings"] .table-wrap { overflow: visible; border: 0; }
  #adminPage .admin-section[data-admin-section="bookings"] table { min-width: 0; }
  #adminPage .table-actions button { min-height: 44px; padding: 10px; font-size: 13px; }
  #profilePage .profile-panel { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  #profilePage .table-wrap { border: 0; }
  #profilePage .invoice-panel { padding: 15px; }
  #profilePage .invoice-form { grid-template-columns: minmax(0, 1fr); }
  .ops-device-card { padding: 20px; gap: 18px; }
  .ops-device-head h2 { font-size: 24px; }
  .ops-device-rule-grid { grid-template-columns: minmax(0, 1fr); }
  .ops-camera-field { padding: 17px; }
  .ops-camera-field input { max-width: 100%; font-size: 13px; }
  .modal { padding: 12px; align-items: center; }
  .modal-card { width: 100%; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 20px; border-radius: 13px; }
  .modal-card h2 { font-size: 21px; }
  .modal-card .confirm-actions { bottom: -20px; margin-inline: -20px; margin-bottom: -20px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }
  .modal-card .confirm-actions button { flex: 1 1 auto; min-height: 46px; }
  .detail-modal-card { padding: 0; }
  .equipment-detail-hero { grid-template-columns: 74px minmax(0, 1fr) 40px; gap: 12px; padding: 19px; }
  .equipment-detail-photo.equipment-sketch { width: 74px; height: 86px; }
  .equipment-detail-hero .poster-copy h2 { font-size: 20px; line-height: 1.5; }
  .equipment-detail-hero .icon-button { min-width: 36px; }
  .equipment-detail-content { padding: 20px; }
  .equipment-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipment-detail-sections { grid-template-columns: minmax(0, 1fr); }
  .equipment-detail-footer { padding: 16px 20px; }
  .toast { left: 16px; right: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); transform: none; }
  .auth-view, .auth-view[data-layout="reverse"], .auth-view[data-layout="center"] { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 26px; min-height: 100dvh; padding: 34px 20px 80px; text-align: left; }
  .auth-view[data-layout="reverse"] .auth-panel { order: 0; }
  .auth-copy h1 { margin-bottom: 10px; font-size: 27px; line-height: 1.5; }
  .auth-copy p { font-size: 14px; line-height: 1.7; }
  .auth-copy .eyebrow { font-size: 11px; }
  .wechat-note { width: 100%; margin-top: 18px; padding: 13px 15px; }
  .wechat-note span { font-size: 13px; }
  .auth-panel { width: 100%; max-width: 520px; align-self: center; padding: 23px; }
  .auth-form { gap: 17px; margin-top: 24px; }
  .auth-form input { min-height: 48px; font-size: 16px; }
  .auth-filing-footer { left: 20px; right: 20px; bottom: 20px; max-width: none; font-size: 11px; }
}

@media (max-width: 360px) {
  .page { padding-inline: 10px; }
  .ops-hero, .panel, .ops-section-card { padding: 16px; }
  .ops-hero h2 { font-size: 23px; }
  #bookingPage .detail-panel { padding: 13px; }
  #bookingPage .calendar-controls, body.app-active #bookingPage .calendar-controls { grid-template-columns: 61px minmax(0, 1fr) 61px; gap: 5px; }
  .my-booking-facts { grid-template-columns: minmax(0, 1fr); }
  .ops-action-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ops-action-card, .equipment-card { transition: none; }
}

@media print {
  .topbar, .nav-tabs { display: none; }
  .shell { padding: 0; }
  .page { width: 100%; padding: 0; }
}