:root {
  --bg-top: #08324a;
  --bg-mid: #0f536d;
  --bg-bottom: #f4efe3;
  --panel: rgba(250, 246, 238, 0.95);
  --panel-strong: rgba(255, 252, 246, 0.985);
  --panel-edge: rgba(255, 255, 255, 0.56);
  --ink: #0d2438;
  --ink-soft: #3f5566;
  --sea: #0e7aa5;
  --sea-deep: #09425e;
  --sun: #efb15a;
  --coral: #ef7c62;
  --mint: #4cb7a5;
  --line: rgba(13, 36, 56, 0.16);
  --surface-muted: rgba(10, 43, 62, 0.045);
  --heading-font: "Cormorant Garamond", "Times New Roman", serif;
  --body-font: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
}
body:not(.auth-locked) {
  --heading-font: var(--body-font);
  background:
    linear-gradient(180deg, #06283a 0%, #0b445a 34%, #d7dfdc 64%, #396f78 100%);
}
body:not(.auth-locked)::before {
  z-index: 0;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 251, 240, 0.28) 56%, rgba(8, 38, 52, 0.28) 100%),
    linear-gradient(90deg, rgba(4, 26, 39, 0.74) 0%, rgba(16, 82, 104, 0.22) 34%, rgba(255, 247, 230, 0.3) 76%, rgba(6, 39, 55, 0.68) 100%);
  background-size: cover;
  filter: blur(10px) saturate(1.04);
  mask-image: none;
  transform: scale(1.035);
}
body:not(.auth-locked)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 18%),
    linear-gradient(180deg, transparent 52%, rgba(255, 252, 244, 0.16) 58%, rgba(5, 27, 39, 0.18) 100%);
}
body:not(.auth-locked) .app-shell {
  position: relative;
  z-index: 1;
}
body:not(.auth-locked) .app-shell {
  width: min(1456px, calc(100vw - 88px));
  padding: clamp(28px, 3.4vh, 44px) 0;
}
body:not(.auth-locked) .workspace-shell {
  min-height: 0;
  gap: 18px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.84), rgba(245, 248, 249, 0.68));
  box-shadow:
    0 28px 76px rgba(3, 24, 36, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(28px) saturate(1.08);
}
body:not(.auth-locked) .panel {
  border-color: rgba(12, 36, 52, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 248, 244, 0.66));
  box-shadow:
    0 18px 44px rgba(10, 31, 45, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px) saturate(1.04);
}
body:not(.auth-locked) .panel::after {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 42%);
}
body:not(.auth-locked) .workspace-nav {
  position: sticky;
  top: 0;
  z-index: 18;
  gap: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
body:not(.auth-locked) .workspace-nav::after {
  display: none;
}
body:not(.auth-locked) .workspace-nav-topline {
  gap: 18px;
}
body:not(.auth-locked) .workspace-brand {
  gap: 12px;
}
body:not(.auth-locked) .workspace-brand-logo-shell,
body:not(.auth-locked) .account-avatar {
  box-shadow:
    0 10px 24px rgba(6, 35, 52, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}
body:not(.auth-locked) .workspace-brand-lockup .brand-name,
body:not(.auth-locked) .brand-name {
  font-weight: 650;
  letter-spacing: -0.01em;
}
body:not(.auth-locked) .workspace-brand-lockup .brand-subtitle,
body:not(.auth-locked) .brand-subtitle {
  color: rgba(43, 58, 68, 0.64);
  letter-spacing: 0.18em;
}
body:not(.auth-locked) .workspace-account-trigger,
body:not(.auth-locked) .workspace-account-summary {
  border-color: rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 10px 28px rgba(10, 31, 45, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
body:not(.auth-locked) .workspace-tab-row {
  --workspace-tab-height: 44px;
  --workspace-tab-icon-size: 26px;
  gap: 12px;
  padding: 0 2px 2px;
}
body:not(.auth-locked) .workspace-tab {
  height: var(--workspace-tab-height);
  min-height: var(--workspace-tab-height);
  padding: 0 17px 0 12px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.62);
  color: rgba(17, 31, 42, 0.9);
  box-shadow:
    0 8px 20px rgba(10, 31, 45, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
body:not(.auth-locked) .workspace-tab-icon {
  background: rgba(13, 36, 56, 0.045);
  color: currentColor;
}
body:not(.auth-locked) .workspace-tab:hover {
  border-color: rgba(13, 36, 56, 0.14);
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 10px 24px rgba(10, 31, 45, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
body:not(.auth-locked) .workspace-tab.active {
  border-color: rgba(10, 18, 26, 0.78);
  background: linear-gradient(180deg, #1c2933, #101820);
  color: #fff;
  box-shadow:
    0 12px 24px rgba(10, 20, 30, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
body:not(.auth-locked) .workspace-tab.active .workspace-tab-icon {
  background: rgba(255, 255, 255, 0.12);
}
body:not(.auth-locked) .workspace-tab.locked {
  color: rgba(225, 247, 250, 0.76);
  border-color: rgba(72, 220, 224, 0.22);
  background:
    linear-gradient(135deg, rgba(11, 48, 63, 0.54), rgba(3, 17, 29, 0.48)),
    rgba(4, 20, 33, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.12);
}
body:not(.auth-locked) .workspace-scroll-area {
  gap: 0;
  padding: 0;
  scrollbar-color: rgba(21, 43, 58, 0.42) rgba(255, 255, 255, 0.16);
}
body:not(.auth-locked) .workspace-scroll-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.16);
}
body:not(.auth-locked) .workspace-scroll-area::-webkit-scrollbar-thumb {
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, rgba(21, 43, 58, 0.7), rgba(21, 43, 58, 0.42));
}
body:not(.auth-locked) .workspace {
  padding: 0;
}
body:not(.auth-locked) .content-area,
body:not(.auth-locked) .view-stack {
  min-height: 0;
}
body:not(.auth-locked) .section-block,
body:not(.auth-locked) .weekly-report-section,
body:not(.auth-locked) .vendors-section,
body:not(.auth-locked) .inventory-section,
body:not(.auth-locked) .expenses-section,
body:not(.auth-locked) .maintenance-section,
body:not(.auth-locked) .vessel-section {
  padding: clamp(22px, 2.1vw, 28px);
  border-radius: 24px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(250, 249, 244, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    0 20px 48px rgba(10, 31, 45, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
body:not(.auth-locked) .section-heading,
body:not(.auth-locked) .app-screen-header {
  margin-bottom: 18px;
}
body:not(.auth-locked) .section-heading h2,
body:not(.auth-locked) .app-screen-header-main h2 {
  color: #1b2a34;
  font-family: var(--body-font);
  font-weight: 850;
  letter-spacing: 0;
}
body:not(.auth-locked) .eyebrow,
body:not(.auth-locked) .section-heading .eyebrow,
body:not(.auth-locked) .app-screen-search span,
body:not(.auth-locked) .metric-label,
body:not(.auth-locked) .detail-label {
  color: rgba(36, 56, 70, 0.64);
  letter-spacing: 0.2em;
}
body:not(.auth-locked) .app-screen-copy,
body:not(.auth-locked) .app-screen-note,
body:not(.auth-locked) .small-copy,
body:not(.auth-locked) .card-meta {
  color: rgba(49, 73, 90, 0.82);
}
body:not(.auth-locked) .overview-card,
body:not(.auth-locked) .app-screen-summary-card,
body:not(.auth-locked) .report-overview-card,
body:not(.auth-locked) .report-list-shell,
body:not(.auth-locked) .vessel-selector-shell,
body:not(.auth-locked) .vessel-profile-hero,
body:not(.auth-locked) .vessel-mobile-command-card,
body:not(.auth-locked) .maintenance-surface,
body:not(.auth-locked) .maintenance-summary-card,
body:not(.auth-locked) .maintenance-asset-card,
body:not(.auth-locked) .maintenance-history-entry,
body:not(.auth-locked) .work-order-group-toggle,
body:not(.auth-locked) .work-order-accordion-item,
body:not(.auth-locked) .work-order-suggestion-list,
body:not(.auth-locked) .crew-directory-item,
body:not(.auth-locked) .vendor-directory-item,
body:not(.auth-locked) .inventory-directory-item,
body:not(.auth-locked) .expense-metric-card,
body:not(.auth-locked) .expense-visual-card,
body:not(.auth-locked) .expense-log-shell,
body:not(.auth-locked) .expense-log-card,
body:not(.auth-locked) .compact-disclosure-card,
body:not(.auth-locked) .detail-item {
  border: 1px solid rgba(13, 36, 56, 0.075);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(250, 251, 249, 0.58));
  box-shadow:
    0 12px 30px rgba(10, 31, 45, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
body:not(.auth-locked) .overview-card,
body:not(.auth-locked) .report-overview-card,
body:not(.auth-locked) .report-list-shell,
body:not(.auth-locked) .maintenance-surface,
body:not(.auth-locked) .expense-log-shell {
  border-radius: 20px;
}
body:not(.auth-locked) .overview-card-feature {
  background:
    linear-gradient(135deg, rgba(238, 248, 252, 0.7), rgba(255, 255, 255, 0.62));
}
body:not(.auth-locked) .overview-stat,
body:not(.auth-locked) .overview-list-item,
body:not(.auth-locked) .weekly-log-row,
body:not(.auth-locked) .work-order-detail-block,
body:not(.auth-locked) .inventory-directory-metric,
body:not(.auth-locked) .vendor-detail-metric,
body:not(.auth-locked) .expense-log-card {
  border: 1px solid rgba(13, 36, 56, 0.055);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}
body:not(.auth-locked) .overview-list-item {
  position: relative;
  padding-right: 42px;
}
body:not(.auth-locked) .overview-list-item::after {
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(49, 73, 90, 0.52);
  font-size: 1.42rem;
  line-height: 1;
}
body:not(.auth-locked) .overview-stat {
  gap: 12px;
}
body:not(.auth-locked) .overview-stat::before {
  content: "";
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(235, 245, 249, 0.95), rgba(221, 235, 241, 0.85));
  border: 1px solid rgba(13, 36, 56, 0.065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
body:not(.auth-locked) .primary-button {
  color: #fff;
  background: linear-gradient(180deg, #1d2b35, #0f1820);
  box-shadow:
    0 14px 30px rgba(10, 20, 30, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
body:not(.auth-locked) .primary-button:hover {
  background: linear-gradient(180deg, #243744, #111c25);
}
body:not(.auth-locked) .ghost-button,
body:not(.auth-locked) .text-button,
body:not(.auth-locked) .report-action-button,
body:not(.auth-locked) .action-overflow-trigger,
body:not(.auth-locked) select,
body:not(.auth-locked) input,
body:not(.auth-locked) textarea {
  border-color: rgba(13, 36, 56, 0.09);
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    0 8px 18px rgba(10, 31, 45, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
body:not(.auth-locked) .ghost-button:hover,
body:not(.auth-locked) .text-button:hover,
body:not(.auth-locked) .report-action-button:hover,
body:not(.auth-locked) .action-overflow-trigger:hover {
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 12px 26px rgba(10, 31, 45, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
body:not(.auth-locked) .filter-chip.active,
body:not(.auth-locked) .maintenance-subtab.active {
  border-color: rgba(10, 18, 26, 0.72);
  background: linear-gradient(180deg, #1c2933, #101820);
  color: #fff;
}
body:not(.auth-locked) .status-badge,
body:not(.auth-locked) .priority-badge,
body:not(.auth-locked) .category-chip,
body:not(.auth-locked) .inventory-category-chip,
body:not(.auth-locked) .crew-status-chip {
  border-color: rgba(13, 36, 56, 0.075);
  background: rgba(255, 255, 255, 0.6);
  color: rgba(33, 55, 70, 0.78);
}
body:not(.auth-locked) .status-ready,
body:not(.auth-locked) .status-completed,
body:not(.auth-locked) .status-paid,
body:not(.auth-locked) .status-scheduled {
  background: rgba(227, 243, 239, 0.78);
  color: #25685d;
}
body:not(.auth-locked) .status-overdue,
body:not(.auth-locked) .crew-status-chip.is-attention,
body:not(.auth-locked) .text-button.danger {
  background: rgba(250, 231, 224, 0.82);
  color: #9b4a38;
}
body:not(.auth-locked) .expenses-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(250, 249, 244, 0.6));
}
body:not(.auth-locked) .expenses-section,
body:not(.auth-locked) .expenses-section h2,
body:not(.auth-locked) .expenses-section h3,
body:not(.auth-locked) .expenses-section .expense-summary-value,
body:not(.auth-locked) .expenses-section .expense-log-title {
  color: var(--ink);
}
body:not(.auth-locked) .expenses-section .eyebrow,
body:not(.auth-locked) .expenses-section .small-copy,
body:not(.auth-locked) .expenses-section .card-meta {
  color: rgba(49, 73, 90, 0.82);
}
@media (min-width: 761px) {
  body:not(.auth-locked) .workspace-scroll-area {
    padding-bottom: 0;
  }
  body:not(.auth-locked) .view-stack {
    display: grid;
    min-height: 0;
  }
  body:not(.auth-locked) .view-panel.active {
    min-height: 0;
  }
  body:not(.auth-locked)[data-active-view="overview"] #overview-panel {
    padding: clamp(22px, 2.1vw, 28px);
  }
  body:not(.auth-locked)[data-active-view="overview"] .overview-grid {
    gap: 18px;
  }
  body:not(.auth-locked)[data-active-view="overview"] .overview-card {
    padding: 18px 20px;
  }
  body:not(.auth-locked)[data-active-view="overview"] .overview-card-feature {
    min-height: 176px;
  }
}
@media (max-width: 1020px) {
  body:not(.auth-locked) .app-shell {
    width: min(100vw - 28px, 960px);
    padding: 14px 0 18px;
  }
  body:not(.auth-locked) .workspace-shell {
    padding: 18px;
    border-radius: 26px;
  }
  body:not(.auth-locked) .workspace-nav {
    gap: 16px;
  }
  body:not(.auth-locked) .workspace-tab-row {
    gap: 9px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  body:not(.auth-locked) .workspace-tab {
    scroll-snap-align: start;
  }
}
@media (max-width: 760px) {
  body:not(.auth-locked) .app-shell {
    width: 100vw;
    padding: 0;
  }
  body:not(.auth-locked) .workspace-shell {
    height: 100dvh;
    border-radius: 0;
    border-inline: 0;
    padding: 14px;
  }
  body:not(.auth-locked) .workspace-nav {
    padding: 0;
  }
  body:not(.auth-locked) .workspace-tab-row {
    --workspace-tab-height: 42px;
    --workspace-tab-icon-size: 25px;
    gap: 8px;
    padding-bottom: 4px;
  }
  body:not(.auth-locked) .workspace-tab {
    padding: 0 13px 0 9px;
    border-radius: 10px;
  }
  body:not(.auth-locked) .section-block,
  body:not(.auth-locked) .weekly-report-section,
  body:not(.auth-locked) .vendors-section,
  body:not(.auth-locked) .inventory-section,
  body:not(.auth-locked) .expenses-section,
  body:not(.auth-locked) .maintenance-section,
  body:not(.auth-locked) .vessel-section {
    padding: 16px;
    border-radius: 22px;
  }
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body-font);
  font-weight: 500;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 24%),
    radial-gradient(circle at 78% 18%, rgba(239, 177, 90, 0.18), transparent 22%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 36%, var(--bg-bottom) 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
body:not(.auth-locked) {
  overflow: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.52), transparent 72%);
}
.app-shell {
  width: min(1480px, calc(100vw - 32px));
  margin: 0 auto;
  height: 100dvh;
  padding: 20px 0 24px;
  display: grid;
  overflow-x: clip;
}
.auth-locked .app-shell {
  display: none;
}
.auth-shell[hidden] {
  display: none;
}
.boot-splash[hidden] {
  display: none;
}
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 40px);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.38) 34%, transparent 62%),
    linear-gradient(180deg, rgba(238, 249, 252, 0.96), rgba(246, 251, 252, 0.98));
  backdrop-filter: blur(14px);
}
.boot-splash-card {
  width: min(430px, 100%);
  padding: clamp(18px, 3vw, 28px);
  text-align: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.boot-splash-brand {
  justify-content: center;
  margin-bottom: 18px;
  gap: 10px;
}
.boot-splash-logo-shell {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}
.boot-splash-lockup {
  text-align: left;
}
.boot-splash-vessel {
  position: relative;
  width: min(360px, 82vw);
  margin: 6px auto 18px;
}
.boot-splash-vessel-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.boot-cloud {
  fill: rgba(156, 197, 212, 0.16);
}
.boot-bird,
.boot-wave,
.boot-wave-shadow,
.boot-reflection,
.boot-yacht-hull,
.boot-yacht-cabin,
.boot-yacht-window,
.boot-yacht-mast,
.boot-yacht-rail {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boot-bird {
  stroke: rgba(31, 141, 154, 0.34);
  stroke-width: 1.2;
}
.boot-wave-shadow {
  stroke: rgba(18, 94, 122, 0.12);
  stroke-width: 5;
}
.boot-wave {
  stroke: #17aeba;
  stroke-width: 2;
  stroke-dasharray: 18 12;
  animation: bootWaveDrift 2.8s linear infinite;
}
.boot-reflection {
  stroke: rgba(23, 174, 186, 0.22);
  stroke-width: 2;
}
.boot-yacht-hull {
  fill: rgba(10, 38, 60, 0.92);
  stroke: rgba(16, 76, 102, 0.72);
  stroke-width: 1.5;
}
.boot-yacht-cabin,
.boot-yacht-window,
.boot-yacht-mast,
.boot-yacht-rail {
  stroke: rgba(10, 38, 60, 0.9);
  stroke-width: 2;
}
.boot-yacht-window {
  stroke: rgba(88, 223, 226, 0.78);
  stroke-width: 1.6;
}
.boot-splash-error-mark {
  position: absolute;
  top: 22%;
  right: 28%;
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #d56254;
  background: rgba(255, 239, 236, 0.96);
  border: 1px solid rgba(213, 98, 84, 0.18);
  box-shadow: 0 12px 28px rgba(213, 98, 84, 0.16);
  font-weight: 900;
}
.boot-splash[data-sync-state="error"] .boot-splash-error-mark {
  display: inline-flex;
}
.boot-splash-title {
  margin: 0;
  font-family: var(--body-font);
  font-size: clamp(1rem, 2.2vw, 1.24rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.boot-splash-copy {
  margin: 8px auto 0;
  max-width: 320px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}
.boot-splash-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.boot-splash-pulse span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(23, 174, 186, 0.26);
  animation: bootPulse 1.2s ease-in-out infinite;
}
.boot-splash-pulse span:first-child {
  background: #15aebb;
}
.boot-splash-pulse span:nth-child(2) {
  animation-delay: 0.18s;
}
.boot-splash-pulse span:nth-child(3) {
  animation-delay: 0.36s;
}
.boot-splash[data-sync-state="error"] .boot-splash-pulse {
  display: none;
}
.boot-splash-retry {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 0 20px;
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #22c6c8, #078ea0);
  box-shadow: 0 16px 34px rgba(7, 142, 160, 0.22);
  font-weight: 900;
}
.boot-splash-retry[hidden] {
  display: none;
}
.boot-splash-retry svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 760px) {
  .boot-splash {
    padding: max(16px, var(--safe-area-top, 0px)) max(16px, var(--safe-area-right, 0px)) max(16px, var(--safe-area-bottom, 0px)) max(16px, var(--safe-area-left, 0px));
  }
  .boot-splash-card {
    width: min(320px, 100%);
    padding: 16px;
  }
  .boot-splash-brand {
    margin-bottom: 14px;
  }
  .boot-splash-logo-shell {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
  .boot-splash-lockup {
    display: none;
  }
  .boot-splash-vessel {
    width: min(260px, 78vw);
    margin-bottom: 16px;
  }
  .boot-splash-title {
    font-size: 1rem;
  }
  .boot-splash-copy {
    max-width: 240px;
    font-size: 0.78rem;
  }
}
.booting {
  overflow: hidden;
}
.booting .auth-shell {
  display: none;
}
.auth-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(42px, 7vh, 74px) 28px 40px;
  background:
    radial-gradient(circle at 50% -18%, rgba(74, 151, 177, 0.24), transparent 42%),
    linear-gradient(180deg, rgba(2, 18, 31, 0.22), rgba(6, 51, 73, 0) 42%),
    linear-gradient(180deg, #031c2e 0%, #07364e 34%, #0c566f 52%, #f1eadf 100%);
}
.auth-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.1), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(2, 18, 31, 0), rgba(2, 18, 31, 0.18) 78%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 34%),
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  opacity: 0.68;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 78%);
}
.onboarding-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(16px, 3vh, 32px) clamp(16px, 4vw, 40px);
  background: #03101b;
}
.onboarding-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(90deg, rgba(2, 8, 14, 0.72) 0%, rgba(3, 23, 34, 0.62) 48%, rgba(0, 65, 72, 0.42) 100%),
    radial-gradient(circle at 50% 15%, rgba(41, 237, 231, 0.14), transparent 34%),
    url("/public/assets/landing-yacht-dusk-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.onboarding-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1, 9, 16, 0.18), rgba(1, 9, 16, 0.58)),
    radial-gradient(circle at 50% 100%, rgba(0, 221, 214, 0.14), transparent 34%);
  pointer-events: none;
}
body.onboarding-locked {
  overflow: hidden;
}
.onboarding-stage {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  display: grid;
}
.onboarding-shell[data-onboarding-step="billing"] {
  place-items: center;
  padding: clamp(12px, 2vh, 22px) clamp(16px, 3vw, 28px);
}
.onboarding-shell[data-onboarding-step="billing"] ~ .app-shell,
.onboarding-shell[data-onboarding-step="vessel-profile"] ~ .app-shell {
  background: transparent;
}
.onboarding-shell[data-onboarding-step="billing"] .onboarding-stage {
  width: min(1220px, 100%);
}
.onboarding-card {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 4vh, 44px);
  border-radius: 28px;
}
.onboarding-shell[data-onboarding-step="account-details"] .onboarding-card {
  color: #f7fbff;
  background:
    linear-gradient(145deg, rgba(10, 42, 60, 0.86), rgba(3, 17, 30, 0.78)),
    rgba(3, 18, 31, 0.72);
  border: 1px solid rgba(66, 211, 221, 0.34);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(22px);
}
.onboarding-shell[data-onboarding-step="billing"] .onboarding-card {
  position: relative;
  width: min(1160px, 100%);
  padding: clamp(20px, 2.2vh, 28px) clamp(24px, 3vw, 36px);
}
.onboarding-card .brand-row {
  margin-bottom: 24px;
}
.onboarding-body {
  display: grid;
  gap: 16px;
  margin-top: clamp(18px, 2.4vh, 24px);
}
.onboarding-form {
  display: grid;
  gap: clamp(14px, 2vh, 18px);
}
.onboarding-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(18px, 2.4vh, 24px);
}
.onboarding-shell:not([data-onboarding-step="account-details"]) .onboarding-footer {
  justify-content: flex-end;
}
.onboarding-secure-note {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(214, 232, 239, 0.72);
  font-size: 0.82rem;
  font-weight: 700;
}
.onboarding-shell[data-onboarding-step="account-details"] .onboarding-secure-note {
  display: inline-flex;
}
.onboarding-secure-note svg,
.onboarding-input-icon svg,
.onboarding-section-icon svg,
.onboarding-plan-icon svg,
.onboarding-button-icon svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.onboarding-secure-note svg {
  width: 16px;
  height: 16px;
}
.onboarding-stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 22px);
  margin: clamp(22px, 3vh, 32px) auto clamp(16px, 2.5vh, 26px);
  padding: 0;
  width: min(520px, 100%);
  list-style: none;
}
.onboarding-stepper::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 17%;
  right: 17%;
  height: 1px;
  background: linear-gradient(90deg, rgba(44, 232, 225, 0.72), rgba(255, 255, 255, 0.2));
}
.onboarding-stepper li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(212, 231, 239, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}
.onboarding-stepper li span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: rgba(214, 232, 239, 0.72);
  background: rgba(3, 20, 32, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
.onboarding-stepper li.is-active {
  color: #dffcff;
}
.onboarding-stepper li.is-active span,
.onboarding-stepper li.is-complete span {
  color: #06242c;
  background: linear-gradient(135deg, #55fff5, #09aaa7);
  border-color: rgba(102, 255, 249, 0.85);
}
.onboarding-stepper li.is-complete span {
  position: relative;
  font-size: 0;
}
.onboarding-stepper li.is-complete span::before {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(-45deg);
}
.onboarding-plan-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 520px);
  margin: 0 auto clamp(18px, 2.4vh, 24px);
  padding: 12px 14px;
  border-radius: 18px;
  color: #eafcff;
  background: rgba(7, 34, 48, 0.72);
  border: 1px solid rgba(54, 221, 224, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.onboarding-plan-chip[hidden] {
  display: none;
}
.onboarding-plan-icon {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #47f4ef;
  background: rgba(21, 221, 215, 0.1);
  border: 1px solid rgba(55, 232, 226, 0.34);
}
.onboarding-plan-chip small,
.onboarding-plan-chip em {
  display: block;
  font-style: normal;
}
.onboarding-plan-chip small {
  color: rgba(172, 211, 220, 0.88);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.onboarding-plan-chip strong {
  display: block;
  margin-top: 2px;
  color: #f8ffff;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.2;
}
.onboarding-plan-chip em {
  margin-top: 3px;
  color: rgba(214, 232, 239, 0.74);
  font-size: 0.82rem;
  font-weight: 700;
}
.onboarding-shell[data-onboarding-step="account-details"] .onboarding-brand {
  justify-content: center;
}
.onboarding-shell[data-onboarding-step="account-details"] .onboarding-hero {
  margin-top: 0;
  text-align: left;
}
.onboarding-shell[data-onboarding-step="account-details"] .onboarding-hero .eyebrow {
  color: #35f5ed;
}
.onboarding-shell[data-onboarding-step="account-details"] #onboarding-title {
  color: #fbffff;
  font-family: var(--heading-font);
  font-size: clamp(2.45rem, 5vw, 4.05rem);
  line-height: 0.98;
  letter-spacing: 0;
}
.onboarding-title-highlight {
  color: #48f2ec;
}
.onboarding-shell[data-onboarding-step="account-details"] #onboarding-copy {
  color: rgba(223, 239, 244, 0.76);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}
.onboarding-form-section {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.onboarding-section-icon {
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  color: #34f5ed;
  background: rgba(35, 235, 228, 0.1);
  border: 1px solid rgba(53, 245, 237, 0.34);
}
.onboarding-form-section h3 {
  margin: 0;
  color: #40f5ee;
  font-size: 1.02rem;
  line-height: 1.2;
}
.onboarding-form-section p {
  margin: 6px 0 0;
  color: rgba(215, 233, 239, 0.76);
  font-weight: 700;
}
.onboarding-field {
  display: grid;
  gap: 8px;
  color: rgba(233, 246, 249, 0.88);
  font-size: 0.9rem;
  font-weight: 800;
}
.onboarding-field-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.onboarding-input-shell {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(4, 22, 35, 0.62);
  border: 1px solid rgba(185, 222, 232, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 34px rgba(0, 0, 0, 0.12);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.onboarding-input-shell:focus-within {
  background: rgba(7, 31, 45, 0.78);
  border-color: rgba(60, 243, 237, 0.82);
  box-shadow:
    0 0 0 3px rgba(45, 232, 225, 0.14),
    0 18px 38px rgba(0, 0, 0, 0.16);
}
.onboarding-input-icon {
  display: grid;
  place-items: center;
  color: rgba(194, 221, 229, 0.82);
  font-size: 20px;
}
.onboarding-input-shell input {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0;
  color: #f8ffff;
  font: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}
.onboarding-input-shell input::placeholder {
  color: rgba(194, 215, 224, 0.52);
}
.onboarding-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.onboarding-continue-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 0 20px;
  border-radius: 16px;
  font-size: 1rem;
  box-shadow: 0 18px 36px rgba(0, 188, 185, 0.24);
}
.onboarding-button-icon {
  display: grid;
  place-items: center;
  font-size: 22px;
}
.onboarding-billing-step {
  display: grid;
  gap: 16px;
}
.optional-label {
  color: var(--ink-soft);
  font-weight: 600;
}
.auth-card {
  width: min(560px, 100%);
  padding: 32px;
}
.auth-stage {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  display: grid;
}
.auth-experience.panel {
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 40px 40px 34px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, rgba(253, 250, 245, 0.988), rgba(247, 242, 234, 0.972));
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 30px 78px rgba(2, 24, 39, 0.18),
    0 8px 20px rgba(2, 24, 39, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
.brand-logo-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  background: transparent;
}
.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(var(--brand-logo-scale, 1.04));
  transform-origin: center;
}
.brand-lockup {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.brand-name {
  font-family: var(--heading-font);
  font-size: 1.62rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1;
}
.brand-subtitle {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.auth-brand-logo-shell {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(9, 66, 94, 0.14);
}
.auth-brand-logo {
  --brand-logo-scale: 1.04;
}
.auth-brand-lockup .brand-name {
  color: var(--ink);
  font-size: 1.5rem;
}
.auth-brand-lockup .brand-subtitle {
  color: rgba(14, 122, 165, 0.78);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}
.auth-card .eyebrow {
  color: var(--sea);
}
.auth-copy {
  margin: 14px 0 0;
  max-width: 31rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.58;
}
.auth-hero {
  display: grid;
  gap: 10px;
}
.auth-hero h2 {
  margin: 0;
  font-size: 3.62rem;
  font-weight: 720;
  line-height: 0.99;
  letter-spacing: 0;
}
.auth-mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 326px);
  margin-top: 22px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(13, 36, 56, 0.065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.auth-mode-button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(63, 85, 102, 0.76);
  font-weight: 650;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.auth-mode-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.56);
  color: var(--ink);
}
.auth-mode-button.active {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(237, 244, 248, 0.9));
  box-shadow: 0 8px 18px rgba(13, 36, 56, 0.06);
}
.auth-mode-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.auth-context-panel {
  margin-top: 22px;
}
.auth-context-shell {
  display: grid;
  gap: 16px;
}
.auth-note-card,
.auth-meta-card {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 242, 235, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.auth-note-card h3,
.auth-meta-card strong {
  margin: 0;
  color: var(--ink);
}
.auth-note-card h3 {
  font-family: var(--heading-font);
  font-size: 1.45rem;
}
.auth-note-card .small-copy,
.auth-meta-card .small-copy {
  margin: 0;
}
.auth-note-card-success {
  background: rgba(118, 211, 179, 0.14);
  border-color: rgba(76, 183, 165, 0.26);
}
.auth-note-card-warning {
  background: rgba(246, 197, 110, 0.16);
  border-color: rgba(239, 177, 90, 0.24);
}
.auth-note-card-error {
  background: rgba(239, 124, 98, 0.12);
  border-color: rgba(239, 124, 98, 0.2);
}
.auth-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.auth-vessel-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.auth-vessel-pill {
  display: grid;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(13, 36, 56, 0.06);
  border: 1px solid rgba(13, 101, 156, 0.12);
}
.auth-vessel-pill small {
  color: var(--ink-soft);
}
.auth-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.auth-inline-actions-stacked {
  flex-direction: column;
  align-items: stretch;
}
.auth-form {
  margin-top: 24px;
  gap: 13px;
}
.auth-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 640;
}
.auth-form input,
.auth-form select,
.auth-invite-lookup input {
  min-height: 54px;
  border-color: rgba(13, 36, 56, 0.075);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-soft),
    background var(--transition-fast);
}
.auth-form input:focus,
.auth-form select:focus,
.auth-invite-lookup input:focus {
  outline: none;
  border-color: rgba(14, 122, 165, 0.32);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 3px rgba(14, 122, 165, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
#auth-submit {
  min-height: 60px;
  margin-top: 6px;
  padding-inline: 24px;
  color: #062332;
  font-size: 1.03rem;
  background: linear-gradient(135deg, #ffd99b, #efaa45);
  box-shadow:
    0 16px 34px rgba(181, 110, 25, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
#auth-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffe0ab, #f2b24f);
  box-shadow:
    0 18px 38px rgba(181, 110, 25, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
#auth-submit:active:not(:disabled) {
  box-shadow:
    0 10px 24px rgba(189, 124, 42, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
#auth-verification-code-input {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.auth-invite-lookup {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}
.auth-invite-lookup label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
}
.auth-footer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 14px;
}
.auth-footer-copy {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}
@keyframes bootPulse {
  0%, 80%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes bootWaveDrift {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -30;
  }
}
.access-modal .eyebrow,
.access-modal h2,
.access-modal h3,
.access-modal label {
  color: var(--ink);
}
.access-modal .eyebrow {
  color: var(--sea);
}
.access-modal input,
.access-modal select,
.access-modal textarea {
  border-color: rgba(13, 36, 56, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
}
.access-modal input::placeholder,
.access-modal textarea::placeholder {
  color: rgba(76, 97, 113, 0.64);
}
.auth-error {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(239, 124, 98, 0.12);
  color: #a74732;
  font-weight: 600;
}
.auth-notice {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(118, 211, 179, 0.14);
  color: #1b6958;
  font-weight: 600;
}
body.onboarding-locked #onboarding-notice.auth-notice {
  margin-top: clamp(7px, 1vh, 11px);
  padding: 9px 13px;
  color: #efffff;
  background:
    linear-gradient(135deg, rgba(32, 214, 173, 0.24), rgba(28, 155, 176, 0.16)),
    rgba(5, 34, 35, 0.82);
  border: 1px solid rgba(91, 255, 223, 0.36);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body.onboarding-locked #onboarding-error.auth-error {
  margin-top: clamp(7px, 1vh, 11px);
  padding: 9px 13px;
  color: #fff7f4;
  background: rgba(126, 37, 25, 0.34);
  border: 1px solid rgba(255, 139, 113, 0.34);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}
.auth-service-help {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(112, 182, 235, 0.12);
  border: 1px solid rgba(112, 182, 235, 0.22);
}
.auth-service-copy {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}
.auth-service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.auth-form {
  margin-top: 24px;
}
.auth-form-inline-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 24px;
}
.auth-secondary-action {
  padding-right: 0;
  padding-left: 0;
  color: rgba(63, 85, 102, 0.72);
  font-size: 0.9rem;
  font-weight: 620;
}
.auth-form-inline-actions .auth-secondary-action.text-button {
  min-height: 30px;
  border-color: transparent;
  background: transparent;
  color: rgba(63, 85, 102, 0.66);
  font-weight: 620;
  box-shadow: none;
}
.auth-form-inline-actions .auth-secondary-action.text-button:hover {
  background: transparent;
  color: var(--sea-deep);
  box-shadow: none;
}
.auth-toggle {
  margin-top: 2px;
  padding-left: 0;
  font-weight: 600;
}
.session-warning-shell[hidden] {
  display: none;
}
.session-warning-shell {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 28;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(420px, calc(100vw - 32px));
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(252, 249, 243, 0.98), rgba(247, 242, 234, 0.98));
  border: 1px solid rgba(13, 36, 56, 0.08);
  box-shadow: 0 18px 42px rgba(9, 66, 94, 0.16);
}
.session-warning-shell .eyebrow {
  margin: 0 0 4px;
  color: var(--sea);
}
.session-warning-copy {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}
.session-warning-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.workspace-save-feedback[hidden] {
  display: none;
}
.workspace-save-feedback {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: min(420px, calc(100vw - 36px));
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 18px;
  background: rgba(252, 249, 243, 0.96);
  color: var(--ink);
  box-shadow: 0 18px 42px rgba(9, 66, 94, 0.16);
  backdrop-filter: blur(18px);
}
.workspace-save-feedback-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--sea);
}
.workspace-save-feedback[data-save-state="saving"] .workspace-save-feedback-dot {
  animation: savePulse 1s ease-in-out infinite;
}
.workspace-save-feedback[data-save-state="saved"] .workspace-save-feedback-dot {
  background: #2f9c7d;
}
.workspace-save-feedback[data-save-state="error"] {
  border-color: rgba(196, 80, 72, 0.22);
  background: rgba(255, 246, 242, 0.97);
  color: #8d3f2f;
}
.workspace-save-feedback[data-save-state="error"] .workspace-save-feedback-dot {
  background: #c45048;
}
.workspace-save-feedback-text {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}
.workspace-save-feedback-retry {
  flex: 0 0 auto;
  padding: 0 6px;
  color: inherit;
}
.offline-sync-banner[hidden] {
  display: none;
}
.offline-sync-banner {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 86;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(460px, calc(100vw - 36px));
  min-height: 52px;
  padding: 11px 12px;
  border: 1px solid rgba(13, 159, 183, 0.22);
  border-radius: 20px;
  background: rgba(8, 31, 45, 0.94);
  color: #f7fbfc;
  box-shadow: 0 22px 52px rgba(5, 20, 32, 0.28);
  backdrop-filter: blur(18px);
}
.offline-sync-banner__dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #31d0df;
  box-shadow: 0 0 0 6px rgba(49, 208, 223, 0.14);
}
.offline-sync-banner.is-offline .offline-sync-banner__dot {
  background: #f2a24b;
  box-shadow: 0 0 0 6px rgba(242, 162, 75, 0.15);
}
.offline-sync-banner.is-syncing .offline-sync-banner__dot {
  animation: savePulse 1s ease-in-out infinite;
}
.offline-sync-banner.is-error .offline-sync-banner__dot {
  background: #ff8a72;
  box-shadow: 0 0 0 6px rgba(255, 138, 114, 0.14);
}
.offline-sync-banner__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.offline-sync-banner__copy strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.offline-sync-banner__copy span {
  overflow: hidden;
  color: rgba(238, 250, 252, 0.78);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.offline-sync-banner__action {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(49, 208, 223, 0.28);
  border-radius: 999px;
  background: rgba(49, 208, 223, 0.14);
  color: #ffffff;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}
.offline-sync-banner__action:hover:not(:disabled) {
  background: rgba(49, 208, 223, 0.22);
  transform: translateY(-1px);
}
.offline-sync-banner__action:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}
.app-feedback-region {
  position: fixed;
  top: calc(max(18px, env(safe-area-inset-top)) + 64px);
  right: max(18px, env(safe-area-inset-right));
  z-index: 70;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 36px));
  pointer-events: none;
}
.app-feedback-toast {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 18px;
  background: rgba(252, 249, 243, 0.97);
  color: var(--ink);
  box-shadow: 0 18px 42px rgba(9, 66, 94, 0.16);
  backdrop-filter: blur(18px);
  pointer-events: auto;
  animation: toastEnter 180ms ease-out both;
}
.app-feedback-toast.is-leaving {
  animation: toastLeave 180ms ease-in both;
}
.app-feedback-toast.success {
  border-color: rgba(47, 156, 125, 0.2);
  background: rgba(244, 253, 249, 0.97);
}
.app-feedback-toast.error {
  border-color: rgba(196, 80, 72, 0.22);
  background: rgba(255, 246, 242, 0.98);
}
.app-feedback-toast-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--sea);
  box-shadow: 0 0 0 5px rgba(18, 137, 169, 0.1);
}
.app-feedback-toast.success .app-feedback-toast-dot {
  background: #2f9c7d;
  box-shadow: 0 0 0 5px rgba(47, 156, 125, 0.1);
}
.app-feedback-toast.error .app-feedback-toast-dot {
  background: #c45048;
  box-shadow: 0 0 0 5px rgba(196, 80, 72, 0.1);
}
.app-feedback-toast-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.42;
}
.app-feedback-toast-copy strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink);
}
.app-feedback-toast-copy span {
  color: var(--ink-soft);
}
.app-feedback-toast.error .app-feedback-toast-copy strong,
.app-feedback-toast.error .app-feedback-toast-copy span {
  color: #7a392f;
}
.app-feedback-toast-close {
  align-self: start;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}
.app-feedback-toast-close:hover {
  color: var(--sea-deep);
}
.admin-support-mode-banner {
  position: sticky;
  top: 0;
  z-index: 12000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 1180px);
  margin: 0 auto 10px;
  padding: 10px 18px;
  border: 1px solid rgba(10, 58, 82, 0.18);
  border-radius: 0 0 22px 22px;
  background: rgba(239, 247, 251, 0.96);
  color: var(--ink);
  box-shadow: 0 18px 36px rgba(13, 36, 56, 0.12);
  backdrop-filter: blur(18px);
}
.admin-support-mode-banner__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.94);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.admin-support-mode-banner__copy {
  min-width: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}
body.admin-support-mode .primary-button,
body.admin-support-mode .danger-button,
body.admin-support-mode input[type="file"] {
  cursor: not-allowed;
}
@keyframes toastEnter {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@media (max-width: 760px) {
  .admin-support-mode-banner {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 8px;
    width: calc(100% - 24px);
    padding: 10px 12px;
    border-radius: 0 0 18px 18px;
  }
}
@keyframes toastLeave {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
}
@media (max-width: 640px) {
  .offline-sync-banner {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    left: max(12px, env(safe-area-inset-left));
    grid-template-columns: 11px minmax(0, 1fr) auto;
    width: auto;
    min-height: 48px;
    padding: 10px 11px;
    border-radius: 18px;
  }
  .offline-sync-banner__copy strong {
    font-size: 0.82rem;
  }
  .offline-sync-banner__copy span {
    font-size: 0.74rem;
  }
  .offline-sync-banner__action {
    min-height: 32px;
    padding: 0 10px;
  }
  .app-feedback-region {
    top: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    width: auto;
  }
  .app-feedback-toast {
    border-radius: 16px;
  }
}
.access-modal-shell[hidden] {
  display: none;
}
.access-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  padding: clamp(20px, 4vh, 40px) clamp(16px, 3vw, 32px);
}
.access-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 20, 31, 0.54);
  backdrop-filter: blur(8px);
}
.access-modal {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 28px;
  max-height: min(calc(var(--visual-viewport-height) - 32px), 940px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(251, 248, 242, 0.98), rgba(244, 239, 231, 0.98));
}
.access-modal-heading {
  align-items: center;
}
.access-modal-copy {
  margin: 12px 0 0;
  max-width: 720px;
}
.access-modal h2,
.account-sheet h2,
.billing-sheet h2,
.vendor-modal h2,
.inventory-modal h2,
.account-delete-confirm h2 {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(2rem, 3.2vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.access-modal-nav {
  box-sizing: border-box;
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 520px);
  margin-top: 20px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}
.access-modal-nav-button {
  box-sizing: border-box;
  appearance: none;
  border: 0;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.access-modal-nav-button:hover {
  color: var(--ink);
  background: rgba(13, 36, 56, 0.05);
}
.access-modal-nav-button:hover,
.access-modal-nav-button:active {
  transform: none;
}
.access-modal-nav-button.active {
  background: rgba(14, 122, 165, 0.12);
  color: var(--ink);
}
.access-modal-nav-button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(11, 101, 141, 0.22);
}
.access-modal-grid {
  display: block;
  margin-top: 22px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dashboard-tour-shell {
  position: fixed;
  inset: 0;
  z-index: 2200;
  pointer-events: none;
}
.dashboard-tour-shell[hidden] {
  display: none !important;
}
body.dashboard-tour-open {
  overflow: hidden;
  overscroll-behavior: none;
}
.dashboard-tour-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
  background:
    radial-gradient(circle at 18% 16%, rgba(47, 225, 223, 0.12), transparent 30%),
    rgba(2, 10, 18, 0.58);
}
.dashboard-tour-shell[data-tour-has-target="true"] .dashboard-tour-scrim {
  background: transparent;
}
.dashboard-tour-highlight {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  border-radius: 18px;
  border: 2px solid rgba(83, 246, 238, 0.95);
  background: transparent;
  box-shadow:
    0 0 0 9999px rgba(2, 10, 18, 0.56),
    0 0 0 7px rgba(53, 229, 229, 0.13),
    0 0 34px rgba(35, 229, 224, 0.42);
  transition: transform 200ms ease, width 200ms ease, height 200ms ease, opacity 180ms ease;
  animation: dashboardTourTargetPulse 1800ms ease-in-out infinite;
}
.dashboard-tour-card {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(386px, calc(100vw - 32px));
  padding: 18px;
  pointer-events: auto;
  color: #f4fbff;
  border-radius: 24px;
  border: 1px solid rgba(87, 239, 232, 0.28);
  background:
    radial-gradient(circle at top left, rgba(37, 220, 217, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(7, 28, 42, 0.98), rgba(3, 13, 25, 0.96));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
  transform: translate(-50%, -50%);
  animation: dashboardTourCardIn 180ms ease both;
}
@keyframes dashboardTourCardIn {
  from {
    opacity: 0;
    filter: saturate(0.92);
  }
  to {
    opacity: 1;
    filter: saturate(1);
  }
}
@keyframes dashboardTourTargetPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 9999px rgba(2, 10, 18, 0.56),
      0 0 0 7px rgba(53, 229, 229, 0.12),
      0 0 30px rgba(35, 229, 224, 0.36);
  }
  50% {
    box-shadow:
      0 0 0 9999px rgba(2, 10, 18, 0.54),
      0 0 0 10px rgba(53, 229, 229, 0.18),
      0 0 42px rgba(35, 229, 224, 0.5);
  }
}
.dashboard-tour-card-topline,
.dashboard-tour-actions,
.dashboard-tour-action-group {
  display: flex;
  align-items: center;
}
.dashboard-tour-card-topline,
.dashboard-tour-actions {
  justify-content: space-between;
  gap: 12px;
}
.dashboard-tour-eyebrow,
.dashboard-tour-count {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.dashboard-tour-eyebrow {
  color: rgba(105, 250, 244, 0.92);
}
.dashboard-tour-count {
  color: rgba(222, 240, 247, 0.7);
}
.dashboard-tour-progress {
  display: flex;
  gap: 5px;
  margin: 12px 0 16px;
}
.dashboard-tour-progress-dot {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(207, 233, 240, 0.18);
}
.dashboard-tour-progress-dot.is-active {
  background: linear-gradient(90deg, #28e4df, #70fff7);
  box-shadow: 0 0 14px rgba(40, 228, 223, 0.42);
}
.dashboard-tour-card h2 {
  margin: 0;
  color: #ffffff;
  font-family: var(--app-heading-font, var(--heading-font));
  font-size: clamp(1.32rem, 2vw, 1.62rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.dashboard-tour-card p {
  margin: 10px 0 0;
  color: rgba(225, 239, 246, 0.82);
  font-size: 0.96rem;
  line-height: 1.5;
}
.dashboard-tour-actions {
  margin-top: 18px;
}
.dashboard-tour-action-group {
  gap: 8px;
}
.dashboard-tour-card .ghost-button,
.dashboard-tour-card .primary-button,
.dashboard-tour-card .text-button {
  min-height: 40px;
  border-radius: 999px;
}
.dashboard-tour-card .ghost-button {
  color: rgba(241, 249, 252, 0.88);
  border-color: rgba(125, 226, 226, 0.24);
  background: rgba(255, 255, 255, 0.06);
}
.dashboard-tour-card .ghost-button:disabled {
  opacity: 0.42;
  cursor: default;
}
.dashboard-tour-card .text-button {
  color: rgba(184, 222, 231, 0.9);
}
.dashboard-tour-card .primary-button {
  box-shadow: 0 14px 36px rgba(19, 182, 188, 0.24);
}
.dashboard-tour-target-active {
  scroll-margin: 96px;
}
@media (max-width: 760px) {
  .dashboard-tour-scrim {
    background:
      linear-gradient(180deg, rgba(2, 10, 18, 0.48), rgba(2, 10, 18, 0.62)),
      rgba(2, 10, 18, 0.52);
  }
  .dashboard-tour-shell[data-tour-has-target="true"] .dashboard-tour-scrim {
    background: transparent;
  }
  .dashboard-tour-highlight {
    border-radius: 16px;
    box-shadow:
      0 0 0 9999px rgba(2, 10, 18, 0.5),
      0 0 0 5px rgba(53, 229, 229, 0.14),
      0 0 26px rgba(35, 229, 224, 0.36);
  }
  .dashboard-tour-card {
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(12px + var(--safe-area-bottom, 0px)) !important;
    width: auto;
    max-height: min(62dvh, 430px);
    overflow: auto;
    padding: 16px;
    border-radius: 22px;
    transform: none !important;
  }
  .dashboard-tour-card.is-centered {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
  .dashboard-tour-card.is-mobile-top {
    top: calc(12px + var(--safe-area-top, 0px)) !important;
    bottom: auto !important;
  }
  .dashboard-tour-card h2 {
    font-size: 1.24rem;
  }
  .dashboard-tour-card p {
    font-size: 0.92rem;
  }
  .dashboard-tour-actions {
    align-items: stretch;
  }
  .dashboard-tour-action-group {
    flex: 1;
    justify-content: flex-end;
  }
  .dashboard-tour-card .ghost-button,
  .dashboard-tour-card .primary-button,
  .dashboard-tour-card .text-button {
    min-height: 42px;
    padding-inline: 14px;
  }
}
.account-sheet {
  position: relative;
  z-index: 1;
  width: min(680px, calc(100vw - 28px));
  margin: 0 auto;
  padding: clamp(18px, 2.5vw, 24px);
  max-height: calc(100dvh - 34px);
  overflow: auto;
  scrollbar-gutter: stable;
}
.billing-sheet {
  position: relative;
  z-index: 1;
  width: min(1060px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 30px);
  max-height: calc(var(--visual-viewport-height) - 40px);
  overflow: auto;
  background:
    radial-gradient(circle at top right, rgba(14, 122, 165, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(251, 248, 242, 0.98), rgba(244, 239, 231, 0.98));
}
.account-sheet-body {
  display: grid;
  gap: 12px;
}
.billing-sheet-body {
  display: grid;
  gap: 16px;
}
.account-sheet-card {
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.76);
}
.account-sheet-card strong,
.account-sheet-card span {
  display: block;
}
.account-sheet-card strong {
  color: var(--ink);
  font-weight: 760;
  line-height: 1.28;
}
.account-sheet-card span {
  color: rgba(63, 85, 102, 0.86);
  line-height: 1.42;
}
.account-sheet-card span + strong,
.account-sheet-card strong + span {
  margin-top: 4px;
}
.account-sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.account-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}
.account-billing-section.dynamic.warning {
  border-color: rgba(172, 99, 24, 0.22);
  background:
    radial-gradient(circle at top right, rgba(245, 184, 72, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.84);
}
.account-billing-section.dynamic.empty {
  background: rgba(255, 255, 255, 0.78);
}
.account-billing-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 36, 56, 0.82);
  background: rgba(13, 36, 56, 0.08);
}
.account-billing-badge.trialing {
  color: #0a5d8f;
  background: rgba(83, 186, 231, 0.2);
}
.account-billing-badge.active {
  color: #167463;
  background: rgba(55, 178, 147, 0.18);
}
.account-billing-badge.past-due {
  color: #9a4f12;
  background: rgba(245, 184, 72, 0.24);
}
.account-billing-badge.canceled {
  color: #9f3d32;
  background: rgba(195, 82, 65, 0.16);
}
.account-billing-metric {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 16px;
  background: rgba(247, 251, 252, 0.78);
}
.account-billing-metric span,
.account-billing-metric strong {
  display: block;
}
.account-billing-metric span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-billing-metric strong {
  margin-top: 4px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.25;
}
.account-billing-section .small-copy {
  margin: 8px 0 0;
}
.account-delete-section .small-copy {
  margin: 6px 0 0;
  max-width: 46rem;
}
.billing-popular-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--sea-deep);
  background: rgba(14, 122, 165, 0.1);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.billing-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.billing-plan-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto auto auto;
  gap: 18px;
  min-height: 100%;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid rgba(13, 36, 56, 0.09);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.84));
  box-shadow: 0 20px 42px rgba(13, 36, 56, 0.08);
  overflow: hidden;
}
.billing-plan-card.selected {
  outline: 2px solid color-mix(in srgb, var(--sea) 55%, transparent);
  outline-offset: 3px;
}
.billing-plan-card.featured {
  border-color: rgba(38, 112, 255, 0.58);
  background:
    radial-gradient(circle at top right, rgba(38, 112, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(244, 250, 255, 0.98), rgba(255, 255, 255, 0.9));
  box-shadow: 0 24px 54px rgba(38, 112, 255, 0.16);
}
.billing-plan-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.billing-plan-card[data-plan="premium"] .billing-plan-eyebrow,
.billing-plan-card[data-plan="premium"] .billing-feature-icon,
.billing-plan-card[data-plan="premium"] .billing-trial-check {
  color: #7142d8;
}
.billing-plan-card[data-plan="pro"] .billing-plan-eyebrow,
.billing-plan-card[data-plan="pro"] .billing-feature-icon,
.billing-plan-card[data-plan="pro"] .billing-trial-check {
  color: #1f6fff;
}
.billing-plan-card[data-plan="basic"] .billing-plan-eyebrow,
.billing-plan-card[data-plan="basic"] .billing-feature-icon,
.billing-plan-card[data-plan="basic"] .billing-trial-check {
  color: var(--sea);
}
.billing-plan-eyebrow {
  color: currentColor;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.billing-popular-pill {
  gap: 7px;
  color: #ffffff;
  background: linear-gradient(135deg, #2f84ff, #0759df);
  box-shadow: 0 12px 22px rgba(38, 112, 255, 0.24);
}
.billing-popular-pill svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.billing-plan-card h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--heading-font);
  font-size: clamp(2.25rem, 3.3vw, 2.8rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.billing-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.billing-plan-price strong {
  color: var(--ink);
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1;
}
.billing-plan-price span {
  color: var(--ink-soft);
  font-weight: 700;
}
.billing-plan-description,
.billing-plan-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.45;
}
.billing-plan-note {
  padding: 10px 12px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 14px;
  background: rgba(246, 250, 252, 0.82);
  color: var(--ink);
  font-weight: 650;
}
.billing-feature-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 6px 0 0;
  list-style: none;
}
.billing-feature-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.35;
}
.billing-feature-icon,
.billing-trial-check,
.billing-secure-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 10%, white 90%);
}
.billing-feature-icon svg,
.billing-trial-check svg,
.billing-secure-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.billing-plan-trial-note {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(13, 36, 56, 0.09);
  color: var(--ink);
  font-weight: 650;
  line-height: 1.35;
}
.billing-subscribe-button {
  width: 100%;
  justify-content: center;
  min-height: 54px;
  font-size: 1.02rem;
}
.billing-plan-card.featured .billing-subscribe-button {
  color: #ffffff;
  background: linear-gradient(135deg, #4d89ff, #0759df);
  box-shadow: 0 18px 32px rgba(38, 112, 255, 0.26);
}
.billing-plan-card.featured .billing-subscribe-button:hover {
  box-shadow: 0 20px 36px rgba(38, 112, 255, 0.3);
}
.billing-secure-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(63, 85, 102, 0.86);
  font-weight: 650;
  text-align: center;
}
.billing-secure-icon {
  color: #1f6fff;
  background: rgba(31, 111, 255, 0.1);
  box-shadow: 0 10px 20px rgba(31, 111, 255, 0.12);
}
.billing-admin-managed-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  border: 1px solid rgba(14, 122, 165, 0.18);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(35, 210, 214, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 250, 251, 0.88));
  box-shadow: 0 22px 48px rgba(13, 36, 56, 0.1);
  padding: clamp(22px, 2.8vw, 32px);
}
.billing-admin-managed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(14, 122, 165, 0.2);
  border-radius: 20px;
  color: var(--sea);
  background: rgba(14, 122, 165, 0.1);
  box-shadow: 0 16px 30px rgba(14, 122, 165, 0.12);
}
.billing-admin-managed-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.billing-admin-managed-card h3 {
  margin: 8px 0;
  color: var(--ink);
  font-family: var(--heading-font);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
}
.billing-admin-managed-card p {
  margin: 0;
  max-width: 620px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}
.billing-admin-managed-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}
.billing-admin-managed-details div {
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  padding: 12px 14px;
}
.billing-admin-managed-details dt,
.billing-admin-managed-details dd {
  margin: 0;
}
.billing-admin-managed-details dt {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.billing-admin-managed-details dd {
  margin-top: 4px;
  color: var(--ink);
  font-weight: 850;
}
.billing-feedback {
  margin: 0;
  padding: 13px 15px;
  border: 1px solid rgba(14, 122, 165, 0.14);
  border-radius: 18px;
  color: var(--sea-deep);
  background: rgba(14, 122, 165, 0.08);
  font-weight: 700;
}
.billing-feedback.error {
  border-color: rgba(142, 63, 51, 0.18);
  color: #8d3f2f;
  background: rgba(239, 124, 98, 0.12);
}
.billing-upgrade-prompt {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(38, 112, 255, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(38, 112, 255, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(245, 250, 255, 0.96), rgba(255, 255, 255, 0.88));
  box-shadow: 0 18px 42px rgba(14, 47, 80, 0.12);
}
.billing-upgrade-prompt-icon,
.billing-upgrade-benefit span {
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #1f6fff;
  background: rgba(38, 112, 255, 0.12);
}
.billing-upgrade-prompt-icon {
  width: 48px;
  height: 48px;
}
.billing-upgrade-prompt svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.billing-upgrade-prompt-copy {
  min-width: 0;
}
.billing-upgrade-prompt h3 {
  margin: 5px 0 0;
  color: var(--ink);
  font-family: var(--heading-font);
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
}
.billing-upgrade-prompt p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  line-height: 1.45;
}
.billing-upgrade-benefit {
  display: inline-grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  color: var(--ink);
}
.billing-upgrade-benefit span {
  width: 28px;
  height: 28px;
}
.billing-upgrade-benefit strong {
  font-size: 0.96rem;
  line-height: 1.25;
}
.billing-upgrade-cta {
  min-width: 150px;
  min-height: 48px;
}
@media (min-width: 900px) {
  body.onboarding-locked:has(.onboarding-shell[data-onboarding-step="billing"]:not([hidden])) {
    overflow: auto;
  }
  .onboarding-shell[data-onboarding-step="billing"] {
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    padding-top: clamp(84px, 9vh, 118px);
    padding-bottom: clamp(36px, 5vh, 64px);
  }
  .onboarding-shell[data-onboarding-step="billing"] .onboarding-stage {
    height: auto;
    align-items: start;
    padding-top: 0;
    padding-bottom: 0;
  }
  .onboarding-shell[data-onboarding-step="billing"] .onboarding-card {
    display: grid;
    grid-template-rows: auto auto auto auto;
    max-height: none;
    overflow: visible;
  }
  .onboarding-shell[data-onboarding-step="billing"] .onboarding-brand {
    margin-bottom: clamp(10px, 1.4vh, 16px);
  }
  .onboarding-shell[data-onboarding-step="billing"] .auth-brand-logo-shell {
    width: clamp(42px, 4.6vh, 50px);
    height: clamp(42px, 4.6vh, 50px);
    border-radius: 15px;
    box-shadow: 0 10px 22px rgba(9, 66, 94, 0.12);
  }
  .onboarding-shell[data-onboarding-step="billing"] .auth-brand-lockup .brand-name {
    font-size: clamp(1.18rem, 1.45vw, 1.42rem);
  }
  .onboarding-shell[data-onboarding-step="billing"] .auth-brand-lockup .brand-subtitle {
    font-size: 0.64rem;
    letter-spacing: 0.15em;
  }
  .onboarding-shell[data-onboarding-step="billing"] .onboarding-hero {
    gap: clamp(6px, 0.9vh, 10px);
  }
  .onboarding-shell[data-onboarding-step="billing"] .onboarding-hero h2 {
    max-width: none;
    font-size: clamp(2.42rem, 3.65vw, 3.25rem);
    line-height: 1;
  }
  .onboarding-shell[data-onboarding-step="billing"] .auth-copy {
    max-width: 50rem;
    margin-top: 6px;
    font-size: clamp(0.94rem, 1.18vw, 1.02rem);
    line-height: 1.45;
  }
  .onboarding-shell[data-onboarding-step="billing"] .auth-notice,
  .onboarding-shell[data-onboarding-step="billing"] .auth-error {
    margin-top: clamp(10px, 1.4vh, 14px);
    padding: 10px 13px;
  }
  .onboarding-shell[data-onboarding-step="billing"] .onboarding-body {
    min-height: 0;
    gap: clamp(10px, 1.4vh, 14px);
    margin-top: clamp(14px, 1.8vh, 18px);
  }
  .onboarding-shell[data-onboarding-step="billing"] .onboarding-billing-step {
    min-height: 0;
    gap: clamp(10px, 1.25vh, 14px);
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-plan-grid {
    min-height: 0;
    gap: clamp(14px, 1.7vw, 20px);
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-plan-card {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto;
    gap: clamp(12px, 1.5vh, 16px);
    min-height: 0;
    padding: clamp(20px, 2.3vh, 26px) clamp(21px, 2.4vw, 30px);
    border-radius: 24px;
    box-shadow:
      0 18px 36px rgba(13, 36, 56, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-plan-card.featured {
    box-shadow:
      0 20px 44px rgba(38, 112, 255, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-plan-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-popular-pill {
    min-height: 30px;
    padding: 6px 11px;
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-plan-card h3 {
    font-size: clamp(2rem, 3.1vw, 2.55rem);
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-plan-price strong {
    font-size: clamp(2.35rem, 4vw, 3rem);
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-feature-list {
    align-content: start;
    gap: clamp(9px, 1.25vh, 13px);
    padding-top: 2px;
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-feature-list li {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    font-size: clamp(0.94rem, 1.22vw, 1rem);
    line-height: 1.28;
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-feature-icon,
  .onboarding-shell[data-onboarding-step="billing"] .billing-trial-check,
  .onboarding-shell[data-onboarding-step="billing"] .billing-secure-icon {
    width: 28px;
    height: 28px;
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-feature-icon svg,
  .onboarding-shell[data-onboarding-step="billing"] .billing-trial-check svg,
  .onboarding-shell[data-onboarding-step="billing"] .billing-secure-icon svg {
    width: 18px;
    height: 18px;
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-plan-trial-note {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding-top: clamp(10px, 1.4vh, 14px);
    font-size: clamp(0.9rem, 1.1vw, 0.98rem);
    line-height: 1.28;
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-subscribe-button {
    min-height: clamp(46px, 5vh, 52px);
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-secure-footer {
    font-size: clamp(0.88rem, 1vw, 0.96rem);
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-feedback {
    padding: 10px 13px;
    border-radius: 16px;
  }
  .onboarding-shell[data-onboarding-step="billing"] .onboarding-footer {
    position: absolute;
    top: clamp(18px, 2.2vh, 24px);
    right: clamp(22px, 3vw, 34px);
    margin: 0;
  }
}
@media (min-width: 900px) and (max-height: 850px) {
  .onboarding-shell[data-onboarding-step="account-details"] {
    padding-block: 14px;
  }
  .onboarding-shell[data-onboarding-step="account-details"] .onboarding-card {
    padding: 24px 30px;
  }
  .onboarding-shell[data-onboarding-step="account-details"] .onboarding-stepper {
    margin-top: 16px;
    margin-bottom: 12px;
  }
  .onboarding-shell[data-onboarding-step="account-details"] .onboarding-plan-chip {
    margin-bottom: 14px;
    padding-block: 10px;
  }
  .onboarding-shell[data-onboarding-step="account-details"] #onboarding-title {
    font-size: clamp(2.2rem, 4.2vw, 3.25rem);
  }
  .onboarding-shell[data-onboarding-step="account-details"] .onboarding-body {
    margin-top: 14px;
  }
  .onboarding-shell[data-onboarding-step="account-details"] .onboarding-input-shell {
    min-height: 48px;
  }
  .onboarding-shell[data-onboarding-step="account-details"] .onboarding-input-shell input {
    height: 46px;
  }
  .onboarding-shell[data-onboarding-step="account-details"] .onboarding-continue-button {
    min-height: 50px;
  }
  .onboarding-shell[data-onboarding-step="account-details"] .onboarding-footer {
    margin-top: 14px;
  }
  .onboarding-shell[data-onboarding-step="billing"] .onboarding-card {
    padding-block: 18px;
  }
  .onboarding-shell[data-onboarding-step="billing"] {
    padding-top: clamp(74px, 10vh, 92px);
    padding-bottom: 34px;
  }
  .onboarding-shell[data-onboarding-step="billing"] .onboarding-brand {
    margin-bottom: 8px;
  }
  .onboarding-shell[data-onboarding-step="billing"] .auth-brand-logo-shell {
    width: 40px;
    height: 40px;
  }
  .onboarding-shell[data-onboarding-step="billing"] .onboarding-hero h2 {
    font-size: clamp(2.12rem, 3.1vw, 2.62rem);
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-plan-card {
    gap: 10px;
    padding-block: 18px;
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-feature-list {
    gap: 8px;
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-plan-card h3 {
    font-size: clamp(1.85rem, 2.8vw, 2.25rem);
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-plan-price strong {
    font-size: clamp(2.15rem, 3.6vw, 2.65rem);
  }
  .onboarding-shell[data-onboarding-step="billing"] .billing-subscribe-button {
    min-height: 44px;
  }
}
@media (max-width: 760px) {
  body.onboarding-locked {
    overflow: hidden;
  }
  .onboarding-shell {
    place-items: start center;
    padding: 14px 14px calc(24px + env(safe-area-inset-bottom, 0));
  }
  .onboarding-card {
    padding: 22px 18px;
    border-radius: 24px;
  }
  .onboarding-stepper {
    width: 100%;
    margin-block: 18px 14px;
  }
  .onboarding-stepper li strong {
    font-size: 0.68rem;
  }
  .onboarding-plan-chip {
    align-items: flex-start;
  }
  .onboarding-shell[data-onboarding-step="account-details"] .onboarding-hero {
    text-align: left;
  }
  .onboarding-form-row {
    grid-template-columns: 1fr;
  }
  .onboarding-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 1040px) {
  .billing-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .account-sheet-shell {
    align-items: end;
    padding: 10px 10px 0;
  }
  .account-sheet {
    width: 100%;
    max-height: min(94dvh, 900px);
    margin: 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0));
    border-radius: 28px 28px 0 0;
  }
  .account-sheet-heading {
    align-items: flex-start;
  }
  .billing-sheet-shell {
    align-items: end;
    padding: 0;
  }
  .billing-sheet {
    width: 100%;
    max-height: min(92vh, 900px);
    margin: 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0));
    border-radius: 28px 28px 0 0;
  }
  .billing-sheet-heading{
    align-items: flex-start;
  }
  .billing-plan-grid {
    grid-template-columns: 1fr;
  }
  .billing-admin-managed-card,
  .billing-admin-managed-details {
    grid-template-columns: 1fr;
  }
  .billing-upgrade-prompt {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }
  .billing-upgrade-prompt-icon {
    width: 42px;
    height: 42px;
  }
  .billing-upgrade-cta {
    width: 100%;
  }
  .account-billing-badge{
    width: 100%;
  }
}
.account-delete-confirm {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  margin: 0 auto;
  padding: 24px;
  max-height: calc(var(--visual-viewport-height) - 40px);
  overflow: auto;
}
.account-delete-confirm-form {
  margin-top: 18px;
}
.form-feedback {
  margin: 0;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid rgba(13, 36, 56, 0.08);
}
.form-feedback.error {
  background: rgba(239, 124, 98, 0.14);
  color: #8d3f2f;
}
.danger-button {
  color: #fff;
  background: linear-gradient(135deg, #a64c3e, #7f3428);
  box-shadow: 0 12px 28px rgba(127, 52, 40, 0.2);
}
.access-card {
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(13, 36, 56, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 244, 236, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 18px 36px rgba(13, 36, 56, 0.04);
  min-height: 0;
  max-height: calc(var(--visual-viewport-height) - 230px);
  overflow-y: auto;
}
.access-card[hidden] {
  display: none;
}
.access-card-pending {
  display: grid;
  gap: 16px;
  align-content: start;
}
.access-card-invite {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.access-card-users {
  display: grid;
  gap: 14px;
}
.access-card .status-badge,
.access-card .priority-badge {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.82rem;
  padding: 6px 12px;
}
.access-card .card-title {
  color: var(--ink);
}
.access-card .card-meta {
  color: var(--ink-soft);
}
.access-subheading {
  margin-bottom: 16px;
}
.access-subheading h3 {
  margin: 0;
  font-family: var(--heading-font);
  font-size: 1.56rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.access-section-copy {
  margin: 0 0 20px;
  color: rgba(63, 85, 102, 0.88);
  max-width: 58ch;
}
.crew-detail-modal,
.crew-confirm-modal {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(251, 248, 242, 0.98), rgba(244, 239, 231, 0.98));
}
.crew-detail-modal {
  padding: 28px;
  display: grid;
  gap: 20px;
}
.crew-confirm-modal {
  padding: 28px;
  display: grid;
  gap: 16px;
  width: min(460px, 100%);
}
.crew-detail-heading {
  align-items: center;
}
.crew-detail-body {
  display: grid;
  gap: 20px;
}
.crew-detail-summary,
.crew-detail-card {
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 244, 236, 0.84));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.crew-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.crew-detail-card {
  display: grid;
  gap: 8px;
}
.crew-detail-card strong {
  color: var(--ink);
  font-size: 1rem;
}
.crew-detail-footer {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}
.crew-credential-section {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}
.crew-credential-section-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.crew-credential-section-topline h4 {
  margin: 6px 0 0;
  font-size: 1.05rem;
}
.crew-credential-section-topline .small-copy {
  margin: 8px 0 0;
  max-width: 58ch;
}
.crew-credential-list {
  display: grid;
  gap: 14px;
}
.crew-credential-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 244, 236, 0.84));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  display: grid;
  gap: 14px;
}
.crew-credential-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.crew-credential-topline h4 {
  margin: 6px 0 0;
  font-size: 1.02rem;
}
.crew-credential-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.crew-credential-document {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(13, 36, 56, 0.08);
}
.crew-credential-document strong {
  display: block;
  color: var(--ink);
}
.crew-credential-document .small-copy {
  margin: 6px 0 0;
}
.crew-credential-document-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.crew-credential-upload-button {
  cursor: pointer;
}
.crew-credential-empty {
  margin: 0;
}
.crew-remove-action {
  justify-self: start;
}
.crew-confirm-copy {
  margin: 0;
  max-width: 54ch;
}
.crew-detail-shell[data-crew-detail-mode="profile"] {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(12px, 2vw, 24px);
}
.crew-detail-shell[data-crew-detail-mode="profile"] .access-modal-backdrop {
  background: rgba(7, 24, 38, 0.5);
  backdrop-filter: blur(6px);
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-detail-modal {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  width: min(1440px, calc(100vw - 32px));
  height: min(940px, calc(var(--visual-viewport-height, 100dvh) - 32px));
  max-height: min(940px, calc(var(--visual-viewport-height, 100dvh) - 32px));
  overflow: hidden;
  padding: clamp(24px, 2.2vw, 34px);
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 26px;
  background:
    radial-gradient(circle at 8% 0%, rgba(30, 176, 188, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 252, 0.96));
  box-shadow: 0 34px 90px rgba(7, 24, 38, 0.28);
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-detail-heading {
  align-items: flex-start;
  gap: 16px;
  flex: 0 0 auto;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-detail-heading h2 {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  font-family: var(--app-heading-font, var(--heading-font));
  font-size: clamp(1.8rem, 2.8vw, 2.35rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.crew-detail-shell[data-crew-detail-mode="profile"] #close-crew-detail {
  margin-left: auto;
  min-width: 38px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(13, 36, 56, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-detail-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scroll-padding-bottom: 84px;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-layout {
  grid-template-columns: minmax(260px, 0.32fr) minmax(0, 1fr);
  gap: 22px;
}
.crew-profile-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.crew-profile-sidebar,
.crew-profile-main {
  min-width: 0;
  display: grid;
  gap: 14px;
}
.crew-profile-avatar-wrap {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 2px auto 6px;
}
.crew-profile-avatar {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(30, 176, 188, 0.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(135deg, rgba(8, 96, 124, 0.98), rgba(3, 39, 63, 0.98));
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: 900;
  box-shadow:
    0 18px 36px rgba(13, 127, 143, 0.2),
    0 0 0 8px rgba(221, 250, 251, 0.82);
}
.crew-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.crew-avatar-upload-button {
  position: absolute;
  right: 4px;
  bottom: 6px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: linear-gradient(180deg, #11bdc8, #087f91);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(8, 127, 145, 0.28);
}
.crew-avatar-upload-button svg {
  width: 19px;
  height: 19px;
}
.crew-avatar-upload-button.is-uploading {
  cursor: wait;
  pointer-events: none;
  opacity: 0.72;
}
.crew-avatar-upload-button.is-uploading svg {
  animation: crew-avatar-upload-spin 0.8s linear infinite;
}
@keyframes crew-avatar-upload-spin {
  to {
    transform: rotate(360deg);
  }
}
.crew-profile-side-card,
.crew-profile-section,
.crew-profile-stat-card {
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 14px 34px rgba(6, 35, 52, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.crew-profile-side-card {
  display: grid;
  gap: 9px;
  padding: 14px;
}
.crew-profile-side-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}
.crew-profile-skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.crew-profile-skill-list span {
  padding: 6px 9px;
  border: 1px solid rgba(9, 128, 145, 0.16);
  border-radius: 999px;
  background: rgba(230, 249, 252, 0.86);
  color: var(--teal-dark);
  font-size: 0.74rem;
  font-weight: 850;
}
.crew-profile-info-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid rgba(13, 36, 56, 0.06);
}
.crew-profile-info-row:last-child {
  border-bottom: 0;
}
.crew-profile-info-row small {
  color: rgba(71, 92, 108, 0.78);
  font-size: 0.72rem;
  font-weight: 850;
}
.crew-profile-info-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.8rem;
  text-align: right;
}
.crew-profile-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 4px 0;
}
.crew-profile-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.crew-profile-title-row h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--app-heading-font, var(--heading-font));
  font-size: clamp(1.72rem, 2.6vw, 2.28rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.crew-profile-hero p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-weight: 750;
}
.crew-profile-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.crew-profile-contact-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #31495c;
  font-size: 0.82rem;
  font-weight: 760;
}
.crew-profile-contact-row svg,
.crew-profile-actions svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crew-profile-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}
.crew-profile-actions > button,
.crew-profile-actions .action-overflow-trigger {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 40px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 0.86rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    0 8px 18px rgba(10, 31, 45, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
body:not(.auth-locked) .crew-profile-actions .primary-button {
  color: #fff;
  background: linear-gradient(180deg, #16bdc7, #087f91);
  border: 1px solid rgba(8, 127, 145, 0.18);
  box-shadow:
    0 12px 24px rgba(8, 127, 145, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
body:not(.auth-locked) .crew-profile-actions .primary-button:hover,
body:not(.auth-locked) .crew-profile-actions .primary-button:focus-visible {
  background: linear-gradient(180deg, #18cbd4, #07899b);
  box-shadow:
    0 16px 28px rgba(8, 127, 145, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.crew-profile-actions svg {
  width: 15px;
  height: 15px;
}
.crew-delete-button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 1em}
.crew-profile-actions .crew-delete-button,
.crew-detail-footer .crew-delete-button {
  color: #a8322a;
  border-color: rgba(190, 63, 52, 0.24);
  background: rgba(255, 246, 244, 0.94);
  box-shadow:
    0 8px 18px rgba(185, 74, 66, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.crew-delete-button svg{flex:none;width:16px;height:16px}
.crew-profile-actions .crew-delete-button:hover,
.crew-profile-actions .crew-delete-button:focus-visible,
.crew-detail-footer .crew-delete-button:hover,
.crew-detail-footer .crew-delete-button:focus-visible {
  color: #8d2a25;
  border-color: rgba(190, 63, 52, 0.38);
  background: rgba(255, 232, 229, 0.98);
  box-shadow:
    0 12px 24px rgba(185, 74, 66, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
.crew-profile-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.crew-profile-stat-card {
  min-height: 108px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 12px;
}
.crew-profile-stat-icon,
.crew-profile-row-icon,
.crew-achievement-badge > span,
.crew-profile-empty-card > span {
  display: grid;
  place-items: center;
  border: 1px solid rgba(30, 176, 188, 0.28);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.82), transparent 38%),
    linear-gradient(180deg, rgba(224, 251, 253, 0.98), rgba(199, 242, 247, 0.9));
  color: var(--teal-dark);
  box-shadow:
    0 12px 26px rgba(8, 127, 145, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.crew-profile-stat-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 5px;
  border-radius: 18px;
}
.crew-profile-stat-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crew-profile-stat-card strong {
  color: var(--ink);
  font-size: 1.55rem;
  line-height: 1;
}
.crew-profile-stat-card span:not(.crew-profile-stat-icon) {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 900;
}
.crew-profile-stat-card small {
  margin-top: 3px;
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 850;
}
.crew-profile-section {
  display: grid;
  gap: 10px;
  padding: 13px;
}
.crew-profile-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.crew-profile-section-heading h4 {
  margin: 3px 0 0;
  color: var(--ink);
  font-family: var(--app-font, var(--body-font));
  font-size: 1rem;
  font-weight: 900;
}
.crew-achievement-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(104px, 1fr));
  gap: 8px;
}
.crew-achievement-badge {
  min-height: 116px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  padding: 10px 9px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 14px;
  background: rgba(250, 252, 253, 0.9);
  text-align: center;
}
.crew-achievement-badge.is-unlocked {
  border-color: rgba(214, 151, 43, 0.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 205, 92, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.94);
}
.crew-achievement-badge > span {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  flex: 0 0 auto;
}
.crew-achievement-badge.is-unlocked > span {
  border-color: rgba(214, 151, 43, 0.28);
  background: linear-gradient(180deg, rgba(255, 242, 204, 0.96), rgba(255, 218, 134, 0.82));
  color: #8a5a07;
}
.crew-achievement-badge.is-locked {
  opacity: 0.82;
  background: rgba(247, 251, 252, 0.9);
}
.crew-achievement-badge.is-locked > span {
  border-color: rgba(91, 113, 130, 0.16);
  background: linear-gradient(180deg, rgba(241, 247, 249, 0.98), rgba(229, 239, 242, 0.92));
  color: rgba(71, 92, 108, 0.72);
}
.crew-achievement-badge svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crew-achievement-badge strong {
  display: -webkit-box;
  min-height: 2.4em;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.crew-achievement-badge small {
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
}
.crew-profile-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
  gap: 12px;
  align-items: start;
}
.crew-recent-work-list,
.crew-profile-document-list {
  display: grid;
  gap: 8px;
}
.crew-recent-work-row,
.crew-profile-document-row,
.crew-profile-empty-card {
  width: 100%;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(13, 36, 56, 0.07);
  border-radius: 14px;
  background: rgba(248, 252, 253, 0.9);
  color: inherit;
  text-align: left;
}
.crew-recent-work-row {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.crew-recent-work-row:hover,
.crew-recent-work-row:focus-visible {
  border-color: rgba(30, 176, 188, 0.24);
  background: rgba(236, 251, 252, 0.95);
  transform: translateY(-1px);
}
.crew-recent-work-thumb,
.crew-profile-row-icon,
.crew-profile-empty-card > span {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 16px;
}
.crew-recent-work-thumb {
  display: grid;
  place-items: center;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(221, 250, 251, 0.78);
  color: var(--teal-dark);
}
.crew-recent-work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.crew-recent-work-thumb svg,
.crew-profile-row-icon svg,
.crew-profile-empty-card svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crew-recent-work-copy,
.crew-profile-document-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.crew-recent-work-copy strong,
.crew-profile-document-copy strong,
.crew-profile-empty-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crew-recent-work-copy small,
.crew-recent-work-role,
.crew-recent-work-date,
.crew-profile-document-copy p,
.crew-profile-empty-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 760;
}
.crew-recent-work-role,
.crew-recent-work-date {
  white-space: nowrap;
}
.crew-profile-document-row {
  grid-template-columns: 50px minmax(0, 1fr);
}
.crew-profile-document-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.crew-profile-inline-link {
  width: fit-content;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: 0.74rem;
  font-weight: 900;
}
.crew-profile-empty-card {
  grid-template-columns: 50px minmax(0, 1fr);
}
.crew-profile-empty-card.is-document-empty {
  align-items: start;
  padding: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(30, 176, 188, 0.11), transparent 38%),
    rgba(248, 252, 253, 0.96);
}
.crew-profile-empty-action {
  width: fit-content;
  min-height: 36px;
  margin-top: 10px;
  padding-inline: 12px;
  border-radius: 12px;
  color: var(--teal-dark);
  font-weight: 900;
}
.crew-profile-empty-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-avatar-wrap {
  width: 128px;
  height: 128px;
  margin: 0 auto 2px;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-avatar {
  width: 128px;
  height: 128px;
  font-size: 2.25rem;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 0 2px 2px;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-title-row h3 {
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-contact-row {
  gap: 10px;
  margin-top: 10px;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-stat-card {
  min-height: 94px;
  padding: 10px;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-stat-icon svg {
  width: 22px;
  height: 22px;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-stat-card strong {
  font-size: 1.25rem;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-achievement-list {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-achievement-badge {
  min-height: 94px;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-bottom-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 14px;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-recent-work-row {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-recent-work-thumb,
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-row-icon,
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-empty-card > span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-recent-work-role,
.crew-detail-shell[data-crew-detail-mode="profile"] .crew-recent-work-date {
  display: none;
}
.crew-document-upload-shell {
  z-index: 42;
}
.crew-document-upload-modal {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: min(calc(var(--visual-viewport-height) - 32px), 860px);
  display: grid;
  gap: 16px;
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 0%, rgba(30, 176, 188, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 252, 0.98));
  box-shadow: 0 30px 76px rgba(7, 24, 38, 0.28);
}
.crew-document-upload-heading {
  align-items: flex-start;
}
.crew-document-upload-heading h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-family: var(--app-heading-font, var(--heading-font));
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}
.crew-document-upload-form {
  gap: 14px;
}
.crew-document-file-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px dashed rgba(8, 127, 145, 0.32);
  border-radius: 16px;
  background: rgba(230, 249, 252, 0.62);
}
.crew-document-file-field strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
}
.crew-document-file-field small {
  color: var(--ink-soft);
  font-weight: 760;
}
.crew-document-upload-feedback {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 850;
}
.crew-document-upload-feedback.error {
  border: 1px solid rgba(190, 63, 52, 0.18);
  background: rgba(255, 240, 237, 0.94);
  color: #913528;
}
.crew-document-upload-feedback.success {
  border: 1px solid rgba(36, 154, 106, 0.18);
  background: rgba(232, 250, 242, 0.94);
  color: #116845;
}
.crew-document-upload-actions {
  justify-content: flex-end;
}
.crew-document-upload-actions .primary-button {
  background: linear-gradient(180deg, #14bfc9, #087f91);
  box-shadow:
    0 14px 30px rgba(8, 127, 145, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
@media (max-width: 1040px) {
  .crew-profile-layout,
  .crew-profile-bottom-grid {
    grid-template-columns: 1fr;
  }
  .crew-profile-sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .crew-profile-avatar-wrap {
    grid-column: 1 / -1;
  }
  .crew-profile-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .crew-profile-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .crew-achievement-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    overflow-x: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
  .crew-achievement-badge {
    scroll-snap-align: start;
  }
}
@media (max-width: 760px) {
  .crew-detail-shell[data-crew-detail-mode="profile"] {
    align-items: stretch;
    padding: 0;
  }
  .crew-detail-shell[data-crew-detail-mode="profile"] .crew-detail-modal {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: var(--mobile-visual-height, 100dvh);
    max-height: var(--mobile-visual-height, 100dvh);
    min-height: var(--mobile-visual-height, 100dvh);
    overflow-x: hidden;
    border-radius: 0;
    border-inline: 0;
    padding: max(14px, env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  }
  .crew-detail-shell[data-crew-detail-mode="profile"] .crew-detail-heading {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: -14px -14px 0;
    padding: max(12px, env(safe-area-inset-top)) 14px 8px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
  }
  .crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-layout,
  .crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-hero,
  .crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-bottom-grid {
    grid-template-columns: 1fr;
  }
  .crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-actions {
    justify-content: center;
  }
  .crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-sidebar {
    display: contents;
  }
  .crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-avatar-wrap {
    order: 1;
  }
  .crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-main {
    order: 2;
  }
  .crew-detail-shell[data-crew-detail-mode="profile"] .crew-profile-side-card {
    order: 3;
  }
  .crew-profile-sidebar {
    grid-template-columns: 1fr;
  }
  .crew-profile-avatar-wrap {
    margin-top: 8px;
  }
  .crew-profile-hero {
    display: grid;
    text-align: center;
  }
  .crew-profile-title-row,
  .crew-profile-contact-row,
  .crew-profile-actions {
    justify-content: center;
  }
  .crew-profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 380px);
    margin-inline: auto;
    gap: 8px;
  }
  .crew-profile-actions > button,
  .crew-profile-actions .action-overflow-trigger {
    width: 100%;
    min-height: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 0.82rem;
  }
  .crew-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
  .crew-profile-stat-card {
    min-width: 0;
    min-height: 92px;
    padding: 10px;
    scroll-snap-align: start;
  }
  .crew-profile-stat-icon {
    width: 40px;
    height: 40px;
  }
  .crew-profile-stat-card strong {
    font-size: 1.2rem;
  }
  .crew-recent-work-row {
    grid-template-columns: 50px minmax(0, 1fr) auto;
  }
  .crew-recent-work-role,
  .crew-recent-work-date {
    display: none;
  }
  .crew-document-upload-shell {
    align-items: stretch;
    padding: 0;
  }
  .crew-document-upload-modal {
    width: 100%;
    max-height: var(--mobile-visual-height, 100dvh);
    min-height: var(--mobile-visual-height, 100dvh);
    border-radius: 0;
    border-inline: 0;
    padding: max(14px, env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  }
  .crew-document-upload-heading {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: calc(-1 * max(14px, env(safe-area-inset-top))) -14px 0;
    padding: max(14px, env(safe-area-inset-top)) 14px 10px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
  }
  .crew-document-upload-form .form-row {
    grid-template-columns: 1fr;
  }
  .crew-document-upload-actions {
    position: sticky;
    bottom: calc(-1 * env(safe-area-inset-bottom));
    margin: 0 -14px calc(-1 * (16px + env(safe-area-inset-bottom)));
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
  }
}
.crew-detail-shell[data-crew-detail-mode="edit"] {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(16px, 3vw, 32px);
}
.crew-detail-shell[data-crew-detail-mode="edit"] .access-modal-backdrop {
  background: rgba(7, 24, 38, 0.5);
  backdrop-filter: blur(6px);
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 22px;
  width: min(920px, calc(100vw - 48px));
  max-height: min(900px, calc(var(--visual-viewport-height, 100dvh) - 48px));
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 26px;
  background:
    radial-gradient(circle at 9% 0%, rgba(30, 176, 188, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 252, 0.98));
  box-shadow: 0 34px 90px rgba(7, 24, 38, 0.28);
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-heading {
  align-items: flex-start;
  gap: 16px;
  flex: 0 0 auto;
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-heading h2 {
  font-family: var(--app-heading-font, var(--heading-font));
  font-size: clamp(1.8rem, 2.8vw, 2.35rem);
  letter-spacing: -0.03em;
}
.crew-detail-shell[data-crew-detail-mode="edit"] #close-crew-detail {
  margin-left: auto;
  min-width: 38px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(13, 36, 56, 0.12);
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scroll-padding-bottom: 96px;
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.crew-editor-section,
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-form > .form-row,
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-form > label,
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-credential-section {
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 14px 34px rgba(6, 35, 52, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.crew-editor-section {
  display: grid;
  gap: 12px;
}
.crew-editor-section-heading {
  display: grid;
  gap: 4px;
}
.crew-editor-section-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
}
.crew-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.crew-editor-fields-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.crew-editor-fields-essential {
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(150px, 0.95fr));
}
.crew-editor-fields-optional {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.crew-editor-section-essential,
.crew-editor-disclosure,
.crew-editor-section-documents,
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-actions {
  grid-column: 1 / -1;
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-editor-disclosure {
  display: block;
  padding: 0;
  overflow: hidden;
}
.crew-editor-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
}
.crew-editor-disclosure summary::-webkit-details-marker {
  display: none;
}
.crew-editor-disclosure summary span {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 900;
}
.crew-editor-disclosure summary small {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: right;
}
.crew-editor-disclosure summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(16, 128, 145, 0.14);
  background: rgba(232, 249, 251, 0.9);
  color: var(--teal-dark);
  font-weight: 950;
}
.crew-editor-disclosure[open] summary::after {
  content: "-";
}
.crew-editor-disclosure-body {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
  border-top: 1px solid rgba(13, 36, 56, 0.07);
}
.crew-editor-disclosure:not([open]) .crew-editor-disclosure-body {
  display: none;
}
.crew-editor-disclosure-body-documents {
  padding-top: 14px;
}
.crew-editor-photo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(243, 249, 251, 0.78);
}
.crew-editor-photo-row .crew-profile-avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  font-size: 1.45rem;
}
.crew-editor-photo-action {
  min-height: 40px;
  border-radius: 999px;
  color: var(--teal-dark);
  font-weight: 900;
  cursor: pointer;
}
.crew-editor-photo-row small {
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 800;
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-form > .form-row,
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-form > label,
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-editor-section,
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-credential-section {
  padding: 16px;
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-form > .form-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-form > label {
  display: grid;
  gap: 8px;
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-form input,
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-form select,
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-form textarea {
  border-radius: 12px;
  border-color: rgba(13, 36, 56, 0.12);
  background: rgba(252, 254, 255, 0.96);
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-credential-section {
  gap: 12px;
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-credential-section-topline {
  align-items: center;
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-credential-section-topline h4 {
  margin-top: 3px;
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-credential-list {
  gap: 8px;
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-credential-card {
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(248, 252, 253, 0.92);
  box-shadow: none;
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-credential-card .form-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-credential-document {
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 -2px;
  padding: 12px 2px 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(247, 251, 252, 0.98) 34%);
}
.crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-actions .primary-button {
  background: linear-gradient(180deg, #14bfc9, #087f91);
  box-shadow: 0 14px 30px rgba(8, 127, 145, 0.2);
}
@media (max-width: 900px) {
  .crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-form,
  .crew-editor-fields,
  .crew-editor-fields-three,
  .crew-editor-fields-essential,
  .crew-editor-fields-optional {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .crew-detail-shell[data-crew-detail-mode="edit"] {
    align-items: stretch;
    padding: 0;
  }
  .crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-modal {
    width: 100%;
    max-height: var(--mobile-visual-height, 100dvh);
    min-height: var(--mobile-visual-height, 100dvh);
    border-radius: 0;
    border-inline: 0;
    padding: max(14px, env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  }
  .crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-heading {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: calc(-1 * max(14px, env(safe-area-inset-top))) -14px 0;
    padding: max(14px, env(safe-area-inset-top)) 14px 10px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
  }
  .crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-form,
  .crew-editor-fields,
  .crew-editor-fields-three,
  .crew-editor-fields-essential,
  .crew-editor-fields-optional,
  .crew-detail-shell[data-crew-detail-mode="edit"] .crew-credential-card .form-row {
    grid-template-columns: 1fr;
  }
  .crew-editor-disclosure summary {
    align-items: flex-start;
  }
  .crew-editor-disclosure summary small {
    text-align: left;
  }
  .crew-detail-shell[data-crew-detail-mode="edit"] .crew-detail-actions {
    bottom: calc(-1 * env(safe-area-inset-bottom));
    margin: 0 -14px calc(-1 * (16px + env(safe-area-inset-bottom)));
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
  }
}
.crew-confirm-actions {
  justify-content: flex-end;
}
.crew-confirm-button {
  border: 1px solid rgba(198, 94, 70, 0.18);
  background: linear-gradient(180deg, rgba(247, 192, 176, 0.9), rgba(239, 124, 98, 0.88));
  color: #6e2e23;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--button-shadow);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.crew-confirm-button:hover {
  transform: none;
  filter: saturate(1.02);
  box-shadow: var(--button-shadow-hover);
}
.crew-confirm-button:active {
  transform: none;
  box-shadow: var(--button-shadow-active);
}
.crew-confirm-button:focus-visible {
  outline: 2px solid rgba(198, 94, 70, 0.36);
  outline-offset: 2px;
}
.invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 22px;
  align-items: start;
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
  padding-right: 0;
  align-content: start;
}
.invite-email-field input {
  min-height: 56px;
  font-size: 1rem;
}
.invite-email-field,
.invite-role-selection {
  grid-column: 1;
}
.invite-review-panel {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: sticky;
  top: 0;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 16px 30px rgba(13, 36, 56, 0.04);
}
.invite-role-select-native {
  display: none;
}
.field-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea);
}
.invite-role-selection {
  display: grid;
  gap: 12px;
}
.invite-role-selection-copy {
  display: grid;
  gap: 6px;
}
.invite-role-selection-copy .small-copy {
  margin: 0;
}
.invite-role-summary-card {
  display: grid;
  gap: 8px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(13, 36, 56, 0.08);
}
.invite-role-summary-card h4 {
  margin: 0;
  font-size: 1.18rem;
  font-family: var(--heading-font);
  color: var(--ink);
}
.invite-role-summary-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.invite-role-summary-topline .small-copy,
.invite-role-summary-card .small-copy {
  margin: 0;
}
.invite-role-summary-meta {
  color: var(--ink-soft);
}
.invite-vessel-mode-picker {
  display: grid;
  gap: 8px;
}
.invite-vessel-mode-grid {
  display: grid;
  gap: 8px;
}
.invite-vessel-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(244, 248, 251, 0.62);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.invite-vessel-mode-card:hover {
  border-color: rgba(13, 101, 156, 0.24);
  background: rgba(235, 243, 248, 0.94);
}
.invite-vessel-mode-card.checked {
  border-color: rgba(13, 101, 156, 0.28);
  background: rgba(219, 238, 247, 0.76);
  box-shadow: inset 0 0 0 1px rgba(13, 101, 156, 0.08);
}
.invite-vessel-mode-card input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}
.invite-vessel-mode-card span {
  display: grid;
  gap: 3px;
}
.invite-vessel-mode-card strong {
  color: var(--ink);
  font-size: 0.94rem;
}
.invite-vessel-mode-card small {
  color: var(--ink-soft);
  line-height: 1.38;
}
.invite-custom-access-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(248, 252, 255, 0.74);
  color: var(--ink);
  font-weight: 700;
}
.invite-custom-access-panel > div {
  min-width: 0;
}
.invite-custom-access-panel span,
.invite-custom-access-panel small {
  display: block;
}
.invite-custom-access-panel small {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 500;
}
.invite-permission-intro .small-copy {
  margin: 0 0 10px;
}
.invite-permission-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-height: min(46vh, 440px);
  overflow: auto;
  border: 1px solid #e5eef2;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  scrollbar-gutter: stable;
}
.invite-permission-row {
  --permission-row-bg: #ffffff;
  position: relative;
  display: grid;
  grid-template-columns: minmax(132px, 1.45fr) repeat(9, minmax(66px, 0.8fr));
  align-items: stretch;
  min-width: 860px;
  border-bottom: 1px solid #e5eef2;
  background: var(--permission-row-bg);
  transition: background 140ms ease;
}
.invite-permission-row:last-child {
  border-bottom: 0;
}
.invite-permission-module-row:nth-child(odd) {
  --permission-row-bg: #f8fbfc;
}
.invite-permission-module-row:nth-child(even) {
  --permission-row-bg: #ffffff;
}
.invite-permission-module-row:has(.invite-permission-chip.checked) {
  --permission-row-bg: #f0fbfc;
}
.invite-permission-module-row:hover,
.invite-permission-module-row:focus-within {
  --permission-row-bg: #eaf7fa;
}
.invite-permission-header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f4f8fa;
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 #e5eef2, 0 10px 20px rgba(13, 36, 56, 0.04);
}
.invite-permission-module-heading,
.invite-permission-column-heading {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 7px 9px;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.invite-permission-module-heading {
  position: sticky;
  left: 0;
  z-index: 5;
  background: linear-gradient(90deg, #f4f8fa 78%, rgba(244, 248, 250, 0.88));
}
.invite-permission-column-heading {
  justify-content: center;
  text-align: center;
  border-left: 1px solid #e5eef2;
}
.invite-permission-module-name {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-right: 1px solid #e5eef2;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.46) 76%, rgba(255, 255, 255, 0) 100%),
    var(--permission-row-bg);
}
.invite-permission-module-name strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invite-permission-cell {
  min-width: 0;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  border-left: 1px solid #e5eef2;
  background: rgba(255, 255, 255, 0.36);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
}
.invite-permission-cell-empty {
  background: rgba(241, 246, 248, 0.74);
  color: rgba(89, 112, 130, 0.36);
  font-weight: 800;
}
.invite-permission-chip {
  box-shadow: inset 0 0 0 1px rgba(229, 238, 242, 0.72);
  cursor: pointer;
  transition: box-shadow 140ms ease, background 140ms ease, color 140ms ease;
}
.invite-permission-chip:hover {
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 0 0 1px rgba(32, 178, 190, 0.32);
}
.invite-permission-chip.checked {
  background: rgba(32, 178, 190, 0.14);
  box-shadow: inset 0 0 0 1px rgba(20, 160, 175, 0.32);
  color: #0d6070;
}
.invite-permission-chip.disabled {
  background: rgba(241, 246, 248, 0.74);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.72;
}
.invite-permission-chip input {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin: 0;
  appearance: none;
  display: inline-grid;
  place-content: center;
  border: 1.4px solid rgba(13, 36, 56, 0.24);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  accent-color: var(--teal);
}
.invite-permission-chip input:checked {
  border-color: #139aa7;
  background-color: #139aa7;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.2 5 8.1 9.2 3.8' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px 11px;
}
.invite-permission-chip input:focus-visible {
  outline: 2px solid rgba(20, 160, 175, 0.28);
  outline-offset: 2px;
}
.invite-permission-chip:focus-within {
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(20, 160, 175, 0.42), 0 0 0 3px rgba(20, 160, 175, 0.14);
}
.invite-permission-chip.disabled input {
  border-color: rgba(13, 36, 56, 0.14);
  background-color: rgba(240, 244, 247, 0.84);
}
.invite-permission-label {
  display: none;
}
.invite-permission-mobile-copy {
  display: none;
}
.invite-permission-chip small {
  display: none;
  max-width: 100%;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.25;
}
.invite-access-summary-card {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(13, 101, 156, 0.14);
  background: linear-gradient(180deg, rgba(219, 238, 247, 0.72), rgba(255, 255, 255, 0.72));
}
.invite-access-summary-card .small-copy,
.invite-access-summary-card p {
  margin: 0;
}
.invite-access-summary-card strong {
  color: var(--ink);
}
.invite-access-summary-card p:not(.small-copy) {
  color: var(--ink-soft);
  line-height: 1.45;
}
.invite-review-panel > .form-actions {
  position: sticky;
  bottom: 0;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(13, 36, 56, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.86) 38%);
}
.invite-review-panel > .form-actions .primary-button {
  width: 100%;
  min-height: 54px;
}
.expense-attachment-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.expense-attachment-preview-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.75);
}
.expense-attachment-preview-card img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(13, 36, 56, 0.08);
}
.expense-attachment-copy {
  display: grid;
  gap: 4px;
}
.expense-attachment-file-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 16px;
  border-radius: 14px;
  border: 1px dashed rgba(13, 36, 56, 0.18);
  background: rgba(223, 237, 248, 0.58);
  color: var(--ink);
  font-weight: 700;
}
.invite-preview {
  display: grid;
  gap: 12px;
  margin-top: 2px;
}
.invite-preview-card,
.invite-card {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}
.invite-card-latest {
  border-color: rgba(13, 101, 156, 0.18);
  box-shadow: 0 12px 24px rgba(13, 36, 56, 0.08);
}
.invite-delivery-card.is-ready {
  background: rgba(76, 183, 165, 0.12);
  border-color: rgba(76, 183, 165, 0.22);
}
.invite-delivery-card.is-pending {
  background: rgba(13, 36, 56, 0.05);
}
.invite-list {
  display: grid;
  gap: 14px;
  margin-top: 0;
  max-height: min(44vh, 360px);
  overflow-y: auto;
  padding-right: 6px;
}
.invite-fallback-copy {
  margin: 12px 0 0;
}
.invite-link-field {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(13, 36, 56, 0.12);
  background: rgba(13, 36, 56, 0.05);
  color: var(--ink-soft);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.96), rgba(248, 244, 236, 0.92));
  box-shadow:
    0 18px 40px rgba(6, 35, 52, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px);
  transition: box-shadow var(--transition-soft), border-color var(--transition-fast), background var(--transition-fast);
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 36%);
}
.hero,
.section-block,
.metric-card,
.maintenance-card,
.charter-card,
.voyage-card,
.alert-card{
  animation: rise 0.7s ease both;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 20px;
  padding: 26px 28px;
  margin-bottom: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(7, 44, 65, 0.96), rgba(14, 92, 122, 0.82)),
    var(--panel);
  color: #f6f9fb;
}
.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 680px;
}


.command-header-metrics .metric-card {
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(13, 36, 56, 0.08);
  box-shadow: var(--shadow-xs);
}
.command-header-metrics .metric-card.light {
  background: rgba(239, 246, 249, 0.94);
}
.hero h1,
.section-heading h2{
  margin: 0;
  font-family: var(--heading-font);
  font-weight: 700;
  letter-spacing: -0.018em;
}
.hero h1 {
  font-size: clamp(2.25rem, 3.8vw, 3.95rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-top: 8px;
}
.eyebrow {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(246, 249, 251, 0.8);
}
.section-heading .eyebrow {
  color: var(--sea);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.primary-button,
.ghost-button,
button,
select,
input,
textarea {
  font: inherit;
}
.primary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-soft),
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}
.primary-button {
  border: none;
  color: #062332;
  background: linear-gradient(135deg, #f7d18d, var(--sun));
  box-shadow: var(--button-primary-shadow);
  cursor: pointer;
}
.ghost-button {
  color: var(--ink);
  border: 1px solid rgba(13, 36, 56, 0.14);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--button-shadow);
}
.hero .ghost-button,
.boot-splash .ghost-button {
  color: #f6f9fb;
  border-color: rgba(246, 249, 251, 0.35);
  background: rgba(255, 255, 255, 0.1);
}
.primary-button:hover {
  transform: none;
  box-shadow: var(--button-primary-shadow-hover);
}
.ghost-button:hover {
  transform: none;
  border-color: rgba(13, 36, 56, 0.16);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--button-shadow-hover);
}
.primary-button:active {
  transform: none;
  box-shadow: var(--button-primary-shadow);
}
.ghost-button:active {
  transform: none;
  box-shadow: var(--button-shadow-active);
}
.workspace-nav .workspace-tab:hover,
.workspace-nav .workspace-tab:active,
.workspace-nav .workspace-tab.active:hover,
.workspace-nav .workspace-tab.active:active,
.access-modal-nav .access-modal-nav-button:hover,
.access-modal-nav .access-modal-nav-button:active,
.access-modal-nav .access-modal-nav-button.active:hover,
.access-modal-nav .access-modal-nav-button.active:active {
  transform: none;
}
.summary-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  position: relative;
  z-index: 1;
}
.metric-card {
  padding: var(--space-card);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.metric-card.light {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 244, 248, 0.84));
  color: var(--ink);
  border-color: rgba(13, 36, 56, 0.08);
  box-shadow: var(--shadow-xs);
}
.metric-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(13, 36, 56, 0.78);
  font-weight: 700;
}
.metric-value {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.metric-value-tight {
  font-size: clamp(1.15rem, 2vw, 1.7rem);
}
.workspace-shell {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  overflow: hidden;
}
.workspace-scroll-area {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 2px 2px 12px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 122, 165, 0.58) rgba(255, 252, 246, 0.52);
}
.workspace-scroll-area::-webkit-scrollbar,
.access-card::-webkit-scrollbar,
.access-modal::-webkit-scrollbar,
.vendor-modal::-webkit-scrollbar,
.inventory-modal::-webkit-scrollbar,
.account-sheet::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.workspace-scroll-area::-webkit-scrollbar-track,
.access-card::-webkit-scrollbar-track,
.access-modal::-webkit-scrollbar-track,
.vendor-modal::-webkit-scrollbar-track,
.inventory-modal::-webkit-scrollbar-track,
.account-sheet::-webkit-scrollbar-track {
  margin: 10px 0;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.52);
  border: 1px solid rgba(13, 36, 56, 0.06);
}
.workspace-scroll-area::-webkit-scrollbar-thumb,
.access-card::-webkit-scrollbar-thumb,
.access-modal::-webkit-scrollbar-thumb,
.vendor-modal::-webkit-scrollbar-thumb,
.inventory-modal::-webkit-scrollbar-thumb,
.account-sheet::-webkit-scrollbar-thumb {
  min-height: 70px;
  border: 3px solid rgba(255, 252, 246, 0.9);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(14, 122, 165, 0.78), rgba(76, 183, 165, 0.68));
}
.workspace-scroll-area::-webkit-scrollbar-thumb:hover,
.access-card::-webkit-scrollbar-thumb:hover,
.access-modal::-webkit-scrollbar-thumb:hover,
.vendor-modal::-webkit-scrollbar-thumb:hover,
.inventory-modal::-webkit-scrollbar-thumb:hover,
.account-sheet::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(9, 66, 94, 0.84), rgba(14, 122, 165, 0.76));
}
.workspace-scroll-area::-webkit-scrollbar-button,
.access-card::-webkit-scrollbar-button,
.access-modal::-webkit-scrollbar-button,
.vendor-modal::-webkit-scrollbar-button,
.inventory-modal::-webkit-scrollbar-button,
.account-sheet::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.content-area {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}
body:not([data-active-view="overview"]):not([data-active-view="vessel"]) .workspace-scroll-area > .command-header,
body:not([data-active-view="overview"]):not([data-active-view="vessel"]) #spotlight-panel {
  display: none !important;
}
body[data-global-spotlight="hidden"] .workspace-scroll-area > .command-header,
body[data-global-spotlight="hidden"] #spotlight-panel {
  display: none !important;
}
.workspace-nav {
  position: sticky;
  top: 0;
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(252, 249, 243, 0.98), rgba(247, 242, 234, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(18px);
  overflow: visible;
}
.workspace-nav::after {
  display: none;
}
.workspace-nav-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.workspace-header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.workspace-header-actions .workspace-mobile-alert {
  display: none;
}
.workspace,
.view-stack,
.view-panel {
  min-width: 0;
}
.workspace-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 6px 0 0;
}
.workspace-brand-logo-shell {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(9, 66, 94, 0.14);
}
.workspace-brand-logo {
  --brand-logo-scale: 1.04;
}
.workspace-brand-lockup .brand-name {
  color: var(--ink);
  font-size: 1.22rem;
}
.workspace-brand-lockup .brand-subtitle {
  color: var(--sea);
}
.workspace-account-shell {
  position: relative;
  justify-self: end;
  z-index: 30;
}
.workspace-global-header {
  display: none;
}
.workspace-account-button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
.workspace-account-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sea-deep), var(--sea));
  color: #f6f9fb;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.workspace-account-avatar img,
.crew-directory-avatar img,
.crew-assignment-avatar img,
.work-order-thread-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}
.workspace-account-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}
.workspace-account-copy strong {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-account-role {
  display: block;
  color: rgba(231, 243, 248, 0.72);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.1;
}
.workspace-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 28px));
  padding: 14px;
  border-radius: 24px;
  z-index: 40;
  max-height: min(420px, calc(100dvh - 116px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.workspace-account-menu-summary {
  padding: 4px 4px 12px;
  border-bottom: 1px solid rgba(13, 36, 56, 0.08);
}
.workspace-account-menu-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.workspace-account-menu-summary strong,
.workspace-account-menu-summary span {
  display: block;
}
.workspace-account-menu-summary .workspace-account-menu-name,
.workspace-account-menu-summary .platform-admin-badge {
  display: inline-flex;
}
.workspace-account-menu-summary strong {
  font-size: 1rem;
  color: var(--ink);
}
.workspace-account-menu-summary span {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.platform-admin-badge {
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(6, 119, 158, 0.1);
  color: var(--sea-deep);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.workspace-account-menu-actions {
  display: grid;
  gap: 6px;
  padding-top: 12px;
}
.workspace-account-menu-item {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}
.workspace-account-menu-item-admin {
  border-color: rgba(6, 119, 158, 0.16);
  background: linear-gradient(135deg, rgba(231, 248, 255, 0.92), rgba(255, 255, 255, 0.86));
  color: var(--sea-deep);
}
.workspace-account-menu-item-danger {
  color: #8e3f33;
}
.workspace-tab-row {
  --workspace-tab-height: 46px;
  --workspace-tab-icon-size: 28px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 1px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.workspace-tab-row::-webkit-scrollbar {
  display: none;
}
.workspace-mobile-shell {
  display: none;
}
.workspace-mobile-shell-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}
.workspace-mobile-current {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 14px 0 10px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.workspace-mobile-current-icon,
.mobile-shell-nav-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 36, 56, 0.06);
  color: currentColor;
  flex: 0 0 auto;
}
.workspace-mobile-current-icon svg,
.mobile-shell-nav-item-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.workspace-mobile-current-copy,
.workspace-mobile-context-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  text-align: left;
}
.workspace-mobile-current-copy strong,
.mobile-shell-nav-item-copy strong {
  font-size: 0.98rem;
  color: var(--ink);
}
.workspace-mobile-more-button {
  min-height: 54px;
  padding-inline: 16px;
  white-space: nowrap;
}
.workspace-mobile-alert {
  position: relative;
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  color: #074d5f;
  border: 1px solid rgba(23, 158, 174, 0.18);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(232, 249, 251, 0.76));
  box-shadow: 0 14px 34px rgba(7, 55, 68, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}
.workspace-mobile-alert svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
}
.workspace-mobile-alert i {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  color: #ffffff;
  border-radius: 999px;
  background: linear-gradient(135deg, #2be4d8, #0793a5);
  box-shadow: 0 8px 18px rgba(7, 147, 165, 0.24);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
}
.workspace-mobile-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  padding: 18px 18px 0;
}
.workspace-mobile-context-copy h2 {
  margin: 0;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.workspace-mobile-context-copy .small-copy {
  margin: 0;
  color: var(--ink-soft);
}
.workspace-mobile-primary-action {
  justify-self: end;
  min-height: 50px;
  white-space: nowrap;
}
.mobile-bottom-nav {
  display: none;
}
.mobile-bottom-nav *,
.mobile-bottom-nav *::before,
.mobile-bottom-nav *::after {
  box-sizing: border-box;
}
.mobile-shell-sheet {
  position: fixed;
  inset: 0;
  z-index: 22;
}
.mobile-shell-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 21, 32, 0.42);
  backdrop-filter: blur(10px);
}
.mobile-shell-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 14px;
  max-height: min(86dvh, 720px);
  overflow: hidden;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0));
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.99), rgba(246, 241, 233, 0.98));
  box-shadow: 0 -20px 40px rgba(7, 21, 32, 0.16);
}
.mobile-shell-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
  position: relative;
}
.mobile-shell-sheet-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 48px;
  height: 5px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(13, 36, 56, 0.16);
}
.mobile-shell-sheet-header h2 {
  margin: 4px 0 0;
  font-size: 1.45rem;
}
.mobile-shell-sheet-list {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mobile-shell-sheet-list::-webkit-scrollbar {
  display: none;
}
.mobile-record-sheet-panel {
  max-height: min(84dvh, 760px);
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
}
.mobile-record-sheet-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding-right: 2px;
  scroll-padding-bottom: 110px;
  -webkit-overflow-scrolling: touch;
}
.mobile-record-hero,
.mobile-record-section,
.mobile-record-fact {
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 14px 28px rgba(7, 21, 32, 0.06);
}
.mobile-record-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 22px;
}
.mobile-record-hero-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(222, 242, 255, 0.92), rgba(232, 247, 244, 0.9));
  color: var(--sea);
}
.mobile-record-hero-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobile-record-hero-copy {
  min-width: 0;
}
.mobile-record-hero-copy h3 {
  margin: 2px 0 4px;
  font-family: var(--heading-font);
  font-size: 1.55rem;
  line-height: 1.05;
  color: var(--ink);
}
.mobile-record-hero-copy p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.42;
}
.mobile-record-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.mobile-record-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.07);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mobile-record-chip.success,
.mobile-record-chip.is-good {
  background: rgba(76, 183, 165, 0.17);
  color: #087464;
}
.mobile-record-chip.warning,
.mobile-record-chip.high,
.mobile-record-chip.is-danger,
.mobile-record-chip.priority-high {
  background: rgba(239, 124, 98, 0.16);
  color: #a54837;
}
.mobile-record-chip.info,
.mobile-record-chip.medium,
.mobile-record-chip.priority-medium,
.mobile-record-chip.is-warn {
  background: rgba(86, 177, 219, 0.18);
  color: #0a6b91;
}
.mobile-record-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mobile-record-fact {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 18px;
}
.mobile-record-fact span {
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mobile-record-fact strong {
  min-width: 0;
  color: var(--ink);
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.mobile-record-section {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 20px;
}
.mobile-record-section-content p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.45;
}
.mobile-record-section .work-order-photo-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mobile-record-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(246, 241, 233, 0), rgba(246, 241, 233, 0.98) 28%);
}
.mobile-record-action {
  min-width: 0;
  min-height: 46px;
  padding-inline: 10px;
  white-space: nowrap;
}
.mobile-record-action[aria-busy="true"] {
  cursor: wait;
  opacity: 0.72;
}
.mobile-record-action.danger {
  color: #a54837;
}
@media (max-width: 760px) {
  .maintenance-section-card[data-maintenance-card-id],
  .maintenance-row[data-maintenance-card-id],
  .weekly-log-row[data-report-entry-id] {
    cursor: pointer;
  }
  .mobile-record-action-bar {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  }
}
.mobile-shell-nav-summary {
  display: grid;
  gap: 6px;
  padding: 16px 16px 14px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: linear-gradient(135deg, rgba(9, 66, 94, 0.96), rgba(14, 122, 165, 0.9));
  box-shadow: 0 18px 34px rgba(7, 21, 32, 0.12);
}
.mobile-shell-nav-summary-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mobile-shell-nav-summary .metric-label,
.mobile-shell-nav-summary strong,
.mobile-shell-nav-summary span:not(.status-badge) {
  color: #fff;
}
.mobile-shell-nav-summary strong {
  font-size: 1.02rem;
  line-height: 1.2;
}
.mobile-shell-nav-summary span:not(.status-badge) {
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 0.86;
}
.mobile-shell-nav-item,
.mobile-shell-action-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.84);
  text-align: left;
  box-shadow: var(--shadow-xs);
}
.mobile-shell-nav-item.mobile-more-row {
  min-height: 68px;
  padding: 12px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 10px 24px rgba(7, 21, 32, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
.mobile-shell-nav-item.mobile-more-row:hover,
.mobile-shell-nav-item.mobile-more-row:focus-visible {
  background: rgba(255, 255, 255, 0.96);
  outline: none;
}
.mobile-shell-nav-item.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--sea-deep), var(--sea));
  color: #fff;
}
.mobile-shell-nav-item.active .mobile-shell-nav-item-icon {
  background: rgba(255, 255, 255, 0.14);
}
.mobile-shell-nav-item.active .mobile-shell-nav-item-copy strong,
.mobile-shell-nav-item.active .mobile-shell-nav-item-copy span,
.mobile-shell-nav-item.active .mobile-shell-nav-item-chevron {
  color: #fff;
}
.mobile-shell-nav-item.active .mobile-shell-nav-item-chevron {
  background: rgba(255, 255, 255, 0.14);
}
.mobile-shell-nav-item.locked {
  color: rgba(227, 247, 250, 0.8);
  border-color: rgba(72, 220, 224, 0.22);
  background:
    linear-gradient(135deg, rgba(10, 48, 63, 0.56), rgba(3, 17, 29, 0.5)),
    rgba(4, 20, 33, 0.52);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.mobile-shell-nav-item.mobile-more-row.locked:hover,
.mobile-shell-nav-item.mobile-more-row.locked:focus-visible {
  color: #f2feff;
  border-color: rgba(93, 239, 234, 0.38);
  background:
    linear-gradient(135deg, rgba(13, 74, 88, 0.64), rgba(5, 25, 39, 0.58)),
    rgba(7, 35, 48, 0.58);
}
.mobile-shell-nav-item[data-mobile-nav-tone="vessel"] .mobile-shell-nav-item-icon {
  background: rgba(14, 122, 165, 0.12);
  color: var(--sea-deep);
}
.mobile-shell-nav-item[data-mobile-nav-tone="work-orders"] .mobile-shell-nav-item-icon,
.mobile-shell-nav-item[data-mobile-nav-tone="maintenance"] .mobile-shell-nav-item-icon {
  background: rgba(239, 177, 90, 0.16);
  color: #8a5916;
}
.mobile-shell-nav-item[data-mobile-nav-tone="crew"] .mobile-shell-nav-item-icon,
.mobile-shell-nav-item[data-mobile-nav-tone="vendors"] .mobile-shell-nav-item-icon {
  background: rgba(76, 183, 165, 0.16);
  color: #0d6257;
}
.mobile-shell-nav-item[data-mobile-nav-tone="reports"] .mobile-shell-nav-item-icon,
.mobile-shell-nav-item[data-mobile-nav-tone="inventory"] .mobile-shell-nav-item-icon {
  background: rgba(13, 36, 56, 0.08);
  color: var(--sea-deep);
}
.mobile-shell-nav-item[data-mobile-nav-tone="expenses"] .mobile-shell-nav-item-icon,
.mobile-shell-nav-item[data-mobile-nav-tone="voyage"] .mobile-shell-nav-item-icon {
  background: rgba(239, 124, 98, 0.14);
  color: #9c4838;
}
.mobile-shell-nav-item[data-mobile-nav-tone="settings"] .mobile-shell-nav-item-icon {
  background: rgba(13, 36, 56, 0.08);
  color: var(--ink);
}
.mobile-shell-nav-item[data-mobile-nav-tone="logout"] {
  background: rgba(255, 255, 255, 0.78);
}
.mobile-shell-nav-item[data-mobile-nav-tone="logout"] .mobile-shell-nav-item-icon {
  background: rgba(239, 124, 98, 0.13);
  color: #9c4838;
}
.mobile-shell-nav-item.locked .mobile-shell-nav-item-icon,
.mobile-shell-nav-item.locked .mobile-shell-nav-item-chevron {
  color: rgba(114, 238, 235, 0.82);
  background: rgba(72, 220, 224, 0.1);
}
.mobile-shell-nav-item.locked .mobile-shell-nav-item-copy strong {
  color: rgba(245, 253, 255, 0.92);
}
.mobile-shell-nav-item.locked .mobile-shell-nav-item-copy span {
  color: rgba(198, 228, 236, 0.72);
}
.mobile-shell-nav-item-copy,
.mobile-shell-action-item {
  min-width: 0;
}
.mobile-shell-action-item-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: 0;
  border: 1px solid rgba(55, 190, 200, 0.24);
  border-radius: 15px;
  color: #087f8c;
  background:
    linear-gradient(180deg, rgba(237, 254, 255, 0.94), rgba(214, 247, 250, 0.74)),
    rgba(224, 250, 252, 0.85);
}
.mobile-shell-action-item-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobile-shell-action-item-copy {
  min-width: 0;
}
.mobile-shell-nav-item-copy span,
.mobile-shell-action-item-copy > span {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 0.89rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mobile-shell-nav-item-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.05);
  color: var(--ink-soft);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
}
.mobile-more-section-divider {
  height: 1px;
  margin: 2px 4px;
  background: rgba(13, 36, 56, 0.09);
}
.mobile-shell-action-item {
  grid-template-columns: minmax(0, 1fr);
}
.mobile-shell-empty {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(13, 36, 56, 0.08);
}
.workspace-tab {
  box-sizing: border-box;
  min-height: var(--workspace-tab-height);
  height: var(--workspace-tab-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 0 14px 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  scroll-snap-align: start;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}
.workspace-tab-icon {
  box-sizing: border-box;
  width: var(--workspace-tab-icon-size);
  height: var(--workspace-tab-icon-size);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 36, 56, 0.06);
  color: currentColor;
  flex: 0 0 auto;
}
.workspace-tab-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.workspace-tab-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-tab:hover {
  border-color: rgba(13, 36, 56, 0.14);
  background: rgba(255, 255, 255, 0.84);
}
.workspace-tab:hover,
.workspace-tab:active {
  transform: none;
}
.workspace-tab.active {
  border-color: rgba(11, 101, 141, 0.24);
  background: #0e7aa5;
  color: #fff;
}
.workspace-tab.active .workspace-tab-icon {
  background: rgba(255, 255, 255, 0.16);
}
.workspace-tab.locked {
  justify-content: flex-start;
  color: rgba(226, 246, 250, 0.76);
  background:
    linear-gradient(135deg, rgba(11, 48, 63, 0.54), rgba(3, 17, 29, 0.48)),
    rgba(4, 20, 33, 0.5);
  border-color: rgba(72, 220, 224, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.workspace-tab.locked .workspace-tab-icon {
  color: rgba(114, 238, 235, 0.82);
  background: rgba(72, 220, 224, 0.1);
}
.workspace-tab.locked:hover {
  color: #f2feff;
  background:
    linear-gradient(135deg, rgba(13, 74, 88, 0.62), rgba(5, 25, 39, 0.56)),
    rgba(7, 35, 48, 0.56);
  border-color: rgba(93, 239, 234, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 14px 30px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(52, 232, 224, 0.08);
}
.workspace-tab-lock-badge,
.mobile-shell-nav-lock-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 48px;
  min-height: 24px;
  margin-left: auto;
  padding: 0 8px;
  border: 1px solid rgba(83, 232, 225, 0.28);
  border-radius: 999px;
  color: rgba(112, 249, 242, 0.9);
  background:
    linear-gradient(180deg, rgba(28, 116, 126, 0.28), rgba(6, 32, 47, 0.58)),
    rgba(7, 32, 45, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.workspace-tab-lock-badge[data-required-plan="premium"],
.mobile-shell-nav-lock-badge[data-required-plan="premium"] {
  color: #f7d982;
  border-color: rgba(247, 205, 113, 0.36);
  background:
    linear-gradient(180deg, rgba(120, 84, 24, 0.26), rgba(36, 28, 15, 0.56)),
    rgba(8, 31, 43, 0.62);
}
.module-lock-diamond {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
  box-shadow: 0 0 12px currentColor;
}
.section-block {
  padding: var(--space-panel);
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(246, 241, 233, 0.92));
}
.view-stack {
  display: grid;
  gap: 22px;
}
.view-panel {
  display: none;
}
.view-panel.active {
  display: block;
}
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.section-heading h2 {
  font-size: clamp(2.05rem, 2.8vw, 2.72rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.section-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
.app-screen {
  display: grid;
  gap: 18px;
}
.app-screen-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}
.app-screen-header-main {
  display: grid;
  gap: 8px;
}
.app-screen-header-main h2 {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(2.05rem, 2.8vw, 2.72rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.app-screen-copy {
  margin: 0;
  max-width: 66ch;
  color: rgba(63, 85, 102, 0.88);
  font-size: 0.96rem;
  line-height: 1.64;
}
.app-screen-primary-action {
  justify-self: end;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
}
.app-screen-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 15px 16px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.app-screen-toolbar-group {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.app-screen-toolbar-group-end {
  justify-content: flex-end;
}
.app-screen-period {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(14, 122, 165, 0.1);
  border: 1px solid rgba(14, 122, 165, 0.14);
  color: var(--sea-deep);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-screen-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}
.app-screen-search {
  display: grid;
  gap: 8px;
  min-width: min(100%, 320px);
}
.app-screen-search span {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(76, 97, 113, 0.86);
}
.app-screen-search input {
  min-height: 48px;
  border-radius: 16px;
}
.app-screen-control {
  display: grid;
  gap: 8px;
}
.app-screen-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.app-screen-filter-row .filter-chip,
.app-screen-filter-bar .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app-screen-filter-row .filter-chip span,
.app-screen-filter-bar .filter-chip span {
  display: inline-flex;
  min-width: 24px;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.06);
  font-size: 0.8rem;
}
.app-screen-filter-row .filter-chip.active span,
.app-screen-filter-bar .filter-chip.active span {
  background: rgba(255, 255, 255, 0.16);
}
.app-screen-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.app-screen-summary-card {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(248, 252, 255, 0.82);
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 8px;
}
.app-screen-summary-value {
  font-size: 2rem;
  line-height: 1;
  color: var(--ink);
  font-weight: 800;
}
.app-screen-secondary-action {
  min-height: 44px;
}
.compact-disclosure {
  overflow: hidden;
}
.compact-disclosure-summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
}
.compact-disclosure-summary::-webkit-details-marker {
  display: none;
}
.compact-disclosure-summary-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.compact-disclosure-summary-main h3,
.compact-disclosure-summary-main h4 {
  margin: 0;
}
.compact-disclosure-summary-copy {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}
.compact-disclosure-summary-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.compact-summary-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.06);
  border: 1px solid rgba(13, 36, 56, 0.08);
  color: var(--ink);
  font-size: 0.84rem;
  white-space: nowrap;
}
.compact-disclosure-indicator {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
.compact-disclosure-indicator::before {
  content: "+";
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.compact-disclosure[open] .compact-disclosure-indicator::before {
  content: "-";
}
.compact-disclosure-body {
  display: grid;
  gap: 16px;
  padding: 0 18px 18px;
  border-top: 1px solid rgba(13, 36, 56, 0.08);
}
.compact-disclosure-body-tight {
  padding-top: 14px;
}
.compact-disclosure-card {
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-xs);
}
.compact-inline-disclosure {
  margin-top: 14px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(248, 252, 255, 0.76);
}
.crew-list-compact {
  gap: 10px;
}
.crew-directory-item {
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.crew-directory-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.crew-directory-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.crew-directory-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.crew-directory-copy .crew-meta {
  margin: 0;
}
.crew-directory-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.crew-directory-meta {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 6px;
}
.crew-directory-indicator {
  color: var(--sea-deep);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.crew-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(13, 36, 56, 0.06);
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.crew-status-chip.is-attention {
  border-color: rgba(239, 124, 98, 0.2);
  background: rgba(239, 124, 98, 0.12);
  color: #9a4a3a;
}
.sort-shell {
  display: grid;
  gap: 6px;
  min-width: 168px;
}
.sort-shell span {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(76, 97, 113, 0.9);
}
.sort-shell select {
  min-width: 168px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  cursor: pointer;
}
.filter-chip.active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--sea-deep), var(--sea));
}
.maintenance-list,
.charter-list,
.crew-list,
.report-list,
.inventory-list,
.expenses-list,
.voyage-list,
.alert-feed{
  display: grid;
  gap: 14px;
}
.maintenance-card,
.charter-card,
.expense-card,
.voyage-card,
.alert-card{
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-xs);
}
.yacht-card.active {
  border-color: rgba(14, 122, 165, 0.5);
  background: linear-gradient(135deg, rgba(218, 242, 251, 0.96), rgba(255, 255, 255, 0.9));
  box-shadow: 0 18px 28px rgba(9, 66, 94, 0.12);
}
.card-topline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-title,
.crew-name{
  margin: 0;
  font-size: 1.04rem;
  font-weight: 700;
}
.card-meta,
.crew-meta,
.small-copy{
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.62;
}
.report-copy {
  margin: 14px 0 0;
  color: var(--ink);
  line-height: 1.7;
}
.profile-card .detail-row:last-of-type {
  margin-top: 12px;
}
.vessel-layout {
  display: grid;
  gap: 20px;
}
.vessel-forms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 14px;
  align-items: start;
}
.vessel-disclosure-grid {
  grid-template-columns: 1fr;
}
.vessel-systems-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.vessel-selector-shell {
  display: grid;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(214, 236, 244, 0.52), rgba(255, 255, 255, 0.82));
}
.vessel-selector-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.vessel-selector-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.vessel-selector-stat {
  min-width: 124px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.7);
}
.vessel-selector-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 1.1rem;
}
.vessel-selector-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 122, 165, 0.5) transparent;
}
.vessel-selector-rail::-webkit-scrollbar {
  height: 10px;
}
.vessel-selector-rail::-webkit-scrollbar-track {
  background: transparent;
}
.vessel-selector-rail::-webkit-scrollbar-thumb {
  border: 3px solid rgba(255, 252, 246, 0.78);
  border-radius: 999px;
  background: rgba(14, 122, 165, 0.5);
}
.vessel-selector-rail::-webkit-scrollbar-button {
  display: none;
}
.vessel-selector-chip {
  position: relative;
  min-width: 180px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.vessel-selector-chip.active {
  border-color: rgba(14, 122, 165, 0.22);
  background: rgba(248, 252, 255, 0.94);
  box-shadow: none;
}
.vessel-selector-chip.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 9px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(14, 122, 165, 0.78), rgba(76, 183, 165, 0.72));
}
.vessel-selector-name {
  display: block;
  font-weight: 700;
}
.vessel-selector-meta {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.vessel-add-button {
  flex: 0 0 auto;
  align-self: stretch;
}
.vessel-selector-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  align-self: stretch;
}
.vessel-selector-actions .action-overflow-menu,
.vessel-mobile-command-actions .action-overflow-menu,
.vessel-quick-actions .action-overflow-menu {
  align-self: stretch;
}
.vessel-selector-actions .action-overflow-trigger,
.vessel-mobile-command-actions .action-overflow-trigger,
.vessel-quick-actions .action-overflow-trigger {
  min-height: 44px;
}
.vessel-delete-button {
  color: #a44a38;
  border-color: rgba(202, 105, 81, 0.18);
  background: rgba(202, 105, 81, 0.08);
}
.vessel-profile-hero {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
  gap: 20px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(214, 236, 244, 0.58), rgba(255, 255, 255, 0.88));
}
.vessel-profile-media {
  position: relative;
  display: block;
  min-height: 320px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.74);
}
.vessel-profile-media img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
img[data-app-image][hidden],
[data-app-image-fallback][hidden] {
  display: none !important;
}
body:not(.auth-locked) [data-view-panel] [data-app-image-container] {
  overflow: hidden;
}
body:not(.auth-locked) [data-view-panel] [data-app-image-container] > img[data-app-image] {
  display: block;
  max-width: 100%;
  max-height: min(64vh, 560px);
  object-fit: cover;
}
body:not(.auth-locked) [data-view-panel="crew"] .crew-directory-toggle {
  grid-template-columns: 76px minmax(0, 1fr) auto auto;
}
body:not(.auth-locked) [data-view-panel="crew"] .crew-directory-avatar {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  max-width: 72px;
  max-height: 72px;
  overflow: hidden;
  border-radius: 50%;
  flex: 0 0 auto;
}
body:not(.auth-locked) [data-view-panel="crew"] :is(
  .crew-search-icon,
  .crew-summary-icon,
  .crew-status-chip
) {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
}
body:not(.auth-locked) [data-view-panel="crew"] :is(.crew-search-icon, .crew-summary-icon) svg {
  display: block;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  flex: 0 0 auto;
}
body:not(.auth-locked) [data-view-panel="crew"] .crew-status-chip svg {
  display: block;
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex: 0 0 auto;
}
body:not(.auth-locked) [data-view-panel] :is(
  .crew-directory-avatar,
  .crew-assignment-avatar,
  .crew-profile-avatar,
  .crew-recent-work-thumb,
  .workspace-account-avatar,
  .work-order-thread-avatar
) img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
body:not(.auth-locked) .vessel-dashboard-photo-card {
  position: relative;
  min-height: clamp(300px, 42vh, 500px);
  max-height: min(64vh, 560px);
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, #d8eef5, #f7fbfc);
  isolation: isolate;
}
body:not(.auth-locked) .vessel-dashboard-photo-card > img[data-app-image],
body:not(.auth-locked) .vessel-dashboard-photo-card img[data-app-image="vessel-profile"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}
.vessel-profile-media.is-empty {
  display: grid;
  align-items: center;
  justify-items: start;
}
.vessel-profile-placeholder {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  padding: 24px;
}
.vessel-profile-copy {
  display: grid;
  align-content: start;
  gap: 16px;
}
.vessel-profile-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.vessel-profile-title-row h2 {
  margin: 0;
}
.vessel-profile-subtitle {
  margin: 8px 0 0;
  color: var(--ink-soft);
}
.vessel-profile-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vessel-profile-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.06);
  color: var(--ink);
  font-size: 0.95rem;
}

.vessel-profile-note {
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
}
.vessel-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.vessel-action-button {
  min-height: 44px;
}
.vessel-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.vessel-stat-card {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.78);
}
.vessel-glance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.vessel-glance-card {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(214, 236, 244, 0.48));
}
.vessel-glance-card strong {
  display: block;
  margin-top: 10px;
  font-size: 1.5rem;
  font-family: var(--heading-font);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.vessel-glance-card .small-copy {
  margin: 10px 0 0;
}
.vessel-widget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.vessel-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 16px;
}
.vessel-form-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(214, 236, 244, 0.28), transparent 24%),
    rgba(255, 255, 255, 0.66);
  box-shadow: 0 12px 24px rgba(13, 36, 56, 0.05);
}
.vessel-form-card-static {
  display: grid;
  gap: 18px;
}
.vessel-form-card.compact-disclosure {
  padding: 0;
}
.vessel-form-card.compact-disclosure .compact-disclosure-body {
  padding-top: 16px;
}
.vessel-form-card .section-heading {
  margin-bottom: 12px;
}
.vessel-form-card .small-copy {
  margin-top: 6px;
  max-width: 48ch;
}
.vessel-editor-inline-host {
  display: grid;
}
.vessel-composer-disclosure {
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.54);
  overflow: hidden;
}
.vessel-composer-disclosure[open] {
  background: rgba(255, 255, 255, 0.72);
}
.vessel-composer-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.vessel-composer-summary::-webkit-details-marker {
  display: none;
}
.vessel-composer-summary strong {
  display: block;
  margin-top: 2px;
  font-size: 0.96rem;
  color: var(--ink);
}
.vessel-composer-summary-copy {
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
  text-align: right;
}
.vessel-composer-body {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(13, 36, 56, 0.08);
}
.vessel-composer-body .vessel-add-shell {
  padding-top: 14px;
}
.machinery-list {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}
.machinery-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.72);
}
.machinery-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.machinery-inline-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.machinery-item .detail-caption {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.5;
}
.compact-empty-state {
  min-height: 100%;
}
.vessel-system-card {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.62);
}
.vessel-mobile-command-card {
  display: none;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(235, 243, 248, 0.9));
  box-shadow: var(--shadow-xs);
}
.vessel-mobile-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.vessel-mobile-command-head h3 {
  margin: 4px 0 0;
  font-family: var(--heading-font);
  font-size: 1.86rem;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.vessel-mobile-command-copy {
  margin: 8px 0 0;
}
.vessel-mobile-command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.vessel-mobile-command-stat {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.06);
  background: rgba(255, 255, 255, 0.78);
}
.vessel-mobile-command-stat strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.2;
}
.vessel-mobile-editor-sheet-panel {
  max-height: min(86vh, 900px);
  max-height: min(86dvh, 900px);
  overflow: auto;
}
.vessel-mobile-editor-sheet-host {
  display: grid;
}
.vessel-mobile-editor-sheet-host > form {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.vessel-mobile-command-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vessel-mobile-command-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.vessel-system-card-wide {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(214, 236, 244, 0.52), rgba(255, 255, 255, 0.8));
}
.vessel-detail-card {
  height: 100%;
}
.system-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.system-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tone-good {
  background: rgba(76, 183, 165, 0.16);
  color: #177161;
}
.tone-warn {
  background: rgba(239, 177, 90, 0.2);
  color: #8a5c15;
}
.tone-danger {
  background: rgba(239, 124, 98, 0.18);
  color: #a74732;
}
.system-copy {
  min-height: 44px;
}
.system-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.vessel-machinery-stack {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.vessel-catalog-preview {
  min-height: 12rem;
}
.vessel-catalog-preview-shell {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(32, 77, 108, 0.12);
  border-radius: 1.4rem;
  background:
    linear-gradient(160deg, rgba(227, 243, 255, 0.85), rgba(255, 255, 255, 0.92)),
    rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.vessel-catalog-photo-shell {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  border-radius: 1.2rem;
  border: 1px solid rgba(32, 77, 108, 0.12);
  background:
    linear-gradient(180deg, rgba(231, 243, 251, 0.72), rgba(245, 249, 252, 0.94)),
    rgba(255, 255, 255, 0.92);
}
.vessel-catalog-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
}
.vessel-catalog-meta-grid {
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.vessel-catalog-copy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.9rem;
}
.vessel-add-shell {
  gap: 16px;
}
.section-divider {
  margin: 22px 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(13, 36, 56, 0.08), rgba(25, 133, 177, 0.18), rgba(13, 36, 56, 0.08));
}
.system-note {
  margin: 16px 0 0;
  color: var(--ink-soft);
  line-height: 1.6;
}
.system-note-error {
  color: #a44a38;
}
.system-note-success {
  color: #176b61;
}
.vessel-service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.level-track {
  height: 12px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.08);
  overflow: hidden;
}
.level-fill {
  height: 100%;
  border-radius: inherit;
}
.level-fill.is-good {
  background: linear-gradient(90deg, var(--sea), var(--mint));
}
.level-fill.is-warn {
  background: linear-gradient(90deg, #d89b3d, var(--sun));
}
.level-fill.is-danger {
  background: linear-gradient(90deg, #d56a58, #f19d88);
}
.status-badge,
.priority-badge {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.status-ready{
  background: rgba(76, 183, 165, 0.18);
  color: #177161;
}
.status-charter,
.priority-medium{
  background: rgba(239, 177, 90, 0.2);
  color: #8a5c15;
}
.status-docked {
  background: rgba(14, 122, 165, 0.14);
  color: #0c5d81;
}
.status-refit{
  background: rgba(239, 124, 98, 0.18);
  color: #a74732;
}
.status-overdue{
  background: rgba(211, 92, 92, 0.22);
  color: #a64141;
}
.status-confirmed,
.status-underway,
.status-complete,
.status-completed,
.status-active,
.status-approved,
.status-paid,
.status-refunded,
.status-in-stock {
  background: rgba(76, 183, 165, 0.18);
  color: #177161;
}
.status-planned,
.status-standby,
.status-scheduled,
.status-in-progress,
.status-under-review,
.status-submitted,
.status-partially-refunded,
.status-ordered,
.status-low-stock {
  background: rgba(14, 122, 165, 0.14);
  color: #0c5d81;
}
.status-not-started {
  background: rgba(13, 36, 56, 0.08);
  color: var(--ink-soft);
}
.status-draft {
  background: rgba(14, 122, 165, 0.14);
  color: #0d6486;
}
.status-finalized {
  background: rgba(76, 183, 165, 0.18);
  color: #177161;
}
.status-open {
  background: rgba(13, 36, 56, 0.08);
  color: var(--ink-soft);
}
.status-out-of-stock {
  background: rgba(211, 92, 92, 0.22);
  color: #a64141;
}
.status-pending-yard-release {
  background: rgba(239, 124, 98, 0.18);
  color: #a74732;
}
.status-under-review {
  background: rgba(239, 177, 90, 0.22);
  color: #c79a3d;
}
.status-inactive {
  background: rgba(13, 36, 56, 0.08);
  color: var(--ink-soft);
}
.detail-row{
  display: grid;
  gap: 12px;
}
.detail-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}
.detail-item {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(231, 240, 244, 0.52));
}
.detail-item span {
  display: block;
}
.detail-label {
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(63, 85, 102, 0.86);
}
.detail-value {
  margin-top: 8px;
  color: var(--ink);
  font-weight: 760;
  line-height: 1.28;
}
.stacked-form {
  display: grid;
  gap: 12px;
}
.compact-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.form-row.form-row-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-row > * {
  min-width: 0;
}
.photo-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.photo-upload-field input[type="file"] {
  min-height: auto;
  padding: 10px 12px;
  cursor: pointer;
}
.upload-copy {
  margin: -6px 0 4px;
}
label {
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.field-helper {
  display: block;
  margin-top: -2px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
input,
select,
textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(13, 36, 56, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
}
#vessel-form textarea {
  min-height: 132px;
}
textarea {
  min-height: 170px;
  resize: vertical;
}
input:focus,
select:focus,
textarea:focus,
button:focus{
  outline: 2px solid rgba(14, 122, 165, 0.3);
  outline-offset: 2px;
}
.spotlight {
  padding: 24px;
}


.metric-tile .metric-value {
  font-size: 1.55rem;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
}
.overview-card {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-xs);
}
.overview-card-feature {
  background: linear-gradient(135deg, rgba(225, 241, 248, 0.96), rgba(255, 255, 255, 0.92));
}
.overview-command-summary {
  display: none;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(235, 243, 248, 0.9));
  box-shadow: var(--shadow-xs);
}
.overview-command-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.overview-command-summary-copy {
  margin: 8px 0 0;
}
.overview-command-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.overview-command-summary-stat {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.06);
  background: rgba(255, 255, 255, 0.76);
}
.overview-command-summary-stat strong {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.2;
}
.overview-command-summary-action {
  width: 100%;
  margin-top: 14px;
}
.overview-command-summary-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.overview-command-shortcut {
  width: 100%;
  justify-content: center;
}


.overview-stat-list,
.overview-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.overview-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(230, 239, 243, 0.5));
}
.overview-card-snapshot .overview-stat {
  padding: 12px 14px;
  gap: 12px;
}
.overview-card-snapshot .overview-stat::before {
  display: none;
}

.overview-card-snapshot .overview-stat .detail-value {
  margin-top: 0;
  line-height: 1.05;
  font-size: 1.2rem;
  letter-spacing: -0.025em;
}
.overview-stat .detail-value {
  margin-top: 0;
}
.overview-list-item {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(230, 239, 243, 0.5));
}


.overview-link {
  width: 100%;
  border: 1px solid transparent;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.overview-link:hover {
  transform: translateY(-1px);
  border-color: rgba(64, 152, 206, 0.18);
  background: rgba(13, 36, 56, 0.08);
}
.overview-link:focus-visible {
  outline: none;
  border-color: rgba(64, 152, 206, 0.34);
  box-shadow: 0 0 0 3px rgba(64, 152, 206, 0.12);
}
.overview-list-item strong {
  display: block;
  color: var(--ink);
}





@media (min-width: 761px) {
  body[data-active-view="overview"] .app-shell {
    padding-top: 12px;
    padding-bottom: 6px;
  }
  body[data-active-view="overview"] .workspace-shell {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    padding: 10px 14px;
    overflow: hidden;
  }
  body[data-active-view="overview"] .workspace-nav {
    gap: 10px;
    padding: 0;
  }
  body[data-active-view="overview"] .workspace-scroll-area {
    min-height: 0;
    max-height: 100%;
    gap: 8px;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: clamp(28px, 2.4vw, 40px);
    scroll-padding-bottom: clamp(28px, 2.4vw, 40px);
  }
  body[data-active-view="overview"] #overview-panel {
    min-height: 0;
    padding: 10px;
    display: block;
    overflow: visible;
  }
  body[data-active-view="overview"] #overview-panel .section-heading {
    align-items: center;
    margin-bottom: 8px;
  }
  body[data-active-view="overview"] #overview-panel .section-heading h2 {
    font-size: clamp(1.76rem, 2.14vw, 2.2rem);
  }
  body[data-active-view="overview"] .overview-grid {
    min-height: 0;
    gap: 8px;
    align-items: stretch;
    height: auto;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  body[data-active-view="overview"] .overview-card {
    padding: 10px 12px;
    border-radius: 14px;
  }
  body[data-active-view="overview"] .overview-card-feature {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
  }
  body[data-active-view="overview"] .overview-card-feature .crew-log-feed {
    max-height: none;
    overflow: visible;
    margin-top: 0;
  }
  body[data-active-view="overview"] .overview-card-snapshot .overview-stat-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 7px;
  }
  body[data-active-view="overview"] .overview-card-snapshot .overview-stat-label-wrap {
    gap: 6px;
  }
  body[data-active-view="overview"] .overview-section-copy {
    margin: 3px 0 6px;
  }
  body[data-active-view="overview"] .overview-list {
    gap: 5px;
    margin-top: 6px;
  }
  body[data-active-view="overview"] .overview-list-item.overview-list-item-queue {
    padding: 8px 10px;
  }
  body[data-active-view="overview"] .overview-stat,
  body[data-active-view="overview"] .overview-list-item {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 14px;
  }
  body[data-active-view="overview"] .overview-list-item.overview-list-item-queue,
  body[data-active-view="overview"] .overview-list-item.overview-list-item-queue p,
  body[data-active-view="overview"] .overview-list-item.overview-list-item-queue strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  body[data-active-view="overview"] .overview-list-item strong,
  body[data-active-view="overview"] .overview-list-item p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-active-view="overview"] .overview-list-item strong {
    line-height: 1.25;
  }
  body[data-active-view="overview"] .overview-list-item p {
    margin: 3px 0 0;
    font-size: 0.82rem;
    line-height: 1.26;
  }
  body[data-active-view="overview"] .overview-card-feature .report-copy {
    margin-top: 8px;
    line-height: 1.4;
  }
  body[data-active-view="overview"] .overview-card .empty-state {
    min-height: 80px;
    padding: 10px 12px;
    align-content: center;
  }
  body[data-active-view="overview"] .overview-grid > .overview-card:nth-of-type(3) .overview-list,
  body[data-active-view="overview"] .overview-grid > .overview-card:nth-of-type(4) .overview-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    overscroll-behavior: auto;
  }
}
.note-card{
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-xs);
}
.weather-card {
  display: grid;
  gap: 14px;
}
.weather-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.weather-reading {
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.weather-temp {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.weather-grid {
  display: grid;
  gap: 10px;
}
.weather-stat {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(13, 36, 56, 0.05);
}
.weather-copy,
.weather-meta {
  margin: 0;
}
.weather-refresh {
  padding: 8px 12px;
  white-space: nowrap;
}
.weather-refresh:disabled {
  cursor: wait;
  opacity: 0.62;
}
.maintenance-section {
  grid-column: 1 / -1;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(14, 122, 165, 0.14), transparent 24%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(180deg, rgba(255, 252, 246, 0.98) 0%, rgba(240, 247, 251, 0.98) 100%);
  border-color: rgba(13, 36, 56, 0.1);
}
.weekly-report-section {
  grid-column: 1 / -1;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(14, 122, 165, 0.16), transparent 24%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.78), transparent 34%),
    linear-gradient(180deg, rgba(255, 252, 246, 0.98) 0%, rgba(240, 247, 251, 0.98) 100%);
  border-color: rgba(13, 36, 56, 0.1);
}
.vendors-section {
  grid-column: 1 / -1;
  color: var(--ink);
  background: rgba(255, 252, 246, 0.98);
  border-color: rgba(13, 36, 56, 0.1);
}
.inventory-section {
  grid-column: 1 / -1;
  color: var(--ink);
  background: rgba(255, 252, 246, 0.98);
  border-color: rgba(13, 36, 56, 0.1);
}
.expenses-section {
  grid-column: 1 / -1;
  color: var(--ink);
  background: rgba(255, 252, 246, 0.98);
  border-color: rgba(13, 36, 56, 0.1);
}
.maintenance-section .section-heading .eyebrow,
.maintenance-section .section-heading h2,
.maintenance-section label {
  color: var(--ink);
}
.maintenance-section .section-heading .eyebrow {
  color: var(--sea);
}
.weekly-report-section .section-heading .eyebrow {
  color: var(--sea);
}
.weekly-report-section .section-heading h2,
.weekly-report-section label {
  color: var(--ink);
}
.vendors-section .section-heading .eyebrow,
.vendors-section .section-heading h2,
.vendors-section label,
.inventory-section .section-heading .eyebrow,
.inventory-section .section-heading h2,
.inventory-section label,
.expenses-section .section-heading .eyebrow,
.expenses-section .section-heading h2,
.expenses-section label {
  color: var(--ink);
}
.vendors-section .section-heading .eyebrow,
.inventory-section .section-heading .eyebrow,
.expenses-section .section-heading .eyebrow {
  color: var(--sea);
}
.users-section .section-heading .eyebrow,
.users-section .section-heading h2{
  color: var(--ink);
}
.users-section .section-heading .eyebrow {
  color: var(--sea);
}
.vendors-section .app-screen-copy,
.vendors-section .app-screen-note {
  color: rgba(63, 85, 102, 0.88);
}
.vendors-section .sort-shell span {
  color: rgba(42, 67, 86, 0.86);
}
.vendors-section .app-screen-toolbar {
  border-color: rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}
.vendors-section .app-screen-filter-row .filter-chip {
  border-color: rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-soft);
}
.vendors-section .app-screen-filter-row .filter-chip span {
  background: rgba(13, 36, 56, 0.06);
}
.vendors-section .app-screen-filter-row .filter-chip.active {
  border-color: rgba(14, 122, 165, 0.18);
  background: rgba(14, 122, 165, 0.1);
}
.maintenance-section .empty-state {
  border-color: rgba(13, 36, 56, 0.1);
  color: rgba(76, 97, 113, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(238, 244, 247, 0.66));
}
.weekly-report-section .empty-state {
  border-color: rgba(13, 36, 56, 0.1);
  color: rgba(76, 97, 113, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(238, 244, 247, 0.66));
}
.vendors-section .empty-state,
.vendors-section .loading-state,
.inventory-section .empty-state,
.inventory-section .loading-state,
.expenses-section .empty-state,
.expenses-section .loading-state {
  border-color: rgba(13, 36, 56, 0.1);
  color: rgba(76, 97, 113, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(238, 244, 247, 0.66));
}
.users-section .empty-state,
.users-section .loading-state {
  border-color: rgba(13, 36, 56, 0.1);
  color: rgba(76, 97, 113, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(238, 244, 247, 0.66));
}
.vendors-section .empty-state-title,
.vendors-section .loading-state-title,
.inventory-section .empty-state-title,
.inventory-section .loading-state-title,
.expenses-section .empty-state-title,
.expenses-section .loading-state-title {
  color: var(--ink);
}
.users-section .empty-state-title,
.users-section .loading-state-title {
  color: var(--ink);
}
.vendors-section .empty-state-copy,
.vendors-section .loading-state-copy,
.inventory-section .empty-state-copy,
.inventory-section .loading-state-copy,
.expenses-section .empty-state-copy,
.expenses-section .loading-state-copy {
  color: rgba(76, 97, 113, 0.88);
}
.users-section .empty-state-copy,
.users-section .loading-state-copy {
  color: rgba(76, 97, 113, 0.88);
}
.vendors-section .empty-state-eyebrow,
.vendors-section .loading-state-eyebrow,
.inventory-section .empty-state-eyebrow,
.inventory-section .loading-state-eyebrow,
.expenses-section .empty-state-eyebrow,
.expenses-section .loading-state-eyebrow {
  color: var(--sea);
}
.users-section .empty-state-eyebrow,
.users-section .loading-state-eyebrow {
  color: var(--sea);
}
.log-period {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f6d8a7;
}
.weekly-report-section .log-period {
  color: var(--sea-deep);
}
.maintenance-workspace-shell {
  display: grid;
  gap: 18px;
}
.maintenance-workspace-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.maintenance-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.maintenance-subtab {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(13, 36, 56, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.maintenance-subtab.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--sea-deep), var(--sea));
  color: #fff;
  box-shadow: 0 14px 28px rgba(9, 66, 94, 0.14);
}
.maintenance-workspace-panel {
  display: none;
  gap: 18px;
}
.maintenance-workspace-panel.active {
  display: grid;
}
.maintenance-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.maintenance-overview-spotlight {
  padding: 22px;
}
.report-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
.report-layout-upgraded {
  gap: 20px;
}
.report-heading-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
.report-actions-summary {
  display: none;
}
.report-actions-menu-body {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
.report-actions-menu-body .action-overflow-menu {
  align-self: end;
}
.report-action-note {
  flex-basis: 100%;
  margin: 0;
  text-align: right;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}
.report-history-picker {
  min-width: min(280px, 100%);
  display: grid;
  gap: 8px;
}
.report-history-picker span {
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.report-history-command-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.report-overview-card,
.report-list-shell {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    var(--shadow-xs);
}
.report-overview-topline,
.report-list-heading,
.report-form-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.report-overview-topline h3,
.report-list-heading h3,
.report-form-topline h3 {
  margin: 7px 0 0;
  color: var(--ink);
  font-family: var(--heading-font);
  font-size: clamp(1.28rem, 1.5vw, 1.42rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.report-period-shell {
  display: grid;
  justify-items: end;
  gap: 10px;
}
.report-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.report-summary-card {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: linear-gradient(180deg, rgba(240, 247, 250, 0.94), rgba(255, 255, 255, 0.9));
  box-shadow: var(--shadow-xs);
}
.report-archive-panel {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(250, 252, 253, 0.94);
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 12px;
}
.report-archive-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.report-archive-panel-head h4 {
  margin: 4px 0 0;
  font-size: 1.05rem;
}
.report-archive-owner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.report-archive-version-list {
  display: grid;
  gap: 10px;
}
.report-archive-version-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(13, 36, 56, 0.08);
}
.report-archive-version-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.report-archive-version-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.report-archive-version-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.report-archive-version-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.archive-panel-error {
  color: #9d3d2b;
}
.report-archive-delete-confirm-shell {
  z-index: 3400;
}
.expense-delete-confirm-shell {
  z-index: 4300;
}
.work-order-complete-confirm-shell {
  z-index: 4400;
}
.report-archive-delete-confirm {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: clamp(22px, 3vw, 30px);
  color: var(--sea-deep);
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(30, 176, 188, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 252, 0.96));
  box-shadow:
    0 32px 80px rgba(7, 24, 38, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.report-archive-delete-confirm-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #b94a42;
  border: 1px solid rgba(185, 74, 66, 0.18);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 244, 243, 0.96), rgba(255, 235, 233, 0.82));
  box-shadow: 0 14px 30px rgba(185, 74, 66, 0.12);
}
.report-archive-delete-confirm-icon svg {
  width: 28px;
  height: 28px;
}
.report-archive-delete-confirm-copy {
  min-width: 0;
  display: grid;
  gap: 10px;
}
.report-archive-delete-confirm-copy h2 {
  margin: 0;
  color: var(--sea-deep);
  font-family: var(--app-heading-font, var(--heading-font));
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.report-archive-delete-confirm-copy .small-copy {
  max-width: 420px;
  margin: 0;
  color: rgba(38, 63, 79, 0.78);
  font-size: 0.95rem;
  line-height: 1.45;
}
.report-archive-delete-confirm-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}
.report-archive-delete-confirm-meta span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid rgba(13, 36, 56, 0.07);
  border-radius: 16px;
  background: rgba(242, 248, 250, 0.82);
}
.expense-delete-confirm-shell[data-mode="refund"] .report-archive-delete-confirm-icon {
  color: #0b7280;
  border-color: rgba(17, 173, 188, 0.2);
  background: linear-gradient(180deg, rgba(231, 250, 252, 0.98), rgba(213, 247, 250, 0.86));
  box-shadow: 0 14px 30px rgba(17, 173, 188, 0.12);
}
.expense-delete-confirm-shell[data-mode="refund"] .report-archive-delete-confirm-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.expense-delete-confirm-shell[data-mode="refund"] .report-archive-delete-confirm-meta label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 900;
}
.expense-delete-confirm-shell[data-mode="refund"] .report-archive-delete-confirm-meta input,
.expense-delete-confirm-shell[data-mode="refund"] .report-archive-delete-confirm-meta textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(13, 36, 56, 0.12);
  border-radius: 13px;
  background: rgba(249, 252, 253, 0.96);
}
.expense-delete-confirm-shell[data-mode="refund"] .report-archive-delete-confirm-meta .expense-refund-notes {
  grid-column: 1 / -1;
}
.work-order-complete-confirm-icon {
  color: #087787;
  border-color: rgba(17, 173, 188, 0.22);
  background: linear-gradient(180deg, rgba(231, 250, 252, 0.98), rgba(212, 247, 250, 0.88));
  box-shadow: 0 14px 30px rgba(17, 173, 188, 0.14);
}
.work-order-complete-confirm-field {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 900;
}
.work-order-complete-confirm-field input,
.work-order-complete-confirm-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--sea-deep);
  border: 1px solid rgba(13, 36, 56, 0.12);
  border-radius: 13px;
  background: rgba(249, 252, 253, 0.96);
  font: inherit;
  font-weight: 650;
}
.work-order-complete-confirm-field input:focus,
.work-order-complete-confirm-field textarea:focus {
  outline: none;
  border-color: rgba(17, 173, 188, 0.72);
  box-shadow: 0 0 0 4px rgba(17, 173, 188, 0.14);
}
.work-order-complete-confirm-note textarea {
  resize: vertical;
  min-height: 86px;
}
.report-archive-delete-confirm-meta small {
  color: rgba(64, 91, 107, 0.68);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.report-archive-delete-confirm-meta strong {
  min-width: 0;
  overflow: hidden;
  color: var(--sea-deep);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-archive-delete-confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.report-archive-delete-confirm-actions > button {
  min-height: 42px;
  padding-inline: 18px;
  border-radius: 999px;
}
@media (max-width: 620px) {
  .report-archive-delete-confirm {
    grid-template-columns: 1fr;
    gap: 14px;
    border-radius: 24px;
  }
  .report-archive-delete-confirm-meta {
    grid-template-columns: 1fr;
  }
  .report-archive-delete-confirm-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.report-summary-value {
  display: block;
  margin-top: 10px;
  font-size: 2rem;
  color: var(--sea-deep);
  font-weight: 800;
  line-height: 1;
}
.vendor-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
.users-section .compact-form {
  border-top-color: rgba(13, 36, 56, 0.08);
}
.inventory-section .compact-form,
.expenses-section .compact-form {
  border-top-color: rgba(13, 36, 56, 0.08);
}
.expenses-analytics {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
}
.expense-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.expense-dashboard-head .small-copy {
  margin: 0;
  color: var(--ink-soft);
}
.expense-currency-note {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(14, 122, 165, 0.14);
  background: rgba(14, 122, 165, 0.08);
  color: var(--sea-deep);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.expense-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.expense-metric-card,
.expense-visual-card,
.expense-log-shell {
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-xs);
}
.expense-metric-card {
  padding: 18px;
  border-radius: 22px;
}
.expense-metric-value {
  display: block;
  margin-top: 10px;
  font-size: clamp(1.38rem, 2.6vw, 2.15rem);
  font-weight: 700;
  color: var(--ink);
}
.expense-metric-value-text {
  font-size: clamp(1.02rem, 2vw, 1.35rem);
  line-height: 1.35;
}
.expense-metric-copy {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}
.expense-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.expense-trend-card {
  grid-column: 1 / -1;
}
.expense-visual-card,
.expense-log-shell {
  padding: 20px;
  border-radius: 24px;
}
.expense-visual-header,
.expense-log-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.expense-visual-header h3,
.expense-log-heading h3 {
  margin: 7px 0 0;
  color: var(--ink);
  font-family: var(--heading-font);
  font-size: clamp(1.28rem, 1.5vw, 1.42rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.expense-visual-caption {
  color: var(--sea-deep);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.expense-month-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  min-height: 240px;
  margin-top: 18px;
}
.expense-month-column {
  display: grid;
  gap: 10px;
  align-items: end;
}
.expense-month-value {
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.expense-month-track {
  height: 160px;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: linear-gradient(180deg, rgba(244, 248, 251, 0.94), rgba(255, 255, 255, 0.72));
}
.expense-month-fill {
  width: 100%;
  border-radius: 12px 12px 8px 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.expense-month-label {
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.expense-bar-stack {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.expense-bar-row {
  display: grid;
  gap: 8px;
}
.expense-bar-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.expense-bar-label {
  color: var(--ink);
  font-weight: 600;
}
.expense-bar-value {
  color: var(--ink-soft);
  font-size: 0.88rem;
  text-align: right;
}
.expense-bar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.08);
}
.expense-bar-fill {
  height: 100%;
  border-radius: inherit;
}
.expense-status-layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 18px;
}
.expense-status-ring {
  width: 160px;
  height: 160px;
  padding: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.expense-status-ring-center {
  width: 100%;
  height: 100%;
  padding: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}
.expense-status-ring-center strong {
  font-size: 1.75rem;
  line-height: 1;
}
.expense-status-legend {
  display: grid;
  gap: 12px;
}
.expense-status-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.expense-status-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
}
.expense-status-copy {
  display: grid;
  gap: 3px;
}
.expense-status-copy strong {
  color: var(--ink);
  font-size: 0.94rem;
}
.expense-status-copy span {
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.expense-log-shell {
  display: grid;
  gap: 16px;
}
.empty-state-icon {
  width: 56px;
  max-width: 56px;
  height: 56px;
  max-height: 56px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}
.compact-empty-state .empty-state-icon {
  width: 46px;
  max-width: 46px;
  height: 46px;
  max-height: 46px;
}
.empty-state-icon svg {
  width: 28px;
  max-width: 28px;
  height: 28px;
  max-height: 28px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.compact-empty-state .empty-state-icon svg {
  width: 23px;
  max-width: 23px;
  height: 23px;
  max-height: 23px;
}
.empty-state,
.loading-state {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 132px;
  padding: 20px 22px;
  border-radius: 22px;
  border: 1px dashed rgba(13, 36, 56, 0.14);
  color: var(--ink-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(230, 239, 243, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}
.compact-empty-state,
.compact-loading-state {
  min-height: 0;
  padding: 18px;
}
.empty-state-eyebrow,
.loading-state-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sea);
  font-weight: 700;
}
.empty-state-title,
.loading-state-title {
  font-family: var(--heading-font);
  font-size: 1.34rem;
  line-height: 1.02;
  color: var(--ink);
}
.empty-state-copy,
.loading-state-copy {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-soft);
  line-height: 1.62;
}
.loading-state-shimmer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.loading-state-shimmer span {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(14, 122, 165, 0.14), rgba(255, 255, 255, 0.7), rgba(14, 122, 165, 0.14));
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
}
.loading-state-shimmer span:nth-child(1) {
  width: 68px;
}
.loading-state-shimmer span:nth-child(2) {
  width: 116px;
}
.loading-state-shimmer span:nth-child(3) {
  width: 84px;
}
.expense-log-heading .small-copy {
  margin: 0;
  color: var(--ink-soft);
}
.expenses-section .expense-log-heading {
  align-items: flex-start;
}
.expenses-section .expense-log-heading h3 {
  margin-top: 4px;
  font-size: clamp(1.62rem, 2vw, 2rem);
  line-height: 1.04;
}
.expense-log-grid {
  display: grid;
  gap: 14px;
  overflow: visible;
}
.expense-log-card {
  position: relative;
  z-index: 0;
  border-color: rgba(13, 36, 56, 0.08);
  background: rgba(248, 252, 255, 0.78);
}
.expense-log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.expense-log-card .small-copy {
  color: var(--ink-soft);
}
.maintenance-board-wrap {
  overflow: visible;
}
.report-list {
  overflow: visible;
}
.report-list-shell {
  display: grid;
  gap: 16px;
}
.report-list-shell.compact-disclosure {
  gap: 0;
  padding: 0;
}
.report-list-shell.compact-disclosure .compact-disclosure-body {
  padding-top: 14px;
}
.report-archive-disclosure .compact-disclosure-body {
  padding-top: 0;
}
.report-library-card.is-active {
  border-color: rgba(14, 122, 165, 0.18);
  background: linear-gradient(180deg, rgba(230, 244, 251, 0.96), rgba(255, 255, 255, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 20px 36px rgba(8, 53, 76, 0.12);
}
.report-library-meta .detail-item {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.66);
}
.report-library-meta .detail-label,
.report-library-meta .detail-value {
  display: block;
}
.report-library-meta .detail-value {
  margin-top: 8px;
}
.vendor-table-wrap {
  overflow: visible;
}
.user-table-wrap {
  max-height: min(48vh, 560px);
  overflow-y: auto;
  padding-right: 6px;
}
.report-form {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  background: rgba(255, 255, 255, 0.72);
}
.report-form-topline,
.report-form > .form-actions {
  grid-column: 1 / -1;
}
.report-form-upgraded .form-span-2,
.report-form-upgraded .work-order-crew-field,
.report-form-upgraded .work-order-photo-field {
  grid-column: 1 / -1;
}
.work-order-native-link-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.work-order-link-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.work-order-link-section-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.work-order-link-section-header .field-helper {
  margin: 4px 0 0;
}
.work-order-link-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.work-order-link-picker-shell {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.work-order-link-picker-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.work-order-link-picker-label-row label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink);
}
.work-order-link-clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}
.work-order-link-input-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.12);
  background: rgba(248, 251, 253, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.work-order-link-input-shell:focus-within {
  border-color: rgba(13, 127, 143, 0.38);
  box-shadow: 0 0 0 4px rgba(40, 196, 192, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.work-order-link-input-shell input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  color: var(--ink);
  font-size: 0.92rem;
  outline: none;
}
.work-order-link-input-shell button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(13, 127, 143, 0.2);
  border-radius: 14px;
  background: rgba(226, 247, 248, 0.82);
  color: var(--teal-dark);
  font-weight: 800;
  cursor: pointer;
}
.work-order-link-picker-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 30px;
  align-items: center;
}
.work-order-link-picker-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 8px;
  padding: 7px 9px 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(13, 127, 143, 0.16);
  background: rgba(229, 247, 248, 0.84);
  color: var(--sea-deep);
  font-size: 0.78rem;
  font-weight: 800;
}
.work-order-link-picker-chip button {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(13, 127, 143, 0.14);
  color: var(--sea-deep);
  line-height: 1;
  cursor: pointer;
}
.work-order-link-picker-empty {
  color: var(--ink-muted);
  font-size: 0.82rem;
}
.work-order-link-picker-results {
  display: grid;
  gap: 10px;
  max-height: min(320px, 42vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(13, 36, 56, 0.12);
  z-index: 12;
}
.work-order-link-picker-group {
  display: grid;
  gap: 7px;
}
.work-order-link-picker-group + .work-order-link-picker-group {
  padding-top: 8px;
  border-top: 1px solid rgba(13, 36, 56, 0.08);
}
.work-order-link-picker-group-label {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.work-order-link-picker-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(248, 251, 253, 0.9);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.work-order-link-picker-row:hover,
.work-order-link-picker-row.checked {
  border-color: rgba(13, 127, 143, 0.24);
  background: rgba(229, 247, 248, 0.72);
}
.work-order-link-picker-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}
.work-order-link-picker-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.work-order-link-picker-row-copy strong,
.work-order-link-picker-row-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-order-link-picker-row-copy strong {
  color: var(--ink);
  font-size: 0.9rem;
}
.work-order-link-picker-row-copy small {
  color: var(--ink-muted);
  font-size: 0.78rem;
}
.work-order-link-picker-status {
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.06);
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.work-order-link-picker-status[data-tone="danger"] {
  background: rgba(210, 82, 73, 0.1);
  color: #a3382f;
}
.work-order-link-picker-status[data-tone="warning"] {
  background: rgba(245, 158, 11, 0.12);
  color: #9a5b00;
}
.work-order-link-picker-status[data-tone="success"] {
  background: rgba(34, 197, 94, 0.12);
  color: #167041;
}
.work-order-link-picker-no-results {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(244, 248, 251, 0.9);
  color: var(--ink-muted);
  font-size: 0.84rem;
}
.work-order-link-picker-no-results strong {
  color: var(--ink);
}
@media (max-width: 760px) {
  .work-order-link-section {
    padding: 14px;
    border-radius: 18px;
  }
  .work-order-link-picker-grid {
    grid-template-columns: 1fr;
  }
  .work-order-link-picker-results {
    max-height: min(52dvh, 420px);
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--mobile-keyboard-inset, 0px) + 12px);
  }
  .work-order-link-picker-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .work-order-link-picker-status {
    grid-column: 2;
    justify-self: start;
  }
}
.report-form-upgraded .primary-button:disabled,
.report-action-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.maintenance-form {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.maintenance-form > .form-row,
.maintenance-form > .form-actions {
  grid-column: 1 / -1;
}
.form-row.form-row-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.maintenance-form-hint {
  align-self: end;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(13, 36, 56, 0.12);
  background: rgba(232, 243, 249, 0.44);
  color: var(--ink-soft);
  line-height: 1.5;
}
.maintenance-hidden-control {
  display: none;
}
.maintenance-cadence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.maintenance-cadence-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.maintenance-cadence-card strong {
  font-size: 1.02rem;
}
.maintenance-cadence-card.active {
  border-color: rgba(27, 121, 166, 0.24);
  background: linear-gradient(135deg, rgba(214, 236, 244, 0.76), rgba(255, 255, 255, 0.92));
  box-shadow: 0 14px 24px rgba(9, 66, 94, 0.08);
}
.maintenance-tracking-note {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink-soft);
  line-height: 1.5;
}
.maintenance-cycle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.maintenance-cycle-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.7);
}
.maintenance-cycle-card-heading h5 {
  margin: 0;
  font-family: var(--heading-font);
  font-size: 1.05rem;
  color: var(--ink);
}
.maintenance-cycle-card-heading .small-copy {
  margin-top: 6px;
}
.maintenance-section input,
.maintenance-section textarea,
.maintenance-section select,
.weekly-report-section input,
.weekly-report-section textarea,
.weekly-report-section select {
  border-color: rgba(13, 36, 56, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  color-scheme: light;
}
.weekly-report-section input,
.weekly-report-section textarea,
.weekly-report-section select {
  border-color: rgba(13, 36, 56, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  color-scheme: light;
}
.maintenance-section input,
.maintenance-section textarea,
.maintenance-section select {
  border-color: rgba(13, 36, 56, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  color-scheme: light;
}
.vendors-section input,
.vendors-section textarea,
.vendors-section select,
.inventory-section input,
.inventory-section textarea,
.inventory-section select,
.expenses-section input,
.expenses-section textarea,
.expenses-section select {
  border-color: rgba(13, 36, 56, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  color-scheme: light;
}
.maintenance-section select option,
.weekly-report-section select option,
.vendors-section select option,
.inventory-section select option,
.expenses-section select option{
  color: var(--ink);
  background: #fdfaf4;
}
.weekly-report-section select option {
  color: var(--ink);
  background: #fdfaf4;
}
.maintenance-section select optgroup,
.weekly-report-section select optgroup,
.vendors-section select optgroup,
.inventory-section select optgroup,
.expenses-section select optgroup{
  color: var(--sea-deep);
  background: #eef5f8;
  font-weight: 700;
}
.weekly-report-section select optgroup {
  color: var(--sea-deep);
  background: #eef5f8;
  font-weight: 700;
}
.maintenance-section input::placeholder,
.maintenance-section textarea::placeholder {
  color: rgba(76, 97, 113, 0.62);
}
.weekly-report-section input::placeholder,
.weekly-report-section textarea::placeholder {
  color: rgba(76, 97, 113, 0.62);
}
.maintenance-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.maintenance-toolbar .sort-shell {
  min-width: 172px;
}
.maintenance-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.maintenance-search-shell {
  display: grid;
  gap: 8px;
  width: min(320px, 100%);
}
.maintenance-search-label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.maintenance-section-browser {
  display: grid;
  gap: 14px;
}
.maintenance-sections-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.maintenance-section-chip {
  flex: 0 0 auto;
  min-width: 170px;
  padding: 14px 16px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}
.maintenance-section-chip span,
.maintenance-section-chip strong {
  display: block;
}
.maintenance-section-chip span {
  color: var(--ink-soft);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.maintenance-section-chip strong {
  margin-top: 10px;
  font-size: 1.02rem;
}
.maintenance-section-chip.active {
  border-color: rgba(27, 121, 166, 0.24);
  background: linear-gradient(135deg, rgba(214, 236, 244, 0.76), rgba(255, 255, 255, 0.92));
  box-shadow: 0 14px 24px rgba(9, 66, 94, 0.08);
}
.maintenance-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}
.maintenance-section-title {
  margin: 10px 0 0;
}
.maintenance-section-copy {
  margin-top: 10px;
  max-width: 60ch;
  line-height: 1.55;
}
.maintenance-section-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 10px;
}
.maintenance-section-stat {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(227, 235, 241, 0.62));
  border: 1px solid rgba(13, 36, 56, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.maintenance-section-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 1.2rem;
}
.maintenance-focus-card {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.72);
}
.maintenance-focus-card-wide {
  grid-column: span 2;
}
.maintenance-focus-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.maintenance-focus-value {
  display: block;
  margin-top: 10px;
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
}
.maintenance-focus-copy {
  margin-top: 12px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.maintenance-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
.maintenance-filter span {
  display: inline-flex;
  min-width: 24px;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.06);
  font-size: 0.82rem;
}
.maintenance-filter.active {
  border-color: rgba(27, 121, 166, 0.22);
  color: var(--ink);
  background: linear-gradient(135deg, rgba(214, 236, 244, 0.76), rgba(255, 255, 255, 0.92));
  box-shadow: 0 10px 18px rgba(9, 66, 94, 0.07);
}
.maintenance-filter:hover {
  transform: translateY(-1px);
  border-color: rgba(27, 121, 166, 0.14);
}
.maintenance-section-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.maintenance-section-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}
.maintenance-section-card-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.maintenance-section-card-copy {
  margin-top: 10px;
  max-width: 58ch;
  line-height: 1.6;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.maintenance-section-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.maintenance-section-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.maintenance-section-card-grid .detail-item {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(240, 245, 249, 0.72);
  border: 1px solid rgba(13, 36, 56, 0.06);
}
.maintenance-section-detail-copy {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}
.maintenance-section-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  align-items: center;
  border-top: 1px solid rgba(13, 36, 56, 0.08);
}
.maintenance-primary-action {
  min-height: 42px;
  padding: 0 16px;
}
.maintenance-delete-button {
  margin-left: auto;
}
.maintenance-task-groups {
  display: grid;
  gap: 16px;
}
.maintenance-task-group {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 12px 28px rgba(9, 66, 94, 0.06);
}
.maintenance-task-group-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.maintenance-task-group-heading h3 {
  margin: 8px 0 0;
  font-family: var(--heading-font);
  font-size: 1.56rem;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.maintenance-task-group-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.maintenance-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.7fr)
    minmax(0, 0.8fr)
    minmax(0, 0.9fr)
    minmax(0, 0.72fr)
    minmax(0, 0.86fr)
    minmax(0, 0.92fr);
}
.maintenance-body-row {
  color: var(--ink);
}
.maintenance-body-row:nth-child(even) {
  background: rgba(236, 245, 250, 0.52);
}
.maintenance-cell {
  min-width: 0;
  min-height: 58px;
  padding: 14px 12px;
  border-right: 1px solid rgba(13, 36, 56, 0.08);
  border-bottom: 1px solid rgba(13, 36, 56, 0.08);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.maintenance-row .maintenance-cell:last-child {
  border-right: none;
}
.maintenance-database .maintenance-row:last-child .maintenance-cell {
  border-bottom: none;
}

.maintenance-task-cell strong {
  display: block;
}
.maintenance-item-title {
  padding-left: 8px;
  font-size: 1rem;
}
.maintenance-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 0 8px;
}
.maintenance-inline-hint {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.maintenance-inline-hint.is-good,
.maintenance-date-hint.is-good {
  color: #177161;
  background: rgba(76, 183, 165, 0.14);
}
.maintenance-inline-hint.is-runtime {
  color: #185b8a;
  background: rgba(65, 150, 222, 0.14);
}
.maintenance-inline-hint.is-calendar {
  color: #8a5d18;
  background: rgba(220, 171, 65, 0.16);
}
.maintenance-inline-hint.is-hybrid {
  color: #6d4592;
  background: rgba(161, 117, 211, 0.16);
}
.maintenance-inline-hint.is-warn,
.maintenance-date-hint.is-warn {
  color: #9b671d;
  background: rgba(239, 177, 90, 0.14);
}
.maintenance-inline-hint.is-danger,
.maintenance-date-hint.is-danger {
  color: #a44a38;
  background: rgba(239, 124, 98, 0.14);
}
.maintenance-inline-copy {
  color: var(--ink-soft);
  font-size: 0.84rem;
}
.maintenance-item-notes {
  margin: 10px 0 0 8px;
  color: var(--ink);
  line-height: 1.55;
}
.maintenance-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  padding-left: 8px;
}
.maintenance-action {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--sea-deep);
  font-size: 0.88rem;
  cursor: pointer;
}
.maintenance-action:hover {
  text-decoration: underline;
}
.maintenance-delete-action {
  color: #a44a38;
}
.maintenance-delete-action:hover {
  color: #7b3324;
}
.maintenance-date-cell {
  display: grid;
  align-content: start;
  gap: 8px;
}
.maintenance-date-hint {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(13, 36, 56, 0.06);
  font-size: 0.8rem;
}
.maintenance-cancel {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(13, 36, 56, 0.12);
}
.maintenance-cancel:hover {
  background: rgba(232, 243, 249, 0.9);
}
.maintenance-section .status-badge,
.maintenance-section .priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 6px 12px;
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.maintenance-category-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--ink);
  background: rgba(13, 36, 56, 0.08);
  border: 1px solid rgba(13, 36, 56, 0.1);
}
.maintenance-engine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
}
.maintenance-engine-grid > .compact-disclosure {
  height: fit-content;
}
.maintenance-surface {
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 18px 36px rgba(9, 66, 94, 0.08);
}
.maintenance-surface.compact-disclosure {
  padding: 0;
}
.maintenance-surface.compact-disclosure .compact-disclosure-body {
  padding-top: 16px;
}
.maintenance-history-shell {
  margin: 18px 0 22px;
}
.maintenance-surface-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.maintenance-surface-heading > div {
  min-width: 0;
}
.maintenance-surface-heading h3 {
  margin: 0;
  font-family: var(--heading-font);
  font-size: 1.76rem;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.maintenance-surface-heading .small-copy {
  max-width: 420px;
}
.maintenance-quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.maintenance-ghost-button {
  color: var(--ink);
  border-color: rgba(13, 36, 56, 0.12);
  background: rgba(255, 255, 255, 0.74);
}
.maintenance-ghost-button:hover {
  background: rgba(255, 255, 255, 0.92);
}
.maintenance-health-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.maintenance-summary-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 12px 24px rgba(9, 66, 94, 0.06);
}
.maintenance-summary-card-health {
  grid-column: span 2;
}
.maintenance-summary-card.is-good {
  background: linear-gradient(135deg, rgba(217, 241, 233, 0.86), rgba(255, 255, 255, 0.88));
}
.maintenance-summary-card.is-warn {
  background: linear-gradient(135deg, rgba(249, 235, 198, 0.88), rgba(255, 255, 255, 0.9));
}
.maintenance-summary-card.is-danger {
  background: linear-gradient(135deg, rgba(249, 220, 214, 0.88), rgba(255, 255, 255, 0.9));
}
.maintenance-summary-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.maintenance-summary-value {
  display: block;
  margin-top: 12px;
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
}
.maintenance-summary-copy {
  margin-top: 12px;
  max-width: 30ch;
  color: var(--ink-soft);
  line-height: 1.55;
}
.maintenance-assets-list,
.maintenance-history-list,
.maintenance-template-task-list {
  display: grid;
  gap: 12px;
}
.maintenance-asset-card,
.maintenance-history-entry,
.maintenance-template-preview-shell {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}
.maintenance-asset-topline,
.maintenance-history-topline,
.maintenance-template-preview-heading,
.maintenance-template-task-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.maintenance-asset-topline h4,
.maintenance-template-preview-heading h4 {
  margin: 4px 0 0;
  font-family: var(--heading-font);
  font-size: 1.35rem;
  color: var(--ink);
}
.maintenance-asset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.maintenance-asset-meta,
.maintenance-history-meta,
.maintenance-template-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.maintenance-asset-meta span,
.maintenance-history-meta span,
.maintenance-template-task-meta span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8, 50, 74, 0.05);
}
.maintenance-asset-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.maintenance-asset-copy {
  margin: 14px 0 0;
}
.maintenance-empty-state {
  padding: 22px;
  border-radius: 22px;
  border: 1px dashed rgba(13, 36, 56, 0.18);
  background: linear-gradient(135deg, rgba(232, 243, 249, 0.46), rgba(255, 255, 255, 0.78));
}
.maintenance-empty-state h4 {
  margin: 12px 0 0;
  font-family: var(--heading-font);
  font-size: 1.45rem;
  color: var(--ink);
}
.maintenance-empty-state .small-copy {
  margin-top: 10px;
  max-width: 52ch;
}
.maintenance-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.maintenance-owner-note {
  margin-top: 10px;
  color: var(--ink-soft);
}
.maintenance-template-preview {
  margin-top: 14px;
}
.maintenance-template-empty {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(13, 36, 56, 0.16);
  background: rgba(8, 50, 74, 0.03);
}
.maintenance-template-task-list {
  margin-top: 14px;
}
.maintenance-template-task {
  padding: 14px;
  border-radius: 18px;
  background: rgba(232, 243, 249, 0.46);
  border: 1px solid rgba(13, 36, 56, 0.06);
}
.maintenance-template-task strong {
  font-size: 1rem;
  color: var(--ink);
}
.maintenance-asset-form {
  gap: 16px;
}
.maintenance-history-entry strong {
  color: var(--ink);
}
.maintenance-editor-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(232, 243, 249, 0.34);
}
.maintenance-editor-section-heading h4 {
  margin: 6px 0 0;
  font-family: var(--heading-font);
  font-size: 1.2rem;
  color: var(--ink);
}
.maintenance-editor-section-heading .eyebrow {
  margin-bottom: 0;
}
.maintenance-editor-section-compact {
  padding: 16px 0 0;
  border: none;
  background: transparent;
}

input::placeholder,
textarea::placeholder {
  color: rgba(76, 97, 113, 0.78);
}
.form-row.form-row-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vendors-section input::placeholder,
.vendors-section textarea::placeholder,
.inventory-section input::placeholder,
.inventory-section textarea::placeholder,
.expenses-section input::placeholder,
.expenses-section textarea::placeholder {
  color: rgba(76, 97, 113, 0.78);
}
.weekly-log-board {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}
.weekly-log-row {
  display: grid;
  grid-template-columns:
    minmax(160px, 1fr)
    minmax(120px, 0.72fr)
    minmax(0, 1.18fr)
    minmax(0, 1.08fr)
    minmax(0, 0.94fr)
    minmax(0, 0.94fr);
}
.weekly-log-header {
  background: linear-gradient(180deg, rgba(235, 244, 249, 0.96), rgba(245, 249, 252, 0.92));
  color: var(--ink-soft);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.weekly-log-body-row {
  color: var(--ink);
}
.weekly-log-body-row:nth-child(even) {
  background: rgba(232, 243, 249, 0.4);
}
.weekly-log-cell {
  min-width: 0;
  min-height: 58px;
  padding: 14px 12px;
  border-right: 1px solid rgba(13, 36, 56, 0.08);
  border-bottom: 1px solid rgba(13, 36, 56, 0.08);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.weekly-log-row .weekly-log-cell:last-child {
  border-right: none;
}
.weekly-log-board .weekly-log-row:last-child .weekly-log-cell {
  border-bottom: none;
}
.weekly-log-item {
  font-weight: 700;
}
.weekly-log-item strong {
  display: block;
}
.work-order-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.work-order-link-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(46, 127, 181, 0.12);
  border: 1px solid rgba(46, 127, 181, 0.18);
  color: var(--sea-deep);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.work-order-assignment-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.06);
  border: 1px solid rgba(13, 36, 56, 0.08);
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.weekly-log-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.work-order-filters {
  margin: 0 0 10px;
}
.work-order-composer-shell {
  display: none;
}
.work-order-mobile-fab {
  display: none;
}
.work-order-mobile-queue {
  display: grid;
  gap: 12px;
}
.work-order-mobile-queue-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px;
}
.work-order-mobile-queue-heading > div {
  display: grid;
  gap: 3px;
}
.work-order-mobile-queue-heading strong {
  color: var(--ink);
  font-family: var(--heading-font);
  font-size: clamp(1.35rem, 6vw, 1.75rem);
  line-height: 1.05;
}
.work-order-mobile-queue-heading > span {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.work-order-mobile-row-list {
  display: grid;
  gap: 9px;
}
.work-order-mobile-row {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px 13px 12px 15px;
  border: 1px solid rgba(13, 36, 56, 0.07);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 251, 253, 0.72));
  color: var(--ink);
  text-align: left;
  box-shadow:
    0 12px 26px rgba(10, 31, 45, 0.048),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.work-order-mobile-row:active {
  background: rgba(239, 247, 252, 0.92);
}
.work-order-mobile-row:focus-visible {
  outline: 2px solid rgba(23, 135, 178, 0.34);
  outline-offset: 2px;
}
.work-order-mobile-row-main,
.work-order-mobile-row-meta {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.work-order-mobile-row-main strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-order-mobile-row-subline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  color: rgba(67, 90, 108, 0.82);
  font-size: 0.78rem;
  line-height: 1.2;
}
.work-order-mobile-row-subline span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 8px 2px 0;
  border-radius: 999px;
  background: rgba(67, 90, 108, 0.42);
}
.work-order-mobile-row-meta {
  justify-items: end;
}
.work-order-mobile-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(226, 241, 252, 0.88);
  color: #0f6792;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.work-order-mobile-priority[data-tone="attention"] {
  background: rgba(255, 238, 220, 0.94);
  color: #b45c1f;
}
.work-order-mobile-priority[data-tone="critical"] {
  background: rgba(255, 232, 232, 0.94);
  color: #a64141;
}
.work-order-mobile-priority[data-tone="closed"] {
  background: rgba(225, 242, 237, 0.94);
  color: #287b6e;
}
.work-order-mobile-priority[data-tone="calm"] {
  background: rgba(235, 241, 245, 0.92);
  color: rgba(59, 80, 96, 0.86);
}
.work-order-mobile-date {
  color: rgba(67, 90, 108, 0.72);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}
.work-order-mobile-row-chevron {
  color: rgba(18, 43, 62, 0.32);
  font-size: 1.5rem;
  line-height: 1;
}
.work-order-filters .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.work-order-filters .filter-chip span {
  display: inline-flex;
  min-width: 24px;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.06);
  font-size: 0.8rem;
}
.work-order-filters .filter-chip.active span {
  background: rgba(255, 255, 255, 0.16);
}
.work-order-preview-shell {
  display: grid;
  gap: 12px;
}
.work-order-preview-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.work-order-preview-topline > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.work-order-preview-topline .small-copy {
  margin: 0;
}
.work-order-preview-topline strong {
  color: var(--ink);
  font-size: 1rem;
}
.work-order-preview-list {
  display: grid;
  gap: 8px;
}
.work-order-preview-row {
  appearance: none;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
  text-align: left;
  cursor: pointer;
}
.work-order-preview-row:focus-visible {
  outline: 2px solid rgba(23, 135, 178, 0.34);
  outline-offset: 2px;
}
.work-order-preview-status {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(23, 135, 178, 0.48);
}
.work-order-preview-status[data-tone="attention"] {
  background: #f0a33a;
}
.work-order-preview-status[data-tone="closed"] {
  background: #59b894;
}
.work-order-preview-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.work-order-preview-copy strong,
.work-order-preview-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-order-preview-copy span {
  color: rgba(76, 97, 113, 0.88);
  font-size: 0.84rem;
}
.work-order-preview-chevron {
  color: rgba(18, 43, 62, 0.42);
  font-size: 1.35rem;
  line-height: 1;
}
.work-order-queue-shell[hidden] {
  display: none;
}
.work-order-queue-shell {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(16px, 3vw, 40px);
  background: rgba(2, 10, 18, 0.18);
  overscroll-behavior: contain;
  touch-action: none;
}
.work-order-queue-backdrop {
  position: fixed;
  inset: 0;
  border: 0;
  background: rgba(1, 8, 14, 0.52);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.work-order-queue-drawer {
  position: relative;
  width: min(100%, 1240px);
  height: min(840px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  margin: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(91, 217, 228, 0.24);
  border-radius: 24px;
  color: #f4fbff;
  background:
    linear-gradient(135deg, rgba(12, 42, 60, 0.96), rgba(3, 18, 31, 0.98)),
    radial-gradient(circle at 12% 0%, rgba(52, 226, 216, 0.14), transparent 32%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
  overscroll-behavior: contain;
  touch-action: auto;
}
.work-order-queue-drawer-header,
.work-order-queue-drawer-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.work-order-queue-drawer-header > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.work-order-queue-drawer-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.35rem;
}
.work-order-queue-drawer-header .small-copy {
  margin: 0;
  max-width: 46ch;
}
.work-order-queue-drawer-controls {
  align-items: end;
}
.work-order-queue-drawer-controls .app-screen-filter-bar {
  flex: 1 1 auto;
  min-width: 0;
}
.work-order-queue-drawer-controls .sort-shell {
  flex: 0 0 170px;
}
.work-order-detail-shell[hidden] {
  display: none;
}
@keyframes work-order-detail-shell-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes work-order-detail-workspace-enter {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
html.modal-open,
body:not(.auth-locked).modal-open,
body:not(.auth-locked).work-order-detail-open,
body:not(.auth-locked).health-factor-detail-open,
body:not(.auth-locked).work-order-queue-open {
  overflow: hidden;
  overscroll-behavior: none;
}
html.modal-open {
  height: 100%;
}
body:not(.auth-locked).modal-open .workspace-scroll-area,
body:not(.auth-locked).work-order-detail-open .workspace-scroll-area,
body:not(.auth-locked).health-factor-detail-open .workspace-scroll-area,
body:not(.auth-locked).work-order-queue-open .workspace-scroll-area,
body:not(.auth-locked).modal-open .app-shell,
body:not(.auth-locked).work-order-detail-open .app-shell,
body:not(.auth-locked).health-factor-detail-open .app-shell,
body:not(.auth-locked).work-order-queue-open .app-shell {
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-gutter: stable;
}
.work-order-detail-shell {
  --work-order-detail-padding-block: clamp(24px, 2.5vw, 32px);
  --work-order-detail-padding-inline: clamp(24px, 2.5vw, 32px);
  position: fixed;
  inset: 0;
  z-index: 1640;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  overscroll-behavior: contain;
  width: 100vw;
  height: 100vh;
  height: var(--visual-viewport-height, 100dvh);
  max-height: var(--visual-viewport-height, 100dvh);
  padding: 0;
  background:
    linear-gradient(180deg, rgba(245, 251, 253, 0.95), rgba(232, 243, 246, 0.9)),
    radial-gradient(circle at 10% 0%, rgba(35, 194, 199, 0.14), transparent 32%),
    radial-gradient(circle at 100% 8%, rgba(89, 184, 148, 0.1), transparent 30%);
  backdrop-filter: blur(18px) saturate(1.08);
  animation: work-order-detail-shell-enter 180ms ease both;
  touch-action: none;
}
.work-order-detail-backdrop {
  position: fixed;
  inset: 0;
  border: 0;
  background: rgba(8, 28, 42, 0.22);
  backdrop-filter: blur(18px) saturate(1.08);
  cursor: pointer;
}
.work-order-detail-content {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  height: var(--visual-viewport-height, 100dvh);
  max-width: none;
  max-height: var(--visual-viewport-height, 100dvh);
  min-height: 0;
  display: grid;
  overflow: hidden;
  touch-action: auto;
}
.work-order-detail-card {
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--ops-text, #102b3d);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 253, 0.91)),
    radial-gradient(circle at 0% 0%, rgba(30, 176, 188, 0.1), transparent 30%),
    radial-gradient(circle at 100% 12%, rgba(89, 184, 148, 0.1), transparent 32%);
  box-shadow: none;
  animation: work-order-detail-workspace-enter 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.work-order-detail-header,
.work-order-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding:
    var(--work-order-detail-padding-block)
    max(var(--work-order-detail-padding-inline), var(--safe-area-right))
    var(--work-order-detail-padding-block)
    max(var(--work-order-detail-padding-inline), var(--safe-area-left));
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.04);
}
.work-order-detail-header {
  border-bottom: 1px solid rgba(13, 36, 56, 0.08);
}
.work-order-detail-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.work-order-detail-title-row > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.work-order-detail-title-row h3 {
  margin: 0;
  overflow: hidden;
  color: var(--ops-text, #102b3d);
  font-family: var(--heading-font);
  font-size: clamp(1.8rem, 2.6vw, 3rem);
  line-height: 1.04;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-order-detail-title-row .small-copy {
  margin: 0;
}
.work-order-detail-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  color: var(--ops-accent-strong, #0f8d9a);
  border: 1px solid rgba(15, 141, 154, 0.14);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(37, 188, 197, 0.13), rgba(255, 255, 255, 0.72));
}
.work-order-detail-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.work-order-detail-actions{
  flex-wrap: wrap;
  justify-content: flex-end;
}
.work-order-detail-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  align-content: start;
  align-items: start;
  gap: clamp(18px, 2vw, 26px);
  overflow-x: hidden;
  overflow-y: auto;
  padding:
    var(--work-order-detail-padding-block)
    max(var(--work-order-detail-padding-inline), var(--safe-area-right))
    var(--work-order-detail-padding-block)
    max(var(--work-order-detail-padding-inline), var(--safe-area-left));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.work-order-detail-status-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
}
.work-order-detail-meta-item {
  min-height: 56px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 14px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
}
.work-order-detail-meta-item small {
  color: var(--ops-muted, rgba(49, 73, 90, 0.72));
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}
.work-order-detail-meta-item strong {
  color: var(--ops-text, #102b3d);
  font-size: 0.95rem;
  line-height: 1.2;
}
.work-order-detail-card .work-order-detail-grid {
  grid-column: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.work-order-detail-card .work-order-detail-block {
  min-height: 170px;
  padding: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.work-order-detail-media-section {
  grid-column: 2;
  grid-row: span 3;
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 360px;
  padding: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
.work-order-detail-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.work-order-detail-empty-media,
.work-order-detail-readonly {
  margin: 0;
  color: var(--ops-muted, rgba(49, 73, 90, 0.72));
}
.work-order-detail-empty-media {
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(13, 36, 56, 0.14);
  border-radius: 20px;
  background: rgba(249, 252, 253, 0.72);
  font-size: 0.92rem;
  font-weight: 700;
}
.work-order-detail-card .work-order-photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: stretch;
  gap: 12px;
  margin-top: 0;
}
.work-order-detail-card .work-order-photo-item {
  width: 100%;
  min-width: 0;
}
.work-order-detail-card .work-order-photo-thumb {
  width: 100%;
  border-radius: 18px;
}
.work-order-detail-card .work-order-photo-thumb img,
.work-order-detail-card .work-order-photo-thumb.is-unavailable {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.work-order-detail-readonly,
.work-order-detail-card .work-order-meta-row {
  grid-column: 1 / -1;
}
.work-order-detail-actions {
  border-top: 1px solid rgba(13, 36, 56, 0.08);
}
.auth-shell {
  display: block;
  min-height: 100dvh;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 76% 18%, rgba(70, 210, 216, 0.16), transparent 28%),
    radial-gradient(circle at 92% 86%, rgba(7, 91, 112, 0.1), transparent 34%),
    linear-gradient(135deg, #f8fcfd 0%, #edf6f8 52%, #ffffff 100%);
}
.auth-shell::before {
  opacity: 0.34;
  background:
    linear-gradient(rgba(10, 60, 80, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 60, 80, 0.03) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.7) 44%, rgba(0, 0, 0, 0.48) 100%);
}
.auth-stage.auth-stage-split {
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(420px, 44vw) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  justify-content: stretch;
}
.auth-brand-panel {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(42px, 5vw, 72px);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(2, 18, 31, 0.54), rgba(2, 18, 31, 0.84)),
    linear-gradient(120deg, rgba(2, 23, 37, 0.94), rgba(7, 75, 94, 0.58)),
    url("/public/assets/landing-yacht-dusk-bg.png") 64% center / cover no-repeat;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04), 18px 0 70px rgba(2, 24, 39, 0.18);
}
.auth-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 16%, rgba(65, 226, 229, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(1, 12, 22, 0) 0%, rgba(1, 12, 22, 0.72) 100%);
}
.auth-brand-panel::after {
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(2, 18, 31, 0.9));
}
.auth-brand-panel-lockup {
  margin-bottom: clamp(76px, 13vh, 132px);
}
.auth-brand-panel .auth-brand-logo-shell {
  width: 72px;
  height: 72px;
  border-radius: 22px;
}
.auth-brand-panel .auth-brand-lockup .brand-name {
  color: #ffffff;
  font-size: clamp(1.75rem, 2vw, 2.15rem);
}
.auth-brand-panel .auth-brand-lockup .brand-subtitle {
  color: rgba(89, 229, 232, 0.9);
  letter-spacing: 0.22em;
}
.auth-brand-panel-lede {
  max-width: 28rem;
  color: #ffffff;
  font-family: var(--body-font);
  font-size: clamp(2.7rem, 4vw, 4.7rem);
  font-weight: 800;
  line-height: 0.98;
}
.auth-brand-panel-copy {
  max-width: 28rem;
  margin: 22px 0 0;
  color: rgba(224, 242, 248, 0.86);
  font-size: clamp(1.04rem, 1.25vw, 1.18rem);
  line-height: 1.65;
}
.auth-benefit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 520px);
  max-width: none;
  margin-top: clamp(36px, 8vh, 72px);
  padding-top: 0;
}
.auth-benefit-item {
  grid-template-columns: 42px 1fr;
  align-items: center;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
}
.auth-benefit-icon svg,
.auth-card-security-badge svg,
.auth-password-toggle svg,
.auth-input-icon svg,
.auth-checkbox-control svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-benefit-item strong,
.auth-benefit-item span {
  display: block;
}
.auth-benefit-item strong {
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.2;
}
.auth-benefit-item span {
  margin-top: 4px;
  color: rgba(224, 242, 248, 0.76);
  font-size: 0.78rem;
  line-height: 1.35;
}
.auth-experience.panel {
  align-self: center;
  justify-self: center;
  width: min(560px, calc(100% - 64px));
  margin: 0;
  padding: 34px clamp(40px, 3.5vw, 50px);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 254, 255, 0.9)), rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(16, 53, 76, 0.09);
  box-shadow: 0 34px 90px rgba(13, 69, 90, 0.16), 0 14px 34px rgba(13, 36, 56, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.auth-card-brand {
  display: none;
}
.auth-card-security-badge {
  position: absolute;
  top: 42px;
  right: 42px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 16px;
  color: #0c384e;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(16, 53, 76, 0.08);
  box-shadow: 0 14px 30px rgba(13, 36, 56, 0.08);
}
.auth-back-home {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: 34px;
  margin: 0 0 20px;
  padding: 0 12px 0 10px;
  color: #0b6474;
  border: 1px solid rgba(7, 133, 153, 0.18);
  border-radius: 999px;
  background: rgba(238, 250, 252, 0.72);
  box-shadow: 0 10px 24px rgba(13, 69, 90, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.auth-back-home svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}
.auth-back-home:hover,
.auth-back-home:focus-visible {
  color: #064e63;
  border-color: rgba(7, 133, 153, 0.32);
  background: rgba(225, 249, 251, 0.92);
  box-shadow: 0 14px 30px rgba(13, 69, 90, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
  outline: none;
}
.auth-back-home:hover svg,
.auth-back-home:focus-visible svg {
  transform: translateX(-2px);
}
.onboarding-back-home {
  color: #bff8f6;
  border-color: rgba(76, 230, 232, 0.26);
  background: rgba(5, 44, 57, 0.42);
  box-shadow: 0 12px 28px rgba(0, 8, 16, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.onboarding-back-home:hover,
.onboarding-back-home:focus-visible {
  color: #ffffff;
  border-color: rgba(95, 238, 240, 0.42);
  background: rgba(7, 91, 112, 0.52);
}
.auth-mode-switch {
  width: 100%;
  margin: 0 0 28px;
}
.auth-hero {
  padding-right: 58px;
}
.auth-hero h2 {
  font-family: var(--body-font);
  font-size: clamp(3rem, 3.8vw, 3.9rem);
  line-height: 0.98;
}
.auth-form input,
.auth-form select,
.auth-invite-lookup input {
  min-height: 54px;
}
.auth-input-field {
  position: relative;
  display: block;
}
.auth-input-icon {
  position: absolute;
  top: 50%;
  left: 17px;
  z-index: 1;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  transform: translateY(-50%);
  color: #47677a;
  pointer-events: none;
}
.auth-input-field input {
  width: 100%;
  padding-left: 52px;
}
.auth-password-field input {
  padding-right: 54px;
}
.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  display: grid;
  width: 40px;
  height: 40px;
  min-height: 40px;
  place-items: center;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 13px;
  color: #47677a;
  background: transparent;
  cursor: pointer;
}
.auth-password-toggle:hover,
.auth-password-toggle.is-visible {
  color: #087d8a;
  background: rgba(33, 181, 190, 0.1);
}
.auth-form label.auth-remember-row,
.auth-remember-row {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 680;
}
.auth-remember-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
}
.auth-checkbox-control {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: transparent;
  background: #ffffff;
  border: 1px solid rgba(16, 53, 76, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 10px rgba(13, 36, 56, 0.04);
}
.auth-remember-row input:checked + .auth-checkbox-control {
  color: #ffffff;
  background: linear-gradient(135deg, #32c9c6, #078599);
  border-color: rgba(7, 133, 153, 0.5);
}
#auth-submit {
  min-height: 56px;
  margin-top: 8px;
  color: #ffffff;
  font-size: 1.04rem;
  background: linear-gradient(135deg, #33cbc8, #047f94);
  box-shadow: 0 20px 38px rgba(4, 127, 148, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
#auth-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #3ad8d5, #058da2);
  box-shadow: 0 24px 44px rgba(4, 127, 148, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin: 20px 0 12px;
  color: #81909f;
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.08em;
}
.auth-divider[hidden] {
  display: none;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16, 53, 76, 0.14));
}
.auth-divider::after {
  background: linear-gradient(90deg, rgba(16, 53, 76, 0.14), transparent);
}
.auth-support-line {
  margin: 18px 0 0;
  color: #7a8a98;
  font-size: 0.86rem;
  line-height: 1.45;
  text-align: center;
}
.auth-support-line a {
  color: #087d8a;
  font-weight: 720;
  text-decoration: none;
}
body.auth-invite-mode .auth-invite-overview-note {
  display: none;
}
body.auth-invite-create-mode .invite-context > .auth-note-card:last-child,
body.auth-invite-signin-mode .invite-context > .auth-note-card:last-child {
  display: none;
}
body.auth-invite-mode .auth-brand-panel-lede strong {
  display: block;
}
body.auth-invite-mode .auth-access-summary-card {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
body.auth-invite-mode .auth-summary-icon,
body.auth-invite-mode .auth-vessel-pill-icon {
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #087d8a;
  background: #eaf7f9;
  border: 1px solid rgba(8, 125, 138, 0.1);
}
body.auth-invite-mode .auth-summary-icon {
  width: 34px;
  height: 34px;
}
body.auth-invite-mode .auth-summary-icon::before {
  content: "";
  display: block;
  color: currentColor;
}
body.auth-invite-mode .auth-summary-icon-role::before {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 9px 5px 0 -5px currentColor, -9px 5px 0 -5px currentColor;
}
body.auth-invite-mode .auth-summary-icon-workspace::before {
  width: 15px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 4px 4px 2px 2px;
  box-shadow: inset 0 -5px 0 -3px currentColor;
}
body.auth-invite-mode .auth-meta-card-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}
body.auth-invite-mode .auth-meta-card-copy strong,
body.auth-invite-mode .auth-meta-card-copy .small-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}
body.auth-invite-mode .auth-summary-icon-role + .auth-meta-card-copy .small-copy:last-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body.auth-invite-mode .auth-summary-icon-workspace + .auth-meta-card-copy .small-copy:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.auth-invite-mode .auth-vessels-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
body.auth-invite-mode .auth-vessels-card-header > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}
body.auth-invite-mode .auth-access-count {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: #087d8a;
  background: #eaf7f9;
  border: 1px solid rgba(8, 125, 138, 0.14);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}
body.auth-invite-mode .auth-vessel-pill {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
}
body.auth-invite-mode .auth-vessel-pill-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
body.auth-invite-mode .auth-vessel-pill-more {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}
@media (min-width: 861px) {
  body.auth-invite-mode {
    overflow: hidden;
    background: #eef6f8;
  }
  body.auth-invite-mode .auth-shell {
    height: 100dvh;
    height: 100vh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
  }
  body.auth-invite-mode .auth-stage.auth-stage-split {
    height: 100dvh;
    height: 100vh;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: minmax(420px, 42.5vw) minmax(0, 1fr);
  }
  body.auth-invite-mode .auth-brand-panel {
    height: 100dvh;
    height: 100vh;
    min-height: 100vh;
    padding: clamp(34px, 4.4vw, 56px);
  }
  body.auth-invite-mode .auth-brand-panel-lockup {
    margin-bottom: clamp(42px, 7vh, 70px);
  }
  body.auth-invite-mode .auth-brand-panel-lede {
    max-width: 26rem;
    font-size: clamp(2.55rem, 3.25vw, 4rem);
    line-height: 1.02;
  }
  body.auth-invite-mode .auth-brand-panel-copy {
    max-width: 25rem;
    margin-top: 16px;
    font-size: 1.02rem;
    line-height: 1.55;
  }
  body.auth-invite-mode .auth-benefit-list {
    grid-template-columns: 1fr;
    width: min(100%, 340px);
    gap: 12px;
    margin-top: clamp(26px, 4.8vh, 46px);
  }
  body.auth-invite-mode .auth-benefit-item {
    grid-template-columns: 38px 1fr;
    padding: 10px 0;
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
  }
  body.auth-invite-mode .auth-brand-panel-footnote {
    padding-top: 18px;
    font-size: 0.88rem;
  }
  body.auth-invite-mode .auth-experience.panel {
    width: min(600px, calc(100% - 72px));
    max-height: calc(100vh - 72px);
    padding: clamp(24px, 3vh, 32px) clamp(28px, 3.2vw, 40px);
    overflow: hidden;
    border-radius: 30px;
  }
  body.auth-invite-mode .auth-card-security-badge {
    position: static;
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    color: #078ea0;
    background: #eef8fa;
    border-color: rgba(7, 142, 160, 0.12);
  }
  body.auth-invite-mode .auth-hero {
    padding-right: 0;
    text-align: center;
  }
  body.auth-invite-mode .auth-card .eyebrow {
    margin-bottom: 8px;
    color: #078ea0;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
  }
  body.auth-invite-mode .auth-hero h2 {
    width: min(100%, 430px);
    margin-inline: auto;
    font-size: clamp(2rem, 3vh, 2.45rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
  }
  body.auth-invite-mode .auth-copy {
    max-width: 38rem;
    margin: 12px auto 0;
    font-size: 0.93rem;
    line-height: 1.46;
  }
  body.auth-invite-mode .auth-context-panel {
    margin-top: 18px;
  }
  body.auth-invite-mode .auth-context-shell {
    gap: 12px;
  }
  body.auth-invite-mode .auth-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  body.auth-invite-mode .auth-meta-card,
  body.auth-invite-mode .auth-note-card {
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(16, 53, 76, 0.1);
    box-shadow: 0 12px 24px rgba(13, 36, 56, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }
  body.auth-invite-mode .auth-vessels-card {
    grid-column: 1 / -1;
  }
  body.auth-invite-mode .auth-meta-card .small-copy,
  body.auth-invite-mode .auth-note-card .small-copy {
    font-size: 0.82rem;
    line-height: 1.38;
  }
  body.auth-invite-mode .auth-meta-card > .small-copy:first-child {
    color: #078ea0;
    font-size: 0.68rem;
    font-weight: 820;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  body.auth-invite-mode .auth-meta-card strong,
  body.auth-invite-mode .auth-note-card strong {
    font-size: 0.98rem;
    line-height: 1.2;
  }
  body.auth-invite-mode .auth-vessel-pill-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  body.auth-invite-mode .auth-vessel-pill {
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 14px;
    background: #ffffff;
  }
  body.auth-invite-mode .auth-vessel-pill-icon {
    width: 24px;
    height: 24px;
    font-size: 0.62rem;
  }
  body.auth-invite-mode .auth-vessel-pill-icon::before {
    content: "";
    width: 12px;
    height: 6px;
    border-radius: 2px 2px 5px 5px;
    background: currentColor;
    box-shadow: 0 -4px 0 -2px currentColor;
  }
  body.auth-invite-mode .auth-vessel-pill strong,
  body.auth-invite-mode .auth-vessel-pill small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.auth-invite-mode .auth-vessel-pill strong {
    display: -webkit-box;
    font-size: 0.84rem;
    line-height: 1.08;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body.auth-invite-mode .auth-vessel-pill small {
    font-size: 0.72rem;
    white-space: nowrap;
  }
  body.auth-invite-mode .auth-inline-actions {
    justify-content: center;
  }
  body.auth-invite-mode .auth-inline-actions .primary-button {
    flex: 1 1 100%;
    min-height: 48px;
  }
  body.auth-invite-mode .auth-form {
    margin-top: 16px;
    gap: 10px;
  }
  body.auth-invite-mode .auth-form label {
    gap: 5px;
    font-size: 0.86rem;
  }
  body.auth-invite-mode .auth-form input,
  body.auth-invite-mode .auth-form select,
  body.auth-invite-mode .auth-input-field {
    min-height: 46px;
  }
  body.auth-invite-mode #auth-submit {
    min-height: 50px;
    margin-top: 4px;
  }
  body.auth-invite-mode .auth-footer-actions {
    align-items: center;
    margin-top: 10px;
  }
  body.auth-invite-mode .auth-support-line {
    margin-top: 10px;
    font-size: 0.78rem;
  }
  body.auth-invite-create-mode .auth-card-security-badge,
  body.auth-invite-signin-mode .auth-card-security-badge {
    width: 34px;
    height: 34px;
    margin-bottom: 6px;
  }
  body.auth-invite-create-mode .auth-experience.panel,
  body.auth-invite-signin-mode .auth-experience.panel {
    max-height: calc(100vh - 36px);
  }
  body.auth-invite-create-mode .auth-hero h2,
  body.auth-invite-signin-mode .auth-hero h2 {
    font-size: clamp(1.72rem, 2.6vh, 2.1rem);
  }
  body.auth-invite-create-mode .auth-copy,
  body.auth-invite-signin-mode .auth-copy {
    margin-top: 8px;
    font-size: 0.88rem;
    line-height: 1.38;
  }
  body.auth-invite-create-mode .auth-context-panel,
  body.auth-invite-signin-mode .auth-context-panel {
    margin-top: 12px;
  }
  body.auth-invite-create-mode .auth-meta-card,
  body.auth-invite-signin-mode .auth-meta-card {
    padding: 12px 14px;
    border-radius: 16px;
  }
  body.auth-invite-create-mode .auth-form,
  body.auth-invite-signin-mode .auth-form {
    margin-top: 12px;
    gap: 8px;
  }
  body.auth-invite-create-mode .auth-form input,
  body.auth-invite-create-mode .auth-input-field,
  body.auth-invite-signin-mode .auth-form input,
  body.auth-invite-signin-mode .auth-input-field {
    min-height: 42px;
  }
  body.auth-invite-create-mode #auth-submit,
  body.auth-invite-signin-mode #auth-submit {
    min-height: 46px;
    margin-top: 2px;
  }
  body.auth-invite-create-mode .auth-footer-actions,
  body.auth-invite-signin-mode .auth-footer-actions {
    width: 100%;
    margin-top: 2px;
    align-items: center;
  }
  body.auth-invite-create-mode .auth-footer-copy,
  body.auth-invite-signin-mode .auth-footer-copy {
    font-size: 0.76rem;
    line-height: 1.25;
    text-align: center;
  }
  body.auth-invite-create-mode .auth-support-line,
  body.auth-invite-signin-mode .auth-support-line {
    display: none;
  }
}
@media (max-width: 1080px) {
  .auth-stage.auth-stage-split {
    grid-template-columns: minmax(340px, 40vw) minmax(0, 1fr);
  }
  .auth-benefit-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px) {
  .auth-stage.auth-stage-split {
    grid-template-columns: 1fr;
    align-content: start;
  }
  .auth-brand-panel {
    height: auto;
    min-height: auto;
    padding: max(22px, var(--safe-area-top)) max(22px, var(--safe-area-right)) 24px max(22px, var(--safe-area-left));
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
  .auth-brand-panel-lockup {
    margin-bottom: 22px;
  }
  .auth-brand-panel-lede {
    max-width: 24rem;
    font-size: clamp(2rem, 8vw, 2.8rem);
  }
  .auth-brand-panel-copy {
    max-width: 30rem;
    margin-top: 12px;
    font-size: 0.98rem;
  }
  .auth-benefit-list{
    display: none;
  }
  .auth-experience.panel {
    width: min(560px, calc(100% - 28px));
    margin: 18px auto max(18px, var(--safe-area-bottom));
    padding: 30px 22px 24px;
    border-radius: 28px;
  }
  .auth-card-security-badge {
    display: none;
  }
  .auth-hero {
    padding-right: 0;
  }
  body.auth-invite-mode .auth-brand-panel-lede {
    max-width: 100%;
  }
  body.auth-invite-mode .auth-brand-panel-copy {
    max-width: 100%;
  }
}
@media (max-width: 460px) {
  .auth-form-inline-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .auth-toggle.text-button {
    width: 100%;
  }
}
.work-order-queue-field-controls {
  flex: 0 1 740px;
  min-width: min(100%, 560px);
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 12px;
}
.work-order-history-range-control {
  flex: 0 0 170px;
}
.work-order-queue-search-control {
  flex: 1 1 280px;
  min-width: 220px;
}
.work-order-history-range-control span,
.work-order-queue-search-control label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(216, 235, 241, 0.78);
}
.work-order-queue-search-shell {
  position: relative;
  display: block;
}
.work-order-queue-search-shell input {
  width: 100%;
  min-height: 46px;
  padding-right: 44px;
  border-radius: 16px;
}
.work-order-queue-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  color: rgba(216, 235, 241, 0.88);
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.work-order-queue-search-clear:hover {
  background: rgba(255, 255, 255, 0.18);
}
.work-order-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.work-order-history-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  color: rgba(67, 92, 111, 0.86);
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 999px;
  background: rgba(245, 249, 251, 0.82);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
}
.work-order-history-readonly {
  margin: 2px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 14px;
  background: rgba(245, 249, 251, 0.82);
}
.work-order-queue-list {
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  touch-action: pan-y;
}
@media (max-width: 760px) {
  .work-order-preview-topline {
    align-items: stretch;
    flex-direction: column;
  }
  .work-order-open-queue-button {
    width: 100%;
    justify-content: center;
  }
  .work-order-preview-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .work-order-preview-row .status-badge {
    grid-column: 2;
    justify-self: start;
  }
  .work-order-preview-chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .work-order-queue-shell {
    align-items: center;
    justify-content: center;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .work-order-queue-drawer {
    width: min(100%, 460px);
    height: calc(var(--mobile-visual-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    max-height: calc(var(--mobile-visual-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    margin: 0;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    border-radius: 24px;
  }
  .work-order-queue-drawer-header,
  .work-order-queue-drawer-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .work-order-queue-drawer-controls .sort-shell {
    flex-basis: auto;
  }
  .work-order-detail-shell {
    align-items: stretch;
    justify-items: stretch;
    padding: 0;
  }
  .work-order-detail-content {
    width: 100%;
    max-height: 100dvh;
  }
  .work-order-detail-card {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-inline: 0;
    border-block: 0;
  }
  .work-order-detail-header,
  .work-order-detail-actions {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }
  .work-order-detail-title-row {
    align-items: flex-start;
  }
  .work-order-detail-title-row h3 {
    white-space: normal;
  }
  .work-order-detail-actions{
    width: 100%;
    justify-content: stretch;
  }
  .work-order-detail-actions > button{
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .work-order-detail-body {
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  }
  .work-order-detail-card .work-order-detail-grid {
    grid-template-columns: 1fr;
  }
  .work-order-queue-field-controls {
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .work-order-history-range-control {
    flex-basis: auto;
  }
  .work-order-queue-search-control {
    min-width: 0;
  }
}
.work-order-groups {
  display: grid;
  gap: 12px;
}
.work-order-group {
  display: grid;
  gap: 10px;
}
.work-order-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 60px;
  padding: 12px 14px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  cursor: pointer;
  text-align: left;
}
.work-order-group-toggle-copy {
  display: grid;
  gap: 4px;
}
.work-order-group-toggle-copy strong {
  font-size: 1.02rem;
  color: var(--ink);
}
.work-order-group-toggle-copy .small-copy {
  margin: 0;
  font-size: 0.86rem;
}
.work-order-group-toggle-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sea-deep);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.work-order-group-toggle-indicator::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 180ms ease;
}
.work-order-group-toggle[aria-expanded="true"] .work-order-group-toggle-indicator::before {
  transform: rotate(225deg) translateY(-1px);
}
.work-order-group-panel,
.work-order-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease, opacity 220ms ease;
  opacity: 0.36;
}
.work-order-group-panel.is-expanded,
.work-order-accordion-panel.is-expanded {
  grid-template-rows: 1fr;
  opacity: 1;
}
.work-order-group-panel-inner,
.work-order-accordion-panel-inner {
  min-height: 0;
  overflow: hidden;
}
.work-order-compact-list {
  display: grid;
  gap: 10px;
}
.work-order-accordion-item + .work-order-accordion-item {
  border-top: 0;
}
.weekly-report-section .report-list-shell {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.weekly-report-section .report-list-heading {
  padding: 0 2px;
}
.weekly-report-section .report-list-heading h3 {
  font-size: 1.02rem;
}
.work-order-accordion-item {
  overflow: hidden;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 10px 22px rgba(6, 35, 52, 0.06);
}
.work-order-accordion-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.work-order-accordion-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.work-order-accordion-thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(248, 252, 255, 0.92);
}
.work-order-accordion-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work-order-accordion-thumb .work-order-photo-fallback {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.work-order-accordion-thumb .work-order-photo-fallback svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.work-order-accordion-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.work-order-accordion-copy strong {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.22;
}
.work-order-accordion-date-mobile {
  display: none;
}
.work-order-accordion-date-mobile,
.work-order-card-summary {
  color: rgba(76, 97, 113, 0.82);
  font-size: 0.82rem;
  line-height: 1.25;
}
.work-order-card-summary {
  display: inline-flex;
}
.work-order-accordion-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  text-align: right;
}
.work-order-accordion-date {
  color: rgba(76, 97, 113, 0.82);
  font-size: 0.84rem;
}
.work-order-accordion-indicator {
  color: var(--sea-deep);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.work-order-accordion-panel-inner {
  padding: 0 12px 12px;
}
.work-order-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.work-order-detail-grid-empty {
  grid-template-columns: 1fr;
}
.work-order-detail-block {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(248, 252, 255, 0.82);
}
.work-order-detail-block p {
  margin: 0;
  color: var(--ink);
  line-height: 1.42;
  white-space: pre-wrap;
}
.work-order-detail-block.is-empty p {
  color: var(--ink-soft);
}
.work-order-accordion-actions {
  margin-top: 10px;
}
body:not(.auth-locked) #work-order-mobile-sheet:not([hidden]) {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  box-sizing: border-box;
}
.work-order-mobile-sheet-panel {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(1500px, calc(100vw - 32px));
  max-width: min(1500px, calc(100vw - 32px));
  height: calc(var(--visual-viewport-height, 100dvh) - 32px);
  max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 24px;
  transform: none;
  overflow: hidden;
  overflow-x: hidden;
  box-sizing: border-box;
}
.work-order-mobile-sheet-host {
  min-height: 0;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 92px;
}
.work-order-mobile-sheet-host .report-form {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
@media (min-width: 901px) {
  body:not(.auth-locked) #work-order-mobile-sheet .mobile-shell-sheet-header {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 8;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(13, 36, 56, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 254, 0.92));
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host {
    padding: 18px 2px 2px;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form {
    min-height: 100%;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    align-content: start;
    gap: 14px;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form-topline,
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions {
    grid-column: 1 / -1;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host #work-order-form > label {
    grid-column: span 3;
    min-width: 0;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host #work-order-form > label:has(input[name="item"]),
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host #work-order-form > label:has(select[name="vesselArea"]),
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host #work-order-form > label:has(input[name="location"]) {
    grid-column: span 4;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host #work-order-form > label:has(textarea) {
    grid-column: span 6;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host :is(.work-order-link-section, .work-order-crew-field) {
    grid-column: span 6;
    height: 100%;
    min-width: 0;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .work-order-photo-field {
    grid-column: 1 / -1;
    min-width: 0;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-link-picker-results {
    max-height: min(25dvh, 240px);
    overflow-y: auto;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-controls {
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview {
    max-height: min(24dvh, 220px);
    overflow-y: auto;
    padding-right: 2px;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host textarea {
    min-height: 112px;
    resize: vertical;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 -2px -2px;
    padding: 14px 0 2px;
    background: linear-gradient(180deg, rgba(250, 253, 254, 0), rgba(250, 253, 254, 0.98) 30%);
    backdrop-filter: blur(14px) saturate(1.04);
    -webkit-backdrop-filter: blur(14px) saturate(1.04);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions > * {
    min-height: 42px;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  body:not(.auth-locked) #work-order-mobile-sheet:not([hidden]) {
    padding:
      max(14px, var(--safe-area-top, 0px))
      max(14px, var(--safe-area-right, 0px))
      max(14px, var(--safe-area-bottom, 0px))
      max(14px, var(--safe-area-left, 0px));
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-panel {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    height: calc(var(--visual-viewport-height, 100dvh) - 28px);
    max-height: calc(var(--visual-viewport-height, 100dvh) - 28px);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host #work-order-form > label,
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host #work-order-form > label:has(input[name="item"]),
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host #work-order-form > label:has(select[name="vesselArea"]),
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host #work-order-form > label:has(input[name="location"]) {
    grid-column: span 3;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host #work-order-form > label:has(textarea),
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host :is(.work-order-link-section, .work-order-crew-field, .work-order-photo-field) {
    grid-column: 1 / -1;
  }
}
.work-order-photo-thumb {
  display: inline-flex;
  padding: 0;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  cursor: pointer;
}
.work-order-photo-item {
  display: grid;
  gap: 6px;
  width: 112px;
}
.work-order-photo-thumb img {
  display: block;
  width: 112px;
  height: 84px;
  object-fit: cover;
}
.work-order-photo-thumb.is-unavailable {
  width: 112px;
  height: 84px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: rgba(63, 85, 102, 0.82);
  cursor: default;
}
.work-order-photo-fallback {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.work-order-photo-fallback svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.work-order-photo-remove {
  min-height: 32px;
  border: 1px solid rgba(196, 80, 72, 0.22);
  border-radius: 999px;
  background: rgba(255, 245, 242, 0.92);
  color: #9e3f39;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.work-order-photo-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.work-order-suggestion-section {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.work-order-suggestion-heading {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 10px 22px rgba(6, 35, 52, 0.05);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.work-order-suggestion-heading-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.work-order-suggestion-heading-main strong {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ink);
}
.work-order-suggestion-count {
  color: rgba(76, 97, 113, 0.82);
  font-size: 0.92rem;
}
.work-order-suggestion-heading-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sea-deep);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.work-order-suggestion-heading-action::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 180ms ease;
}
.work-order-suggestion-heading[aria-expanded="true"] .work-order-suggestion-heading-action::before {
  transform: rotate(225deg) translateY(-1px);
}
.work-order-suggestion-list {
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 248, 251, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
  overflow: visible;
}
.work-order-suggestion-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px !important;
  padding: 6px 8px;
  overflow: visible;
}
.work-order-suggestion-toggle {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding-right: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 46px;
}
.work-order-suggestion-toggle .work-order-accordion-copy {
  gap: 6px;
}
.work-order-suggestion-add-button {
  order: -1;
  position: static;
  display: inline-flex !important;
  flex: 0 0 76px;
  z-index: 2;
  width: 76px;
  min-width: 0;
  min-height: 40px;
  justify-content: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f7d18d, var(--sun));
  color: #062332;
  box-shadow: none;
  opacity: 1 !important;
  visibility: visible !important;
}
.work-order-suggestion-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.report-action-button {
  background: rgba(14, 122, 165, 0.1);
  color: var(--sea-deep);
  border: 1px solid rgba(14, 122, 165, 0.14);
}
.report-action-button.danger {
  color: #9a4a3a;
  background: rgba(239, 124, 98, 0.12);
  border-color: rgba(239, 124, 98, 0.14);
}
.report-action-button:hover {
  background: rgba(14, 122, 165, 0.16);
  box-shadow: var(--button-shadow-hover);
}
.log-empty {
  color: rgba(76, 97, 113, 0.6);
}
.vendor-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
}
.vendor-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}
.vendor-search-shell {
  display: grid;
  gap: 8px;
}
.vendor-search-shell span {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(241, 239, 232, 0.68);
}
.vendor-search-shell input {
  min-height: 46px;
  border-radius: 16px;
}
.vendor-layout-compact {
  gap: 12px;
}
.report-list-heading .sort-shell {
  justify-self: end;
}
.expenses-section .sort-shell span {
  color: rgba(42, 67, 86, 0.86);
}
.expenses-section .sort-shell select {
  border-color: rgba(13, 36, 56, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  color-scheme: light;
}
.user-form > .form-row,
.user-form > .form-actions{
  grid-column: 1 / -1;
}
.users-feedback {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  color: var(--ink);
}
.users-feedback.success {
  background: rgba(76, 183, 165, 0.16);
  color: #195f53;
}
.users-feedback.error {
  background: rgba(239, 124, 98, 0.16);
  color: #8d3f2f;
}
.account-list {
  display: grid;
  gap: 14px;
}
.account-card {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}
.account-title {
  color: var(--ink);
}
.account-email {
  margin: 6px 0 0;
  color: var(--ink-soft);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.account-meta-text,
.account-current-note {
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.account-actions {
  margin-top: 14px;
  justify-content: flex-start;
}
.user-table-button {
  min-width: 120px;
  padding: 8px 12px;
  color: var(--ink);
  background: rgba(13, 36, 56, 0.08);
  text-align: center;
  white-space: nowrap;
}
.user-table-button:hover {
  background: rgba(13, 36, 56, 0.14);
}
.user-delete-button {
  color: #8d3f2f;
  background: rgba(239, 124, 98, 0.16);
}
.user-delete-button:hover {
  background: rgba(239, 124, 98, 0.24);
}
.vendor-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vendor-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.88rem;
}
.vendor-filter span {
  display: inline-flex;
  min-width: 22px;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.06);
  font-size: 0.76rem;
}
.vendor-filter.active {
  border-color: rgba(14, 122, 165, 0.18);
  color: var(--sea-deep);
  background: rgba(14, 122, 165, 0.1);
}
.vendor-form {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}
.vendor-form > .form-row,
.vendor-form > .form-actions {
  grid-column: 1 / -1;
}
.vendor-directory-wrap {
  min-width: 0;
}
.vendor-directory-list {
  display: grid;
  gap: 10px;
}
.vendor-directory-item {
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: var(--card-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.vendor-directory-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.vendor-directory-trigger:hover {
  background: var(--tap-surface);
}
.vendor-directory-primary,
.vendor-directory-secondary {
  min-width: 0;
}
.vendor-directory-title-lockup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.vendor-directory-title {
  display: block;
  font-size: 1rem;
  line-height: 1.2;
}
.vendor-directory-contact,
.vendor-directory-relationship {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.vendor-directory-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.vendor-directory-secondary {
  display: grid;
  gap: 6px;
  justify-items: end;
}
.vendor-directory-open {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea-deep);
}
.vendors-section .status-badge,
.vendor-modal .status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 6px 12px;
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.category-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  max-width: 100%;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  font-size: 0.82rem;
  line-height: 1.18;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.category-a-c-tech {
  background: #2a5b7a;
}
.category-appliance-repair {
  background: #73558d;
}
.category-wax-polish {
  background: #27527d;
}
.category-electrician {
  background: #8b6a20;
}
.category-captain {
  background: #6a6a6a;
}
.category-intrepid-tech {
  background: #7a5e47;
}
.category-diver {
  background: #305d8c;
}
.category-engines {
  background: #8d5a51;
}
.category-generator {
  background: #4a7a5d;
}
.category-a-c-chiller-system {
  background: #446e9b;
}
.category-bilge-system,
.category-hull {
  background: #4f7397;
}
.category-batteries-electrical,
.category-electrical {
  background: #8a6d2a;
}
.category-fuel-system {
  background: #a85d56;
}
.category-water-system,
.category-fresh-water-system {
  background: #527db0;
}
.category-tender-jet-ski,
.category-water-toys {
  background: #89597d;
}
.category-general {
  background: #676767;
}
.vendors-section .category-chip,
.vendor-modal .category-chip,
.inventory-category-chip {
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(13, 36, 56, 0.06);
  color: var(--ink-soft);
  font-weight: 700;
}
.row-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.text-button {
  min-height: 40px;
  border: 1px solid rgba(13, 36, 56, 0.12);
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: var(--button-shadow);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-soft),
    color var(--transition-fast);
}
.text-button.danger {
  background: rgba(124, 57, 40, 0.14);
  color: #8d3f2f;
}
.text-button:hover {
  transform: none;
  border-color: rgba(13, 36, 56, 0.16);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--button-shadow-hover);
}
.text-button:active {
  transform: none;
  box-shadow: var(--button-shadow-active);
}
.action-overflow-menu {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  max-width: 100%;
}
.action-overflow-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  list-style: none;
  white-space: nowrap;
}
.action-overflow-trigger::-webkit-details-marker {
  display: none;
}
.action-overflow-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(13, 36, 56, 0.07);
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1;
}
.action-overflow-menu[open] > .action-overflow-trigger {
  border-color: rgba(14, 122, 165, 0.2);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--button-shadow-hover);
}
.action-overflow-menu[open] .action-overflow-icon {
  background: rgba(14, 122, 165, 0.12);
  color: var(--sea);
}
.action-overflow-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: max-content;
  min-width: 190px;
  max-width: min(280px, calc(100vw - 32px));
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(6, 35, 52, 0.16);
}
.action-overflow-list .text-button,
.action-overflow-list .ghost-button,
.action-overflow-list .primary-button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  border-radius: 14px;
  box-shadow: none;
}
.action-overflow-list .text-button:hover,
.action-overflow-list .ghost-button:hover,
.action-overflow-list .primary-button:hover {
  box-shadow: none;
}
.action-overflow-list .danger {
  color: #9b3f2e;
}
.row-actions .action-overflow-menu,
.form-actions .action-overflow-menu,
.weekly-log-actions .action-overflow-menu,
.maintenance-section-card-actions .action-overflow-menu,
.maintenance-table-actions .action-overflow-menu,
.report-archive-version-actions .action-overflow-menu {
  margin-left: 0;
}
.vendor-detail-actions .action-overflow-list,
.inventory-detail-actions .action-overflow-list {
  top: auto;
  bottom: calc(100% + 8px);
}
.vendor-directory-item,
.inventory-directory-item,
.work-order-accordion-item,
.crew-directory-item,
.report-overview-card,
.report-list-shell,
.expense-metric-card{
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-soft),
    background var(--transition-fast);
}
.vendor-directory-item:hover,
.inventory-directory-item:hover,
.work-order-accordion-item:hover,
.crew-directory-item:hover,
.report-overview-card:hover,
.report-list-shell:hover,
.expense-metric-card:hover{
  box-shadow: 0 14px 30px rgba(6, 35, 52, 0.1);
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
.text-button:focus-visible,
.primary-button:focus-visible,
.ghost-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.workspace-tab:focus-visible {
  outline: none;
  border-color: rgba(11, 101, 141, 0.38);
  box-shadow: inset 0 0 0 1px rgba(11, 101, 141, 0.22);
}
.section-heading {
  gap: 18px;
  margin-bottom: 18px;
}
.app-screen,
.report-layout-upgraded,
.vendor-directory-list,
.inventory-directory-list,
.work-order-compact-list {
  gap: 16px;
}
.app-screen-header,
.app-screen-toolbar,
.report-overview-topline,
.compact-disclosure-summary {
  gap: 14px;
}
.report-overview-card,
.report-list-shell,
.report-summary-card,
.app-screen-summary-card,
.vessel-mobile-command-card,
.compact-disclosure-card,
.detail-item {
  border-radius: var(--radius-card);
  border-color: var(--card-border);
  box-shadow: var(--shadow-xs);
}
.work-order-accordion-item,
.vendor-directory-item,
.inventory-directory-item,
.vessel-mobile-command-stat,
.work-order-detail-block,
.inventory-directory-metric {
  border-radius: var(--radius-row);
  border-color: var(--card-border);
}
.app-screen-summary-card,
.detail-item,
.vessel-mobile-command-stat,
.inventory-directory-metric,
.work-order-detail-block {
  background: var(--card-surface-muted);
}
.eyebrow,
.metric-label,
.detail-label,
.app-screen-search span,
.report-history-picker span,
.inventory-directory-metric span,
.compact-summary-pill {
  font-weight: 650;
  letter-spacing: 0.13em;
}
.eyebrow {
  letter-spacing: 0.22em;
}
.metric-label,
.detail-label,
.app-screen-search span,
.report-history-picker span,
.inventory-directory-metric span {
  color: rgba(42, 67, 86, 0.86);
}
.metric-value,
.app-screen-summary-value,
.report-summary-value,
.detail-value,
.inventory-directory-metric strong,
.vessel-mobile-command-stat strong {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.app-screen-copy,
.app-screen-note,
.compact-disclosure-summary-copy,
.report-action-note,
.inventory-directory-notes {
  color: rgba(63, 85, 102, 0.88);
}
.primary-button,
.ghost-button,
.text-button,
.report-action-button,
.workspace-tab,
.workspace-mobile-current,
.workspace-mobile-more-button,
.workspace-mobile-primary-action,
.compact-disclosure-summary,
.work-order-accordion-toggle,
.work-order-group-toggle,
.vendor-directory-trigger,
.inventory-directory-trigger,
.vessel-action-button,
.mobile-shell-action-item {
  touch-action: manipulation;
  user-select: none;
}
.primary-button,
.ghost-button,
.text-button,
.report-action-button {
  min-height: 44px;
  font-weight: 700;
}
.text-button,
.ghost-button,
.report-action-button {
  box-shadow: var(--button-shadow);
}
.compact-disclosure-summary:hover,
.work-order-accordion-toggle:hover,
.work-order-group-toggle:hover,
.vendor-directory-trigger:hover,
.inventory-directory-trigger:hover,
.vessel-action-button:hover,
.mobile-shell-action-item:hover {
  background: var(--tap-surface);
}
.compact-disclosure-summary:active,
.work-order-accordion-toggle:active,
.work-order-group-toggle:active,
.vendor-directory-trigger:active,
.inventory-directory-trigger:active,
.vessel-action-button:active,
.mobile-shell-action-item:active {
  transform: scale(0.992);
}
.primary-button:hover,
.ghost-button:hover,
.text-button:hover,
.report-action-button:hover,
.action-overflow-trigger:hover,
.vessel-action-button:hover,
.workspace-mobile-primary-action:hover,
.workspace-mobile-more-button:hover,
.primary-button:active,
.ghost-button:active,
.text-button:active,
.report-action-button:active,
.action-overflow-trigger:active,
.vessel-action-button:active,
.workspace-mobile-primary-action:active,
.workspace-mobile-more-button:active {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.vendor-modal .eyebrow,
.vendor-modal h2,
.vendor-modal h3,
.vendor-modal label {
  color: var(--ink);
}
.vendor-modal .eyebrow {
  color: var(--sea);
}
.vendor-modal input,
.vendor-modal select,
.vendor-modal textarea {
  border-color: rgba(13, 36, 56, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
}
.vendor-modal input::placeholder,
.vendor-modal textarea::placeholder {
  color: rgba(76, 97, 113, 0.64);
}
.vendor-modal {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: calc(var(--visual-viewport-height) - 24px);
  overflow: auto;
  padding: 28px;
  display: grid;
  gap: 20px;
}
.vendor-modal-copy {
  margin: 10px 0 0;
  max-width: 600px;
}
.vendor-modal-body {
  display: grid;
  gap: 18px;
}
.vendor-detail-panel {
  display: grid;
  gap: 18px;
}
.vendor-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.vendor-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.vendor-detail-contact {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}
.vendor-detail-last-used {
  display: grid;
  gap: 4px;
  min-width: 132px;
  text-align: right;
}
.vendor-detail-last-used span {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(76, 97, 113, 0.72);
}
.vendor-detail-last-used strong {
  color: var(--ink);
}
.vendor-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.vendor-detail-metric {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(243, 247, 250, 0.88);
}
.vendor-detail-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.86fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.vendor-detail-section {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.8);
}
.vendor-detail-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.vendor-detail-section h3 {
  margin: 4px 0 0;
  font-size: 1.02rem;
}
.vendor-detail-list,
.vendor-reference-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vendor-detail-list li,
.vendor-reference-item {
  display: grid;
  gap: 3px;
}
.vendor-detail-list span,
.vendor-reference-item span {
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.vendor-reference-empty {
  margin: 0;
  color: var(--ink-soft);
}
.vendor-detail-actions {
  justify-content: flex-end;
}
.vendor-modal-form {
  padding: 0;
}
.inventory-modal input::placeholder,
.inventory-modal textarea::placeholder {
  color: rgba(76, 97, 113, 0.64);
}
.inventory-modal {
  position: relative;
  z-index: 1;
  width: min(860px, calc(100vw - 48px));
  max-height: min(900px, calc(var(--visual-viewport-height) - 48px));
  overflow: auto;
  padding: 30px;
  display: grid;
  gap: 22px;
  margin: 0 auto;
}
.inventory-modal-heading {
  align-items: flex-start;
  gap: 18px;
}
.inventory-modal-heading .text-button {
  flex: 0 0 auto;
  min-height: 40px;
  padding-inline: 14px;
  color: #067b87;
  border-color: rgba(24, 180, 190, 0.24);
  background: rgba(221, 247, 249, 0.72);
}
.inventory-modal-heading .text-button:hover {
  color: #055f69;
  border-color: rgba(24, 180, 190, 0.34);
  background: rgba(221, 247, 249, 0.92);
}
.inventory-modal-copy {
  margin: 10px 0 0;
  max-width: 640px;
}
.inventory-modal-body,
.inventory-detail-panel {
  display: grid;
  gap: 18px;
}
.inventory-detail-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: linear-gradient(180deg, rgba(243, 247, 250, 0.92), rgba(255, 255, 255, 0.84));
}
.inventory-detail-photo {
  width: 104px;
  height: 104px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  color: #078b95;
  border: 1px solid rgba(24, 180, 190, 0.24);
  background: rgba(218, 247, 249, 0.86);
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(13, 36, 56, 0.12);
}
.inventory-detail-photo .inventory-item-icon,
.inventory-detail-photo .inventory-item-thumbnail {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  box-shadow: none;
}
.inventory-detail-photo.has-image {
  background: rgba(255, 255, 255, 0.9);
}
.inventory-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.inventory-category-chip {
  color: var(--ink);
  background: rgba(13, 36, 56, 0.08);
}
.inventory-detail-hero h3 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--ink);
}
.inventory-detail-copy,
.inventory-detail-body-copy {
  margin: 10px 0 0;
  color: var(--ink-soft);
  line-height: 1.62;
}
.inventory-detail-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.inventory-detail-metric {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(243, 247, 250, 0.88);
}
.inventory-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
}
.inventory-detail-section {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.82);
}
.inventory-detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.inventory-detail-list li {
  display: grid;
  gap: 3px;
}
.inventory-detail-list span {
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.inventory-history-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.inventory-history-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.inventory-history-list strong,
.inventory-history-list small {
  display: block;
}
.inventory-history-list strong {
  color: var(--ink);
  font-size: 0.9rem;
}
.inventory-history-list small {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.42;
}
.inventory-detail-actions {
  justify-content: flex-end;
}
.inventory-modal-form {
  padding: 0;
  margin-top: 0;
  border-top: 0;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  gap: 16px 18px;
  align-items: start;
}
.inventory-modal-form > * {
  min-width: 0;
}
.inventory-item-name-field,
.inventory-category-sku-row {
  grid-column: 1;
}
.inventory-form-photo-field {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 100%;
}
.inventory-quantity-unit-row,
.inventory-reorder-cost-row,
.inventory-location-status-row,
.inventory-notes-field,
.inventory-modal-actions {
  grid-column: 1 / -1;
}
.inventory-form-row {
  gap: 16px;
}
.inventory-modal-form input,
.inventory-modal-form select,
.inventory-modal-form textarea {
  min-height: 48px;
}
.inventory-notes-field textarea {
  min-height: 92px;
  resize: vertical;
}
.inventory-modal-actions {
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
}
.inventory-photo-field {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 16px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(244, 250, 251, 0.9), rgba(255, 255, 255, 0.82));
}
.inventory-photo-preview {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}
.inventory-photo-preview img,
.inventory-item-thumbnail img,
.inventory-detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inventory-photo-placeholder,
.inventory-item-thumbnail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #078b95;
  border: 1px solid rgba(24, 180, 190, 0.24);
  background: rgba(218, 247, 249, 0.86);
}
.inventory-photo-placeholder {
  width: 68px;
  height: 68px;
  border-radius: 18px;
}
.inventory-photo-preview.has-image img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  box-shadow: 0 16px 34px rgba(13, 36, 56, 0.12);
}
.inventory-photo-preview strong,
.inventory-photo-preview small {
  display: block;
  min-width: 0;
}
.inventory-photo-preview strong {
  color: var(--ink);
}
.inventory-photo-preview small {
  margin-top: 4px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.inventory-photo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.inventory-photo-choose {
  position: relative;
  cursor: pointer;
  min-height: 42px;
}
.inventory-photo-choose input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.inventory-directory-list {
  display: grid;
  gap: 10px;
}
.inventory-directory-item {
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.88);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.inventory-directory-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.72fr);
  gap: 16px;
  align-items: center;
  padding: 15px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.inventory-directory-trigger:hover {
  background: rgba(13, 36, 56, 0.03);
}
.inventory-directory-primary,
.inventory-directory-secondary {
  min-width: 0;
}
.inventory-directory-title-lockup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.inventory-directory-title {
  display: block;
  font-size: 1rem;
  line-height: 1.24;
}
.inventory-directory-location {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}
.inventory-directory-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.inventory-directory-metric {
  display: inline-grid;
  gap: 2px;
  min-width: 74px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(243, 247, 250, 0.92);
}
.inventory-directory-metric span {
  color: rgba(76, 97, 113, 0.78);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.inventory-directory-secondary {
  display: grid;
  gap: 8px;
  justify-items: end;
}
.inventory-directory-notes {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.52;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.inventory-directory-open {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(14, 122, 165, 0.92);
}
@media (max-width: 1040px) {
  .maintenance-form,
.vendor-form{
    grid-template-columns: 1fr;
  }
  .maintenance-engine-grid {
    grid-template-columns: 1fr;
  }
  .form-row.form-row-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .maintenance-health-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .maintenance-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .maintenance-summary-card-health {
    grid-column: 1 / -1;
  }
  .maintenance-focus-card-wide {
    grid-column: 1 / -1;
  }
  .maintenance-section-summary,
  .maintenance-section-card-topline {
    flex-direction: column;
  }
  .maintenance-section-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .maintenance-section-card-grid {
    grid-template-columns: 1fr;
  }
  .maintenance-task-group-heading,
  .maintenance-quick-actions,
  .maintenance-workspace-nav {
    flex-direction: column;
    align-items: flex-start;
  }
  .maintenance-board-wrap {
    overflow-x: auto;
  }
  .user-table-wrap {
    overflow-x: auto;
  }

  .work-order-accordion-toggle,
  .work-order-group-toggle {
    align-items: flex-start;
  }
  .work-order-accordion-meta {
    max-width: 220px;
  }
  .work-order-suggestion-summary-row {
    padding: 6px 8px;
  }
  .work-order-suggestion-add-button {
    flex-basis: 76px;
  }
  .crew-directory-toggle,
  .crew-directory-summary {
    grid-template-columns: 1fr;
  }
  .crew-directory-chips,
  .crew-directory-meta {
    justify-content: flex-start;
    justify-items: start;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@keyframes savePulse {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}
@keyframes mobileScreenIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1320px) {
  .vessel-forms-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1180px) {
  .workspace,
.hero,
.access-modal-grid,
.overview-grid,
.report-layout,
.vendor-layout,
.vessel-profile-hero,
.vessel-forms-grid,
.vessel-widget-grid,
.vessel-details-grid,
.system-meta-grid,
.crew-detail-grid,
.crew-credential-meta-grid{
    grid-template-columns: 1fr;
  }
  .crew-credential-topline,
  .crew-credential-section-topline,
  .crew-credential-document {
    flex-direction: column;
  }
  .expense-metric-grid,
.report-summary-grid,
.expense-insight-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-screen-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-screen-header,
  .app-screen-toolbar {
    grid-template-columns: 1fr;
  }
  .app-screen-toolbar-group,
  .app-screen-toolbar-group-end {
    justify-content: flex-start;
  }
  .compact-disclosure-summary {
    grid-template-columns: 1fr;
  }
  .compact-disclosure-summary-meta {
    justify-content: flex-start;
  }
  .vessel-selector-topline {
    flex-direction: column;
  }
  .vessel-selector-summary {
    justify-content: flex-start;
  }
  .vessel-glance-grid,
  .vessel-service-grid,
  .machinery-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .expense-trend-card {
    grid-column: 1 / -1;
  }
  .access-card-invite {
    position: static;
  }
.access-card-pending,
.access-card-users {
  grid-column: auto;
  }
}
@media (max-width: 980px) {
  .maintenance-cadence-grid,
  .maintenance-cycle-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .action-overflow-menu {
    max-width: 100%;
  }
  .action-overflow-trigger {
    min-height: 44px;
  }
  .action-overflow-list {
    min-width: min(220px, calc(100vw - 32px));
  }
  .row-actions .action-overflow-list,
  .form-actions .action-overflow-list,
  .weekly-log-actions .action-overflow-list,
  .maintenance-section-card-actions .action-overflow-list,
  .report-archive-version-actions .action-overflow-list {
    right: 0;
  }
  .workspace-nav {
    gap: 10px;
    padding: 14px 14px 12px;
  }
  .workspace-nav-topline{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .workspace-account-shell {
    justify-self: stretch;
  }
  .workspace-account-button {
    width: 100%;
  }
  .workspace-account-menu {
    width: 100%;
    max-width: none;
  }
  .auth-shell {
    padding: 16px;
  }
  .auth-experience.panel {
    padding: 30px 24px 26px;
  }
  .auth-hero h2 {
    font-size: 2.72rem;
    line-height: 1;
  }
  .auth-mode-switch {
    width: 100%;
  }
  .auth-meta-grid {
    grid-template-columns: 1fr;
  }
  .auth-inline-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .app-shell {
    width: min(100vw - 20px, 100%);
    padding-top: 14px;
    padding-bottom: 16px;
  }
  .access-modal {
    padding: 20px;
    max-height: calc(var(--visual-viewport-height) - 16px);
  }
  .access-card {
    max-height: calc(var(--visual-viewport-height) - 180px);
  }
  .hero,
.section-block,
.spotlight{
    padding: 20px;
  }
  .detail-row,
.form-row,
.invite-form,
.summary-grid,
.vessel-profile-stats,
.vessel-glance-grid,
.vessel-service-grid,
.machinery-card-grid{
    grid-template-columns: 1fr;
  }
  .vessel-composer-summary,
  .section-heading,
  .machinery-inline-topline {
    flex-direction: column;
    align-items: flex-start;
  }
  .section-heading,
  .app-screen-header {
    gap: 14px;
    margin-bottom: 16px;
  }
  .section-heading h2,
  .app-screen-header-main h2 {
    font-size: clamp(1.68rem, 7vw, 2.12rem);
    line-height: 1.08;
  }
  .section-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .vessel-composer-summary-copy {
    text-align: left;
  }
  .maintenance-overview-grid {
    grid-template-columns: 1fr;
  }
  .maintenance-health-bar {
    grid-template-columns: 1fr;
  }
  .maintenance-section-stats {
    grid-template-columns: 1fr;
  }
  .maintenance-surface-heading,
  .maintenance-asset-topline,
  .maintenance-history-topline,
  .maintenance-template-preview-heading,
  .maintenance-template-task-topline {
    flex-direction: column;
  }
  .maintenance-asset-stats,
  .form-row.form-row-two,
  .form-row.form-row-four {
    grid-template-columns: 1fr;
  }
  .maintenance-empty-actions {
    flex-direction: column;
  }
  .maintenance-subnav {
    width: 100%;
  }
  .maintenance-subtab {
    flex: 1 1 calc(50% - 10px);
  }
  .expense-metric-grid,
.report-summary-grid,
.expense-insight-grid,
.expense-status-layout{
    grid-template-columns: 1fr;
  }
  .report-heading-actions,
  .report-overview-topline,
  .report-list-heading,
  .report-form-topline {
    align-items: flex-start;
  }
  .workspace-nav {
    grid-template-columns: 1fr;
  }
  .workspace-mobile-shell {
    display: grid !important;
    gap: 10px;
    padding-top: 0;
  }
  .workspace-tab-row {
    --workspace-tab-height: 44px;
    --workspace-tab-icon-size: 26px;
    display: flex;
    gap: 8px;
    margin-inline: 0;
    padding: 1px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 1px;
  }
  .workspace-tab {
    padding: 0 12px 0 8px;
    font-size: 0.88rem;
  }
  .workspace-brand {
    padding-right: 0;
  }

  .command-header-metrics .metric-card {
    min-height: 0;
    padding: 10px 12px;
    border-radius: 16px;
  }
  .command-header-metrics .metric-value {
    margin-top: 4px;
    font-size: 1.05rem;
  }
  .account-sheet-grid {
    grid-template-columns: 1fr;
  }
  .workspace-scroll-area {
    gap: 0;
    scroll-behavior: auto;
  }
  .content-area,
  .view-stack {
    gap: 0;
  }
  .workspace-scroll-area > .command-header,
  #spotlight-panel {
    display: none !important;
  }
  .view-panel[hidden],
  .view-panel:not(.active) {
    display: none !important;
  }
  .view-panel.active {
    display: block;
    animation: mobileScreenIn 180ms var(--transition-soft);
  }
  #overview-panel .section-heading,
  #overview-panel .overview-grid {
    display: none;
  }
  body[data-active-view="overview"] #overview-panel > :not(.overview-command-summary) {
    display: none !important;
  }
  .report-heading-actions {
    justify-content: flex-start;
  }
  .report-action-note {
    text-align: left;
  }
  .report-archive-version-row,
  .report-archive-panel-head {
    flex-direction: column;
    align-items: stretch;
  }
  .report-archive-owner-actions,
  .report-archive-version-actions {
    justify-content: flex-start;
  }
  .report-form {
    grid-template-columns: 1fr;
  }
  .expense-dashboard-head,
  .expense-log-heading {
    align-items: flex-start;
  }
  .expense-status-layout {
    justify-items: center;
  }
  .expense-month-chart {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .overview-command-summary {
    display: grid;
    gap: 0;
  }
  .workspace-mobile-shell[data-home-view="true"] .workspace-mobile-context {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 2px 0 0;
  }
  .workspace-mobile-shell[data-home-view="true"] .workspace-mobile-context-copy h2 {
    font-size: clamp(1.28rem, 5.2vw, 1.58rem);
    letter-spacing: -0.04em;
  }
  .workspace-mobile-shell[data-home-view="true"] .workspace-mobile-context-copy {
    gap: 2px;
  }
  .workspace-mobile-shell[data-home-view="true"] .workspace-mobile-context-copy .small-copy {
    font-size: 0.88rem;
    line-height: 1.36;
  }
  .vessel-mobile-command-card {
    display: grid;
  }
  #vessel-form-section,
  #vessel-systems-section {
    display: none;
  }
  #vessel-engine-section .vessel-machinery-form-host,
  #vessel-generator-section .vessel-machinery-form-host {
    display: none;
  }
  .vessel-profile-hero,
  .vessel-widget-grid,
  .vessel-details-grid {
    display: none;
  }
  .vessel-selector-shell {
    gap: 12px;
    padding: 14px 16px;
    border-radius: 22px;
  }
  .vessel-selector-topline {
    display: grid;
    gap: 8px;
  }
  .vessel-selector-topline .small-copy,
  .vessel-selector-summary {
    display: none;
  }
  .vessel-selector-chip {
    min-width: 148px;
    padding: 12px 14px;
    border-radius: 18px;
  }
  .vessel-selector-actions {
    width: 100%;
    justify-content: stretch;
  }
  .vessel-selector-actions > button {
    flex: 1 1 0;
    justify-content: center;
  }
  .overview-card-feature,
  .overview-card-snapshot {
    display: none;
  }
  .overview-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .overview-card {
    padding: 16px;
  }
  .maintenance-focus-card-wide {
    grid-column: auto;
  }
  .maintenance-section-chip {
    min-width: 148px;
  }
  .photo-upload-row {
    grid-template-columns: 1fr;
  }
  .vessel-system-card-wide {
    grid-column: auto;
  }
  .vessel-selector-chip {
    min-width: 152px;
  }
  .vessel-profile-hero {
    padding: 18px;
  }
  .vessel-profile-media {
    min-height: 220px;
  }
  .section-heading {
    flex-direction: column;
  }
  .auth-brand,
  .workspace-brand {
    align-items: flex-start;
  }
  .auth-brand-logo-shell,
  .workspace-brand-logo-shell {
    width: 50px;
    height: 50px;
  }
  .brand-name {
    font-size: 1.24rem;
  }
  .brand-subtitle {
    letter-spacing: 0.14em;
  }
  .workspace-mobile-current {
    min-height: 46px;
    gap: 10px;
    padding: 0 12px 0 9px;
    border-radius: 16px;
  }
  .workspace-mobile-more-button {
    min-height: 46px;
    padding-inline: 12px;
  }
  .report-list {
    overflow-x: auto;
  }
  .weekly-log-board {
    min-width: 980px;
  }
  .weather-reading {
    grid-template-columns: 1fr;
  }
  .weather-card-header {
    flex-direction: column;
  }
}
@media (max-width: 560px) {
  .workspace-brand-lockup .brand-name {
    font-size: 1.08rem;
  }
  .workspace-account-copy {
    display: none;
  }
  .section-block {
    padding: 14px 12px;
  }
  .view-stack {
    gap: 12px;
  }
  .mobile-shell-sheet-panel {
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0));
  }
  .mobile-shell-sheet-header {
    padding-top: 10px;
  }
  .mobile-shell-nav-summary {
    padding: 14px 14px 13px;
    border-radius: 20px;
  }
  .mobile-shell-nav-item {
    padding: 13px 12px;
    border-radius: 20px;
  }
  .auth-experience.panel {
    padding: 26px 20px 24px;
  }
  .auth-brand {
    gap: 9px;
  }
  .auth-brand-logo-shell {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }
  .auth-hero h2 {
    font-size: 2.34rem;
    line-height: 1.01;
  }
  .auth-note-card,
  .auth-meta-card {
    padding: 16px;
  }
  .session-warning-shell {
    right: 16px;
    left: 16px;
    bottom: 16px;
    width: auto;
    flex-direction: column;
    align-items: stretch;
  }
  .session-warning-actions {
    justify-content: flex-start;
  }
  .overview-command-summary {
    padding: 13px;
    border-radius: 18px;
  }
  .overview-command-summary-head {
    align-items: center;
    gap: 10px;
  }
  .overview-command-summary-head > div {
    min-width: 0;
  }
  .overview-command-summary-head .status-badge {
    padding: 6px 10px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }
  .overview-command-summary-copy {
    margin-top: 4px;
    font-size: 0.92rem;
    line-height: 1.34;
  }
  .overview-command-summary .card-title {
    font-size: 1.42rem;
    line-height: 0.96;
    letter-spacing: -0.04em;
  }
  .overview-command-summary-grid {
    gap: 8px;
    margin-top: 10px;
  }
  .overview-command-summary-stat {
    gap: 3px;
    min-height: 78px;
    padding: 10px 11px;
    border-radius: 16px;
    align-content: space-between;
  }
  .overview-command-summary-stat .detail-label {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    opacity: 0.72;
  }
  .overview-command-summary-stat strong {
    font-size: 1.32rem;
    line-height: 0.98;
    letter-spacing: -0.03em;
  }

  .vessel-mobile-command-card {
    padding: 16px;
  }
  .vessel-mobile-editor-sheet-panel {
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0));
  }
  .vessel-mobile-editor-sheet-host > form {
    display: grid;
    gap: 14px;
  }
  .vessel-mobile-editor-sheet-host > form .form-actions {
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(246, 241, 233, 0), rgba(246, 241, 233, 0.98) 32%);
  }
  .vessel-mobile-editor-sheet-host > form .form-actions .primary-button,
  .vessel-mobile-editor-sheet-host > form .form-actions .text-button {
    min-height: 46px;
  }
  .vessel-mobile-command-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .vessel-mobile-command-actions {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 380px) {
  .workspace-tab-row {
    --workspace-tab-height: 42px;
    --workspace-tab-icon-size: 25px;
    gap: 7px;
  }
  .workspace-tab {
    padding: 0 11px 0 7px;
    font-size: 0.84rem;
  }
  .overview-command-summary-grid {
    grid-template-columns: 1fr;
  }
  .invite-permission-row {
    grid-template-columns: 1fr;
  }
}
.access-vessel-field {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}
.access-vessel-field > span {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.access-vessel-picker,
.account-access-editor,
.account-access-note {
  display: grid;
  gap: 10px;
}
.access-vessel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.access-vessel-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(244, 248, 251, 0.58);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.access-vessel-chip:hover {
  border-color: rgba(13, 101, 156, 0.24);
  background: rgba(235, 243, 248, 0.94);
  transform: translateY(-1px);
}
.access-vessel-chip.checked {
  border-color: rgba(13, 101, 156, 0.26);
  background: rgba(219, 238, 247, 0.76);
  box-shadow: inset 0 0 0 1px rgba(13, 101, 156, 0.08);
}
.access-vessel-chip.disabled {
  cursor: default;
  opacity: 0.8;
}
.access-vessel-chip input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}
.access-vessel-copy {
  display: grid;
  gap: 4px;
}
.access-vessel-copy strong {
  font-size: 0.98rem;
  color: var(--ink);
}
.work-order-crew-field,
.work-order-photo-field {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.74);
}
.work-order-crew-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.crew-assignment-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(13, 36, 56, 0.12);
  background: rgba(244, 248, 251, 0.88);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.crew-assignment-chip:hover {
  border-color: rgba(13, 101, 156, 0.24);
  background: rgba(235, 243, 248, 0.94);
  transform: translateY(-1px);
}
.crew-assignment-chip.checked {
  border-color: rgba(13, 101, 156, 0.34);
  background: rgba(218, 234, 245, 0.96);
  box-shadow: inset 0 0 0 1px rgba(13, 101, 156, 0.12), 0 10px 18px rgba(13, 36, 56, 0.04);
}
.crew-assignment-chip input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}
.crew-assignment-avatar {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(28, 184, 190, 0.28);
  background: rgba(222, 247, 249, 0.88);
  color: var(--sea-deep);
  font-size: 0.72rem;
  font-weight: 800;
  flex: 0 0 auto;
}
.crew-assignment-copy {
  display: grid;
  gap: 4px;
}
.crew-assignment-copy strong {
  font-size: 0.96rem;
  color: var(--ink);
}
.crew-assignment-copy small {
  color: var(--ink-soft);
}
.work-order-photo-preview {
  display: grid;
}
.work-order-photo-preview-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  background: rgba(248, 252, 255, 0.9);
}
.work-order-photo-preview-card.is-pending {
  border-style: dashed;
}
.work-order-photo-preview-card img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: contain;
  object-position: center;
  background:
    linear-gradient(180deg, rgba(247, 252, 253, 0.98), rgba(234, 247, 250, 0.9)),
    rgba(238, 248, 250, 0.94);
  border-radius: 12px;
}
.work-order-photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.work-order-photo-preview-open {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.work-order-photo-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.work-order-photo-preview-meta strong {
  font-size: 0.95rem;
  line-height: 1.4;
  word-break: break-word;
}
.access-vessel-copy small {
  color: var(--ink-soft);
  line-height: 1.45;
}
.access-vessel-state {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d7386;
}
.access-vessel-chip.checked .access-vessel-state {
  color: #0d659c;
}
.access-vessel-note {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(13, 101, 156, 0.12);
  background: rgba(210, 231, 244, 0.55);
  color: var(--ink-soft);
}
.account-access-editor {
  margin-top: 14px;
}
.account-access-note {
  margin-top: 14px;
}
.account-access-editor .small-copy,
.account-access-note .small-copy {
  margin: 0;
}
.access-role-guide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.62);
}
.access-detail-card,
.access-scope-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(248, 252, 255, 0.82);
}
.access-role-card {
  width: 100%;
  display: block;
  min-height: 58px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid rgba(13, 36, 56, 0.06);
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.access-role-card:last-child {
  border-bottom: 0;
}
.access-role-card:hover {
  transform: none;
  background: rgba(13, 101, 156, 0.05);
  box-shadow: none;
}
.access-role-card.selected {
  background: rgba(214, 235, 247, 0.82);
  box-shadow: inset 4px 0 0 rgba(13, 132, 179, 0.88);
}
.access-role-topline,
.access-role-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.access-role-summary {
  display: block;
  margin-top: 3px;
  padding: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 500;
}
.access-role-card .small-copy,
.access-detail-card .small-copy,
.access-scope-card .small-copy {
  margin: 8px 0 0;
}
.access-card-topline {
  align-items: flex-start;
}
.access-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.access-detail-card strong,
.access-scope-card strong {
  display: block;
  color: var(--ink);
}
.access-row-actions {
  margin-top: 14px;
}
.account-action-note {
  margin: 12px 0 0;
  color: var(--ink-soft);
}
.access-card-users .users-feedback {
  margin-bottom: 14px;
}
.overview-section-copy {
  margin: 10px 0 14px;
}
@media (max-width: 860px) {
  .access-modal {
    padding: 20px;
    max-height: calc(var(--visual-viewport-height) - 20px);
  }
  .vendor-modal,
  .crew-detail-modal,
  .crew-confirm-modal {
    padding: 22px;
  }
  .access-card {
    max-height: calc(var(--visual-viewport-height) - 200px);
  }
  .access-modal-nav {
    width: 100%;
  }
  .access-modal-nav-button {
    min-height: 42px;
    padding-inline: 12px;
    font-size: 0.88rem;
  }
  .access-role-guide {
    grid-template-columns: 1fr;
  }
  .invite-form {
    grid-template-columns: 1fr;
  }
  .invite-review-panel {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  .invite-review-panel > .form-actions {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 2;
    width: min(560px, calc(100vw - 44px));
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(13, 36, 56, 0.1);
    border-radius: 22px;
    background: rgba(248, 250, 250, 0.92);
    box-shadow: 0 18px 38px rgba(13, 36, 56, 0.18);
    transform: translateX(-50%);
    backdrop-filter: blur(18px);
  }
  .access-card-invite {
    padding-bottom: 96px;
  }
  .access-vessel-grid {
    grid-template-columns: 1fr;
  }
  .access-detail-grid {
    grid-template-columns: 1fr;
  }
  .invite-vessel-mode-grid {
    grid-template-columns: 1fr;
  }
  .invite-permission-matrix {
    max-height: none;
    gap: 10px;
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .invite-permission-header {
    display: none;
  }
  .invite-permission-row {
    min-width: 0;
    grid-template-columns: 1fr;
    overflow: hidden;
    border: 1px solid #e5eef2;
    border-radius: 14px;
    background: var(--permission-row-bg);
  }
  .invite-permission-module-name {
    position: static;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid #e5eef2;
    background: rgba(255, 255, 255, 0.56);
  }
  .invite-permission-cell {
    justify-content: flex-start;
    min-height: 42px;
    padding: 8px 12px;
    border-left: 0;
    border-top: 1px solid #e5eef2;
    background: rgba(255, 255, 255, 0.42);
  }
  .invite-permission-cell-empty {
    display: none;
  }
  .invite-permission-mobile-copy {
    display: inline;
  }
  .invite-list,
  .user-table-wrap {
    max-height: none;
    padding-right: 0;
  }
  .work-order-detail-grid {
    grid-template-columns: 1fr;
  }
  [data-view-panel="work-orders"] .report-overview-card,
  .work-order-composer-shell {
    display: none;
  }
  .work-order-accordion-toggle,
  .work-order-group-toggle {
    align-items: center;
  }
  .work-order-accordion-meta,
  .work-order-group-toggle-indicator {
    justify-content: flex-end;
    text-align: right;
  }
  .work-order-accordion-date {
    display: none;
  }
  .compact-disclosure-summary {
    padding: 14px 16px;
  }
  .compact-disclosure-body {
    padding: 0 16px 16px;
  }
  .work-order-accordion-date-mobile {
    display: inline-flex;
  }
  .work-order-filters {
    margin: 0 0 12px;
  }
  .work-order-groups {
    gap: 10px;
  }
  .work-order-group {
    border-radius: 18px;
  }
  .work-order-group-toggle {
    gap: 10px;
    padding: 11px 12px;
  }
  .work-order-group-toggle-copy strong {
    font-size: 1.02rem;
  }
  .work-order-group-toggle-copy .small-copy {
    font-size: 0.88rem;
  }
  .work-order-accordion-toggle {
    gap: 10px;
    padding: 10px 11px;
  }
  .work-order-accordion-summary {
    gap: 12px;
  }
  .work-order-accordion-thumb {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
  .work-order-accordion-copy {
    gap: 4px;
  }
  .work-order-accordion-copy strong {
    font-size: 0.96rem;
    line-height: 1.28;
  }
  .work-order-accordion-date-mobile,
  .work-order-accordion-date,
  .work-order-accordion-indicator,
  .work-order-group-toggle-indicator {
    font-size: 0.8rem;
  }
  .work-order-accordion-panel-inner {
    padding: 0 11px 11px;
  }
  .work-order-detail-grid {
    gap: 10px;
    margin-top: 12px;
  }
  .work-order-detail-block {
    gap: 5px;
    padding: 10px 11px;
    border-radius: 14px;
  }
  .work-order-photo-gallery {
    gap: 8px;
    margin-top: 10px;
  }
  .work-order-photo-thumb img {
    width: 96px;
    height: 72px;
  }
  .work-order-photo-item {
    width: 96px;
  }
  .work-order-accordion-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .work-order-accordion-actions .report-action-button,
  .work-order-accordion-actions .action-overflow-trigger {
    min-height: 44px;
    justify-content: center;
    text-align: center;
    padding-inline: 10px;
  }
  .work-order-mobile-sheet-panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: min(86vh, 860px);
    max-height: min(86dvh, 860px);
    border-radius: 28px 28px 0 0;
    transform: none;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0));
  }
  .work-order-mobile-sheet-host .report-form {
    display: grid;
    gap: 14px;
  }
  .work-order-mobile-sheet-host .report-form-topline {
    margin-bottom: 2px;
  }
  .work-order-mobile-sheet-host .form-actions {
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(246, 241, 233, 0), rgba(246, 241, 233, 0.98) 32%);
  }
  .work-order-mobile-sheet-host .form-actions .primary-button,
  .work-order-mobile-sheet-host .form-actions .text-button {
    min-height: 46px;
  }
  .app-screen-summary {
    grid-template-columns: 1fr;
  }
  .app-screen-search {
    min-width: 0;
  }
  .app-screen-toolbar-group,
  .app-screen-toolbar-group-end {
    width: 100%;
  }
  .work-order-suggestion-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .work-order-suggestion-heading .small-copy {
    max-width: none;
    text-align: left;
  }
  .work-order-suggestion-detail-grid {
    grid-template-columns: 1fr;
  }
  .vendor-detail-hero,
  .vendor-detail-section-heading {
    grid-template-columns: 1fr;
    display: grid;
  }
  .vendor-directory-chips,
  .vendor-directory-secondary {
    justify-content: flex-start;
  }
  .vendor-detail-last-used {
    text-align: left;
    min-width: 0;
  }
  .vendor-detail-metrics,
  .vendor-detail-grid,
  .inventory-detail-metrics,
  .inventory-detail-grid {
    grid-template-columns: 1fr;
  }
  .inventory-detail-section,
  .inventory-detail-metric,
  .vendor-detail-section,
  .vendor-detail-metric {
    padding: 16px;
  }
  .inventory-detail-hero {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .inventory-detail-photo {
    width: 88px;
    height: 88px;
    border-radius: 22px;
  }
  .inventory-modal,
  .vendor-modal {
    padding: 22px;
  }
  .inventory-modal {
    width: min(100%, calc(100vw - 28px));
  }
  .inventory-modal-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .inventory-item-name-field,
  .inventory-category-sku-row,
  .inventory-form-photo-field,
  .inventory-quantity-unit-row,
  .inventory-reorder-cost-row,
  .inventory-location-status-row,
  .inventory-notes-field,
  .inventory-modal-actions {
    grid-column: 1;
  }
  .inventory-form-photo-field {
    grid-row: auto;
    min-height: 0;
  }
  .inventory-modal-form .form-row {
    grid-template-columns: 1fr;
  }
  .inventory-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-top: 10px;
    padding-bottom: calc(10px + var(--safe-area-bottom, 0px));
    background: linear-gradient(180deg, rgba(246, 241, 233, 0), rgba(246, 241, 233, 0.98) 32%);
  }
  .inventory-directory-trigger {
    padding: 14px;
  }
  .inventory-directory-metrics {
    margin-top: 8px;
  }
  .vendor-directory-trigger {
    padding: 14px 16px;
  }
  .vendor-directory-contact,
  .vendor-directory-relationship {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
.mobile-report-wizard {
  display: none;
}
@media (max-width: 1180px) {
  body:not(.auth-locked) .app-shell {
    padding-top: 12px;
    padding-bottom: 14px;
  }
  body:not(.auth-locked) .workspace-shell {
    gap: 14px;
  }
  body:not(.auth-locked) .workspace-nav {
    padding: 12px;
  }
  body:not(.auth-locked) .form-row,
  body:not(.auth-locked) .form-row.form-row-two,
  body:not(.auth-locked) .form-row.form-row-three,
  body:not(.auth-locked) .form-row.form-row-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  body:not(.auth-locked) .work-order-crew-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not(.auth-locked) .maintenance-overview-grid,
  body:not(.auth-locked) .maintenance-focus-grid,
  body:not(.auth-locked) .maintenance-section-stats,
  body:not(.auth-locked) .maintenance-section-card-grid,
  body:not(.auth-locked) .expense-metric-grid,
  body:not(.auth-locked) .expense-insight-grid,
  body:not(.auth-locked) .expense-status-layout,
  body:not(.auth-locked) .report-library-meta,
  body:not(.auth-locked) .vessel-glance-grid,
  body:not(.auth-locked) .vessel-service-grid,
  body:not(.auth-locked) .vessel-details-grid,
  body:not(.auth-locked) .machinery-card-grid,
  body:not(.auth-locked) .system-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not(.auth-locked) .maintenance-board-wrap,
  body:not(.auth-locked) .vendor-table-wrap,
  body:not(.auth-locked) .user-table-wrap,
  body:not(.auth-locked) .report-list,
  body:not(.auth-locked) .weekly-log-board,
  body:not(.auth-locked) .maintenance-database {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(13, 36, 56, 0.22) rgba(255, 255, 255, 0.25);
  }
}
@media (max-width: 900px) {
  body:not(.auth-locked) .workspace-nav {
    grid-template-columns: 1fr;
  }
  body:not(.auth-locked) .workspace-tab-row {
    --workspace-tab-height: 44px;
    --workspace-tab-icon-size: 24px;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  body:not(.auth-locked) .workspace-tab {
    min-height: 44px;
  }
  body:not(.auth-locked) .workspace-mobile-shell {
    gap: 8px;
  }
  body:not(.auth-locked) .form-actions,
  body:not(.auth-locked) .row-actions,
  body:not(.auth-locked) .command-header-actions {
    gap: 8px;
  }
  body:not(.auth-locked) .form-actions > *,
  body:not(.auth-locked) .row-actions > * {
    flex: 1 1 auto;
    min-height: 44px;
  }
}
@media (max-width: 760px) {
  body:not(.auth-locked) .workspace-nav {
    position: sticky;
    top: 0;
    gap: 10px;
    padding: 10px;
  }
  body:not(.auth-locked) .workspace-nav-topline {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  body:not(.auth-locked) .workspace-account-shell {
    justify-self: stretch;
  }
  body:not(.auth-locked) .workspace-account-button {
    width: 100%;
    justify-content: space-between;
    min-height: 46px;
  }
  body:not(.auth-locked) .workspace-mobile-current,
  body:not(.auth-locked) .workspace-mobile-more-button {
    min-height: 46px;
    border-radius: 16px;
  }
  body:not(.auth-locked) .workspace-mobile-context,
  body:not(.auth-locked) .workspace-mobile-shell .workspace-mobile-context {
    padding: 10px 0 0;
    gap: 8px;
  }
  body:not(.auth-locked) .report-form,
  body:not(.auth-locked) .maintenance-form,
  body:not(.auth-locked) .user-form,
  body:not(.auth-locked) .vendor-form,
  body:not(.auth-locked) .inventory-modal-form,
  body:not(.auth-locked) .work-order-mobile-sheet-host .report-form,
  body:not(.auth-locked) .onboarding-form,
  body:not(.auth-locked) .invite-form,
  body:not(.auth-locked) .auth-form,
  body:not(.auth-locked) .vessel-forms-grid,
  body:not(.auth-locked) .work-order-crew-field,
  body:not(.auth-locked) .work-order-photo-field {
    grid-template-columns: 1fr;
  }
  body:not(.auth-locked) .form-row,
  body:not(.auth-locked) .form-row.form-row-two,
  body:not(.auth-locked) .form-row.form-row-three,
  body:not(.auth-locked) .form-row.form-row-four,
  body:not(.auth-locked) .work-order-crew-picker {
    grid-template-columns: 1fr;
  }
  body:not(.auth-locked) .form-actions,
  body:not(.auth-locked) .row-actions {
    flex-direction: column;
    align-items: stretch;
  }
  body:not(.auth-locked) .maintenance-overview-grid,
  body:not(.auth-locked) .maintenance-focus-grid,
  body:not(.auth-locked) .maintenance-section-stats,
  body:not(.auth-locked) .maintenance-section-card-grid,
  body:not(.auth-locked) .maintenance-focus-card-wide,
  body:not(.auth-locked) .maintenance-task-groups,
  body:not(.auth-locked) .expense-metric-grid,
  body:not(.auth-locked) .expense-insight-grid,
  body:not(.auth-locked) .expense-status-layout,
  body:not(.auth-locked) .report-library-meta,
  body:not(.auth-locked) .report-layout-upgraded,
  body:not(.auth-locked) .report-summary-grid,
  body:not(.auth-locked) .report-list-heading,
  body:not(.auth-locked) .vessel-glance-grid,
  body:not(.auth-locked) .vessel-service-grid,
  body:not(.auth-locked) .vessel-details-grid,
  body:not(.auth-locked) .machinery-card-grid,
  body:not(.auth-locked) .system-meta-grid,
  body:not(.auth-locked) .crew-list-compact,
  body:not(.auth-locked) .app-screen-toolbar {
    grid-template-columns: 1fr;
  }
  body:not(.auth-locked) .maintenance-board-wrap,
  body:not(.auth-locked) .vendor-table-wrap,
  body:not(.auth-locked) .user-table-wrap,
  body:not(.auth-locked) .report-list,
  body:not(.auth-locked) .weekly-log-board,
  body:not(.auth-locked) .maintenance-database {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body:not(.auth-locked) .maintenance-board-wrap::-webkit-scrollbar,
  body:not(.auth-locked) .vendor-table-wrap::-webkit-scrollbar,
  body:not(.auth-locked) .user-table-wrap::-webkit-scrollbar,
  body:not(.auth-locked) .report-list::-webkit-scrollbar,
  body:not(.auth-locked) .weekly-log-board::-webkit-scrollbar,
  body:not(.auth-locked) .maintenance-database::-webkit-scrollbar {
    display: none;
  }
  body:not(.auth-locked) .workspace-tab-row {
    --workspace-tab-height: 42px;
    --workspace-tab-icon-size: 25px;
  }
  body:not(.auth-locked) .workspace-tab {
    font-size: 0.9rem;
  }
  body:not(.auth-locked) .overview-grid,
  body:not(.auth-locked) .overview-command-summary-grid {
    grid-template-columns: 1fr;
  }
  body:not(.auth-locked) .overview-card-feature,
  body:not(.auth-locked) .overview-card-snapshot {
    min-width: 0;
  }
  input,
  select,
  textarea {
    font-size: 16px;
  }
}
@media (max-width: 900px) {
  body:not(.auth-locked) .app-shell {
    padding-top: 10px;
    padding-inline: 12px;
  }
  body:not(.auth-locked) .app-main,
  body:not(.auth-locked) .workspace-screen {
    gap: 12px;
  }
  body:not(.auth-locked) .app-screen-copy {
    max-width: 58ch;
  }
  body:not(.auth-locked) .workspace-card-shell {
    gap: 12px;
  }
  body:not(.auth-locked) .overview-grid {
    gap: 12px;
  }
  body:not(.auth-locked) .overview-card,
  body:not(.auth-locked) .report-overview-card,
  body:not(.auth-locked) .maintenance-section-card,
  body:not(.auth-locked) .account-card,
  body:not(.auth-locked) .work-order-compact-list {
    border-radius: 18px;
  }
}
@media (max-width: 680px) {
  body:not(.auth-locked) .workspace-nav,
  body:not(.auth-locked) .workspace-mobile-shell,
  body:not(.auth-locked) .app-screen-header,
  body:not(.auth-locked) .workspace-main-shell,
  body:not(.auth-locked) .workspace-screen {
    border-radius: 18px;
  }
  body:not(.auth-locked) .workspace-nav {
    padding: 10px;
  }
  body:not(.auth-locked) .workspace-mobile-shell {
    gap: 10px;
  }
  body:not(.auth-locked) .workspace-tab-row {
    --workspace-tab-height: 40px;
    --workspace-tab-icon-size: 22px;
    gap: 6px;
    border-radius: 14px;
    padding: 0;
  }
  body:not(.auth-locked) .workspace-tab {
    border-radius: 12px;
    min-height: 40px;
    padding: 0 10px;
    gap: 8px;
  }
  body:not(.auth-locked) .app-screen-toolbar {
    gap: 10px;
  }
  body:not(.auth-locked) .app-shell,
  body:not(.auth-locked) .report-form,
  body:not(.auth-locked) .maintenance-form,
  body:not(.auth-locked) .work-order-photo-field,
  body:not(.auth-locked) .work-order-crew-field,
  body:not(.auth-locked) .form-actions {
    padding-inline: 10px;
  }
  body:not(.auth-locked) .app-shell,
  body:not(.auth-locked) .workspace-main-shell,
  body:not(.auth-locked) .workspace-screen,
  body:not(.auth-locked) .report-overview-card,
  body:not(.auth-locked) .maintenance-task-group,
  body:not(.auth-locked) .maintenance-section-card,
  body:not(.auth-locked) .account-card,
  body:not(.auth-locked) .vendor-directory-item,
  body:not(.auth-locked) .report-list-shell,
  body:not(.auth-locked) .work-order-compact-list,
  body:not(.auth-locked) .expense-card,
  body:not(.auth-locked) .expense-log-card,
  body:not(.auth-locked) .maintenance-card {
    padding: 12px;
  }
  body:not(.auth-locked) .form-actions,
  body:not(.auth-locked) .row-actions,
  body:not(.auth-locked) .command-header-actions {
    gap: 8px;
    align-items: stretch;
  }
  body:not(.auth-locked) .form-actions > *,
  body:not(.auth-locked) .row-actions > *,
  body:not(.auth-locked) .command-header-actions > * {
    width: 100%;
    min-height: 46px;
  }
  body:not(.auth-locked) .form-row,
  body:not(.auth-locked) .form-row.form-row-two,
  body:not(.auth-locked) .form-row.form-row-three,
  body:not(.auth-locked) .form-row.form-row-four,
  body:not(.auth-locked) .maintenance-form > .form-row,
  body:not(.auth-locked) .work-order-crew-picker,
  body:not(.auth-locked) .report-form-upgraded,
  body:not(.auth-locked) .maintenance-form-upgraded {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
@media (max-width: 560px) {
  body:not(.auth-locked) .app-screen-header {
    display: none;
  }
  body:not(.auth-locked) .workspace-tab-row {
    --workspace-tab-height: 40px;
    --workspace-tab-icon-size: 20px;
    gap: 4px;
    border-radius: 12px;
    padding: 2px;
    align-items: stretch;
  }
  body:not(.auth-locked) .workspace-tab {
    border-radius: 10px;
    min-width: 128px;
    width: min-content;
    margin: 0;
  }
  body:not(.auth-locked) .overview-grid,
  body:not(.auth-locked) .crew-list-compact,
  body:not(.auth-locked) .workspace-main-shell,
  body:not(.auth-locked) .workspace-screen {
    gap: 10px;
  }
  body:not(.auth-locked) .overview-card {
    padding: 12px;
  }
  body:not(.auth-locked) .report-overview-card {
    padding: 12px;
  }
  body:not(.auth-locked) .report-form,
  body:not(.auth-locked) .maintenance-form,
  body:not(.auth-locked) .vendor-form,
  body:not(.auth-locked) .onboarding-form,
  body:not(.auth-locked) .invite-form,
  body:not(.auth-locked) .auth-form,
  body:not(.auth-locked) .user-form,
  body:not(.auth-locked) .inventory-modal-form,
  body:not(.auth-locked) .work-order-mobile-sheet-host .report-form {
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
  }
  body:not(.auth-locked) .report-form-topline,
  body:not(.auth-locked) .maintenance-form > .form-row {
    padding-top: 4px;
  }
  body:not(.auth-locked) .workspace-tab-row,
  body:not(.auth-locked) .workspace-mobile-context,
  body:not(.auth-locked) .workspace-mobile-shell .workspace-mobile-context {
    gap: 6px;
  }
  body:not(.auth-locked) .maintenance-board-wrap,
  body:not(.auth-locked) .maintenance-database,
  body:not(.auth-locked) .vendor-table-wrap,
  body:not(.auth-locked) .user-table-wrap,
  body:not(.auth-locked) .report-list,
  body:not(.auth-locked) .weekly-log-board {
    overflow: visible;
  }
  body:not(.auth-locked) .maintenance-row,
  body:not(.auth-locked) .weekly-log-row {
    display: block;
    border: 1px solid rgba(13, 36, 56, 0.06);
    border-radius: 14px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 24px rgba(9, 66, 94, 0.06);
    overflow: hidden;
  }
  body:not(.auth-locked) .maintenance-database .maintenance-row:last-child,
  body:not(.auth-locked) .weekly-log-board .weekly-log-row:last-child {
    margin-bottom: 0;
  }
  body:not(.auth-locked) .maintenance-cell,
  body:not(.auth-locked) .weekly-log-cell {
    display: grid;
    grid-template-columns: minmax(96px, 42%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border-right: 0;
    border-bottom: 1px solid rgba(13, 36, 56, 0.07);
    padding: 10px 12px;
  }
  body:not(.auth-locked) .maintenance-row .maintenance-cell::before,
  body:not(.auth-locked) .weekly-log-row .weekly-log-cell::before {
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    content: attr(data-cell-label);
    white-space: nowrap;
  }
  body:not(.auth-locked) .maintenance-row .maintenance-cell:last-child,
  body:not(.auth-locked) .weekly-log-row .weekly-log-cell:last-child {
    border-bottom: 0;
  }
  body:not(.auth-locked) .maintenance-header,
  body:not(.auth-locked) .weekly-log-header {
    display: none;
  }
  body:not(.auth-locked) .maintenance-row.maintenance-header-row,
  body:not(.auth-locked) .maintenance-row.maintenance-header,
  body:not(.auth-locked) .weekly-log-row.weekly-log-header {
    display: none;
  }
  body:not(.auth-locked) .maintenance-row .maintenance-cell::before,
  body:not(.auth-locked) .weekly-log-row .weekly-log-cell::before {
    content: attr(data-cell-label);
  }
  body:not(.auth-locked) .maintenance-row .maintenance-task-cell::before {
    content: "Task";
  }
  body:not(.auth-locked) .maintenance-row .maintenance-cell:nth-of-type(2)::before {
    content: "Status";
  }
  body:not(.auth-locked) .maintenance-row .maintenance-cell:nth-of-type(3)::before {
    content: "Category";
  }
  body:not(.auth-locked) .maintenance-row .maintenance-cell:nth-of-type(4)::before {
    content: "Priority";
  }
  body:not(.auth-locked) .maintenance-row .maintenance-cell:nth-of-type(5)::before {
    content: "Next due";
  }
  body:not(.auth-locked) .maintenance-row .maintenance-cell:nth-of-type(6)::before {
    content: "Last completed";
  }
  body:not(.auth-locked) .weekly-log-row .weekly-log-cell:nth-of-type(1)::before {
    content: "Area / task";
  }
  body:not(.auth-locked) .weekly-log-row .weekly-log-cell:nth-of-type(2)::before {
    content: "Date";
  }
  body:not(.auth-locked) .weekly-log-row .weekly-log-cell:nth-of-type(3)::before {
    content: "Work done";
  }
  body:not(.auth-locked) .weekly-log-row .weekly-log-cell:nth-of-type(4)::before {
    content: "Systems checked";
  }
  body:not(.auth-locked) .weekly-log-row .weekly-log-cell:nth-of-type(5)::before {
    content: "Issues";
  }
  body:not(.auth-locked) .weekly-log-row .weekly-log-cell:nth-of-type(6)::before {
    content: "Notes";
  }
  body:not(.auth-locked) .maintenance-row .maintenance-cell > *,
  body:not(.auth-locked) .weekly-log-row .weekly-log-cell > * {
    min-width: 0;
    width: 100%;
  }
  body:not(.auth-locked) .maintenance-row .maintenance-task-cell strong,
  body:not(.auth-locked) .weekly-log-row .weekly-log-item strong {
    display: inline;
    font-size: 0.98rem;
  }
}
@media (max-width: 420px) {
  body:not(.auth-locked) .app-shell {
    padding-inline: 8px;
    padding-top: 8px;
  }
  body:not(.auth-locked) .workspace-nav {
    padding: 8px;
    border-radius: 14px;
  }
  body:not(.auth-locked) .workspace-tab-row {
    gap: 2px;
    overflow-x: auto;
  }
  body:not(.auth-locked) .workspace-tab {
    min-width: 124px;
    min-height: 40px;
    font-size: 0.86rem;
    padding: 0 10px;
  }
  body:not(.auth-locked) .app-screen-toolbar {
    margin-top: 2px;
  }
  body:not(.auth-locked) .card-title,
  body:not(.auth-locked) h3,
  body:not(.auth-locked) .overview-stat-title {
    font-size: 1.02rem;
  }
  body:not(.auth-locked) .small-copy,
  body:not(.auth-locked) .overview-card-copy {
    font-size: 0.86rem;
  }
  body:not(.auth-locked) .maintenance-task-cell .maintenance-item-meta {
    margin-top: 8px;
    margin-inline: 0;
  }
  body:not(.auth-locked) .maintenance-table-actions {
    margin-top: 8px;
    flex-wrap: wrap;
    gap: 6px;
  }
  body:not(.auth-locked) .maintenance-table-actions .maintenance-action,
  body:not(.auth-locked) .maintenance-table-actions button {
    min-height: 40px;
    width: 100%;
  }
}
@media (max-width: 760px) {
  body:not(.auth-locked) .workspace-tab-row {
    display: none !important;
  }
  body:not(.auth-locked) .workspace-scroll-area {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-scroll-area {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body:not(.auth-locked) .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 26;
    display: block;
    padding: 0 max(14px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }
  body:not(.auth-locked) .mobile-bottom-nav-inner {
    width: min(430px, 100%);
    min-height: 72px;
    margin: 0 auto;
    padding: 7px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    border: 1px solid rgba(13, 36, 56, 0.12);
    border-radius: 28px;
    background: rgba(255, 252, 246, 0.92);
    box-shadow: 0 16px 42px rgba(7, 21, 32, 0.2);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    pointer-events: auto;
  }
  body:not(.auth-locked) .mobile-bottom-nav-item {
    min-width: 0;
    min-height: 58px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 3px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: rgba(13, 36, 56, 0.66);
    font-size: 0.69rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
  }
  body:not(.auth-locked) .mobile-bottom-nav-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(13, 36, 56, 0.055);
    color: currentColor;
    transition: background 160ms ease, color 160ms ease;
  }
  body:not(.auth-locked) .mobile-bottom-nav-icon svg {
    width: 17px;
    height: 17px;
    display: block;
  }
  body:not(.auth-locked) .mobile-bottom-nav-item:hover,
  body:not(.auth-locked) .mobile-bottom-nav-item:focus-visible {
    color: var(--ink);
    background: rgba(13, 36, 56, 0.06);
    outline: none;
  }
  body:not(.auth-locked) .mobile-bottom-nav-item:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(14, 122, 165, 0.32);
  }
  body:not(.auth-locked) .mobile-bottom-nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, #102331, #09425e);
  }
  body:not(.auth-locked) .mobile-bottom-nav-item.active .mobile-bottom-nav-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }
  body:not(.auth-locked) .mobile-bottom-nav-item.locked {
    color: rgba(5, 96, 109, 0.74);
  }
  body:not(.auth-locked) .mobile-bottom-nav-item.locked .mobile-bottom-nav-icon {
    color: rgba(6, 112, 124, 0.86);
    background: rgba(43, 219, 211, 0.1);
  }
  body:not(.auth-locked) .mobile-shell-sheet {
    z-index: 70;
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-mobile-shell {
    display: none !important;
  }
  body[data-active-view="overview"]:not(.auth-locked) #overview-panel {
    padding: 10px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .mobile-overview-shell {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 24px;
    border: 1px solid rgba(13, 36, 56, 0.08);
    background:
      radial-gradient(circle at 8% 0%, rgba(218, 239, 250, 0.72), transparent 30%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 251, 0.86));
    box-shadow: 0 18px 40px rgba(7, 21, 32, 0.1);
  }
  .mobile-overview-topline,
  .mobile-overview-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .mobile-overview-topline .card-title {
    margin: 2px 0 0;
    font-size: clamp(1.38rem, 6vw, 1.84rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
  }
  .mobile-overview-topline .small-copy {
    display: -webkit-box;
    margin: 5px 0 0;
    max-width: 36ch;
    overflow: hidden;
    color: rgba(42, 67, 86, 0.82);
    font-size: 0.88rem;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .mobile-overview-priority {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(13, 36, 56, 0.07);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
  }
  .mobile-overview-section-head strong {
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1;
  }
  .mobile-overview-priority-list,
  .mobile-overview-sections {
    display: grid;
    gap: 7px;
  }
  .mobile-overview-priority-item,
  .mobile-overview-section {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(13, 36, 56, 0.06);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--ink);
    font: inherit;
    text-align: left;
    box-shadow: none;
  }
  .mobile-overview-priority-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .mobile-overview-priority-item strong,
  .mobile-overview-section-copy strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.94rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-overview-priority-item small,
  .mobile-overview-section-copy small,
  .mobile-overview-section-copy span {
    display: block;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.77rem;
    line-height: 1.24;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-overview-section-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .mobile-overview-icon,
  .mobile-overview-action-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--sea-deep);
    background: rgba(14, 122, 165, 0.1);
  }
  .mobile-overview-icon[data-tone="green"] {
    color: #0d6257;
    background: rgba(76, 183, 165, 0.15);
  }
  .mobile-overview-icon[data-tone="amber"] {
    color: #9b5b10;
    background: rgba(239, 177, 90, 0.18);
  }
  .mobile-overview-icon[data-tone="purple"] {
    color: #7442d6;
    background: rgba(136, 88, 237, 0.14);
  }
  .mobile-overview-priority-thumb {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(15, 141, 154, 0.18);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(37, 188, 197, 0.14), rgba(255, 255, 255, 0.78));
    box-shadow: 0 8px 18px rgba(17, 38, 56, 0.08);
  }
  .mobile-overview-priority-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mobile-overview-priority-thumb-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sea-deep);
  }
  .mobile-overview-icon svg,
  .mobile-overview-action-icon svg,
  .mobile-overview-priority-thumb-fallback svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-overview-section-value {
    min-width: 36px;
    max-width: 76px;
    overflow: hidden;
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(13, 36, 56, 0.055);
    color: rgba(13, 36, 56, 0.74);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-overview-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .mobile-overview-action {
    min-width: 0;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(13, 36, 56, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.12;
    text-align: left;
    box-shadow: none;
  }
  .mobile-overview-action.primary {
    border-color: rgba(9, 66, 94, 0.18);
    background: linear-gradient(135deg, #102331, #09425e);
    color: #fff;
  }
  .mobile-overview-action.primary .mobile-overview-action-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }
  .mobile-overview-action span:last-child {
    min-width: 0;
  }
  .mobile-overview-action:focus-visible,
  .mobile-overview-priority-item:focus-visible,
  .mobile-overview-section:focus-visible {
    outline: 2px solid rgba(14, 122, 165, 0.32);
    outline-offset: 2px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile {
    display: grid;
    gap: 10px;
    min-height: 0;
    padding: 10px;
    color: var(--ink);
    border: 1px solid rgba(11, 101, 141, 0.12);
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 252, 0.96));
    box-shadow: 0 10px 24px rgba(9, 61, 74, 0.07);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile.is-complete {
    border-color: rgba(8, 122, 110, 0.14);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(9, 61, 74, 0.07);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile::after {
    content: none;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-head-actions {
    gap: 4px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sea-deep);
    border: 1px solid rgba(14, 122, 165, 0.14);
    border-radius: 14px;
    background: rgba(14, 122, 165, 0.1);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-head h3 {
    margin: 1px 0 0;
    color: var(--ink);
    font-size: 0.96rem;
    line-height: 1.15;
    letter-spacing: 0;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-head p {
    display: -webkit-box;
    margin: 3px 0 0;
    overflow: hidden;
    color: rgba(32, 53, 68, 0.76);
    font-size: 0.74rem;
    line-height: 1.24;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-progress {
    min-width: 54px;
    display: grid;
    gap: 2px;
    justify-items: end;
    color: rgba(32, 53, 68, 0.68);
    font-size: 0.65rem;
    font-weight: 800;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-dismiss {
    min-height: 28px;
    gap: 5px;
    padding: 0 8px;
    font-size: 0.65rem;
    box-shadow: none;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-dismiss svg {
    width: 13px;
    height: 13px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-progress strong {
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-progress i {
    width: 52px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(13, 36, 56, 0.08);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-progress i span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0d7881, #29cfc7);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-list {
    display: grid;
    gap: 6px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-row {
    min-width: 0;
    min-height: 52px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    color: var(--ink);
    text-align: left;
    border: 1px solid rgba(13, 92, 117, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: none;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile.is-complete .getting-started-row.is-complete {
    border-color: rgba(8, 122, 110, 0.11);
    background: rgba(248, 253, 252, 0.92);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-row-icon {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sea-deep);
    border: 1px solid rgba(14, 122, 165, 0.14);
    border-radius: 11px;
    background: rgba(14, 122, 165, 0.1);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-row.is-complete .getting-started-row-icon {
    color: #087a5f;
    border-color: rgba(8, 122, 95, 0.16);
    background: rgba(28, 186, 129, 0.12);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-row-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-row-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-row-copy strong,
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-row-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-row-copy strong {
    color: var(--ink);
    font-size: 0.83rem;
    line-height: 1.15;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-row-copy small {
    color: rgba(32, 53, 68, 0.68);
    font-size: 0.7rem;
    line-height: 1.2;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-getting-started-panel.is-mobile .getting-started-row-action {
    color: var(--sea-deep);
    font-size: 0.68rem;
    font-weight: 900;
  }
}
@media (max-width: 380px) {
  body:not(.auth-locked) .mobile-bottom-nav {
    padding-inline: 9px;
  }
  body:not(.auth-locked) .mobile-bottom-nav-inner {
    min-height: 68px;
    padding: 6px;
    border-radius: 24px;
  }
  body:not(.auth-locked) .mobile-bottom-nav-item {
    min-height: 54px;
    border-radius: 19px;
    font-size: 0.64rem;
  }
  body:not(.auth-locked) .mobile-bottom-nav-icon {
    width: 26px;
    height: 26px;
  }
}
.mobile-vessel-profile-page {
  display: none;
}
@media (max-width: 760px) {
  .mobile-vessel-hero,
.mobile-vessel-section,
.mobile-vessel-fleet-switcher{
    border: 1px solid rgba(13, 36, 56, 0.075);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 252, 0.78));
    box-shadow:
      0 12px 28px rgba(10, 31, 45, 0.055),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }
  .mobile-vessel-hero {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border-radius: 24px;
    overflow: hidden;
  }
  .mobile-vessel-photo {
    position: relative;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 20px;
    background:
      linear-gradient(135deg, rgba(49, 119, 149, 0.26), rgba(12, 54, 76, 0.9)),
      rgba(255, 255, 255, 0.42);
  }
  .mobile-vessel-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mobile-vessel-photo-placeholder {
    min-height: 100%;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 12px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
  }
  .mobile-vessel-hero-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 8px;
  }
  .mobile-vessel-hero-title {
    min-width: 0;
  }
  .mobile-vessel-hero-title h3 {
    margin: 3px 0 0;
    color: var(--ink);
    font-family: var(--heading-font);
    font-size: clamp(1.64rem, 8vw, 2.26rem);
    font-weight: 750;
    line-height: 0.98;
    letter-spacing: 0;
  }
  .mobile-vessel-hero-title p {
    margin: 6px 0 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.25;
  }
  .mobile-vessel-hero-copy .status-badge {
    justify-self: start;
  }
  .mobile-vessel-hero-tags,
  .mobile-vessel-fleet-switcher {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mobile-vessel-hero-tags::-webkit-scrollbar,
  .mobile-vessel-fleet-switcher::-webkit-scrollbar {
    display: none;
  }
  .mobile-vessel-hero-tags span {
    flex: 0 0 auto;
    max-width: 190px;
    overflow: hidden;
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(13, 36, 56, 0.055);
    color: rgba(13, 36, 56, 0.74);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-vessel-fleet-switcher {
    padding: 8px;
    border-radius: 20px;
  }
  .mobile-vessel-chip {
    flex: 0 0 auto;
    min-width: 126px;
    max-width: 156px;
    display: grid;
    gap: 4px;
    padding: 9px 11px;
    border: 1px solid rgba(13, 36, 56, 0.075);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--ink);
    text-align: left;
  }
  .mobile-vessel-chip.active {
    border-color: rgba(14, 122, 165, 0.28);
    background: linear-gradient(145deg, rgba(227, 244, 251, 0.94), rgba(255, 255, 255, 0.86));
  }
  .mobile-vessel-chip strong,
  .mobile-vessel-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-vessel-chip strong {
    font-size: 0.84rem;
  }
  .mobile-vessel-chip span {
    color: var(--ink-soft);
    font-size: 0.72rem;
  }

  .mobile-vessel-action.primary {
    border-color: rgba(9, 66, 94, 0.18);
    background: linear-gradient(135deg, #102331, #09425e);
    color: #fff;
  }
  .mobile-vessel-info-icon{
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 12px;
    color: var(--sea);
    background: rgba(14, 122, 165, 0.1);
  }
  .mobile-vessel-action.primary .mobile-vessel-action-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
  }
  .mobile-vessel-info-icon svg{
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-vessel-section {
    display: grid;
    gap: 10px;
    padding: 13px;
    border-radius: 22px;
  }
  .mobile-vessel-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
  }
  .mobile-vessel-section-head h4 {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.15;
  }
  .mobile-vessel-section-action {
    min-height: 34px;
    padding-inline: 11px;
    border-radius: 999px;
    font-size: 0.76rem;
    box-shadow: none;
  }
  .mobile-vessel-info-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .mobile-vessel-info-item{
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(13, 36, 56, 0.06);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
  }
  .mobile-vessel-info-item > span:last-child{
    min-width: 0;
    display: grid;
    gap: 3px;
  }
  .mobile-vessel-info-item strong{
    overflow: hidden;
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-vessel-machinery-row .system-badge {
    margin-left: auto;
    white-space: nowrap;
  }
  .mobile-vessel-quick-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .mobile-vessel-quick-stats span {
    min-width: 0;
    padding: 8px;
    border-radius: 14px;
    background: rgba(13, 36, 56, 0.045);
    color: var(--ink-soft);
    font-size: 0.7rem;
    line-height: 1.2;
    text-align: center;
  }
  .mobile-vessel-quick-stats strong {
    display: block;
    color: var(--ink);
    font-size: 0.98rem;
  }
}
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .auth-shell {
    min-height: 100dvh;
    min-height: var(--visual-viewport-height);
    padding:
      max(16px, var(--safe-area-top))
      max(16px, var(--safe-area-right))
      max(18px, var(--safe-area-bottom))
      max(16px, var(--safe-area-left));
    overflow-x: hidden;
  }
  .auth-shell button,
  .auth-shell input,
  .auth-shell .auth-mode-button,
  .auth-shell .text-button,
  .auth-shell .primary-button {
    min-height: 44px;
    touch-action: manipulation;
  }
  body:not(.auth-locked) {
    min-height: 100dvh;
    min-height: var(--visual-viewport-height);
  }
  body:not(.auth-locked) .app-shell {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    height: var(--visual-viewport-height);
    padding:
      max(10px, var(--safe-area-top))
      max(8px, var(--safe-area-right))
      max(10px, var(--safe-area-bottom))
      max(8px, var(--safe-area-left));
    overflow-x: hidden;
  }
  body:not(.auth-locked) .workspace-shell,
  body:not(.auth-locked) .workspace-scroll-area,
  body:not(.auth-locked) .content-area,
  body:not(.auth-locked) .view-stack,
  body:not(.auth-locked) .view-panel,
  body:not(.auth-locked) .section-block,
  body:not(.auth-locked) .app-screen,
  body:not(.auth-locked) form,
  body:not(.auth-locked) fieldset,
  body:not(.auth-locked) .panel {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  body:not(.auth-locked) img,
  body:not(.auth-locked) video,
  body:not(.auth-locked) canvas {
    max-width: 100%;
  }
  body:not(.auth-locked) button,
  body:not(.auth-locked) [role="button"],
  body:not(.auth-locked) input,
  body:not(.auth-locked) select,
  body:not(.auth-locked) textarea,
  body:not(.auth-locked) .primary-button,
  body:not(.auth-locked) .ghost-button,
  body:not(.auth-locked) .text-button,
  body:not(.auth-locked) .report-action-button,
  body:not(.auth-locked) .action-overflow-trigger,
  body:not(.auth-locked) .workspace-account-trigger,
  body:not(.auth-locked) .mobile-shell-action-item,
  body:not(.auth-locked) .mobile-bottom-nav-item,
  body:not(.auth-locked) .mobile-overview-action,
  body:not(.auth-locked) .mobile-overview-section,
  body:not(.auth-locked) .mobile-overview-priority-item,
  body:not(.auth-locked) .mobile-vessel-section-action,
  body:not(.auth-locked) .mobile-vessel-add-button,
  body:not(.auth-locked) .mobile-report-primary-button,
  body:not(.auth-locked) .vendor-directory-trigger,
  body:not(.auth-locked) .inventory-directory-trigger {
    min-height: 44px;
    touch-action: manipulation;
  }
  body:not(.auth-locked) input,
  body:not(.auth-locked) select,
  body:not(.auth-locked) textarea {
    font-size: 16px;
  }
  body:not(.auth-locked) .access-modal-shell,
  body:not(.auth-locked) .mobile-shell-sheet {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: var(--visual-viewport-height);
    max-height: var(--visual-viewport-height);
    overflow: hidden;
    padding:
      max(8px, var(--safe-area-top))
      max(10px, var(--safe-area-right))
      calc(8px + var(--safe-area-bottom))
      max(10px, var(--safe-area-left));
    box-sizing: border-box;
  }
  body:not(.auth-locked) .access-modal-shell[hidden],
  body:not(.auth-locked) .mobile-shell-sheet[hidden] {
    display: none !important;
  }
  body:not(.auth-locked) .access-modal-backdrop,
  body:not(.auth-locked) .mobile-shell-sheet-backdrop {
    position: fixed;
    inset: 0;
  }
  body:not(.auth-locked) .access-modal,
  body:not(.auth-locked) .account-sheet,
  body:not(.auth-locked) .billing-sheet,
  body:not(.auth-locked) .vendor-modal,
  body:not(.auth-locked) .inventory-modal,
  body:not(.auth-locked) .crew-detail-modal,
  body:not(.auth-locked) .crew-confirm-modal,
  body:not(.auth-locked) .account-delete-confirm {
    display: flex;
    flex-direction: column;
    max-height: calc(var(--visual-viewport-height) - var(--safe-area-top) - var(--safe-area-bottom) - 18px);
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked) .mobile-shell-sheet-panel,
  body:not(.auth-locked) .work-order-mobile-sheet-panel,
  body:not(.auth-locked) .vessel-mobile-editor-sheet-panel,
  body:not(.auth-locked) .mobile-record-sheet-panel {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: calc(var(--visual-viewport-height) - var(--safe-area-top) - 10px);
    min-height: 0;
    margin: auto auto 0;
    overflow: hidden;
    transform: none !important;
    padding-bottom: calc(14px + var(--safe-area-bottom));
    border-radius: 28px 28px 0 0;
    overscroll-behavior: contain;
  }
  body:not(.auth-locked) .mobile-record-sheet-body,
  body:not(.auth-locked) .mobile-sheet-scroll-body,
  body:not(.auth-locked) .mobile-shell-sheet-list,
  body:not(.auth-locked) .work-order-mobile-sheet-host,
  body:not(.auth-locked) .vessel-mobile-editor-sheet-host,
  body:not(.auth-locked) .vendor-modal-body,
  body:not(.auth-locked) .inventory-modal-body,
  body:not(.auth-locked) .account-sheet-body,
  body:not(.auth-locked) .billing-sheet-body,
  body:not(.auth-locked) .access-modal-grid,
  body:not(.auth-locked) .crew-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding-bottom: calc(118px + var(--safe-area-bottom) + var(--mobile-keyboard-offset));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked) .work-order-mobile-sheet-host .report-form,
  body:not(.auth-locked) .vessel-mobile-editor-sheet-host > form {
    min-height: 100%;
    align-content: start;
  }
  body:not(.auth-locked) .mobile-record-action-bar,
  body:not(.auth-locked) .work-order-mobile-sheet-host .form-actions,
  body:not(.auth-locked) .vessel-mobile-editor-sheet-host > form .form-actions,
  body:not(.auth-locked) .vendor-form .form-actions,
  body:not(.auth-locked) .inventory-modal-form .form-actions,
  body:not(.auth-locked) .vendor-detail-actions,
  body:not(.auth-locked) .inventory-detail-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: auto;
    padding-top: 10px;
    padding-bottom: calc(10px + var(--safe-area-bottom));
    background: linear-gradient(180deg, rgba(246, 241, 233, 0), rgba(246, 241, 233, 0.98) 32%);
  }
  body:not(.auth-locked) .empty-state,
  body:not(.auth-locked) .loading-state {
    min-height: 104px;
    padding: 16px;
    border-radius: 20px;
    border-style: solid;
    background:
      radial-gradient(circle at 10% 0%, rgba(222, 242, 255, 0.58), transparent 42%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(240, 247, 250, 0.72));
  }
  body:not(.auth-locked) .compact-empty-state,
  body:not(.auth-locked) .compact-loading-state {
    min-height: 58px;
    padding: 13px 14px;
  }
  body:not(.auth-locked) .loading-state {
    position: relative;
    overflow: hidden;
  }
  body:not(.auth-locked) .loading-state::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.52) 46%, transparent 78%);
    transform: translateX(-100%);
    animation: mobileLoadingSweep 1.8s ease-in-out infinite;
  }
  body:not(.auth-locked) .empty-state-action {
    width: fit-content;
    min-height: 44px;
  }
  body:not(.auth-locked) [aria-busy="true"] {
    cursor: progress;
  }
}
@media (hover: none), (pointer: coarse) {
  body:not(.auth-locked) button:hover,
  body:not(.auth-locked) a:hover,
  body:not(.auth-locked) .primary-button:hover,
  body:not(.auth-locked) .ghost-button:hover,
  body:not(.auth-locked) .text-button:hover,
  body:not(.auth-locked) .report-action-button:hover,
  body:not(.auth-locked) .action-overflow-trigger:hover,
  body:not(.auth-locked) .workspace-tab:hover,
  body:not(.auth-locked) .workspace-mobile-primary-action:hover,
  body:not(.auth-locked) .workspace-mobile-more-button:hover,
  body:not(.auth-locked) .vessel-action-button:hover,
  body:not(.auth-locked) .inventory-directory-trigger:hover,
  body:not(.auth-locked) .vendor-directory-trigger:hover,
  body:not(.auth-locked) .mobile-shell-action-item:hover,
  body:not(.auth-locked) .mobile-report-primary-button:hover,
  body:not(.auth-locked) .mobile-overview-action:hover,
  body:not(.auth-locked) .mobile-overview-section:hover,
  body:not(.auth-locked) .mobile-overview-priority-item:hover {
    transform: none !important;
    filter: none !important;
  }
  body:not(.auth-locked) .mobile-bottom-nav-item:not(.active):hover,
  body:not(.auth-locked) .mobile-shell-action-item:hover {
    background: transparent;
    box-shadow: none;
  }
}
@keyframes mobileLoadingSweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@media (max-width: 760px) {
  body:not(.auth-locked) {
    --mobile-polish-panel: rgba(255, 255, 255, 0.82);
    --mobile-polish-panel-strong: rgba(255, 255, 255, 0.94);
    --mobile-polish-row: rgba(255, 255, 255, 0.72);
    --mobile-polish-row-muted: rgba(247, 251, 253, 0.72);
    --mobile-polish-line: rgba(13, 36, 56, 0.065);
    --mobile-polish-line-soft: rgba(13, 36, 56, 0.045);
    --mobile-polish-shadow: 0 10px 24px rgba(6, 35, 52, 0.052);
    --mobile-polish-shadow-soft: 0 6px 16px rgba(6, 35, 52, 0.038);
    --mobile-polish-active: #102331;
    --mobile-polish-active-end: #0a405b;
  }
  body:not(.auth-locked) .app-shell {
    width: 100%;
    padding: max(8px, var(--safe-area-top)) 8px calc(86px + var(--safe-area-bottom));
  }
  body:not(.auth-locked) .workspace-shell {
    gap: 10px;
    padding: 10px;
    border-color: rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.8), rgba(244, 249, 250, 0.66));
    box-shadow:
      0 18px 42px rgba(3, 24, 36, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.84);
  }
  body:not(.auth-locked) .workspace-scroll-area {
    gap: 8px;
    padding-bottom: calc(14px + var(--safe-area-bottom));
  }
  body:not(.auth-locked) .section-block,
  body:not(.auth-locked) .weekly-report-section,
  body:not(.auth-locked) .vendors-section,
  body:not(.auth-locked) .inventory-section,
  body:not(.auth-locked) .expenses-section,
  body:not(.auth-locked) .maintenance-section,
  body:not(.auth-locked) .vessel-section {
    padding: 14px;
    border-color: var(--mobile-polish-line);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(248, 250, 249, 0.62));
    box-shadow: var(--mobile-polish-shadow-soft);
  }
  body:not(.auth-locked) .section-heading,
  body:not(.auth-locked) .app-screen-header,
  body:not(.auth-locked) .workspace-mobile-context,
  body:not(.auth-locked) .mobile-report-wizard-head {
    margin-bottom: 10px;
  }
  body:not(.auth-locked) .section-heading h2,
  body:not(.auth-locked) .app-screen-header-main h2,
  body:not(.auth-locked) .workspace-mobile-context-copy h2,
  body:not(.auth-locked) .mobile-overview-topline .card-title,
  body:not(.auth-locked) .mobile-vessel-hero-title h3,
  body:not(.auth-locked) .mobile-report-wizard-head h3 {
    letter-spacing: -0.025em;
    line-height: 1;
  }
  body:not(.auth-locked) .eyebrow,
  body:not(.auth-locked) .metric-label,
  body:not(.auth-locked) .detail-label,
  body:not(.auth-locked) .mobile-report-kicker,
  body:not(.auth-locked) .mobile-report-panel-title small,
  body:not(.auth-locked) .mobile-report-select-label span,
  body:not(.auth-locked) .maintenance-summary-topline,
  body:not(.auth-locked) .maintenance-focus-topline {
    color: rgba(38, 59, 74, 0.58);
    letter-spacing: 0.16em;
  }
  body:not(.auth-locked) .small-copy,
  body:not(.auth-locked) .card-meta,
  body:not(.auth-locked) .app-screen-copy,
  body:not(.auth-locked) .app-screen-note {
    color: rgba(47, 72, 90, 0.76);
  }
  body:not(.auth-locked) .workspace-mobile-current,
  body:not(.auth-locked) .workspace-mobile-context,
  body:not(.auth-locked) .mobile-overview-shell,
  body:not(.auth-locked) .mobile-overview-priority,
  body:not(.auth-locked) .mobile-vessel-hero,
  body:not(.auth-locked) .mobile-vessel-section,
  body:not(.auth-locked) .mobile-vessel-fleet-switcher,
  body:not(.auth-locked) .mobile-report-wizard-head,
  body:not(.auth-locked) .mobile-report-panel,
  body:not(.auth-locked) .mobile-report-status-card,
  body:not(.auth-locked) .mobile-record-hero,
  body:not(.auth-locked) .mobile-record-section,
  body:not(.auth-locked) .mobile-shell-sheet-panel {
    border-color: var(--mobile-polish-line);
    background: var(--mobile-polish-panel);
    box-shadow: var(--mobile-polish-shadow-soft);
  }
  body:not(.auth-locked) .mobile-overview-priority,
  body:not(.auth-locked) .mobile-vessel-section,
  body:not(.auth-locked) .mobile-report-panel,
  body:not(.auth-locked) .mobile-record-section {
    padding: 12px;
  }
  body:not(.auth-locked) .mobile-overview-sections,
  body:not(.auth-locked) .mobile-overview-priority-list,
  body:not(.auth-locked) .work-order-mobile-row-list,
  body:not(.auth-locked) .work-order-compact-list,
  body:not(.auth-locked) .mobile-report-review-list,
  body:not(.auth-locked) .mobile-report-archive-list,
  body:not(.auth-locked) .vendor-directory-list,
  body:not(.auth-locked) .inventory-directory-list,
  body:not(.auth-locked) .mobile-shell-sheet-list {
    gap: 7px;
  }
  body:not(.auth-locked) .mobile-overview-priority-item,
  body:not(.auth-locked) .mobile-overview-section,
  body:not(.auth-locked) .work-order-mobile-row,
  body:not(.auth-locked) .work-order-accordion-item,
  body:not(.auth-locked) .work-order-suggestion-row,
  body:not(.auth-locked) .maintenance-row,
  body:not(.auth-locked) .maintenance-history-entry,
  body:not(.auth-locked) .mobile-report-step,
  body:not(.auth-locked) .mobile-report-review-row,
  body:not(.auth-locked) .mobile-report-archive-row,
  body:not(.auth-locked) .vendor-directory-item,
  body:not(.auth-locked) .inventory-directory-item,
  body:not(.auth-locked) .crew-directory-item,
  body:not(.auth-locked) .expense-log-card,
  body:not(.auth-locked) .mobile-shell-nav-item.mobile-more-row,
  body:not(.auth-locked) .mobile-record-fact,
  body:not(.auth-locked) .detail-item {
    border-color: var(--mobile-polish-line-soft);
    border-radius: 17px;
    background: var(--mobile-polish-row);
    box-shadow: none;
  }
  body:not(.auth-locked) .work-order-mobile-row,
  body:not(.auth-locked) .mobile-report-review-row,
  body:not(.auth-locked) .mobile-report-archive-row,
  body:not(.auth-locked) .vendor-directory-trigger,
  body:not(.auth-locked) .inventory-directory-trigger,
  body:not(.auth-locked) .crew-directory-item,
  body:not(.auth-locked) .expense-log-card {
    min-height: 58px;
  }
  body:not(.auth-locked) .mobile-overview-priority-item,
  body:not(.auth-locked) .mobile-overview-section,
  body:not(.auth-locked) .work-order-mobile-row,
  body:not(.auth-locked) .mobile-report-review-row {
    padding: 10px 11px;
  }
  body:not(.auth-locked) .work-order-accordion-toggle {
    min-height: 62px;
    padding: 9px 10px;
  }
  body:not(.auth-locked) .work-order-accordion-panel-inner,
  body:not(.auth-locked) .work-order-detail-grid,
  body:not(.auth-locked) .work-order-accordion-actions {
    margin-top: 8px;
  }
  body:not(.auth-locked) .maintenance-summary-card,
  body:not(.auth-locked) .maintenance-focus-card,
  body:not(.auth-locked) .maintenance-section-card,
  body:not(.auth-locked) .report-overview-card,
  body:not(.auth-locked) .app-screen-summary-card,
  body:not(.auth-locked) .expense-metric-card,
  body:not(.auth-locked) .expense-visual-card {
    border-color: var(--mobile-polish-line);
    background: var(--mobile-polish-panel);
    box-shadow: var(--mobile-polish-shadow-soft);
  }
  body:not(.auth-locked) .maintenance-summary-card,
  body:not(.auth-locked) .report-overview-card,
  body:not(.auth-locked) .app-screen-summary-card,
  body:not(.auth-locked) .expense-metric-card {
    padding: 13px;
    border-radius: 18px;
  }
  body:not(.auth-locked) .maintenance-focus-grid,
  body:not(.auth-locked) .report-summary-grid,
  body:not(.auth-locked) .overview-grid,
  body:not(.auth-locked) .app-screen-summary-grid {
    gap: 8px;
  }
  body:not(.auth-locked) .mobile-vessel-hero {
    gap: 10px;
    padding: 10px;
  }
  body:not(.auth-locked) .mobile-vessel-section {
    gap: 9px;
  }
  body:not(.auth-locked) .mobile-vessel-chip,
  body:not(.auth-locked) .mobile-vessel-hero-tags span,
  body:not(.auth-locked) .mobile-overview-section-value,
  body:not(.auth-locked) .status-badge,
  body:not(.auth-locked) .category-chip,
  body:not(.auth-locked) .priority-badge,
  body:not(.auth-locked) .work-order-mobile-priority,
  body:not(.auth-locked) .mobile-record-chip,
  body:not(.auth-locked) .mobile-report-step-state,
  body:not(.auth-locked) .mobile-report-review-meta em {
    border: 1px solid rgba(13, 36, 56, 0.045);
    background: rgba(13, 36, 56, 0.055);
    box-shadow: none;
    color: rgba(13, 36, 56, 0.72);
  }
  body:not(.auth-locked) .status-badge.is-success,
  body:not(.auth-locked) .status-badge.success,
  body:not(.auth-locked) .status-badge.active,
  body:not(.auth-locked) .mobile-record-chip.success,
  body:not(.auth-locked) .mobile-record-chip.is-good {
    border-color: rgba(76, 183, 165, 0.15);
    background: rgba(76, 183, 165, 0.14);
    color: #087464;
  }
  body:not(.auth-locked) .status-badge.is-warning,
  body:not(.auth-locked) .status-badge.warning,
  body:not(.auth-locked) .priority-badge.high,
  body:not(.auth-locked) .work-order-mobile-priority[data-tone="attention"],
  body:not(.auth-locked) .mobile-record-chip.warning,
  body:not(.auth-locked) .mobile-record-chip.high,
  body:not(.auth-locked) .mobile-record-chip.is-danger {
    border-color: rgba(239, 124, 98, 0.16);
    background: rgba(239, 124, 98, 0.13);
    color: #a54837;
  }
  body:not(.auth-locked) .mobile-bottom-nav-inner {
    min-height: 68px;
    border-color: rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
      0 14px 34px rgba(3, 24, 36, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  body:not(.auth-locked) .mobile-bottom-nav-item,
  body:not(.auth-locked) .mobile-shell-nav-item,
  body:not(.auth-locked) .mobile-shell-action-item,
  body:not(.auth-locked) .filter-chip,
  body:not(.auth-locked) .maintenance-subtab {
    border-color: transparent;
    box-shadow: none;
  }
  body:not(.auth-locked) .mobile-bottom-nav-item.active,
  body:not(.auth-locked) .mobile-shell-nav-item.active,
  body:not(.auth-locked) .filter-chip.active,
  body:not(.auth-locked) .maintenance-subtab.active,
  body:not(.auth-locked) .work-order-mobile-segments .filter-chip.active,
  body:not(.auth-locked) .mobile-vessel-chip.active,
  body:not(.auth-locked) .mobile-report-archive-row.is-selected {
    border-color: transparent;
    background: linear-gradient(180deg, var(--mobile-polish-active), var(--mobile-polish-active-end));
    color: #fff;
    box-shadow: none;
  }
  body:not(.auth-locked) .mobile-vessel-chip.active strong,
  body:not(.auth-locked) .mobile-vessel-chip.active small,
  body:not(.auth-locked) .mobile-report-archive-row.is-selected strong,
  body:not(.auth-locked) .mobile-report-archive-row.is-selected small {
    color: #fff;
  }
  body:not(.auth-locked) .primary-button,
  body:not(.auth-locked) .ghost-button,
  body:not(.auth-locked) .text-button,
  body:not(.auth-locked) .report-action-button,
  body:not(.auth-locked) .action-overflow-trigger,
  body:not(.auth-locked) .workspace-mobile-primary-action,
  body:not(.auth-locked) .workspace-mobile-more-button,
  body:not(.auth-locked) .mobile-overview-action,
  body:not(.auth-locked) .mobile-vessel-section-action,
  body:not(.auth-locked) .mobile-vessel-add-button,
  body:not(.auth-locked) .mobile-report-action-button,
  body:not(.auth-locked) .mobile-record-action {
    min-height: 44px;
    border-radius: 999px;
    box-shadow: none;
    transition:
      background 160ms ease,
      border-color 160ms ease,
      color 160ms ease,
      opacity 160ms ease;
  }
  body:not(.auth-locked) .primary-button,
  body:not(.auth-locked) .mobile-report-primary-button,
  body:not(.auth-locked) .mobile-overview-action.primary {
    border-color: transparent;
    background: linear-gradient(180deg, var(--mobile-polish-active), var(--mobile-polish-active-end));
    box-shadow: var(--mobile-polish-shadow-soft);
    color: #fff;
  }
  body:not(.auth-locked) .ghost-button,
  body:not(.auth-locked) .text-button,
  body:not(.auth-locked) .report-action-button,
  body:not(.auth-locked) .action-overflow-trigger,
  body:not(.auth-locked) select,
  body:not(.auth-locked) input,
  body:not(.auth-locked) textarea {
    border-color: var(--mobile-polish-line);
    background: var(--mobile-polish-panel-strong);
    box-shadow: none;
  }
  body:not(.auth-locked) .mobile-record-action-bar,
  body:not(.auth-locked) .work-order-mobile-sheet-host .form-actions,
  body:not(.auth-locked) .vessel-mobile-editor-sheet-host > form .form-actions,
  body:not(.auth-locked) .vendor-form .form-actions,
  body:not(.auth-locked) .inventory-modal-form .form-actions,
  body:not(.auth-locked) .vendor-detail-actions,
  body:not(.auth-locked) .inventory-detail-actions {
    border-top: 1px solid rgba(13, 36, 56, 0.055);
    background:
      linear-gradient(180deg, rgba(246, 241, 233, 0), rgba(250, 247, 241, 0.98) 28%);
  }
  body:not(.auth-locked) .empty-state,
  body:not(.auth-locked) .loading-state,
  body:not(.auth-locked) .mobile-report-empty-row,
  body:not(.auth-locked) .mobile-shell-empty {
    border-color: var(--mobile-polish-line-soft);
    background: var(--mobile-polish-row-muted);
    box-shadow: none;
  }
}
@media (max-width: 430px) {
  body:not(.auth-locked) .section-block,
  body:not(.auth-locked) .weekly-report-section,
  body:not(.auth-locked) .vendors-section,
  body:not(.auth-locked) .inventory-section,
  body:not(.auth-locked) .expenses-section,
  body:not(.auth-locked) .maintenance-section,
  body:not(.auth-locked) .vessel-section {
    padding: 12px;
  }
  body:not(.auth-locked) .mobile-overview-actions,
  body:not(.auth-locked) .mobile-report-action-grid {
    gap: 7px;
  }
  body:not(.auth-locked) .mobile-overview-action {
    min-height: 50px;
    padding-inline: 9px;
    font-size: 0.79rem;
  }
  body:not(.auth-locked) .mobile-vessel-hero {
    grid-template-columns: 96px minmax(0, 1fr);
  }
  body:not(.auth-locked) .mobile-vessel-photo {
    border-radius: 18px;
  }
  body:not(.auth-locked) .work-order-mobile-row,
  body:not(.auth-locked) .vendor-directory-trigger,
  body:not(.auth-locked) .inventory-directory-trigger,
  body:not(.auth-locked) .mobile-report-review-row {
    padding-inline: 10px;
  }
}
@media (max-width: 900px), (pointer: coarse) {
  body:not(.auth-locked) input,
  body:not(.auth-locked) select,
  body:not(.auth-locked) textarea,
  body:not(.auth-locked) [contenteditable="true"],
  body:not(.auth-locked) [contenteditable=""] {
    scroll-margin-top: calc(var(--safe-area-top) + 84px);
    scroll-margin-bottom: calc(var(--safe-area-bottom) + var(--mobile-keyboard-inset) + 132px);
  }
  body:not(.auth-locked) textarea {
    min-height: 112px;
    max-height: min(36dvh, 240px);
    overflow-y: auto;
    resize: vertical;
    line-height: 1.5;
  }
  body:not(.auth-locked).keyboard-open textarea {
    min-height: 96px;
    max-height: min(30dvh, 190px);
  }
}
@media (max-width: 760px) {
  body:not(.auth-locked) .app-shell {
    height: 100dvh;
    height: var(--mobile-visual-height);
    max-height: var(--mobile-visual-height);
  }
  body:not(.auth-locked).keyboard-open .app-shell {
    padding-bottom: max(8px, var(--safe-area-bottom));
  }
  body:not(.auth-locked).keyboard-open .workspace-scroll-area {
    padding-bottom: calc(28px + var(--safe-area-bottom) + var(--mobile-keyboard-inset)) !important;
  }
  body:not(.auth-locked) .mobile-bottom-nav {
    transition:
      opacity 160ms ease,
      transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 160ms ease;
    will-change: transform, opacity;
  }
  body:not(.auth-locked).keyboard-open .mobile-bottom-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
  }
  body:not(.auth-locked).keyboard-open .work-order-mobile-fab {
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
  }
  body:not(.auth-locked) .access-modal-shell,
  body:not(.auth-locked) .mobile-shell-sheet {
    height: 100dvh;
    height: var(--mobile-visual-height);
    max-height: var(--mobile-visual-height);
  }
  body:not(.auth-locked) .access-modal,
  body:not(.auth-locked) .account-sheet,
  body:not(.auth-locked) .billing-sheet,
  body:not(.auth-locked) .vendor-modal,
  body:not(.auth-locked) .inventory-modal,
  body:not(.auth-locked) .crew-detail-modal,
  body:not(.auth-locked) .crew-confirm-modal,
  body:not(.auth-locked) .account-delete-confirm {
    max-height: calc(var(--mobile-visual-height) - var(--safe-area-top) - 14px);
  }
  body:not(.auth-locked) .mobile-shell-sheet-panel,
  body:not(.auth-locked) .work-order-mobile-sheet-panel,
  body:not(.auth-locked) .vessel-mobile-editor-sheet-panel,
  body:not(.auth-locked) .mobile-record-sheet-panel {
    max-height: calc(var(--mobile-visual-height) - var(--safe-area-top) - 8px);
    padding-bottom: calc(14px + var(--safe-area-bottom));
  }
  body:not(.auth-locked) .access-modal-heading,
  body:not(.auth-locked) .mobile-shell-sheet-header,
  body:not(.auth-locked) .vendor-modal-heading,
  body:not(.auth-locked) .inventory-modal-heading,
  body:not(.auth-locked) .crew-detail-heading {
    flex: 0 0 auto;
  }
  body:not(.auth-locked) .mobile-record-sheet-body,
  body:not(.auth-locked) .mobile-sheet-scroll-body,
  body:not(.auth-locked) .mobile-shell-sheet-list,
  body:not(.auth-locked) .work-order-mobile-sheet-host,
  body:not(.auth-locked) .vessel-mobile-editor-sheet-host,
  body:not(.auth-locked) .vendor-modal-body,
  body:not(.auth-locked) .inventory-modal-body,
  body:not(.auth-locked) .account-sheet-body,
  body:not(.auth-locked) .billing-sheet-body,
  body:not(.auth-locked) .access-modal-grid,
  body:not(.auth-locked) .crew-detail-body {
    scroll-padding-top: calc(var(--safe-area-top) + 88px);
    scroll-padding-bottom: calc(148px + var(--safe-area-bottom) + var(--mobile-keyboard-inset));
  }
  body:not(.auth-locked).keyboard-open .mobile-record-sheet-body,
  body:not(.auth-locked).keyboard-open .mobile-sheet-scroll-body,
  body:not(.auth-locked).keyboard-open .mobile-shell-sheet-list,
  body:not(.auth-locked).keyboard-open .work-order-mobile-sheet-host,
  body:not(.auth-locked).keyboard-open .vessel-mobile-editor-sheet-host,
  body:not(.auth-locked).keyboard-open .vendor-modal-body,
  body:not(.auth-locked).keyboard-open .inventory-modal-body,
  body:not(.auth-locked).keyboard-open .account-sheet-body,
  body:not(.auth-locked).keyboard-open .billing-sheet-body,
  body:not(.auth-locked).keyboard-open .access-modal-grid,
  body:not(.auth-locked).keyboard-open .crew-detail-body {
    padding-bottom: calc(132px + var(--safe-area-bottom) + var(--mobile-keyboard-inset));
  }
  body:not(.auth-locked).keyboard-open .work-order-mobile-sheet-host .report-form,
  body:not(.auth-locked).keyboard-open .vessel-mobile-editor-sheet-host > form,
  body:not(.auth-locked).keyboard-open .vendor-form,
  body:not(.auth-locked).keyboard-open .inventory-modal-form,
  body:not(.auth-locked).keyboard-open .crew-detail-form {
    padding-bottom: calc(132px + var(--safe-area-bottom) + var(--mobile-keyboard-inset));
  }
  body:not(.auth-locked) .mobile-record-action-bar,
  body:not(.auth-locked) .work-order-mobile-sheet-host .form-actions,
  body:not(.auth-locked) .vessel-mobile-editor-sheet-host > form .form-actions,
  body:not(.auth-locked) .vendor-form .form-actions,
  body:not(.auth-locked) .inventory-modal-form .form-actions,
  body:not(.auth-locked) .vendor-detail-actions,
  body:not(.auth-locked) .inventory-detail-actions {
    bottom: var(--mobile-keyboard-inset);
    padding-bottom: calc(12px + var(--safe-area-bottom));
  }
  body:not(.auth-locked) .work-order-mobile-sheet-host .report-form {
    padding-bottom: calc(12px + var(--safe-area-bottom));
  }
  body:not(.auth-locked) .work-order-mobile-sheet-host .form-actions .primary-button,
  body:not(.auth-locked) .work-order-mobile-sheet-host .form-actions .text-button,
  body:not(.auth-locked) .vessel-mobile-editor-sheet-host > form .form-actions .primary-button,
  body:not(.auth-locked) .vessel-mobile-editor-sheet-host > form .form-actions .text-button,
  body:not(.auth-locked) .vendor-form .form-actions .primary-button,
  body:not(.auth-locked) .vendor-form .form-actions .text-button,
  body:not(.auth-locked) .inventory-modal-form .form-actions .primary-button,
  body:not(.auth-locked) .inventory-modal-form .form-actions .text-button,
  body:not(.auth-locked) .invite-review-panel > .form-actions .primary-button {
    min-height: 48px;
  }
  body:not(.auth-locked).keyboard-open .invite-review-panel > .form-actions {
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-keyboard-inset) + 12px);
  }
  body:not(.auth-locked).keyboard-open .access-card-invite {
    padding-bottom: calc(118px + var(--safe-area-bottom) + var(--mobile-keyboard-inset));
  }
body:not(.auth-locked).keyboard-open .app-feedback-region {
    bottom: calc(16px + var(--safe-area-bottom) + var(--mobile-keyboard-inset));
  }
}
.sidebar-vessel-selector {
  display: none;
}
@media (min-width: 761px) {
  body:not(.auth-locked) {
    color: #edf8ff;
    background:
      radial-gradient(circle at 78% 12%, rgba(44, 218, 211, 0.18), transparent 30%),
      radial-gradient(circle at 20% 86%, rgba(16, 94, 121, 0.22), transparent 36%),
      linear-gradient(135deg, #020812 0%, #061526 47%, #02101a 100%);
  }
  body:not(.auth-locked)::before {
    background:
      linear-gradient(120deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 54%);
    background-size: 92px 92px, 100% 100%;
    opacity: 0.16;
  }
  body:not(.auth-locked) .app-shell {
    width: 100%;
    height: 100dvh;
    padding: 0;
    max-width: none;
    overflow: hidden;
  }
  body:not(.auth-locked) .workspace-shell {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(248px, 18vw, 292px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(135deg, rgba(8, 26, 42, 0.96), rgba(3, 14, 24, 0.98)),
      radial-gradient(circle at 72% 20%, rgba(58, 229, 214, 0.1), transparent 32%);
    box-shadow:
      0 30px 90px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  body:not(.auth-locked) .workspace-nav {
    position: relative;
    top: auto;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 20px;
    padding: 28px 20px 126px;
    overflow: hidden;
    border: 0;
    border-right: 1px solid rgba(95, 218, 229, 0.15);
    border-radius: 0;
    background:
      linear-gradient(180deg, rgba(8, 30, 48, 0.86), rgba(1, 10, 19, 0.96)),
      radial-gradient(circle at 50% 0%, rgba(48, 213, 204, 0.14), transparent 42%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(24px);
  }
  body:not(.auth-locked) .workspace-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 24%),
      radial-gradient(circle at 40% 9%, rgba(42, 224, 211, 0.12), transparent 25%);
    opacity: 0.8;
  }
  body:not(.auth-locked) .workspace-nav > * {
    position: relative;
    z-index: 1;
  }
  body:not(.auth-locked) .workspace-nav-topline {
    position: static;
  }
  body:not(.auth-locked) .workspace-brand {
    position: relative;
    z-index: 1;
  }
  body:not(.auth-locked) .workspace-nav-topline {
    display: block;
  }
  body:not(.auth-locked) .workspace-brand {
    display: flex;
    align-items: center;
    gap: 13px;
  }
  body:not(.auth-locked) .workspace-brand-logo-shell {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(25, 218, 211, 0.22), rgba(11, 53, 80, 0.55)),
      rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(86, 222, 230, 0.28);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 28px rgba(40, 224, 214, 0.14);
  }
  body:not(.auth-locked) .workspace-brand .brand-name {
    color: #ffffff;
    font-size: 1.05rem;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .workspace-brand .brand-subtitle {
    color: rgba(208, 231, 239, 0.72);
    letter-spacing: 0;
    font-size: 0.68rem;
  }
  body:not(.auth-locked) .sidebar-vessel-selector {
    display: grid;
    position: relative;
    gap: 8px;
  }
  body:not(.auth-locked) .sidebar-vessel-label,
  body:not(.auth-locked) .overview-command-kicker,
  body:not(.auth-locked) .overview-command-panel h3,
  body:not(.auth-locked) .overview-command-metric-copy > span {
    color: rgba(207, 229, 237, 0.72);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  body:not(.auth-locked) .sidebar-vessel-current {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    min-height: 72px;
    padding: 10px;
    color: #f6fcff;
    border: 1px solid rgba(91, 217, 228, 0.22);
    border-radius: 15px;
    background:
      linear-gradient(135deg, rgba(14, 68, 82, 0.78), rgba(5, 24, 39, 0.78)),
      rgba(8, 39, 54, 0.72);
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  body:not(.auth-locked) .sidebar-vessel-selector[data-switcher-open="true"] .sidebar-vessel-current,
  body:not(.auth-locked) .sidebar-vessel-current:hover,
  body:not(.auth-locked) .sidebar-vessel-current:focus-visible {
    border-color: rgba(69, 226, 216, 0.42);
    background: rgba(13, 67, 82, 0.76);
    outline: none;
  }
  body:not(.auth-locked) .sidebar-vessel-thumb {
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(91, 217, 228, 0.24);
    border-radius: 12px;
    color: #3de2d7;
    background: linear-gradient(135deg, rgba(66, 222, 213, 0.16), rgba(255, 255, 255, 0.04));
  }
  body:not(.auth-locked) .sidebar-vessel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body:not(.auth-locked) .sidebar-vessel-thumb-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body:not(.auth-locked) .sidebar-vessel-thumb svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }
  body:not(.auth-locked) .sidebar-vessel-folder-mark {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(98, 232, 225, 0.36);
    border-radius: 8px;
    color: #61efe8;
    background: rgba(2, 24, 37, 0.92);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  }
  body:not(.auth-locked) .sidebar-vessel-folder-mark svg {
    width: 12px;
    height: 12px;
    stroke-width: 1.9;
  }
  body:not(.auth-locked) .sidebar-vessel-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
    text-align: left;
  }
  body:not(.auth-locked) .sidebar-vessel-folder-kicker {
    overflow: hidden;
    color: rgba(105, 239, 232, 0.78);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-locked) .sidebar-vessel-copy strong,
  body:not(.auth-locked) .workspace-account-copy strong {
    overflow: hidden;
    color: #ffffff;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-locked) .sidebar-vessel-copy small {
    overflow: hidden;
    color: rgba(210, 230, 238, 0.68);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-locked) .sidebar-vessel-count-badge {
    justify-self: end;
    padding: 5px 7px;
    color: #adfbf4;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid rgba(77, 224, 216, 0.22);
    border-radius: 999px;
    background: rgba(35, 215, 204, 0.1);
  }
  body:not(.auth-locked) .sidebar-vessel-chevron {
    color: rgba(61, 226, 215, 0.8);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-2px);
    transition: transform 180ms ease;
  }
  body:not(.auth-locked) .sidebar-vessel-selector[data-switcher-open="true"] .sidebar-vessel-chevron {
    transform: translateY(2px) rotate(180deg);
  }
  body:not(.auth-locked) .sidebar-vessel-menu {
    display: none;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(91, 217, 228, 0.16);
    border-radius: 15px;
    background:
      linear-gradient(180deg, rgba(7, 36, 52, 0.96), rgba(2, 17, 29, 0.96)),
      rgba(2, 16, 28, 0.9);
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  body:not(.auth-locked) .sidebar-vessel-selector[data-switcher-open="true"] .sidebar-vessel-menu {
    display: grid;
    gap: 8px;
  }
  body:not(.auth-locked) .sidebar-vessel-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: rgba(207, 229, 237, 0.72);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  body:not(.auth-locked) .sidebar-vessel-menu-head strong {
    color: #a8fbf4;
    font-size: 0.7rem;
    text-transform: none;
    white-space: nowrap;
  }
  body:not(.auth-locked) .sidebar-vessel-search {
    width: 100%;
    height: 34px;
    min-width: 0;
    padding: 0 10px;
    color: #edf8ff;
    border: 1px solid rgba(91, 217, 228, 0.18);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.06);
    outline: none;
  }
  body:not(.auth-locked) .sidebar-vessel-search::placeholder {
    color: rgba(207, 229, 237, 0.48);
  }
  body:not(.auth-locked) .sidebar-vessel-search:focus {
    border-color: rgba(69, 226, 216, 0.42);
    box-shadow: 0 0 0 3px rgba(45, 214, 204, 0.12);
  }
  body:not(.auth-locked) .sidebar-vessel-options {
    display: grid;
    gap: 6px;
    max-height: clamp(120px, 34dvh, 260px);
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
  }
  body:not(.auth-locked) .sidebar-vessel-option {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    color: rgba(224, 241, 247, 0.72);
    text-align: left;
    border: 1px solid rgba(91, 217, 228, 0.08);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
  }
  body:not(.auth-locked) .sidebar-vessel-option:hover,
  body:not(.auth-locked) .sidebar-vessel-option:focus-visible {
    color: #ffffff;
    border-color: rgba(67, 224, 214, 0.24);
    background: rgba(37, 224, 213, 0.08);
    outline: none;
  }
  body:not(.auth-locked) .sidebar-vessel-option.active {
    color: #ffffff;
    border-color: rgba(67, 224, 214, 0.22);
    background: rgba(37, 224, 213, 0.09);
  }
  body:not(.auth-locked) .sidebar-vessel-option-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  body:not(.auth-locked) .sidebar-vessel-option-copy strong,
  body:not(.auth-locked) .sidebar-vessel-option-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-locked) .sidebar-vessel-option-copy strong {
    color: inherit;
    font-size: 0.86rem;
  }
  body:not(.auth-locked) .sidebar-vessel-option-copy small {
    color: rgba(210, 230, 238, 0.58);
    font-size: 0.74rem;
  }
  body:not(.auth-locked) .sidebar-vessel-option-badge {
    padding: 4px 6px;
    color: #b8fff8;
    font-size: 0.62rem;
    font-weight: 800;
    border-radius: 999px;
    background: rgba(35, 215, 204, 0.12);
  }
  body:not(.auth-locked) .sidebar-vessel-empty {
    padding: 12px 10px;
    color: rgba(210, 230, 238, 0.62);
    font-size: 0.82rem;
    text-align: center;
    border: 1px dashed rgba(91, 217, 228, 0.16);
    border-radius: 11px;
  }
  body:not(.auth-locked) .sidebar-vessel-overflow-note {
    padding: 2px 4px 0;
    color: rgba(210, 230, 238, 0.54);
    font-size: 0.72rem;
    line-height: 1.35;
  }
  body:not(.auth-locked) .workspace-mobile-shell {
    display: none !important;
  }
  body:not(.auth-locked) .workspace-tab-row {
    --workspace-tab-height: 48px;
    --workspace-tab-icon-size: 25px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    padding: 2px 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body:not(.auth-locked) .workspace-tab {
    width: 100%;
    min-width: 0;
    min-height: var(--workspace-tab-height);
    justify-content: flex-start;
    gap: 14px;
    padding: 0 14px;
    color: rgba(231, 243, 248, 0.76);
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
  }
  body:not(.auth-locked) .workspace-tab:hover,
  body:not(.auth-locked) .workspace-tab:focus-visible {
    color: #ffffff;
    border-color: rgba(67, 224, 214, 0.18);
    background: rgba(255, 255, 255, 0.04);
    outline: none;
  }
  body:not(.auth-locked) .workspace-tab.locked:hover,
  body:not(.auth-locked) .workspace-tab.locked:focus-visible {
    color: #f2feff;
    border-color: rgba(93, 239, 234, 0.38);
    background:
      linear-gradient(135deg, rgba(13, 74, 88, 0.62), rgba(5, 25, 39, 0.56)),
      rgba(7, 35, 48, 0.56);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 14px 30px rgba(0, 0, 0, 0.18),
      0 0 0 1px rgba(52, 232, 224, 0.08);
  }
  body:not(.auth-locked) .workspace-tab.active {
    color: #ffffff;
    border-color: rgba(64, 230, 219, 0.3);
    background: linear-gradient(135deg, rgba(43, 225, 214, 0.22), rgba(8, 72, 91, 0.62));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 34px rgba(0, 0, 0, 0.14);
  }
  body:not(.auth-locked) .workspace-tab-icon {
    color: currentColor;
    background: transparent;
    border: 0;
  }
  body:not(.auth-locked) .workspace-tab-icon svg {
    stroke-width: 1.9;
  }
  body:not(.auth-locked) .workspace-tab[data-view="overview"] { order: 1; }
  body:not(.auth-locked) .workspace-tab[data-view="vessel"] { order: 2; }
  body:not(.auth-locked) .workspace-tab[data-view="work-orders"] { order: 3; }
  body:not(.auth-locked) .workspace-tab[data-view="maintenance"] { order: 4; }
  body:not(.auth-locked) .workspace-tab[data-view="crew"] { order: 5; }
  body:not(.auth-locked) .workspace-tab[data-view="reports"] { order: 6; }
  body:not(.auth-locked) .workspace-tab[data-view="vendors"] { order: 7; }
  body:not(.auth-locked) .workspace-tab[data-view="inventory"] { order: 8; }
  body:not(.auth-locked) .workspace-tab[data-view="expenses"] { order: 9; }
  body:not(.auth-locked) .workspace-tab[data-view="voyage"] { order: 10; }
  body:not(.auth-locked) .workspace-global-header {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(18px, 2vw, 28px);
    width: 100%;
    padding: 0 0 clamp(14px, 1.5vw, 20px);
    color: #effaff;
    background:
      linear-gradient(180deg, rgba(2, 15, 27, 0.96), rgba(2, 15, 27, 0.78) 72%, rgba(2, 15, 27, 0));
  }
  body:not(.auth-locked) .workspace-global-title {
    min-width: 0;
    display: grid;
    gap: 10px;
    padding-top: 2px;
  }
  body:not(.auth-locked) .workspace-global-title h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.15rem, 3vw, 3rem);
    line-height: 1;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .workspace-global-title p {
    max-width: 760px;
    margin: 0;
    color: rgba(218, 232, 239, 0.82);
    font-size: clamp(0.98rem, 1.06vw, 1.08rem);
    line-height: 1.5;
  }
  body:not(.auth-locked) .workspace-global-toolbar {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
  }
  body:not(.auth-locked) .workspace-realtime-indicator {
    display: inline-grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    max-width: 224px;
    padding: 7px 11px;
    color: #0d2438;
    border: 1px solid rgba(23, 158, 174, 0.18);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(232, 249, 251, 0.68));
    box-shadow: 0 14px 34px rgba(7, 55, 68, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    cursor: pointer;
  }
  body:not(.auth-locked) .workspace-realtime-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #17b3ad;
    box-shadow: 0 0 0 4px rgba(23, 179, 173, 0.12);
  }
  body:not(.auth-locked) .workspace-realtime-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
    text-align: left;
  }
  body:not(.auth-locked) .workspace-realtime-copy strong,
  body:not(.auth-locked) .workspace-realtime-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-locked) .workspace-realtime-copy strong {
    font-size: 0.78rem;
    line-height: 1.1;
  }
  body:not(.auth-locked) .workspace-realtime-copy small {
    color: #5b7182;
    font-size: 0.68rem;
    font-weight: 700;
  }
  body:not(.auth-locked) .workspace-realtime-indicator em {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    color: #046a72;
    border-radius: 999px;
    background: rgba(18, 168, 160, 0.12);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
  }
  body:not(.auth-locked) .workspace-realtime-indicator[data-realtime-state="syncing"] .workspace-realtime-dot {
    animation: realtimePulse 1.2s ease-in-out infinite;
  }
  body:not(.auth-locked) .workspace-realtime-indicator[data-realtime-state="stale"] .workspace-realtime-dot,
  body:not(.auth-locked) .workspace-realtime-indicator[data-realtime-state="editing"] .workspace-realtime-dot {
    background: #f0aa3d;
    box-shadow: 0 0 0 4px rgba(240, 170, 61, 0.14);
  }
  body:not(.auth-locked) .workspace-realtime-indicator[data-realtime-state="offline"] .workspace-realtime-dot {
    background: #c9584b;
    box-shadow: 0 0 0 4px rgba(201, 88, 75, 0.12);
  }
  @media (max-width: 900px) {
    body:not(.auth-locked) .workspace-realtime-indicator {
      max-width: 48px;
      width: 48px;
      height: 48px;
      grid-template-columns: 1fr;
      justify-items: center;
      padding: 0;
    }
    body:not(.auth-locked) .workspace-realtime-copy,
    body:not(.auth-locked) .workspace-realtime-indicator em {
      display: none;
    }
  }
  @keyframes realtimePulse {
    0%,
    100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.35); opacity: 1; }
  }
  body:not(.auth-locked) .workspace-global-alert {
    position: relative;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    color: #074d5f;
    border: 1px solid rgba(23, 158, 174, 0.18);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(232, 249, 251, 0.72));
    box-shadow: 0 14px 34px rgba(7, 55, 68, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
  }
  body:not(.auth-locked) .workspace-global-alert:hover,
  body:not(.auth-locked) .workspace-global-alert:focus-visible {
    color: #006d7d;
    border-color: rgba(23, 180, 194, 0.4);
    background: linear-gradient(180deg, rgba(246, 254, 255, 0.96), rgba(218, 250, 252, 0.86));
    box-shadow: 0 18px 42px rgba(12, 132, 150, 0.18), 0 0 0 6px rgba(35, 219, 209, 0.1);
    outline: none;
    transform: translateY(-1px) scale(1.025);
  }
  body:not(.auth-locked) .workspace-global-alert[aria-expanded="true"] {
    color: #ffffff;
    border-color: rgba(48, 229, 219, 0.42);
    background: linear-gradient(135deg, #047483, #004b5c);
    box-shadow: 0 20px 46px rgba(0, 92, 111, 0.28), 0 0 0 6px rgba(40, 220, 211, 0.12);
  }
  body:not(.auth-locked) .workspace-global-alert[data-unread="true"],
  body:not(.auth-locked) .workspace-mobile-alert[data-unread="true"] {
    border-color: rgba(25, 203, 205, 0.34);
    box-shadow: 0 16px 38px rgba(7, 147, 165, 0.16), 0 0 0 5px rgba(35, 219, 209, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  }
  body:not(.auth-locked) .marine-notification-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(19, 148, 166, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    transition: transform 180ms ease, background 180ms ease;
  }
  body:not(.auth-locked) .marine-notification-icon[data-unread="true"] {
    border-color: rgba(16, 183, 196, 0.32);
    background: rgba(229, 253, 255, 0.9);
  }
  body:not(.auth-locked) .workspace-global-alert:hover .marine-notification-icon,
  body:not(.auth-locked) .workspace-global-alert:focus-visible .marine-notification-icon,
  body:not(.auth-locked) .workspace-mobile-alert:hover .marine-notification-icon,
  body:not(.auth-locked) .workspace-mobile-alert:focus-visible .marine-notification-icon {
    transform: scale(1.04);
    background: rgba(235, 253, 255, 0.94);
  }
  body:not(.auth-locked) .workspace-global-alert[aria-expanded="true"] .marine-notification-icon,
  body:not(.auth-locked) .workspace-mobile-alert[aria-expanded="true"] .marine-notification-icon {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
  }
  body:not(.auth-locked) .marine-notification-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body:not(.auth-locked) .marine-notification-anchor {
    stroke-width: 1.65;
  }
  body:not(.auth-locked) .marine-notification-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    background: linear-gradient(135deg, #35dfd6, #0697a8);
    box-shadow: 0 8px 18px rgba(7, 151, 168, 0.24);
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    animation: marineBadgePulse 420ms ease both;
  }
  @keyframes marineBadgePulse {
    0% { transform: scale(0.72); opacity: 0; }
    70% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  body:not(.auth-locked) .notification-center {
    position: fixed;
    top: clamp(78px, 6.4vw, 104px);
    right: clamp(16px, 2.4vw, 44px);
    z-index: 1200;
    width: min(920px, calc(100vw - 34px));
    max-height: min(720px, calc(100dvh - 112px));
    display: grid;
    grid-template-rows: auto auto;
    overflow-x: hidden;
    overflow-y: auto;
    color: #10283a;
    border: 1px solid rgba(22, 119, 139, 0.15);
    border-radius: 28px;
    background:
      radial-gradient(circle at 8% 0%, rgba(37, 219, 209, 0.16), transparent 34%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 252, 253, 0.94));
    box-shadow:
      0 34px 86px rgba(6, 31, 45, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(22px) saturate(1.18);
    animation: notificationPanelIn 220ms ease both;
  }
  body:not(.auth-locked) .notification-center[hidden] {
    display: none;
  }
  @keyframes notificationPanelIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  body:not(.auth-locked) .notification-center-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 24px 18px;
  }
  body:not(.auth-locked) .notification-center-title-block {
    min-width: 0;
    display: grid;
    gap: 5px;
  }
  body:not(.auth-locked) .notification-center-header h2 {
    margin: 0;
    color: #102337;
    font-size: clamp(1.55rem, 2vw, 2.15rem);
    line-height: 1;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .notification-center-header p {
    max-width: 520px;
    margin: 0;
    color: #64788a;
    font-size: 0.9rem;
    line-height: 1.45;
  }
  body:not(.auth-locked) .notification-center-eyebrow {
    display: block;
    color: #078da0;
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  body:not(.auth-locked) .notification-center-close,
  body:not(.auth-locked) .notification-center-action,
  body:not(.auth-locked) .notification-center-read-button,
  body:not(.auth-locked) .notification-center-tab,
  body:not(.auth-locked) .notification-group-chip,
  body:not(.auth-locked) .notification-action-tile,
  body:not(.auth-locked) .notification-detail-back {
    border: 1px solid rgba(13, 132, 150, 0.2);
    border-radius: 999px;
    color: #0d7184;
    background: rgba(232, 250, 252, 0.84);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  }
  body:not(.auth-locked) :is(.notification-center-close, .notification-center-action, .notification-center-read-button, .notification-center-tab, .notification-group-chip, .notification-action-tile, .notification-detail-back):hover,
  body:not(.auth-locked) :is(.notification-center-close, .notification-center-action, .notification-center-read-button, .notification-center-tab, .notification-group-chip, .notification-action-tile, .notification-detail-back):focus-visible {
    border-color: rgba(14, 157, 176, 0.34);
    background: rgba(223, 250, 253, 0.96);
    box-shadow: 0 10px 24px rgba(8, 127, 145, 0.12);
    outline: none;
    transform: translateY(-1px);
  }
  body:not(.auth-locked) .notification-center-close {
    min-height: 38px;
    padding: 0 16px;
    flex: 0 0 auto;
  }
  body:not(.auth-locked) .notification-center-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 24px 14px;
  }
  body:not(.auth-locked) .notification-center-status span {
    min-width: 0;
    padding: 12px 14px;
    color: #62778a;
    border: 1px solid rgba(19, 132, 150, 0.13);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    font-size: 0.74rem;
    font-weight: 760;
    line-height: 1.2;
  }
  body:not(.auth-locked) .notification-center-status strong {
    display: block;
    margin-bottom: 2px;
    color: #102337;
    font-size: 1.22rem;
    line-height: 1;
  }
  body:not(.auth-locked) .notification-center-status [data-tone="critical"] strong {
    color: #d65048;
  }
  body:not(.auth-locked) .notification-center-status [data-tone="attention"] strong {
    color: #d48824;
  }
  body:not(.auth-locked) .notification-center-status [data-tone="info"] strong {
    color: #078aa0;
  }
  body:not(.auth-locked) .notification-center-tabs,
  body:not(.auth-locked) .notification-center-groups {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
  }
  body:not(.auth-locked) .notification-center-tabs::-webkit-scrollbar,
  body:not(.auth-locked) .notification-center-groups::-webkit-scrollbar {
    display: none;
  }
  body:not(.auth-locked) .notification-center-tab,
  body:not(.auth-locked) .notification-group-chip {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    white-space: nowrap;
  }
  body:not(.auth-locked) .notification-center-tab em,
  body:not(.auth-locked) .notification-group-chip em {
    color: #5f7a8d;
    font-style: normal;
    font-size: 0.72rem;
  }
  body:not(.auth-locked) .notification-center-tab.is-active,
  body:not(.auth-locked) .notification-group-chip.is-active {
    color: #ffffff;
    border-color: rgba(5, 114, 132, 0.18);
    background: linear-gradient(135deg, #078fa1, #015a6d);
    box-shadow: 0 12px 28px rgba(2, 103, 124, 0.18);
  }
  body:not(.auth-locked) .notification-center-tab.is-active em,
  body:not(.auth-locked) .notification-group-chip.is-active em {
    color: rgba(255, 255, 255, 0.82);
  }
  body:not(.auth-locked) .notification-filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: end;
    padding: 0 24px 14px;
  }
  body:not(.auth-locked) .notification-filter-select {
    min-width: 0;
    display: grid;
    gap: 5px;
    color: #71869a;
    font-size: 0.68rem;
    font-weight: 820;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  body:not(.auth-locked) .notification-filter-select select {
    min-width: 0;
    width: 100%;
    min-height: 38px;
    padding: 0 34px 0 11px;
    color: #173349;
    border: 1px solid rgba(18, 117, 138, 0.16);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.84);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: none;
  }
  body:not(.auth-locked) .notification-unread-toggle {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    color: #0d7184;
    border: 1px solid rgba(13, 132, 150, 0.18);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
  }
  body:not(.auth-locked) .notification-unread-toggle input {
    accent-color: #0aa3af;
  }
  body:not(.auth-locked) .notification-center-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 24px 14px;
    color: #6d8193;
    font-size: 0.82rem;
    font-weight: 720;
  }
  body:not(.auth-locked) .notification-center-action {
    min-height: 34px;
    padding: 0 13px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.78);
  }
  body:not(.auth-locked) .notification-center-action:disabled {
    opacity: 0.45;
    cursor: default;
  }
  body:not(.auth-locked) .notification-center-body {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(320px, 0.86fr) minmax(380px, 1.14fr);
    gap: 16px;
    padding: 0 24px 24px;
    align-items: stretch;
    overflow: visible;
  }
  body:not(.auth-locked) .notification-center-feed,
  body:not(.auth-locked) .notification-center-detail {
    min-height: 0;
    overflow: visible;
  }
  body:not(.auth-locked) .notification-center-feed {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(15, 118, 138, 0.13);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }
  body:not(.auth-locked) .notification-feed-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  body:not(.auth-locked) .notification-feed-header h3 {
    margin: 0;
    color: #102337;
    font-size: 1.05rem;
    line-height: 1.1;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .notification-feed-header p {
    margin: 4px 0 0;
    color: #6a7f91;
    font-size: 0.78rem;
    font-weight: 720;
    line-height: 1.35;
  }
  body:not(.auth-locked) .notification-center-list {
    min-height: 0;
    height: auto;
    display: grid;
    align-content: start;
    gap: 9px;
    overflow: visible;
    padding: 0 2px 2px 0;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked) .notification-center-group {
    display: grid;
    gap: 8px;
  }
  body:not(.auth-locked) .notification-center-group + .notification-center-group {
    margin-top: 6px;
  }
  body:not(.auth-locked) .notification-center-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 4px;
    color: rgba(15, 78, 92, 0.72);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  body:not(.auth-locked) .notification-center-group-heading em {
    display: inline-grid;
    min-width: 24px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(43, 185, 197, 0.2);
    border-radius: 999px;
    background: rgba(235, 251, 252, 0.86);
    color: #087383;
    font-style: normal;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .notification-center-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 11px 10px 11px 13px;
    border: 1px solid rgba(13, 36, 56, 0.065);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: none;
    transition: border-color 170ms ease, background 170ms ease, opacity 170ms ease;
  }
  body:not(.auth-locked) .notification-center-item:hover,
  body:not(.auth-locked) .notification-center-item:focus-within {
    border-color: rgba(12, 158, 176, 0.24);
    background: rgba(244, 252, 253, 0.88);
  }
  body:not(.auth-locked) .notification-center-item.is-selected {
    border-color: rgba(8, 154, 174, 0.38);
    background:
      linear-gradient(180deg, rgba(245, 254, 255, 0.98), rgba(255, 255, 255, 0.92)),
      radial-gradient(circle at 0% 20%, rgba(33, 217, 210, 0.18), transparent 42%);
    box-shadow: inset 3px 0 0 #139aa7;
  }
  body:not(.auth-locked) .notification-center-item.is-read {
    opacity: 0.72;
  }
  body:not(.auth-locked) .notification-center-item.is-selected.is-read {
    opacity: 1;
  }
  body:not(.auth-locked) .notification-unread-dot {
    position: absolute;
    left: -5px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #f1a10a;
    box-shadow: 0 0 0 4px rgba(241, 161, 10, 0.1);
    transform: translateY(-50%);
  }
  body:not(.auth-locked) .notification-center-item.is-read .notification-unread-dot {
    opacity: 0;
  }
  body:not(.auth-locked) .notification-center-item.is-selected .notification-unread-dot {
    width: 8px;
    height: 34px;
    opacity: 1;
    border-radius: 999px;
    background: linear-gradient(180deg, #26d9d0, #078da0);
    box-shadow: 0 0 0 4px rgba(38, 217, 208, 0.1), 0 8px 22px rgba(7, 141, 160, 0.22);
  }
  body:not(.auth-locked) .notification-center-item-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 0;
    color: inherit;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }
  body:not(.auth-locked) .notification-center-item-icon {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    color: #078aa0;
    border: 1px solid rgba(7, 138, 160, 0.18);
    border-radius: 15px;
    background: rgba(226, 249, 251, 0.86);
  }
  body:not(.auth-locked) .notification-center-item[data-severity="critical"] .notification-center-item-icon,
  body:not(.auth-locked) .notification-detail-card[data-severity="critical"] .notification-detail-icon {
    color: #d65048;
    border-color: rgba(214, 80, 72, 0.2);
    background: rgba(255, 238, 235, 0.94);
  }
  body:not(.auth-locked) .notification-center-item[data-severity="attention"] .notification-center-item-icon,
  body:not(.auth-locked) .notification-detail-card[data-severity="attention"] .notification-detail-icon {
    color: #d48824;
    border-color: rgba(212, 136, 36, 0.22);
    background: rgba(255, 247, 232, 0.96);
  }
  body:not(.auth-locked) .notification-center-item[data-severity="system"] .notification-center-item-icon,
  body:not(.auth-locked) .notification-detail-card[data-severity="system"] .notification-detail-icon {
    color: #238458;
    border-color: rgba(35, 132, 88, 0.18);
    background: rgba(232, 248, 240, 0.94);
  }
  body:not(.auth-locked) .notification-center-item-icon svg,
  body:not(.auth-locked) .notification-detail-icon svg,
  body:not(.auth-locked) .notification-detail-meta svg,
  body:not(.auth-locked) .notification-action-tile svg,
  body:not(.auth-locked) .notification-detail-back svg,
  body:not(.auth-locked) .notification-center-empty svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body:not(.auth-locked) .notification-center-item-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
  }
  body:not(.auth-locked) .notification-center-item-topline {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #087f92;
    font-size: 0.62rem;
    font-weight: 880;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  body:not(.auth-locked) .notification-center-item-topline em {
    margin-left: auto;
    padding: 2px 6px;
    color: #b26f1b;
    border-radius: 999px;
    background: rgba(255, 241, 219, 0.9);
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
  }
  body:not(.auth-locked) .notification-center-item-copy strong {
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    color: #102337;
    font-size: 0.9rem;
    line-height: 1.24;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }
  body:not(.auth-locked) .notification-center-item-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: #5f7387;
    font-size: 0.76rem;
    line-height: 1.36;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body:not(.auth-locked) .notification-center-item-meta {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #6f8495;
    font-size: 0.72rem;
    font-weight: 760;
  }
  body:not(.auth-locked) .notification-card-actions {
    display: flex;
    gap: 6px;
    justify-items: end;
  }
  body:not(.auth-locked) .notification-center-read-button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.74);
  }
  body:not(.auth-locked) .notification-center-read-button.is-ghost {
    color: #668092;
    background: rgba(255, 255, 255, 0.7);
  }
  body:not(.auth-locked) .notification-detail-card {
    height: auto;
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 13px;
    overflow: visible;
    padding: 20px;
    border: 1px solid rgba(15, 118, 138, 0.13);
    border-radius: 24px;
    background:
      radial-gradient(circle at 14% 0%, rgba(39, 220, 211, 0.12), transparent 36%),
      rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    -webkit-overflow-scrolling: touch;
    animation: notificationDetailSwap 180ms ease both;
  }
  @keyframes notificationDetailSwap {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  body:not(.auth-locked) .notification-detail-card.is-empty {
    place-items: center;
    align-content: center;
    text-align: center;
    color: #65788a;
  }
  body:not(.auth-locked) .notification-detail-empty-icon {
    position: relative;
    width: 58px;
    height: 58px;
    display: inline-grid;
    place-items: center;
    color: #087f92;
  }
  body:not(.auth-locked) .notification-detail-back {
    display: none;
    width: max-content;
    min-height: 34px;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
  }
  body:not(.auth-locked) .notification-detail-header {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  body:not(.auth-locked) .notification-detail-icon {
    width: 58px;
    height: 58px;
    display: inline-grid;
    place-items: center;
    color: #078aa0;
    border: 1px solid rgba(7, 138, 160, 0.18);
    border-radius: 20px;
    background: rgba(226, 249, 251, 0.9);
  }
  body:not(.auth-locked) .notification-detail-label {
    margin: 0 0 4px;
    color: #087f92;
    font-size: 0.68rem;
    font-weight: 880;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  body:not(.auth-locked) .notification-detail-header h3 {
    margin: 0;
    color: #102337;
    font-size: clamp(1.18rem, 1.5vw, 1.55rem);
    line-height: 1.12;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .notification-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
  }
  body:not(.auth-locked) .notification-detail-badges span,
  body:not(.auth-locked) .notification-severity-pill {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 0 9px;
    color: #6b7f91;
    border-radius: 999px;
    background: rgba(244, 249, 250, 0.92);
    font-size: 0.72rem;
    font-weight: 820;
  }
  body:not(.auth-locked) .notification-severity-pill {
    color: #b26f1b;
    background: rgba(255, 240, 218, 0.92);
  }
  body:not(.auth-locked) .notification-detail-summary {
    margin: 0;
    color: #5d7184;
    font-size: 0.92rem;
    line-height: 1.5;
  }
  body:not(.auth-locked) .notification-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #526a7d;
    font-size: 0.78rem;
    font-weight: 780;
  }
  body:not(.auth-locked) .notification-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  body:not(.auth-locked) .notification-detail-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
  }
  body:not(.auth-locked) .notification-action-tile {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    text-align: left;
    white-space: normal;
  }
  body:not(.auth-locked) .notification-action-tile span {
    font-size: 0.74rem;
    line-height: 1.12;
  }
  body:not(.auth-locked) .notification-detail-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 14px;
  }
  body:not(.auth-locked) .notification-detail-section {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(15, 118, 138, 0.14);
    background: transparent;
  }
  body:not(.auth-locked) .notification-detail-card > .notification-detail-section {
    overflow: visible;
  }
  body:not(.auth-locked) .notification-detail-section-heading {
    color: #087f92;
    font-size: 0.68rem;
    font-weight: 880;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  body:not(.auth-locked) .notification-timeline {
    display: grid;
    gap: 0;
  }
  body:not(.auth-locked) .notification-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    padding-bottom: 14px;
  }
  body:not(.auth-locked) .notification-timeline-item::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 15px;
    bottom: 0;
    width: 1px;
    background: rgba(13, 132, 150, 0.16);
  }
  body:not(.auth-locked) .notification-timeline-item:last-child::before {
    display: none;
  }
  body:not(.auth-locked) .notification-timeline-dot {
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-radius: 999px;
    background: #13a6b6;
    box-shadow: 0 0 0 4px rgba(19, 166, 182, 0.1);
  }
  body:not(.auth-locked) .notification-timeline-item[data-tone="critical"] .notification-timeline-dot {
    background: #d65048;
    box-shadow: 0 0 0 4px rgba(214, 80, 72, 0.11);
  }
  body:not(.auth-locked) .notification-timeline-item[data-tone="attention"] .notification-timeline-dot {
    background: #dc930d;
    box-shadow: 0 0 0 4px rgba(220, 147, 13, 0.12);
  }
  body:not(.auth-locked) .notification-timeline-item strong {
    color: #183146;
    font-size: 0.82rem;
  }
  body:not(.auth-locked) .notification-timeline-item p,
  body:not(.auth-locked) .notification-detail-muted,
  body:not(.auth-locked) .notification-work-order-history span {
    margin: 2px 0 0;
    color: #687d8f;
    font-size: 0.76rem;
    line-height: 1.42;
  }
  body:not(.auth-locked) .notification-image-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  body:not(.auth-locked) .notification-image-strip img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid rgba(15, 118, 138, 0.12);
    border-radius: 14px;
    background: #eaf5f7;
  }
  body:not(.auth-locked) .notification-work-order-history {
    display: grid;
    gap: 4px;
    padding-top: 6px;
  }
  body:not(.auth-locked) .notification-work-order-history strong {
    color: #183146;
    font-size: 0.82rem;
  }
  body:not(.auth-locked) .notification-center-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 42px 20px;
    text-align: center;
    color: #65788a;
  }
  body:not(.auth-locked) .notification-center-empty > span {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    color: #078aa0;
    border-radius: 18px;
    background: rgba(226, 249, 251, 0.9);
  }
  body:not(.auth-locked) .notification-center-empty strong {
    color: #102337;
    font-size: 1rem;
  }
  body:not(.auth-locked) .notification-center-empty p {
    margin: 0;
    font-size: 0.86rem;
  }
  @media (max-width: 1100px) {
    body:not(.auth-locked) .notification-center {
      width: min(880px, calc(100vw - 24px));
    }
    body:not(.auth-locked) .notification-center-body {
      grid-template-columns: minmax(300px, 0.88fr) minmax(330px, 1.12fr);
    }
    body:not(.auth-locked) .notification-detail-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 760px) {
    body:not(.auth-locked) .notification-center {
      inset: auto 8px calc(var(--safe-area-bottom) + var(--mobile-keyboard-inset, 0px) + 8px) 8px;
      width: auto;
      max-height: min(86dvh, calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top) - var(--safe-area-bottom) - var(--mobile-keyboard-inset, 0px) - 18px));
      border-radius: 26px 26px 22px 22px;
      grid-template-rows: auto auto;
      z-index: 1400;
    }
    body:not(.auth-locked) .notification-center-header {
      padding: 18px 18px 12px;
    }
    body:not(.auth-locked) .notification-center-header h2 {
      font-size: 1.36rem;
    }
    body:not(.auth-locked) .notification-center-body {
      position: relative;
      display: block;
      min-height: min(430px, 52dvh);
      padding: 0 14px 16px;
    }
    body:not(.auth-locked) .notification-center-feed {
      padding: 15px;
      border-radius: 22px;
    }
    body:not(.auth-locked) .notification-feed-header {
      align-items: center;
    }
    body:not(.auth-locked) .notification-center-feed,
    body:not(.auth-locked) .notification-center-detail {
      height: 100%;
      transition: transform 220ms ease, opacity 220ms ease;
    }
    body:not(.auth-locked) .notification-center.has-selection .notification-center-feed {
      opacity: 0.12;
      pointer-events: none;
      transform: translateX(-16%);
    }
    body:not(.auth-locked) .notification-center-detail {
      position: absolute;
      inset: 0 14px 16px;
      z-index: 2;
      opacity: 0;
      pointer-events: none;
      transform: translateX(105%);
    }
    body:not(.auth-locked) .notification-center.has-selection .notification-center-detail {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0);
    }
    body:not(.auth-locked) .notification-detail-card {
      max-height: none;
      padding: 16px;
      border-radius: 22px;
    }
    body:not(.auth-locked) .notification-detail-back {
      display: inline-flex;
    }
    body:not(.auth-locked) .notification-center-item {
      grid-template-columns: minmax(0, 1fr);
      gap: 11px;
      padding-right: 12px;
    }
    body:not(.auth-locked) .notification-card-actions {
      display: flex;
      justify-content: flex-end;
    }
    body:not(.auth-locked) .notification-detail-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.auth-locked) .notification-detail-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    body:not(.auth-locked) .notification-center,
    body:not(.auth-locked) .notification-center *,
    body:not(.auth-locked) .workspace-global-alert,
    body:not(.auth-locked) .workspace-mobile-alert {
      animation: none !important;
      transition-duration: 0.01ms !important;
    }
  }
  body:not(.auth-locked) .workspace-global-date {
    min-height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    color: #f5fcff;
    border: 1px solid rgba(89, 218, 229, 0.2);
    border-radius: 14px;
    background: rgba(9, 39, 58, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    cursor: pointer;
  }
  body:not(.auth-locked) .workspace-global-date:hover,
  body:not(.auth-locked) .workspace-global-date:focus-visible {
    border-color: rgba(64, 230, 219, 0.36);
    background: rgba(9, 45, 62, 0.92);
    outline: none;
  }
  body:not(.auth-locked) .workspace-global-date svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
  }
  body:not(.auth-locked) .workspace-global-toolbar .workspace-account-shell {
    position: relative;
    inset: auto;
    z-index: 65;
    display: block;
    width: auto;
    height: auto;
    justify-self: auto;
    pointer-events: auto;
  }
  body:not(.auth-locked) .workspace-account-button {
    width: clamp(210px, 16vw, 248px);
    min-height: 58px;
    justify-content: flex-start;
    gap: 12px;
    padding: 7px 14px 7px 8px;
    color: #ffffff;
    border: 1px solid rgba(86, 222, 230, 0.28);
    border-radius: 24px;
    background: rgba(5, 29, 45, 0.72);
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
  }
  body:not(.auth-locked) .workspace-account-button:hover,
  body:not(.auth-locked) .workspace-account-button:focus-visible {
    border-color: rgba(64, 230, 219, 0.36);
    background: rgba(9, 45, 62, 0.92);
    outline: none;
  }
  body:not(.auth-locked) .workspace-account-avatar {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(40, 225, 214, 0.55), rgba(12, 78, 96, 0.82));
  }
  body:not(.auth-locked) .workspace-account-menu {
    position: absolute;
    right: 0;
    bottom: auto;
    left: auto;
    top: calc(100% + 10px);
    width: min(320px, calc(100vw - 32px));
    color: #eaf8fb;
    border-color: rgba(88, 218, 228, 0.18);
    background: rgba(4, 17, 30, 0.97);
  }
  body:not(.auth-locked) .workspace-scroll-area {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 24px clamp(24px, 1.5vw, 28px);
    overflow-x: hidden;
    overflow-y: auto;
    background:
      radial-gradient(circle at 82% 4%, rgba(50, 224, 213, 0.14), transparent 28%),
      radial-gradient(circle at 26% 92%, rgba(20, 86, 117, 0.2), transparent 32%),
      linear-gradient(180deg, rgba(2, 14, 25, 0.4), rgba(2, 11, 19, 0.92));
  }
  body:not(.auth-locked) .content-area {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
  }
  body:not(.auth-locked) .view-stack {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }
  body:not(.auth-locked) .workspace,
  body:not(.auth-locked) .view-panel,
  body:not(.auth-locked) .view-panel.active,
  body:not(.auth-locked) .section-block,
  body:not(.auth-locked) .weekly-report-section,
  body:not(.auth-locked) .vendors-section,
  body:not(.auth-locked) .inventory-section,
  body:not(.auth-locked) .expenses-section,
  body:not(.auth-locked) .maintenance-section,
  body:not(.auth-locked) .vessel-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  body[data-active-view="overview"]:not(.auth-locked) #overview-panel {
    padding: 0;
    overflow: visible;
    color: #effaff;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-active-view="overview"]:not(.auth-locked) #overview-panel::before,
  body[data-active-view="overview"]:not(.auth-locked) #overview-panel::after {
    display: none;
  }
  body:not(.auth-locked) .overview-command-center {
    width: 100%;
    display: grid;
    gap: clamp(20px, 2vw, 28px);
  }
  body:not(.auth-locked) .overview-command-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
  }
  body:not(.auth-locked) .overview-command-title {
    min-width: 0;
  }
  body:not(.auth-locked) .overview-command-title h2 {
    margin: 0;
    color: #ffffff;
    font-size: 2.75rem;
    line-height: 1;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .overview-command-title p:not(.overview-command-kicker) {
    max-width: 720px;
    margin: 12px 0 0;
    color: rgba(218, 232, 239, 0.82);
    font-size: 1.08rem;
    line-height: 1.55;
  }
  body:not(.auth-locked) .overview-command-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  body:not(.auth-locked) .overview-date-pill,
  body:not(.auth-locked) .overview-profile-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    color: #f5fcff;
    border: 1px solid rgba(89, 218, 229, 0.2);
    border-radius: 14px;
    background: rgba(9, 39, 58, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  body:not(.auth-locked) .overview-profile-button {
    cursor: pointer;
  }
  body:not(.auth-locked) .overview-profile-button span {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(85, 226, 229, 0.38);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(36, 122, 140, 0.42);
    font-weight: 800;
  }
  body:not(.auth-locked) .overview-profile-button strong {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-locked) .overview-command-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  body:not(.auth-locked) .overview-command-metric,
  body:not(.auth-locked) .overview-command-panel {
    position: relative;
    overflow: hidden;
    color: #f6fcff;
    border: 1px solid rgba(91, 217, 228, 0.2);
    background:
      linear-gradient(135deg, rgba(16, 46, 65, 0.72), rgba(5, 24, 38, 0.82)),
      radial-gradient(circle at 15% 5%, rgba(52, 226, 216, 0.13), transparent 36%);
    box-shadow:
      0 20px 52px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(22px);
  }
  body:not(.auth-locked) .overview-command-metric::after,
  body:not(.auth-locked) .overview-command-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 38%);
    opacity: 0.7;
  }
  body:not(.auth-locked) .overview-command-metric {
    min-height: 128px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 22px;
    text-align: left;
    border-radius: 16px;
  }
  body:not(.auth-locked) .overview-command-metric:hover,
  body:not(.auth-locked) .overview-command-metric:focus-visible {
    border-color: rgba(58, 229, 217, 0.44);
    transform: translateY(-1px);
    outline: none;
  }
  body:not(.auth-locked) .overview-command-metric > * {
    position: relative;
    z-index: 1;
  }
  body:not(.auth-locked) .overview-command-metric-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #43e7dd;
    border: 1px solid rgba(76, 228, 219, 0.22);
    border-radius: 999px;
    background: rgba(42, 220, 211, 0.09);
  }
  body:not(.auth-locked) .overview-command-metric-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }
  body:not(.auth-locked) .overview-command-metric-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
  }
  body:not(.auth-locked) .overview-command-metric-copy strong {
    color: #ffffff;
    font-size: 2.35rem;
    line-height: 1;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .overview-command-metric-copy small {
    color: #4ff2e6;
    font-weight: 750;
  }
  body:not(.auth-locked) .overview-command-metric-arrow {
    color: rgba(212, 232, 239, 0.7);
    font-size: 1.9rem;
  }
  body:not(.auth-locked) .overview-command-panels {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
    gap: 20px;
  }
  body:not(.auth-locked) .overview-command-panel {
    min-height: 278px;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 24px;
    border-radius: 16px;
  }
  body:not(.auth-locked) .overview-command-panel > * {
    position: relative;
    z-index: 1;
  }
  body:not(.auth-locked) .overview-command-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(141, 220, 230, 0.12);
  }
  body:not(.auth-locked) .overview-command-panel h3 {
    margin: 0;
    color: rgba(238, 250, 255, 0.86);
  }
  body:not(.auth-locked) .overview-command-link {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 12px;
    color: rgba(138, 244, 238, 0.9);
    border: 1px solid rgba(80, 222, 222, 0.18);
    border-radius: 999px;
    background: rgba(45, 224, 214, 0.08);
  }
  body:not(.auth-locked) .fleet-health-dashboard {
    position: relative;
    overflow: hidden;
    color: #f6fcff;
    border: 1px solid rgba(91, 217, 228, 0.2);
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(16, 46, 65, 0.75), rgba(5, 24, 38, 0.86)),
      radial-gradient(circle at 12% 0%, rgba(52, 226, 216, 0.13), transparent 38%);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(22px);
    padding: clamp(18px, 2vw, 24px);
  }
  body:not(.auth-locked) .fleet-health-dashboard::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 38%);
  }
  body:not(.auth-locked) .fleet-health-dashboard > * {
    position: relative;
    z-index: 1;
  }
  body:not(.auth-locked) .fleet-health-dashboard-head,
  body:not(.auth-locked) .fleet-health-vessel-head,
  body:not(.auth-locked) .fleet-health-dashboard-actions,
  body:not(.auth-locked) .fleet-health-card-meta,
  body:not(.auth-locked) .fleet-health-override-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  body:not(.auth-locked) .fleet-health-dashboard-head {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
  }
  body:not(.auth-locked) .fleet-health-dashboard h3,
  body:not(.auth-locked) .fleet-health-vessel-card h4 {
    margin: 0;
    color: #ffffff;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .fleet-health-dashboard p,
  body:not(.auth-locked) .fleet-health-critical-issue span {
    margin: 5px 0 0;
    color: rgba(218, 232, 239, 0.78);
    line-height: 1.45;
  }
  body:not(.auth-locked) .fleet-health-dashboard-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  body:not(.auth-locked) .fleet-health-readiness-badge {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 999px;
    color: #0f766e;
    border: 1px solid rgba(13, 148, 136, 0.3);
    background: rgba(204, 251, 241, 0.88);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
  }
  body:not(.auth-locked) .fleet-health-readiness-badge[data-readiness="limited_operations"] {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.28);
    background: rgba(219, 234, 254, 0.88);
  }
  body:not(.auth-locked) .fleet-health-readiness-badge[data-readiness="attention_required"] {
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.3);
    background: rgba(254, 243, 199, 0.9);
  }
  body:not(.auth-locked) .fleet-health-readiness-badge[data-readiness="do_not_cruise"] {
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.3);
    background: rgba(254, 226, 226, 0.92);
  }
  body:not(.auth-locked) .fleet-health-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
  }
  body:not(.auth-locked) .fleet-health-vessel-card {
    min-width: 0;
    padding: 16px;
    color: #f6fcff;
    border: 1px solid rgba(91, 217, 228, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
  }
  body:not(.auth-locked) .fleet-health-vessel-head {
    justify-content: space-between;
    align-items: flex-start;
  }
  body:not(.auth-locked) .fleet-health-score-meter {
    height: 8px;
    margin: 14px 0 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
  }
  body:not(.auth-locked) .fleet-health-score-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0ea5a3, #22c55e);
  }
  body:not(.auth-locked) .fleet-health-vessel-card[data-readiness="attention_required"] .fleet-health-score-meter span {
    background: linear-gradient(90deg, #f59e0b, #f97316);
  }
  body:not(.auth-locked) .fleet-health-vessel-card[data-readiness="do_not_cruise"] .fleet-health-score-meter span {
    background: linear-gradient(90deg, #ef4444, #b91c1c);
  }
  body:not(.auth-locked) .fleet-health-card-meta,
  body:not(.auth-locked) .fleet-health-actions-list,
  body:not(.auth-locked) .fleet-health-activity-list {
    flex-wrap: wrap;
    margin-top: 12px;
  }
  body:not(.auth-locked) .fleet-health-card-meta span,
  body:not(.auth-locked) .fleet-health-actions-list span {
    display: inline-flex;
    padding: 6px 9px;
    color: #6ff7ea;
    border-radius: 999px;
    background: rgba(45, 224, 214, 0.09);
    font-size: 0.76rem;
    font-weight: 800;
  }
  body:not(.auth-locked) .fleet-health-critical-issue {
    margin-top: 12px;
    padding: 10px 12px;
    border-left: 3px solid rgba(251, 191, 36, 0.62);
    border-radius: 14px;
    background: rgba(251, 191, 36, 0.08);
  }
  body:not(.auth-locked) .fleet-health-critical-issue strong {
    display: block;
    color: #ffffff;
  }
  body:not(.auth-locked) .operational-detail-disclosure {
    margin-top: 10px;
    border: 1px solid rgba(91, 217, 228, 0.13);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
  }
  body:not(.auth-locked) .operational-detail-disclosure summary {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    color: rgba(230, 250, 252, 0.9);
    font-size: 0.82rem;
    font-weight: 900;
    cursor: pointer;
  }
  body:not(.auth-locked) .operational-detail-disclosure summary::-webkit-details-marker {
    display: none;
  }
  body:not(.auth-locked) .operational-detail-disclosure summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #6ff7ea;
    border-radius: 999px;
    background: rgba(45, 224, 214, 0.1);
    font-size: 0.95rem;
    line-height: 1;
  }
  body:not(.auth-locked) .operational-detail-disclosure[open] summary::after {
    content: "-";
  }
  body:not(.auth-locked) .operational-detail-disclosure-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 12px 12px;
  }
  body:not(.auth-locked) .operational-detail-disclosure-body p {
    flex: 1 1 100%;
    margin: 0;
    color: rgba(218, 232, 239, 0.76);
    font-size: 0.82rem;
  }
  body:not(.auth-locked) .operational-detail-disclosure-body span {
    display: inline-flex;
    padding: 6px 9px;
    color: #6ff7ea;
    border-radius: 999px;
    background: rgba(45, 224, 214, 0.09);
    font-size: 0.74rem;
    font-weight: 800;
  }
  body:not(.auth-locked) .fleet-health-actions-list,
  body:not(.auth-locked) .fleet-health-activity-list {
    display: flex;
    gap: 8px;
  }
  body:not(.auth-locked) .fleet-health-override-row {
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: 14px;
  }
  body:not(.auth-locked) .fleet-health-override-row .form-input {
    flex: 1 1 150px;
    min-width: 0;
  }
  body:not(.auth-locked) .fleet-health-dashboard-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.6fr);
    gap: 18px;
    align-items: start;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(141, 220, 230, 0.12);
  }
  body:not(.auth-locked) .fleet-health-activity-list span {
    padding: 8px 10px;
    border: 1px solid rgba(91, 217, 228, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
  }
  body:not(.auth-locked) .fleet-health-activity-list small {
    display: block;
    color: rgba(218, 232, 239, 0.7);
  }
  body:not(.auth-locked) .operational-timeline-dashboard {
    position: relative;
    overflow: hidden;
    color: #102335;
    border: 1px solid rgba(15, 118, 110, 0.12);
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 251, 250, 0.96)),
      radial-gradient(circle at 88% 0%, rgba(24, 139, 145, 0.12), transparent 34%);
    box-shadow:
      0 22px 52px rgba(8, 42, 55, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
    padding: clamp(18px, 2vw, 24px);
  }
  body:not(.auth-locked) .operational-timeline-dashboard::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), transparent 38%);
  }
  body:not(.auth-locked) .operational-timeline-dashboard > * {
    position: relative;
    z-index: 1;
  }
  body:not(.auth-locked) .operational-timeline-head,
  body:not(.auth-locked) .operational-timeline-actions,
  body:not(.auth-locked) .operational-timeline-row-top,
  body:not(.auth-locked) .operational-timeline-meta {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  body:not(.auth-locked) .operational-timeline-head {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
  }
  body:not(.auth-locked) .operational-timeline-head h2 {
    margin: 3px 0 0;
    color: #102335;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    letter-spacing: 0;
  }
  body:not(.auth-locked) .operational-timeline-head p,
  body:not(.auth-locked) .operational-timeline-stat p,
  body:not(.auth-locked) .operational-timeline-intel p,
  body:not(.auth-locked) .operational-timeline-empty p {
    margin: 5px 0 0;
    color: rgba(39, 58, 73, 0.72);
    line-height: 1.45;
  }
  body:not(.auth-locked) .operational-timeline-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  body:not(.auth-locked) .operational-timeline-actions label {
    display: grid;
    gap: 5px;
    color: rgba(39, 58, 73, 0.72);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  body:not(.auth-locked) .operational-timeline-actions select {
    min-height: 38px;
    min-width: 150px;
    color: #102335;
    border: 1px solid rgba(11, 101, 141, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    padding: 0 34px 0 12px;
    font-weight: 800;
  }
  body:not(.auth-locked) .operational-timeline-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
  }
  body:not(.auth-locked) .operational-timeline-stat {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(11, 101, 141, 0.12);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.74);
  }
  body:not(.auth-locked) .operational-timeline-stat span {
    display: block;
    color: #0f766e;
    font-size: 0.73rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  body:not(.auth-locked) .operational-timeline-stat strong {
    display: block;
    margin-top: 4px;
    color: #102335;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .operational-timeline-stat[data-tone="critical"] span {
    color: #b91c1c;
  }
  body:not(.auth-locked) .operational-timeline-stat[data-tone="ai"] span {
    color: #6d28d9;
  }
  body:not(.auth-locked) .operational-timeline-stat[data-tone="system"] span {
    color: #0369a1;
  }
  body:not(.auth-locked) .operational-timeline-intel {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.55fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid rgba(13, 148, 136, 0.13);
    border-radius: 16px;
    background: rgba(236, 253, 245, 0.62);
  }
  body:not(.auth-locked) .operational-timeline-intel strong {
    display: block;
    color: #102335;
    font-size: 1rem;
  }
  body:not(.auth-locked) .operational-timeline-intel-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }
  body:not(.auth-locked) .operational-timeline-intel-list span,
  body:not(.auth-locked) .operational-timeline-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 9px;
    color: #0f766e;
    border: 1px solid rgba(13, 148, 136, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 0.74rem;
    font-weight: 850;
    white-space: nowrap;
  }
  body:not(.auth-locked) .operational-timeline-intel ul {
    grid-column: 1 / -1;
    margin: 0;
    padding-left: 18px;
    color: rgba(39, 58, 73, 0.78);
    line-height: 1.45;
  }
  body:not(.auth-locked) .operational-timeline-feed {
    display: grid;
    gap: 9px;
    max-height: min(560px, 58vh);
    overflow: auto;
    padding-right: 4px;
  }
  body:not(.auth-locked) .operational-timeline-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    width: 100%;
    padding: 13px 14px;
    text-align: left;
    color: inherit;
    border: 1px solid rgba(11, 101, 141, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.82);
    cursor: pointer;
  }
  body:not(.auth-locked) .operational-timeline-row:hover,
  body:not(.auth-locked) .operational-timeline-row:focus-visible {
    border-color: rgba(15, 118, 110, 0.24);
    box-shadow: 0 12px 28px rgba(8, 42, 55, 0.1);
    transform: translateY(-1px);
  }
  body:not(.auth-locked) .operational-timeline-dot {
    width: 11px;
    height: 11px;
    margin-top: 6px;
    border-radius: 999px;
    background: #0ea5a3;
    box-shadow: 0 0 0 5px rgba(14, 165, 163, 0.12);
  }
  body:not(.auth-locked) .operational-timeline-dot[data-severity="critical"] {
    background: #dc2626;
    box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.12);
  }
  body:not(.auth-locked) .operational-timeline-dot[data-severity="attention"] {
    background: #f59e0b;
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.14);
  }
  body:not(.auth-locked) .operational-timeline-dot[data-severity="warning"] {
    background: #2563eb;
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.12);
  }
  body:not(.auth-locked) .operational-timeline-dot[data-severity="ai"] {
    background: #7c3aed;
    box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.12);
  }
  body:not(.auth-locked) .operational-timeline-dot[data-severity="system"] {
    background: #64748b;
    box-shadow: 0 0 0 5px rgba(100, 116, 139, 0.12);
  }
  body:not(.auth-locked) .operational-timeline-content {
    min-width: 0;
    display: grid;
    gap: 7px;
  }
  body:not(.auth-locked) .operational-timeline-row-top {
    justify-content: space-between;
    min-width: 0;
  }
  body:not(.auth-locked) .operational-timeline-row-top strong {
    min-width: 0;
    color: #102335;
    font-size: 0.94rem;
    line-height: 1.2;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .operational-timeline-row-top time,
  body:not(.auth-locked) .operational-timeline-body {
    color: rgba(39, 58, 73, 0.68);
    font-size: 0.82rem;
    line-height: 1.35;
  }
  body:not(.auth-locked) .operational-timeline-meta {
    flex-wrap: wrap;
    gap: 6px;
  }
  body:not(.auth-locked) .operational-timeline-empty {
    padding: 24px;
    text-align: center;
    border: 1px dashed rgba(11, 101, 141, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
  }
  body:not(.auth-locked) .operational-timeline-empty span {
    color: #0f766e;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  body:not(.auth-locked) .operational-timeline-empty strong {
    display: block;
    margin-top: 5px;
    color: #102335;
    font-size: 1.05rem;
  }
  body:not(.auth-locked) .operational-timeline-empty.is-error span {
    color: #b91c1c;
  }
  body:not(.auth-locked) .daily-brief-dashboard {
    position: relative;
    overflow: hidden;
    color: #102335;
    border: 1px solid rgba(15, 118, 110, 0.13);
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 251, 252, 0.96)),
      radial-gradient(circle at 8% 0%, rgba(45, 224, 214, 0.14), transparent 38%);
    box-shadow:
      0 22px 52px rgba(8, 42, 55, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
    padding: clamp(18px, 2vw, 24px);
  }
  body:not(.auth-locked) .daily-brief-dashboard::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.48), transparent 42%);
  }
  body:not(.auth-locked) .daily-brief-dashboard > * {
    position: relative;
    z-index: 1;
  }
  body:not(.auth-locked) .daily-brief-head,
  body:not(.auth-locked) .daily-brief-head-actions,
  body:not(.auth-locked) .daily-brief-panel-head,
  body:not(.auth-locked) .daily-brief-tags,
  body:not(.auth-locked) .daily-brief-item-actions,
  body:not(.auth-locked) .watchlist-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  body:not(.auth-locked) .daily-brief-head {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
  }
  body:not(.auth-locked) .daily-brief-head h2 {
    margin: 3px 0 0;
    color: #102335;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.1;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .daily-brief-head p,
  body:not(.auth-locked) .daily-brief-item p,
  body:not(.auth-locked) .watchlist-row p,
  body:not(.auth-locked) .daily-brief-empty p {
    margin: 5px 0 0;
    color: rgba(39, 58, 73, 0.72);
    line-height: 1.42;
  }
  body:not(.auth-locked) .daily-brief-head-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  body:not(.auth-locked) .daily-brief-stat {
    min-width: 86px;
    padding: 10px 12px;
    text-align: center;
    border: 1px solid rgba(11, 101, 141, 0.11);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
  }
  body:not(.auth-locked) .daily-brief-stat span {
    display: block;
    color: #0f766e;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  body:not(.auth-locked) .daily-brief-stat strong {
    display: block;
    margin-top: 3px;
    color: #102335;
    font-size: 1.24rem;
    line-height: 1;
  }
  body:not(.auth-locked) .daily-brief-stat[data-tone="critical"] span {
    color: #b91c1c;
  }
  body:not(.auth-locked) .daily-brief-stat[data-tone="attention"] span {
    color: #b45309;
  }
  body:not(.auth-locked) .daily-brief-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.8fr);
    gap: 14px;
    align-items: start;
  }
  body:not(.auth-locked) .daily-brief-panel {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(11, 101, 141, 0.12);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.72);
  }
  body:not(.auth-locked) .daily-brief-panel-head {
    justify-content: space-between;
    margin-bottom: 12px;
  }
  body:not(.auth-locked) .daily-brief-panel-head strong {
    color: #102335;
    font-size: 0.96rem;
  }
  body:not(.auth-locked) .daily-brief-panel-head span {
    color: #0f766e;
    font-size: 0.76rem;
    font-weight: 900;
  }
  body:not(.auth-locked) .daily-brief-list,
  body:not(.auth-locked) .watchlist-list {
    display: grid;
    gap: 10px;
  }
  body:not(.auth-locked) .daily-brief-item,
  body:not(.auth-locked) .watchlist-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 13px;
    border: 1px solid rgba(11, 101, 141, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.82);
  }
  body:not(.auth-locked) .daily-brief-item[data-severity="critical"],
  body:not(.auth-locked) .watchlist-row[data-severity="critical"] {
    border-color: rgba(220, 38, 38, 0.2);
    background: rgba(254, 242, 242, 0.74);
  }
  body:not(.auth-locked) .daily-brief-item[data-severity="attention"],
  body:not(.auth-locked) .watchlist-row[data-severity="attention"] {
    border-color: rgba(217, 119, 6, 0.2);
    background: rgba(255, 251, 235, 0.78);
  }
  body:not(.auth-locked) .daily-brief-item strong,
  body:not(.auth-locked) .watchlist-row strong {
    display: block;
    margin-top: 4px;
    color: #102335;
    font-size: 0.94rem;
    line-height: 1.25;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .daily-brief-severity {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 8px;
    color: #0f766e;
    border: 1px solid rgba(13, 148, 136, 0.12);
    border-radius: 999px;
    background: rgba(236, 253, 245, 0.8);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  body:not(.auth-locked) [data-severity="critical"] .daily-brief-severity {
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.18);
    background: rgba(254, 226, 226, 0.82);
  }
  body:not(.auth-locked) [data-severity="attention"] .daily-brief-severity,
  body:not(.auth-locked) [data-severity="warning"] .daily-brief-severity {
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.18);
    background: rgba(254, 243, 199, 0.84);
  }
  body:not(.auth-locked) .daily-brief-tags {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
  }
  body:not(.auth-locked) .daily-brief-tags span {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    color: #0f766e;
    border-radius: 999px;
    background: rgba(13, 148, 136, 0.08);
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
  }
  body:not(.auth-locked) .daily-brief-item-actions,
  body:not(.auth-locked) .watchlist-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    max-width: 220px;
  }
  body:not(.auth-locked) .watchlist-actions {
    max-width: 340px;
  }
  body:not(.auth-locked) .daily-brief-item-actions .text-button,
  body:not(.auth-locked) .daily-brief-item-actions .ghost-button,
  body:not(.auth-locked) .watchlist-actions .text-button,
  body:not(.auth-locked) .watchlist-actions .ghost-button,
  body:not(.auth-locked) .watchlist-actions .account-settings-pill-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 0.78rem;
  }
  body:not(.auth-locked) .daily-brief-alert {
    margin-bottom: 12px;
    padding: 10px 12px;
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: 14px;
    background: rgba(254, 242, 242, 0.86);
    font-weight: 800;
  }
  body:not(.auth-locked) .daily-brief-empty {
    padding: 22px;
    text-align: center;
    border: 1px dashed rgba(11, 101, 141, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
  }
  body:not(.auth-locked) .daily-brief-empty.is-compact {
    padding: 18px;
  }
  body:not(.auth-locked) .daily-brief-empty span {
    color: #0f766e;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  body:not(.auth-locked) .daily-brief-empty strong {
    display: block;
    margin-top: 5px;
    color: #102335;
    font-size: 1.05rem;
  }
  @media (max-width: 900px) {
    body:not(.auth-locked) .fleet-health-dashboard-head,
    body:not(.auth-locked) .daily-brief-head,
    body:not(.auth-locked) .operational-timeline-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }
    body:not(.auth-locked) .fleet-health-dashboard-actions,
    body:not(.auth-locked) .daily-brief-head-actions,
    body:not(.auth-locked) .operational-timeline-actions {
      justify-content: flex-start;
    }
    body:not(.auth-locked) .fleet-health-dashboard-foot,
    body:not(.auth-locked) .daily-brief-grid,
    body:not(.auth-locked) .operational-timeline-intel {
      grid-template-columns: minmax(0, 1fr);
    }
    body:not(.auth-locked) .operational-timeline-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.auth-locked) .operational-timeline-intel-list {
      justify-content: flex-start;
    }
  }
  @media (max-width: 760px) {
    body:not(.auth-locked) .fleet-health-dashboard,
    body:not(.auth-locked) .daily-brief-dashboard,
    body:not(.auth-locked) .operational-timeline-dashboard {
      padding: 16px;
      border-radius: 16px;
    }
    body:not(.auth-locked) .daily-brief-item,
    body:not(.auth-locked) .watchlist-row,
    body:not(.auth-locked) .operational-timeline-row {
      grid-template-columns: minmax(0, 1fr);
    }
    body:not(.auth-locked) .daily-brief-item-actions,
    body:not(.auth-locked) .watchlist-actions {
      max-width: none;
      justify-content: flex-start;
    }
    body:not(.auth-locked) .operational-timeline-actions label,
    body:not(.auth-locked) .operational-timeline-actions select,
    body:not(.auth-locked) .fleet-health-override-row .form-input,
    body:not(.auth-locked) .fleet-health-override-row button {
      width: 100%;
    }
  }
  body:not(.auth-locked) .overview-getting-started-panel {
    grid-column: 1 / -1;
    min-height: 0;
    gap: 16px;
    padding: 20px;
    color: var(--ink);
    border-color: rgba(11, 101, 141, 0.14);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(243, 252, 251, 0.97)),
      radial-gradient(circle at 8% 4%, rgba(35, 210, 198, 0.14), transparent 34%);
    box-shadow:
      0 18px 44px rgba(8, 42, 55, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
  }
  body:not(.auth-locked) .overview-getting-started-panel::after {
    opacity: 0.24;
    background: linear-gradient(135deg, rgba(47, 194, 174, 0.12), transparent 42%);
  }
  body:not(.auth-locked) .getting-started-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-width: 0;
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete {
    color: var(--ink);
    border-color: rgba(16, 143, 117, 0.22);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(239, 252, 250, 0.98)),
      radial-gradient(circle at 8% 4%, rgba(43, 205, 191, 0.18), transparent 34%);
    box-shadow:
      0 18px 44px rgba(8, 42, 55, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete::after {
    opacity: 0.2;
    background: linear-gradient(135deg, rgba(47, 194, 174, 0.12), transparent 42%);
  }
  body:not(.auth-locked) .overview-getting-started-panel .metric-label,
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .metric-label {
    color: #0b7c70;
  }
  body:not(.auth-locked) .getting-started-icon,
  body:not(.auth-locked) .getting-started-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #087a82;
    border: 1px solid rgba(13, 122, 129, 0.18);
    background: rgba(38, 212, 201, 0.14);
  }
  body:not(.auth-locked) .getting-started-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    box-shadow: 0 14px 28px rgba(10, 184, 190, 0.14);
  }
  body:not(.auth-locked) .getting-started-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
  }
  body:not(.auth-locked) .getting-started-head h3 {
    margin: 3px 0 0;
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1.15;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .getting-started-head h3 {
    color: var(--ink);
    letter-spacing: 0;
  }
  body:not(.auth-locked) .getting-started-head p {
    margin: 5px 0 0;
    max-width: 68ch;
    color: rgba(32, 53, 68, 0.78);
    font-size: 0.88rem;
    line-height: 1.35;
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .getting-started-head p {
    color: rgba(32, 53, 68, 0.76);
  }
  body:not(.auth-locked) .getting-started-head-actions {
    display: grid;
    gap: 8px;
    justify-items: end;
  }
  body:not(.auth-locked) .getting-started-dismiss {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px 0 12px;
    color: #087a6e;
    border: 1px solid rgba(8, 122, 110, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 24px rgba(8, 122, 110, 0.08);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0;
    cursor: pointer;
  }
  body:not(.auth-locked) .getting-started-dismiss:hover,
  body:not(.auth-locked) .getting-started-dismiss:focus-visible {
    color: #045c54;
    border-color: rgba(8, 122, 110, 0.32);
    background: rgba(229, 250, 247, 0.96);
    outline: none;
    transform: translateY(-1px);
  }
  body:not(.auth-locked) .getting-started-dismiss svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }
  body:not(.auth-locked) .getting-started-progress {
    min-width: 118px;
    display: grid;
    gap: 4px;
    justify-items: end;
    color: rgba(32, 53, 68, 0.72);
    font-size: 0.74rem;
    font-weight: 800;
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .getting-started-progress {
    color: rgba(32, 53, 68, 0.68);
  }
  body:not(.auth-locked) .getting-started-progress strong {
    color: var(--ink);
    font-size: 1.12rem;
    line-height: 1;
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .getting-started-progress strong {
    color: var(--ink);
  }
  body:not(.auth-locked) .getting-started-progress i {
    width: 112px;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(9, 61, 74, 0.1);
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .getting-started-progress i {
    background: rgba(9, 61, 74, 0.1);
  }
  body:not(.auth-locked) .getting-started-progress i span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #39dcd2, #94fff8);
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .getting-started-progress i span {
    background: linear-gradient(90deg, #0b8f7e, #25d0c2);
  }
  body:not(.auth-locked) .getting-started-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
    gap: 10px;
  }
  body:not(.auth-locked) .getting-started-row {
    min-width: 0;
    min-height: 82px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "icon action";
    align-items: center;
    gap: 6px 10px;
    padding: 12px;
    color: var(--ink);
    text-align: left;
    border: 1px solid rgba(13, 92, 117, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 24px rgba(8, 42, 55, 0.055);
  }
  body:not(.auth-locked) .getting-started-row:hover,
  body:not(.auth-locked) .getting-started-row:focus-visible {
    border-color: rgba(12, 156, 160, 0.26);
    background: rgba(247, 254, 253, 0.98);
    outline: none;
    transform: translateY(-1px);
  }
  body:not(.auth-locked) .getting-started-row.is-complete {
    border-color: rgba(12, 140, 102, 0.18);
    background: rgba(239, 252, 248, 0.92);
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .getting-started-row.is-complete {
    color: var(--ink);
    border-color: rgba(14, 122, 101, 0.18);
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
      0 10px 24px rgba(8, 42, 55, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }
  body:not(.auth-locked) .getting-started-row-icon {
    grid-area: icon;
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }
  body:not(.auth-locked) .getting-started-row.is-complete .getting-started-row-icon {
    color: #8bf7b4;
    border-color: rgba(139, 247, 180, 0.28);
    background: rgba(74, 222, 128, 0.12);
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .getting-started-icon,
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .getting-started-row.is-complete .getting-started-row-icon {
    color: #087a6e;
    border-color: rgba(8, 122, 110, 0.18);
    background: rgba(27, 190, 157, 0.13);
  }
  body:not(.auth-locked) .getting-started-row-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
  }
  body:not(.auth-locked) .getting-started-row-copy {
    grid-area: copy;
    min-width: 0;
    display: grid;
    gap: 3px;
  }
  body:not(.auth-locked) .getting-started-row-copy strong,
  body:not(.auth-locked) .getting-started-row-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body:not(.auth-locked) .getting-started-row-copy strong {
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.18;
    white-space: nowrap;
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .getting-started-row-copy strong {
    color: var(--ink);
  }
  body:not(.auth-locked) .getting-started-row-copy small {
    display: -webkit-box;
    color: rgba(32, 53, 68, 0.7);
    font-size: 0.72rem;
    line-height: 1.24;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .getting-started-row-copy small {
    color: rgba(32, 53, 68, 0.68);
  }
  body:not(.auth-locked) .getting-started-row-action {
    grid-area: action;
    justify-self: start;
    color: #087a82;
    font-size: 0.72rem;
    font-weight: 900;
  }
  body:not(.auth-locked) .overview-getting-started-panel.is-complete .getting-started-row-action {
    color: #087a6e;
  }
  body:not(.auth-locked) .overview-command-list {
    display: grid;
    gap: 0;
  }
  body:not(.auth-locked) .overview-command-list-row {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    color: #f6fcff;
    text-align: left;
    border: 0;
    border-bottom: 1px solid rgba(141, 220, 230, 0.11);
    background: transparent;
  }
  body:not(.auth-locked) .overview-command-list-row:last-child {
    border-bottom: 0;
  }
  body:not(.auth-locked) .overview-command-list-row.is-work-order-link {
    cursor: pointer;
  }
  body:not(.auth-locked) .overview-command-list-row:hover,
  body:not(.auth-locked) .overview-command-list-row:focus-visible {
    color: #ffffff;
    outline: none;
  }
  body:not(.auth-locked) .overview-command-avatar {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(60, 226, 216, 0.48), rgba(12, 76, 92, 0.78));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .overview-command-avatar svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body:not(.auth-locked) .overview-command-avatar[data-activity-type="VW"] {
    background: linear-gradient(135deg, rgba(88, 197, 255, 0.46), rgba(13, 73, 108, 0.78));
  }
  body:not(.auth-locked) .overview-command-avatar[data-activity-type="IS"] {
    background: linear-gradient(135deg, rgba(244, 173, 70, 0.52), rgba(93, 54, 10, 0.82));
  }
  body:not(.auth-locked) .overview-command-avatar[data-activity-type="SE"] {
    background: linear-gradient(135deg, rgba(118, 242, 205, 0.42), rgba(11, 86, 76, 0.82));
  }
  body:not(.auth-locked) .overview-command-row-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
  }
  body:not(.auth-locked) .overview-command-row-copy strong {
    overflow: hidden;
    color: #ffffff;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-locked) .overview-command-row-copy small {
    overflow: hidden;
    color: rgba(214, 230, 238, 0.72);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-locked) .overview-command-row-copy .overview-command-row-type {
    color: #55f0e6;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
  }
  body:not(.auth-locked) .overview-command-row-date {
    color: rgba(214, 230, 238, 0.68);
    font-size: 0.78rem;
    white-space: nowrap;
  }
  body:not(.auth-locked) .overview-priority-dot {
    width: 13px;
    height: 13px;
    border: 2px solid #35e6dc;
    border-radius: 999px;
    background: rgba(53, 230, 220, 0.08);
  }
  body:not(.auth-locked) .overview-priority-thumb {
    width: 50px;
    height: 46px;
    min-width: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(80, 222, 222, 0.22);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(45, 224, 214, 0.12), rgba(255, 255, 255, 0.05));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
  }
  body:not(.auth-locked) .overview-priority-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body:not(.auth-locked) .overview-priority-thumb-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body:not(.auth-locked) .overview-priority-dot[data-status="pending"] {
    border-color: #f4ad46;
    background: rgba(244, 173, 70, 0.12);
  }
  body:not(.auth-locked) .overview-priority-dot[data-status="complete"] {
    border-color: #70e5b8;
    background: rgba(112, 229, 184, 0.12);
  }
  body:not(.auth-locked) .overview-command-status {
    padding: 7px 11px;
    color: #4ff2e6;
    border-radius: 999px;
    background: rgba(39, 213, 205, 0.14);
    font-size: 0.78rem;
    font-weight: 850;
  }
  body:not(.auth-locked) .overview-command-status[data-status="pending"] {
    color: #ffc86c;
    background: rgba(244, 173, 70, 0.18);
  }
  body:not(.auth-locked) .overview-command-status[data-status="complete"] {
    color: #95f1ca;
    background: rgba(73, 213, 153, 0.14);
  }
  body:not(.auth-locked) .overview-maintenance-date {
    width: 78px;
    display: grid;
    gap: 3px;
    color: #4ff2e6;
  }
  body:not(.auth-locked) .overview-maintenance-date small {
    color: rgba(190, 219, 228, 0.7);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  body:not(.auth-locked) .overview-maintenance-date strong {
    color: #55f0e4;
    font-size: 1rem;
  }
  body:not(.auth-locked) .overview-command-empty {
    display: grid;
    gap: 4px;
    padding: 22px 0;
    color: rgba(219, 236, 243, 0.72);
  }
  body:not(.auth-locked) .overview-command-empty strong {
    color: #ffffff;
  }
  body:not(.auth-locked) .overview-vessel-status-body {
    display: grid;
    grid-template-columns: minmax(220px, 0.92fr) minmax(220px, 1fr);
    gap: 20px;
    align-items: center;
  }
  body:not(.auth-locked) .overview-vessel-visual {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 18px;
    background:
      linear-gradient(180deg, transparent 0 65%, rgba(54, 224, 216, 0.11) 65% 100%),
      radial-gradient(circle at 50% 76%, rgba(49, 225, 214, 0.22), transparent 58%);
  }
  body:not(.auth-locked) .overview-vessel-visual svg {
    width: min(360px, 100%);
    height: auto;
    fill: none;
    stroke: rgba(125, 237, 231, 0.75);
    stroke-width: 3;
    filter: drop-shadow(0 0 15px rgba(51, 223, 214, 0.24));
  }
  body:not(.auth-locked) .reactive-vessel-status-visual {
    --vessel-state-color: #2fd4ca;
    --vessel-state-soft: rgba(47, 212, 202, 0.14);
    --vessel-state-glow: rgba(47, 212, 202, 0.28);
    position: relative;
    min-height: 170px;
    overflow: hidden;
    border-radius: 18px;
    color: var(--vessel-state-color);
    background:
      radial-gradient(circle at 50% 78%, var(--vessel-state-soft), transparent 58%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(47, 212, 202, 0.08));
    isolation: isolate;
  }
  body:not(.auth-locked) .reactive-vessel-status-visual[data-health-state="attention"] {
    --vessel-state-color: #d68b22;
    --vessel-state-soft: rgba(214, 139, 34, 0.15);
    --vessel-state-glow: rgba(214, 139, 34, 0.24);
  }
  body:not(.auth-locked) .reactive-vessel-status-visual[data-health-state="critical"] {
    --vessel-state-color: #d9574f;
    --vessel-state-soft: rgba(217, 87, 79, 0.15);
    --vessel-state-glow: rgba(217, 87, 79, 0.22);
  }
  body:not(.auth-locked) .reactive-vessel-status-visual[data-health-state="monitoring"] {
    --vessel-state-color: #7f95a3;
    --vessel-state-soft: rgba(127, 149, 163, 0.15);
    --vessel-state-glow: rgba(127, 149, 163, 0.16);
  }
  body:not(.auth-locked) .reactive-vessel-orbit {
    position: absolute;
    inset: 16px 22px;
    z-index: 0;
    border-radius: 999px;
    background: radial-gradient(circle, var(--vessel-state-glow), transparent 58%);
    filter: blur(18px);
    opacity: 0.78;
    transform: translateY(28px) scaleX(1.08);
  }
  body:not(.auth-locked) .reactive-vessel-svg {
    position: absolute;
    inset: 4px 4px 8px;
    z-index: 1;
    width: calc(100% - 8px);
    height: calc(100% - 12px);
    color: var(--vessel-state-color);
  }
  body:not(.auth-locked) .reactive-vessel-water,
  body:not(.auth-locked) .reactive-vessel-cabin,
  body:not(.auth-locked) .reactive-vessel-window,
  body:not(.auth-locked) .reactive-vessel-mast,
  body:not(.auth-locked) .reactive-vessel-keel,
  body:not(.auth-locked) .reactive-vessel-accent-line {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body:not(.auth-locked) .reactive-vessel-water {
    stroke-width: 2.2;
    stroke-dasharray: 18 18;
    opacity: 0.44;
    animation: vesselWaterShimmer 8s linear infinite;
  }
  body:not(.auth-locked) .reactive-vessel-water-front {
    stroke-width: 2.8;
    opacity: 0.62;
    animation-duration: 6.5s;
    animation-direction: reverse;
  }
  body:not(.auth-locked) .reactive-vessel-yacht {
    transform-origin: 50% 58%;
    animation: vesselCalmFloat 7s ease-in-out infinite;
  }
  body:not(.auth-locked) .reactive-vessel-cabin,
  body:not(.auth-locked) .reactive-vessel-window,
  body:not(.auth-locked) .reactive-vessel-mast {
    stroke-width: 4;
    opacity: 0.82;
  }
  body:not(.auth-locked) .reactive-vessel-window {
    stroke-width: 3;
    opacity: 0.54;
  }
  body:not(.auth-locked) .reactive-vessel-hull {
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linejoin: round;
    opacity: 0.95;
  }
  body:not(.auth-locked) .reactive-vessel-keel,
  body:not(.auth-locked) .reactive-vessel-accent-line {
    stroke-width: 3.2;
    opacity: 0.78;
  }
  body:not(.auth-locked) .reactive-vessel-accent-line {
    opacity: 0.86;
  }
  body:not(.auth-locked) .reactive-vessel-markers {
    position: absolute;
    inset: 10px;
    z-index: 2;
    pointer-events: none;
  }
  body:not(.auth-locked) .reactive-vessel-marker {
    position: absolute;
    display: inline-grid;
    grid-template-columns: 8px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    max-width: 118px;
    padding: 6px 9px;
    border-radius: 999px;
    color: rgba(12, 41, 58, 0.82);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(13, 36, 56, 0.08);
    box-shadow: 0 10px 20px rgba(13, 36, 56, 0.08);
    backdrop-filter: blur(12px);
  }
  body:not(.auth-locked) .reactive-vessel-marker[data-marker="engines"] {
    top: 0;
    left: 0;
  }
  body:not(.auth-locked) .reactive-vessel-marker[data-marker="fuel"] {
    top: 0;
    right: 0;
  }
  body:not(.auth-locked) .reactive-vessel-marker[data-marker="maintenance"] {
    left: 0;
    bottom: 0;
  }
  body:not(.auth-locked) .reactive-vessel-marker[data-marker="systems"] {
    right: 0;
    bottom: 0;
  }
  body:not(.auth-locked) .reactive-vessel-marker[data-marker="reports"] {
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
  }
  body:not(.auth-locked) .reactive-vessel-marker-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22b8aa;
    box-shadow: 0 0 0 4px rgba(34, 184, 170, 0.12);
  }
  body:not(.auth-locked) .reactive-vessel-marker[data-tone="attention"] .reactive-vessel-marker-dot {
    background: #d68b22;
    box-shadow: 0 0 0 4px rgba(214, 139, 34, 0.14);
    animation: vesselMarkerPulse 1.9s ease-in-out infinite;
  }
  body:not(.auth-locked) .reactive-vessel-marker[data-tone="critical"] .reactive-vessel-marker-dot {
    background: #d9574f;
    box-shadow: 0 0 0 4px rgba(217, 87, 79, 0.14);
    animation: vesselMarkerPulse 1.35s ease-in-out infinite;
  }
  body:not(.auth-locked) .reactive-vessel-marker[data-tone="muted"] .reactive-vessel-marker-dot {
    background: #96a8b2;
    box-shadow: 0 0 0 4px rgba(150, 168, 178, 0.12);
  }
  body:not(.auth-locked) .reactive-vessel-marker-copy {
    display: grid;
    min-width: 0;
    line-height: 1.05;
  }
  body:not(.auth-locked) .reactive-vessel-marker-copy strong,
  body:not(.auth-locked) .reactive-vessel-marker-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-locked) .reactive-vessel-marker-copy strong {
    color: inherit;
    font-size: 0.64rem;
    font-weight: 820;
  }
  body:not(.auth-locked) .reactive-vessel-marker-copy small {
    color: rgba(54, 78, 94, 0.68);
    font-size: 0.6rem;
  }
  @keyframes vesselCalmFloat {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-2px) rotate(-0.35deg);
    }
  }
  @keyframes vesselWaterShimmer {
    from {
      stroke-dashoffset: 0;
    }
    to {
      stroke-dashoffset: -72;
    }
  }
  @keyframes vesselMarkerPulse {
    0%, 100% {
      transform: scale(1);
      opacity: 0.88;
    }
    50% {
      transform: scale(1.18);
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    body:not(.auth-locked) .reactive-vessel-water,
    body:not(.auth-locked) .reactive-vessel-yacht,
    body:not(.auth-locked) .reactive-vessel-marker-dot {
      animation: none;
    }
  }
  body:not(.auth-locked) .overview-vessel-facts {
    display: grid;
    gap: 0;
  }
  body:not(.auth-locked) .overview-vessel-facts div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(141, 220, 230, 0.11);
  }
  body:not(.auth-locked) .overview-vessel-facts span,
  body:not(.auth-locked) .overview-vessel-health span {
    color: rgba(214, 230, 238, 0.72);
  }
  body:not(.auth-locked) .overview-vessel-facts strong,
  body:not(.auth-locked) .overview-vessel-health strong {
    color: #ffffff;
  }
  body:not(.auth-locked) .overview-vessel-health {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    margin-top: 4px;
  }
  body:not(.auth-locked) .overview-vessel-health i {
    grid-column: 1 / -1;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(130, 210, 220, 0.14);
  }
  body:not(.auth-locked) .overview-vessel-health i span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #31dcd5, #73f5e7);
    box-shadow: 0 0 18px rgba(58, 230, 218, 0.42);
  }
  body:not(.auth-locked) .overview-vessel-health-factors {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
    margin-top: 2px;
  }
  body:not(.auth-locked) .overview-vessel-health-factor {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    width: fit-content;
    padding: 0;
    color: rgba(214, 230, 238, 0.74);
    border: 0;
    background: transparent;
    font-size: 0.74rem;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }
  body:not(.auth-locked) .overview-vessel-health-factor:hover,
  body:not(.auth-locked) .overview-vessel-health-factor:focus-visible {
    color: #ffffff;
    outline: none;
  }
  body:not(.auth-locked) .overview-vessel-health-factor.is-static {
    cursor: default;
  }
  body:not(.auth-locked) .overview-vessel-health-factor.is-static:hover {
    color: rgba(214, 230, 238, 0.74);
  }
  body:not(.auth-locked) .overview-vessel-health-factors b {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: #ffb89d;
    border-radius: 999px;
    background: rgba(255, 109, 102, 0.15);
    font-size: 0.74rem;
    line-height: 1;
  }
  body:not(.auth-locked) .overview-vessel-health-factor[data-factor-type="positive"] b {
    color: #5ee1c8;
    background: rgba(49, 220, 213, 0.14);
  }
  @media (max-width: 1180px) {
    body:not(.auth-locked) .workspace-shell {
      grid-template-columns: 238px minmax(0, 1fr);
    }
    body:not(.auth-locked) .workspace-global-header {
      align-items: stretch;
      flex-direction: column;
      gap: 14px;
    }
    body:not(.auth-locked) .workspace-global-toolbar {
      width: 100%;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    body:not(.auth-locked) .overview-command-toolbar {
      flex-direction: column;
      align-items: flex-end;
    }
    body:not(.auth-locked) .overview-command-title h2 {
      font-size: 2.35rem;
    }
    body:not(.auth-locked) .overview-command-metric-copy strong {
      font-size: 2.05rem;
    }
    body:not(.auth-locked) .overview-command-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.auth-locked) .getting-started-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 940px) {
    body:not(.auth-locked) .workspace-shell {
      grid-template-columns: 226px minmax(0, 1fr);
    }
    body:not(.auth-locked) .workspace-nav {
      padding-inline: 16px;
    }
    body:not(.auth-locked) .overview-command-header {
      flex-direction: column;
    }
    body:not(.auth-locked) .overview-command-toolbar {
      width: 100%;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    body:not(.auth-locked) .overview-command-title h2 {
      font-size: 2.1rem;
    }
    body:not(.auth-locked) .overview-command-panels {
      grid-template-columns: 1fr;
    }
    body:not(.auth-locked) .getting-started-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.auth-locked) .overview-vessel-status-body {
      grid-template-columns: 1fr;
    }
  }
}
@media (min-width: 761px) {
  body:not(.auth-locked) {
    --app-command-card-width: 100%;
    --app-command-card-height: clamp(700px, calc(100dvh - 146px), 860px);
    --app-command-card-radius: 24px;
    --app-command-card-padding: clamp(12px, 1.15vw, 18px);
    --app-command-card-gap: clamp(8px, 0.85vw, 11px);
  }
}
@media (min-width: 761px) {
  body[data-active-view="overview"]:not(.auth-locked) #overview-panel {
    padding: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-scroll-area {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(18px, 1.7vw, 28px);
    padding-bottom: clamp(28px, 2.4vw, 40px);
    scroll-padding-bottom: clamp(28px, 2.4vw, 40px);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-center {
    height: auto;
    min-height: 0;
    grid-template-rows: none;
    gap: 14px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-header {
    align-items: flex-start;
    min-width: 0;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-title {
    flex: 1 1 auto;
    min-width: 0;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-kicker {
    display: none;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-title h2 {
    font-size: clamp(2rem, 2.65vw, 2.55rem);
    line-height: 0.98;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-title p:not(.overview-command-kicker) {
    margin-top: 7px;
    color: rgba(221, 235, 242, 0.86);
    font-size: 0.96rem;
    line-height: 1.35;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-toolbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 42px minmax(196px, 244px);
    align-items: center;
    justify-items: end;
    gap: 10px 14px;
    max-width: min(360px, 100%);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-alert-button {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    color: rgba(232, 247, 251, 0.86);
    border: 0;
    border-radius: 999px;
    background: transparent;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-alert-button svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-alert-button i {
    position: absolute;
    top: 1px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    color: #06252d;
    border: 1px solid rgba(120, 255, 245, 0.45);
    border-radius: 999px;
    background: #38e0d6;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-profile-button {
    min-height: 50px;
    max-width: 244px;
    padding: 0;
    gap: 11px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-profile-button > span:first-child {
    width: 44px;
    height: 44px;
    border-color: rgba(194, 236, 245, 0.74);
    background: rgba(13, 45, 62, 0.74);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-profile-copy {
    display: grid;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: 162px;
    gap: 3px;
    color: inherit;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-profile-copy strong {
    max-width: 100%;
    overflow: hidden;
    color: #ffffff;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-profile-copy small {
    color: rgba(214, 230, 238, 0.72);
    font-size: 0.82rem;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-profile-button > i {
    color: rgba(214, 230, 238, 0.72);
    font-style: normal;
    font-size: 1.2rem;
    transform: rotate(90deg);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-date-pill {
    grid-column: 1 / -1;
    min-height: 42px;
    justify-self: end;
    gap: 10px;
    padding: 0 15px;
    border-radius: 12px;
    background: rgba(9, 39, 58, 0.72);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-nav {
    gap: 22px;
    padding-top: 30px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-nav-topline {
    min-height: 58px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-brand {
    padding: 0 4px 2px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .sidebar-vessel-selector {
    gap: 9px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .sidebar-vessel-menu {
    padding: 9px;
    border: 1px solid rgba(91, 217, 228, 0.12);
    border-radius: 14px;
    background: rgba(2, 16, 28, 0.32);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-tab-row {
    gap: 8px;
    padding-top: 4px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-date-pill svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-date-pill::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.8;
  }
}
@media (min-width: 761px) {
  body[data-active-view="overview"]:not(.auth-locked),
  body[data-active-view="work-orders"]:not(.auth-locked) {
    --ops-surface: rgba(255, 255, 255, 0.94);
    --ops-surface-strong: #ffffff;
    --ops-surface-muted: rgba(248, 251, 253, 0.88);
    --ops-border: rgba(13, 36, 56, 0.09);
    --ops-border-strong: rgba(15, 97, 120, 0.16);
    --ops-text: #112638;
    --ops-muted: rgba(50, 73, 89, 0.72);
    --ops-faint: rgba(82, 104, 119, 0.58);
    --ops-accent: #0f8d9a;
    --ops-accent-strong: #0a6f7f;
    --ops-accent-soft: rgba(30, 176, 188, 0.12);
    --ops-green: #237a62;
    --ops-amber: #af7018;
    --ops-red: #b94d3c;
    --ops-shadow: 0 16px 40px rgba(17, 38, 56, 0.08);
    --ops-shadow-soft: 0 10px 26px rgba(17, 38, 56, 0.06);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-scroll-area,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-scroll-area {
    color: var(--ops-text);
    background:
      radial-gradient(circle at 14% 0%, rgba(28, 151, 174, 0.11), transparent 32%),
      radial-gradient(circle at 88% 12%, rgba(52, 224, 214, 0.1), transparent 30%),
      linear-gradient(180deg, #f6f9fb 0%, #edf4f7 100%);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-global-header,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-global-header {
    color: var(--ops-text);
    background: linear-gradient(180deg, rgba(246, 249, 251, 0.98), rgba(246, 249, 251, 0.78) 78%, transparent);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-global-title h1,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-global-title h1 {
    color: var(--ops-text);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-global-title p,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-global-title p {
    color: var(--ops-muted);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-global-date,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-global-date,
  body[data-active-view="overview"]:not(.auth-locked) .workspace-account-button,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-account-button {
    color: var(--ops-text);
    border-color: var(--ops-border-strong);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--ops-shadow-soft);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-account-button > span:first-child,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-account-button > span:first-child {
    color: #ffffff;
    border-color: rgba(15, 141, 154, 0.2);
    background: linear-gradient(135deg, #1aa6b2, #0b6375);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-account-copy strong,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-account-copy strong {
    color: var(--ops-text);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-account-copy small,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-account-copy small {
    color: var(--ops-muted);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-account-menu,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-account-menu {
    color: var(--ops-text);
    border-color: var(--ops-border);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px rgba(16, 38, 55, 0.16);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-account-menu button,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-account-menu button,
  body[data-active-view="overview"]:not(.auth-locked) .workspace-account-menu a,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-account-menu a {
    color: var(--ops-text);
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-account-menu button:hover,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-account-menu button:hover,
  body[data-active-view="overview"]:not(.auth-locked) .workspace-account-menu a:hover,
  body[data-active-view="work-orders"]:not(.auth-locked) .workspace-account-menu a:hover {
    background: rgba(23, 135, 178, 0.08);
  }
  body[data-active-view="overview"]:not(.auth-locked) #overview-panel {
    color: var(--ops-text);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-title h2,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-orders-section .app-screen-header-main h2,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-orders-section .report-overview-topline h3,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-orders-section .report-list-heading h3 {
    color: var(--ops-text);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-title p:not(.overview-command-kicker),
  body[data-active-view="work-orders"]:not(.auth-locked) .work-orders-section .app-screen-copy,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-orders-section .small-copy,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-orders-section .app-screen-note {
    color: var(--ops-muted);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-metric,
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-panel {
    color: var(--ops-text);
    border-color: var(--ops-border);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.92)),
      radial-gradient(circle at 16% 0%, rgba(24, 161, 177, 0.08), transparent 34%);
    box-shadow: var(--ops-shadow);
    backdrop-filter: blur(16px);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-metric::after,
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-panel::after {
    display: none;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-metric:hover,
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-metric:focus-visible {
    border-color: rgba(15, 141, 154, 0.22);
    box-shadow: 0 18px 44px rgba(17, 38, 56, 0.1);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-metric-icon,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-log-icon,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-summary-icon,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-group-icon,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-suggestion-heading-icon,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-accordion-icon {
    color: var(--ops-accent-strong);
    border-color: rgba(15, 141, 154, 0.16);
    background: linear-gradient(180deg, rgba(37, 188, 197, 0.13), rgba(255, 255, 255, 0.72));
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-metric-copy > span,
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-panel h3,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-orders-section .eyebrow,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-orders-section .metric-label,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-orders-section .app-screen-period {
    color: var(--ops-accent-strong);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-metric-copy strong,
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-row-copy strong,
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-empty strong,
  body[data-active-view="overview"]:not(.auth-locked) .overview-vessel-facts strong,
  body[data-active-view="overview"]:not(.auth-locked) .overview-vessel-health strong,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-summary-card .report-summary-value,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-preview-topline strong,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-preview-copy strong,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-suggestion-heading-main strong,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-group-toggle-copy strong,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-accordion-copy strong {
    color: var(--ops-text);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-metric-copy small,
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-link,
  body[data-active-view="overview"]:not(.auth-locked) .overview-maintenance-date,
  body[data-active-view="overview"]:not(.auth-locked) .overview-maintenance-date strong,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-open-queue-button,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-link-chip,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-assignment-chip,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-photo-count,
  body[data-active-view="work-orders"]:not(.auth-locked) .report-action-button {
    color: var(--ops-accent-strong);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-metric-arrow,
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-row-copy small,
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-row-date,
  body[data-active-view="overview"]:not(.auth-locked) .overview-maintenance-date small,
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-empty,
  body[data-active-view="overview"]:not(.auth-locked) .overview-vessel-facts span,
  body[data-active-view="overview"]:not(.auth-locked) .overview-vessel-health span,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-preview-copy span,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-suggestion-count,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-group-toggle-copy .small-copy,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-card-summary,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-accordion-date {
    color: var(--ops-muted);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-panel-head,
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-list-row,
  body[data-active-view="overview"]:not(.auth-locked) .overview-vessel-facts div {
    border-color: rgba(13, 36, 56, 0.08);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-list-row {
    color: var(--ops-text);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-list-row:hover,
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-list-row:focus-visible {
    color: var(--ops-text);
    background: rgba(23, 135, 178, 0.045);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-avatar {
    color: #ffffff;
    background: linear-gradient(135deg, #1698a5, #0a5f73);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-avatar svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-avatar[data-activity-type="VW"] {
    background: linear-gradient(135deg, #3a94d6, #1d5e87);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-avatar[data-activity-type="IS"] {
    background: linear-gradient(135deg, #d58a23, #8e5814);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-avatar[data-activity-type="SE"] {
    background: linear-gradient(135deg, #33a881, #1f715d);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-row-copy .overview-command-row-type {
    color: var(--ops-accent-strong);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-priority-dot {
    border-color: #1698a5;
    background: rgba(22, 152, 165, 0.1);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-priority-thumb {
    border-color: rgba(15, 141, 154, 0.18);
    background: linear-gradient(180deg, rgba(37, 188, 197, 0.13), rgba(255, 255, 255, 0.72));
    box-shadow: 0 10px 24px rgba(17, 38, 56, 0.08);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-priority-dot[data-status="pending"] {
    border-color: var(--ops-amber);
    background: rgba(175, 112, 24, 0.12);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-priority-dot[data-status="complete"] {
    border-color: var(--ops-green);
    background: rgba(35, 122, 98, 0.12);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-status {
    color: var(--ops-accent-strong);
    background: rgba(22, 152, 165, 0.1);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-status[data-status="pending"] {
    color: var(--ops-amber);
    background: rgba(175, 112, 24, 0.11);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-status[data-status="complete"] {
    color: var(--ops-green);
    background: rgba(35, 122, 98, 0.11);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-command-link,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-open-queue-button,
  body[data-active-view="work-orders"]:not(.auth-locked) .report-action-button {
    border-color: rgba(15, 141, 154, 0.16);
    background: rgba(22, 152, 165, 0.08);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-vessel-visual {
    background:
      linear-gradient(180deg, transparent 0 64%, rgba(30, 176, 188, 0.09) 64% 100%),
      radial-gradient(circle at 50% 78%, rgba(30, 176, 188, 0.16), transparent 58%),
      linear-gradient(180deg, #f7fbfc, #eef6f8);
  }
  body[data-active-view="overview"]:not(.auth-locked) .reactive-vessel-status-visual {
    min-height: 158px;
    border: 1px solid rgba(15, 97, 120, 0.08);
    background:
      radial-gradient(circle at 50% 76%, var(--vessel-state-soft), transparent 60%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(239, 247, 249, 0.92));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 16px 34px rgba(13, 36, 56, 0.06);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-vessel-visual svg {
    stroke: rgba(15, 111, 127, 0.72);
    filter: drop-shadow(0 10px 18px rgba(17, 38, 56, 0.08));
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-vessel-health i {
    background: rgba(13, 36, 56, 0.08);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-vessel-health i span {
    background: linear-gradient(90deg, #12a4aa, #5ed5cb);
    box-shadow: none;
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-vessel-health[data-health-state="attention"] i span {
    background: linear-gradient(90deg, #d68b22, #f4bf61);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-vessel-health[data-health-state="critical"] i span {
    background: linear-gradient(90deg, #d9574f, #ff8f7e);
  }
  body[data-active-view="overview"]:not(.auth-locked) .overview-vessel-health[data-health-state="monitoring"] i span {
    background: linear-gradient(90deg, #7f95a3, #bdcad1);
  }
}
body[data-active-view]:not(.auth-locked) {
  --ops-surface: rgba(255, 255, 255, 0.94);
  --ops-surface-strong: #ffffff;
  --ops-surface-muted: rgba(248, 251, 253, 0.88);
  --ops-border: rgba(13, 36, 56, 0.09);
  --ops-border-strong: rgba(15, 97, 120, 0.16);
  --ops-text: #112638;
  --ops-muted: rgba(50, 73, 89, 0.72);
  --ops-faint: rgba(82, 104, 119, 0.58);
  --ops-accent: #0f8d9a;
  --ops-accent-strong: #0a6f7f;
  --ops-accent-soft: rgba(30, 176, 188, 0.12);
  --ops-green: #237a62;
  --ops-amber: #af7018;
  --ops-red: #b94d3c;
  --ops-shadow: 0 16px 40px rgba(17, 38, 56, 0.08);
  --ops-shadow-soft: 0 10px 26px rgba(17, 38, 56, 0.06);
  --ops-radius: var(--app-command-card-radius, 24px);
  --ops-panel-radius: 18px;
  --ops-row-radius: 14px;
  color: var(--ops-text);
}
@media (min-width: 761px) {
  body[data-active-view]:not(.auth-locked) .workspace-scroll-area {
    color: var(--ops-text);
    background:
      radial-gradient(circle at 14% 0%, rgba(28, 151, 174, 0.11), transparent 32%),
      radial-gradient(circle at 88% 12%, rgba(52, 224, 214, 0.1), transparent 30%),
      linear-gradient(180deg, #f6f9fb 0%, #edf4f7 100%);
  }
  body[data-active-view]:not(.auth-locked) .workspace-global-header {
    color: var(--ops-text);
    background: linear-gradient(180deg, rgba(246, 249, 251, 0.98), rgba(246, 249, 251, 0.78) 78%, transparent);
  }
  body[data-active-view]:not(.auth-locked) .workspace-global-title h1,
  body[data-active-view]:not(.auth-locked) .workspace-account-copy strong {
    color: var(--ops-text);
  }
  body[data-active-view]:not(.auth-locked) .workspace-global-title p,
  body[data-active-view]:not(.auth-locked) .workspace-account-copy small {
    color: var(--ops-muted);
  }
  body[data-active-view]:not(.auth-locked) .workspace-global-date,
  body[data-active-view]:not(.auth-locked) .workspace-account-button {
    color: var(--ops-text);
    border-color: var(--ops-border-strong);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--ops-shadow-soft);
  }
  body[data-active-view]:not(.auth-locked) .workspace-account-button > span:first-child {
    color: #ffffff;
    border-color: rgba(15, 141, 154, 0.2);
    background: linear-gradient(135deg, #1aa6b2, #0b6375);
  }
  body[data-active-view]:not(.auth-locked) .workspace-account-menu {
    color: var(--ops-text);
    border-color: var(--ops-border);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px rgba(16, 38, 55, 0.16);
  }
  body[data-active-view]:not(.auth-locked) .workspace-account-menu button,
  body[data-active-view]:not(.auth-locked) .workspace-account-menu a {
    color: var(--ops-text);
  }
  body[data-active-view]:not(.auth-locked) .workspace-account-menu button:hover,
  body[data-active-view]:not(.auth-locked) .workspace-account-menu a:hover {
    background: rgba(23, 135, 178, 0.08);
  }
  body[data-active-view]:not(.auth-locked) :is(
    .maintenance-surface,
    .maintenance-summary-card,
    .maintenance-focus-card,
    .maintenance-asset-card,
    .maintenance-history-entry,
    .maintenance-template-preview-shell,
    .maintenance-section-summary,
    .maintenance-section-card,
    .maintenance-editor-section,
    .report-overview-card,
    .report-list-shell,
    .report-archive-panel,
    .report-summary-card,
    .report-preview-section,
    .weekly-log-cell,
    .weekly-log-item,
    .app-screen-toolbar,
    .app-screen-summary-card,
    .vendor-toolbar,
    .vendor-directory-item,
    .vendor-detail-panel,
    .vendor-detail-metric,
    .vendor-detail-section,
    .inventory-directory-item,
    .inventory-detail-panel,
    .inventory-detail-metric,
    .inventory-detail-section,
    .inventory-directory-metric,
    .expense-metric-card,
    .expense-visual-card,
    .expense-log-shell,
    .expense-log-card,
    .expense-insight-card,
    .crew-directory-item,
    .crew-detail-card,
    .crew-credential-card,
    .crew-log-entry,
    .voyage-card,
    .voyage-list,
    .alert-feed,
    .vessel-summary-hero,
    .vessel-tools-preview-panel,
    .vessel-tool-row,
    .vessel-profile-pill,
    .work-order-week-card,
    .work-order-command-preview,
    .work-order-summary-card,
    .work-order-preview-row,
    .work-order-accordion-item,
    .work-order-suggestion-section
  ) {
    color: var(--ops-text);
    border-color: var(--ops-border);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 253, 0.86)),
      radial-gradient(circle at 14% 0%, rgba(30, 176, 188, 0.055), transparent 32%);
    box-shadow:
      var(--ops-shadow-soft),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }
  body[data-active-view]:not(.auth-locked) :is(
    .section-heading h2,
    .app-screen-header-main h2,
    .app-screen-header-main h3,
    .card-title,
    .report-overview-topline h3,
    .report-list-heading h3,
    .compact-disclosure-summary-main h3,
    .compact-disclosure-summary-main h4,
    .maintenance-surface-heading h3,
    .maintenance-section-title,
    .vendor-directory-title,
    .inventory-directory-title,
    .expense-log-title,
    .crew-name,
    .crew-section .app-screen-summary-value,
    .vessel-profile-title-row h2,
    .vessel-tool-copy strong,
    .work-order-preview-copy strong,
    .work-order-preview-topline strong,
    .work-order-accordion-copy strong,
    .work-order-suggestion-heading-main strong,
    .voyage-card strong,
    label
  ) {
    color: var(--ops-text);
  }
  body[data-active-view]:not(.auth-locked) :is(
    .small-copy,
    .card-meta,
    .app-screen-copy,
    .app-screen-note,
    .maintenance-summary-copy,
    .maintenance-asset-meta,
    .maintenance-history-meta,
    .maintenance-section-copy,
    .report-summary-card .small-copy,
    .report-list-shell .compact-disclosure-summary-copy,
    .report-list-shell .compact-disclosure-summary-meta,
    .vendor-directory-contact,
    .vendor-directory-relationship,
    .inventory-directory-meta,
    .expense-log-meta,
    .crew-meta,
    .crew-rotation,
    .vessel-profile-subtitle,
    .vessel-profile-note,
    .vessel-tool-copy small,
    .work-order-preview-copy span,
    .work-order-card-summary,
    .work-order-accordion-date,
    .voyage-card p
  ) {
    color: var(--ops-muted);
  }
  body[data-active-view]:not(.auth-locked) :is(
    .eyebrow,
    .metric-label,
    .detail-label,
    .maintenance-summary-topline,
    .maintenance-focus-topline,
    .maintenance-section-card-topline,
    .report-overview-topline .eyebrow,
    .app-screen-period,
    .vessel-tools-preview-head .eyebrow,
    .vessel-tool-meta
  ) {
    color: var(--ops-accent-strong);
    letter-spacing: 0.12em;
  }
  body[data-active-view]:not(.auth-locked) :is(
    .primary-button,
    .app-screen-primary-action,
    .work-order-suggestion-add-button,
    .vessel-tools-open-button
  ) {
    color: #ffffff;
    border-color: rgba(15, 141, 154, 0.18);
    background: linear-gradient(135deg, #27c4c7, #0f7f8c);
    box-shadow:
      0 12px 26px rgba(15, 141, 154, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }
  body[data-active-view]:not(.auth-locked) :is(
    .ghost-button,
    .text-button,
    .report-action-button,
    .action-overflow-trigger,
    .filter-chip,
    .vendor-filter,
    .maintenance-section-chip,
    .work-order-open-queue-button,
    .report-actions-summary,
    .compact-disclosure-summary
  ) {
    color: var(--ops-accent-strong);
    border-color: rgba(15, 141, 154, 0.16);
    background: rgba(22, 152, 165, 0.08);
    box-shadow: none;
  }
  body[data-active-view]:not(.auth-locked) :is(
    .filter-chip.active,
    .vendor-filter.active,
    .maintenance-section-chip.active
  ) {
    color: #ffffff;
    border-color: rgba(15, 141, 154, 0.2);
    background: linear-gradient(135deg, #1aa6b2, #0b6375);
    box-shadow: 0 10px 22px rgba(15, 141, 154, 0.16);
  }
  body[data-active-view]:not(.auth-locked) :is(
    .sort-shell,
    .app-screen-search,
    .vendor-search-shell,
    input,
    select,
    textarea,
    .photo-upload-field
  ) {
    color: var(--ops-text);
    border-color: var(--ops-border);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  }
  body[data-active-view]:not(.auth-locked) :is(input, select, textarea)::placeholder {
    color: var(--ops-faint);
  }
  body[data-active-view]:not(.auth-locked) select option,
  body[data-active-view]:not(.auth-locked) select optgroup {
    color: var(--ops-text);
    background: #ffffff;
  }
  body[data-active-view]:not(.auth-locked) :is(
    .status-badge,
    .priority-badge,
    .category-chip,
    .work-order-link-chip,
    .work-order-assignment-chip,
    .work-order-photo-count,
    .vessel-profile-pill,
    .crew-status-chip
  ) {
    color: rgba(13, 36, 56, 0.72);
    border-color: rgba(13, 36, 56, 0.06);
    background: rgba(13, 36, 56, 0.055);
    box-shadow: none;
  }
  body[data-active-view]:not(.auth-locked) :is(
    .status-badge.is-success,
    .status-badge.success,
    .status-badge.active,
    .status-badge.status-completed,
    .status-badge.status-finalized,
    .crew-status-chip.is-assigned
  ) {
    color: var(--ops-green);
    border-color: rgba(35, 122, 98, 0.16);
    background: rgba(35, 122, 98, 0.12);
  }
  body[data-active-view]:not(.auth-locked) :is(
    .status-badge.is-warning,
    .status-badge.warning,
    .status-badge.status-draft,
    .status-badge.status-open,
    .priority-badge.high,
    .priority-badge.medium
  ) {
    color: var(--ops-amber);
    border-color: rgba(175, 112, 24, 0.16);
    background: rgba(175, 112, 24, 0.12);
  }
  body[data-active-view]:not(.auth-locked) :is(
    .status-badge.is-danger,
    .status-badge.danger,
    .status-badge.status-waiting-for-vessel,
    .priority-badge.critical,
    .crew-status-chip.is-attention
  ) {
    color: var(--ops-red);
    border-color: rgba(185, 77, 60, 0.16);
    background: rgba(185, 77, 60, 0.12);
  }
  body[data-active-view]:not(.auth-locked) :is(
    .work-order-queue-drawer,
    .vessel-tools-drawer,
    .access-modal,
    .vendor-modal,
    .inventory-modal,
    .crew-detail-modal,
    .crew-confirm-modal,
    .account-sheet,
    .billing-sheet
  ) {
    color: var(--ops-text);
    border-color: var(--ops-border);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 253, 0.96)),
      radial-gradient(circle at 14% 0%, rgba(30, 176, 188, 0.08), transparent 34%);
    box-shadow: 0 28px 80px rgba(17, 38, 56, 0.18);
  }
  body[data-active-view]:not(.auth-locked) :is(
    .work-order-queue-backdrop,
    .vessel-tools-drawer-backdrop,
    .access-modal-backdrop,
    .vendor-modal-backdrop,
    .inventory-modal-backdrop
  ) {
    background: rgba(18, 38, 56, 0.22);
    backdrop-filter: blur(10px);
  }
}
@media (max-width: 760px) {
  body[data-active-view]:not(.auth-locked) .workspace-scroll-area {
    color: var(--ops-text, #112638);
    background:
      radial-gradient(circle at 14% 0%, rgba(28, 151, 174, 0.11), transparent 32%),
      radial-gradient(circle at 88% 12%, rgba(52, 224, 214, 0.1), transparent 30%),
      linear-gradient(180deg, #f6f9fb 0%, #edf4f7 100%);
  }
  body[data-active-view]:not(.auth-locked) :is(
    .work-order-queue-drawer,
    .vessel-tools-drawer,
    .access-modal,
    .vendor-modal,
    .inventory-modal,
    .crew-detail-modal,
    .crew-confirm-modal,
    .account-sheet,
    .billing-sheet
  ) {
    color: var(--ops-text, #112638);
    border-color: rgba(13, 36, 56, 0.09);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 253, 0.96)),
      radial-gradient(circle at 14% 0%, rgba(30, 176, 188, 0.08), transparent 34%);
  }
}
body:not(.auth-locked) .work-order-queue-shell .work-order-queue-list.report-list {
  min-height: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  touch-action: pan-y;
}
body:not(.auth-locked) .work-order-queue-shell .work-order-queue-list.report-list::-webkit-scrollbar {
  display: initial;
  width: 8px;
}
body:not(.auth-locked) .work-order-queue-shell .work-order-queue-list.report-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(91, 217, 228, 0.34);
}
@media (max-width: 760px) {
  body:not(.auth-locked) .work-order-queue-shell .work-order-queue-list.report-list {
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
    scrollbar-width: none;
  }
  body:not(.auth-locked) .work-order-queue-shell .work-order-queue-list.report-list::-webkit-scrollbar {
    display: none;
  }
}
#access-modal.access-modal-shell {
  --access-panel-desktop-width: 1440px;
  --access-panel-desktop-height: 980px;
  --access-panel-gutter: 40px;
  align-items: center;
  padding: 20px;
  background: transparent;
}
#access-modal .access-modal-backdrop {
  background: rgba(12, 30, 44, 0.28);
  backdrop-filter: blur(14px);
}
#access-modal .access-modal {
  position: relative;
  width: min(var(--access-panel-desktop-width), calc(100vw - var(--access-panel-gutter)));
  height: min(var(--access-panel-desktop-height), calc(var(--visual-viewport-height, 100dvh) - var(--access-panel-gutter)));
  max-height: calc(var(--visual-viewport-height, 100dvh) - var(--access-panel-gutter));
  margin: 0 auto;
  padding: clamp(22px, 2.3vw, 30px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ops-text, var(--ink));
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 26px;
  background:
    radial-gradient(circle at 94% 0%, rgba(29, 176, 188, 0.09), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.96));
  box-shadow:
    0 28px 80px rgba(16, 36, 54, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
#access-modal .access-modal-heading {
  gap: 18px;
  align-items: start;
}
#access-modal .access-modal-heading .eyebrow {
  margin: 0 0 4px;
  color: #0f8d9a;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}
#access-modal .access-modal-heading h2 {
  font-size: clamp(2rem, 3vw, 2.85rem);
  letter-spacing: -0.045em;
}
#access-modal .access-modal-copy {
  margin-top: 8px;
  color: var(--ops-muted, var(--ink-soft));
}
#access-modal .access-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 999px;
  color: var(--ops-text, var(--ink));
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 22px rgba(13, 36, 56, 0.08);
  font-size: 1.5rem;
  line-height: 1;
}
#access-modal .access-modal-nav {
  width: min(364px, 100%);
  min-height: 44px;
  margin-top: 18px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}
#access-modal .access-modal-nav-button {
  min-height: 36px;
  border-radius: 11px;
  font-size: 0.88rem;
}
#access-modal .access-modal-nav-button.active {
  color: #0b6f7d;
  background: rgba(32, 178, 190, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
#access-modal .access-modal-grid {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 14px;
  overflow: hidden;
  padding: 0;
}
#access-modal .access-card {
  height: 100%;
  max-height: none;
  overflow: hidden;
  border-color: rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 16px 42px rgba(16, 36, 54, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
#access-modal .access-card-invite {
  min-height: 0;
  padding: clamp(16px, 1.8vw, 20px);
  border-radius: 22px;
}
#access-modal .access-subheading {
  margin-bottom: 14px;
}
#access-modal .access-subheading .eyebrow,
#access-modal .access-section-copy {
  display: none;
}
#access-modal .access-subheading h3,
#access-modal .invite-role-selection-copy .field-label,
#access-modal .access-vessel-field > span,
#access-modal .invite-custom-access-panel > div > span {
  margin: 0;
  color: var(--ops-text, var(--ink));
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
#access-modal .invite-form {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  grid-template-rows: auto auto auto auto auto;
  gap: 14px 18px;
  align-items: stretch;
}
#access-modal .invite-email-field,
#access-modal .invite-role-selection,
#access-modal #invite-vessel-mode-field,
#access-modal #invite-vessel-field,
#access-modal .invite-custom-access-panel {
  grid-column: 1;
}
#access-modal .invite-email-field {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  color: var(--ops-muted, var(--ink-soft));
}
#access-modal .invite-email-field::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  align-self: center;
  border: 1px solid rgba(15, 141, 154, 0.12);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(32, 178, 190, 0.12), rgba(255, 255, 255, 0.7)),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230f8d9a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='6' width='16' height='12' rx='2'/%3E%3Cpath d='m5 8 7 5 7-5'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
#access-modal .invite-email-field > span {
  grid-column: 2;
  color: var(--ops-muted, var(--ink-soft));
  font-size: 0.73rem;
  font-weight: 650;
}
#access-modal .invite-email-field input {
  grid-column: 2;
  min-height: 40px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
#access-modal .invite-role-selection {
  padding-top: 4px;
  border-top: 1px solid rgba(13, 36, 56, 0.07);
}
#access-modal .invite-role-selection-copy {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
#access-modal .invite-role-selection-copy .small-copy {
  display: none;
}
#access-modal .access-role-guide {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#access-modal .access-role-card {
  position: relative;
  min-height: 106px;
  padding: 12px 8px 10px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
#access-modal .access-role-card:hover {
  border-color: rgba(15, 141, 154, 0.2);
  background: rgba(255, 255, 255, 0.92);
}
#access-modal .access-role-card.selected {
  border-color: rgba(15, 141, 154, 0.42);
  background: linear-gradient(180deg, rgba(226, 247, 249, 0.86), rgba(255, 255, 255, 0.86));
  box-shadow: inset 0 0 0 1px rgba(15, 141, 154, 0.2), 0 12px 28px rgba(15, 141, 154, 0.08);
}
#access-modal .access-role-card-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  color: #0f8d9a;
}
#access-modal .access-role-card-icon svg,
#access-modal .access-role-check svg,
#access-modal .invite-summary-stat > span svg,
#access-modal .invite-summary-list li svg,
#access-modal .invite-summary-note > span svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#access-modal .access-role-topline {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
#access-modal .access-role-topline strong {
  font-size: 0.86rem;
  color: var(--ops-text, var(--ink));
}
#access-modal .access-role-summary {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--ops-muted, var(--ink-soft));
}
#access-modal .access-role-check {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: #0f8d9a;
}
#access-modal .access-role-check svg {
  width: 13px;
  height: 13px;
}
#access-modal .access-vessel-field {
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(13, 36, 56, 0.07);
}
#access-modal #invite-vessel-field {
  padding-top: 0;
  border-top: 0;
}
#access-modal .invite-vessel-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#access-modal .invite-vessel-mode-card {
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}
#access-modal .invite-vessel-mode-card input {
  width: 15px;
  height: 15px;
  margin: 0;
}
#access-modal .invite-vessel-mode-card span {
  display: block;
}
#access-modal .invite-vessel-mode-card strong {
  font-size: 0.82rem;
}
#access-modal .invite-vessel-mode-card small {
  display: none;
}
#access-modal .invite-vessel-mode-card.checked {
  border-color: rgba(15, 141, 154, 0.2);
  background: rgba(32, 178, 190, 0.12);
}
#access-modal .access-vessel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#access-modal .access-vessel-chip {
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
}
#access-modal .access-vessel-chip:hover {
  transform: none;
}
#access-modal .access-vessel-chip input {
  width: 15px;
  height: 15px;
  margin: 0;
  order: 2;
}
#access-modal .access-vessel-copy {
  gap: 1px;
}
#access-modal .access-vessel-copy strong {
  font-size: 0.84rem;
}
#access-modal .access-vessel-copy small:not(.access-vessel-state),
#access-modal .access-vessel-state {
  display: none;
}
#access-modal #invite-vessel-help {
  margin: 0;
  color: var(--ops-muted, var(--ink-soft));
  font-size: 0.78rem;
  text-align: right;
}
#access-modal .invite-custom-access-panel {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.68);
}
#access-modal .invite-custom-access-action {
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 12px;
  color: #0f7d89;
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
}
#access-modal .invite-permission-matrix {
  max-height: min(34vh, 300px);
}
#access-modal .invite-review-panel {
  grid-column: 2;
  grid-row: 1 / span 6;
  gap: 14px;
  align-self: start;
  min-height: 0;
  max-height: 100%;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}
#access-modal .invite-role-summary-card {
  display: none;
}
#access-modal .invite-access-summary-card {
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
#access-modal .invite-summary-panel-heading .small-copy {
  margin: 0 0 10px;
  color: #0f8d9a;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#access-modal .invite-summary-stat {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(13, 36, 56, 0.08);
}
#access-modal .invite-summary-stat > span,
#access-modal .invite-summary-note > span {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #0f8d9a;
  background: rgba(32, 178, 190, 0.1);
}
#access-modal .invite-summary-stat .small-copy {
  margin: 0 0 2px;
  font-size: 0.76rem;
}
#access-modal .invite-summary-stat strong {
  color: var(--ops-text, var(--ink));
  font-size: 0.9rem;
}
#access-modal .invite-summary-list {
  padding: 14px 0 0;
}
#access-modal .invite-summary-list strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ops-text, var(--ink));
  font-size: 0.86rem;
}
#access-modal .invite-summary-list ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  list-style: none;
}
#access-modal .invite-summary-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  color: var(--ops-muted, var(--ink-soft));
  font-size: 0.82rem;
  line-height: 1.28;
}
#access-modal .invite-summary-list li span {
  display: inline-grid;
  place-items: center;
  color: #32a96c;
}
#access-modal .invite-summary-list.is-muted li span,
#access-modal .invite-summary-list li.is-muted span {
  color: var(--ops-muted, var(--ink-soft));
}
#access-modal .invite-summary-note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(15, 141, 154, 0.12);
  border-radius: 14px;
  background: rgba(32, 178, 190, 0.08);
}
#access-modal .invite-summary-note p {
  margin: 0;
  color: #0d6370;
  font-size: 0.78rem;
  line-height: 1.35;
}
#access-modal .invite-review-panel > .form-actions {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(13, 36, 56, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), #ffffff 46%);
}
#access-modal .invite-review-panel > .form-actions .primary-button {
  min-height: 46px;
  border-radius: 999px;
}
#access-modal .invite-custom-access-panel {
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
}
#access-modal .invite-custom-access-action {
  cursor: pointer;
}
#access-modal .access-card-pending,
#access-modal .access-card-users {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
}
#access-modal .invite-preview {
  align-self: start;
}
#access-modal .invite-preview:empty {
  display: none;
}
#access-modal .invite-list,
#access-modal .user-table-wrap {
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
#access-modal .account-list {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  align-items: start;
}
#access-modal .account-card {
  min-width: 0;
}
#access-modal .account-access-editor {
  overflow: visible;
}
#access-modal .invite-custom-access-workspace-panel[hidden] {
  display: none;
}
#access-modal .invite-custom-access-workspace-panel {
  position: absolute;
  inset: clamp(18px, 2vw, 26px);
  z-index: 5;
  display: block;
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(32, 178, 190, 0.1), transparent 30%),
    rgba(248, 252, 253, 0.98);
  box-shadow: 0 22px 70px rgba(16, 36, 54, 0.2);
}
#access-modal .invite-custom-access-workspace-card {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.88);
}
#access-modal .invite-custom-access-heading {
  align-items: start;
  gap: 16px;
}
#access-modal .invite-permissions-field {
  min-height: 0;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
}
#access-modal .invite-permissions-field .access-vessel-picker {
  height: 100%;
  min-height: 0;
}
#access-modal .invite-permissions-field .invite-permission-matrix {
  height: 100%;
  max-height: none;
  overflow: auto;
  padding-right: 8px;
  scrollbar-gutter: stable;
}
#access-modal .invite-permissions-field .invite-permission-chip input {
  flex: 0 0 15px;
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
  border: 1.4px solid rgba(13, 36, 56, 0.24);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}
#access-modal .invite-permissions-field .invite-permission-chip input:checked {
  border-color: #139aa7;
  background-color: #139aa7;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.2 5 8.1 9.2 3.8' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px 11px;
}
#access-modal .invite-permissions-field .invite-permission-intro .small-copy {
  margin-bottom: 12px;
}
#access-modal .invite-custom-access-actions {
  justify-content: flex-end;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(13, 36, 56, 0.08);
}
#access-modal .invite-custom-access-actions > * {
  min-height: 44px;
}
@media (max-width: 980px) {
  #access-modal .access-modal {
    width: min(860px, calc(100vw - 20px));
    height: min(980px, calc(var(--visual-viewport-height, 100dvh) - 20px));
  }
  #access-modal .invite-form {
    grid-template-columns: 1fr;
  }
  #access-modal .access-modal-grid {
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-gutter: stable;
  }
  #access-modal .access-card {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
  #access-modal .invite-review-panel {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  #access-modal .access-role-guide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #access-modal .account-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  #access-modal.access-modal-shell {
    align-items: stretch;
    padding:
      max(8px, var(--safe-area-top, 0px))
      max(8px, var(--safe-area-right, 0px))
      max(8px, var(--safe-area-bottom, 0px))
      max(8px, var(--safe-area-left, 0px));
  }
  #access-modal .access-modal {
    width: 100%;
    height: calc(var(--mobile-visual-height, 100dvh) - 16px);
    max-height: calc(var(--mobile-visual-height, 100dvh) - 16px);
    padding: 18px 18px 92px;
    border-radius: 22px;
  }
  #access-modal .access-modal-close {
    top: 14px;
    right: 14px;
  }
  #access-modal .access-modal-heading {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 10px;
  }
  #access-modal .access-modal-heading h2 {
    font-size: 2rem;
  }
  #access-modal .access-modal-nav {
    width: 100%;
  }
  #access-modal .access-card-invite {
    padding: 14px 14px calc(118px + var(--safe-area-bottom, 0px));
  }
  #access-modal .access-modal-grid {
    padding-bottom: calc(100px + var(--safe-area-bottom, 0px) + var(--mobile-keyboard-inset, 0px));
  }
  #access-modal .invite-email-field {
    grid-template-columns: 1fr;
  }
  #access-modal .invite-email-field::before {
    display: none;
  }
  #access-modal .invite-email-field > span,
  #access-modal .invite-email-field input {
    grid-column: 1;
  }
  #access-modal .access-role-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #access-modal .access-role-card {
    min-height: 96px;
  }
  #access-modal .invite-vessel-mode-grid {
    grid-template-columns: 1fr;
  }
  #access-modal .invite-vessel-mode-card {
    justify-content: flex-start;
  }
  #access-modal #invite-vessel-help {
    text-align: left;
  }
  #access-modal .invite-review-panel {
    padding: 14px;
  }
  #access-modal .invite-custom-access-panel {
    align-items: stretch;
    flex-direction: column;
  }
  #access-modal .invite-custom-access-action {
    width: 100%;
    margin-left: 0;
    min-height: 44px;
  }
  #access-modal .invite-custom-access-workspace-panel {
    inset:
      max(8px, var(--safe-area-top, 0px))
      max(8px, var(--safe-area-right, 0px))
      max(8px, var(--safe-area-bottom, 0px))
      max(8px, var(--safe-area-left, 0px));
    border-radius: 22px;
  }
  #access-modal .invite-custom-access-workspace-card {
    padding: 16px;
  }
  #access-modal .invite-custom-access-heading {
    grid-template-columns: 1fr;
  }
  #access-modal .invite-custom-access-heading .text-button {
    width: 100%;
  }
  #access-modal .invite-review-panel > .form-actions {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-keyboard-inset, 0px) + 12px);
    z-index: 4;
    width: min(420px, calc(100vw - 24px));
    transform: translateX(-50%);
    padding: 0;
    border: 0;
    background: transparent;
  }
  #access-modal .invite-custom-access-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-direction: column-reverse;
    gap: 10px;
    padding: 12px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), #ffffff 42%);
  }
  #access-modal .invite-custom-access-actions > * {
    width: 100%;
  }
  #access-modal .invite-permissions-field .invite-permission-matrix {
    max-height: none;
    overflow: auto;
  }
  #access-modal .invite-permissions-field .invite-permission-header {
    display: grid;
  }
  #access-modal .invite-permissions-field .invite-permission-row {
    min-width: 860px;
    min-height: 52px;
    grid-template-columns: minmax(132px, 1.45fr) repeat(9, minmax(66px, 0.8fr));
    align-items: center;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid #e5eef2;
    border-radius: 0;
  }
  #access-modal .invite-permissions-field .invite-permission-row:last-child {
    border-bottom: 0;
  }
  #access-modal .invite-permissions-field .invite-permission-module-name {
    position: sticky;
    left: 0;
    z-index: 1;
    min-height: 52px;
    padding: 8px 10px;
    border-right: 1px solid #e5eef2;
    border-bottom: 0;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.48) 76%, rgba(255, 255, 255, 0) 100%),
      var(--permission-row-bg);
  }
  #access-modal .invite-permissions-field .invite-permission-cell {
    min-height: 44px;
    justify-content: center;
    padding: 7px 9px;
    border-top: 0;
    border-left: 1px solid #e5eef2;
  }
  #access-modal .invite-permissions-field .invite-permission-chip {
    height: 44px;
    align-self: center;
  }
  #access-modal .invite-permissions-field .invite-permission-cell-empty {
    display: inline-flex;
  }
}
@media (max-width: 760px) {
  body:not(.auth-locked) {
    --mobile-ops-bg: #f5f8fb;
    --mobile-ops-bg-strong: #ffffff;
    --mobile-ops-card: rgba(255, 255, 255, 0.94);
    --mobile-ops-card-muted: rgba(248, 252, 253, 0.86);
    --mobile-ops-line: rgba(13, 36, 56, 0.09);
    --mobile-ops-line-strong: rgba(15, 141, 154, 0.2);
    --mobile-ops-text: #112638;
    --mobile-ops-muted: rgba(50, 73, 89, 0.72);
    --mobile-ops-faint: rgba(50, 73, 89, 0.54);
    --mobile-ops-accent: #0f8d9a;
    --mobile-ops-accent-strong: #087083;
    --mobile-ops-radius: 22px;
    --mobile-ops-radius-small: 16px;
    --mobile-ops-shadow: 0 14px 34px rgba(17, 38, 56, 0.08);
    --mobile-ops-shadow-soft: 0 8px 20px rgba(17, 38, 56, 0.06);
    color: var(--mobile-ops-text);
    background:
      radial-gradient(circle at 12% 0%, rgba(30, 176, 188, 0.13), transparent 35%),
      radial-gradient(circle at 92% 8%, rgba(71, 210, 218, 0.11), transparent 32%),
      linear-gradient(180deg, #f7fbfd 0%, #edf4f7 100%);
    overflow-x: hidden;
  }
  body:not(.auth-locked) .app-shell,
  body:not(.auth-locked) .workspace-shell,
  body:not(.auth-locked) .workspace,
  body:not(.auth-locked) .content-area,
  body:not(.auth-locked) .view-stack {
    max-width: 100%;
    overflow-x: hidden;
  }
  body:not(.auth-locked) .app-shell {
    width: 100vw;
    min-height: var(--mobile-visual-height, 100dvh);
    background:
      radial-gradient(circle at 18% 0%, rgba(36, 186, 197, 0.12), transparent 34%),
      linear-gradient(180deg, #f7fbfd 0%, #edf4f7 100%);
  }
  body:not(.auth-locked) .workspace-shell {
    height: var(--mobile-visual-height, 100dvh);
    background: transparent;
  }
  body:not(.auth-locked) .workspace-scroll-area {
    gap: 10px;
    color: var(--mobile-ops-text);
    background:
      radial-gradient(circle at 14% 0%, rgba(30, 176, 188, 0.1), transparent 36%),
      linear-gradient(180deg, #f8fbfd 0%, #eef5f8 100%);
    scroll-padding-top: calc(var(--safe-area-top) + 16px);
    scroll-padding-bottom: calc(120px + var(--safe-area-bottom) + var(--mobile-keyboard-inset, 0px));
  }
  body:not(.auth-locked) .workspace-nav {
    border: 0;
    border-radius: 0 0 26px 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 251, 253, 0.88));
    box-shadow: 0 12px 32px rgba(17, 38, 56, 0.08);
  }
  body:not(.auth-locked) .workspace-mobile-shell {
    gap: 10px;
  }
  body:not(.auth-locked) .workspace-mobile-shell-topline {
    gap: 8px;
  }
  body:not(.auth-locked) .workspace-mobile-current,
  body:not(.auth-locked) .workspace-mobile-more-button,
  body:not(.auth-locked) .workspace-mobile-alert,
  body:not(.auth-locked) .workspace-mobile-context,
  body:not(.auth-locked) .workspace-mobile-primary-action {
    color: var(--mobile-ops-text);
    border-color: var(--mobile-ops-line);
    background: var(--mobile-ops-card);
    box-shadow: var(--mobile-ops-shadow-soft);
  }
  body:not(.auth-locked) .workspace-mobile-alert {
    color: #074d5f;
    border-color: rgba(23, 158, 174, 0.2);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(232, 249, 251, 0.76));
    box-shadow: 0 14px 34px rgba(7, 55, 68, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  body:not(.auth-locked) .workspace-mobile-alert[aria-expanded="true"] {
    color: #ffffff;
    border-color: rgba(48, 229, 219, 0.42);
    background: linear-gradient(135deg, #047483, #004b5c);
    box-shadow: 0 20px 46px rgba(0, 92, 111, 0.28), 0 0 0 6px rgba(40, 220, 211, 0.12);
  }
  body:not(.auth-locked) .workspace-mobile-current,
  body:not(.auth-locked) .workspace-mobile-more-button,
  body:not(.auth-locked) .workspace-mobile-alert,
  body:not(.auth-locked) .workspace-mobile-primary-action,
  body:not(.auth-locked) .primary-button,
  body:not(.auth-locked) .text-button,
  body:not(.auth-locked) .filter-chip,
  body:not(.auth-locked) .status-badge {
    min-height: 44px;
  }
  body:not(.auth-locked) .workspace-mobile-current-icon,
  body:not(.auth-locked) .mobile-shell-nav-item-icon,
  body:not(.auth-locked) .mobile-overview-icon,
  body:not(.auth-locked) .mobile-overview-action-icon,
  body:not(.auth-locked) .mobile-vessel-info-icon,
  body:not(.auth-locked) .mobile-vessel-level-icon,
  body:not(.auth-locked) .work-order-log-icon,
  body:not(.auth-locked) .work-order-summary-icon,
  body:not(.auth-locked) .work-order-group-icon,
  body:not(.auth-locked) .report-section-icon,
  body:not(.auth-locked) .maintenance-card-icon,
  body:not(.auth-locked) .crew-card-icon,
  body:not(.auth-locked) .vendor-directory-icon,
  body:not(.auth-locked) .inventory-directory-icon,
  body:not(.auth-locked) .expense-card-icon {
    color: var(--mobile-ops-accent-strong);
    border-color: rgba(15, 141, 154, 0.15);
    background: linear-gradient(180deg, rgba(39, 191, 201, 0.13), rgba(255, 255, 255, 0.78));
  }
  body:not(.auth-locked) .workspace-mobile-context {
    padding: 14px;
    border-radius: var(--mobile-ops-radius);
  }
  body:not(.auth-locked) .workspace-mobile-context-copy h2,
  body:not(.auth-locked) .mobile-overview-topline .card-title,
  body:not(.auth-locked) .mobile-vessel-hero-title h3,
  body:not(.auth-locked) .section-heading h2,
  body:not(.auth-locked) .app-screen-header-main h2,
  body:not(.auth-locked) .card-title,
  body:not(.auth-locked) .report-overview-card h3,
  body:not(.auth-locked) .report-list-heading h3 {
    color: var(--mobile-ops-text);
    letter-spacing: -0.03em;
  }
  body:not(.auth-locked) .workspace-mobile-context-copy .small-copy,
  body:not(.auth-locked) .mobile-overview-topline .small-copy,
  body:not(.auth-locked) .mobile-vessel-hero-title p,
  body:not(.auth-locked) .small-copy,
  body:not(.auth-locked) .app-screen-copy,
  body:not(.auth-locked) .app-screen-note,
  body:not(.auth-locked) .card-meta {
    color: var(--mobile-ops-muted);
  }
  body:not(.auth-locked) .eyebrow,
  body:not(.auth-locked) .metric-label,
  body:not(.auth-locked) .detail-label,
  body:not(.auth-locked) .workspace-mobile-context-copy .eyebrow {
    color: var(--mobile-ops-accent-strong);
  }
  body:not(.auth-locked) :is(
    .section-block,
    .weekly-report-section,
    .work-orders-section,
    .vessel-section,
    .maintenance-section,
    .crew-section,
    .vendors-section,
    .inventory-section,
    .expenses-section,
    [data-view-panel="voyage"]
  ) {
    width: 100%;
    min-width: 0;
    padding: 12px 12px calc(108px + var(--safe-area-bottom));
    color: var(--mobile-ops-text);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body:not(.auth-locked) :is(
    .mobile-overview-priority-item,
    .mobile-overview-section,
    .mobile-overview-action,
    .mobile-vessel-hero,
    .mobile-vessel-section,
    .mobile-vessel-fleet-switcher,
    .mobile-vessel-info-item,
    .mobile-vessel-level-item,
    .mobile-vessel-machinery-row,
    .mobile-vessel-empty-row,
    .mobile-vessel-quick-stats span,
    .report-overview-card,
    .report-list-shell,
    .work-order-week-card,
    .work-order-summary-card,
    .work-order-preview-shell,
    .work-order-preview-row,
    .work-order-detail-block,
    .work-order-link-section,
    .maintenance-surface,
    .maintenance-summary-card,
    .maintenance-focus-card,
    .maintenance-asset-card,
    .maintenance-card,
    .maintenance-history-entry,
    .crew-card,
    .crew-directory-item,
    .vendor-directory-item,
    .vendor-detail-card,
    .inventory-directory-item,
    .inventory-directory-metric,
    .expense-metric-card,
    .expense-visual-card,
    .expense-log-shell,
    .expense-log-card,
    .compact-disclosure-card,
    .detail-item,
    .empty-state
  ) {
    color: var(--mobile-ops-text);
    border: 1px solid var(--mobile-ops-line);
    border-radius: var(--mobile-ops-radius-small);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 253, 0.9)),
      radial-gradient(circle at 10% 0%, rgba(30, 176, 188, 0.06), transparent 34%);
    box-shadow: var(--mobile-ops-shadow-soft);
  }
  body:not(.auth-locked) :is(
    .mobile-overview-priority-item,
    .mobile-overview-section,
    .mobile-overview-action,
    .work-order-preview-row,
    .mobile-vessel-info-item,
    .mobile-vessel-level-item,
    .mobile-vessel-machinery-row,
    .crew-directory-item,
    .vendor-directory-item,
    .inventory-directory-item,
    .expense-log-card
  ) {
    min-height: 56px;
  }
  body:not(.auth-locked) :is(
    input,
    select,
    textarea,
    .app-screen-search,
    .work-order-queue-search-shell,
    .sort-shell select
  ) {
    color: var(--mobile-ops-text);
    border-color: var(--mobile-ops-line);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }
  body:not(.auth-locked) textarea {
    min-height: 112px;
    resize: vertical;
  }
  body:not(.auth-locked) .primary-button,
  body:not(.auth-locked) .workspace-mobile-primary-action {
    color: #ffffff;
    border-color: rgba(15, 141, 154, 0.26);
    background: linear-gradient(135deg, #23c6c8, #078497);
    box-shadow: 0 10px 24px rgba(7, 132, 151, 0.18);
  }
  body:not(.auth-locked) .text-button,
  body:not(.auth-locked) .report-action-button,
  body:not(.auth-locked) .filter-chip {
    color: var(--mobile-ops-text);
    border-color: var(--mobile-ops-line);
    background: rgba(255, 255, 255, 0.82);
  }
  body:not(.auth-locked) .filter-chip.active,
  body:not(.auth-locked) .mobile-vessel-chip.active {
    color: #ffffff;
    border-color: rgba(15, 141, 154, 0.2);
    background: linear-gradient(135deg, #22bfc6, #0b8698);
  }
  body:not(.auth-locked) .mobile-bottom-nav {
    padding-inline: 10px;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  body:not(.auth-locked) .mobile-bottom-nav-inner {
    width: min(430px, calc(100vw - 18px));
    min-height: 70px;
    border-color: rgba(13, 36, 56, 0.09);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 44px rgba(17, 38, 56, 0.18);
    backdrop-filter: blur(18px);
  }
  body:not(.auth-locked) .mobile-bottom-nav-item {
    color: var(--mobile-ops-muted);
    border-radius: 18px;
  }
  body:not(.auth-locked) .mobile-bottom-nav-item.active {
    color: #ffffff;
    background: linear-gradient(135deg, #22bfc6, #087e91);
    box-shadow: 0 8px 18px rgba(8, 126, 145, 0.18);
  }
  body:not(.auth-locked) .mobile-bottom-nav-item.active .mobile-bottom-nav-icon {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
  }
  body:not(.auth-locked) .mobile-bottom-nav-item > span:not(.mobile-bottom-nav-icon) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.05;
  }
body:not(.auth-locked).keyboard-open .mobile-bottom-nav,
body:not(.auth-locked).work-order-queue-open .mobile-bottom-nav,
body:not(.auth-locked).work-order-detail-open .mobile-bottom-nav,
body:not(.auth-locked).health-factor-detail-open .mobile-bottom-nav,
body:not(.auth-locked).vessel-tools-drawer-open .mobile-bottom-nav {
    transform: translateY(calc(100% + var(--safe-area-bottom) + 18px));
    opacity: 0;
    pointer-events: none;
  }
  body:not(.auth-locked) .mobile-shell-sheet-panel,
  body:not(.auth-locked) .work-order-queue-drawer,
  body:not(.auth-locked) .vessel-tools-drawer,
  body:not(.auth-locked) #access-modal .access-modal,
  body:not(.auth-locked) .account-sheet,
  body:not(.auth-locked) .billing-sheet,
  body:not(.auth-locked) .vendor-modal,
  body:not(.auth-locked) .inventory-modal,
  body:not(.auth-locked) .crew-detail-modal,
  body:not(.auth-locked) .crew-confirm-modal {
    color: var(--mobile-ops-text);
    border-color: var(--mobile-ops-line);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 253, 0.98)),
      radial-gradient(circle at 14% 0%, rgba(30, 176, 188, 0.08), transparent 34%);
    box-shadow: 0 24px 64px rgba(17, 38, 56, 0.22);
  }
  body:not(.auth-locked) .mobile-shell-sheet-panel,
  body:not(.auth-locked) .work-order-mobile-sheet-panel,
  body:not(.auth-locked) .mobile-record-sheet-panel,
  body:not(.auth-locked) .vessel-mobile-editor-sheet-panel {
    width: min(440px, calc(100vw - 16px));
    max-height: calc(var(--mobile-visual-height, 100dvh) - 12px);
    border-radius: 26px 26px 0 0;
    padding-bottom: calc(18px + var(--safe-area-bottom) + var(--mobile-keyboard-inset, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked) .work-order-queue-shell,
  body:not(.auth-locked) .vessel-tools-drawer-shell,
  body:not(.auth-locked) #access-modal.access-modal-shell {
    padding: max(6px, var(--safe-area-top)) 8px max(6px, var(--safe-area-bottom));
  }
  body:not(.auth-locked) .work-order-queue-drawer {
    width: min(460px, calc(100vw - 12px));
    height: calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top) - var(--safe-area-bottom) - 12px);
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top) - var(--safe-area-bottom) - 12px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    border-radius: 26px;
    overflow: hidden;
  }
  body:not(.auth-locked) .work-order-queue-drawer-header {
    position: sticky;
    top: 0;
    z-index: 3;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
    background: transparent;
  }
  body:not(.auth-locked) .work-order-queue-drawer-controls {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--mobile-ops-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
  }
  body:not(.auth-locked) .work-order-queue-drawer-controls .app-screen-filter-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
  }
  body:not(.auth-locked) .work-order-queue-drawer-controls .app-screen-filter-bar::-webkit-scrollbar {
    display: none;
  }
  body:not(.auth-locked) .work-order-queue-drawer .work-order-queue-list.report-list {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 2px calc(18px + var(--safe-area-bottom));
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked) .work-order-queue-drawer .sort-shell,
  body:not(.auth-locked) .work-order-queue-search-control {
    min-width: 0;
    width: 100%;
  }
  body:not(.auth-locked) .work-order-queue-search-shell input {
    min-height: 44px;
  }
  body:not(.auth-locked) .vessel-tools-drawer {
    width: min(460px, calc(100vw - 12px));
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top) - var(--safe-area-bottom) - 12px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 16px;
    border-radius: 26px;
    overflow: hidden;
  }
  body:not(.auth-locked) .vessel-tools-drawer-list {
    min-height: 0;
    overflow-y: auto;
    padding-bottom: calc(18px + var(--safe-area-bottom));
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked) .vessel-tools-menu,
  body:not(.auth-locked) .mobile-vessel-tools-list {
    display: grid;
    gap: 8px;
  }
  body:not(.auth-locked) .vessel-tools-menu-item,
  body:not(.auth-locked) .mobile-vessel-tool-row {
    min-height: 58px;
    color: var(--mobile-ops-text);
    border-color: var(--mobile-ops-line);
    background: rgba(255, 255, 255, 0.84);
  }
  body:not(.auth-locked) #access-modal .access-modal {
    width: min(460px, calc(100vw - 12px));
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top) - var(--safe-area-bottom) - 12px);
    padding: 16px 16px calc(92px + var(--safe-area-bottom) + var(--mobile-keyboard-inset, 0px));
    border-radius: 26px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked) #access-modal .access-modal-heading {
    margin: -16px -16px 12px;
    padding: 16px 54px 12px 16px;
    border-bottom: 1px solid var(--mobile-ops-line);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
  }
  body:not(.auth-locked) #access-modal .access-modal-nav {
    min-height: 44px;
    border-color: var(--mobile-ops-line);
    background: rgba(255, 255, 255, 0.82);
  }
  body:not(.auth-locked) #access-modal .access-role-guide {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  body:not(.auth-locked) #access-modal .access-role-card {
    min-height: 96px;
    padding: 10px;
  }
  body:not(.auth-locked) #access-modal .invite-vessel-mode-card,
  body:not(.auth-locked) #access-modal .access-vessel-chip,
  body:not(.auth-locked) #access-modal .invite-custom-access-panel,
  body:not(.auth-locked) #access-modal .invite-review-panel {
    border-color: var(--mobile-ops-line);
    background: rgba(255, 255, 255, 0.82);
  }
  body:not(.auth-locked) #access-modal .invite-review-panel > .form-actions {
    width: min(420px, calc(100vw - 24px));
    bottom: calc(var(--safe-area-bottom) + var(--mobile-keyboard-inset, 0px) + 12px);
  }
  body:not(.auth-locked) .notification-center {
    width: auto;
    max-height: min(86dvh, calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top) - var(--safe-area-bottom) - 14px));
    color: #10283a;
    border-color: rgba(15, 141, 154, 0.18);
    background:
      radial-gradient(circle at 12% 0%, rgba(35, 219, 209, 0.16), transparent 34%),
      linear-gradient(180deg, rgba(250, 254, 255, 0.98), rgba(238, 248, 250, 0.94));
    box-shadow: 0 -22px 60px rgba(8, 53, 68, 0.22);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked) .mobile-vessel-photo-wrap,
  body:not(.auth-locked) .mobile-vessel-photo {
    max-width: 100%;
    overflow: hidden;
  }
  body:not(.auth-locked) .mobile-vessel-photo {
    object-fit: cover;
  }
  body:not(.auth-locked) :is(.app-screen-toolbar, .vendor-toolbar, .work-order-week-actions, .section-heading-actions) {
    min-width: 0;
    max-width: 100%;
    gap: 8px;
  }
  body:not(.auth-locked) :is(.app-screen-toolbar, .vendor-toolbar, .section-heading-actions) {
    overflow-x: auto;
    scrollbar-width: none;
  }
  body:not(.auth-locked) :is(.app-screen-toolbar, .vendor-toolbar, .section-heading-actions)::-webkit-scrollbar {
    display: none;
  }
  body:not(.auth-locked) :is(.app-screen-toolbar, .vendor-toolbar, .section-heading-actions) > * {
    min-width: 0;
  }
  body:not(.auth-locked) table {
    max-width: 100%;
  }
  body:not(.auth-locked) .table-wrapper,
  body:not(.auth-locked) .report-table-shell {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
body:not(.auth-invite-mode) .auth-shell {
  width: 100%;
  max-width: 100vw;
  min-height: 100dvh;
  padding: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 74% 14%, rgba(60, 203, 203, 0.16), transparent 27%),
    radial-gradient(circle at 90% 86%, rgba(20, 103, 130, 0.1), transparent 34%),
    linear-gradient(135deg, #f8fcfd 0%, #eef7f9 48%, #ffffff 100%);
}
body:not(.auth-invite-mode) .auth-shell::before {
  opacity: 0.28;
  background:
    linear-gradient(rgba(12, 58, 82, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 58, 82, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.64) 46%, rgba(0, 0, 0, 0.42) 100%);
}
body:not(.auth-invite-mode) .auth-stage.auth-stage-split {
  width: 100%;
  max-width: 100vw;
  min-height: 100dvh;
  grid-template-columns: minmax(480px, 44vw) minmax(0, 1fr);
  align-items: stretch;
}
body:not(.auth-invite-mode) .auth-brand-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  flex-direction: column;
  padding: clamp(46px, 5vw, 78px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(2, 18, 31, 0.48), rgba(2, 18, 31, 0.88)),
    linear-gradient(120deg, rgba(2, 18, 31, 0.95), rgba(7, 82, 101, 0.58)),
    url("/public/assets/landing-yacht-dusk-bg.png") 62% center / cover no-repeat;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04), 22px 0 70px rgba(2, 24, 39, 0.16);
}
body:not(.auth-invite-mode) .auth-brand-panel::before {
  z-index: 0;
  background:
    radial-gradient(circle at 18% 14%, rgba(65, 226, 229, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(0, 18, 30, 0.02) 0%, rgba(0, 18, 30, 0.82) 100%);
}
body:not(.auth-invite-mode) .auth-brand-panel::after {
  z-index: 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(1, 14, 24, 0.94));
}
body:not(.auth-invite-mode) .auth-brand-panel > * {
  position: relative;
  z-index: 1;
}
body:not(.auth-invite-mode) .auth-brand-panel-lockup {
  margin-bottom: clamp(28px, 4.6vh, 48px);
}
body:not(.auth-invite-mode) .auth-brand-panel .auth-brand-logo-shell {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
}
body:not(.auth-invite-mode) .auth-brand-panel .auth-brand-lockup .brand-name {
  color: #ffffff;
  font-size: clamp(1.9rem, 2.1vw, 2.28rem);
}
body:not(.auth-invite-mode) .auth-brand-panel .auth-brand-lockup .brand-subtitle {
  color: rgba(83, 230, 234, 0.9);
  letter-spacing: 0.22em;
}
body:not(.auth-invite-mode) .auth-brand-panel-lede {
  max-width: 29rem;
  margin: 0;
  color: #ffffff;
  font-family: var(--body-font);
  font-size: clamp(2.65rem, 3.55vw, 4.1rem);
  font-weight: 820;
  letter-spacing: 0;
  line-height: 0.98;
}
body:not(.auth-invite-mode) .auth-brand-panel-lede strong {
  display: block;
  color: #4ce3e3;
}
body:not(.auth-invite-mode) .auth-brand-panel-copy {
  max-width: 28rem;
  margin: 14px 0 0;
  color: rgba(227, 242, 248, 0.86);
  font-size: clamp(1.04rem, 1.22vw, 1.2rem);
  line-height: 1.6;
}
body:not(.auth-invite-mode) .auth-benefit-list {
  grid-template-columns: 1fr;
  width: min(100%, 390px);
  gap: 8px;
  margin-top: clamp(12px, 2vh, 18px);
}
body:not(.auth-invite-mode) .auth-benefit-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  min-height: 62px;
  padding: 9px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}
body:not(.auth-invite-mode) .auth-benefit-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: #48dadd;
  background: rgba(8, 93, 115, 0.3);
  border: 1px solid rgba(78, 221, 224, 0.18);
}
body:not(.auth-invite-mode) .auth-benefit-item strong {
  color: #ffffff;
  font-size: 0.92rem;
}
body:not(.auth-invite-mode) .auth-benefit-item span {
  color: rgba(225, 242, 248, 0.74);
  font-size: 0.8rem;
}
body:not(.auth-invite-mode) .auth-brand-panel-footnote {
  margin-top: auto;
  color: rgba(235, 248, 251, 0.8);
}
body:not(.auth-invite-mode) .auth-experience.panel {
  align-self: center;
  justify-self: center;
  width: min(570px, calc(100% - 80px));
  box-sizing: border-box;
  max-height: calc(100dvh - 48px);
  margin: 0;
  padding: clamp(38px, 4vw, 52px);
  overflow-y: auto;
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(250, 254, 255, 0.92)),
    rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(17, 54, 76, 0.09);
  box-shadow:
    0 38px 96px rgba(16, 61, 82, 0.17),
    0 16px 42px rgba(14, 36, 56, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  scrollbar-width: thin;
}
body:not(.auth-invite-mode) .auth-card,
body:not(.auth-invite-mode) .auth-form,
body:not(.auth-invite-mode) .auth-form label,
body:not(.auth-invite-mode) .auth-input-field,
body:not(.auth-invite-mode) .auth-invite-lookup,
body:not(.auth-invite-mode) .auth-footer-actions {
  min-width: 0;
  max-width: 100%;
}
body:not(.auth-invite-mode) .auth-card-security-badge {
  top: 36px;
  right: 36px;
  width: 48px;
  height: 48px;
  border-radius: 17px;
  color: #0b3449;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(17, 54, 76, 0.08);
  box-shadow: 0 16px 34px rgba(13, 36, 56, 0.08);
}
body:not(.auth-invite-mode) .auth-mode-switch {
  width: 100%;
  margin: 0 0 28px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(238, 247, 249, 0.76);
  border: 1px solid rgba(18, 55, 78, 0.08);
}
body:not(.auth-invite-mode) .auth-mode-switch[hidden] {
  display: none;
}
body:not(.auth-invite-mode) .auth-mode-button {
  min-height: 44px;
  border-radius: 999px;
  color: #617487;
  font-weight: 720;
}
body:not(.auth-invite-mode) .auth-mode-button.active {
  color: #102435;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(14, 36, 56, 0.08);
}
body:not(.auth-invite-mode) .auth-hero {
  padding-right: 58px;
}
body:not(.auth-invite-mode) .auth-card .eyebrow {
  margin-bottom: 4px;
  color: #078899;
  letter-spacing: 0.18em;
}
body:not(.auth-invite-mode) .auth-hero h2 {
  color: #102435;
  font-family: var(--body-font);
  font-size: clamp(3rem, 3.7vw, 3.82rem);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 0.98;
}
body:not(.auth-invite-mode) .auth-copy {
  max-width: 31rem;
  color: #5f7284;
  font-size: 1.04rem;
  line-height: 1.56;
}
body:not(.auth-invite-mode) .auth-form {
  margin-top: 28px;
  gap: 17px;
}
body:not(.auth-invite-mode) .auth-form label,
body:not(.auth-invite-mode) .auth-invite-lookup label {
  color: #102435;
  font-weight: 730;
}
body:not(.auth-invite-mode) .auth-form input,
body:not(.auth-invite-mode) .auth-form select,
body:not(.auth-invite-mode) .auth-invite-lookup input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 56px;
  border-radius: 16px;
  color: #102435;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(17, 54, 76, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 7px 18px rgba(17, 54, 76, 0.035);
}
body:not(.auth-invite-mode) .auth-form input:focus,
body:not(.auth-invite-mode) .auth-form select:focus,
body:not(.auth-invite-mode) .auth-invite-lookup input:focus {
  border-color: rgba(8, 136, 153, 0.48);
  box-shadow: 0 0 0 4px rgba(48, 197, 202, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
body:not(.auth-invite-mode) .auth-input-icon {
  left: 18px;
  color: #496d80;
}
body:not(.auth-invite-mode) .auth-input-field input {
  padding-left: 54px;
}
body:not(.auth-invite-mode) .auth-password-field input {
  padding-right: 58px;
}
body:not(.auth-invite-mode) .auth-password-toggle {
  right: 12px;
  width: 42px;
  height: 42px;
  min-height: 42px;
  border-radius: 14px;
  color: #496d80;
}
body:not(.auth-invite-mode) .auth-password-toggle:hover,
body:not(.auth-invite-mode) .auth-password-toggle.is-visible {
  color: #087d8a;
  background: rgba(33, 181, 190, 0.11);
}
body:not(.auth-invite-mode) .auth-form-inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  min-height: 40px;
}
body:not(.auth-invite-mode) .auth-form label.auth-remember-row,
body:not(.auth-invite-mode) .auth-remember-row {
  min-height: 36px;
  color: #627587;
  font-size: 0.94rem;
  font-weight: 690;
  cursor: pointer;
}
body:not(.auth-invite-mode) .auth-checkbox-control {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(17, 54, 76, 0.17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 7px 14px rgba(17, 54, 76, 0.04);
}
body:not(.auth-invite-mode) .auth-remember-row input:focus-visible + .auth-checkbox-control {
  outline: 3px solid rgba(48, 197, 202, 0.22);
  outline-offset: 2px;
}
body:not(.auth-invite-mode) .auth-remember-row input:checked + .auth-checkbox-control {
  background: linear-gradient(135deg, #37cec9, #07879a);
  border-color: rgba(7, 135, 154, 0.55);
  box-shadow: 0 9px 18px rgba(7, 135, 154, 0.2);
}
body:not(.auth-invite-mode) .auth-secondary-action {
  color: #087d8a;
  font-weight: 720;
}
body:not(.auth-invite-mode) #auth-submit {
  width: 100%;
  box-sizing: border-box;
  min-height: 58px;
  margin-top: 6px;
  border-radius: 17px;
  background: linear-gradient(135deg, #33cbc8, #047f94);
  box-shadow: 0 20px 42px rgba(4, 127, 148, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
body:not(.auth-invite-mode) .auth-divider {
  margin: 24px 0 16px;
}
body:not(.auth-invite-mode) .auth-footer-actions {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
body:not(.auth-invite-mode) .auth-footer-copy {
  color: #718294;
  font-size: 0.93rem;
}
body:not(.auth-invite-mode) .auth-toggle {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 15px;
  color: #0f3850;
  background: #ffffff;
  border: 1px solid rgba(17, 54, 76, 0.12);
  box-shadow: 0 10px 24px rgba(17, 54, 76, 0.06);
}
body:not(.auth-invite-mode) .auth-toggle:hover {
  color: #087d8a;
  border-color: rgba(8, 136, 153, 0.22);
  background: #f8fcfd;
}
body:not(.auth-invite-mode) .auth-support-line {
  margin-top: 18px;
  color: #728496;
}
@media (max-width: 1080px) {
  body:not(.auth-invite-mode) .auth-stage.auth-stage-split {
    grid-template-columns: minmax(360px, 41vw) minmax(0, 1fr);
  }
  body:not(.auth-invite-mode) .auth-brand-panel {
    padding: 40px 34px;
  }
  body:not(.auth-invite-mode) .auth-brand-panel-lede {
    font-size: clamp(2.55rem, 4vw, 3.7rem);
  }
  body:not(.auth-invite-mode) .auth-experience.panel {
    width: min(550px, calc(100% - 40px));
  }
}
@media (max-width: 860px) {
  body:not(.auth-invite-mode) {
    overflow-x: hidden;
  }
  body:not(.auth-invite-mode) .auth-shell {
    width: 100vw;
    max-width: 100vw;
    min-height: 100dvh;
    padding: 0;
  }
  body:not(.auth-invite-mode) .auth-stage.auth-stage-split {
    width: 100vw;
    max-width: 100vw;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    align-content: start;
  }
  body:not(.auth-invite-mode) .auth-brand-panel {
    height: auto;
    min-height: 0;
    padding: max(20px, var(--safe-area-top)) max(20px, var(--safe-area-right)) 18px max(20px, var(--safe-area-left));
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 48px rgba(2, 24, 39, 0.12);
  }
  body:not(.auth-invite-mode) .auth-brand-panel-lockup {
    margin-bottom: 12px;
  }
  body:not(.auth-invite-mode) .auth-brand-panel .auth-brand-logo-shell {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
  body:not(.auth-invite-mode) .auth-brand-panel .auth-brand-lockup .brand-name {
    font-size: 1.55rem;
  }
  body:not(.auth-invite-mode) .auth-brand-panel .auth-brand-lockup .brand-subtitle {
    font-size: 0.64rem;
  }
  body:not(.auth-invite-mode) .auth-brand-panel-lede {
    max-width: 22rem;
    font-size: clamp(1.62rem, 7.2vw, 2.22rem);
    line-height: 1.05;
  }
  body:not(.auth-invite-mode) .auth-brand-panel-copy,
  body:not(.auth-invite-mode) .auth-benefit-list,
  body:not(.auth-invite-mode) .auth-brand-panel-footnote {
    display: none;
  }
  body:not(.auth-invite-mode) .auth-experience.panel {
    width: min(560px, calc(100vw - 28px));
    max-height: none;
    margin: 16px auto max(18px, var(--safe-area-bottom));
    padding: 30px 22px 26px;
    overflow: visible;
    border-radius: 28px;
  }
  body:not(.auth-invite-mode) .auth-card-security-badge {
    display: none;
  }
  .auth-back-home {
    min-height: 32px;
    margin-bottom: 16px;
    padding: 0 11px 0 9px;
    font-size: 0.74rem;
  }
  body:not(.auth-invite-mode) .auth-hero {
    padding-right: 0;
  }
  body:not(.auth-invite-mode) .auth-hero h2 {
    font-size: clamp(2.45rem, 10vw, 3.12rem);
  }
  body:not(.auth-invite-mode) .auth-copy {
    font-size: 0.98rem;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 460px) {
  body:not(.auth-invite-mode) .auth-experience.panel {
    width: calc(100vw - 20px);
    margin-top: 12px;
    padding: 26px 18px 24px;
    border-radius: 26px;
  }
  body:not(.auth-invite-mode) .auth-mode-switch {
    margin-bottom: 22px;
  }
  body:not(.auth-invite-mode) .auth-mode-button {
    min-height: 42px;
    min-width: 0;
    padding: 0 8px;
    font-size: 0.84rem;
    white-space: nowrap;
  }
  body:not(.auth-invite-mode) .auth-form {
    gap: 15px;
  }
  body:not(.auth-invite-mode) .auth-form input,
  body:not(.auth-invite-mode) .auth-form select,
  body:not(.auth-invite-mode) .auth-invite-lookup input {
    min-height: 54px;
    border-radius: 15px;
  }
  body:not(.auth-invite-mode) .auth-form-inline-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  body:not(.auth-invite-mode) .auth-secondary-action {
    align-self: flex-start;
  }
  body:not(.auth-invite-mode) #auth-submit {
    min-height: 56px;
  }
}
@media (min-width: 861px) and (max-height: 820px) {
  body:not(.auth-invite-mode) .auth-brand-panel {
    padding: 34px 44px;
  }
  body:not(.auth-invite-mode) .auth-brand-panel-lockup {
    margin-bottom: clamp(24px, 5vh, 42px);
  }
  body:not(.auth-invite-mode) .auth-brand-panel .auth-brand-logo-shell {
    width: 66px;
    height: 66px;
    border-radius: 21px;
  }
  body:not(.auth-invite-mode) .auth-brand-panel-lede {
    font-size: clamp(2.46rem, 3.55vw, 3.65rem);
  }
  body:not(.auth-invite-mode) .auth-brand-panel-copy {
    max-width: 25rem;
    margin-top: 16px;
    font-size: 0.98rem;
    line-height: 1.52;
  }
  body:not(.auth-invite-mode) .auth-benefit-list {
    gap: 10px;
    margin-top: 14px;
  }
  body:not(.auth-invite-mode) .auth-benefit-item {
    min-height: 58px;
    padding: 9px 11px;
  }
  body:not(.auth-invite-mode) .auth-benefit-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  body:not(.auth-invite-mode) .auth-brand-panel-footnote {
    padding-top: 12px;
    font-size: 0.82rem;
  }
  body:not(.auth-invite-mode) .auth-experience.panel {
    max-height: calc(100dvh - 28px);
    padding: 28px 42px;
  }
  body:not(.auth-invite-mode) .auth-card-security-badge {
    top: 24px;
    right: 30px;
  }
  body:not(.auth-invite-mode) .auth-mode-switch {
    margin-bottom: 22px;
  }
  body:not(.auth-invite-mode) .auth-hero h2 {
    font-size: clamp(2.62rem, 3.2vw, 3.1rem);
  }
  body:not(.auth-invite-mode) .auth-copy {
    margin-top: 10px;
    font-size: 0.96rem;
  }
  body:not(.auth-invite-mode) .auth-form {
    margin-top: 22px;
    gap: 13px;
  }
  body:not(.auth-invite-mode) .auth-form input,
  body:not(.auth-invite-mode) .auth-form select,
  body:not(.auth-invite-mode) .auth-invite-lookup input {
    min-height: 52px;
  }
  body:not(.auth-invite-mode) #auth-submit {
    min-height: 54px;
  }
  body:not(.auth-invite-mode) .auth-divider {
    margin: 16px 0 10px;
  }
}
@media (min-width: 861px) {
  body:not(.auth-invite-mode) .auth-shell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }
  body:not(.auth-invite-mode) .auth-stage.auth-stage-split {
    height: 100dvh;
    min-height: 100dvh;
  }
  body:not(.auth-invite-mode) .auth-brand-panel {
    height: 100dvh;
    min-height: 100dvh;
    padding:
      clamp(28px, 3.2vw, 52px)
      clamp(42px, 4.4vw, 68px)
      clamp(24px, 3vh, 40px);
  }
  body:not(.auth-invite-mode) .auth-brand-panel-lockup {
    margin-bottom: clamp(18px, 2.8vh, 32px);
  }
  body:not(.auth-invite-mode) .auth-brand-panel .auth-brand-logo-shell {
    width: clamp(62px, 4.4vw, 72px);
    height: clamp(62px, 4.4vw, 72px);
    border-radius: clamp(19px, 1.5vw, 23px);
  }
  body:not(.auth-invite-mode) .auth-brand-panel .auth-brand-lockup .brand-name {
    font-size: clamp(1.75rem, 1.85vw, 2.12rem);
  }
  body:not(.auth-invite-mode) .auth-brand-panel-lede {
    max-width: 27rem;
    font-size: clamp(2.32rem, 3vw, 3.46rem);
    line-height: 0.98;
  }
  body:not(.auth-invite-mode) .auth-brand-panel-copy {
    max-width: 26rem;
    margin-top: 10px;
    font-size: clamp(0.98rem, 1.05vw, 1.08rem);
    line-height: 1.42;
  }
  body:not(.auth-invite-mode) .auth-benefit-list {
    width: min(100%, 390px);
    gap: 8px;
    margin-top: clamp(10px, 1.4vh, 14px);
  }
  body:not(.auth-invite-mode) .auth-benefit-item {
    grid-template-columns: 40px 1fr;
    min-height: 55px;
    padding: 8px 11px;
    border-radius: 16px;
  }
  body:not(.auth-invite-mode) .auth-benefit-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  body:not(.auth-invite-mode) .auth-benefit-item strong {
    font-size: 0.88rem;
  }
  body:not(.auth-invite-mode) .auth-benefit-item span {
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1.25;
  }
  body:not(.auth-invite-mode) .auth-brand-panel-footnote {
    padding-top: 10px;
    font-size: 0.8rem;
    line-height: 1.3;
  }
  body:not(.auth-invite-mode) .auth-experience.panel {
    max-height: calc(100dvh - 24px);
    padding: clamp(24px, 2.6vw, 40px);
  }
}
body.auth-locked:not(.auth-invite-mode) .auth-shell {
  background:
    linear-gradient(90deg, rgba(2, 10, 18, 0.86) 0%, rgba(4, 22, 34, 0.66) 48%, rgba(1, 50, 60, 0.5) 100%),
    url("/public/assets/landing-yacht-dusk-bg.png") center / cover no-repeat;
}
body.auth-locked:not(.auth-invite-mode) .auth-shell::before {
  opacity: 0.22;
  background:
    radial-gradient(circle at 22% 18%, rgba(55, 218, 222, 0.18), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(28, 190, 193, 0.14), transparent 30%);
  mask-image: none;
}
body.auth-locked:not(.auth-invite-mode) .auth-stage.auth-stage-split {
  grid-template-columns: minmax(430px, 47vw) minmax(520px, 1fr);
}
body.auth-locked:not(.auth-invite-mode) .auth-brand-panel {
  background:
    linear-gradient(90deg, rgba(1, 11, 21, 0.82) 0%, rgba(2, 18, 29, 0.62) 70%, rgba(2, 18, 29, 0.24) 100%);
  border-right: 0;
  box-shadow: none;
}
body.auth-locked:not(.auth-invite-mode) .auth-brand-panel::before {
  background:
    radial-gradient(circle at 16% 18%, rgba(58, 230, 232, 0.2), transparent 30%),
    linear-gradient(180deg, rgba(1, 11, 20, 0.05), rgba(1, 11, 20, 0.72));
}
body.auth-locked:not(.auth-invite-mode) .auth-brand-panel::after {
  background: linear-gradient(180deg, transparent, rgba(1, 10, 18, 0.72));
}
body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-lede {
  max-width: min(36rem, 100%);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.95rem, 3.55vw, 4.32rem);
  font-weight: 700;
  line-height: 0.98;
}
body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-lede strong {
  display: inline;
  color: #43e6e8;
}
body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-copy {
  max-width: 31rem;
  margin: clamp(14px, 1.9vh, 22px) 0 0;
  color: rgba(235, 248, 252, 0.88);
  font-size: clamp(1.02rem, 1.28vw, 1.24rem);
}
body.auth-locked:not(.auth-invite-mode) .auth-benefit-list {
  width: min(100%, 430px);
  gap: clamp(10px, 1.3vh, 14px);
  margin-top: clamp(22px, 2.8vh, 32px);
}
body.auth-locked:not(.auth-invite-mode) .auth-benefit-item {
  grid-template-columns: clamp(56px, 3.8vw, 64px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 1.2vw, 18px);
  min-height: clamp(78px, 7.2vh, 88px);
  padding: clamp(12px, 1.5vh, 14px) clamp(15px, 1.4vw, 18px);
  border-radius: 20px;
  background: rgba(3, 23, 36, 0.36);
  border: 1px solid rgba(61, 222, 224, 0.22);
}
body.auth-locked:not(.auth-invite-mode) .auth-benefit-icon {
  width: clamp(56px, 3.8vw, 64px);
  height: clamp(56px, 3.8vw, 64px);
  border-radius: 999px;
  background: rgba(13, 139, 153, 0.18);
  border-color: rgba(65, 230, 232, 0.42);
  box-shadow:
    0 0 0 1px rgba(65, 230, 232, 0.16),
    0 14px 30px rgba(0, 180, 190, 0.12);
}
body.auth-locked:not(.auth-invite-mode) .auth-benefit-icon svg,
body.auth-locked:not(.auth-invite-mode) .auth-trust-icon svg,
body.auth-locked:not(.auth-invite-mode) .auth-selected-pill svg,
body.auth-locked:not(.auth-invite-mode) .auth-selected-plan-icon svg,
body.auth-locked:not(.auth-invite-mode) .auth-plan-summary-item svg,
body.auth-locked:not(.auth-invite-mode) .auth-plan-feature-preview svg,
body.auth-locked:not(.auth-invite-mode) .auth-password-rules svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.auth-locked:not(.auth-invite-mode) .auth-benefit-icon svg,
body.auth-locked:not(.auth-invite-mode) .auth-trust-icon svg {
  width: clamp(24px, 1.8vw, 30px);
  height: clamp(24px, 1.8vw, 30px);
}
body.auth-locked:not(.auth-invite-mode) .auth-benefit-item strong {
  font-size: 0.98rem;
}
body.auth-locked:not(.auth-invite-mode) .auth-benefit-item span {
  font-size: 0.86rem;
  line-height: 1.42;
}
body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-footnote {
  display: grid;
  grid-template-columns: clamp(52px, 3.4vw, 60px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 1.2vw, 18px);
  width: min(100%, 430px);
  margin-top: clamp(18px, 2.6vh, 28px);
  padding: 14px 16px;
  border-radius: 20px;
  color: #ffffff;
  background: rgba(3, 23, 36, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.auth-locked:not(.auth-invite-mode) .auth-trust-icon {
  display: grid;
  width: clamp(52px, 3.4vw, 60px);
  height: clamp(52px, 3.4vw, 60px);
  place-items: center;
  border-radius: 999px;
  color: #41e4e6;
  background: rgba(5, 73, 88, 0.36);
  border: 1px solid rgba(65, 230, 232, 0.34);
}
body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-footnote strong,
body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-footnote span {
  display: block;
}
body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-footnote span {
  color: rgba(229, 246, 250, 0.75);
  font-size: 0.88rem;
}
body.auth-locked:not(.auth-invite-mode) .auth-experience.panel {
  width: min(660px, calc(100% - 48px));
  max-height: calc(100dvh - 16px);
  padding: clamp(22px, 2.5vw, 32px);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 253, 255, 0.94)),
    rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.86);
  box-shadow:
    0 30px 90px rgba(0, 13, 25, 0.32),
    0 14px 34px rgba(0, 36, 48, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
body.auth-signup-plan-mode .auth-card-brand,
body.auth-signup-plan-mode .auth-card-security-badge,
body.auth-signup-plan-mode .auth-mode-switch {
  display: none;
}
body.auth-signup-plan-mode .auth-selected-plan {
  display: grid;
  gap: clamp(9px, 1.35vh, 14px);
}
body.auth-signup-plan-mode .auth-selected-plan[hidden] {
  display: none;
}
body.auth-signup-plan-mode .auth-selected-plan-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.auth-signup-plan-mode .auth-selected-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #164254;
  background: rgba(223, 249, 251, 0.9);
  border: 1px solid rgba(12, 134, 152, 0.16);
  font-size: 0.72rem;
  font-weight: 830;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.auth-signup-plan-mode .auth-plan-selector {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(235, 246, 248, 0.92);
  border: 1px solid rgba(17, 54, 76, 0.08);
}
body.auth-signup-plan-mode .auth-plan-switch {
  min-height: 32px;
  min-width: 0;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  color: #617487;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
}
body.auth-signup-plan-mode .auth-plan-switch.active {
  color: #09283a;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(17, 54, 76, 0.1);
}
body.auth-signup-plan-mode .auth-selected-plan-hero {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
}
body.auth-signup-plan-mode .auth-selected-plan-icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 999px;
  color: #08a9b5;
  background: linear-gradient(135deg, rgba(215, 250, 250, 0.95), rgba(228, 247, 249, 0.74));
  border: 1px solid rgba(12, 174, 184, 0.18);
}
body.auth-signup-plan-premium .auth-selected-plan-icon {
  color: #b88932;
  background: linear-gradient(135deg, rgba(255, 244, 215, 0.94), rgba(225, 251, 251, 0.72));
}
body.auth-signup-plan-mode .auth-selected-plan-icon svg {
  width: 31px;
  height: 31px;
  stroke-width: 1.65;
}
body.auth-signup-plan-mode .auth-selected-plan-heading h2 {
  margin: 0;
  color: #0c2233;
  font-family: var(--body-font);
  font-size: clamp(2rem, 2.55vw, 2.82rem);
  line-height: 0.95;
  letter-spacing: 0;
}
body.auth-signup-plan-mode .auth-selected-plan-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 4px 0 0;
  color: #0b2233;
}
body.auth-signup-plan-mode .auth-selected-plan-price strong {
  color: #07aeb8;
  font-size: clamp(1.45rem, 1.8vw, 2rem);
  line-height: 1;
}
body.auth-signup-plan-premium .auth-selected-plan-price strong {
  color: #b88932;
}
body.auth-signup-plan-mode .auth-selected-plan-description {
  margin: 0;
  padding-top: 8px;
  color: #496174;
  border-top: 1px solid rgba(17, 54, 76, 0.1);
  font-size: 0.93rem;
  line-height: 1.36;
}
body.auth-signup-plan-mode .auth-plan-summary-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(17, 54, 76, 0.11);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
}
body.auth-signup-plan-mode .auth-plan-summary-item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 9px;
  color: #102435;
  font-size: 0.82rem;
}
body.auth-signup-plan-mode .auth-plan-summary-item + .auth-plan-summary-item {
  border-left: 1px solid rgba(17, 54, 76, 0.1);
}
body.auth-signup-plan-mode .auth-plan-summary-item span {
  display: inline-grid;
  flex: 0 0 auto;
  color: #08a9b5;
}
body.auth-signup-plan-mode .auth-plan-summary-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
body.auth-signup-plan-mode .auth-next-step-copy {
  margin: -4px 0 0;
  color: #65788b;
  font-size: 0.8rem;
  line-height: 1.28;
}
body.auth-signup-plan-mode .auth-plan-feature-preview {
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(235, 247, 249, 0.68);
  border: 1px solid rgba(17, 54, 76, 0.08);
}
body.auth-signup-plan-mode .auth-feature-preview-label {
  display: block;
  margin-bottom: 7px;
  color: #087d8a;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.auth-signup-plan-mode .auth-plan-feature-preview ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.auth-signup-plan-mode .auth-plan-feature-preview li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: #20394b;
  font-size: 0.78rem;
  line-height: 1.22;
}
body.auth-signup-plan-mode .auth-plan-feature-preview li > span:first-child {
  display: inline-grid;
  flex: 0 0 auto;
  color: #0aa9b4;
}
body.auth-signup-plan-mode .auth-hero {
  padding-right: 0;
}
body.auth-signup-plan-mode .auth-card .eyebrow {
  display: none;
}
body.auth-signup-plan-mode .auth-hero h2 {
  margin-top: clamp(10px, 1.4vh, 14px);
  color: #0c2233;
  font-family: var(--body-font);
  font-size: clamp(1rem, 1.16vw, 1.16rem);
  font-weight: 850;
  line-height: 1.1;
}
body.auth-signup-plan-mode .auth-copy {
  max-width: none;
  margin-top: 6px;
  color: #5f7284;
  font-size: 0.88rem;
  line-height: 1.34;
}
body.auth-signup-plan-mode .auth-form {
  margin-top: clamp(10px, 1.3vh, 14px);
  gap: 9px;
}
body.auth-signup-plan-mode .auth-form label {
  gap: 7px;
  font-size: 0.9rem;
}
body.auth-signup-plan-mode .auth-form input,
body.auth-signup-plan-mode .auth-form select {
  min-height: 46px;
}
body.auth-signup-plan-mode .auth-password-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: -2px;
  color: #597084;
  font-size: 0.72rem;
}
body.auth-signup-plan-mode .auth-password-rules[hidden] {
  display: none;
}
body.auth-signup-plan-mode .auth-password-rules span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
body.auth-signup-plan-mode .auth-password-rules svg {
  flex: 0 0 auto;
  color: #08a9b5;
}
body.auth-signup-plan-mode #auth-submit {
  margin-top: 2px;
  min-height: 50px;
}
body.auth-signup-plan-mode .auth-terms-copy {
  margin: 0;
  color: #78899a;
  font-size: 0.72rem;
  line-height: 1.34;
  text-align: center;
}
body.auth-signup-plan-mode .auth-footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
body.auth-signup-plan-mode .auth-footer-copy {
  margin: 0;
  color: #66798b;
}
body.auth-signup-plan-mode .auth-toggle {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #42e1e3;
  background: transparent;
  box-shadow: none;
}
body.auth-signup-plan-mode .auth-support-line {
  display: none;
}
@media (min-width: 861px) and (max-height: 820px) {
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel {
    padding: 24px 42px 18px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-lockup {
    margin-bottom: 18px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel .auth-brand-logo-shell {
    width: 58px;
    height: 58px;
    border-radius: 19px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-lede {
    font-size: clamp(2.2rem, 2.95vw, 3.18rem);
  }
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-copy {
    margin-top: 12px;
    font-size: 0.94rem;
    line-height: 1.35;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-list {
    gap: 8px;
    margin-top: 14px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-item {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    min-height: 66px;
    padding: 8px 12px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-icon {
    width: 50px;
    height: 50px;
    border-radius: 999px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-icon svg,
  body.auth-locked:not(.auth-invite-mode) .auth-trust-icon svg {
    width: 24px;
    height: 24px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-item strong {
    font-size: 0.82rem;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-item span {
    font-size: 0.72rem;
    line-height: 1.2;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-footnote {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 12px;
    margin-top: 18px;
    padding: 10px 12px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-trust-icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-footnote strong {
    font-size: 0.82rem;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-footnote span {
    font-size: 0.72rem;
  }
  body.auth-signup-plan-mode .auth-selected-plan {
    gap: 10px;
  }
  body.auth-signup-plan-mode .auth-selected-plan-hero {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
  }
  body.auth-signup-plan-mode .auth-selected-plan-icon {
    width: 60px;
    height: 60px;
  }
  body.auth-signup-plan-mode .auth-selected-plan-icon svg {
    width: 30px;
    height: 30px;
  }
  body.auth-signup-plan-mode .auth-plan-feature-preview ul {
    gap: 5px 10px;
  }
  body.auth-signup-plan-mode .auth-experience.panel {
    max-height: 100dvh;
    padding: 12px 28px;
  }
  body.auth-signup-plan-mode .auth-selected-plan-description {
    padding-top: 6px;
  }
  body.auth-signup-plan-mode .auth-selected-plan {
    gap: 7px;
  }
  body.auth-signup-plan-mode .auth-plan-summary-item {
    padding: 8px;
  }
  body.auth-signup-plan-mode .auth-next-step-copy {
    font-size: 0.76rem;
  }
  body.auth-signup-plan-mode .auth-hero h2 {
    margin-top: 8px;
  }
  body.auth-signup-plan-mode .auth-form {
    margin-top: 8px;
    gap: 7px;
  }
}
@media (min-width: 1180px) and (max-height: 860px) {
  body.auth-signup-plan-mode .auth-plan-feature-preview {
    padding: 8px 10px;
  }
  body.auth-signup-plan-mode .auth-plan-feature-preview ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 7px;
  }
  body.auth-signup-plan-mode .auth-plan-feature-preview li {
    font-size: 0.68rem;
    line-height: 1.12;
  }
  body.auth-signup-plan-mode .auth-selected-plan-description,
  body.auth-signup-plan-mode .auth-copy {
    font-size: 0.84rem;
  }
  body.auth-signup-plan-mode .auth-next-step-copy,
  body.auth-signup-plan-mode .auth-terms-copy {
    font-size: 0.7rem;
  }
  body.auth-signup-plan-mode .auth-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 8px 12px;
  }
  body.auth-signup-plan-mode .auth-form > input[type="hidden"],
  body.auth-signup-plan-mode .auth-form .auth-form-inline-actions,
  body.auth-signup-plan-mode .auth-form #auth-submit,
  body.auth-signup-plan-mode .auth-form .auth-terms-copy {
    grid-column: 1 / -1;
  }
  body.auth-signup-plan-mode .auth-password-rules {
    grid-column: 1 / -1;
  }
  body.auth-signup-plan-mode .auth-form input,
  body.auth-signup-plan-mode .auth-form select {
    min-height: 44px;
  }
  body.auth-signup-plan-mode #auth-submit {
    min-height: 46px;
  }
}
@media (min-width: 861px) and (max-height: 700px) {
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-footnote {
    display: none;
  }
}
@media (max-width: 1080px) {
  body.auth-locked:not(.auth-invite-mode) .auth-stage.auth-stage-split {
    grid-template-columns: minmax(360px, 42vw) minmax(0, 1fr);
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-list {
    gap: 8px;
    margin-top: clamp(18px, 2.4vh, 24px);
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-item {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 12px;
    min-height: 72px;
    padding: 10px 12px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-icon {
    width: 48px;
    height: 48px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-footnote {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding: 10px 12px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-trust-icon {
    width: 46px;
    height: 46px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-icon svg,
  body.auth-locked:not(.auth-invite-mode) .auth-trust-icon svg {
    width: 23px;
    height: 23px;
  }
  body.auth-signup-plan-mode .auth-selected-plan-topline {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 860px) {
  body.auth-locked:not(.auth-invite-mode) .auth-stage.auth-stage-split {
    grid-template-columns: 1fr;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-experience.panel {
    order: 1;
    width: min(620px, calc(100vw - 24px));
    margin: 12px auto 14px;
    padding: 24px 18px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel {
    order: 2;
    background:
      linear-gradient(180deg, rgba(2, 18, 31, 0.2), rgba(2, 18, 31, 0.78));
  }
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-copy,
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-list,
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-footnote {
    display: grid;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-list {
    width: 100%;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-item {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    min-height: 64px;
    padding: 9px 12px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-icon {
    width: 46px;
    height: 46px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-brand-panel-footnote {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding: 10px 12px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-trust-icon {
    width: 44px;
    height: 44px;
  }
  body.auth-locked:not(.auth-invite-mode) .auth-benefit-icon svg,
  body.auth-locked:not(.auth-invite-mode) .auth-trust-icon svg {
    width: 22px;
    height: 22px;
  }
  body.auth-signup-plan-mode .auth-selected-plan-heading h2 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
  body.auth-signup-plan-mode .auth-plan-summary-row,
  body.auth-signup-plan-mode .auth-plan-feature-preview ul,
  body.auth-signup-plan-mode .auth-password-rules {
    grid-template-columns: 1fr;
  }
  body.auth-signup-plan-mode .auth-plan-summary-item {
    justify-content: flex-start;
  }
  body.auth-signup-plan-mode .auth-plan-summary-item + .auth-plan-summary-item {
    border-left: 0;
    border-top: 1px solid rgba(17, 54, 76, 0.1);
  }
}
@media (min-width: 761px) {
  @keyframes report-generating-spin {
    to {
      transform: rotate(360deg);
    }
  }
}
body:not(.auth-locked) .report-preview-drawer-shell {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 28px;
}
body:not(.auth-locked) .report-preview-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(11, 28, 42, 0.34);
  backdrop-filter: blur(14px);
  cursor: pointer;
}
body:not(.auth-locked) .report-preview-drawer {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100vw - 56px));
  max-height: min(760px, calc(100dvh - 56px));
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 26px;
  color: var(--ops-text, var(--ink));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.94)),
    radial-gradient(circle at 12% 0%, rgba(30, 176, 188, 0.08), transparent 34%);
  box-shadow: 0 28px 90px rgba(9, 33, 50, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  overflow: hidden;
}
body:not(.auth-locked) .report-preview-drawer-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
body:not(.auth-locked) .report-preview-drawer-header h3 {
  margin: 3px 0 0;
  color: var(--ops-text, var(--ink));
  font-family: var(--heading-font);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: 0;
}
body:not(.auth-locked) .report-preview-drawer-header .small-copy {
  max-width: 68ch;
  margin-top: 6px;
}
body:not(.auth-locked) .report-preview-drawer-close {
  min-height: 42px;
  border-radius: 14px;
}
body:not(.auth-locked) .report-preview-drawer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
body:not(.auth-locked) .report-preview-drawer-list {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  scrollbar-width: thin;
}
body:not(.auth-locked) .report-preview-drawer-list .weekly-log-board {
  min-width: 860px;
}
body:not(.auth-locked) .report-preview-drawer-list .expense-log-shell {
  margin-top: 14px;
}
@media (max-width: 760px) {
  body:not(.auth-locked) .report-preview-drawer-shell {
    place-items: stretch;
    padding: 0;
  }
  body:not(.auth-locked) .report-preview-drawer {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border-width: 0;
    padding: calc(16px + var(--safe-area-top, 0px)) 14px calc(18px + var(--safe-area-bottom, 0px));
  }
  body:not(.auth-locked) .report-preview-drawer-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.92));
  }
  body:not(.auth-locked) .report-preview-drawer-header h3 {
    font-size: clamp(1.28rem, 7vw, 1.72rem);
  }
  body:not(.auth-locked) .report-preview-drawer-list {
    padding-bottom: calc(18px + var(--safe-area-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked) .report-preview-drawer-list .weekly-log-board {
    min-width: 760px;
  }
}
@keyframes field-queue-shell-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes field-queue-workspace-enter {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.health-factor-detail-shell[hidden] {
  display: none;
}
.health-factor-detail-shell {
  --health-factor-padding-block: clamp(24px, 2.5vw, 32px);
  --health-factor-padding-inline: clamp(24px, 2.5vw, 32px);
  position: fixed;
  inset: 0;
  z-index: 1635;
  width: 100vw;
  height: 100vh;
  height: var(--visual-viewport-height, 100dvh);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(245, 251, 253, 0.86), rgba(231, 244, 248, 0.76)),
    radial-gradient(circle at 12% 0%, rgba(37, 196, 199, 0.16), transparent 32%),
    radial-gradient(circle at 100% 8%, rgba(89, 184, 148, 0.1), transparent 30%);
  backdrop-filter: blur(18px) saturate(1.08);
  animation: work-order-detail-shell-enter 180ms ease both;
}
.health-factor-detail-backdrop {
  position: fixed;
  inset: 0;
  border: 0;
  background: rgba(8, 28, 42, 0.22);
  backdrop-filter: blur(18px) saturate(1.08);
}
.health-factor-detail-content {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  height: var(--visual-viewport-height, 100dvh);
  max-width: none;
  min-height: 0;
  display: grid;
  pointer-events: none;
}
.health-factor-detail-card {
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  color: var(--ops-text, #102b3d);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 251, 253, 0.9)),
    radial-gradient(circle at 0% 0%, rgba(37, 196, 199, 0.12), transparent 30%),
    radial-gradient(circle at 100% 12%, rgba(89, 184, 148, 0.1), transparent 32%);
  box-shadow: none;
  animation: work-order-detail-workspace-enter 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  pointer-events: auto;
}
.health-factor-detail-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding:
    var(--health-factor-padding-block)
    max(var(--health-factor-padding-inline), var(--safe-area-right))
    var(--health-factor-padding-block)
    max(var(--health-factor-padding-inline), var(--safe-area-left));
  border-bottom: 1px solid var(--ops-border, rgba(13, 36, 56, 0.08));
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.04);
}
.health-factor-detail-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.health-factor-detail-title-row > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.health-factor-detail-title-row h3 {
  max-width: min(980px, 58vw);
  margin: 0;
  overflow: hidden;
  color: var(--ops-text, #102b3d);
  font-family: var(--heading-font);
  font-size: clamp(1.8rem, 2.6vw, 3rem);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-factor-detail-title-row .small-copy {
  max-width: 74ch;
  margin: 0;
}
.health-factor-detail-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  color: var(--ops-red, #c9584b);
  border: 1px solid rgba(201, 88, 75, 0.18);
  border-radius: 20px;
  background: rgba(201, 88, 75, 0.1);
  font-size: 1.1rem;
  font-weight: 950;
}
.health-factor-detail-icon[data-tone="positive"],
.health-factor-detail-icon[data-tone="stable"],
.health-factor-detail-icon[data-tone="healthy"] {
  color: var(--ops-accent-strong, #0f8d9a);
  border-color: rgba(15, 141, 154, 0.16);
  background: rgba(30, 176, 188, 0.12);
}
.health-factor-detail-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.health-factor-impact-pill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  color: var(--ops-red, #c9584b);
  border: 1px solid rgba(201, 88, 75, 0.16);
  border-radius: 999px;
  background: rgba(201, 88, 75, 0.08);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}
.health-factor-impact-pill[data-factor-type="positive"] {
  color: var(--ops-accent-strong, #0f8d9a);
  border-color: rgba(15, 141, 154, 0.16);
  background: rgba(30, 176, 188, 0.1);
}
.health-factor-detail-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.42fr) minmax(0, 0.58fr);
  align-content: start;
  gap: clamp(18px, 2vw, 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding:
    var(--health-factor-padding-block)
    max(var(--health-factor-padding-inline), var(--safe-area-right))
    var(--health-factor-padding-block)
    max(var(--health-factor-padding-inline), var(--safe-area-left));
  -webkit-overflow-scrolling: touch;
}
.health-factor-summary-card,
.health-factor-records-card,
.health-factor-record-row,
.health-factor-meta-item {
  border: 1px solid var(--ops-border, rgba(13, 36, 56, 0.08));
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 14px 34px rgba(17, 38, 56, 0.07);
}
.health-factor-summary-card,
.health-factor-records-card {
  display: grid;
  align-content: start;
  gap: 18px;
  border-radius: 24px;
  padding: clamp(18px, 2vw, 26px);
}
.health-factor-summary-card h4,
.health-factor-records-head h4 {
  margin: 0;
  color: var(--ops-text, #102b3d);
  font-size: clamp(1.25rem, 1.7vw, 1.7rem);
  letter-spacing: -0.02em;
}
.health-factor-summary-card p {
  margin: 8px 0 0;
  color: var(--ops-muted, rgba(49, 73, 90, 0.72));
  line-height: 1.55;
}
.health-factor-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.health-factor-meta-item {
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 18px;
}
.health-factor-meta-item small {
  color: var(--ops-muted, rgba(49, 73, 90, 0.72));
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.health-factor-meta-item strong {
  color: var(--ops-text, #102b3d);
  font-size: 0.95rem;
  line-height: 1.2;
}
.health-factor-records-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}
.health-factor-record-list {
  display: grid;
  gap: 10px;
}
.health-factor-record-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--ops-text, #102b3d);
  border-radius: 18px;
  text-align: left;
}
button.health-factor-record-row {
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
button.health-factor-record-row:hover,
button.health-factor-record-row:focus-visible {
  border-color: rgba(15, 141, 154, 0.2);
  box-shadow: 0 18px 34px rgba(15, 141, 154, 0.1);
  transform: translateY(-1px);
  outline: none;
}
.health-factor-record-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.health-factor-record-main strong {
  overflow: hidden;
  color: var(--ops-text, #102b3d);
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-factor-record-main small {
  overflow: hidden;
  color: var(--ops-muted, rgba(49, 73, 90, 0.72));
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-factor-record-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.health-factor-record-tags span,
.health-factor-record-impact {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  color: var(--ops-accent-strong, #0f8d9a);
  border: 1px solid rgba(15, 141, 154, 0.12);
  border-radius: 999px;
  background: rgba(30, 176, 188, 0.08);
  font-size: 0.68rem;
  font-weight: 820;
}
.health-factor-record-side {
  display: grid;
  justify-items: end;
  gap: 5px;
}
.health-factor-record-side time {
  color: var(--ops-muted, rgba(49, 73, 90, 0.72));
  font-size: 0.72rem;
  font-weight: 760;
  white-space: nowrap;
}
.health-factor-record-chevron {
  color: rgba(82, 104, 119, 0.58);
  font-size: 1.3rem;
}
.health-factor-record-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 11px;
  color: #0f7180;
  border: 1px solid rgba(15, 141, 154, 0.16);
  border-radius: 999px;
  background: rgba(230, 250, 252, 0.92);
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .health-factor-detail-shell {
    --health-factor-padding-block: 20px;
    --health-factor-padding-inline: 20px;
  }
  .health-factor-detail-body {
    grid-template-columns: 1fr;
  }
  .health-factor-detail-title-row h3 {
    max-width: min(720px, 52vw);
  }
}
@media (max-width: 760px) {
  .health-factor-detail-shell {
    --health-factor-padding-block: 16px;
    --health-factor-padding-inline: 16px;
    height: var(--mobile-visual-height, 100dvh);
    max-height: var(--mobile-visual-height, 100dvh);
  }
  .health-factor-detail-content,
  .health-factor-detail-card {
    height: var(--mobile-visual-height, 100dvh);
    max-height: var(--mobile-visual-height, 100dvh);
  }
  .health-factor-detail-header {
    align-items: stretch;
    flex-direction: column;
    padding:
      max(16px, var(--safe-area-top))
      16px
      16px
      16px;
  }
  .health-factor-detail-title-row {
    align-items: flex-start;
  }
  .health-factor-detail-title-row h3 {
    max-width: none;
    font-size: clamp(1.45rem, 8vw, 2rem);
    white-space: normal;
  }
  .health-factor-detail-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
  .health-factor-detail-header-actions {
    width: 100%;
    justify-content: stretch;
  }
  .health-factor-detail-header-actions > button,
  .health-factor-impact-pill {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .health-factor-detail-body {
    gap: 14px;
    padding:
      16px
      16px
      calc(24px + var(--safe-area-bottom))
      16px;
  }
  .health-factor-meta-grid {
    grid-template-columns: 1fr;
  }
  .health-factor-record-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .health-factor-record-side {
    justify-items: start;
  }
  .health-factor-record-chevron {
    display: none;
  }
  .health-factor-record-link {
    justify-self: start;
  }
}
/* App shell scroll and viewport contracts moved to app-shell.css. */
body:not(.auth-locked) .work-order-detail-shell {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1720;
  width: 100vw;
  height: 100vh;
  height: var(--visual-viewport-height, 100dvh);
  max-height: var(--visual-viewport-height, 100dvh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: max(20px, var(--safe-area-top, 0px)) max(24px, var(--safe-area-right, 0px)) max(20px, var(--safe-area-bottom, 0px)) max(24px, var(--safe-area-left, 0px));
  overscroll-behavior: none;
}
body:not(.auth-locked) .work-order-detail-content {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100vw - 48px));
  height: auto;
  max-height: calc(var(--visual-viewport-height, 100dvh) - 40px);
  min-height: 0;
  display: grid;
  overflow: hidden;
}
body:not(.auth-locked) .work-order-detail-card {
  width: 100%;
  height: auto;
  max-height: calc(var(--visual-viewport-height, 100dvh) - 40px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(13, 36, 56, 0.12);
  border-radius: 28px;
  box-shadow: 0 34px 80px rgba(8, 28, 42, 0.22);
}
body:not(.auth-locked) .work-order-detail-header,
body:not(.auth-locked) .work-order-detail-actions {
  position: relative;
  z-index: 2;
}
body:not(.auth-locked) .work-order-detail-body {
  min-height: 0;
  max-height: calc(var(--visual-viewport-height, 100dvh) - 208px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 760px) {
  body:not(.auth-locked) .work-order-detail-shell {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    height: var(--mobile-visual-height, var(--visual-viewport-height, 100dvh));
    max-height: var(--mobile-visual-height, var(--visual-viewport-height, 100dvh));
  }
  body:not(.auth-locked) .work-order-detail-content,
  body:not(.auth-locked) .work-order-detail-card {
    width: 100vw;
    height: var(--mobile-visual-height, var(--visual-viewport-height, 100dvh));
    max-height: var(--mobile-visual-height, var(--visual-viewport-height, 100dvh));
    border-radius: 0;
  }
  body:not(.auth-locked) .work-order-detail-body {
    max-height: none;
  }
}
body:not(.auth-locked).work-order-image-viewer-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body:not(.auth-locked) .work-order-detail-header {
  display: grid;
  align-items: stretch;
  gap: 14px;
}
body:not(.auth-locked) .work-order-detail-nav-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
body:not(.auth-locked) .work-order-detail-nav-row > strong {
  min-width: 0;
  color: var(--ops-text, #102b3d);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body:not(.auth-locked) .work-order-detail-nav-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
body:not(.auth-locked) .work-order-detail-icon-button,
body:not(.auth-locked) .work-order-image-viewer-control,
body:not(.auth-locked) .work-order-image-viewer-step {
  min-width: 40px;
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: var(--ops-text, #102b3d);
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 22px rgba(8, 28, 42, 0.08);
  cursor: pointer;
}
body:not(.auth-locked) .work-order-detail-icon-button svg,
body:not(.auth-locked) .work-order-image-viewer-control svg,
body:not(.auth-locked) .work-order-image-viewer-step svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body:not(.auth-locked) .work-order-detail-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}
body:not(.auth-locked) .work-order-detail-title-row h3 {
  max-width: none;
  font-size: clamp(1.6rem, 2.2vw, 2.35rem);
  line-height: 1.08;
  white-space: normal;
}
body:not(.auth-locked) .work-order-detail-title-row .small-copy {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:not(.auth-locked) .work-order-detail-header-status {
  align-self: start;
  justify-self: end;
  white-space: nowrap;
}
body:not(.auth-locked) .work-order-detail-overflow {
  position: relative;
}
body:not(.auth-locked) .work-order-detail-overflow .action-overflow-trigger {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}
body:not(.auth-locked) .work-order-detail-overflow .action-overflow-list {
  right: 0;
  left: auto;
  min-width: 190px;
}
body:not(.auth-locked) .work-order-detail-status-row {
  grid-column: 1;
}
body:not(.auth-locked) .work-order-detail-media-section {
  overflow: visible;
}
body:not(.auth-locked) .work-order-photo-gallery[data-work-order-photo-gallery] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  align-items: stretch;
  gap: 10px;
  margin-top: 0;
}
body:not(.auth-locked) .work-order-photo-gallery[data-work-order-photo-gallery].is-single {
  grid-template-columns: minmax(0, 1fr);
}
body:not(.auth-locked) .work-order-photo-gallery[data-work-order-photo-gallery] .work-order-photo-item {
  width: 100%;
  min-width: 0;
}
body:not(.auth-locked) .work-order-photo-gallery[data-work-order-photo-gallery] .work-order-photo-thumb {
  width: 100%;
  height: 100%;
  display: grid;
  border-radius: 16px;
}
body:not(.auth-locked) .work-order-photo-gallery[data-work-order-photo-gallery] .work-order-photo-thumb img,
body:not(.auth-locked) .work-order-photo-gallery[data-work-order-photo-gallery] .work-order-photo-thumb.is-unavailable {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
body:not(.auth-locked) .mobile-record-section .work-order-photo-gallery[data-work-order-photo-gallery] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
}
.work-order-image-viewer-shell[hidden] {
  display: none;
}
.work-order-image-viewer-shell {
  position: fixed;
  inset: 0;
  z-index: 2400;
  width: 100vw;
  height: 100vh;
  height: var(--visual-viewport-height, 100dvh);
  max-height: var(--visual-viewport-height, 100dvh);
  display: grid;
  overflow: hidden;
  background: rgba(3, 14, 24, 0.9);
  overscroll-behavior: contain;
}
.work-order-image-viewer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  background: rgba(3, 14, 24, 0.82);
  cursor: zoom-out;
}
.work-order-image-viewer {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: #f7fbfc;
}
.work-order-image-viewer-topbar {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding:
    calc(14px + var(--safe-area-top, 0px))
    max(18px, var(--safe-area-right, 0px))
    12px
    max(18px, var(--safe-area-left, 0px));
}
.work-order-image-viewer-control {
  color: #f7fbfc;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.work-order-image-viewer-control:not(.is-icon) {
  grid-auto-flow: column;
  gap: 8px;
  padding: 0 13px;
}
.work-order-image-viewer-control span,
.work-order-image-viewer-count {
  color: rgba(247, 251, 252, 0.86);
  font-size: 0.86rem;
  font-weight: 800;
}
.work-order-image-viewer-count {
  justify-self: center;
}
.work-order-image-viewer-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  gap: 12px;
  margin: 0;
  padding:
    14px
    max(72px, var(--safe-area-right, 0px))
    calc(28px + var(--safe-area-bottom, 0px))
    max(72px, var(--safe-area-left, 0px));
}
.work-order-image-viewer-stage img {
  max-width: min(100%, 1180px);
  max-height: calc(var(--visual-viewport-height, 100dvh) - 148px - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px));
  display: block;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}
.work-order-image-viewer-stage figcaption {
  max-width: min(860px, 100%);
  color: rgba(247, 251, 252, 0.72);
  font-size: 0.9rem;
  line-height: 1.3;
  text-align: center;
}
.work-order-image-viewer-step {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  color: #f7fbfc;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.work-order-image-viewer-step.is-prev {
  left: max(18px, var(--safe-area-left, 0px));
}
.work-order-image-viewer-step.is-next {
  right: max(18px, var(--safe-area-right, 0px));
}
@media (max-width: 760px) {
  body:not(.auth-locked) .work-order-detail-header {
    gap: 9px;
    padding:
      calc(8px + var(--safe-area-top, 0px))
      max(12px, var(--safe-area-right, 0px))
      10px
      max(12px, var(--safe-area-left, 0px));
  }
  body:not(.auth-locked) .work-order-detail-nav-row {
    min-height: 40px;
    gap: 10px;
  }
  body:not(.auth-locked) .work-order-detail-title-row {
    gap: 10px;
  }
  body:not(.auth-locked) .work-order-detail-title-row h3 {
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(1.12rem, 5.2vw, 1.38rem);
    line-height: 1.14;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body:not(.auth-locked) .work-order-detail-title-row .small-copy {
    font-size: 0.78rem;
    line-height: 1.25;
  }
  body:not(.auth-locked) .work-order-detail-header-status {
    font-size: 0.68rem;
    line-height: 1;
    padding: 6px 8px;
  }
  body:not(.auth-locked) .work-order-detail-icon-button,
  body:not(.auth-locked) .work-order-detail-overflow .action-overflow-trigger {
    min-width: 38px;
    min-height: 38px;
  }
  body:not(.auth-locked) .work-order-detail-overflow .action-overflow-trigger span:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  body:not(.auth-locked) .work-order-detail-body {
    grid-template-columns: 1fr;
    gap: 10px;
    padding:
      12px
      max(12px, var(--safe-area-right, 0px))
      calc(84px + var(--safe-area-bottom, 0px) + var(--mobile-keyboard-inset, 0px))
      max(12px, var(--safe-area-left, 0px));
  }
  body:not(.auth-locked) .work-order-detail-media-section,
  body:not(.auth-locked) .work-order-detail-status-row,
  body:not(.auth-locked) .work-order-detail-card .work-order-detail-grid,
  body:not(.auth-locked) .work-order-detail-card .work-order-meta-row,
  body:not(.auth-locked) .work-order-detail-readonly {
    grid-column: 1;
  }
  body:not(.auth-locked) .work-order-detail-media-section {
    grid-row: auto;
    min-height: 0;
    gap: 9px;
    padding: 12px;
    border-radius: 18px;
  }
  body:not(.auth-locked) .work-order-detail-section-heading {
    align-items: start;
    gap: 8px;
  }
  body:not(.auth-locked) .work-order-detail-status-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body:not(.auth-locked) .work-order-detail-meta-item {
    min-height: 46px;
    padding: 8px 10px;
    border-radius: 14px;
  }
  body:not(.auth-locked) .work-order-detail-meta-item small {
    font-size: 0.62rem;
  }
  body:not(.auth-locked) .work-order-detail-meta-item strong {
    font-size: 0.82rem;
  }
  body:not(.auth-locked) .work-order-detail-card .work-order-detail-grid {
    gap: 10px;
  }
  body:not(.auth-locked) .work-order-detail-card .work-order-detail-block {
    min-height: 0;
    padding: 12px;
    border-radius: 16px;
  }
  body:not(.auth-locked) .work-order-detail-card .work-order-photo-gallery[data-work-order-photo-gallery] {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
  }
  body:not(.auth-locked) .work-order-detail-card .work-order-photo-gallery[data-work-order-photo-gallery].is-single .work-order-photo-thumb img {
    aspect-ratio: 16 / 10;
  }
  body:not(.auth-locked) .work-order-detail-empty-media {
    min-height: 92px;
    border-radius: 16px;
    font-size: 0.84rem;
  }
  body:not(.auth-locked) .work-order-detail-actions {
    position: sticky;
    bottom: var(--mobile-keyboard-inset, 0px);
    z-index: 9;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    align-items: center;
    justify-content: stretch;
    gap: 8px;
    padding:
      8px
      max(12px, var(--safe-area-right, 0px))
      calc(8px + var(--safe-area-bottom, 0px))
      max(12px, var(--safe-area-left, 0px));
  }
  body:not(.auth-locked) .work-order-detail-actions > button,
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-detail-actions > button {
    width: auto;
    min-height: 42px;
    justify-content: center;
    padding-inline: 10px;
    font-size: 0.82rem;
    white-space: nowrap;
  }
  .work-order-image-viewer-shell {
    height: var(--mobile-visual-height, var(--visual-viewport-height, 100dvh));
    max-height: var(--mobile-visual-height, var(--visual-viewport-height, 100dvh));
  }
  .work-order-image-viewer-topbar {
    gap: 8px;
    padding:
      calc(10px + var(--safe-area-top, 0px))
      max(12px, var(--safe-area-right, 0px))
      8px
      max(12px, var(--safe-area-left, 0px));
  }
  .work-order-image-viewer-control,
  .work-order-image-viewer-step {
    min-width: 42px;
    min-height: 42px;
  }
  .work-order-image-viewer-control:not(.is-icon) span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .work-order-image-viewer-count {
    font-size: 0.8rem;
  }
  .work-order-image-viewer-stage {
    gap: 8px;
    padding:
      10px
      max(12px, var(--safe-area-right, 0px))
      calc(14px + var(--safe-area-bottom, 0px))
      max(12px, var(--safe-area-left, 0px));
  }
  .work-order-image-viewer-stage img {
    max-height: calc(var(--mobile-visual-height, var(--visual-viewport-height, 100dvh)) - 112px - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px));
    border-radius: 12px;
  }
  .work-order-image-viewer-stage figcaption {
    font-size: 0.78rem;
  }
  .work-order-image-viewer-step {
    top: auto;
    bottom: calc(18px + var(--safe-area-bottom, 0px));
    transform: none;
  }
}
body[data-active-view="vessel"]:not(.auth-locked) .vessel-document-category-card.is-locked .vessel-document-category-icon,
.vessel-document-upload-category.is-locked .vessel-document-category-icon {
  color: rgba(108, 249, 242, 0.9);
  border-color: rgba(83, 232, 225, 0.24);
  background:
    linear-gradient(180deg, rgba(28, 116, 126, 0.26), rgba(6, 32, 47, 0.56)),
    rgba(7, 32, 45, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 22px rgba(0, 0, 0, 0.16),
    0 0 18px rgba(52, 232, 224, 0.12);
}
body[data-active-view="vessel"]:not(.auth-locked) .vessel-document-thumbnail,
.vessel-document-thumbnail {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(30, 176, 188, 0.18);
  border-radius: 13px;
  color: #087f8c;
  background:
    linear-gradient(180deg, rgba(236, 254, 255, 0.96), rgba(218, 247, 250, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 8px 20px rgba(13, 36, 56, 0.06);
}
body[data-active-view="vessel"]:not(.auth-locked) .vessel-document-thumbnail.is-large,
.vessel-document-thumbnail.is-large {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}
body[data-active-view="vessel"]:not(.auth-locked) .vessel-document-thumbnail img,
.vessel-document-thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
body[data-active-view="vessel"]:not(.auth-locked) .vessel-document-thumbnail small,
.vessel-document-thumbnail small {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 4px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(8, 127, 140, 0.9);
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1;
}
body[data-active-view="vessel"]:not(.auth-locked) .vessel-document-thumbnail.is-pdf,
.vessel-document-thumbnail.is-pdf {
  color: #0a7b88;
  background:
    linear-gradient(180deg, rgba(244, 252, 253, 0.98), rgba(221, 247, 250, 0.86));
}
.vessel-document-upload-shell {
  position: fixed;
  inset: 0;
  z-index: 5600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);
  box-sizing: border-box;
}
.vessel-document-upload-shell[hidden] {
  display: none;
}
.vessel-document-upload-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    linear-gradient(180deg, rgba(231, 243, 247, 0.74), rgba(220, 235, 240, 0.68)),
    rgba(9, 28, 42, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: default;
}
.vessel-document-upload-content {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: calc(100dvh - 48px);
  display: flex;
  min-height: 0;
}
.vessel-document-upload-card {
  width: 100%;
  max-height: inherit;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 0%, rgba(30, 176, 188, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.94));
  box-shadow:
    0 32px 90px rgba(13, 36, 56, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  animation: vessel-document-modal-in 160ms ease-out;
}
@keyframes vessel-document-modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.vessel-document-upload-header,
.vessel-document-upload-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-color: rgba(13, 36, 56, 0.08);
}
.vessel-document-upload-header {
  border-bottom: 1px solid rgba(13, 36, 56, 0.08);
}
.vessel-document-upload-footer {
  border-top: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(250, 253, 254, 0.84);
}
.vessel-document-upload-header h2 {
  margin: 2px 0 0;
  color: var(--ops-text);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  line-height: 1.05;
}
.vessel-document-upload-header p {
  margin: 6px 0 0;
  color: var(--ops-muted);
  font-size: 0.92rem;
  font-weight: 700;
}
.vessel-document-upload-close {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(30, 176, 188, 0.22);
  border-radius: 999px;
  color: var(--ops-accent-strong);
  background: rgba(236, 254, 255, 0.88);
  font-weight: 850;
  cursor: pointer;
}
.vessel-document-upload-body {
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 24px;
  display: grid;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}
.vessel-document-upload-error {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(185, 77, 60, 0.18);
  border-radius: 16px;
  color: var(--ops-red);
  background: rgba(255, 245, 242, 0.92);
  font-weight: 800;
}
.vessel-document-upload-step {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 28px rgba(13, 36, 56, 0.05);
}
.vessel-document-upload-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vessel-document-upload-step-head > span {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  color: var(--ops-accent-strong);
  background: rgba(30, 176, 188, 0.12);
  font-weight: 900;
}
.vessel-document-upload-step-head h3,
.vessel-document-upload-step-head p {
  margin: 0;
}
.vessel-document-upload-step-head h3 {
  color: var(--ops-text);
  font-size: 0.98rem;
}
.vessel-document-upload-step-head p {
  color: var(--ops-muted);
  font-size: 0.82rem;
  font-weight: 750;
}
.vessel-document-upload-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.vessel-document-upload-category {
  min-width: 0;
  min-height: 118px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 18px;
  color: var(--ops-text);
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 252, 0.86));
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.vessel-document-upload-category:hover,
.vessel-document-upload-category.is-selected {
  transform: translateY(-1px);
  border-color: rgba(30, 176, 188, 0.34);
  box-shadow: 0 16px 32px rgba(30, 176, 188, 0.12);
}
.vessel-document-upload-category.is-locked {
  border-color: rgba(72, 220, 224, 0.24);
  color: rgba(235, 252, 253, 0.9);
  background:
    linear-gradient(145deg, rgba(11, 56, 68, 0.56), rgba(5, 23, 36, 0.5)),
    rgba(5, 24, 34, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 14px 34px rgba(0, 27, 39, 0.14);
}
.vessel-document-upload-category.is-locked:hover {
  transform: translateY(-2px);
  border-color: rgba(93, 239, 234, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 18px 38px rgba(0, 27, 39, 0.2),
    0 0 0 1px rgba(52, 232, 224, 0.08);
}
.vessel-document-upload-category.is-selected {
  background:
    linear-gradient(180deg, rgba(236, 254, 255, 0.98), rgba(224, 248, 250, 0.9));
}
.vessel-document-upload-category strong {
  font-size: 0.86rem;
  font-weight: 900;
}
.vessel-document-upload-category.is-locked strong {
  color: rgba(244, 254, 255, 0.96);
}
.vessel-document-upload-category small {
  color: var(--ops-muted);
  font-size: 0.72rem;
  line-height: 1.25;
  font-weight: 750;
}
.vessel-document-upload-category.is-locked small {
  color: rgba(192, 221, 226, 0.76);
}
.vessel-document-upload-dropzone {
  min-height: 132px;
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 20px;
  border: 1px dashed rgba(30, 176, 188, 0.34);
  border-radius: 18px;
  color: var(--ops-text);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(245, 253, 254, 0.96), rgba(255, 255, 255, 0.86));
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
}
.vessel-document-upload-dropzone:hover,
.vessel-document-upload-dropzone.is-dragover {
  transform: translateY(-1px);
  border-color: rgba(30, 176, 188, 0.58);
  background:
    linear-gradient(180deg, rgba(236, 254, 255, 0.98), rgba(226, 249, 251, 0.9));
  box-shadow: 0 18px 36px rgba(30, 176, 188, 0.14);
}
.vessel-document-upload-dropzone input,
.vessel-document-upload-file-card input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.vessel-document-upload-dropzone-icon {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(30, 176, 188, 0.2);
  border-radius: 16px;
  color: var(--ops-accent-strong);
  background: rgba(236, 254, 255, 0.9);
}
.vessel-document-upload-dropzone strong {
  font-size: 0.98rem;
}
.vessel-document-upload-dropzone small {
  color: var(--ops-muted);
  font-size: 0.8rem;
  font-weight: 750;
}
.vessel-document-upload-file-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(30, 176, 188, 0.18);
  border-radius: 18px;
  background: rgba(245, 253, 254, 0.92);
}
.vessel-document-upload-file-card.is-bulk {
  align-items: start;
}
.vessel-document-upload-preview,
.vessel-document-upload-bulk-count {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(30, 176, 188, 0.18);
  border-radius: 14px;
  color: var(--ops-accent-strong);
  background: rgba(236, 254, 255, 0.92);
  font-weight: 950;
}
.vessel-document-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vessel-document-upload-preview small {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 4px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(8, 127, 140, 0.9);
  font-size: 0.5rem;
  font-weight: 900;
  line-height: 1;
}
.vessel-document-upload-bulk-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}
.vessel-document-upload-bulk-list span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 240px;
  padding: 6px 8px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}
.vessel-document-upload-bulk-list .vessel-document-upload-preview {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}
.vessel-document-upload-bulk-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.74rem;
}
.vessel-document-upload-file-card strong,
.vessel-document-upload-file-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vessel-document-upload-file-card small {
  color: var(--ops-muted);
  font-size: 0.78rem;
  font-weight: 750;
}
.vessel-document-upload-change {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vessel-document-upload-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.vessel-document-upload-form-grid label {
  display: grid;
  gap: 7px;
  color: var(--ops-text);
  font-size: 0.78rem;
  font-weight: 850;
}
.vessel-document-upload-form-grid label > span {
  color: var(--ops-muted);
  font-weight: 750;
}
.vessel-document-upload-form-grid input,
.vessel-document-upload-form-grid select,
.vessel-document-upload-form-grid textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid rgba(13, 36, 56, 0.12);
  border-radius: 14px;
  padding: 0 12px;
  color: var(--ops-text);
  background: rgba(255, 255, 255, 0.88);
  font: inherit;
  font-weight: 750;
}
.vessel-document-upload-form-grid textarea {
  min-height: 96px;
  padding-block: 10px;
  resize: vertical;
}
.vessel-document-upload-notes {
  grid-column: 1 / -1;
}
.vessel-document-upload-footer .vessel-document-add-button {
  min-width: 174px;
}
.vessel-document-preview-card {
  width: min(1020px, calc(100vw - 32px));
}
.vessel-document-preview-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.vessel-document-preview-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 16px;
  padding: 20px 24px 24px;
  overflow: auto;
}
.vessel-document-preview-frame,
.vessel-document-preview-empty,
.vessel-document-preview-meta {
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 28px rgba(13, 36, 56, 0.05);
}
.vessel-document-preview-frame {
  min-height: min(56vh, 540px);
  overflow: hidden;
}
.vessel-document-preview-frame.is-image {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(245, 253, 254, 0.96), rgba(255, 255, 255, 0.86));
}
.vessel-document-preview-frame.is-image img {
  width: 100%;
  height: 100%;
  max-height: min(56vh, 540px);
  object-fit: contain;
}
.vessel-document-preview-frame.is-pdf iframe {
  width: 100%;
  height: min(56vh, 540px);
  border: 0;
  background: #fff;
}
.vessel-document-preview-empty {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 28px;
  color: var(--ops-muted);
  text-align: center;
}
.vessel-document-preview-empty > span {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(30, 176, 188, 0.2);
  border-radius: 20px;
  color: var(--ops-accent-strong);
  background: rgba(236, 254, 255, 0.9);
}
.vessel-document-preview-empty strong {
  color: var(--ops-text);
}
.vessel-document-preview-meta {
  align-self: start;
  display: grid;
  gap: 10px;
  padding: 16px;
}
.vessel-document-preview-meta div {
  display: grid;
  gap: 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(13, 36, 56, 0.07);
}
.vessel-document-preview-meta div:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.vessel-document-preview-meta span {
  color: var(--ops-muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vessel-document-preview-meta strong {
  color: var(--ops-text);
  font-size: 0.86rem;
}
.vessel-document-preview-meta p {
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  color: var(--ops-muted);
  background: rgba(245, 253, 254, 0.78);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.45;
}
body:not(.auth-locked) .expense-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
}
body:not(.auth-locked) .expense-modal-shell[hidden] {
  display: none;
}
body:not(.auth-locked) .expense-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(4, 20, 33, 0.48);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
body:not(.auth-locked) .expense-modal-card {
  position: relative;
  z-index: 1;
  width: min(960px, calc(100vw - 48px));
  max-height: min(900px, calc(var(--visual-viewport-height) - 48px));
  display: grid;
  gap: 22px;
  overflow-y: auto;
  padding: 30px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 252, 0.96));
  box-shadow: 0 28px 80px rgba(4, 20, 33, 0.28);
}
body:not(.auth-locked) .expense-modal-heading,
body:not(.auth-locked) .expense-form-section-heading,
body:not(.auth-locked) .expense-form-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
body:not(.auth-locked) .expense-modal-heading h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-family: var(--app-font, var(--heading-font));
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.05;
}
body:not(.auth-locked) .expense-modal-heading .small-copy {
  max-width: 660px;
  margin-top: 10px;
  line-height: 1.55;
}
body:not(.auth-locked) .expense-modal-close {
  flex: 0 0 auto;
  min-height: 40px;
  padding-inline: 14px;
  color: #067b87;
  border-color: rgba(24, 180, 190, 0.24);
  background: rgba(221, 247, 249, 0.72);
}
body:not(.auth-locked) .expense-modal-close:hover {
  color: #055f69;
  border-color: rgba(24, 180, 190, 0.34);
  background: rgba(221, 247, 249, 0.92);
}
body:not(.auth-locked) .expense-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  gap: 18px 22px;
  align-items: start;
}
body:not(.auth-locked) .expense-form-section {
  display: grid;
  gap: 13px;
  min-width: 0;
}
body:not(.auth-locked) .expense-form-section-vendor {
  grid-column: 2;
  grid-row: 1 / span 2;
}
body:not(.auth-locked) .expense-form-section-receipt {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: 13px 18px;
  align-items: start;
}
body:not(.auth-locked) .expense-form-section-receipt .expense-form-section-heading {
  grid-column: 1 / -1;
}
body:not(.auth-locked) .expense-form-section-heading {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
body:not(.auth-locked) .expense-form-section-heading h4 {
  margin: 2px 0 0;
  color: var(--ink);
  font-family: var(--app-font, var(--body-font));
  font-size: 1rem;
  font-weight: 900;
}
body:not(.auth-locked) .expense-form-icon {
  display: none;
}
body:not(.auth-locked) .expense-modal-card .form-row {
  gap: 14px;
}
body:not(.auth-locked) .expense-modal-card label {
  gap: 8px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
}
body:not(.auth-locked) .expense-modal-card :is(input, select, textarea) {
  min-height: 48px;
  border-radius: 16px;
  border-color: rgba(13, 36, 56, 0.12);
  background: rgba(249, 252, 253, 0.96);
  font-size: 0.9rem;
}
body:not(.auth-locked) .expense-modal-card textarea {
  min-height: 96px;
  resize: vertical;
}
body:not(.auth-locked) .expense-inline-vendor {
  display: grid;
  gap: 10px;
  margin-top: -4px;
}
body:not(.auth-locked) .expense-inline-vendor-toggle {
  width: fit-content;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(9, 128, 145, 0.18);
  border-radius: 999px;
  background: rgba(230, 249, 252, 0.72);
  color: var(--teal-dark);
  font-size: 0.8rem;
  font-weight: 900;
}
body:not(.auth-locked) .expense-inline-vendor-toggle:hover,
body:not(.auth-locked) .expense-inline-vendor-toggle:focus-visible {
  border-color: rgba(9, 128, 145, 0.34);
  background: rgba(216, 248, 251, 0.96);
  box-shadow: 0 10px 24px rgba(9, 128, 145, 0.12);
}
body:not(.auth-locked) .expense-inline-vendor-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(9, 128, 145, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 0%, rgba(30, 176, 188, 0.12), transparent 32%),
    rgba(245, 252, 253, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 30px rgba(8, 55, 72, 0.08);
}
body:not(.auth-locked) .expense-inline-vendor-form[hidden] {
  display: none;
}
body:not(.auth-locked) .expense-inline-vendor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
body:not(.auth-locked) .expense-inline-vendor-heading h5 {
  margin: 2px 0 0;
  color: var(--ink);
  font-family: var(--app-font, var(--body-font));
  font-size: 0.95rem;
  font-weight: 900;
}
body:not(.auth-locked) .expense-inline-vendor-close {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: 0.78rem;
}
body:not(.auth-locked) .expense-inline-vendor-error {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(185, 74, 66, 0.2);
  border-radius: 12px;
  background: rgba(255, 244, 243, 0.92);
  color: #9f352e;
  font-size: 0.8rem;
  font-weight: 850;
}
body:not(.auth-locked) .expense-inline-vendor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
body:not(.auth-locked) .expense-inline-vendor-actions > button {
  min-height: 38px;
  padding-inline: 14px;
  border-radius: 999px;
}
body:not(.auth-locked) .expense-attachment-field {
  display: grid;
  gap: 8px;
}
body:not(.auth-locked) .expense-attachment-preview-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 16px;
  background: rgba(241, 249, 251, 0.9);
}
body:not(.auth-locked) .expense-attachment-preview-card img,
body:not(.auth-locked) .expense-attachment-file-badge {
  width: 76px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover;
}
body:not(.auth-locked) .expense-attachment-file-badge {
  display: grid;
  place-items: center;
  padding: 8px;
  background: rgba(13, 127, 143, 0.1);
  color: var(--teal-dark);
  font-size: 0.7rem;
  font-weight: 900;
  text-align: center;
}
body:not(.auth-locked) .expense-form-actions {
  position: static;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  border-top: 0;
  background: transparent;
  backdrop-filter: none;
}
@media (max-width: 760px) {
  body:not(.auth-locked) .expense-modal-shell {
    align-items: flex-end;
    padding: max(8px, var(--safe-area-top, 0px)) 8px 0;
  }
  body:not(.auth-locked) .expense-modal-card {
    width: 100%;
    max-height: calc(var(--mobile-visual-height, var(--visual-viewport-height, 100dvh)) - max(8px, var(--safe-area-top, 0px)));
    border-radius: 28px 28px 0 0;
    padding: 18px;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked) .expense-modal-heading h3 {
    font-size: 2rem;
  }
  body:not(.auth-locked) .expense-form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  body:not(.auth-locked) .expense-form-section-vendor,
  body:not(.auth-locked) .expense-form-section-receipt {
    grid-column: 1;
    grid-row: auto;
  }
  body:not(.auth-locked) .expense-form-section-receipt {
    grid-template-columns: 1fr;
  }
  body:not(.auth-locked) .expense-modal-card .form-row {
    grid-template-columns: 1fr;
  }
  body:not(.auth-locked) .expense-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -18px -18px;
    padding: 12px 18px calc(14px + var(--safe-area-bottom, 0px));
    border-top: 1px solid rgba(13, 36, 56, 0.08);
    background: linear-gradient(180deg, rgba(246, 241, 233, 0), rgba(255, 255, 255, 0.98) 28%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  body:not(.auth-locked) .expense-form-actions .primary-button,
  body:not(.auth-locked) .expense-form-actions .text-button {
    flex: 1 1 0;
  }
  body:not(.auth-locked) .expense-inline-vendor-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vessel-document-upload-card {
    animation: none;
  }
}
@media (max-width: 900px) {
  .vessel-document-upload-content {
    width: min(720px, 100%);
  }
  .vessel-document-upload-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .vessel-document-upload-shell {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }
  .vessel-document-upload-content,
  .vessel-document-upload-card {
    width: 100%;
    max-height: var(--mobile-visual-height, 100dvh);
    height: var(--mobile-visual-height, 100dvh);
  }
  .vessel-document-upload-card {
    border-radius: 0;
    border-inline: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .vessel-document-upload-header,
  .vessel-document-upload-footer {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .vessel-document-upload-header {
    padding-top: max(16px, env(safe-area-inset-top));
  }
  .vessel-document-upload-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .vessel-document-upload-body {
    padding: 16px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left));
  }
  .vessel-document-upload-category-grid,
  .vessel-document-upload-form-grid,
  .vessel-document-upload-file-card {
    grid-template-columns: 1fr;
  }
  .vessel-document-upload-category {
    min-height: auto;
  }
  .vessel-document-upload-file-card {
    justify-items: start;
  }
  .vessel-document-upload-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .vessel-document-upload-footer .text-button,
  .vessel-document-upload-footer .vessel-document-add-button {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}
.tone-neutral {
  background: rgba(99, 120, 135, 0.12);
  color: #526678;
}
@media (max-width: 900px), (pointer: coarse) {
  body:not(.auth-locked) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]), select, textarea, [contenteditable="true"], [contenteditable=""]) {
    min-height: 44px;
    font-size: 16px;
    scroll-margin-top: 88px;
    scroll-margin-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--keyboard-safe-bottom, var(--mobile-keyboard-inset, 0px)) + 96px);
  }
  body:not(.auth-locked) textarea {
    line-height: 1.42;
  }
  body:not(.auth-locked) .work-order-mobile-sheet-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: min(860px, calc(var(--mobile-visual-height, 100dvh) - max(8px, var(--safe-area-top)) - max(8px, var(--safe-area-bottom))));
    max-height: min(860px, calc(var(--mobile-visual-height, 100dvh) - max(8px, var(--safe-area-top)) - max(8px, var(--safe-area-bottom))));
    overflow: hidden;
    overscroll-behavior: contain;
  }
  body:not(.auth-locked).keyboard-open .work-order-mobile-sheet-panel {
    height: calc(var(--mobile-visual-height, 100dvh) - max(8px, var(--safe-area-top)) - 8px);
    max-height: calc(var(--mobile-visual-height, 100dvh) - max(8px, var(--safe-area-top)) - 8px);
  }
  body:not(.auth-locked) :is(
    .work-order-mobile-sheet-host,
    .work-order-detail-body,
    .vessel-mobile-editor-sheet-host,
    .vessel-document-upload-body,
    .health-factor-detail-body,
    .mobile-record-sheet-body,
    .report-preview-drawer-body,
    .access-modal-grid,
    .vendor-modal-body,
    .inventory-modal-body,
    .account-sheet-body,
    .billing-sheet-body
  ) {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: 72px;
    scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--keyboard-safe-bottom, var(--mobile-keyboard-inset, 0px)) + 128px);
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked).keyboard-open :is(
    .work-order-mobile-sheet-host,
    .work-order-detail-body,
    .vessel-mobile-editor-sheet-host,
    .vessel-document-upload-body,
    .health-factor-detail-body,
    .mobile-record-sheet-body,
    .report-preview-drawer-body,
    .access-modal-grid,
    .vendor-modal-body,
    .inventory-modal-body,
    .account-sheet-body,
    .billing-sheet-body
  ) {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--keyboard-safe-bottom, var(--mobile-keyboard-inset, 0px)) + 24px);
  }
  body:not(.auth-locked) .work-order-mobile-sheet-host .report-form {
    min-height: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--keyboard-safe-bottom, var(--mobile-keyboard-inset, 0px)) + 96px);
  }
  body:not(.auth-locked) .work-order-mobile-sheet-host .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: 4px;
    padding-top: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(246, 241, 233, 0), rgba(246, 241, 233, 0.98) 32%);
    backdrop-filter: blur(12px);
  }
  body:not(.auth-locked).keyboard-open .work-order-mobile-fab,
  body:not(.auth-locked).keyboard-open .mobile-bottom-nav {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(6px, 1.3vh, 14px) clamp(16px, 4vw, 40px);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-stage {
  width: min(780px, calc(100vw - 32px));
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-card.panel {
  max-height: calc(100dvh - 12px);
  padding: clamp(14px, 2.2vh, 28px) clamp(30px, 4vw, 44px);
  overflow: hidden;
  color: #f8fdff;
  background:
    linear-gradient(145deg, rgba(8, 34, 48, 0.92), rgba(3, 16, 27, 0.92)),
    rgba(5, 20, 31, 0.88);
  border: 1px solid rgba(72, 220, 224, 0.34);
  border-radius: 32px;
  box-shadow:
    0 34px 86px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(80, 234, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  filter: none;
  opacity: 1;
  backdrop-filter: blur(14px);
  scrollbar-width: thin;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-card.panel::after {
  display: none;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-brand,
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-brand * {
  opacity: 1;
  filter: none;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .auth-brand-logo-shell {
  width: clamp(42px, 4.6vh, 54px);
  height: clamp(42px, 4.6vh, 54px);
  border-radius: 17px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .auth-brand-lockup .brand-name {
  color: #ffffff;
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  font-weight: 780;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .auth-brand-lockup .brand-subtitle {
  color: rgba(67, 247, 241, 0.92);
  font-weight: 900;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-stepper {
  margin: clamp(10px, 1.7vh, 18px) auto clamp(8px, 1.4vh, 14px);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-stepper li {
  color: rgba(225, 244, 248, 0.78);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-stepper li strong {
  color: inherit;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-stepper li span {
  width: clamp(30px, 3.8vh, 36px);
  height: clamp(30px, 3.8vh, 36px);
  color: rgba(232, 248, 251, 0.82);
  background: rgba(2, 15, 25, 0.9);
  border-color: rgba(214, 242, 247, 0.28);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-stepper li.is-active span,
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-stepper li.is-complete span {
  color: #05212b;
  background: linear-gradient(135deg, #65fff7, #13c8c5);
  border-color: rgba(113, 255, 249, 0.9);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-stepper li.is-active {
  color: #ffffff;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-plan-chip {
  width: min(100%, 520px);
  margin-bottom: clamp(10px, 1.5vh, 16px);
  padding: 9px 12px;
  color: #f7fdff;
  background: rgba(4, 23, 35, 0.88);
  border-color: rgba(68, 226, 229, 0.42);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-plan-chip small {
  color: rgba(183, 235, 241, 0.9);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-plan-chip strong {
  color: #ffffff;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-plan-chip em {
  color: rgba(231, 246, 250, 0.84);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-hero .eyebrow {
  color: #48fbf4;
  font-weight: 920;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] #onboarding-title {
  color: #ffffff;
  font-size: clamp(2.1rem, 4.1vw, 3.4rem);
  text-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] #onboarding-copy {
  max-width: 36rem;
  color: rgba(236, 248, 251, 0.88);
  line-height: 1.42;
  font-weight: 720;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-body {
  margin-top: clamp(10px, 1.5vh, 16px);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: clamp(9px, 1.25vh, 13px);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-form-section {
  grid-column: 1 / -1;
  padding-top: clamp(10px, 1.4vh, 14px);
  border-top-color: rgba(215, 244, 249, 0.2);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-form-row,
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .form-actions {
  grid-column: 1 / -1;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-form-section h3 {
  color: #54fff7;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-form-section p {
  color: rgba(232, 246, 250, 0.82);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-field {
  color: rgba(246, 253, 255, 0.94);
  gap: 6px;
  font-size: 0.9rem;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .optional-label {
  color: rgba(178, 216, 225, 0.78);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-input-shell {
  min-height: 46px;
  background: rgba(7, 27, 39, 0.82);
  border-color: rgba(186, 232, 238, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 24px rgba(0, 0, 0, 0.13);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-input-shell:focus-within {
  background: rgba(8, 34, 48, 0.94);
  border-color: rgba(66, 247, 239, 0.88);
  box-shadow:
    0 0 0 3px rgba(45, 232, 225, 0.16),
    0 18px 36px rgba(0, 0, 0, 0.18);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-input-icon {
  color: rgba(81, 244, 239, 0.86);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-input-shell input {
  height: 44px;
  color: #ffffff;
  caret-color: #48fff8;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-text-fill-color: #ffffff;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-input-shell input::placeholder {
  color: rgba(218, 240, 245, 0.58);
  -webkit-text-fill-color: rgba(218, 240, 245, 0.58);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-input-shell input:autofill,
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-input-shell input:-webkit-autofill {
  box-shadow: 0 0 0 1000px rgba(7, 27, 39, 0.82) inset;
  -webkit-text-fill-color: #ffffff;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-continue-button.primary-button {
  min-height: 48px;
  margin-top: 2px;
  color: #ffffff;
  background: linear-gradient(135deg, #20e6df 0%, #08aeb3 100%);
  border: 1px solid rgba(105, 255, 249, 0.56);
  box-shadow:
    0 18px 36px rgba(0, 188, 185, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-continue-button.primary-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #42fff7 0%, #0fbfc4 100%);
  box-shadow:
    0 22px 42px rgba(0, 202, 199, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-footer {
  margin-top: clamp(8px, 1.3vh, 14px);
  padding-bottom: 2px;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-secure-note {
  color: rgba(226, 244, 249, 0.78);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] #onboarding-logout.text-button {
  color: #58fff8;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
@media (min-width: 900px) and (max-height: 820px) {
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-card.panel {
    padding: 12px 28px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-stepper {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-plan-chip {
    margin-bottom: 8px;
    padding-block: 8px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] #onboarding-title {
    font-size: clamp(1.95rem, 3.5vw, 2.85rem);
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] #onboarding-copy {
    font-size: 0.98rem;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-input-shell {
    min-height: 42px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-input-shell input {
    height: 40px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-continue-button.primary-button {
    min-height: 44px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-footer {
    margin-top: 12px;
  }
}
@media (max-width: 760px) {
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-stage {
    width: min(100%, calc(100vw - 20px));
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-card.panel {
    max-height: none;
    padding: 22px 18px 24px;
    overflow: visible;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-form {
    grid-template-columns: 1fr;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-form-row,
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .form-actions {
    grid-column: 1;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="account-details"] .onboarding-footer {
    gap: 10px;
  }
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] {
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  place-items: center;
  padding: clamp(6px, 1.25vh, 12px) clamp(14px, 3vw, 28px);
  overflow: hidden;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-background {
  background-image:
    linear-gradient(90deg, rgba(2, 10, 18, 0.62) 0%, rgba(3, 25, 35, 0.48) 45%, rgba(0, 75, 82, 0.34) 100%),
    url("/public/assets/landing-yacht-dusk-bg.png");
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-background::after {
  display: none;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-stage {
  width: min(780px, calc(100vw - 28px));
  height: auto;
  min-height: 0;
  padding: 0;
  align-items: center;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-card.panel {
  width: min(760px, 100%);
  max-height: calc(100dvh - 20px);
  padding: 0;
  color: #f7fdff;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  backdrop-filter: none;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-card.panel::before,
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-card.panel::after {
  display: none;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-brand {
  justify-content: center;
  margin-bottom: clamp(4px, 0.75vh, 8px);
  opacity: 1;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .auth-brand-logo-shell {
  width: clamp(36px, 4.2vh, 46px);
  height: clamp(36px, 4.2vh, 46px);
  opacity: 1;
  filter: none;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .auth-brand-lockup .brand-name {
  color: #ffffff;
  font-size: clamp(1.12rem, 1.4vw, 1.34rem);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .auth-brand-lockup .brand-subtitle {
  color: #39f5ed;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-stepper {
  margin-top: clamp(6px, 1vh, 10px);
  margin-bottom: clamp(7px, 1.1vh, 12px);
  width: min(380px, 100%);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-stepper::before {
  top: 15px;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-stepper li {
  color: rgba(232, 248, 251, 0.72);
  gap: 5px;
  font-size: 0.68rem;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-stepper li span {
  width: 30px;
  height: 30px;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-stepper li.is-active,
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-stepper li.is-complete {
  color: #efffff;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-hero {
  gap: clamp(3px, 0.55vh, 6px);
  text-align: left;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-hero .eyebrow {
  color: #48fbf4;
  font-weight: 920;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] #onboarding-title {
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: clamp(1.85rem, 3.2vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] #onboarding-copy {
  max-width: 41rem;
  color: rgba(236, 248, 251, 0.86);
  font-size: clamp(0.9rem, 1.15vw, 1rem);
  line-height: 1.35;
  font-weight: 720;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-body {
  gap: clamp(7px, 1vh, 11px);
  margin-top: clamp(7px, 1.1vh, 12px);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-billing-step,
.onboarding-selected-billing-step {
  display: grid;
  gap: clamp(8px, 1.1vh, 12px);
}
.onboarding-billing-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.onboarding-billing-switch-row > span {
  color: rgba(225, 247, 250, 0.84);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.onboarding-billing-plan-switch {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(9, 34, 46, 0.5);
  border: 1px solid rgba(169, 232, 238, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.onboarding-billing-plan-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 86px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(238, 250, 252, 0.86);
  background: transparent;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.onboarding-billing-plan-option strong {
  color: rgba(142, 255, 249, 0.92);
  font-size: 0.74rem;
}
.onboarding-billing-plan-option:hover:not(:disabled),
.onboarding-billing-plan-option.is-selected {
  color: #06242c;
  background: linear-gradient(135deg, #55fff5, #0ab4b3);
  border-color: rgba(102, 255, 249, 0.86);
  box-shadow: 0 14px 28px rgba(0, 199, 194, 0.22);
}
.onboarding-billing-plan-option:hover:not(:disabled) strong,
.onboarding-billing-plan-option.is-selected strong {
  color: #06242c;
}
.onboarding-billing-feedback .billing-feedback {
  margin: 0;
}
.onboarding-billing-confirmation-card {
  display: grid;
  gap: clamp(9px, 1.2vh, 14px);
  padding: clamp(14px, 1.65vh, 20px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(53, 245, 237, 0.13), transparent 36%),
    rgba(9, 35, 46, 0.72);
  border: 1px solid rgba(72, 220, 224, 0.34);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(14px);
}
.onboarding-billing-confirmation-card[data-plan="premium"] {
  border-color: rgba(235, 190, 87, 0.42);
  background:
    radial-gradient(circle at 100% 0%, rgba(235, 190, 87, 0.15), transparent 36%),
    rgba(9, 35, 46, 0.74);
}
.onboarding-billing-plan-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 16px);
  align-items: center;
}
.onboarding-billing-plan-icon {
  display: grid;
  place-items: center;
  width: clamp(46px, 5vh, 56px);
  height: clamp(46px, 5vh, 56px);
  border-radius: 18px;
  color: #54fff7;
  background: rgba(38, 229, 225, 0.11);
  border: 1px solid rgba(61, 238, 232, 0.34);
  box-shadow: 0 18px 36px rgba(0, 199, 194, 0.14);
}
.onboarding-billing-plan-icon[data-plan="premium"] {
  color: #f2c970;
  background: rgba(235, 190, 87, 0.13);
  border-color: rgba(235, 190, 87, 0.38);
}
.onboarding-billing-plan-icon svg,
.onboarding-billing-summary-icon svg,
.onboarding-billing-feature-icon svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
}
.onboarding-billing-plan-icon svg {
  font-size: clamp(24px, 2.6vh, 30px);
}
.onboarding-billing-plan-badge {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #54fff7;
  background: rgba(45, 232, 225, 0.1);
  border: 1px solid rgba(65, 237, 232, 0.24);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.onboarding-billing-confirmation-card[data-plan="premium"] .onboarding-billing-plan-badge {
  color: #f2c970;
  background: rgba(235, 190, 87, 0.11);
  border-color: rgba(235, 190, 87, 0.28);
}
.onboarding-billing-plan-header h3 {
  margin: 0;
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: clamp(1.7rem, 2.9vw, 2.35rem);
  line-height: 0.98;
  letter-spacing: 0;
}
.onboarding-billing-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 4px;
}
.onboarding-billing-price strong {
  color: #56fff6;
  font-size: clamp(1.8rem, 3.2vw, 2.55rem);
  line-height: 1;
}
.onboarding-billing-confirmation-card[data-plan="premium"] .onboarding-billing-price strong {
  color: #f2c970;
}
.onboarding-billing-price span,
.onboarding-billing-plan-header p {
  color: rgba(238, 250, 252, 0.88);
  font-weight: 700;
}
.onboarding-billing-plan-header p {
  margin: 5px 0 0;
  max-width: 34rem;
  line-height: 1.3;
}
.onboarding-billing-summary-list,
.onboarding-billing-feature-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.onboarding-billing-summary-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.onboarding-billing-summary-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 9px;
  border-radius: 14px;
  color: #f8ffff;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(191, 235, 240, 0.22);
  font-weight: 850;
  text-align: center;
}
.onboarding-billing-summary-icon,
.onboarding-billing-feature-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: #54fff7;
}
.onboarding-billing-summary-icon {
  font-size: 18px;
}
.onboarding-billing-summary-icon[data-plan="premium"],
.onboarding-billing-feature-icon[data-plan="premium"] {
  color: #f2c970;
}
.onboarding-billing-feature-panel {
  display: grid;
  gap: 0;
  padding-top: clamp(8px, 1vh, 10px);
  border-top: 1px solid rgba(220, 246, 250, 0.14);
}
.onboarding-billing-feature-panel .detail-label {
  color: rgba(184, 252, 249, 0.9);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}
.onboarding-billing-feature-panel ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}
.onboarding-billing-feature-panel li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: rgba(245, 252, 253, 0.9);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.2;
}
.onboarding-billing-feature-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(45, 232, 225, 0.1);
  border: 1px solid rgba(65, 237, 232, 0.22);
  font-size: 12px;
}
.onboarding-billing-feature-icon[data-plan="premium"] {
  background: rgba(235, 190, 87, 0.1);
  border-color: rgba(235, 190, 87, 0.22);
}
.onboarding-billing-start-button.primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: clamp(44px, 5vh, 52px);
  color: #ffffff;
  background: linear-gradient(135deg, #20e6df 0%, #08aeb3 100%);
  border: 1px solid rgba(105, 255, 249, 0.56);
  box-shadow:
    0 18px 36px rgba(0, 188, 185, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.onboarding-billing-start-button.primary-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #42fff7 0%, #0fbfc4 100%);
}
.onboarding-billing-secure-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0 8px;
  color: rgba(230, 247, 250, 0.8);
  font-size: 0.78rem;
  font-weight: 740;
  line-height: 1.22;
  text-align: center;
}
.onboarding-billing-secure-copy .billing-secure-icon {
  flex: 0 0 auto;
  color: #54fff7;
  background: rgba(45, 232, 225, 0.11);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-footer {
  position: static;
  justify-content: flex-end;
  margin-top: clamp(9px, 1.2vh, 14px);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] #onboarding-logout.text-button {
  color: #58fff8;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
@media (min-width: 900px) {
  body.onboarding-locked:has(.onboarding-shell[data-onboarding-step="billing"]:not([hidden])) {
    overflow: hidden;
  }
}
@media (min-width: 900px) and (max-height: 820px) {
  body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-card.panel {
    padding: 0;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-stepper {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] #onboarding-title {
    font-size: clamp(1.7rem, 2.7vw, 2.25rem);
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] #onboarding-copy {
    font-size: 0.88rem;
  }
  .onboarding-billing-confirmation-card {
    gap: 8px;
    padding: 12px 16px;
  }
  .onboarding-billing-plan-icon {
    width: 42px;
    height: 42px;
  }
  .onboarding-billing-plan-header h3 {
    font-size: clamp(1.55rem, 2.5vw, 2rem);
  }
  .onboarding-billing-price strong {
    font-size: clamp(1.65rem, 2.8vw, 2.15rem);
  }
  .onboarding-billing-summary-list li {
    min-height: 34px;
  }
  .onboarding-billing-feature-panel ul {
    gap: 5px 10px;
  }
  .onboarding-billing-secure-copy {
    font-size: 0.74rem;
  }
}
@media (max-width: 760px) {
  body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] {
    height: 100dvh;
    min-height: 100dvh;
    place-items: start center;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-stage {
    width: min(100%, calc(100vw - 20px));
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="billing"] .onboarding-card.panel {
    max-height: none;
    padding: 22px 18px 24px;
    overflow: visible;
  }
  .onboarding-billing-switch-row {
    align-items: stretch;
    flex-direction: column;
  }
  .onboarding-billing-plan-switch {
    width: 100%;
  }
  .onboarding-billing-plan-option {
    min-width: 0;
    padding-inline: 8px;
  }
  .onboarding-billing-plan-option strong {
    display: none;
  }
  .onboarding-billing-plan-header {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .onboarding-billing-plan-icon {
    margin: 0 auto;
  }
  .onboarding-billing-plan-badge {
    margin-inline: auto;
  }
  .onboarding-billing-summary-list,
  .onboarding-billing-feature-panel ul {
    grid-template-columns: 1fr;
  }
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] {
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  place-items: start center;
  padding: clamp(8px, 1.3vh, 16px) clamp(16px, 4vw, 48px) clamp(16px, 2vh, 28px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-background {
  background-image:
    linear-gradient(90deg, rgba(2, 10, 18, 0.62) 0%, rgba(3, 25, 35, 0.48) 45%, rgba(0, 75, 82, 0.34) 100%),
    url("/public/assets/landing-yacht-dusk-bg.png");
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-background::after {
  display: none;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stage {
  width: min(1080px, calc(100vw - 32px));
  height: auto;
  min-height: 0;
  padding: 0;
  align-items: start;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-card.panel {
  position: relative;
  width: 100%;
  max-height: none;
  padding: clamp(14px, 1.8vh, 24px) clamp(24px, 3.5vw, 42px);
  color: #f8ffff;
  background:
    radial-gradient(circle at 92% 0%, rgba(47, 241, 234, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(6, 28, 42, 0.86), rgba(2, 14, 25, 0.78));
  border: 1px solid rgba(72, 220, 224, 0.34);
  border-radius: 28px;
  box-shadow:
    0 30px 88px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: visible;
  backdrop-filter: blur(18px);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-brand {
  justify-content: flex-start;
  margin-bottom: clamp(5px, 0.8vh, 9px);
  opacity: 1;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .auth-brand-logo-shell {
  width: clamp(42px, 5vh, 54px);
  height: clamp(42px, 5vh, 54px);
  border-radius: 15px;
  opacity: 1;
  filter: none;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .auth-brand-lockup .brand-name {
  color: #ffffff;
  font-size: clamp(1.18rem, 1.5vw, 1.48rem);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .auth-brand-lockup .brand-subtitle {
  color: #39f5ed;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stepper {
  width: min(520px, 100%);
  margin-top: clamp(3px, 0.6vh, 7px);
  margin-bottom: clamp(4px, 0.7vh, 8px);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stepper li {
  color: rgba(232, 248, 251, 0.72);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stepper li.is-active,
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stepper li.is-complete {
  color: #efffff;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-hero {
  max-width: 670px;
  gap: clamp(3px, 0.6vh, 7px);
  text-align: left;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-hero .eyebrow {
  color: #48fbf4;
  font-weight: 920;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] #onboarding-title {
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: clamp(1.78rem, 2.75vw, 2.65rem);
  line-height: 1;
  letter-spacing: 0;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] #onboarding-copy {
  max-width: 42rem;
  color: rgba(238, 250, 252, 0.86);
  font-size: clamp(0.88rem, 1.05vw, 0.98rem);
  line-height: 1.34;
  font-weight: 720;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-body {
  margin-top: clamp(5px, 0.8vh, 9px);
}
.onboarding-vessel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(218px, 264px);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}
.onboarding-vessel-form {
  gap: clamp(8px, 1vh, 12px);
}
.onboarding-vessel-form-section {
  padding-top: 0;
}
.onboarding-vessel-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1vh, 12px) clamp(12px, 1.6vw, 16px);
}
@media (min-width: 961px) {
  .onboarding-vessel-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.onboarding-field-wide {
  grid-column: 1 / -1;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-input-shell {
  min-height: clamp(44px, 5.2vh, 50px);
  padding: 0 15px;
  background: rgba(4, 22, 35, 0.68);
  border-color: rgba(185, 232, 238, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 28px rgba(0, 0, 0, 0.12);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-input-shell:focus-within {
  background: rgba(7, 31, 45, 0.78);
  border-color: rgba(60, 243, 237, 0.82);
  box-shadow:
    0 0 0 3px rgba(45, 232, 225, 0.14),
    0 16px 34px rgba(0, 0, 0, 0.16);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-input-shell input,
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-input-shell select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: clamp(42px, 4.8vh, 48px);
  padding: 0;
  color: #f8ffff;
  font: inherit;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  outline: 0;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-input-shell select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-input-shell select option {
  color: #f8ffff;
  background: rgba(6, 24, 36, 0.98);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-input-shell input::placeholder {
  color: rgba(208, 226, 234, 0.54);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-input-shell input:autofill,
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-input-shell input:-webkit-autofill,
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-input-shell input:-webkit-autofill:hover,
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-input-shell input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8ffff;
  caret-color: #f8ffff;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 0 0 1000px rgba(4, 22, 35, 0.68) inset !important;
  transition: background-color 9999s ease-out 0s;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-input-icon {
  color: rgba(115, 244, 240, 0.92);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-field.is-select-open {
  position: relative;
  z-index: 40;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-select-shell {
  position: relative;
  grid-template-columns: 26px minmax(0, 1fr) 12px;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-select-shell::after {
  content: "";
  justify-self: end;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(151, 231, 235, 0.74);
  border-bottom: 2px solid rgba(151, 231, 235, 0.74);
  transform: rotate(45deg);
  pointer-events: none;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select {
  position: relative;
  grid-template-columns: 26px minmax(0, 1fr) 16px;
  overflow: visible;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-trigger {
  width: 100%;
  min-width: 0;
  height: clamp(42px, 4.8vh, 48px);
  padding: 0;
  color: rgba(208, 226, 234, 0.68);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-weight: 840;
  text-align: left;
  cursor: pointer;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select.has-value .onboarding-custom-select-trigger {
  color: #f8ffff;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-trigger span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-arrow {
  justify-self: end;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(151, 231, 235, 0.78);
  border-bottom: 2px solid rgba(151, 231, 235, 0.78);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
  transition: transform 160ms ease, border-color 160ms ease;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select.is-open .onboarding-custom-select-arrow {
  border-color: #54fff7;
  transform: translateY(3px) rotate(225deg);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -1px;
  right: -1px;
  z-index: 50;
  display: grid;
  gap: 4px;
  max-height: min(328px, 44vh);
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  color: #f8ffff;
  background:
    radial-gradient(circle at 16% 0%, rgba(65, 245, 240, 0.14), transparent 34%),
    rgba(6, 24, 36, 0.96);
  border: 1px solid rgba(72, 220, 224, 0.28);
  border-radius: 20px;
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition: opacity 150ms ease, transform 150ms ease;
  backdrop-filter: blur(18px);
  scrollbar-width: thin;
  scrollbar-color: rgba(72, 220, 224, 0.54) rgba(5, 18, 28, 0.72);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select.is-open .onboarding-custom-select-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-menu::-webkit-scrollbar {
  width: 9px;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-menu::-webkit-scrollbar-track {
  background: rgba(5, 18, 28, 0.72);
  border-radius: 999px;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-menu::-webkit-scrollbar-thumb {
  background: rgba(72, 220, 224, 0.54);
  border: 2px solid rgba(5, 18, 28, 0.72);
  border-radius: 999px;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-option {
  min-height: 48px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  color: rgba(237, 250, 252, 0.84);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 14px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 820;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-option:hover,
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-option:focus-visible {
  color: #ffffff;
  background: rgba(41, 224, 220, 0.12);
  border-color: rgba(72, 220, 224, 0.32);
  outline: none;
  transform: translateX(2px);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-option[aria-selected="true"] {
  color: #65fff7;
  background: linear-gradient(90deg, rgba(45, 232, 225, 0.18), rgba(45, 232, 225, 0.06));
  border-color: rgba(72, 220, 224, 0.4);
  box-shadow: 0 0 22px rgba(45, 232, 225, 0.12);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-option-mark {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(115, 244, 240, 0.58);
  border-radius: 3px;
  transform: rotate(45deg);
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-custom-select-option[aria-selected="true"] .onboarding-custom-select-option-mark {
  background: #54fff7;
  border-color: #54fff7;
  box-shadow: 0 0 14px rgba(84, 255, 247, 0.48);
}
.onboarding-vessel-secure-row svg,
.onboarding-vessel-side-card svg,
.onboarding-vessel-next-list svg,
.onboarding-vessel-plan-list svg{
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
}
.onboarding-vessel-submit.primary-button {
  justify-content: center;
  gap: 10px;
  min-height: clamp(46px, 5.1vh, 52px);
  color: #ffffff;
  background: linear-gradient(135deg, #2df0e8 0%, #08abb4 100%);
  border: 1px solid rgba(105, 255, 249, 0.56);
  box-shadow:
    0 20px 38px rgba(0, 188, 185, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.onboarding-vessel-submit.primary-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #54fff7 0%, #13c1c8 100%);
}
.onboarding-vessel-secure-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: rgba(225, 244, 248, 0.74);
  font-size: 0.76rem;
  font-weight: 760;
}
.onboarding-vessel-secure-row span,
.onboarding-vessel-secure-row a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.onboarding-vessel-secure-row a {
  color: #5bfff8;
  text-decoration: none;
}
.onboarding-vessel-side-card {
  display: grid;
  gap: clamp(10px, 1.4vh, 14px);
  padding: clamp(14px, 2vh, 20px);
  border-radius: 22px;
  color: #f8ffff;
  background:
    radial-gradient(circle at 100% 0%, rgba(53, 245, 237, 0.12), transparent 36%),
    rgba(9, 35, 46, 0.64);
  border: 1px solid rgba(72, 220, 224, 0.24);
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(14px);
}
.onboarding-vessel-side-section {
  display: grid;
  gap: 9px;
}
.onboarding-vessel-side-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #48fbf4;
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.onboarding-vessel-next-list,
.onboarding-vessel-plan-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.onboarding-vessel-next-list li,
.onboarding-vessel-plan-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: rgba(238, 250, 252, 0.86);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.28;
}
.onboarding-vessel-next-list span,
.onboarding-vessel-plan-list span {
  display: grid;
  place-items: center;
  color: #54fff7;
}
.onboarding-vessel-side-divider {
  height: 1px;
  background: rgba(220, 246, 250, 0.12);
}
.onboarding-vessel-plan-name {
  color: #ffffff;
  font-size: 1rem;
}
.onboarding-vessel-plan-price {
  color: #f8ffff;
  font-size: 1.06rem;
  font-weight: 900;
}
.onboarding-vessel-side-card p {
  margin: 0;
  color: rgba(226, 247, 250, 0.78);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.38;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-footer {
  position: absolute;
  top: clamp(20px, 2.6vh, 30px);
  right: clamp(24px, 3.5vw, 46px);
  margin: 0;
}
body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] #onboarding-logout.text-button {
  color: #eaffff;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
@media (min-width: 900px) {
  body.onboarding-locked:has(.onboarding-shell[data-onboarding-step="vessel-profile"]:not([hidden])) {
    overflow: auto;
  }
}
@media (min-width: 900px) and (max-height: 820px) {
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-card.panel {
    padding-block: 16px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-brand {
    margin-bottom: 6px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .auth-brand-logo-shell {
    width: 40px;
    height: 40px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stepper {
    margin-top: 5px;
    margin-bottom: 7px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stepper li {
    gap: 5px;
    font-size: 0.66rem;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stepper li span {
    width: 30px;
    height: 30px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] #onboarding-title {
    font-size: clamp(1.9rem, 3.1vw, 2.7rem);
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] #onboarding-copy {
    font-size: 0.88rem;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-body {
    margin-top: 9px;
  }
  .onboarding-vessel-form {
    gap: 9px;
  }
  .onboarding-vessel-form-grid {
    gap: 9px 12px;
  }
  .onboarding-vessel-form-section p,
  .onboarding-vessel-side-card p,
  .onboarding-vessel-secure-row {
    font-size: 0.76rem;
  }
  .onboarding-vessel-submit.primary-button {
    min-height: 44px;
  }
  .onboarding-vessel-side-card {
    padding: 16px;
    gap: 12px;
  }
  .onboarding-vessel-next-list,
  .onboarding-vessel-plan-list {
    gap: 8px;
  }
}
@media (max-width: 960px) {
  .onboarding-vessel-layout {
    grid-template-columns: 1fr;
  }
  .onboarding-vessel-side-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .onboarding-vessel-side-divider {
    display: none;
  }
}
@media (max-width: 760px) {
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] {
    height: 100dvh;
    min-height: 100dvh;
    width: 100vw;
    max-width: 100vw;
    place-items: start center;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stage {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-card.panel {
    width: 100%;
    max-width: 100%;
    max-height: none;
    padding: 22px 18px 24px;
    overflow: visible;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stepper {
    width: 100%;
    gap: 4px;
    margin-block: 16px 12px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stepper li {
    gap: 5px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stepper li strong {
    font-size: 0.62rem;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-stepper li span {
    width: 32px;
    height: 32px;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] #onboarding-title {
    font-size: clamp(2.05rem, 10vw, 2.55rem);
    overflow-wrap: anywhere;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] #onboarding-copy,
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-form-section p,
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-field-label {
    overflow-wrap: anywhere;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-hero,
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-body,
  .onboarding-vessel-layout,
  .onboarding-vessel-form {
    min-width: 0;
  }
  body.onboarding-locked .onboarding-shell[data-onboarding-step="vessel-profile"] .onboarding-footer {
    position: static;
    justify-content: flex-start;
    margin-top: 14px;
  }
  .onboarding-vessel-form-grid,
  .onboarding-vessel-side-card {
    grid-template-columns: 1fr;
  }
  .onboarding-vessel-secure-row {
    align-items: flex-start;
    flex-direction: column;
  }
}
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] {
  align-items: center;
  justify-content: center;
  padding: max(28px, var(--safe-area-top, 0px)) max(20px, var(--safe-area-right, 0px)) max(28px, var(--safe-area-bottom, 0px)) max(20px, var(--safe-area-left, 0px));
}
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .access-modal-backdrop {
  background:
    radial-gradient(circle at 78% 26%, rgba(49, 238, 230, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(1, 9, 17, 0.72), rgba(2, 23, 35, 0.66));
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .billing-sheet {
  width: min(1080px, calc(100vw - 40px));
  max-width: min(1080px, calc(100vw - 40px));
  max-height: calc(var(--visual-viewport-height, 100dvh) - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px) - 56px);
  color: #f5feff;
  border: 1px solid rgba(82, 226, 228, 0.32);
  border-radius: 24px;
  padding: clamp(24px, 2.4vw, 30px) clamp(26px, 3vw, 34px) clamp(32px, 4vh, 42px);
  background:
    radial-gradient(circle at 83% 10%, rgba(76, 255, 246, 0.14), transparent 28%),
    radial-gradient(circle at 12% 0%, rgba(32, 169, 191, 0.18), transparent 30%),
    linear-gradient(145deg, rgba(5, 25, 39, 0.93), rgba(2, 12, 22, 0.96));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  overflow: hidden;
}
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .billing-sheet-heading {
  flex: 0 0 auto;
  position: relative;
  top: auto;
  z-index: 2;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(109, 221, 231, 0.16);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .billing-sheet-heading .eyebrow,
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .billing-sheet-copy {
  color: rgba(211, 238, 245, 0.8);
}
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .billing-sheet-heading .eyebrow {
  color: #44fbf3;
  font-weight: 900;
  letter-spacing: 0.14em;
}
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] #billing-sheet-title {
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 0.98;
}
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] #close-billing-sheet {
  position: relative;
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  color: rgba(236, 253, 255, 0.9);
  border-color: rgba(173, 227, 234, 0.24);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  font-size: 0;
}
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] #close-billing-sheet::before,
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] #close-billing-sheet::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] #close-billing-sheet::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] #close-billing-sheet::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .billing-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 2px clamp(10px, 2vh, 20px) 0;
}
.locked-upgrade-modal {
  display: grid;
  gap: clamp(10px, 1.35vh, 16px);
  min-height: 0;
  padding-bottom: clamp(12px, 2.2vh, 24px);
}
.locked-upgrade-hero {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(150px, 0.34fr);
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
}
.locked-upgrade-icon,
.locked-upgrade-hero-art span,
.locked-upgrade-benefit-strip i {
  display: inline-grid;
  place-items: center;
  color: #38f7ef;
  border: 1px solid rgba(69, 239, 233, 0.26);
  background:
    linear-gradient(145deg, rgba(31, 133, 146, 0.22), rgba(3, 22, 34, 0.62)),
    rgba(6, 35, 49, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 30px rgba(44, 240, 232, 0.12);
}
.locked-upgrade-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}
.locked-upgrade-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.locked-upgrade-modal[data-required-plan="premium"] .locked-upgrade-icon,
.locked-upgrade-modal[data-required-plan="premium"] .locked-upgrade-hero-art span,
.locked-upgrade-modal[data-required-plan="premium"] .locked-upgrade-benefit-strip i {
  color: #b174ff;
  border-color: rgba(177, 116, 255, 0.32);
  background:
    linear-gradient(145deg, rgba(109, 59, 189, 0.28), rgba(29, 18, 45, 0.62)),
    rgba(8, 26, 41, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 32px rgba(177, 116, 255, 0.16);
}
.locked-upgrade-heading {
  min-width: 0;
}
.locked-upgrade-info-label,
.locked-upgrade-section-title span,
.locked-upgrade-plan-pill{
  display: inline-flex;
  align-items: center;
  color: #48fbf4;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.locked-upgrade-heading h3 {
  margin: 6px 0 0;
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 0.95;
}
.locked-upgrade-heading p {
  max-width: 56ch;
  margin: 6px 0 0;
  color: rgba(224, 242, 247, 0.84);
  font-size: clamp(0.96rem, 1.1vw, 1.06rem);
  line-height: 1.45;
}
.locked-upgrade-hero-art {
  justify-self: end;
  width: min(190px, 100%);
  min-height: 116px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 48%, rgba(41, 237, 229, 0.16), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px);
  background-size: auto, 18px 18px;
}
.locked-upgrade-hero-art span {
  width: 90px;
  height: 90px;
  border-radius: 26px;
}
.locked-upgrade-hero-art svg {
  width: 58px;
  height: 58px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.locked-upgrade-benefit-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(88, 217, 227, 0.2);
  border-radius: 16px;
  background: rgba(9, 37, 52, 0.54);
}
.locked-upgrade-benefit-strip span {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: rgba(243, 253, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.25;
}
.locked-upgrade-benefit-strip i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
}
.locked-upgrade-benefit-strip svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.locked-upgrade-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: stretch;
  gap: 16px;
}
.locked-upgrade-main,
.locked-upgrade-info-panel {
  min-width: 0;
}
.locked-upgrade-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.locked-upgrade-section-title h4 {
  margin: 0;
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: clamp(1.28rem, 1.7vw, 1.65rem);
  line-height: 1;
}
.locked-upgrade-section-title span {
  min-height: 25px;
  padding: 0 10px;
  color: #54fff7;
  border: 1px solid rgba(71, 235, 228, 0.28);
  border-radius: 999px;
  background: rgba(30, 151, 161, 0.16);
  font-size: 0.66rem;
  white-space: nowrap;
}
.locked-upgrade-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.locked-upgrade-plan-grid[data-card-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}
.locked-upgrade-plan-card {
  display: grid;
  gap: 9px;
  align-content: start;
  min-width: 0;
  padding: clamp(17px, 1.7vw, 22px);
  color: #effdff;
  border: 1px solid rgba(141, 213, 224, 0.22);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(58, 229, 214, 0.14), transparent 34%),
    rgba(5, 24, 36, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 16px 36px rgba(0, 0, 0, 0.2);
}
.locked-upgrade-plan-card[data-plan="premium"] {
  position: relative;
  overflow: hidden;
  border-color: rgba(184, 108, 255, 0.42);
  background:
    radial-gradient(circle at 82% 6%, rgba(49, 219, 224, 0.2), transparent 34%),
    radial-gradient(circle at 14% 0%, rgba(184, 108, 255, 0.28), transparent 38%),
    linear-gradient(180deg, rgba(20, 18, 42, 0.9) 0%, rgba(10, 22, 36, 0.84) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 36px rgba(184, 108, 255, 0.08),
    0 24px 80px rgba(120, 80, 255, 0.14);
}
.locked-upgrade-plan-card[data-plan="premium"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.1), transparent 30%),
    radial-gradient(circle at 50% 118%, rgba(50, 216, 222, 0.16), transparent 42%);
}
.locked-upgrade-plan-card.is-highlighted {
  border-color: rgba(44, 240, 232, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 20px 54px rgba(26, 221, 214, 0.18),
    0 0 0 1px rgba(44, 240, 232, 0.22);
}
.locked-upgrade-plan-card[data-plan="premium"].is-highlighted {
  border-color: rgba(79, 246, 237, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 42px rgba(54, 216, 222, 0.1),
    0 24px 80px rgba(44, 240, 232, 0.18),
    0 0 0 1px rgba(79, 246, 237, 0.2),
    0 0 44px rgba(54, 216, 222, 0.16);
}
.locked-upgrade-plan-topline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.locked-upgrade-plan-pill {
  min-height: 25px;
  padding: 0 10px;
  color: #4dfff7;
  border: 1px solid rgba(68, 238, 231, 0.3);
  border-radius: 999px;
  background: rgba(32, 160, 168, 0.15);
  font-size: 0.64rem;
}
.locked-upgrade-plan-card[data-plan="premium"] .locked-upgrade-plan-pill {
  color: #f0d9ff;
  border-color: rgba(206, 148, 255, 0.52);
  background:
    linear-gradient(135deg, rgba(184, 108, 255, 0.28), rgba(50, 216, 222, 0.12)),
    rgba(20, 15, 38, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 22px rgba(184, 108, 255, 0.18);
}
.locked-upgrade-plan-card h3 {
  margin: 0;
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  line-height: 1;
}
.locked-upgrade-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.locked-upgrade-price strong {
  color: #42fbf3;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
}
.locked-upgrade-plan-card[data-plan="premium"] .locked-upgrade-price strong {
  color: transparent;
  background: linear-gradient(90deg, #f4d7ff 0%, #b86dff 44%, #49f1ec 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(2.2rem, 3.25vw, 3rem);
  font-weight: 950;
  text-shadow: 0 0 24px rgba(184, 108, 255, 0.32);
}
.locked-upgrade-plan-card[data-plan="premium"] .locked-upgrade-price span {
  color: rgba(244, 248, 255, 0.92);
}
.locked-upgrade-price span,
.locked-upgrade-plan-card p {
  color: rgba(223, 239, 245, 0.82);
  font-size: 0.86rem;
  line-height: 1.42;
}
.locked-upgrade-plan-card[data-plan="premium"] p {
  color: rgba(237, 247, 255, 0.88);
}
.locked-upgrade-feature-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 2px 0 0;
  list-style: none;
}
.locked-upgrade-feature-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: rgba(240, 252, 255, 0.88);
  font-size: 0.86rem;
  line-height: 1.28;
}
.locked-upgrade-plan-card[data-plan="premium"] .locked-upgrade-feature-list li {
  color: rgba(250, 252, 255, 0.94);
}
.locked-upgrade-feature-list li > span:first-child {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  color: #43f7ef;
  border-radius: 999px;
  background: rgba(64, 236, 229, 0.12);
}
.locked-upgrade-plan-card[data-plan="premium"] .locked-upgrade-feature-list li > span:first-child {
  color: #e4c5ff;
  background:
    linear-gradient(135deg, rgba(184, 108, 255, 0.36), rgba(50, 216, 222, 0.16)),
    rgba(36, 23, 58, 0.72);
  box-shadow: 0 0 16px rgba(184, 108, 255, 0.16);
}
.locked-upgrade-feature-list svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.locked-upgrade-plan-cta {
  width: 100%;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  margin-top: 8px;
  margin-bottom: clamp(4px, 1vh, 10px);
  border-radius: 16px;
}
.locked-upgrade-plan-card[data-plan="premium"] .locked-upgrade-plan-cta {
  color: #ffffff;
  border-color: rgba(101, 255, 248, 0.62);
  background:
    linear-gradient(135deg, #54fff7 0%, #1ccbd5 46%, #057d91 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 18px 42px rgba(7, 180, 194, 0.34),
    0 0 34px rgba(80, 255, 247, 0.18);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.26);
}
.locked-upgrade-plan-card[data-plan="premium"] .locked-upgrade-plan-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.1) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 22px 50px rgba(7, 180, 194, 0.42),
    0 0 44px rgba(80, 255, 247, 0.22);
}
.locked-upgrade-plan-card[data-plan="premium"] .locked-upgrade-plan-cta:disabled {
  color: rgba(255, 255, 255, 0.84);
  opacity: 0.82;
}
.locked-upgrade-plan-card[data-plan="pro"] .locked-upgrade-plan-cta {
  color: #032630;
  border-color: rgba(64, 245, 238, 0.62);
  background: linear-gradient(135deg, #36f2e9, #08a7b8);
  box-shadow: 0 18px 36px rgba(11, 195, 201, 0.22);
}
.locked-upgrade-trial-note {
  margin: 0;
  color: rgba(209, 230, 237, 0.64) !important;
  font-size: 0.75rem !important;
}
.locked-upgrade-info-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}
.locked-upgrade-about,
.locked-upgrade-unlocks {
  padding: 16px;
  border: 1px solid rgba(115, 220, 230, 0.18);
  border-radius: 18px;
  background: rgba(9, 35, 48, 0.58);
}
.locked-upgrade-about p {
  margin: 10px 0 0;
  color: rgba(226, 242, 247, 0.8);
  font-size: 0.86rem;
  line-height: 1.5;
}
.locked-upgrade-unlocks ul {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.locked-upgrade-unlocks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: rgba(242, 252, 255, 0.88);
  font-size: 0.82rem;
  line-height: 1.25;
}
.locked-upgrade-unlocks li > span:first-child {
  display: inline-grid;
  place-items: center;
  color: #54fff7;
}
.locked-upgrade-unlocks svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.locked-upgrade-modal[data-required-plan="premium"] .locked-upgrade-about,
.locked-upgrade-modal[data-required-plan="premium"] .locked-upgrade-unlocks {
  border-color: rgba(184, 108, 255, 0.26);
  background:
    radial-gradient(circle at 18% 0%, rgba(184, 108, 255, 0.12), transparent 42%),
    rgba(9, 35, 48, 0.62);
}
.locked-upgrade-modal[data-required-plan="premium"] .locked-upgrade-info-label {
  color: #d8b7ff;
  text-shadow: 0 0 18px rgba(184, 108, 255, 0.18);
}
.locked-upgrade-modal[data-required-plan="premium"] .locked-upgrade-about p,
.locked-upgrade-modal[data-required-plan="premium"] .locked-upgrade-unlocks li {
  color: rgba(242, 250, 255, 0.9);
}
.locked-upgrade-modal[data-required-plan="premium"] .locked-upgrade-unlocks li > span:first-child {
  color: #aefcff;
}
.locked-upgrade-trust-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(8px, 1.4vh, 14px);
  padding-top: 14px;
  border-top: 1px solid rgba(115, 220, 230, 0.18);
  color: rgba(218, 239, 245, 0.82);
  font-size: 0.84rem;
  font-weight: 700;
}
.locked-upgrade-modal[data-required-plan="premium"] .locked-upgrade-trust-footer {
  color: rgba(236, 248, 255, 0.9);
}
.locked-upgrade-trust-footer span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.locked-upgrade-trust-footer svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #45f4ee;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
@media (max-width: 980px) {
  .locked-upgrade-hero {
    grid-template-columns: 60px minmax(0, 1fr);
  }
  .locked-upgrade-hero-art {
    display: none;
  }
  .locked-upgrade-benefit-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .locked-upgrade-layout {
    grid-template-columns: 1fr;
  }
  .locked-upgrade-info-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] {
    align-items: flex-end;
    padding: 0;
  }
  body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .billing-sheet {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: min(94dvh, var(--mobile-visual-height, 100dvh));
    box-sizing: border-box;
    border-radius: 28px 28px 0 0;
    margin-inline: auto;
    padding: 18px 16px calc(18px + var(--safe-area-bottom, 0px));
    overflow-x: hidden;
  }
  body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .billing-sheet-heading {
    padding-right: 58px;
  }
  body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] #close-billing-sheet {
    position: absolute;
    top: 18px;
    right: 16px;
  }
  body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .billing-sheet-body {
    padding-right: 0;
  }
  .locked-upgrade-modal {
    gap: 14px;
    min-width: 0;
    overflow-x: hidden;
  }
  .locked-upgrade-hero {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
  }
  .locked-upgrade-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
  .locked-upgrade-icon svg {
    width: 28px;
    height: 28px;
  }
  .locked-upgrade-heading h3 {
    font-size: clamp(1.9rem, 10vw, 2.5rem);
  }
  .locked-upgrade-heading p,
  .locked-upgrade-benefit-strip span,
  .locked-upgrade-feature-list li,
  .locked-upgrade-unlocks li,
  .locked-upgrade-trust-footer span {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .locked-upgrade-hero,
  .locked-upgrade-layout,
  .locked-upgrade-main,
  .locked-upgrade-plan-grid,
  .locked-upgrade-plan-card,
  .locked-upgrade-info-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .locked-upgrade-benefit-strip,
  .locked-upgrade-plan-grid,
  .locked-upgrade-info-panel {
    grid-template-columns: 1fr;
  }
  .locked-upgrade-section-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .locked-upgrade-trust-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (min-width: 900px) and (max-height: 980px) {
  body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] {
    padding: 16px max(18px, var(--safe-area-right, 0px)) 16px max(18px, var(--safe-area-left, 0px));
  }
  body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .billing-sheet {
    width: min(1040px, calc(100vw - 36px));
    max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
    border-radius: 22px;
    padding: 22px 30px 28px;
  }
  body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .billing-sheet-heading {
    padding-bottom: 9px;
  }
  body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] #billing-sheet-title {
    font-size: clamp(1.85rem, 4.3vh, 2.45rem);
  }
  body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] .billing-sheet-copy {
    margin-top: 5px;
    font-size: 0.9rem;
  }
  body:not(.auth-locked) #billing-sheet[data-billing-mode="locked-feature"] #close-billing-sheet {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
  .locked-upgrade-modal {
    gap: 9px;
    padding-bottom: 14px;
  }
  .locked-upgrade-hero {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }
  .locked-upgrade-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }
  .locked-upgrade-icon svg {
    width: 25px;
    height: 25px;
  }
  .locked-upgrade-heading p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.32;
  }
  .locked-upgrade-hero-art {
    display: none;
  }
  .locked-upgrade-benefit-strip {
    gap: 8px;
    padding: 8px;
    border-radius: 15px;
  }
  .locked-upgrade-benefit-strip span {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    font-size: 0.76rem;
  }
  .locked-upgrade-benefit-strip i {
    width: 28px;
    height: 28px;
  }
  .locked-upgrade-benefit-strip svg {
    width: 15px;
    height: 15px;
  }
  .locked-upgrade-layout {
    grid-template-columns: minmax(0, 1fr) 236px;
    gap: 12px;
  }
  .locked-upgrade-section-title {
    margin-bottom: 8px;
  }
  .locked-upgrade-section-title h4 {
    font-size: 1.25rem;
  }
  .locked-upgrade-section-title span {
    min-height: 22px;
    padding: 0 8px;
    font-size: 0.58rem;
  }
  .locked-upgrade-plan-grid {
    gap: 10px;
  }
  .locked-upgrade-plan-card {
    gap: 7px;
    padding: 14px 16px;
    border-radius: 17px;
  }
  .locked-upgrade-plan-pill {
    min-height: 22px;
    padding: 0 8px;
    font-size: 0.58rem;
  }
  .locked-upgrade-plan-card h3 {
    font-size: 1.45rem;
  }
  .locked-upgrade-price strong {
    font-size: 2rem;
  }
  .locked-upgrade-price span,
  .locked-upgrade-plan-card p {
    font-size: 0.78rem;
    line-height: 1.32;
  }
  .locked-upgrade-plan-card > p {
    display: none;
  }
  .locked-upgrade-feature-list {
    gap: 5px;
  }
  .locked-upgrade-feature-list li {
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 7px;
    font-size: 0.78rem;
  }
  .locked-upgrade-feature-list li > span:first-child {
    width: 19px;
    height: 19px;
  }
  .locked-upgrade-feature-list svg {
    width: 12px;
    height: 12px;
  }
  .locked-upgrade-plan-cta {
    min-height: 40px;
    margin-top: 2px;
    border-radius: 14px;
  }
  .locked-upgrade-trial-note {
    display: none;
  }
  .locked-upgrade-info-panel {
    gap: 10px;
  }
  .locked-upgrade-about,
  .locked-upgrade-unlocks {
    padding: 12px;
    border-radius: 15px;
  }
  .locked-upgrade-about p {
    margin-top: 7px;
    font-size: 0.77rem;
    line-height: 1.38;
  }
  .locked-upgrade-unlocks ul {
    gap: 6px;
    margin-top: 8px;
  }
  .locked-upgrade-unlocks li {
    font-size: 0.76rem;
  }
  .locked-upgrade-trust-footer {
    padding-top: 8px;
    font-size: 0.76rem;
  }
}
body:not(.auth-locked) .workspace-tab-row button svg,
body:not(.auth-locked) .app-screen-filter-bar button svg,
body:not(.auth-locked) .mobile-shell-nav-summary svg,
body:not(.auth-locked) .icon-button svg,
body:not(.auth-locked) .text-button svg,
body:not(.auth-locked) .primary-button svg,
body:not(.auth-locked) .secondary-button svg {
  stroke: currentColor;
}
body:not(.auth-locked) .icon-button,
body:not(.auth-locked) .text-button,
body:not(.auth-locked) .primary-button,
body:not(.auth-locked) .secondary-button,
body:not(.auth-locked) .danger-button {
  -webkit-tap-highlight-color: transparent;
}
body:not(.auth-locked) .icon-button:focus-visible,
body:not(.auth-locked) .text-button:focus-visible,
body:not(.auth-locked) .primary-button:focus-visible,
body:not(.auth-locked) .secondary-button:focus-visible,
body:not(.auth-locked) .danger-button:focus-visible,
body:not(.auth-locked) input:focus-visible,
body:not(.auth-locked) select:focus-visible,
body:not(.auth-locked) textarea:focus-visible {
  outline: 2px solid rgba(16, 184, 194, 0.46);
  outline-offset: 2px;
}
body.onboarding-locked .onboarding-input-shell :is(input, select, textarea):focus,
body.onboarding-locked .onboarding-input-shell :is(input, select, textarea):focus-visible,
body.onboarding-locked .onboarding-input-shell button:focus,
body.onboarding-locked .onboarding-input-shell button:focus-visible {
  outline: 0 !important;
  outline-offset: 0;
  box-shadow: none !important;
}
@media (max-width: 760px) {
  body:not(.auth-locked) {
    --mobile-field-shadow: 0 8px 20px rgba(10, 31, 45, 0.055);
    --mobile-field-shadow-float: 0 10px 26px rgba(17, 38, 56, 0.14);
    --mobile-field-line: rgba(13, 36, 56, 0.07);
  }
  body:not(.auth-locked) .app-shell {
    background: linear-gradient(180deg, #f7fbfc 0%, #eff6f8 100%);
  }
  body:not(.auth-locked) .workspace-nav {
    gap: 7px;
    padding: max(6px, var(--safe-area-top, 0px)) 10px 7px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 22px rgba(17, 38, 56, 0.065);
  }
  body:not(.auth-locked) .workspace-nav-topline {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }
  body:not(.auth-locked) .workspace-brand {
    gap: 8px;
    padding: 0;
  }
  body:not(.auth-locked) .workspace-brand-logo-shell {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    box-shadow: var(--mobile-field-shadow);
  }
  body:not(.auth-locked) .workspace-brand-lockup {
    gap: 1px;
  }
  body:not(.auth-locked) .workspace-brand-lockup .brand-name {
    font-size: 0.92rem;
    line-height: 1;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .workspace-brand-lockup .brand-subtitle {
    font-size: 0.56rem;
    line-height: 1;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .workspace-account-shell {
    justify-self: end;
  }
  body:not(.auth-locked) .workspace-account-button {
    width: auto;
    min-height: 38px;
    gap: 7px;
    padding: 3px 9px 3px 4px;
    border-radius: 15px;
    box-shadow: var(--mobile-field-shadow);
  }
  body:not(.auth-locked) .workspace-account-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .workspace-account-copy {
    gap: 1px;
    max-width: 112px;
  }
  body:not(.auth-locked) .workspace-account-copy .detail-label {
    font-size: 0.54rem;
    line-height: 1;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .workspace-account-copy strong {
    max-width: 100%;
    font-size: 0.74rem;
    line-height: 1.08;
  }
  body:not(.auth-locked) .workspace-mobile-shell {
    gap: 7px;
  }
  body:not(.auth-locked) .workspace-mobile-shell-topline {
    gap: 7px;
    align-items: center;
  }
  body:not(.auth-locked) .workspace-mobile-current {
    min-height: 44px;
    gap: 8px;
    padding: 5px 10px 5px 8px;
    border-radius: 16px;
    box-shadow: var(--mobile-field-shadow);
  }
  body:not(.auth-locked) .workspace-mobile-current-icon {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }
  body:not(.auth-locked) .workspace-mobile-current-icon svg {
    width: 16px;
    height: 16px;
  }
  body:not(.auth-locked) .workspace-mobile-current-copy {
    gap: 1px;
  }
  body:not(.auth-locked) .workspace-mobile-current-copy strong {
    font-size: 0.88rem;
    line-height: 1.08;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .workspace-mobile-current-copy .eyebrow {
    font-size: 0.56rem;
    letter-spacing: 0;
    line-height: 1;
  }
  body:not(.auth-locked) .workspace-mobile-more-button,
  body:not(.auth-locked) .workspace-mobile-alert {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 15px;
    box-shadow: var(--mobile-field-shadow);
  }
  body:not(.auth-locked) .workspace-mobile-more-button {
    font-size: 0;
  }
  body:not(.auth-locked) .workspace-mobile-more-button::before {
    content: "...";
    color: currentColor;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
  }
  body:not(.auth-locked) .workspace-mobile-alert svg {
    width: 19px;
    height: 19px;
  }
  body:not(.auth-locked) .workspace-mobile-alert i {
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    font-size: 0.58rem;
  }
  body:not(.auth-locked) .workspace-mobile-context {
    gap: 9px;
    align-items: center;
    padding: 10px 11px;
    margin-bottom: 7px;
    border-radius: 18px;
    box-shadow: var(--mobile-field-shadow);
  }
  body[data-active-view]:not(.auth-locked) .workspace-mobile-context {
    gap: 7px;
    padding: 8px 10px;
  }
  body[data-active-view]:not(.auth-locked) .workspace-mobile-context-copy {
    gap: 2px;
  }
  body[data-active-view]:not(.auth-locked) .workspace-mobile-context-copy .eyebrow {
    font-size: 0.58rem;
    line-height: 1;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .workspace-mobile-context-copy {
    gap: 2px;
  }
  body:not(.auth-locked) .workspace-mobile-context-copy h2,
  body:not(.auth-locked) .section-heading h2,
  body:not(.auth-locked) .app-screen-header-main h2,
  body:not(.auth-locked) .mobile-overview-topline .card-title,
  body:not(.auth-locked) .mobile-report-wizard-head h3 {
    font-size: 1.24rem;
    line-height: 1.06;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .workspace-mobile-context-copy .small-copy,
  body:not(.auth-locked) .app-screen-copy,
  body:not(.auth-locked) .app-screen-note,
  body:not(.auth-locked) .small-copy,
  body:not(.auth-locked) .card-meta {
    font-size: 0.8rem;
    line-height: 1.3;
  }
  body[data-active-view]:not(.auth-locked) .workspace-mobile-context-copy .small-copy {
    display: none;
  }
  body:not(.auth-locked) .workspace-mobile-primary-action {
    min-height: 38px;
    padding-inline: 12px;
    font-size: 0.78rem;
  }
  body[data-active-view]:not(.auth-locked) .workspace-mobile-primary-action {
    min-height: 38px;
  }
  body:not(.auth-locked) .workspace-scroll-area {
    gap: 7px;
    padding-bottom: calc(78px + var(--safe-area-bottom, 0px)) !important;
    scroll-padding-bottom: calc(92px + var(--safe-area-bottom, 0px));
  }
  body:not(.auth-locked) :is(
    .section-block,
    .weekly-report-section,
    .work-orders-section,
    .maintenance-section,
    .vessel-section,
    .vendors-section,
    .inventory-section,
    .expenses-section,
    .crew-section,
    [data-view-panel="voyage"]
  ) {
    padding: 9px 10px calc(84px + var(--safe-area-bottom, 0px));
  }
  body:not(.auth-locked) :is(
    .mobile-overview-shell,
    .mobile-overview-priority,
    .mobile-vessel-section,
    .mobile-vessel-fleet-switcher,
    .work-order-week-card,
    .work-order-summary-card,
    .work-order-preview-shell,
    .work-order-detail-block,
    .work-order-link-section,
    .report-overview-card,
    .report-list-shell,
    .report-summary-card,
    .mobile-report-wizard-head,
    .mobile-report-panel,
    .mobile-report-status-card,
    .maintenance-surface,
    .maintenance-summary-card,
    .maintenance-focus-card,
    .maintenance-command-card,
    .maintenance-section-card,
    .app-screen-summary-card,
    .compact-disclosure-card,
    .expense-metric-card,
    .expense-visual-card
  ) {
    border-color: var(--mobile-field-line);
    border-radius: 16px;
    box-shadow: var(--mobile-field-shadow);
  }
  body:not(.auth-locked) :is(
    .mobile-overview-shell,
    .mobile-overview-priority,
    .mobile-vessel-section,
    .work-order-week-card,
    .work-order-summary-card,
    .report-overview-card,
    .report-list-shell,
    .mobile-report-wizard-head,
    .mobile-report-panel,
    .maintenance-surface,
    .maintenance-summary-card,
    .maintenance-focus-card,
    .maintenance-command-card,
    .compact-disclosure-card
  ) {
    padding: 10px;
  }
  body:not(.auth-locked) :is(
    .mobile-overview-sections,
    .mobile-overview-priority-list,
    .mobile-overview-actions,
    .work-order-mobile-row-list,
    .work-order-compact-list,
    .maintenance-workspace-shell,
    .maintenance-health-bar,
    .maintenance-focus-grid,
    .report-summary-grid,
    .mobile-report-wizard-shell,
    .mobile-report-review-list,
    .mobile-report-archive-list,
    .mobile-shell-sheet-list
  ) {
    gap: 6px;
  }
  body:not(.auth-locked) :is(
    .mobile-overview-priority-item,
    .mobile-overview-section,
    .work-order-mobile-row,
    .work-order-preview-row,
    .maintenance-row,
    .maintenance-schedule-row,
    .maintenance-system-row,
    .maintenance-activity-row,
    .maintenance-timeline-row,
    .maintenance-quick-action-row,
    .mobile-report-step,
    .mobile-report-review-row,
    .mobile-report-archive-row,
    .mobile-shell-nav-item.mobile-more-row,
    .mobile-shell-action-item
  ) {
    min-height: 50px;
    padding: 8px 9px;
    border-radius: 14px;
    border-color: rgba(13, 36, 56, 0.055);
    box-shadow: none;
  }
  body:not(.auth-locked) .mobile-overview-topline .small-copy {
    margin-top: 3px;
    font-size: 0.8rem;
    line-height: 1.26;
    -webkit-line-clamp: 1;
  }
  body:not(.auth-locked) .mobile-overview-icon,
  body:not(.auth-locked) .mobile-overview-action-icon,
  body:not(.auth-locked) .mobile-overview-priority-thumb {
    width: 31px;
    height: 31px;
    min-width: 31px;
    border-radius: 11px;
  }
  body:not(.auth-locked) .mobile-overview-action {
    min-height: 46px;
    gap: 7px;
    padding: 8px 9px;
    border-radius: 14px;
    font-size: 0.78rem;
    line-height: 1.12;
  }
  body:not(.auth-locked) .mobile-overview-section-value,
  body:not(.auth-locked) .status-badge,
  body:not(.auth-locked) .priority-badge,
  body:not(.auth-locked) .work-order-mobile-priority,
  body:not(.auth-locked) .mobile-report-step-state,
  body:not(.auth-locked) .mobile-report-review-meta em {
    min-height: 22px;
    padding: 4px 7px;
    font-size: 0.64rem;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .primary-button,
  body:not(.auth-locked) .ghost-button,
  body:not(.auth-locked) .text-button,
  body:not(.auth-locked) .report-action-button,
  body:not(.auth-locked) .action-overflow-trigger,
  body:not(.auth-locked) .mobile-report-primary-button,
  body:not(.auth-locked) .mobile-report-action-button {
    min-height: 40px;
    padding-inline: 12px;
    font-size: 0.8rem;
  }
  body:not(.auth-locked) .mobile-bottom-nav {
    padding: 0 max(8px, var(--safe-area-left, 0px)) calc(7px + var(--safe-area-bottom, 0px));
  }
  body:not(.auth-locked) .mobile-bottom-nav-inner {
    width: min(420px, calc(100vw - 16px));
    min-height: 62px;
    padding: 5px;
    gap: 3px;
    border-radius: 21px;
    box-shadow: var(--mobile-field-shadow-float);
  }
  body:not(.auth-locked) .mobile-bottom-nav-item {
    min-height: 50px;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 16px;
    font-size: 0.61rem;
    font-weight: 780;
  }
  body:not(.auth-locked) .mobile-bottom-nav-icon {
    width: 24px;
    height: 24px;
  }
  body:not(.auth-locked) .mobile-bottom-nav-icon svg {
    width: 15px;
    height: 15px;
  }
  body:not(.auth-locked) .mobile-bottom-nav-item.active {
    box-shadow: 0 5px 14px rgba(8, 126, 145, 0.14);
  }
  body:not(.auth-locked) .mobile-shell-sheet-panel,
  body:not(.auth-locked) .work-order-mobile-sheet-panel,
  body:not(.auth-locked) .mobile-record-sheet-panel,
  body:not(.auth-locked) .vessel-mobile-editor-sheet-panel {
    gap: 10px;
    padding: 12px 12px calc(12px + var(--safe-area-bottom, 0px));
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -16px 38px rgba(17, 38, 56, 0.18);
  }
  body:not(.auth-locked) .mobile-shell-sheet-header {
    gap: 10px;
    padding-top: 8px;
  }
  body:not(.auth-locked) .mobile-shell-sheet-header::before {
    width: 40px;
    height: 4px;
  }
  body:not(.auth-locked) .mobile-shell-sheet-header h2 {
    margin-top: 2px;
    font-size: 1.14rem;
    line-height: 1.08;
    letter-spacing: 0;
  }
  body:not(.auth-locked) .mobile-shell-nav-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }
  body:not(.auth-locked) .mobile-shell-nav-item-copy strong {
    font-size: 0.88rem;
  }
  body:not(.auth-locked) .mobile-shell-nav-item-copy span {
    font-size: 0.74rem;
    line-height: 1.22;
  }
}
@media (max-width: 380px) {
  body:not(.auth-locked) .workspace-nav {
    padding-inline: 8px;
  }
  body:not(.auth-locked) .workspace-brand-lockup .brand-subtitle,
  body:not(.auth-locked) .workspace-account-copy {
    display: none;
  }
  body:not(.auth-locked) .workspace-account-button {
    width: 38px;
    min-height: 38px;
    justify-content: center;
    padding: 4px;
  }
  body:not(.auth-locked) .workspace-mobile-current {
    min-height: 42px;
  }
  body:not(.auth-locked) .workspace-mobile-context {
    padding: 9px 10px;
  }
  body:not(.auth-locked) .workspace-mobile-context-copy h2,
  body:not(.auth-locked) .section-heading h2,
  body:not(.auth-locked) .app-screen-header-main h2,
  body:not(.auth-locked) .mobile-overview-topline .card-title,
  body:not(.auth-locked) .mobile-report-wizard-head h3 {
    font-size: 1.14rem;
  }
  body:not(.auth-locked) .workspace-mobile-context-copy .small-copy {
    font-size: 0.74rem;
  }
  body:not(.auth-locked) .workspace-scroll-area {
    padding-bottom: calc(72px + var(--safe-area-bottom, 0px)) !important;
  }
  body:not(.auth-locked) .mobile-bottom-nav-inner {
    min-height: 58px;
    padding: 4px;
    border-radius: 19px;
  }
  body:not(.auth-locked) .mobile-bottom-nav-item {
    min-height: 48px;
    font-size: 0.58rem;
  }
  body:not(.auth-locked) .mobile-bottom-nav-icon {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 768px), (max-width: 900px) and (pointer: coarse) {
  body:not(.auth-locked) {
    --mobile-form-action-height: 72px;
    --mobile-form-keyboard-gap: min(var(--mobile-keyboard-inset, 0px), 136px);
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  select,
  textarea {
    font-size: max(16px, 1rem);
  }
  body:not(.auth-locked) #work-order-mobile-sheet:not([hidden]) {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    height: 100dvh;
    height: var(--mobile-visual-height, 100dvh);
    max-height: var(--mobile-visual-height, 100dvh);
    padding: 0;
    overflow: hidden;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-panel {
    box-sizing: border-box;
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    height: var(--mobile-visual-height, 100dvh);
    max-height: var(--mobile-visual-height, 100dvh);
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding:
      max(8px, var(--safe-area-top, 0px))
      max(12px, var(--safe-area-right, 0px))
      max(8px, var(--safe-area-bottom, 0px))
      max(12px, var(--safe-area-left, 0px));
    border-radius: 0;
    overflow: hidden !important;
    overscroll-behavior: contain;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .mobile-shell-sheet-header {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 8;
    gap: 8px;
    margin: 0 -2px;
    padding: 8px 0 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 253, 0.92));
    backdrop-filter: blur(16px) saturate(1.04);
    -webkit-backdrop-filter: blur(16px) saturate(1.04);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .mobile-shell-sheet-header h2 {
    font-size: 1.06rem;
    line-height: 1.08;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .mobile-shell-sheet-header .text-button {
    min-height: 38px;
    padding-inline: 10px;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: block;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 1px calc(8px + var(--safe-area-bottom, 0px)) !important;
    scroll-padding-top: calc(var(--safe-area-top, 0px) + 70px);
    scroll-padding-bottom: calc(var(--mobile-form-action-height) + var(--safe-area-bottom, 0px) + var(--mobile-form-keyboard-gap) + 56px);
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form {
    min-height: 0;
    max-height: none;
    display: grid;
    gap: 10px;
    overflow: visible !important;
    padding: 0 0 calc(var(--mobile-form-action-height) + var(--safe-area-bottom, 0px) + var(--mobile-form-keyboard-gap) + 24px) !important;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form-topline {
    gap: 2px;
    margin: 0;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form-topline h3 {
    font-size: 1rem;
    line-height: 1.08;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host :is(
    input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    label,
    .work-order-link-section,
    .work-order-crew-field,
    .work-order-photo-field
  ) {
    scroll-margin-top: calc(var(--safe-area-top, 0px) + 72px);
    scroll-margin-bottom: calc(var(--mobile-form-action-height) + var(--safe-area-bottom, 0px) + var(--mobile-form-keyboard-gap) + 72px);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host textarea {
    min-height: 86px;
    max-height: min(28dvh, 160px);
    line-height: 1.38;
  }
  body:not(.auth-locked).keyboard-open #work-order-mobile-sheet .work-order-mobile-sheet-host textarea {
    min-height: 76px;
    max-height: min(24dvh, 132px);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-link-picker-results {
    max-height: none;
    overflow: visible;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    margin: 4px -1px 0;
    padding: 8px 0 max(8px, var(--safe-area-bottom, 0px)) !important;
    background: linear-gradient(180deg, rgba(249, 252, 253, 0), rgba(249, 252, 253, 0.98) 28%);
    box-shadow: 0 -12px 24px rgba(17, 38, 56, 0.08);
    backdrop-filter: blur(16px) saturate(1.04);
    -webkit-backdrop-filter: blur(16px) saturate(1.04);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions > * {
    min-height: 42px;
  }
  body:not(.auth-locked).keyboard-open #work-order-mobile-sheet .work-order-mobile-sheet-panel,
  body:not(.auth-locked).keyboard-open #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions {
    bottom: 0 !important;
    transform: none;
  }
  body:not(.auth-locked) :is(.vessel-mobile-editor-sheet-host > form, .mobile-record-sheet-body form) {
    min-height: 0;
    max-height: none;
    overflow: visible !important;
    padding-bottom: calc(var(--mobile-form-action-height) + var(--safe-area-bottom, 0px) + var(--mobile-form-keyboard-gap) + 24px);
  }
  body:not(.auth-locked) :is(
    .vessel-mobile-editor-sheet-host > form .form-actions,
    .mobile-record-sheet-body form .form-actions
  ) {
    position: sticky;
    bottom: 0;
    z-index: 8;
    padding-bottom: max(8px, var(--safe-area-bottom, 0px));
    background: linear-gradient(180deg, rgba(249, 252, 253, 0), rgba(249, 252, 253, 0.98) 28%);
    backdrop-filter: blur(16px) saturate(1.04);
    -webkit-backdrop-filter: blur(16px) saturate(1.04);
  }
}
@media (max-width: 768px), (max-width: 900px) and (pointer: coarse) {
  body:not(.auth-locked) {
    --mobile-shell-gutter-left: max(12px, var(--safe-area-left, 0px));
    --mobile-shell-gutter-right: max(12px, var(--safe-area-right, 0px));
    --mobile-sheet-gutter-left: max(12px, var(--safe-area-left, 0px));
    --mobile-sheet-gutter-right: max(12px, var(--safe-area-right, 0px));
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  body:not(.auth-locked) .app-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0;
    height: 100dvh;
    height: var(--mobile-visual-height, 100dvh);
    max-height: var(--mobile-visual-height, 100dvh);
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  body:not(.auth-locked) .workspace-shell {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    min-height: 0;
    gap: 8px;
    margin: 0;
    padding:
      max(6px, var(--safe-area-top, 0px))
      var(--mobile-shell-gutter-right)
      0
      var(--mobile-shell-gutter-left);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
  }
  body:not(.auth-locked) .workspace-nav {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: max(5px, var(--safe-area-top, 0px)) 8px 7px;
    border-radius: 0 0 16px 16px;
  }
  body:not(.auth-locked) .workspace-scroll-area {
    width: 100%;
    max-width: none;
    min-width: 0;
    gap: 8px;
    margin: 0;
    padding: 0 0 calc(74px + var(--safe-area-bottom, 0px)) !important;
    overflow-x: hidden !important;
    scrollbar-gutter: auto;
    scroll-padding-bottom: calc(88px + var(--safe-area-bottom, 0px));
  }
  body:not(.auth-locked) :is(
    .workspace,
    .content-area,
    .view-stack,
    .view-panel,
    .app-screen,
    .report-layout,
    .report-layout-upgraded,
    .maintenance-workspace-shell,
    .maintenance-command-grid,
    .work-order-command-preview,
    .work-order-mobile-queue,
    .mobile-overview-shell,
    .mobile-overview-priority,
    .mobile-overview-actions,
    .mobile-overview-sections
  ) {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
  body:not(.auth-locked) :is(
    .section-block,
    .weekly-report-section,
    .work-orders-section,
    .maintenance-section,
    .vessel-section,
    .vendors-section,
    .inventory-section,
    .expenses-section,
    .crew-section,
    [data-view-panel="voyage"]
  ) {
    padding: 0 0 calc(76px + var(--safe-area-bottom, 0px)) !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-active-view="overview"]:not(.auth-locked) #overview-panel {
    padding: 0 !important;
  }
  body[data-active-view="overview"]:not(.auth-locked) .mobile-overview-shell {
    padding: 10px;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(10, 31, 45, 0.05);
  }
  body[data-active-view="overview"]:not(.auth-locked) .mobile-overview-priority {
    padding: 9px;
    border-radius: 15px;
  }
  body[data-active-view="overview"]:not(.auth-locked) .mobile-overview-actions {
    gap: 7px;
  }
  body:not(.auth-locked) .mobile-bottom-nav {
    padding:
      0
      max(6px, var(--safe-area-right, 0px))
      calc(6px + var(--safe-area-bottom, 0px))
      max(6px, var(--safe-area-left, 0px)) !important;
  }
  body:not(.auth-locked) .mobile-bottom-nav-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 58px;
    margin: 0 !important;
    padding: 4px;
    border-radius: 19px;
    box-shadow:
      0 10px 24px rgba(3, 24, 36, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  body:not(.auth-locked) .mobile-bottom-nav-item {
    min-height: 48px;
    gap: 2px;
    padding: 3px 1px;
    border-radius: 15px;
  }
  body:not(.auth-locked) .mobile-bottom-nav-icon {
    width: 22px;
    height: 22px;
  }
  body:not(.auth-locked) .mobile-bottom-nav-item.active {
    box-shadow: 0 4px 12px rgba(8, 126, 145, 0.12);
  }
  body:not(.auth-locked) #work-order-mobile-sheet:not([hidden]) {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    height: var(--mobile-visual-height, 100dvh);
    max-height: var(--mobile-visual-height, 100dvh);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh;
    height: var(--mobile-visual-height, 100dvh);
    max-height: var(--mobile-visual-height, 100dvh);
    padding:
      max(6px, var(--safe-area-top, 0px))
      var(--mobile-sheet-gutter-right)
      max(6px, var(--safe-area-bottom, 0px))
      var(--mobile-sheet-gutter-left) !important;
    border-radius: 0 !important;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .mobile-shell-sheet-header {
    gap: 7px;
    padding: 6px 0 5px;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .mobile-shell-sheet-header .eyebrow {
    font-size: 0.56rem;
    line-height: 1;
    letter-spacing: 0.08em;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host {
    padding-inline: 0 !important;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form {
    gap: 9px;
    padding-bottom: calc(var(--mobile-form-action-height) + var(--safe-area-bottom, 0px) + var(--mobile-form-keyboard-gap) + 18px) !important;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host :is(.form-row, .form-row.form-row-two, .form-row.form-row-three, .form-row.form-row-four) {
    gap: 8px;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host label {
    gap: 5px;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions {
    gap: 7px;
    padding: 7px 0 max(7px, var(--safe-area-bottom, 0px)) !important;
    box-shadow: 0 -10px 20px rgba(17, 38, 56, 0.07);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions > * {
    min-height: 42px;
  }
  body:not(.auth-locked).keyboard-open #work-order-mobile-sheet .work-order-mobile-sheet-panel {
    gap: 6px;
    padding-top: max(4px, var(--safe-area-top, 0px)) !important;
  }
  body:not(.auth-locked).keyboard-open #work-order-mobile-sheet .mobile-shell-sheet-header {
    gap: 5px;
    padding: 4px 0;
  }
  body:not(.auth-locked).keyboard-open #work-order-mobile-sheet .mobile-shell-sheet-header .eyebrow {
    display: none;
  }
  body:not(.auth-locked).keyboard-open #work-order-mobile-sheet .mobile-shell-sheet-header h2 {
    font-size: 0.98rem;
  }
  body:not(.auth-locked).keyboard-open #work-order-mobile-sheet .mobile-shell-sheet-header .text-button {
    min-height: 34px;
    padding-inline: 9px;
  }
  body:not(.auth-locked).keyboard-open #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form {
    gap: 7px;
    padding-bottom: calc(var(--mobile-form-action-height) + var(--safe-area-bottom, 0px) + var(--mobile-form-keyboard-gap) + 12px) !important;
  }
  body:not(.auth-locked).keyboard-open #work-order-mobile-sheet .work-order-mobile-sheet-host textarea {
    min-height: 72px;
    max-height: min(22dvh, 124px);
  }
  body:not(.auth-locked).keyboard-open #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions {
    padding: 6px 0 max(6px, var(--safe-area-bottom, 0px)) !important;
    box-shadow: 0 -8px 16px rgba(17, 38, 56, 0.06);
  }
  @media (min-width: 769px) {
    body:not(.auth-locked) #work-order-mobile-sheet:not([hidden]) {
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding:
        max(14px, var(--safe-area-top, 0px))
        max(14px, var(--safe-area-right, 0px))
        max(14px, var(--safe-area-bottom, 0px))
        max(14px, var(--safe-area-left, 0px));
    }
    body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-panel {
      position: relative;
      inset: auto;
      width: calc(100vw - 28px) !important;
      max-width: calc(100vw - 28px) !important;
      height: calc(var(--visual-viewport-height, 100dvh) - 28px);
      max-height: calc(var(--visual-viewport-height, 100dvh) - 28px);
      margin: 0 auto;
      border-radius: 24px !important;
      transform: none !important;
    }
  }
  body:not(.auth-locked) :is(
    .mobile-record-sheet-panel,
    .vessel-mobile-editor-sheet-panel
  ) {
    width: 100vw;
    max-width: 100vw;
  }
}
@media (max-width: 768px), (max-width: 900px) and (pointer: coarse) {
  body:not(.auth-locked) .workspace-nav {
    gap: 5px;
    padding: max(5px, var(--safe-area-top, 0px)) 12px 7px;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 6px 16px rgba(17, 38, 56, 0.055);
  }
  body:not(.auth-locked) .workspace-nav-topline {
    min-height: 34px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  body:not(.auth-locked) .workspace-header-actions {
    gap: 6px;
    flex: 0 0 auto;
  }
  body:not(.auth-locked) .workspace-brand {
    min-width: 0;
    gap: 7px;
  }
  body:not(.auth-locked) .workspace-brand-logo-shell {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
  body:not(.auth-locked) .workspace-brand-lockup .brand-name {
    font-size: 0.88rem;
    line-height: 1;
  }
  body:not(.auth-locked) .workspace-brand-lockup .brand-subtitle,
  body:not(.auth-locked) .workspace-account-copy {
    display: none;
  }
  body:not(.auth-locked) .workspace-account-button {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    justify-content: center;
    padding: 2px;
    border-radius: 13px;
  }
  body:not(.auth-locked) .workspace-account-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.68rem;
  }
  body:not(.auth-locked) .workspace-mobile-shell {
    gap: 0;
  }
  body[data-active-view="overview"]:not(.auth-locked) .workspace-mobile-shell {
    display: none !important;
  }
  body:not(.auth-locked) .workspace-mobile-shell-topline {
    display: none;
  }
  body:not(.auth-locked) .workspace-mobile-current {
    width: auto;
    min-width: 0;
    min-height: 26px;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body:not(.auth-locked) .workspace-mobile-current-icon,
  body:not(.auth-locked) .workspace-mobile-current-copy .detail-label {
    display: none;
  }
  body:not(.auth-locked) .workspace-mobile-current-copy {
    display: block;
  }
  body:not(.auth-locked) .workspace-mobile-current-copy strong {
    color: rgba(9, 66, 94, 0.86);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
  }
  body:not(.auth-locked) .workspace-mobile-more-button,
  body:not(.auth-locked) .workspace-mobile-alert {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 5px 12px rgba(17, 38, 56, 0.055);
  }
  body:not(.auth-locked) .workspace-mobile-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    overflow: hidden;
    font-size: 0;
    line-height: 1;
  }
  body:not(.auth-locked) .workspace-header-actions .workspace-mobile-alert {
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
  }
  body:not(.auth-locked) .workspace-mobile-more-button::before {
    content: "...";
    font-size: 0.94rem;
    font-weight: 900;
    line-height: 1;
  }
  body:not(.auth-locked) .workspace-mobile-alert svg {
    width: 17px;
    height: 17px;
  }
  body:not(.auth-locked) .workspace-mobile-alert i {
    top: 0;
    right: 0;
    min-width: 14px;
    height: 14px;
    padding-inline: 3px;
    font-size: 0.52rem;
  }
  body:not(.auth-locked) .workspace-mobile-context,
  body[data-active-view]:not(.auth-locked) .workspace-mobile-context {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body:not(.auth-locked) .workspace-mobile-context-copy,
  body[data-active-view]:not(.auth-locked) .workspace-mobile-context-copy {
    gap: 1px;
  }
  body:not(.auth-locked) .workspace-mobile-context-copy .eyebrow {
    display: none;
  }
  body:not(.auth-locked) .workspace-mobile-context-copy h2,
  body[data-active-view]:not(.auth-locked) .workspace-mobile-context-copy h2 {
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.08;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-locked) .workspace-mobile-context-copy .small-copy {
    display: none;
    max-width: 34ch;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.16;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-active-view]:not(.auth-locked) .workspace-mobile-context-copy .small-copy {
    display: none;
  }
  body:not(.auth-locked) .workspace-mobile-primary-action,
  body[data-active-view]:not(.auth-locked) .workspace-mobile-primary-action {
    max-width: 45vw;
    min-height: 32px;
    overflow: hidden;
    padding-inline: 10px;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-locked) .workspace-scroll-area {
    padding-bottom: calc(72px + var(--safe-area-bottom, 0px)) !important;
  }
  body:not(.auth-locked) #mobile-nav-sheet {
    z-index: 82;
    align-items: stretch;
    justify-content: flex-end;
    padding:
      max(6px, var(--safe-area-top, 0px))
      max(6px, var(--safe-area-right, 0px))
      max(6px, var(--safe-area-bottom, 0px))
      max(6px, var(--safe-area-left, 0px));
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-sheet-panel {
    width: 100%;
    max-width: none;
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top, 0px) - 8px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: auto 0 0;
    padding: 12px 12px calc(10px + var(--safe-area-bottom, 0px));
    border-radius: 22px 22px 0 0;
    overflow: hidden;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-sheet-header {
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0 4px;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-sheet-header::before {
    width: 42px;
    height: 4px;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-sheet-header .eyebrow {
    color: rgba(9, 66, 94, 0.72);
    font-size: 0.62rem;
    line-height: 1;
    letter-spacing: 0.08em;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-sheet-header h2 {
    margin-top: 1px;
    font-size: 1.08rem;
    line-height: 1.08;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-sheet-header .text-button {
    min-height: 34px;
    padding-inline: 11px;
    border-radius: 999px;
    font-size: 0.76rem;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-sheet-list {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1px 0 calc(22px + var(--safe-area-bottom, 0px));
    scroll-padding-bottom: calc(42px + var(--safe-area-bottom, 0px));
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-nav-item.mobile-more-row {
    position: relative;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    overflow: hidden;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-nav-item-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 13px;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-nav-item-icon svg {
    width: 18px;
    height: 18px;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-nav-item-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-nav-item-copy strong {
    display: block;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-nav-item-copy span {
    display: -webkit-box;
    max-height: 2.36em;
    margin: 0;
    overflow: hidden;
    color: rgba(47, 72, 90, 0.74);
    font-size: 0.74rem;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-nav-item-chevron,
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-nav-lock-badge {
    flex: 0 0 auto;
    position: static;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-nav-item-chevron {
    width: 28px;
    height: 28px;
    font-size: 1.12rem;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-shell-nav-lock-badge {
    max-width: 88px;
    min-height: 26px;
    padding-inline: 8px;
    white-space: nowrap;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-more-section-divider {
    height: 1px;
    margin: 0 4px;
  }
  body:not(.auth-locked) #mobile-nav-sheet .mobile-more-logout-row {
    margin-bottom: 4px;
  }
}
.work-order-mobile-thumb,
.work-order-suggestion-thumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(13, 36, 56, 0.09);
  background: linear-gradient(145deg, rgba(226, 247, 249, 0.82), rgba(255, 255, 255, 0.72));
  color: #0a7586;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.work-order-mobile-thumb::after,
.work-order-suggestion-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 20, 33, 0.02), rgba(4, 20, 33, 0.18)),
    radial-gradient(circle at 18% 0%, rgba(64, 236, 225, 0.16), transparent 42%);
}
.work-order-mobile-thumb img,
.work-order-suggestion-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.96) brightness(0.96);
}
.work-order-mobile-thumb svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.work-order-mobile-row-helper {
  display: block;
  overflow: hidden;
  color: rgba(67, 90, 108, 0.72);
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:not(.auth-locked) .work-order-detail-main,
body:not(.auth-locked) .work-order-detail-aside {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}
body:not(.auth-locked) .work-order-detail-side-section,
body:not(.auth-locked) .work-order-detail-activity-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
body:not(.auth-locked) .work-order-detail-activity-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body:not(.auth-locked) .work-order-detail-activity-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(13, 36, 56, 0.07);
}
body:not(.auth-locked) .work-order-detail-activity-item:first-child {
  border-top: 0;
  padding-top: 0;
}
body:not(.auth-locked) .work-order-detail-activity-item:last-child {
  padding-bottom: 0;
}
body:not(.auth-locked) .work-order-detail-activity-item > span:first-child {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #087f8c;
  border: 1px solid rgba(55, 190, 200, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(237, 254, 255, 0.96), rgba(220, 247, 250, 0.78)),
    rgba(224, 250, 252, 0.9);
}
body:not(.auth-locked) .work-order-detail-activity-item svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body:not(.auth-locked) .work-order-detail-activity-item strong,
body:not(.auth-locked) .work-order-detail-activity-item small {
  display: block;
  min-width: 0;
}
body:not(.auth-locked) .work-order-detail-activity-item strong {
  color: var(--ops-text, #102b3d);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.2;
}
body:not(.auth-locked) .work-order-detail-activity-item small {
  margin-top: 3px;
  color: var(--ops-muted, rgba(50, 73, 89, 0.72));
  font-size: 0.8rem;
  line-height: 1.32;
}
@media (max-width: 760px) {
  body:not(.auth-locked) .work-order-detail-main,
  body:not(.auth-locked) .work-order-detail-aside {
    gap: 10px;
  }
  body:not(.auth-locked) .work-order-detail-side-section,
  body:not(.auth-locked) .work-order-detail-activity-card {
    padding: 12px;
    border-radius: 16px;
  }
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-detail-actions-sidebar,
  body:not(.auth-locked) .work-order-detail-actions-sidebar {
    display: none;
  }
  body[data-active-view="work-orders"]:not(.auth-locked) .work-order-detail-actions-mobile,
  body:not(.auth-locked) .work-order-detail-actions-mobile {
    display: grid;
  }
}
body:not(.auth-locked) .work-order-detail-summary-card,
body:not(.auth-locked) .work-order-detail-activity-card {
  min-width: 0;
  display: grid;
  gap: 12px;
}
body:not(.auth-locked) .work-order-detail-summary-card {
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 28px rgba(17, 38, 56, 0.05);
}
body:not(.auth-locked) .work-order-detail-title-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
body:not(.auth-locked) .work-order-detail-primary-action {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  white-space: nowrap;
}
body:not(.auth-locked) .work-order-detail-delete-action {
  color: #a33f30;
  border-color: rgba(185, 77, 60, 0.2);
  background: rgba(185, 77, 60, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}
body:not(.auth-locked) .work-order-detail-delete-action:hover,
body:not(.auth-locked) .work-order-detail-delete-action:focus-visible {
  color: #8f3326;
  border-color: rgba(185, 77, 60, 0.28);
  background: rgba(185, 77, 60, 0.13);
}
body:not(.auth-locked) .work-order-thread-composer {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(247, 253, 254, 0.94), rgba(237, 248, 250, 0.84)),
    rgba(255, 255, 255, 0.84);
}
body:not(.auth-locked) .work-order-thread-composer[aria-busy="true"] {
  opacity: 0.72;
}
body:not(.auth-locked) .work-order-thread-composer textarea {
  width: 100%;
  min-height: 78px;
  max-height: 180px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ops-text, #102b3d);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.35;
  outline: none;
}
body:not(.auth-locked) .work-order-thread-composer textarea:focus {
  border-color: rgba(11, 156, 171, 0.42);
  box-shadow: 0 0 0 3px rgba(25, 188, 196, 0.14);
}
body:not(.auth-locked) .work-order-thread-composer-actions,
body:not(.auth-locked) .work-order-thread-composer-group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
body:not(.auth-locked) .work-order-thread-composer-actions {
  justify-content: space-between;
}
body:not(.auth-locked) .work-order-thread-composer[aria-busy="true"]::after {
  content: "Saving field update...";
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  color: #087f8c;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 999px;
  background: rgba(226, 249, 251, 0.82);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}
body:not(.auth-locked) .work-order-thread-action,
body:not(.auth-locked) .work-order-thread-complete,
body:not(.auth-locked) .work-order-thread-submit {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  line-height: 1;
}
body:not(.auth-locked) .work-order-thread-action svg,
body:not(.auth-locked) .work-order-thread-complete svg,
body:not(.auth-locked) .work-order-thread-submit svg {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  fill: none;
  stroke: currentColor;
}
body:not(.auth-locked) .work-order-thread-pending-media {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
body:not(.auth-locked) .work-order-thread-pending-media[hidden] {
  display: none;
}
body:not(.auth-locked) .work-order-thread-pending-photo {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid rgba(13, 36, 56, 0.11);
  border-radius: 13px;
  background: rgba(235, 248, 250, 0.88);
  box-shadow: 0 8px 18px rgba(13, 36, 56, 0.07);
}
body:not(.auth-locked) .work-order-thread-pending-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body:not(.auth-locked) .work-order-thread-pending-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(10, 33, 48, 0.78);
  box-shadow: 0 6px 16px rgba(3, 16, 25, 0.22);
  cursor: pointer;
}
body:not(.auth-locked) .work-order-thread-pending-remove svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
}
body:not(.auth-locked) .work-order-thread-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
body:not(.auth-locked) .work-order-mention-menu {
  position: absolute;
  right: 11px;
  left: 11px;
  top: calc(11px + 5.8rem);
  z-index: 15;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(11, 156, 171, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 45px rgba(12, 44, 62, 0.16);
}
body:not(.auth-locked) .work-order-mention-menu[hidden] {
  display: none;
}
body:not(.auth-locked) .work-order-mention-option {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ops-text, #102b3d);
  text-align: left;
  cursor: pointer;
}
body:not(.auth-locked) .work-order-mention-option:hover,
body:not(.auth-locked) .work-order-mention-option.is-highlighted {
  background: rgba(224, 249, 251, 0.82);
}
body:not(.auth-locked) .work-order-mention-avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid rgba(8, 127, 140, 0.2);
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 20%, rgba(49, 211, 218, 0.62), transparent 34%),
    linear-gradient(135deg, #0a7890, #123f5a);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
}
body:not(.auth-locked) .work-order-mention-option span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
body:not(.auth-locked) .work-order-mention-option strong,
body:not(.auth-locked) .work-order-mention-option small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:not(.auth-locked) .work-order-mention-option strong {
  font-size: 0.84rem;
  font-weight: 850;
}
body:not(.auth-locked) .work-order-mention-option small {
  color: rgba(50, 73, 89, 0.62);
  font-size: 0.72rem;
  line-height: 1.2;
}
body:not(.auth-locked) .work-order-detail-activity-item {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
}
body:not(.auth-locked) .work-order-detail-activity-item > .work-order-thread-avatar,
body:not(.auth-locked) .work-order-thread-avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #087f8c;
  border: 1px solid rgba(55, 190, 200, 0.25);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(237, 254, 255, 0.96), rgba(220, 247, 250, 0.78)),
    rgba(224, 250, 252, 0.9);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
}
body:not(.auth-locked) .work-order-detail-activity-item > .work-order-thread-avatar[data-thread-avatar="person"],
body:not(.auth-locked) .work-order-thread-avatar[data-thread-avatar="person"] {
  color: #ffffff;
  border-color: rgba(8, 127, 140, 0.22);
  background:
    radial-gradient(circle at 30% 20%, rgba(49, 211, 218, 0.7), transparent 34%),
    linear-gradient(135deg, #0a7890, #123f5a);
  box-shadow: 0 8px 18px rgba(8, 79, 92, 0.14);
}
body:not(.auth-locked) .work-order-thread-avatar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}
body:not(.auth-locked) .work-order-thread-content {
  min-width: 0;
  display: grid;
  gap: 5px;
}
body:not(.auth-locked) .work-order-thread-topline {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 7px;
  color: rgba(50, 73, 89, 0.72);
  font-size: 0.84rem;
  line-height: 1.25;
}
body:not(.auth-locked) .work-order-thread-topline strong {
  display: inline;
  color: var(--ops-text, #102b3d);
  font-size: 0.9rem;
  font-weight: 850;
}
body:not(.auth-locked) .work-order-thread-time {
  color: rgba(50, 73, 89, 0.58);
  font-size: 0.78rem;
  white-space: nowrap;
}
body:not(.auth-locked) .work-order-thread-role {
  margin: 0;
  color: rgba(50, 73, 89, 0.58);
  font-size: 0.74rem;
  line-height: 1.2;
}
body:not(.auth-locked) .work-order-thread-content p {
  margin: 0;
  color: rgba(18, 43, 61, 0.88);
  font-size: 0.9rem;
  line-height: 1.38;
}
body:not(.auth-locked) .work-order-detail-activity-item.is-deleted {
  opacity: 0.78;
}
body:not(.auth-locked) .work-order-thread-deleted-copy {
  color: rgba(50, 73, 89, 0.62) !important;
  font-style: italic;
}
body:not(.auth-locked) .work-order-thread-controls {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 3px;
}
body:not(.auth-locked) .work-order-thread-inline-action {
  min-width: 0;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(18, 43, 61, 0.72);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
body:not(.auth-locked) .work-order-thread-inline-action:hover {
  border-color: rgba(11, 156, 171, 0.24);
  background: rgba(229, 251, 252, 0.84);
  color: #087f8c;
}
body:not(.auth-locked) .work-order-thread-inline-action.is-active {
  border-color: rgba(11, 156, 171, 0.28);
  background: rgba(210, 247, 250, 0.9);
  color: #087f8c;
}
body:not(.auth-locked) .work-order-thread-inline-action.is-danger {
  color: rgba(142, 45, 54, 0.78);
}
body:not(.auth-locked) .work-order-thread-inline-action.is-danger:hover {
  border-color: rgba(220, 68, 82, 0.22);
  background: rgba(255, 238, 240, 0.92);
  color: #b22a38;
}
body:not(.auth-locked) .work-order-thread-inline-action.is-confirming {
  border-color: rgba(220, 68, 82, 0.28);
  background: rgba(255, 232, 235, 0.98);
  color: #b22a38;
}
body:not(.auth-locked) .work-order-thread-inline-action svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
}
body:not(.auth-locked) .work-order-thread-inline-action strong {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(8, 127, 140, 0.12);
  color: #087f8c;
  font-size: 0.66rem;
}
body:not(.auth-locked) .work-order-thread-ack-summary {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  color: rgba(50, 73, 89, 0.56);
  font-size: 0.72rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:not(.auth-locked) .work-order-thread-media {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 72px));
  gap: 7px;
  margin-top: 3px;
}
body:not(.auth-locked) .work-order-thread-media-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 12px;
  background: rgba(236, 247, 250, 0.82);
  cursor: pointer;
}
body:not(.auth-locked) .work-order-thread-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.96);
}
body:not(.auth-locked) .work-order-thread-media-thumb:hover {
  border-color: rgba(11, 156, 171, 0.34);
  transform: translateY(-1px);
}
@media (max-width: 760px) {
  body:not(.auth-locked) {
    --mobile-field-action-min-height: 46px;
  }
  body:not(.auth-locked) .work-order-detail-summary-card,
  body:not(.auth-locked) .work-order-detail-activity-card {
    padding: 12px;
    border-radius: 16px;
  }
  body:not(.auth-locked) .work-order-detail-title-actions {
    flex-wrap: wrap;
    gap: 7px;
  }
  body:not(.auth-locked) .work-order-detail-primary-action {
    display: none;
  }
  body:not(.auth-locked) .work-order-thread-composer {
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
  }
  body:not(.auth-locked) .work-order-mention-menu {
    right: 10px;
    left: 10px;
    top: calc(10px + 5.1rem);
  }
  body:not(.auth-locked) .work-order-thread-composer textarea {
    min-height: 84px;
    max-height: min(28dvh, 154px);
    font-size: 0.9rem;
  }
  body:not(.auth-locked) .work-order-thread-composer-actions {
    position: sticky;
    bottom: calc(6px + var(--mobile-keyboard-inset, 0px));
    z-index: 6;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    margin: 0 -4px -4px;
    padding: 8px;
    border: 1px solid rgba(13, 36, 56, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(249, 252, 253, 0.9), rgba(255, 255, 255, 0.98));
    box-shadow: 0 -10px 22px rgba(17, 38, 56, 0.08);
    backdrop-filter: blur(14px) saturate(1.04);
    -webkit-backdrop-filter: blur(14px) saturate(1.04);
  }
  body:not(.auth-locked) .work-order-thread-composer-group {
    flex: 1 1 auto;
    justify-content: stretch;
  }
  body:not(.auth-locked) .work-order-thread-composer-primary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  }
  body:not(.auth-locked) .work-order-thread-action,
  body:not(.auth-locked) .work-order-thread-complete,
  body:not(.auth-locked) .work-order-thread-submit {
    width: 100%;
    min-height: var(--mobile-field-action-min-height);
    justify-content: center;
    padding: 0 10px;
    font-size: 0.82rem;
  }
  body:not(.auth-locked) .work-order-thread-composer[aria-busy="true"]::after {
    width: 100%;
    min-height: 34px;
    justify-content: center;
    border-radius: 14px;
  }
  body:not(.auth-locked) .work-order-thread-pending-media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
  }
  body:not(.auth-locked) .work-order-thread-pending-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 12px;
  }
  body:not(.auth-locked) .work-order-thread-pending-remove {
    width: 30px;
    height: 30px;
  }
  body:not(.auth-locked) .work-order-thread-media {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body:not(.auth-locked) .work-order-thread-ack-summary {
    max-width: 180px;
  }
}
@media (max-width: 390px) {
  body:not(.auth-locked) .work-order-thread-composer-actions {
    display: grid;
    gap: 8px;
  }
  body:not(.auth-locked) .work-order-thread-composer-group {
    justify-content: stretch;
  }
  body:not(.auth-locked) .work-order-thread-action,
  body:not(.auth-locked) .work-order-thread-complete,
  body:not(.auth-locked) .work-order-thread-submit {
    flex: 1 1 0;
    justify-content: center;
  }
}
body:not(.auth-locked) :is(
  .workspace-global-title h1,
  .section-heading h2,
  .app-screen-header-main h2,
  .app-screen-header-main h3,
  .report-overview-topline h3,
  .report-list-heading h3,
  .report-form-topline h3,
  .work-order-week-title-row h3,
  .vessel-documents-header h3,
  .vessel-documents-section-head h4,
  .compact-disclosure-summary-main h4,
  .report-preview-drawer-header h3
) {
  font-family: var(--body-font);
  font-weight: 850;
  letter-spacing: 0;
}
body:not(.auth-locked) :is(
  .workspace-global-date,
  .workspace-global-date span,
  .log-period,
  .app-screen-period,
  .report-period-shell .log-period,
  .work-order-week-heading .app-screen-period
) {
  font-family: var(--body-font);
  font-weight: 850;
  letter-spacing: 0;
}
body[data-active-view="vessel"]:not(.auth-locked) .vessel-document-thumbnail,
.vessel-document-thumbnail {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  border-color: rgba(30, 176, 188, 0.22);
}
body[data-active-view="vessel"]:not(.auth-locked) .vessel-document-thumbnail .vessel-document-line-icon,
.vessel-document-thumbnail .vessel-document-line-icon {
  width: 23px;
  height: 23px;
  stroke-width: 1.9;
}
body:not(.auth-locked) {
  --ops-icon-glass: radial-gradient(circle at 34% 18%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(234, 254, 255, 0.98), rgba(204, 244, 248, 0.84));
  --ops-icon-glass-strong: radial-gradient(circle at 34% 18%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(226, 253, 255, 0.98), rgba(184, 239, 246, 0.9));
  --ops-icon-border: rgba(30, 176, 188, 0.3);
  --ops-icon-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 30px rgba(7, 132, 148, 0.13);
  --ops-icon-color: #087f8c;
  --ops-icon-color-strong: #056f7e;
}
body:not(.auth-locked) :is(
  .overview-command-metric-icon,
  .mobile-overview-icon,
  .mobile-overview-action-icon,
  .vessel-command-stat-icon,
  .vessel-stat-icon,
  .vessel-context-icon,
  .vessel-status-system-icon,
  .systems-quick-add-card-icon,
  .systems-quick-add-detail-icon,
  .systems-watch-chip > span,
  .systems-watch-icon,
  .systems-watch-wide-icon,
  .systems-watch-empty-icon,
  .maintenance-summary-icon,
  .maintenance-focus-icon,
  .maintenance-detail-icon,
  .maintenance-schedule-icon,
  .maintenance-system-icon,
  .maintenance-system-board-icon,
  .maintenance-system-board-task-icon,
  .maintenance-system-kpi-icon,
  .maintenance-system-table-icon,
  .maintenance-system-detail-icon,
  .maintenance-system-activity-icon,
  .crew-search-icon,
  .crew-summary-icon,
  .inventory-summary-icon,
  .inventory-item-icon,
  .inventory-empty-icon,
  .inventory-activity-icon
) {
  color: var(--ops-icon-color);
  border-color: var(--ops-icon-border);
  background: var(--ops-icon-glass);
  box-shadow: var(--ops-icon-shadow);
}
body:not(.auth-locked) :is(
  .overview-command-metric-icon,
  .mobile-overview-icon,
  .mobile-overview-action-icon,
  .vessel-command-stat-icon,
  .vessel-stat-icon,
  .vessel-context-icon,
  .vessel-status-system-icon,
  .systems-quick-add-card-icon,
  .systems-quick-add-detail-icon,
  .systems-watch-chip > span,
  .systems-watch-icon,
  .systems-watch-wide-icon,
  .systems-watch-empty-icon,
  .maintenance-summary-icon,
  .maintenance-focus-icon,
  .maintenance-detail-icon,
  .maintenance-schedule-icon,
  .maintenance-system-icon,
  .maintenance-system-board-icon,
  .maintenance-system-board-task-icon,
  .maintenance-system-kpi-icon,
  .maintenance-system-table-icon,
  .maintenance-system-detail-icon,
  .maintenance-system-activity-icon,
  .crew-search-icon,
  .crew-summary-icon,
  .inventory-summary-icon,
  .inventory-item-icon,
  .inventory-empty-icon,
  .inventory-activity-icon
) svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
body:not(.auth-locked) :is(
  .overview-command-metric,
  .systems-quick-add-card,
  .systems-watch-card,
  .systems-watch-wide-card,
  .maintenance-summary-card,
  .maintenance-system-list-row,
  .maintenance-system-board-group,
  .crew-section .app-screen-summary-card,
  .inventory-summary-card,
  .inventory-table tbody tr
) :is(
  .overview-command-metric-icon,
  .systems-quick-add-card-icon,
  .systems-watch-icon,
  .systems-watch-wide-icon,
  .maintenance-summary-icon,
  .maintenance-system-icon,
  .maintenance-system-board-icon,
  .crew-summary-icon,
  .inventory-summary-icon,
  .inventory-item-icon
) {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}
body:not(.auth-locked) :is(
  .overview-command-metric:hover,
  .overview-command-metric:focus-visible,
  .systems-quick-add-card:hover,
  .systems-quick-add-card:focus-visible,
  .systems-watch-card:hover,
  .systems-watch-wide-card:hover,
  .maintenance-summary-card:hover,
  .maintenance-system-list-row:hover,
  .maintenance-system-board-group:hover,
  .crew-section .app-screen-summary-card:hover,
  .inventory-summary-card:hover,
  .inventory-table tbody tr:hover
) :is(
  .overview-command-metric-icon,
  .systems-quick-add-card-icon,
  .systems-watch-icon,
  .systems-watch-wide-icon,
  .maintenance-summary-icon,
  .maintenance-system-icon,
  .maintenance-system-board-icon,
  .crew-summary-icon,
  .inventory-summary-icon,
  .inventory-item-icon
) {
  transform: translateY(-1px) scale(1.025);
  border-color: rgba(26, 202, 213, 0.42);
  background: var(--ops-icon-glass-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 36px rgba(7, 132, 148, 0.18);
}
body:not(.auth-locked) .overview-command-metric {
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 20px;
}
body:not(.auth-locked) .overview-command-metric-icon {
  width: 68px;
  height: 68px;
  border-radius: 22px;
}
body:not(.auth-locked) .overview-command-metric-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 2;
}
body:not(.auth-locked) .mobile-overview-icon,
body:not(.auth-locked) .mobile-overview-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
}
body:not(.auth-locked) .mobile-overview-icon svg,
body:not(.auth-locked) .mobile-overview-action-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}
@media (max-width: 760px) {
  body:not(.auth-locked) .overview-command-metric {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 14px;
  }
  body:not(.auth-locked) .overview-command-metric-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }
  body:not(.auth-locked) .overview-command-metric-icon svg {
    width: 28px;
    height: 28px;
  }
  body:not(.auth-locked) .mobile-overview-icon,
  body:not(.auth-locked) .mobile-overview-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }
  body:not(.auth-locked) .mobile-overview-icon svg,
  body:not(.auth-locked) .mobile-overview-action-icon svg {
    width: 23px;
    height: 23px;
  }
}
body:not(.auth-locked) {
  --hc-surface-border: rgba(13, 36, 56, 0.075);
  --hc-surface-border-strong: rgba(13, 36, 56, 0.11);
  --hc-surface-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 251, 252, 0.8));
  --hc-surface-bg-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(247, 251, 252, 0.68));
  --hc-shadow-card: 0 16px 38px rgba(10, 31, 45, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --hc-shadow-row: 0 8px 20px rgba(10, 31, 45, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --hc-radius-card: 20px;
  --hc-radius-row: 16px;
  --hc-focus: 0 0 0 4px rgba(30, 176, 188, 0.14);
  --hc-status-green: #17745f;
  --hc-status-amber: #986019;
  --hc-status-red: #a63f35;
  --hc-status-blue: #086f8c;
}
body:not(.auth-locked) :is(
  .workspace-global-title h1,
  .app-screen-header-main h2,
  .app-screen-header-main h3,
  .section-heading h2,
  .section-heading h3,
  .overview-card h3,
  .overview-command-panel h3,
  .overview-command-metric-copy strong,
  .work-order-week-title-row h3,
  .work-order-detail-title-row h3,
  .work-order-detail-hero-title,
  .work-order-thread-summary h3,
  .maintenance-command-card-head h3,
  .maintenance-system-detail-main h3,
  .maintenance-system-board-title strong,
  .systems-watch-header h3,
  .systems-quick-add-head h4,
  .systems-quick-add-configured-head h4,
  .vessel-profile-title-row h2,
  .vessel-documents-header h3,
  .report-overview-topline h3,
  .report-list-heading h3,
  .report-preview-drawer-header h3,
  .inventory-dashboard-title h2,
  .inventory-table-heading h3,
  .crew-name,
  .notification-center-header h2,
  .notification-feed-header h3,
  .notification-detail-header h3,
  .empty-state-title
) {
  font-family: var(--body-font);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.08;
}
body:not(.auth-locked) :is(
  .eyebrow,
  .metric-label,
  .app-screen-period,
  .workspace-global-date,
  .card-meta,
  .empty-state-eyebrow,
  .notification-center-eyebrow,
  .notification-detail-label,
  .vessel-status-detail-label,
  .maintenance-systems-search,
  .maintenance-systems-filter,
  .inventory-summary-card > div > span,
  .report-summary-card .metric-label
) {
  letter-spacing: 0;
  line-height: 1.18;
}
body:not(.auth-locked) :is(
  .overview-card,
  .app-screen-summary-card,
  .report-summary-card,
  .report-overview-card,
  .report-list-shell,
  .report-period-shell,
  .work-order-week-card,
  .work-order-summary-card,
  .work-order-preview-row,
  .work-order-detail-card,
  .work-order-thread-section,
  .work-order-thread-composer,
  .work-order-thread-media-card,
  .maintenance-summary-card,
  .maintenance-command-card,
  .maintenance-system-shell,
  .maintenance-system-detail-panel,
  .maintenance-system-board-group,
  .systems-watch-dashboard,
  .systems-quick-add-shell,
  .systems-quick-add-detail,
  .vessel-profile-hero,
  .vessel-document-category-card,
  .vessel-documents-table,
  .inventory-table-card,
  .inventory-insight-card,
  .inventory-summary-card,
  .inventory-empty-panel,
  .crew-directory-item,
  .vendor-directory-item,
  .notification-center,
  .notification-center-feed,
  .notification-detail-card,
  .empty-state
) {
  border-color: var(--hc-surface-border);
  background: var(--hc-surface-bg);
  box-shadow: var(--hc-shadow-card);
}
body:not(.auth-locked) :is(
  .overview-command-list-row,
  .weekly-log-row,
  .work-order-mobile-row,
  .work-order-suggestion-row,
  .work-order-thread-note,
  .work-order-detail-activity-item,
  .maintenance-schedule-row,
  .maintenance-activity-row,
  .maintenance-system-list-row,
  .maintenance-system-activity-row,
  .systems-quick-add-row,
  .systems-watch-card,
  .systems-watch-wide-card,
  .vessel-document-row,
  .vessel-documents-table-row,
  .vessel-health-factor-row,
  .vessel-activity-row,
  .inventory-table tbody tr,
  .inventory-category-value-row,
  .notification-timeline-item,
  .crew-directory-toggle
) {
  min-width: 0;
  border-color: rgba(13, 36, 56, 0.065);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--hc-shadow-row);
}
body:not(.auth-locked) :is(
  .overview-command-list-row:hover,
  .overview-command-list-row:focus-visible,
  .work-order-preview-row:hover,
  .work-order-preview-row:focus-visible,
  .work-order-mobile-row:hover,
  .maintenance-schedule-row:hover,
  .maintenance-system-list-row:hover,
  .systems-quick-add-row:hover,
  .systems-watch-card:hover,
  .systems-watch-wide-card:hover,
  .vessel-health-factor-row:hover,
  .vessel-health-factor-row:focus-visible,
  .vessel-activity-row:hover,
  .vessel-activity-row:focus-visible,
  .vessel-document-row:hover,
  .vessel-documents-table-row:hover,
  .inventory-table tbody tr:hover,
  .crew-directory-item:hover
) {
  border-color: rgba(30, 176, 188, 0.22);
  background: rgba(246, 253, 254, 0.88);
  box-shadow: 0 12px 28px rgba(8, 127, 140, 0.075);
}
body:not(.auth-locked) :is(
  .overview-card,
  .app-screen-summary-card,
  .report-summary-card,
  .maintenance-summary-card,
  .inventory-summary-card,
  .work-order-summary-card
) {
  border-radius: var(--hc-radius-card);
}
body:not(.auth-locked) :is(
  .work-order-preview-row,
  .work-order-mobile-row,
  .maintenance-schedule-row,
  .maintenance-system-list-row,
  .systems-quick-add-row,
  .vessel-document-row,
  .vessel-documents-table-row,
  .inventory-table tbody tr
) {
  border-radius: var(--hc-radius-row);
}
body:not(.auth-locked) :is(
  .status-badge,
  .priority-badge,
  .category-chip,
  .inventory-category-chip,
  .maintenance-category-chip,
  .systems-watch-status,
  .vessel-document-status-pill,
  .notification-severity-pill,
  .inventory-stock-badge,
  .crew-status-chip
) {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 999px;
  color: rgba(30, 52, 68, 0.82);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.05;
  white-space: nowrap;
}
body:not(.auth-locked) :is(.status-badge, .priority-badge):not(:empty)::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.76;
}
body:not(.auth-locked) :is(
  .status-ready,
  .status-active,
  .status-completed,
  .status-paid,
  .status-scheduled,
  .status-badge.active,
  .status-badge.success,
  .status-badge.is-success,
  .inventory-stock-badge[data-stock-status="in-stock"]
) {
  color: var(--hc-status-green);
  border-color: rgba(35, 122, 98, 0.18);
  background: rgba(226, 248, 239, 0.82);
}
body:not(.auth-locked) :is(
  .status-open,
  .status-progress,
  .status-in-progress,
  .status-draft,
  .status-info,
  .priority-badge.priority-medium,
  .priority-badge.medium,
  .priority-badge.mid
) {
  color: var(--hc-status-blue);
  border-color: rgba(30, 176, 188, 0.2);
  background: rgba(220, 247, 250, 0.82);
}
body:not(.auth-locked) :is(
  .status-warning,
  .status-due,
  .status-waiting-for-vessel,
  .priority-badge.high,
  .priority-badge.priority-high,
  .inventory-stock-badge[data-stock-status="low-stock"]
) {
  color: var(--hc-status-amber);
  border-color: rgba(175, 112, 24, 0.2);
  background: rgba(255, 239, 217, 0.86);
}
body:not(.auth-locked) :is(
  .status-overdue,
  .status-critical,
  .status-danger,
  .status-blocked,
  .priority-badge.critical,
  .priority-badge.priority-critical,
  .inventory-stock-badge[data-stock-status="out-of-stock"]
) {
  color: var(--hc-status-red);
  border-color: rgba(185, 77, 60, 0.2);
  background: rgba(255, 231, 226, 0.86);
}
body:not(.auth-locked) :is(
  .primary-button,
  .ghost-button,
  .text-button,
  .report-action-button,
  .action-overflow-trigger,
  .empty-state-action,
  .table-action,
  .user-table-button,
  .notification-center-action,
  .notification-center-read-button,
  .work-order-thread-action,
  .work-order-thread-submit,
  .work-order-thread-complete
) {
  min-height: 40px;
  border-radius: 999px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
}
body:not(.auth-locked) :is(
  input,
  select,
  textarea,
  [contenteditable="true"],
  [contenteditable=""]
) {
  border-radius: 14px;
  line-height: 1.35;
}
body:not(.auth-locked) :is(
  .overview-command-list-row strong,
  .work-order-preview-row strong,
  .work-order-mobile-row-main strong,
  .maintenance-schedule-main strong,
  .maintenance-system-copy strong,
  .maintenance-system-table-name strong,
  .vessel-activity-copy strong,
  .notification-center-item-copy strong,
  .inventory-item-cell strong,
  .crew-name
) {
  color: #10283a;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.18;
}
body:not(.auth-locked) :is(
  .overview-command-row-copy small,
  .work-order-row-meta,
  .work-order-mobile-row-subline,
  .maintenance-schedule-main span,
  .maintenance-schedule-meta span,
  .maintenance-system-copy span,
  .vessel-activity-copy small,
  .notification-center-item-copy small,
  .notification-center-item-meta,
  .inventory-item-cell small,
  .crew-meta
) {
  color: rgba(49, 73, 90, 0.74);
  line-height: 1.28;
}
body:not(.auth-locked) :is(
  .table-wrapper,
  .report-table-shell,
  .inventory-table-scroll,
  .vessel-documents-table-scroll,
  .vendor-table-wrap,
  .user-table-wrap
) {
  border-radius: 18px;
  border-color: rgba(13, 36, 56, 0.07);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
body:not(.auth-locked) :is(
  .inventory-table,
  .report-generated-table,
  .vessel-documents-table,
  .maintenance-system-board-table
) {
  border-collapse: separate;
  border-spacing: 0 8px;
}
body:not(.auth-locked) :is(
  .inventory-table th,
  .inventory-table td,
  .report-generated-table-row,
  .vessel-documents-table-row,
  .maintenance-system-board-row,
  .maintenance-system-table-cell
) {
  line-height: 1.24;
}
body:not(.auth-locked) .empty-state {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(30, 176, 188, 0.13);
  border-radius: 22px;
  text-align: center;
  overflow: hidden;
}
body:not(.auth-locked) .compact-empty-state {
  gap: 7px;
  padding: 18px;
  border-radius: 18px;
}
body:not(.auth-locked) .empty-state::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(30, 176, 188, 0.08), transparent 44%);
}
body:not(.auth-locked) .empty-state > * {
  position: relative;
  z-index: 1;
}
body:not(.auth-locked) .empty-state-icon {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--ops-icon-border);
  border-radius: 19px;
  color: var(--ops-icon-color);
  background: var(--ops-icon-glass);
  box-shadow: var(--ops-icon-shadow);
}
body:not(.auth-locked) .compact-empty-state .empty-state-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
}
body:not(.auth-locked) .empty-state-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body:not(.auth-locked) .compact-empty-state .empty-state-icon svg {
  width: 23px;
  height: 23px;
}
body:not(.auth-locked) .empty-state-title {
  color: #122b3d;
  font-size: clamp(1rem, 1.2vw, 1.18rem);
}
body:not(.auth-locked) .empty-state-copy {
  max-width: 48ch;
  margin: 0;
  color: rgba(49, 73, 90, 0.76);
  font-size: 0.9rem;
  line-height: 1.42;
}
body:not(.auth-locked) :is(
  .notification-center-item-icon,
  .notification-detail-icon,
  .notification-detail-empty-icon,
  .notification-center-empty,
  .vessel-activity-icon,
  .work-order-thread-avatar[data-thread-avatar="system"],
  .work-order-thread-avatar[data-thread-avatar="deleted"],
  .work-order-thread-avatar[data-thread-avatar="activity"],
  .work-order-thread-avatar[data-thread-avatar="photo"]
) {
  color: var(--ops-icon-color);
  border: 1px solid rgba(30, 176, 188, 0.24);
  background: var(--ops-icon-glass);
  box-shadow: var(--ops-icon-shadow);
}
body:not(.auth-locked) :is(
  .notification-center-item-icon svg,
  .notification-detail-icon svg,
  .notification-detail-empty-icon svg,
  .notification-center-empty svg,
  .vessel-activity-icon svg,
  .work-order-thread-avatar[data-thread-avatar="system"] svg,
  .work-order-thread-avatar[data-thread-avatar="deleted"] svg,
  .work-order-thread-avatar[data-thread-avatar="activity"] svg,
  .work-order-thread-avatar[data-thread-avatar="photo"] svg
) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
body:not(.auth-locked) .work-order-thread-composer {
  gap: 10px;
  padding: 14px;
}
body:not(.auth-locked) .work-order-thread-composer textarea {
  min-height: 84px;
  padding: 12px 14px;
  resize: vertical;
}
body:not(.auth-locked) .work-order-detail-activity-item {
  padding: 12px;
  border-radius: 16px;
}
body:not(.auth-locked) .work-order-thread-topline {
  gap: 6px 10px;
  line-height: 1.25;
}
body:not(.auth-locked) .work-order-thread-message {
  color: rgba(30, 52, 68, 0.9);
  line-height: 1.42;
}
body:not(.auth-locked) :is(
  .work-order-thread-media-thumb,
  .work-order-photo-thumb,
  .inventory-item-thumbnail,
  .mobile-work-order-thumb,
  .work-order-preview-image,
  .maintenance-suggestion-thumb
) {
  border-color: rgba(30, 176, 188, 0.18);
  background: rgba(230, 249, 251, 0.82);
  box-shadow: 0 10px 24px rgba(13, 36, 56, 0.075);
}
body:not(.auth-locked) :is(
  .workspace-scroll-area,
  .app-main,
  .app-screen,
  .mobile-shell-content,
  .work-order-detail-card,
  .notification-center-body
) {
  min-width: 0;
}
body:not(.auth-locked) :is(
  img,
  video,
  canvas,
  svg
) {
  max-width: 100%;
}
@media (max-width: 900px) {
  body:not(.auth-locked) {
    --hc-radius-card: 18px;
    --hc-radius-row: 14px;
  }
  body:not(.auth-locked) :is(
    .workspace-shell,
    .app-screen,
    .overview-card,
    .report-overview-card,
    .work-order-detail-card,
    .maintenance-command-card,
    .systems-watch-dashboard,
    .systems-quick-add-shell,
    .inventory-table-card,
    .notification-center
  ) {
    gap: 12px;
  }
  body:not(.auth-locked) :is(
    .status-badge,
    .priority-badge,
    .category-chip,
    .inventory-category-chip,
    .maintenance-category-chip,
    .systems-watch-status,
    .notification-severity-pill,
    .inventory-stock-badge,
    .crew-status-chip
  ) {
    min-height: 24px;
    padding: 4px 9px;
    font-size: 0.7rem;
  }
}
@media (max-width: 760px) {
  body:not(.auth-locked) :is(
    .overview-card,
    .app-screen-summary-card,
    .report-summary-card,
    .work-order-summary-card,
    .maintenance-summary-card,
    .inventory-summary-card,
    .crew-section .app-screen-summary-card
  ) {
    padding: 12px;
  }
  body:not(.auth-locked) :is(
    .work-order-mobile-row,
    .work-order-preview-row,
    .maintenance-schedule-row,
    .maintenance-system-list-row,
    .systems-quick-add-row,
    .notification-center-item,
    .vessel-activity-row
  ) {
    padding: 10px;
  }
  body:not(.auth-locked) :is(
    .primary-button,
    .ghost-button,
    .text-button,
    .report-action-button,
    .action-overflow-trigger,
    .empty-state-action,
    .work-order-thread-action,
    .work-order-thread-submit,
    .work-order-thread-complete
  ) {
    min-height: 38px;
    padding-inline: 12px;
    font-size: 0.78rem;
  }
  body:not(.auth-locked) .empty-state {
    padding: 18px 14px;
  }
  body:not(.auth-locked) .empty-state-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
  body:not(.auth-locked) .empty-state-icon svg {
    width: 24px;
    height: 24px;
  }
  body:not(.auth-locked) .empty-state-copy {
    font-size: 0.82rem;
    line-height: 1.34;
  }
  body:not(.auth-locked) .work-order-thread-composer {
    padding: 10px;
  }
  body:not(.auth-locked) .work-order-thread-composer textarea {
    min-height: 76px;
  }
  body:not(.auth-locked) :is(
    .work-order-thread-action,
    .work-order-thread-submit,
    .work-order-thread-complete
  ) {
    min-height: var(--mobile-field-action-min-height, 46px);
    justify-content: center;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions > * {
    min-height: var(--mobile-field-action-min-height, 46px);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview {
    max-height: none;
    overflow: visible;
  }
}
body:not(.auth-locked) .work-order-photo-field-header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
body:not(.auth-locked) .work-order-photo-field-header strong {
  display: block;
  color: var(--ops-text, #102b3d);
  font-size: 0.98rem;
  line-height: 1.18;
}
body:not(.auth-locked) .work-order-photo-controls {
  display: grid;
  grid-template-columns: minmax(130px, 0.44fr) minmax(0, 1fr);
  gap: 10px;
}
body:not(.auth-locked) .work-order-photo-controls label {
  min-width: 0;
}
body:not(.auth-locked) .work-order-photo-dropzone {
  min-width: 0;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px dashed rgba(8, 127, 140, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(37, 206, 218, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(241, 253, 254, 0.96), rgba(232, 247, 250, 0.82));
  color: var(--ops-text, #102b3d);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
body:not(.auth-locked) .work-order-photo-dropzone:hover,
body:not(.auth-locked) .work-order-photo-dropzone.is-dragging {
  border-color: rgba(11, 156, 171, 0.72);
  background:
    radial-gradient(circle at 0 0, rgba(37, 206, 218, 0.22), transparent 32%),
    linear-gradient(180deg, rgba(235, 253, 255, 0.98), rgba(220, 246, 250, 0.9));
  box-shadow: 0 14px 34px rgba(8, 127, 140, 0.12);
  transform: translateY(-1px);
}
body:not(.auth-locked) .work-order-photo-dropzone-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  color: #087f8c;
  border: 1px solid rgba(55, 190, 200, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(237, 254, 255, 0.96), rgba(216, 247, 250, 0.82)),
    rgba(224, 250, 252, 0.9);
}
body:not(.auth-locked) .work-order-photo-dropzone-icon::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 6px;
  box-shadow: inset 0 -7px 0 rgba(8, 127, 140, 0.16);
}
body:not(.auth-locked) .work-order-photo-dropzone span:last-of-type {
  min-width: 0;
  display: grid;
  gap: 3px;
}
body:not(.auth-locked) .work-order-photo-dropzone strong {
  color: var(--ops-text, #102b3d);
  font-size: 0.94rem;
  line-height: 1.18;
}
body:not(.auth-locked) .work-order-photo-dropzone small {
  color: var(--ops-muted, rgba(50, 73, 89, 0.72));
  font-size: 0.8rem;
  line-height: 1.35;
}
body:not(.auth-locked) .work-order-photo-dropzone input[type="file"],
body:not(.auth-locked) .work-order-thread-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
body:not(.auth-locked) .work-order-media-category-pill,
body:not(.auth-locked) .work-order-media-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  color: #087f8c;
  border: 1px solid rgba(8, 127, 140, 0.18);
  background: rgba(226, 249, 251, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
body:not(.auth-locked) .work-order-media-category-pill {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  line-height: 1;
}
body:not(.auth-locked) .work-order-media-category-pill svg,
body:not(.auth-locked) .work-order-media-summary-chip svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body:not(.auth-locked) .work-order-media-category-pill[data-media-category="after"],
body:not(.auth-locked) .work-order-media-summary-chip[data-media-category="after"] {
  color: #087947;
  border-color: rgba(8, 121, 71, 0.2);
  background: rgba(222, 247, 232, 0.86);
}
body:not(.auth-locked) .work-order-media-category-pill[data-media-category="issue"],
body:not(.auth-locked) .work-order-media-summary-chip[data-media-category="issue"] {
  color: #a24318;
  border-color: rgba(199, 91, 32, 0.22);
  background: rgba(255, 237, 223, 0.9);
}
body:not(.auth-locked) .work-order-media-category-pill[data-media-category="before"],
body:not(.auth-locked) .work-order-media-summary-chip[data-media-category="before"] {
  color: #0b5f8f;
  border-color: rgba(11, 95, 143, 0.2);
  background: rgba(225, 241, 251, 0.86);
}
body:not(.auth-locked) .work-order-photo-preview-meta {
  align-items: flex-start;
}
body:not(.auth-locked) .work-order-photo-preview-meta > span {
  min-width: 0;
  display: grid;
  gap: 6px;
}
body:not(.auth-locked) .work-order-photo-preview-meta small {
  color: var(--ops-muted, rgba(50, 73, 89, 0.72));
  font-size: 0.78rem;
  line-height: 1.3;
}
body:not(.auth-locked) .work-order-photo-gallery.is-operational-media[data-work-order-photo-gallery] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
body:not(.auth-locked) .work-order-media-summary {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
body:not(.auth-locked) .work-order-media-summary-chip {
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1;
}
body:not(.auth-locked) .work-order-media-summary-chip strong {
  color: inherit;
  font-size: 0.8rem;
  font-weight: 900;
}
body:not(.auth-locked) .work-order-before-after,
body:not(.auth-locked) .work-order-media-session {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-radius: 16px;
  background: rgba(248, 252, 253, 0.78);
}
body:not(.auth-locked) .work-order-media-session-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body:not(.auth-locked) .work-order-media-session-heading span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ops-text, #102b3d);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.2;
}
body:not(.auth-locked) .work-order-media-session-heading svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #087f8c;
  stroke-width: 1.9;
}
body:not(.auth-locked) .work-order-media-session-heading small {
  flex: 0 0 auto;
  color: var(--ops-muted, rgba(50, 73, 89, 0.68));
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: right;
}
body:not(.auth-locked) .work-order-media-session-grid,
body:not(.auth-locked) .work-order-before-after-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body:not(.auth-locked) .work-order-photo-gallery.is-operational-media .work-order-photo-item {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
}
body:not(.auth-locked) .work-order-photo-gallery.is-operational-media .work-order-photo-thumb {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(13, 36, 56, 0.1);
  background: rgba(232, 247, 250, 0.82);
  box-shadow: 0 8px 20px rgba(17, 38, 56, 0.07);
}
body:not(.auth-locked) .work-order-photo-gallery.is-operational-media .work-order-photo-thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(17, 38, 56, 0.1);
}
body:not(.auth-locked) .work-order-photo-gallery.is-operational-media .work-order-photo-thumb img,
body:not(.auth-locked) .work-order-photo-gallery.is-operational-media .work-order-photo-thumb.is-unavailable {
  aspect-ratio: 4 / 3;
}
body:not(.auth-locked) .work-order-media-card-meta {
  min-width: 0;
  display: grid;
  gap: 5px;
}
body:not(.auth-locked) .work-order-media-card-meta p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--ops-muted, rgba(50, 73, 89, 0.76));
  font-size: 0.76rem;
  line-height: 1.28;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body:not(.auth-locked) .work-order-thread-media-category {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(120px, 190px);
  align-items: center;
  gap: 8px;
  color: var(--ops-muted, rgba(50, 73, 89, 0.72));
  font-size: 0.78rem;
  font-weight: 800;
}
body:not(.auth-locked) .work-order-thread-media-category select {
  min-height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid rgba(13, 36, 56, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ops-text, #102b3d);
  font: inherit;
  font-size: 0.8rem;
}
body:not(.auth-locked) .work-order-thread-media-card {
  min-width: 0;
  display: grid;
  gap: 5px;
}
body:not(.auth-locked) .work-order-thread-media-card .work-order-media-category-pill {
  max-width: 100%;
}
body:not(.auth-locked) .work-order-thread-media-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ops-muted, rgba(50, 73, 89, 0.72));
  font-size: 0.72rem;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 760px) {
  body:not(.auth-locked) .work-order-photo-controls {
    grid-template-columns: 1fr;
  }
  body:not(.auth-locked) .work-order-photo-dropzone {
    min-height: 78px;
    padding: 12px;
    border-radius: 16px;
  }
  body:not(.auth-locked) .work-order-photo-dropzone-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }
  body:not(.auth-locked) .work-order-media-session-grid,
  body:not(.auth-locked) .work-order-before-after-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  body:not(.auth-locked) .work-order-media-session,
  body:not(.auth-locked) .work-order-before-after {
    padding: 8px;
    border-radius: 14px;
  }
  body:not(.auth-locked) .work-order-media-session-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  body:not(.auth-locked) .work-order-media-session-heading small {
    text-align: left;
  }
  body:not(.auth-locked) .work-order-thread-media-category {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
body:not(.auth-locked) :is(
  button,
  [role="button"],
  .primary-button,
  .ghost-button,
  .text-button,
  .report-action-button,
  .action-overflow-trigger,
  .workspace-tab,
  .filter-chip,
  .maintenance-subtab,
  .workspace-account-trigger,
  .mobile-bottom-nav-item,
  .mobile-shell-action-item,
  .mobile-shell-nav-item,
  .mobile-overview-action,
  .mobile-report-action-button,
  .mobile-record-action,
  .vessel-tool-primary-action,
  .vessel-inline-link
) {
  transition:
    transform var(--motion-quick),
    border-color var(--motion-quick),
    background var(--motion-quick),
    color var(--motion-quick),
    box-shadow var(--motion-smooth),
    filter var(--motion-quick),
    opacity var(--motion-quick);
}
body:not(.auth-locked) :is(
  input,
  select,
  textarea,
  .form-control,
  .work-order-thread-media-category select
) {
  transition:
    border-color var(--motion-quick),
    background var(--motion-quick),
    box-shadow var(--motion-smooth);
}
body:not(.auth-locked) :is(
  .panel,
  .section-block,
  .overview-card,
  .overview-command-card,
  .overview-command-metric,
  .overview-command-list-row,
  .metric-card,
  .app-screen-summary-card,
  .report-overview-card,
  .report-archive-row,
  .report-list-item,
  .work-order-accordion-item,
  .work-order-mobile-row,
  .work-order-suggestion-row,
  .maintenance-row,
  .maintenance-summary-card,
  .maintenance-focus-card,
  .maintenance-asset-card,
  .maintenance-section-card,
  .crew-directory-item,
  .vendor-directory-item,
  .inventory-directory-item,
  .expense-log-card,
  .expense-metric-card,
  .expense-visual-card,
  .vessel-system-config-row,
  .vessel-tool-card,
  .vessel-document-card,
  .mobile-overview-section,
  .mobile-overview-priority-item,
  .mobile-vessel-section,
  .mobile-report-review-row,
  .mobile-report-archive-row
) {
  transition:
    transform var(--motion-smooth),
    border-color var(--motion-quick),
    background var(--motion-quick),
    box-shadow var(--motion-smooth),
    filter var(--motion-quick);
}
body:not(.auth-locked) :is(
  .status-badge,
  .priority-badge,
  .category-chip,
  .filter-chip,
  .mobile-record-chip,
  .mobile-report-step-state,
  .work-order-media-category-pill,
  .work-order-media-summary-chip,
  .health-factor-impact-pill
) {
  transform-origin: center;
  transition:
    transform var(--motion-instant),
    border-color var(--motion-quick),
    background var(--motion-quick),
    color var(--motion-quick),
    box-shadow var(--motion-smooth),
    opacity var(--motion-quick);
}
@media (max-width: 768px), (pointer: coarse) {
  body:not(.auth-locked) {
    --mobile-tap-target-min: 44px;
  }
  body:not(.auth-locked) :is(
    button,
    [role="button"],
    .primary-button,
    .ghost-button,
    .text-button,
    .report-action-button,
    .action-overflow-trigger,
    .workspace-tab,
    .filter-chip,
    .maintenance-subtab,
    .workspace-account-trigger,
    .mobile-bottom-nav-item,
    .mobile-shell-action-item,
    .mobile-shell-nav-item,
    .mobile-overview-action,
    .mobile-report-action-button,
    .mobile-record-action,
    .vessel-tool-primary-action,
    .vessel-inline-link,
    .work-order-photo-dropzone,
    .crew-document-upload-shell,
    .inventory-upload-dropzone,
    .expense-receipt-dropzone,
    .vendor-icon-option
  ) {
    min-width: var(--mobile-tap-target-min) !important;
    min-height: var(--mobile-tap-target-min) !important;
    touch-action: manipulation;
  }
  body:not(.auth-locked) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea,
    .form-control,
    .work-order-thread-media-category select
  ) {
    min-height: var(--mobile-tap-target-min) !important;
    font-size: max(16px, 1rem);
  }
}
body:not(.auth-locked) #work-order-mobile-sheet:not([hidden]) {
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 24px);
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-panel {
  width: min(1560px, calc(100vw - 32px)) !important;
  height: min(940px, calc(var(--visual-viewport-height, 100dvh) - 32px)) !important;
  max-height: calc(var(--visual-viewport-height, 100dvh) - 32px) !important;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: clamp(18px, 1.7vw, 26px);
  overflow: hidden !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 252, 0.96));
  box-shadow: 0 28px 80px rgba(4, 20, 33, 0.28);
}
body:not(.auth-locked) #work-order-mobile-sheet .mobile-shell-sheet-header {
  position: static;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
  padding: 0 0 14px;
  background: transparent;
}
body:not(.auth-locked) #work-order-mobile-sheet .mobile-shell-sheet-header h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: clamp(2rem, 2.8vw, 2.55rem);
  line-height: 1.03;
}
body:not(.auth-locked) #work-order-mobile-sheet .mobile-shell-sheet-header .text-button {
  flex: 0 0 auto;
  min-height: 40px;
  padding-inline: 14px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding: 2px 2px 0 !important;
  scroll-padding-bottom: 96px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host #work-order-form > .work-order-form-grid {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form-topline {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form-topline > div {
  display: none;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form-topline .small-copy {
  display: block;
  max-width: 680px;
  font-size: 0.86rem;
  line-height: 1.32;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-grid {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-column: 1 / -1;
  box-sizing: border-box;
  justify-self: stretch;
  display: grid;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  grid-template-columns: minmax(340px, 0.92fr) minmax(430px, 1.02fr) minmax(430px, 1.06fr);
  grid-template-areas: "setup responsibility notes";
  align-content: start;
  align-items: start;
  gap: 8px 18px;
  padding: 0 4px 0 2px;
  scroll-padding-bottom: 0;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-column {
  width: 100%;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-column-setup {
  grid-area: setup;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-column-responsibility {
  grid-area: responsibility;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-column-notes {
  grid-area: notes;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-basics {
  grid-area: basics !important;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-location {
  grid-area: location !important;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-links {
  grid-area: links !important;
  align-self: start;
  align-content: start;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-crew {
  grid-area: crew !important;
  align-self: start;
  align-content: start;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes {
  grid-area: notes !important;
  display: grid;
  align-self: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px 10px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes .work-order-form-section-heading {
  grid-column: 1 / -1;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-media {
  grid-area: media !important;
  align-self: start;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .work-order-form-grid > .work-order-form-section {
  grid-column: auto;
  grid-row: auto;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .work-order-form-grid > .work-order-form-section-basics {
  grid-area: basics !important;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .work-order-form-grid > .work-order-form-section-location {
  grid-area: location !important;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .work-order-form-grid > .work-order-form-section-links {
  grid-area: links !important;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .work-order-form-grid > .work-order-form-section-crew {
  grid-area: crew !important;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .work-order-form-grid > .work-order-form-section-notes {
  grid-area: notes !important;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .work-order-form-grid > .work-order-form-section-media {
  grid-area: media !important;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-column > .work-order-form-section {
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-field-header {
  grid-column: 1 / -1;
  padding: 0;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-heading,
body:not(.auth-locked) #work-order-mobile-sheet .work-order-link-section-header,
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-field-header {
  display: grid;
  min-width: 0;
  gap: 2px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-heading h4,
body:not(.auth-locked) #work-order-mobile-sheet .work-order-link-section-header h4 {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
body:not(.auth-locked) #work-order-mobile-sheet :is(label, .form-row, .work-order-link-picker-grid, .work-order-photo-controls) {
  width: 100%;
  min-width: 0;
}
body:not(.auth-locked) #work-order-mobile-sheet :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host textarea {
  min-height: clamp(48px, 4.8vh, 64px);
  max-height: none;
  resize: vertical;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes textarea {
  min-height: clamp(48px, 4.8vh, 64px);
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-link-picker-grid,
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-controls {
  grid-template-columns: 1fr;
  gap: 8px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-link-section-header .field-helper,
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-field-header .field-helper {
  line-height: 1.3;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-link-picker-shell {
  gap: 6px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-link-picker-selected,
body:not(.auth-locked) #work-order-mobile-sheet .work-order-link-picker-empty {
  min-height: 18px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-controls {
  grid-template-columns: minmax(126px, 0.38fr) minmax(0, 1fr);
  align-items: end;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-field-header h4,
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-field-header .field-helper {
  display: none;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes label:has(textarea[name="workDone"]),
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes label:has(textarea[name="notes"]) {
  grid-column: 1 / -1;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes label:has(textarea[name="workDone"]) textarea {
  min-height: clamp(54px, 5.2vh, 70px);
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-crew .work-order-crew-picker {
  grid-template-columns: 1fr;
  gap: 8px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-crew .crew-assignment-chip {
  display: grid;
  grid-template-columns: 18px 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 62px;
  padding: 9px 12px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-crew .crew-assignment-chip input {
  margin: 0;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-crew .crew-assignment-avatar {
  width: 34px;
  height: 34px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-crew .crew-assignment-copy {
  min-width: 0;
  gap: 2px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-crew .crew-assignment-copy strong,
body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-crew .crew-assignment-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-dropzone {
  min-height: 56px;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 16px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-dropzone-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-dropzone-icon::before {
  width: 17px;
  height: 17px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-dropzone strong {
  font-size: 0.88rem;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-dropzone small {
  font-size: 0.74rem;
  line-height: 1.25;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview-grid {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 8px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview-card {
  gap: 6px;
  padding: 4px 8px;
  border-radius: 14px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview-card:has(.work-order-photo-preview-meta) {
  grid-template-columns: minmax(96px, 128px) minmax(0, 1fr);
  align-items: center;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview-card .work-order-photo-preview-open {
  min-width: 0;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview-card img {
  height: 48px;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview-card .work-order-photo-preview-meta {
  min-width: 0;
  align-items: center;
  gap: 8px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview-card .work-order-photo-preview-meta > span {
  min-width: 0;
  gap: 4px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview-card .work-order-photo-preview-meta strong,
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview-card .work-order-photo-preview-meta small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview .compact-empty-state {
  min-height: 36px;
  padding: 8px 12px;
}
body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 8px 0 0 !important;
  border-top: 1px solid rgba(13, 36, 56, 0.08);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -8px 18px rgba(17, 38, 56, 0.045);
  backdrop-filter: blur(16px) saturate(1.04);
  -webkit-backdrop-filter: blur(16px) saturate(1.04);
}
@media (min-width: 901px) and (max-width: 1180px) {
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    grid-template-areas:
      "setup responsibility"
      "notes notes";
    overflow-y: auto;
    padding: 2px 6px calc(92px + var(--safe-area-bottom, 0px)) 2px;
    scroll-padding-bottom: calc(104px + var(--safe-area-bottom, 0px));
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes {
    grid-template-columns: minmax(0, 1fr);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes .work-order-form-section-heading {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1181px) and (max-width: 1500px) {
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes .work-order-form-section-heading,
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes label:has(textarea[name="workDone"]),
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes label:has(textarea[name="notes"]) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px), (max-width: 900px) and (pointer: coarse) {
  body:not(.auth-locked) #work-order-mobile-sheet:not([hidden]) {
    align-items: stretch;
    justify-content: stretch;
    height: var(--mobile-visual-height, 100dvh);
    max-height: var(--mobile-visual-height, 100dvh);
    padding: 0 !important;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--mobile-visual-height, 100dvh) !important;
    max-height: var(--mobile-visual-height, 100dvh) !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding:
      max(8px, var(--safe-area-top, 0px))
      max(12px, var(--safe-area-right, 0px))
      max(8px, var(--safe-area-bottom, 0px))
      max(12px, var(--safe-area-left, 0px)) !important;
    border-radius: 0 !important;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .mobile-shell-sheet-header {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 8;
    gap: 8px;
    padding: 8px 0 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 253, 0.92));
    backdrop-filter: blur(16px) saturate(1.04);
    -webkit-backdrop-filter: blur(16px) saturate(1.04);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .mobile-shell-sheet-header h2 {
    font-size: 1.34rem;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden !important;
    padding: 0 1px calc(8px + var(--safe-area-bottom, 0px)) !important;
    scroll-padding-top: calc(var(--safe-area-top, 0px) + 70px);
    scroll-padding-bottom: calc(var(--mobile-form-action-height, 72px) + var(--safe-area-bottom, 0px) + var(--mobile-keyboard-inset, 0px) + 56px);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .report-form-topline .small-copy {
    font-size: 0.8rem;
    line-height: 1.32;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-grid,
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-column,
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes,
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-media {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    gap: 13px;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-grid {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 1px calc(var(--mobile-form-action-height, 72px) + 22px + var(--safe-area-bottom, 0px) + min(var(--mobile-keyboard-inset, 0px), 136px)) !important;
    scroll-padding-bottom: calc(var(--mobile-form-action-height, 72px) + var(--safe-area-bottom, 0px) + min(var(--mobile-keyboard-inset, 0px), 136px) + 24px);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-column {
    grid-area: auto;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-crew .work-order-crew-picker {
    grid-template-columns: 1fr;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-basics,
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-location,
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-crew {
    grid-area: auto !important;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-links,
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes,
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-media {
    grid-area: auto !important;
    grid-column: 1;
    grid-row: auto;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-basics {
    order: 1;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-location {
    order: 2;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-crew {
    order: 3;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-links {
    order: 4;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes {
    order: 5;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-media {
    order: 6;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-form-section-notes .work-order-form-section-heading,
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-field-header {
    grid-column: 1;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .form-row {
    grid-template-columns: 1fr;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host textarea {
    min-height: 86px;
    max-height: min(28dvh, 160px);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-photo-preview {
    max-height: none;
    overflow: visible;
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions {
    position: sticky !important;
    bottom: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 10px 0 max(10px, var(--safe-area-bottom, 0px)) !important;
    box-shadow: 0 -12px 24px rgba(17, 38, 56, 0.08);
  }
  body:not(.auth-locked) #work-order-mobile-sheet .work-order-mobile-sheet-host .form-actions > * {
    min-height: var(--mobile-field-action-min-height, 46px);
  }
}
body:not(.auth-locked) .view-panel.active {
  animation: appViewSettle var(--motion-panel) both;
}
body:not(.auth-locked) .view-stack.is-switching {
  isolation: isolate;
}
body:not(.auth-locked) .view-stack.is-switching .view-panel.active {
  position: relative;
  z-index: 2;
}
body:not(.auth-locked) .view-stack.is-switching .view-panel-exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body:not(.auth-locked) :is(.workspace-tab.active, .filter-chip.active, .maintenance-subtab.active, .mobile-bottom-nav-item.active, .mobile-shell-nav-item.active) {
  animation: activeControlSettle 220ms cubic-bezier(0.2, 0, 0, 1) both;
}
body:not(.auth-locked) :is(.status-badge, .priority-badge, .mobile-record-chip)[data-status],
body:not(.auth-locked) :is(.status-badge, .priority-badge, .mobile-record-chip, .work-order-media-category-pill) {
  animation: statusSettle 260ms cubic-bezier(0.2, 0, 0, 1) both;
}
body:not(.auth-locked) :is(.app-feedback-toast, .workspace-save-feedback, .offline-sync-banner) {
  will-change: transform, opacity;
}
body:not(.auth-locked) .workspace-save-feedback:not([hidden]),
body:not(.auth-locked) .offline-sync-banner:not([hidden]) {
  animation: floatingStatusEnter var(--motion-panel) both;
}
body:not(.auth-locked) .access-modal-shell:not([hidden]) .access-modal-backdrop,
body:not(.auth-locked) .mobile-shell-sheet:not([hidden]) .mobile-shell-sheet-backdrop,
body:not(.auth-locked) .vendor-modal-shell:not([hidden]) .vendor-modal-backdrop,
body:not(.auth-locked) .inventory-modal-shell:not([hidden]) .inventory-modal-backdrop,
body:not(.auth-locked) .work-order-image-viewer-shell:not([hidden]) .work-order-image-viewer-backdrop,
body:not(.auth-locked) .work-order-detail-shell:not([hidden]) .work-order-detail-backdrop,
body:not(.auth-locked) .health-factor-detail-shell:not([hidden]) .health-factor-detail-backdrop {
  animation: modalBackdropSettle var(--motion-panel) both;
}
body:not(.auth-locked) .access-modal-shell:not([hidden]) :is(.access-modal, .account-sheet, .billing-sheet),
body:not(.auth-locked) .report-archive-delete-confirm-shell:not([hidden]) .report-archive-delete-confirm,
body:not(.auth-locked) .vendor-modal-shell:not([hidden]) .vendor-modal,
body:not(.auth-locked) .inventory-modal-shell:not([hidden]) .inventory-modal,
body:not(.auth-locked) .work-order-image-viewer-shell:not([hidden]) .work-order-image-viewer,
body:not(.auth-locked) .work-order-detail-shell:not([hidden]) .work-order-detail-card,
body:not(.auth-locked) .health-factor-detail-shell:not([hidden]) .health-factor-detail-card {
  animation: modalPanelSettle var(--motion-panel) both;
  will-change: transform, opacity;
}
body:not(.auth-locked) :is(
  .mobile-shell-sheet:not([hidden]) .mobile-shell-sheet-panel,
  .vessel-mobile-editor-sheet:not([hidden]) .vessel-mobile-editor-sheet-panel,
  .mobile-record-sheet:not([hidden]) .mobile-record-sheet-panel
) {
  animation: mobileSheetSettle var(--motion-panel) both;
  will-change: transform, opacity;
}
body:not(.auth-locked) .work-order-mobile-sheet:not([hidden]) .work-order-mobile-sheet-panel {
  animation: modalPanelSettle var(--motion-panel) both;
  will-change: transform, opacity;
}
@media (max-width: 768px) {
  body:not(.auth-locked) .work-order-mobile-sheet:not([hidden]) .work-order-mobile-sheet-panel {
    animation: mobileSheetSettle var(--motion-panel) both;
  }
}
body:not(.auth-locked) .loading-state {
  position: relative;
  overflow: hidden;
}
body:not(.auth-locked) .loading-state::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.58) 48%, transparent 82%);
  transform: translateX(-100%);
  animation: skeletonSweep 1.65s ease-in-out infinite;
}
body:not(.auth-locked) .loading-state-shimmer span {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}
body:not(.auth-locked) :is(.primary-button, .ghost-button, .text-button, .report-action-button).is-loading {
  position: relative;
  gap: 8px;
  cursor: progress;
}
body:not(.auth-locked) :is(.primary-button, .ghost-button, .text-button, .report-action-button).is-loading::after {
  content: "";
  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  opacity: 0.82;
  animation: premiumButtonSpin 780ms linear infinite;
}
@media (hover: hover) and (pointer: fine) {
  body:not(.auth-locked) :is(
    .primary-button,
    .ghost-button,
    .text-button,
    .report-action-button,
    .action-overflow-trigger,
    .workspace-account-trigger,
    .mobile-overview-action,
    .mobile-report-action-button,
    .mobile-record-action,
    .vessel-tool-primary-action,
    .vessel-inline-link
  ):hover:not(:disabled) {
    transform: translateY(-1px);
    filter: saturate(1.04);
  }
  body:not(.auth-locked) :is(
    .overview-card,
    .overview-command-card,
    .overview-command-metric,
    .overview-command-list-row,
    .metric-card,
    .app-screen-summary-card,
    .report-overview-card,
    .report-archive-row,
    .report-list-item,
    .work-order-accordion-item,
    .work-order-mobile-row,
    .work-order-suggestion-row,
    .maintenance-row,
    .maintenance-summary-card,
    .maintenance-focus-card,
    .maintenance-asset-card,
    .maintenance-section-card,
    .crew-directory-item,
    .vendor-directory-item,
    .inventory-directory-item,
    .expense-log-card,
    .expense-metric-card,
    .expense-visual-card,
    .vessel-system-config-row,
    .vessel-tool-card,
    .vessel-document-card,
    .mobile-overview-section,
    .mobile-overview-priority-item,
    .mobile-vessel-section,
    .mobile-report-review-row,
    .mobile-report-archive-row
  ):hover {
    transform: translateY(-2px);
    box-shadow: var(--motion-elevate-shadow);
  }
  body:not(.auth-locked) :is(.status-badge, .priority-badge, .category-chip, .work-order-media-category-pill):hover {
    transform: translateY(-1px);
  }
}
body:not(.auth-locked) :is(
  .primary-button,
  .ghost-button,
  .text-button,
  .report-action-button,
  .action-overflow-trigger,
  .workspace-tab,
  .filter-chip,
  .maintenance-subtab,
  .mobile-bottom-nav-item,
  .mobile-shell-action-item,
  .mobile-shell-nav-item
):active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}
body:not(.auth-locked) :is(
  .work-order-photo-thumb img,
  .work-order-thread-media-thumb img,
  .inventory-directory-thumb img,
  .vendor-directory-avatar img,
  .vessel-photo img,
  .mobile-vessel-photo img
) {
  transition: transform var(--motion-panel), filter var(--motion-smooth), opacity var(--motion-quick);
}
@media (hover: hover) and (pointer: fine) {
  body:not(.auth-locked) :is(.work-order-photo-thumb, .work-order-thread-media-thumb):hover img {
    transform: scale(1.025);
  }
}

@keyframes appViewSettle {
  from {
    opacity: .985;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes activeControlSettle {
  0% {
    transform: scale(0.985);
  }
  72% {
    transform: scale(1.012);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes statusSettle {
  from {
    opacity: 0.78;
    transform: translateY(1px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes floatingStatusEnter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes modalBackdropSettle {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modalPanelSettle {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes mobileSheetSettle {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes skeletonSweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes premiumButtonSpin {
  to {
    transform: rotate(1turn);
  }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.auth-locked) *,
  body:not(.auth-locked) *::before,
  body:not(.auth-locked) *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
body:not(.auth-locked) .crew-document-upload-shell {
  align-items: center;
  justify-content: center;
}

@media (min-width:761px){body[data-active-view=overview]:not(.auth-locked) .workspace-scroll-area{padding:clamp(6px,.6vw,10px) clamp(8px,.75vw,12px) clamp(10px,.9vw,14px);scroll-padding-bottom:clamp(10px,.9vw,14px)}body[data-active-view=overview]:not(.auth-locked) .workspace-global-header{padding-bottom:clamp(6px,.65vw,10px)}body[data-active-view=overview]:not(.auth-locked) .view-stack{min-height:calc(var(--visual-viewport-height,100dvh) - clamp(118px,12vw,150px));display:grid}body[data-active-view=overview]:not(.auth-locked) #overview-panel{min-height:100%;display:grid}body[data-active-view=overview]:not(.auth-locked) .overview-command-center{gap:0;min-height:100%;width:100%;box-sizing:border-box;padding:clamp(14px,1.1vw,18px);border:1px solid rgba(13,36,56,.085);border-radius:28px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(247,251,252,.91)),radial-gradient(circle at 14% 0%,rgba(30,176,188,.08),transparent 34%);box-shadow:0 20px 52px rgba(12,36,52,.1),inset 0 1px 0 rgba(255,255,255,.94)}body[data-active-view=overview]:not(.auth-locked) :is(.overview-command-metrics,.overview-command-panels,.overview-command-column){gap:1px;overflow:hidden;background:rgba(13,36,56,.055);box-shadow:none}body[data-active-view=overview]:not(.auth-locked) :is(.overview-command-metrics,.overview-command-panels){border:1px solid rgba(13,36,56,.07)}body[data-active-view=overview]:not(.auth-locked) .overview-command-metrics{border-radius:18px}body[data-active-view=overview]:not(.auth-locked) .overview-command-panels{margin-top:12px;border-radius:20px;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);align-items:start}body[data-active-view=overview]:not(.auth-locked) .overview-command-column{min-width:0;display:grid;align-content:start}body[data-active-view=overview]:not(.auth-locked) :is(.overview-command-metric,.overview-command-panel){border:0;border-radius:0;background:rgba(255,255,255,.82);box-shadow:none;backdrop-filter:none}body[data-active-view=overview]:not(.auth-locked) .overview-command-metric{min-height:82px;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;padding:12px 15px}body[data-active-view=overview]:not(.auth-locked) .overview-command-metric:hover,body[data-active-view=overview]:not(.auth-locked) .overview-command-metric:focus-visible{background:rgba(246,253,254,.96);box-shadow:inset 0 0 0 1px rgba(30,176,188,.16)}body[data-active-view=overview]:not(.auth-locked) .overview-command-metric-icon{width:42px;height:42px;border-radius:14px}body[data-active-view=overview]:not(.auth-locked) .overview-command-metric-icon svg{width:20px;height:20px}body[data-active-view=overview]:not(.auth-locked) .overview-command-panel{min-height:0;padding:14px 16px;gap:8px}body[data-active-view=overview]:not(.auth-locked) .overview-getting-started-panel{grid-column:1/-1}body[data-active-view=overview]:not(.auth-locked) .overview-command-list-row{min-height:44px;padding:6px 0}body[data-active-view=overview]:not(.auth-locked) .overview-command-avatar{width:34px;height:34px}body[data-active-view=overview]:not(.auth-locked) .overview-vessel-status-body{grid-template-columns:minmax(190px,.72fr) minmax(240px,1fr);gap:12px;align-items:center}body[data-active-view=overview]:not(.auth-locked) .overview-vessel-status-panel .reactive-vessel-status-visual{min-height:clamp(124px,10vw,158px)}body[data-active-view=overview]:not(.auth-locked) .overview-vessel-facts div{padding:5px 0}body[data-active-view=overview]:not(.auth-locked) .overview-vessel-health{margin-top:6px;gap:5px 10px}body[data-active-view=overview]:not(.auth-locked) .overview-vessel-health i{height:6px}body[data-active-view=overview]:not(.auth-locked) .overview-vessel-health-factors{display:none}}

body[data-active-view="overview"]:not(.auth-locked) .overview-command-list {
  width: 100%;
  min-width: 0;
  gap: 0;
  background: transparent;
  box-shadow: none;
}

body[data-active-view="overview"]:not(.auth-locked) .overview-command-list-row {
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(13, 36, 56, 0.075);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-active-view="overview"]:not(.auth-locked) .overview-command-list-row:last-child {
  border-bottom: 0;
}

body[data-active-view="overview"]:not(.auth-locked) .overview-command-list-row:hover,
body[data-active-view="overview"]:not(.auth-locked) .overview-command-list-row:focus-visible {
  background: rgba(23, 135, 178, 0.035);
  box-shadow: none;
}