:root {
  --ink: #1f2933;
  --muted: #667085;
  --line: #d9e1e8;
  --paper: #ffffff;
  --canvas: #f4f7f8;
  --teal: #147d76;
  --teal-soft: #dff3ef;
  --amber: #b76e00;
  --amber-soft: #fff1cf;
  --focus-border: #ff8a00;
  --focus-ring: rgba(255, 138, 0, 0.36);
  --focus-bg: #fff7e6;
  --rose: #ba3b46;
  --rose-soft: #ffe3e5;
  --green: #33724b;
  --green-soft: #e1f2e7;
  --blue: #3166a6;
  --blue-soft: #deebfb;
  --violet: #6b4aa0;
  --violet-soft: #eee7f8;
  --card-bg: var(--paper);
  --card-border: var(--line);
  --card-radius: 8px;
  --card-padding: 16px;
  --card-accent: var(--teal);
  --card-hover-shadow: 0 14px 34px rgba(31, 41, 51, 0.13);
  --card-selected-shadow: 0 0 0 3px var(--teal-soft), 0 16px 38px rgba(30, 127, 127, 0.16);
  --jzb-visual-viewport-width: 100vw;
  --jzb-visual-viewport-height: 100vh;
  --jzb-visual-viewport-top: 0px;
  --jzb-visual-viewport-left: 0px;
  --jzb-mobile-browser-bottom-guard: 0px;
  --jzb-shipping-modal-height: var(--jzb-visual-viewport-height);
  --jzb-shipping-wall-height: 432px;
  --jzb-mobile-shipping-wall-height: clamp(286px, 76vw, 340px);
  font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
}

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: var(--ink);
  background: var(--canvas);
}

.boot-screen .brand-logo-mark {
  width: 64px;
  height: 64px;
}

body.is-booting .login-screen,
body.is-booting .app-shell {
  visibility: hidden;
}

[hidden] {
  display: none !important;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(20, 125, 118, 0.12), transparent 36%),
    var(--canvas);
}

.login-card {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(31, 41, 51, 0.14);
}

.login-brand {
  margin-bottom: 4px;
}

.login-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.login-card input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  color: var(--ink);
  font-size: 16px;
}

.login-card .login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  color: var(--ink);
}

.login-card .login-remember input {
  width: 15px;
  height: 15px;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.login-error {
  margin: 0;
  color: #b42318;
  font-weight: 700;
}

.password-reminder-panel {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px;
  border: 1px solid #d8a216;
  border-radius: 6px;
  background: #fff8df;
  color: #523b00;
}

.password-reminder-panel[hidden] {
  display: none;
}

.password-reminder-panel p {
  margin: 0;
  line-height: 1.45;
}

.login-forgot-trigger {
  justify-self: center;
  min-height: 30px;
  padding: 4px 6px;
}

.passkey-login-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: stretch;
}

.passkey-help-button {
  width: 36px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--teal);
  font-size: 18px;
  font-weight: 900;
}

.passkey-help-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #b7d6d1;
  border-radius: 8px;
  background: #f6fbfa;
  color: var(--ink);
  font-size: 13px;
}

.passkey-help-panel[hidden] {
  display: none;
}

.passkey-help-panel p {
  margin: 0;
  font-weight: 700;
}

.passkey-help-panel ol {
  margin: 0;
  padding-left: 18px;
}

.passkey-help-panel li + li {
  margin-top: 5px;
}

.login-reset-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfb;
}

.login-reset-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.login-reset-panel .muted {
  margin: 0;
}

.muted.error {
  color: var(--rose);
}

.muted.success {
  color: var(--teal);
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
}

.sidebar {
  background: #15222b;
  color: #f7fafc;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #ffd68a;
}

.brand-logo-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: block;
}

.brand span,
.sidebar-panel span {
  display: block;
  color: #aab7c2;
  font-size: 12px;
  margin-top: 3px;
}

.nav-list {
  display: grid;
  gap: 7px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.nav-group {
  display: grid;
  gap: 4px;
}

.nav-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-parent::after {
  content: "▾";
  color: #aab7c2;
}

.nav-parent[aria-expanded="false"]::after {
  content: "▸";
}

.nav-submenu {
  display: grid;
  gap: 4px;
  padding-left: 12px;
}

.nav-subitem {
  padding: 9px 12px;
  font-size: 13px;
}

.nav-item {
  border: 0;
  background: transparent;
  color: #cbd5df;
  text-align: left;
  padding: 11px 12px;
  border-radius: 6px;
}

.nav-with-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nav-item.has-pending-events {
  color: #ffffff;
}

.nav-item:hover,
.nav-item.active {
  background: #243746;
  color: #ffffff;
}

.nav-item.locked {
  display: none;
}

.nav-action {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 4px;
  color: #f7fafc;
}

.nav-action.backup-due {
  border-color: rgba(245, 158, 11, 0.7);
  color: #fde68a;
}

.email-notification-toggle {
  justify-content: space-between;
  gap: 10px;
  border-top: 0;
  margin-top: 0;
}

.email-notification-label {
  min-width: 0;
}

.email-notification-switch {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.18);
  box-sizing: border-box;
  transition: background 0.18s ease;
}

.email-notification-switch > span {
  position: absolute;
  top: 3px;
  left: 23px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  transition: left 0.18s ease, background 0.18s ease;
}

.email-notification-toggle.is-off {
  color: #fecaca;
}

.email-notification-toggle.is-off .email-notification-switch {
  background: rgba(220, 38, 38, 0.18);
}

.email-notification-toggle.is-off .email-notification-switch > span {
  left: 5px;
  background: var(--rose);
}

.sidebar-panel {
  margin-top: auto;
  display: grid;
  gap: 8px;
}

.sidebar-panel select {
  width: 100%;
  border: 1px solid #405465;
  background: #1f303d;
  color: #fff;
  border-radius: 6px;
  padding: 9px 10px;
}

.sidebar-panel strong,
.sidebar-panel small {
  display: block;
}

.sidebar-panel small {
  color: #aab7c2;
}

.sidebar-panel .tiny-button {
  justify-self: start;
}

.sidebar-version-widget {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-version-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: #f7fafc;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0;
  text-align: left;
}

.sidebar-version-toggle::after {
  content: "▸";
  color: #aab7c2;
  font-size: 11px;
}

.sidebar-version-toggle[aria-expanded="true"]::after {
  content: "▾";
}

.sidebar-version-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
}

.version-update-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
  flex: 0 0 auto;
}

.sidebar-version-current {
  color: #aab7c2;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-version-details {
  display: grid;
  gap: 7px;
}

.sidebar-version-row {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sidebar-version-row span {
  margin: 0;
  color: #aab7c2;
  font-size: 11px;
}

.sidebar-version-row strong {
  color: #f7fafc;
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sidebar-version-status {
  margin: 0;
  color: #cbd5df;
  font-size: 11px;
  line-height: 1.35;
}

.sidebar-version-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.sidebar-version-actions .tiny-button {
  margin: 0;
}

.version-update-action-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.version-update-action-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
}

.version-update-notice {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 5200;
  width: min(360px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.version-update-notice strong {
  display: block;
  font-size: 14px;
}

.version-update-notice p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.version-update-notice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.current-account-card {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 8px;
  color: #fff;
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.current-account-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
}

.current-account-card > span:last-child {
  min-width: 0;
}

.main {
  min-width: 0;
  padding: 22px;
}

.topbar {
  min-height: 72px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--teal);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 30px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 15px;
}

.top-actions,
.section-bar,
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.search,
.language-switcher {
  min-width: 330px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  height: 42px;
}

.search span {
  color: var(--muted);
  font-size: 13px;
}

.search input {
  border: 0;
  outline: 0;
  width: 100%;
}

.language-switcher {
  min-width: 170px;
}

.language-switcher select {
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
  color: var(--ink);
}

.language-switcher span {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

body[dir="rtl"] {
  direction: rtl;
}

body[dir="rtl"] .sidebar,
body[dir="rtl"] th,
body[dir="rtl"] td,
body[dir="rtl"] .nav-item {
  text-align: right;
}

.primary-action,
.secondary-action,
.ghost-action,
.full-action {
  border-radius: 6px;
  border: 1px solid var(--teal);
  min-height: 40px;
  padding: 0 14px;
  background: var(--paper);
  color: var(--teal);
  font-weight: 700;
}

.primary-action,
.full-action.strong {
  border-color: var(--teal);
  background: var(--teal);
  color: white;
}

.secondary-action {
  background: var(--teal-soft);
}

.danger-action {
  border-color: var(--rose);
  background: var(--rose-soft);
  color: var(--rose);
}

.file-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.file-action input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.hidden-file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.ghost-action {
  border-color: transparent;
  background: transparent;
  color: var(--blue);
}

.order-number-link {
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 900;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.order-number-link:hover {
  color: #1f4f86;
  text-decoration: underline;
}

.inline-record-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--teal);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.inline-record-link:hover {
  text-decoration: underline;
}

.full-action {
  width: 100%;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.metric-grid.compact {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.metric {
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: 16px;
  min-height: 116px;
  display: grid;
  gap: 8px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.metric:hover {
  border-color: var(--teal);
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-2px);
}

.metric span,
.metric small,
.product-meta,
.muted {
  color: var(--muted);
}

.metric strong {
  font-size: 30px;
}

.tone-teal {
  border-top: 4px solid var(--teal);
}

.tone-amber {
  border-top: 4px solid var(--amber);
}

.tone-rose {
  border-top: 4px solid var(--rose);
}

.tone-green {
  border-top: 4px solid var(--green);
}

.dashboard-layout,
.split-layout,
.quote-builder,
.portal-shopping,
.portal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
  gap: 14px;
}

.dashboard-workbench {
  display: grid;
  gap: 16px;
}

.welcome-home {
  min-height: calc(100vh - 132px);
  display: grid;
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 0;
  padding: clamp(32px, 8vh, 96px) 18px;
  text-align: center;
}

.welcome-logo {
  width: min(420px, 74vw);
  max-height: 148px;
  display: block;
}

.welcome-home h2 {
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 800;
  color: #10212b;
  letter-spacing: 0;
}

.welcome-home p {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.global-market-ticker-shell {
  position: sticky;
  top: 0;
  z-index: 35;
  margin: -4px 0 14px;
  display: flex;
  justify-content: flex-end;
  min-height: 48px;
  overflow: hidden;
}

.global-market-ticker {
  border: 1px solid transparent;
  border-radius: var(--card-radius);
  background: transparent;
  box-shadow: none;
  padding: 10px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  transition: box-shadow 0.2s ease;
}

.global-market-ticker summary {
  grid-column: 2;
  grid-row: 1;
  color: var(--teal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 28px;
  min-width: 64px;
  min-height: 28px;
  max-width: 64px;
  max-height: 28px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  margin: 0;
  padding: 0 8px 0 6px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.92);
  user-select: none;
  align-self: center;
  box-sizing: border-box;
}

.global-market-ticker summary::-webkit-details-marker {
  display: none;
}

.global-market-ticker summary::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-right: 5px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  transition: background 0.18s ease;
}

.global-market-ticker:not([open]) {
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  margin-left: auto;
}

.global-market-ticker:not([open]) summary::before {
  background: #dc2626;
}

.global-market-ticker:not([open]) .market-toggle-open,
.global-market-ticker[open] .market-toggle-closed {
  display: none;
}

.global-market-ticker:not([open]) .global-market-ticker-line {
  visibility: hidden;
  pointer-events: none;
}

.global-market-ticker-line {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  height: 28px;
  line-height: 1;
  gap: 10px;
  max-width: 100%;
  overflow-x: visible;
  white-space: nowrap;
  vertical-align: middle;
  scrollbar-width: none;
}

.global-market-ticker-line::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.market-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
  line-height: 1;
  box-sizing: border-box;
}

.global-market-ticker.is-expanding .global-market-ticker-line {
  animation: marketTickerLineReveal 0.18s ease both;
  transform-origin: right center;
}

.global-market-ticker.is-collapsing .global-market-ticker-line {
  animation: marketTickerLineCollapse 0.26s ease both;
  transform-origin: right center;
}

.global-market-ticker.is-expanding .market-ticker-item {
  opacity: 0;
  animation: marketTickerPop 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.global-market-ticker.is-expanding .market-ticker-item:nth-child(1) {
  animation-delay: 0s;
}

.global-market-ticker.is-expanding .market-ticker-item:nth-child(2) {
  animation-delay: 0.32s;
}

.global-market-ticker.is-expanding .market-ticker-item:nth-child(3) {
  animation-delay: 0.64s;
}

.global-market-ticker.is-expanding .market-ticker-item:nth-child(4) {
  animation-delay: 0.96s;
}

@keyframes marketTickerLineReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes marketTickerLineCollapse {
  from {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  to {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes marketTickerPop {
  from {
    opacity: 0;
    transform: translateX(min(42vw, 520px)) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.market-ticker-dxy {
  background: #dbeafe;
  border-color: #93c5fd;
}

.market-ticker-gold {
  background: #fef3c7;
  border-color: #f59e0b;
}

.market-ticker-silver {
  background: #e5e7eb;
  border-color: #94a3b8;
}

.market-ticker-fx {
  background: #dcfce7;
  border-color: #86efac;
}

.market-ticker-item span {
  color: var(--ink);
  line-height: 1;
}

.market-ticker-item strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.market-ticker-item em {
  font-style: normal;
  color: var(--muted);
  line-height: 1;
}

.market-ticker-item.up em {
  color: #15803d;
}

.market-ticker-item.down em {
  color: #b42318;
}

.market-info-card {
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.market-info-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.market-info-head span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.market-info-head small,
.market-info-meta {
  color: var(--muted);
  font-size: 11px;
}

.market-info-card > strong {
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
}

.market-quote-card.up {
  border-color: rgba(22, 163, 74, 0.32);
}

.market-quote-card.down {
  border-color: rgba(220, 38, 38, 0.32);
}

.market-info-meta {
  display: grid;
  gap: 3px;
}

.market-fx-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: baseline;
}

.market-fx-grid span {
  color: var(--muted);
  font-size: 12px;
}

.market-fx-grid strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.market-trend {
  font-size: 12px;
}

.market-trend.up {
  color: #16a34a;
}

.market-trend.down {
  color: #dc2626;
}

.market-trend.flat {
  color: var(--muted);
}

.workbench-list {
  display: grid;
  gap: 10px;
}

.workbench-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px 12px 12px 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.workbench-card[data-card-index]::before {
  content: attr(data-card-index);
  position: absolute;
  top: 12px;
  left: 12px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.order-progress-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.72fr);
  gap: 14px;
  align-items: start;
}

.order-progress-main {
  min-width: 0;
}

.order-shipment-batches {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.order-shipment-batches.empty {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
}

.order-shipment-batch {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
  font-size: 12px;
}

.order-shipment-batch strong,
.order-shipment-batch span {
  overflow-wrap: anywhere;
}

.order-shipment-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.order-shipment-batch .tracking-link {
  justify-self: start;
}

.order-shipping-details-link {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

#orders .section-bar > .secondary-action {
  display: none;
}

.customer-dashboard-group {
  display: grid;
  gap: 12px;
  padding: 0;
  overflow: hidden;
}

.admin-customer-fold {
  display: block;
}

.customer-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #f7fafb;
  cursor: pointer;
  list-style: none;
}

.customer-dashboard-head::-webkit-details-marker {
  display: none;
}

.customer-dashboard-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
}

.customer-dashboard-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.customer-dashboard-module-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.customer-dashboard-module-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font: 700 12px/1 Arial, sans-serif;
  cursor: pointer;
}

.customer-dashboard-module-link:hover,
.customer-dashboard-module-link:focus-visible {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.customer-dashboard-module-link strong {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 11px;
}

.customer-pending-badge {
  flex-shrink: 0;
}

.customer-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}

.dashboard-module-modal {
  position: fixed;
  inset: 0;
  z-index: 7800;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(31, 41, 51, 0.48);
}

.dashboard-module-dialog {
  width: min(960px, calc(100vw - 36px));
  height: min(820px, calc(100dvh - 36px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(31, 41, 51, 0.28);
  overflow: hidden;
}

.dashboard-module-dialog header,
.dashboard-module-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.dashboard-module-dialog header p {
  margin: 2px 0 0;
}

.dashboard-module-pager {
  justify-content: center;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-module-actions {
  padding: 10px 14px 0;
}

.dashboard-module-list {
  min-height: 0;
  overflow: hidden;
  padding: 12px 14px;
}

.dashboard-module-list.is-scroll-fallback {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.customer-pending-events-panel {
  grid-column: 1 / -1;
}

.customer-pending-events-list {
  gap: 8px;
}

.pending-events-panel {
  display: grid;
  gap: 12px;
}

.pending-events-head,
.pending-event-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pending-events-head {
  justify-content: space-between;
}

.pending-events-head h2 {
  margin: 2px 0 0;
  font-size: 22px;
  color: var(--ink);
}

.pending-events-list {
  display: grid;
  gap: 12px;
}

.pending-customer-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.pending-customer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
}

.pending-customer-head span {
  min-width: 26px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 12px;
  font-weight: 800;
}

.pending-customer-event-list {
  display: grid;
  gap: 8px;
}

.pending-event-card {
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.pending-event-card .tiny-button {
  min-width: 64px;
  min-height: 32px;
  color: var(--teal);
}

.pending-event-type {
  width: 74px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
}

.pending-event-main {
  flex: 1;
  min-width: 0;
}

.pending-event-main strong,
.pending-event-main p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-event-main p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.pending-event-card time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.workbench-card.pending-focus,
.account-card.pending-focus,
.account-row.pending-focus,
.feedback-thread-entry.pending-focus,
.feedback-message.pending-focus,
.client-order-list-card.pending-focus,
.client-order-detail-panel.pending-focus,
.shipment-order-items-group.pending-focus,
.shipment-order-item-row.pending-focus {
  border-color: var(--focus-border);
  background: var(--focus-bg);
  box-shadow: 0 0 0 4px var(--focus-ring), 0 12px 30px rgba(255, 138, 0, 0.18);
}

.certificate-shipping-alert {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 8px;
  background: rgba(255, 251, 235, 0.92);
  color: #92400e;
  padding: 10px 12px;
}

.certificate-shipping-alert span {
  font-size: 12px;
  color: #a16207;
}

.certificate-focus-group {
  border-color: rgba(245, 158, 11, 0.68);
  background: rgba(255, 251, 235, 0.55);
}

.certificate-focus-item {
  border-color: rgba(245, 158, 11, 0.72);
}

.bug-report-card {
  align-content: start;
}

.bug-card-shot {
  max-width: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #f7fafb;
}

.bug-card-shot img {
  width: 100%;
  max-height: 150px;
  object-fit: contain;
  display: block;
}

.bug-flow-actions {
  display: grid;
  gap: 8px;
}

.bug-flow-actions textarea {
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}

.bug-history-line {
  margin: 0;
}

.customer-status-grid > section,
.dashboard-fold-panel {
  display: grid;
  gap: 8px;
  align-content: start;
}

.customer-status-grid h3 {
  margin: 0;
  font-size: 14px;
  color: var(--teal);
}

.dashboard-fold-panel > summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  color: var(--teal);
  font-size: 14px;
  font-weight: 900;
  list-style: none;
}

.dashboard-fold-panel > summary::-webkit-details-marker {
  display: none;
}

.mobile-collapsible-panel > summary {
  cursor: pointer;
  list-style: none;
}

.mobile-collapsible-panel > summary::-webkit-details-marker {
  display: none;
}

.mobile-collapsible-panel > summary::after {
  content: ">";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: none;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  transition: transform 0.16s ease;
}

.mobile-collapsible-panel[open] > summary::after {
  transform: rotate(90deg);
}

.dashboard-fold-panel > summary::before {
  content: ">";
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.16s ease;
}

.dashboard-fold-panel[open] > summary::before {
  transform: rotate(90deg);
}

.dashboard-fold-panel > summary span {
  flex: 1;
}

.dashboard-fold-panel > summary strong {
  min-width: 28px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
}

.customer-pending-events-head {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--teal);
  font-size: 14px;
  font-weight: 900;
}

.customer-pending-events-head span {
  flex: 1;
}

.customer-pending-events-head strong {
  min-width: 28px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
}

.dashboard-fold-body,
.payment-slips-body {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.dashboard-fold-panel:not(.payment-slips-panel) .dashboard-fold-body {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.client-record-body {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 14px 16px;
  overscroll-behavior: contain;
}

.client-payment-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 14px;
  align-items: start;
}

.client-orders-overview {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.client-order-list-panel,
.client-order-detail-panel,
.client-order-detail-card {
  display: grid;
  gap: 10px;
}

.client-order-list {
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.client-order-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.client-order-list-card {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  padding: 12px 12px 12px 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.client-order-list-card::before {
  content: attr(data-card-index);
  position: absolute;
  top: 12px;
  left: 12px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.client-order-list-card:hover,
.client-order-list-card.selected,
.client-order-list-card.expanded {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.client-order-list-card span {
  display: grid;
  gap: 3px;
}

.client-order-list-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.client-order-list-card strong {
  white-space: nowrap;
}

.client-order-list-card progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 9px;
  accent-color: var(--teal);
}

.client-order-detail-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.client-logistics-list {
  display: grid;
  gap: 8px;
  max-height: 430px;
  overflow-y: auto;
  padding: 2px 4px 0 0;
}

.client-logistics-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 10px 10px 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.client-logistics-card::before {
  content: attr(data-card-index);
  position: absolute;
  top: 12px;
  left: 12px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.client-logistics-card:hover {
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 10px 22px rgba(21, 94, 99, 0.12);
  transform: translateY(-1px);
}

.client-logistics-main {
  min-width: 0;
}

.client-logistics-main strong,
.client-logistics-main p {
  overflow-wrap: anywhere;
}

.client-logistics-card .order-shipment-actions {
  justify-content: flex-end;
  gap: 12px;
  min-width: max-content;
}

.client-payment-status-panel {
  display: grid;
  gap: 10px;
}

.client-payment-summary-block {
  display: grid;
  gap: 8px;
}

.client-payment-summary-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.client-payment-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.client-payment-list-panel,
.client-payment-history-list-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.payment-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  align-items: stretch;
}

.payment-summary-grid span {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 4px;
  align-content: start;
  min-width: 0;
}

.payment-summary-grid em {
  color: var(--muted);
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  line-height: inherit;
}

.payment-summary-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.payment-deposit-card {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border-color: var(--line);
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.payment-deposit-summary {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f7fbfa;
}

.payment-deposit-summary span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.payment-deposit-summary strong {
  max-width: 100%;
  color: #0b2f36;
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.payment-upload-form.payment-slip-card {
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.client-available-deposit-card .deposit-note {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--green);
  font-weight: 700;
}

.client-payment-order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
  gap: 12px;
}

.client-payment-order-card strong,
.dashboard-payment-order-card strong {
  font-weight: 400;
}

.client-payment-order-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.client-payment-order-gauge {
  display: grid;
  justify-items: center;
  padding-right: 8px;
}

.payment-status-gauge {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 6px;
  min-height: auto;
}

.payment-status-gauge .dashboard-gauge-ring {
  width: 68px;
  height: 68px;
}

.payment-status-gauge .dashboard-gauge-value {
  width: 46px;
  height: 46px;
  font-size: 13px;
}

.payment-status-gauge span {
  font-size: 11px;
  text-align: center;
}

.payment-quote-title {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.client-payment-history-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.compact-head {
  padding: 0;
}

.payment-history-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.payment-history-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  align-items: start;
  padding: 10px 10px 10px 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.payment-history-item[data-card-index]::before {
  content: attr(data-card-index);
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.payment-history-item .payment-replace-form {
  margin-top: 8px;
}

.payment-history-amount {
  color: var(--teal);
}

.payment-history-file-link {
  display: inline;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: 400;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.payment-history-file-link:hover {
  color: var(--teal-strong);
}

.client-payment-history-panel .payment-upload-form {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 8px;
}

.client-payment-history-panel .payment-upload-form .payment-file-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-payment-history-panel .payment-upload-form .english-file-input {
  flex: 1;
  min-width: 0;
}

.client-payment-history-panel .payment-upload-form .secondary-action {
  width: 100%;
  min-height: 39px;
  white-space: nowrap;
}

.payment-slips-scroll-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 2px 4px 0 1px;
}

.payment-slips-scroll-list .payment-request-card {
  gap: 7px;
  padding: 10px 10px 10px 40px;
}

.workbench-card-head,
.progress-row,
.shipment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-gauge {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
}

.dashboard-gauge-ring {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, #fff 0 54%, transparent 55%),
    conic-gradient(var(--gauge-color) var(--gauge-angle), #e5ecec 0deg);
  box-shadow: inset 0 0 0 1px var(--line);
}

.dashboard-gauge-value {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.dashboard-gauge span {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.deposit-gauge {
  margin-top: 4px;
}

.deposit-gauge .dashboard-gauge-ring {
  width: 62px;
  height: 62px;
}

.deposit-gauge .dashboard-gauge-value {
  width: 42px;
  height: 42px;
  font-size: 12px;
}

.progress-row progress,
.deposit-progress progress {
  width: 100%;
  height: 14px;
  border: 1px solid #cdd8df;
  border-radius: 999px;
  background: #eef3f5;
  accent-color: var(--blue);
  overflow: hidden;
}

.deposit-progress {
  display: grid;
  gap: 5px;
  color: var(--green);
}

.deposit-progress progress {
  border-color: #b9d8c3;
  accent-color: var(--green);
}

.deposit-progress progress::-webkit-progress-value {
  background: var(--green);
}

.deposit-progress progress::-moz-progress-bar {
  background: var(--green);
}

.money-grid,
.payment-upload-form,
.payment-allocation-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.shipment-v1-grid {
  display: grid;
  grid-template-columns: 118px minmax(130px, 0.72fr) minmax(220px, 1.45fr);
  gap: 8px;
  align-items: end;
  min-width: 0;
  max-width: 100%;
}

.new-shipment-form {
  display: grid;
  grid-template-columns: 118px minmax(130px, 0.72fr) minmax(220px, 1.45fr) minmax(92px, 0.55fr);
  gap: 8px;
}

.new-shipment-carrier-field {
  grid-column: 1;
}

.new-shipment-tracking-field {
  grid-column: 2;
}

.new-shipment-order-field {
  grid-column: 3;
}

.new-shipment-parcel-field {
  grid-column: 4;
}

.new-shipment-content-field {
  grid-column: 1 / -1;
}

.new-shipment-items-field {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font: inherit;
}

.new-shipment-items-field .shipping-details-link,
.new-shipment-items-field [data-new-shipment-items-status] {
  font-size: 13px;
  line-height: 1.35;
}

.new-shipment-actions,
.payment-slip-actions,
.dashboard-flow-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.shipment-item-picker {
  display: grid;
  gap: 8px;
  min-height: 0;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.shipment-item-picker-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.shipment-item-picker-head span {
  color: var(--ink);
  font-weight: 600;
}

.shipment-order-items-group {
  display: grid;
  gap: 6px;
  min-height: 0;
}

.shipment-order-groups-scroll {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.shipment-order-items-head,
.shipment-fill-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shipment-order-items-head {
  padding: 3px 0;
}

.shipment-order-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: thin;
}

.shipment-order-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.shipment-order-tab span {
  color: var(--ink);
  white-space: nowrap;
}

.shipment-order-tab small {
  font-size: 10px;
  white-space: nowrap;
}

.shipment-order-tab.active {
  border-color: #7fbdb4;
  background: #eefaf6;
  color: var(--green);
}

.shipment-order-tab.missing:not(.active) small,
.shipment-order-tab.invalid:not(.active) small {
  color: var(--rose);
}

.shipment-fill-summary {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafb;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
}

.shipment-fill-summary strong {
  color: var(--ink);
  font-weight: 600;
}

.shipment-fill-summary .missing {
  color: var(--rose);
  font-weight: 600;
}

.shipment-order-items-head > strong {
  font-size: 12px;
  color: var(--ink);
}

.shipment-order-items-group.missing,
.shipment-order-items-group.shipping-missing-highlight {
  border: 1px solid #f0c4bd;
  border-radius: 8px;
  padding: 8px;
  background: #fff8f6;
}

.shipment-fill-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.shipment-fill-status.missing {
  border-color: #f0c4bd;
  background: #fff5f3;
  color: var(--rose);
}

.shipment-fill-status.invalid {
  border-color: #f0c4bd;
  background: #fff5f3;
  color: var(--rose);
}

.shipment-fill-status.partial {
  border-color: #f0d99a;
  background: #fff9e8;
  color: #8a6500;
}

.shipment-fill-status.completed {
  border-color: #b9ded4;
  background: #eefaf6;
  color: var(--green);
}

.shipment-order-item-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding-right: 4px;
  will-change: transform, opacity;
}

.shipment-page-viewport {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.shipment-page-viewport[data-snap-axis="y"] {
  height: var(--jzb-shipping-wall-height, 392px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
}

.shipment-page-viewport::-webkit-scrollbar {
  display: none;
}

.shipment-page-track {
  display: flex;
  width: var(--snap-track-width, 100%);
  transform: none;
  backface-visibility: hidden;
  contain: layout paint;
}

.shipment-page-track[data-snap-axis="y"] {
  display: block;
  width: 100%;
}

.shipment-page-track.is-two-page-slide {
  width: 200%;
}

.shipment-page-track.is-three-page-slide {
  width: 300%;
}

.shipment-page-track.is-sliding {
  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.shipment-page-panel {
  flex: 0 0 var(--snap-panel-width, 100%);
  width: var(--snap-panel-width, 100%);
  min-width: var(--snap-panel-width, 100%);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  backface-visibility: hidden;
  contain: layout paint;
}

.shipment-page-track[data-snap-axis="y"] .shipment-page-panel {
  flex: none;
  width: 100%;
  min-width: 100%;
  min-height: var(--jzb-shipping-wall-height, 392px);
}

.shipment-page-track.is-two-page-slide .shipment-page-panel {
  flex-basis: 50%;
  width: 50%;
  min-width: 50%;
}

.shipment-page-track.is-three-page-slide .shipment-page-panel {
  flex-basis: 33.333333%;
  width: 33.333333%;
  min-width: 33.333333%;
}

.shipment-page-panel[hidden] {
  display: none;
}

.shipment-order-item-list.shipment-page-exit-left {
  animation: shipmentPageExitLeft 260ms ease-in forwards;
}

.shipment-order-item-list.shipment-page-exit-right {
  animation: shipmentPageExitRight 260ms ease-in forwards;
}

.shipment-order-item-list.shipment-page-enter-right {
  animation: shipmentPageEnterRight 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.shipment-order-item-list.shipment-page-enter-left {
  animation: shipmentPageEnterLeft 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes shipmentPageExitLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 1; transform: translateX(-110%); }
}

@keyframes shipmentPageExitRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 1; transform: translateX(110%); }
}

@keyframes shipmentPageEnterRight {
  from { opacity: 1; transform: translateX(110%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes shipmentPageEnterLeft {
  from { opacity: 1; transform: translateX(-110%); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .shipment-order-item-list.shipment-page-exit-left,
  .shipment-order-item-list.shipment-page-exit-right,
  .shipment-order-item-list.shipment-page-enter-right,
  .shipment-order-item-list.shipment-page-enter-left {
    animation: none;
  }
}

.shipment-items-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 34px;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.shipment-items-pager .tiny-button {
  min-width: 34px;
  min-height: 30px;
  padding: 0 10px;
}

.shipment-order-item-row {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.shipment-birdview-thumb {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  align-self: start;
  display: grid;
  place-items: center;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}

.shipment-birdview-thumb[role="button"] {
  cursor: pointer;
}

.shipment-birdview-card.selected {
  border-color: rgba(43, 155, 119, 0.55);
}

.shipment-birdview-card.selected .shipment-birdview-thumb::after {
  content: "\2713";
  position: absolute;
  right: 4px;
  bottom: 3px;
  z-index: 2;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16);
  pointer-events: none;
}

.shipment-birdview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}

.shipment-birdview-ratio {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-items: center;
  justify-content: center;
  column-gap: 2px;
  width: 100%;
  margin: 0 auto;
  min-height: 32px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.shipment-birdview-ratio input {
  width: 48px;
  height: 30px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  text-align: center;
  box-sizing: border-box;
}

.shipment-birdview-ratio span {
  min-width: 0;
  text-align: center;
}

.shipment-birdview-ratio strong {
  font-weight: 400;
}

.shipment-birdview-ratio input.shipment-qty-invalid {
  border-color: var(--rose);
  background: #fff5f3;
  color: var(--rose);
}

.shipment-qty-field {
  display: grid;
  gap: 4px;
  min-width: 122px;
  color: var(--muted);
  font-size: 12px;
}

.shipment-qty-ratio {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--ink);
}

.shipment-qty-field input {
  width: 72px;
  height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  box-sizing: border-box;
}

.shipment-qty-field input.shipment-qty-invalid {
  border-color: var(--rose);
  background: #fff5f3;
  color: var(--rose);
}

.shipment-qty-ratio strong {
  font-weight: 600;
  white-space: nowrap;
}

.shipping-details-link {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.shipment-items-empty {
  margin: 8px 0 0;
}

.document-actions,
.document-form-actions,
.document-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.document-records,
.document-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.shipping-document-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: grid;
  place-items: stretch;
  padding: 0;
  background: rgba(31, 41, 51, 0.48);
}

.shipping-document-editor-dialog {
  width: 100vw;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  display: grid;
  background: var(--paper);
  overflow: hidden;
}

.shipping-document-editor-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.document-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.document-form > * {
  min-width: 0;
  grid-column: 1 / -1;
}

.shipping-document-editor-body .document-form {
  width: 100%;
  min-width: 1080px;
  min-height: calc(100dvh - 28px);
  margin-bottom: 0;
}

.document-records-modal {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: grid;
  place-items: stretch;
  padding: 0;
  background: rgba(31, 41, 51, 0.48);
}

.document-records-dialog {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  display: grid;
  background: var(--paper);
  overflow: hidden;
}

.document-records-modal-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  padding: 14px 14px 76px;
  overflow: hidden;
}

.document-records-fullscreen {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  margin: 0;
}

.document-records-fullscreen .document-table-wrap {
  max-height: none;
  min-height: 0;
}

.document-records-dialog [data-close-document-records] {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 2;
}

.document-form-head,
.document-record-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.document-form-grid,
.document-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.document-form-grid label,
.document-remarks,
.document-selector-grid section {
  display: grid;
  gap: 6px;
}

.document-form-grid > .document-wide-field {
  grid-column: span 2;
}

.document-check-list {
  max-height: 150px;
  overflow: auto;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}

.document-check-list label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
}

.document-check-list input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.document-item-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.document-signing-status {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f4f7f6;
  white-space: nowrap;
}

.document-signing-status-sent_for_buyer {
  border-color: #d1a432;
  background: #fff8dc;
  color: #72540a;
}

.document-signing-status-seller_signed {
  border-color: #13867d;
  background: #e6f5f2;
  color: #0b625b;
}

.document-signing-status-completed {
  border-color: #4f9b70;
  background: #eaf7ef;
  color: #205d39;
}

.document-signing-status-rejected {
  border-color: #c96d6d;
  background: #fff0f0;
  color: #8a2525;
}

.contract-signing-modal {
  position: fixed;
  inset: 0;
  z-index: 10120;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(31, 41, 51, 0.55);
}

.contract-signing-dialog {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  overflow: hidden;
}

.contract-signing-dialog > header,
.contract-signing-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.contract-signing-dialog > header > div {
  display: grid;
  gap: 2px;
}

.contract-signing-dialog > footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.contract-signing-body {
  min-height: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow: auto;
}

.contract-signing-notice {
  padding: 10px 12px;
  border-left: 3px solid #13867d;
  background: #eef8f6;
}

.contract-signing-notice p,
.contract-vault-password p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.contract-signing-fields,
.contract-signing-assets,
.contract-vault-password {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.contract-signing-asset {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.contract-signing-preview {
  height: 150px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  background: #fff;
  color: var(--muted);
  overflow: hidden;
}

.contract-signing-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.contract-signing-file-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.contract-vault-reuse,
.contract-vault-reuse > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.contract-vault-password p {
  grid-column: 1 / -1;
}

.signature-vault-panel {
  display: grid;
  gap: 12px;
}

.basic-info-editor-panel.customer-basic-info-hidden {
  display: none !important;
}

.signature-vault-actions,
.signature-vault-list,
.signature-vault-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.signature-vault-access,
.signature-vault-password-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.signature-vault-access {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf9;
}

.signature-vault-password-form {
  flex: 1 1 100%;
}

.signature-vault-access-copy {
  flex: 1 1 280px;
}

.signature-vault-access-copy p {
  margin: 4px 0 0;
}

.signature-vault-password-form label {
  display: grid;
  flex: 1 1 220px;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.signature-vault-password-form input {
  width: 100%;
  min-height: 38px;
}

.signature-vault-actions button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.signature-vault-list {
  align-items: stretch;
}

.signature-vault-row {
  flex: 1 1 280px;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.signature-vault-row small {
  color: var(--muted);
}

.signature-camera-modal {
  position: fixed;
  inset: 0;
  z-index: 10140;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: #0f171b;
  overscroll-behavior: contain;
}

.signature-camera-dialog {
  width: min(760px, 100%);
  max-height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(180px, 1fr) auto auto auto;
  border: 1px solid #526168;
  border-radius: 8px;
  background: #f7faf9;
  overflow: hidden;
}

.signature-camera-dialog > header,
.signature-camera-dialog > footer {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}

.signature-camera-dialog > header {
  border-bottom: 1px solid var(--line);
}

.signature-camera-dialog > header > div {
  display: grid;
  gap: 2px;
}

.signature-camera-dialog > header small {
  color: var(--muted);
}

.signature-camera-dialog > footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}

.signature-camera-requirement,
.signature-camera-status {
  margin: 0;
  padding: 9px 12px;
  font-size: 12px;
}

.signature-camera-stage {
  position: relative;
  min-height: 0;
  background: #050708;
  overflow: hidden;
}

.signature-camera-stage video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.signature-camera-guide {
  position: absolute;
  left: 15%;
  top: 50%;
  width: 70%;
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.signature-quality-radar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 9px 12px 0;
}

.signature-quality-radar strong {
  margin-right: 4px;
}

.signature-quality-radar span {
  padding: 4px 7px;
  border: 1px solid #d39b36;
  border-radius: 4px;
  background: #fff5df;
  color: #71500b;
  font-size: 11px;
}

.signature-quality-radar span.ok {
  border-color: #4d9870;
  background: #e9f6ee;
  color: #205c3a;
}

.signature-quality-radar span.warn {
  border-color: #c77742;
  background: #fff0e6;
  color: #7a3511;
}

@media (max-width: 680px) {
  .contract-signing-fields,
  .contract-signing-assets,
  .contract-vault-password {
    grid-template-columns: minmax(0, 1fr);
  }

  .contract-signing-preview {
    height: 118px;
  }

  .signature-camera-modal {
    place-items: stretch;
  }

  .signature-camera-dialog {
    width: 100%;
    height: 100%;
    max-height: none;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  }

  .signature-camera-stage {
    min-height: 220px;
  }
}

.editor-list-add-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.tiny-button.editor-add-icon-button {
  width: 34px;
  min-width: 34px;
  padding: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.document-row-check {
  width: 14px;
  height: 14px;
}

.document-items-wrap,
.document-table-wrap {
  max-height: 360px;
  overflow: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.document-items-wrap table {
  width: max-content;
  min-width: 980px;
}

.document-items-wrap input,
.document-items-wrap textarea {
  min-width: 86px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 8px;
  font: inherit;
}

.document-items-wrap input[readonly],
.document-items-wrap textarea[readonly] {
  background: #f6f8f8;
  color: var(--text);
}

.document-items-wrap td:nth-child(2),
.document-items-wrap th:nth-child(2) {
  min-width: 180px;
}

.document-items-wrap td:nth-child(3),
.document-items-wrap th:nth-child(3) {
  min-width: 420px;
}

.document-item-no-editor {
  display: grid;
  gap: 6px;
  min-width: 160px;
}

.document-item-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.document-item-image-actions .tiny-button {
  padding: 5px 7px;
  min-height: 28px;
}

.document-item-image-preview {
  display: grid;
  place-items: stretch;
  width: 76px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.document-item-image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: left top;
}

.document-description-input {
  min-width: 420px;
  min-height: 34px;
  overflow: hidden;
  resize: vertical;
  line-height: 1.4;
}

.trade-terms-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdfc;
}

.trade-terms-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.trade-terms-card-head h4 {
  margin: 0;
  margin-right: auto;
  font-size: 14px;
}

.trade-terms-print-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--muted);
  font-size: 12px;
}

.trade-terms-list {
  display: grid;
  gap: 8px;
}

.trade-term-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.4fr) minmax(260px, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.trade-term-row input,
.trade-term-row textarea,
.trade-term-row select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 8px;
  font: inherit;
  background: #fff;
}

.trade-term-value-select {
  min-height: 34px;
  appearance: auto;
}

.trade-term-value-textarea {
  min-height: 34px;
  overflow: hidden;
  resize: vertical;
  line-height: 1.4;
}

.trade-term-row-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.document-trade-terms-field {
  align-self: start;
  grid-column: 1 / -1;
}

#karatQuoteTradeTerms {
  margin-top: 12px;
}

.quote-trade-terms-card,
.other-quote-trade-terms-card {
  background: #fff;
}

@media (max-width: 760px) {
  .trade-term-row {
    grid-template-columns: 1fr;
  }

  .trade-term-row-actions {
    flex-wrap: wrap;
  }
}

.document-items-wrap td:first-child,
.document-items-wrap th:first-child {
  width: 58px;
  text-align: center;
}

.basic-info-signature-preview {
  min-height: 92px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  padding: 10px;
  color: var(--muted);
  background: #f8faf9;
}

.basic-info-signature-preview img {
  max-width: 220px;
  max-height: 76px;
  object-fit: contain;
}

.report-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.report-period-bar {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(140px, 0.7fr) minmax(140px, 0.7fr) minmax(190px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.report-period-bar label {
  display: grid;
  gap: 6px;
  min-width: 0;
  white-space: normal;
}

.report-period-bar label span {
  min-width: 0;
}

.report-date-field input {
  text-transform: uppercase;
}

.report-date-field small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.report-period-bar .pill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .report-period-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .report-period-bar label,
  .report-period-bar .pill {
    min-width: 0;
    width: 100%;
  }

  .report-period-bar label {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .report-period-bar label input,
  .report-period-bar label select {
    min-width: 0;
    width: 100%;
  }

  .report-period-bar .pill {
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .report-period-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .report-period-field,
  .report-customer-field {
    grid-column: 1 / -1;
  }

  .report-date-field {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 4px;
    font-size: 12px;
  }

  .report-date-field span {
    white-space: nowrap;
  }

  .report-date-field input {
    min-width: 0;
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
  }
}

.report-metric {
  min-height: 112px;
}

.report-metric-button {
  width: 100%;
  padding: 18px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.report-metric-button.active {
  border-color: var(--teal);
  box-shadow: var(--card-hover-shadow);
}

.report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.report-table-wrap {
  max-height: 520px;
  overflow: auto;
}

.report-table-wrap table {
  min-width: 100%;
}

.report-table-wrap th {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .report-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .report-table-wrap table {
    width: max-content;
    min-width: 100%;
  }

  .report-table-wrap th,
  .report-table-wrap td {
    white-space: nowrap;
  }
}

.purchase-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.purchase-summary-grid,
.purchase-filter-bar,
.purchase-form-grid {
  display: grid;
  gap: 10px;
}

.purchase-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 14px;
}

.purchase-filter-bar {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
  margin-bottom: 14px;
}

.purchase-filter-bar label,
.purchase-form-grid label {
  display: grid;
  gap: 6px;
}

.purchase-empty,
.purchase-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  margin-bottom: 14px;
}

.purchase-form {
  display: grid;
  gap: 14px;
}

.purchase-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.purchase-wide-field {
  grid-column: 1 / -1;
}

.purchase-table-wrap {
  max-height: 520px;
  overflow: auto;
}

.shipment-v1-grid label,
.new-shipment-form label,
.payment-upload-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.payment-file-field {
  position: relative;
}

.english-file-input {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 39px;
}

.payment-file-button {
  min-height: 39px;
  min-width: 104px;
  display: inline-grid;
  place-items: center;
  border-color: var(--line);
  background: #fff;
  color: var(--teal);
  font-weight: 400;
}

.payment-file-name {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-native-file {
  position: absolute;
  inset: 0;
  width: calc(100% - 116px);
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.payment-replace-inline-button {
  position: relative;
  z-index: 1;
  min-height: 39px;
  white-space: nowrap;
}

.new-shipment-form {
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.new-shipment-form .tiny-button,
.payment-slip-actions .tiny-button,
.dashboard-flow-actions .tiny-button {
  min-width: 112px;
  min-height: 39px;
  display: inline-grid;
  place-items: center;
  align-self: center;
  border-color: var(--line);
  background: #fff;
  color: var(--teal);
  line-height: 1;
  font-weight: 400;
}

.new-shipment-form [data-delete-selected-tracking],
.logistics-list-delete-button {
  min-width: 190px;
  white-space: nowrap;
}

.logistics-card-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.shipment-voided-card {
  opacity: 0.78;
  background: #fff7f7;
}

.payment-slip-actions [data-delete-selected-payment-slips] {
  min-width: 190px;
  white-space: nowrap;
}

.new-shipment-form button[type="submit"] {
  white-space: nowrap;
}

.workbench-card-head strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.shipment-delete-check,
.payment-slip-delete-check,
.flow-delete-check {
  width: 14px;
  height: 14px;
  accent-color: var(--teal);
}

.shipment-order-with-tracking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.shipment-order-with-tracking a {
  min-height: 39px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.tracking-link,
.shipment-order-with-tracking a.tracking-link,
.shipment-batch-side a.tracking-link {
  border-color: #b8d2f0;
  background: var(--blue-soft);
  color: var(--blue);
  text-decoration: none;
}

.tracking-link:hover,
.shipment-order-with-tracking a.tracking-link:hover,
.shipment-batch-side a.tracking-link:hover {
  border-color: var(--blue);
  background: #cfe0f7;
  color: #1f4f86;
}

.shipment-order-with-tracking input {
  min-width: 0;
}

.shipment-order-picker {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.shipment-order-dropdown {
  position: relative;
  min-width: 0;
}

.shipment-order-dropdown summary {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 7px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  line-height: 1;
  min-width: 0;
}

.shipment-order-dropdown summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shipment-order-dropdown summary::-webkit-details-marker {
  display: none;
}

.shipment-order-dropdown summary::after {
  content: "v";
  justify-self: end;
  color: var(--muted);
  font-size: 11px;
}

.shipment-order-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  min-width: 168px;
  max-height: 150px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(31, 41, 51, 0.16);
  padding: 3px;
}

.shipment-order-option {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.2;
}

.shipment-order-option:hover {
  background: #f7fafb;
}

.shipment-order-option input {
  width: 11px;
  height: 11px;
  min-height: 11px;
  margin: 0;
  accent-color: var(--teal);
}

.shipment-order-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shipment-v1-grid input:not([type="checkbox"]),
.new-shipment-form input:not([type="checkbox"]),
.new-shipment-form select {
  width: 100%;
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.carrier-logo-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 6px;
}

.carrier-select-combo {
  position: relative;
  min-width: 0;
  width: 118px;
  max-width: 118px;
}

.carrier-select-trigger {
  width: 100%;
  min-height: 39px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.carrier-select-trigger .carrier-logo {
  min-height: 29px;
}

.carrier-select-caret {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.carrier-select-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  width: 118px;
  display: none;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

.carrier-select-combo.open .carrier-select-menu {
  display: grid;
}

.carrier-select-choice {
  min-height: 35px;
  border: 0;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.carrier-select-choice .carrier-logo {
  min-height: 35px;
}

.carrier-select-choice:hover .carrier-logo,
.carrier-select-choice.active .carrier-logo {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px var(--teal-soft);
}

.carrier-select-combo.disabled .carrier-select-trigger {
  cursor: default;
  opacity: 0.72;
}

.carrier-logo-option {
  display: block;
  min-width: 0;
  cursor: pointer;
}

.carrier-logo-option.disabled {
  cursor: default;
  opacity: 0.72;
}

.carrier-logo-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.carrier-logo {
  min-height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.carrier-logo-option:not(.disabled):hover .carrier-logo {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.carrier-logo-option input:checked + .carrier-logo {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px var(--teal-soft);
}

.carrier-logo.dhl {
  background: #ffcc00;
  color: #d40511;
}

.carrier-logo.fedex {
  background: #fff;
  color: #4d148c;
}

.carrier-logo.ups {
  background: #351c15;
  color: #ffb500;
}

.carrier-logo.tnt {
  background: #f36f21;
  color: #fff;
}

.payment-allocation-box {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.payment-allocation-row input,
.payment-allocation-row select {
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.payment-allocation-rows {
  display: grid;
  gap: 8px;
}

.payment-storage-note {
  color: var(--amber);
}

.deposit-note {
  color: var(--green);
  font-weight: 800;
}

.payment-request-card > p:first-of-type {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.payment-correction-note {
  display: grid;
  gap: 3px;
}

.payment-correction-note p {
  margin: 0;
}

.payment-slip-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.payment-slip-uploaded-at {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.payment-replace-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) auto;
  gap: 8px;
  align-items: end;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.payment-replace-form label {
  display: grid;
  gap: 5px;
}

.payment-slip-modal,
.quote-preview-modal,
.quote-records-modal,
.shipping-details-modal,
.inquiry-detail-modal,
.logistics-customer-modal,
.production-birdview-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(31, 41, 51, 0.48);
}

.payment-slip-modal,
.quote-preview-modal,
.quote-records-modal,
.shipping-details-modal,
.inquiry-detail-modal {
  z-index: 8900;
}

.payment-slip-viewer,
.quote-preview-shell,
.quote-records-dialog,
.shipping-details-dialog,
.inquiry-detail-dialog,
.logistics-customer-dialog,
.production-birdview-dialog {
  width: min(920px, 100%);
  height: min(760px, calc(100vh - 44px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(31, 41, 51, 0.28);
  overflow: hidden;
}

.quote-preview-shell {
  width: min(1040px, 100%);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.quote-records-dialog {
  width: min(1120px, calc(100vw - 24px));
  height: min(860px, calc(100dvh - 24px));
}

.quote-records-dialog header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.quote-records-dialog header h3 {
  margin: 0;
}

.quote-records-modal-body,
.quote-records-fullscreen-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
}

.quote-records-paged-list {
  min-height: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.quote-records-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.quote-records-launcher {
  display: none;
  margin-top: 12px;
}

.quote-preview-pager {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: stretch;
  background: #fff;
}

.quote-preview-frame-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #fff;
}

.quote-preview-frame-wrap.quote-preview-frame-wrap-overflow {
  align-items: start;
  background: #f8fafb;
}

.quote-preview-shell iframe.quote-preview-frame-overflow {
  display: block;
  min-height: 100%;
}

.quote-preview-touch-layer {
  display: none;
}

.quote-preview-arrow {
  align-self: center;
  justify-self: center;
  width: 42px;
  height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.quote-preview-arrow:disabled {
  opacity: 0.28;
  cursor: default;
}

.quote-preview-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
}

.quote-preview-footer-arrow {
  min-width: 38px;
  font-size: 18px;
  line-height: 1;
}

.production-birdview-dialog {
  width: min(1180px, calc(100vw - 44px));
  min-width: min(760px, calc(100vw - 44px));
  min-height: min(640px, calc(100vh - 44px));
  height: auto;
  max-height: calc(100vh - 44px);
}

.shipping-details-dialog {
  width: min(1080px, 100%);
  height: min(900px, calc(100vh - 24px));
  height: min(900px, calc(100dvh - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.inquiry-detail-dialog {
  width: min(1040px, 100%);
}

.logistics-customer-dialog {
  width: min(1180px, 100%);
}

.quote-preview-shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.managed-print-modal {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(31, 41, 51, 0.58);
}

.managed-print-dialog {
  position: relative;
  z-index: 10081;
  width: min(1120px, calc(100vw - 24px));
  height: min(860px, calc(100vh - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(31, 41, 51, 0.28);
  overflow: hidden;
}

.managed-print-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.managed-print-dialog header > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.managed-print-dialog header small {
  color: var(--muted);
}

.managed-print-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.managed-print-floating-actions {
  display: none;
}

.managed-print-mobile-close {
  display: none;
}

.mobile-modal-floating-close {
  display: none;
}

.print-image-preload-status {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.28);
  color: #172426;
  font-family: Arial, Helvetica, sans-serif;
}

.print-image-preload-status-inner {
  display: grid;
  gap: 4px;
  width: min(380px, calc(100vw - 36px));
  padding: 18px 20px;
  border: 1px solid #b7d6d1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.22);
  text-align: center;
}

.print-image-preload-status strong {
  font-size: 15px;
  color: #0f766e;
}

.print-image-preload-status span {
  font-size: 13px;
  color: #344749;
}

.centered-progress-bar {
  width: 100%;
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe8e6;
}

.centered-progress-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #0f766e;
  transition: width 180ms ease;
}

.managed-print-frame-wrap {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #fff;
  overscroll-behavior: contain;
}

.managed-print-dialog iframe {
  display: block;
  width: 100%;
  min-width: var(--managed-print-preview-width, 980px);
  height: 100%;
  border: 0;
  background: #fff;
}

body.managed-print-open {
  overflow: hidden;
}

body.modal-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 720px) {
  .managed-print-modal {
    padding: 0;
    place-items: stretch;
  }

  .managed-print-dialog {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .managed-print-dialog header {
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    align-items: flex-start;
  }

  .managed-print-dialog header small {
    display: none;
  }
}

.quote-preview-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.payment-slip-head,
.shipping-details-dialog header,
.shipping-details-dialog footer,
.inquiry-detail-dialog header,
.inquiry-detail-dialog footer,
.logistics-customer-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.inquiry-detail-dialog footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.inquiry-detail-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.inquiry-detail-body {
  min-height: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
}

.inquiry-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  align-content: start;
}

.inquiry-detail-card {
  display: grid;
  grid-template-rows: 168px auto;
  gap: 9px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.inquiry-detail-image {
  width: 100%;
  height: 168px;
  border-radius: 7px;
  overflow: hidden;
}

.inquiry-detail-image.product-image img {
  object-fit: contain;
  background: #fff;
}

.inquiry-detail-content {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.inquiry-detail-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.inquiry-detail-title strong,
.inquiry-detail-content p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.inquiry-detail-title span {
  color: var(--teal);
  font-size: 12px;
  white-space: nowrap;
}

.inquiry-detail-content label,
.inquiry-detail-note {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.inquiry-detail-content label span,
.inquiry-detail-note strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.inquiry-detail-content label p,
.inquiry-detail-note p {
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f7fafb;
  color: var(--ink);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.shipping-details-dialog footer {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
}

.shipping-details-dialog footer .secondary-action {
  min-width: 150px;
  min-height: 40px;
}

.shipping-details-dialog footer .secondary-action:disabled,
.shipping-details-dialog footer .shipping-save-blocked {
  opacity: 0.55;
  cursor: not-allowed;
}

.payment-slip-head p,
.shipping-details-dialog header p,
.logistics-customer-dialog header p {
  margin: 4px 0 0;
}

.payment-slip-body {
  min-height: 0;
  display: grid;
  place-items: center;
  background: #f7fafb;
  overflow: auto;
}

.payment-slip-loading,
.payment-slip-error {
  margin: 0;
  padding: 24px;
  text-align: center;
}

.payment-slip-error {
  width: min(520px, calc(100% - 32px));
  border: 1px solid rgba(161, 47, 47, 0.26);
  border-radius: 8px;
  background: #fff7f7;
  color: #a12f2f;
}

.payment-slip-error p {
  margin: 8px 0 0;
}

.payment-slip-pdf {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 12px 28px;
  overflow: auto;
  overscroll-behavior: contain;
  background: #dfe4e7;
}

.payment-slip-pdf-page {
  flex: 0 0 auto;
  width: min(1200px, 100%);
  min-height: min(70vh, 720px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}

.payment-slip-pdf-page canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
}

.payment-slip-pdf-page[data-rendered="1"] {
  overflow: visible;
}

.payment-slip-pdf-page.is-error {
  min-height: 180px;
  color: #a12f2f;
}

.payment-slip-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  margin: auto;
  transform-origin: center;
  will-change: transform;
  -webkit-user-drag: none;
}

.payment-slip-body.payment-slip-body-image {
  position: relative;
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}

.payment-slip-body-image[data-image-zoom-ready="false"]::after,
.payment-slip-body-image[data-image-zoom-ready="error"]::after {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}

.payment-slip-body-image[data-image-zoom-ready="false"]::after {
  content: "Loading image...";
}

.payment-slip-body-image[data-image-zoom-ready="error"]::after {
  content: "Image could not be loaded.";
}

.payment-slip-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  min-width: 0;
}

.panel-head {
  margin-bottom: 14px;
}

.table-wrap {
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.panel .table-wrap {
  border: 0;
  border-radius: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  background: #f7fafb;
}

tr:last-child td {
  border-bottom: 0;
}

.status-cell,
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.pill.teal,
.status-cell.teal {
  background: var(--teal-soft);
  color: var(--teal);
}

.pill.amber,
.status-cell.amber {
  background: var(--amber-soft);
  color: var(--amber);
}

.status-cell.rose {
  background: var(--rose-soft);
  color: var(--rose);
}

.status-cell.green {
  background: var(--green-soft);
  color: var(--green);
}

.status-cell.blue {
  background: var(--blue-soft);
  color: var(--blue);
}

.timeline {
  display: grid;
  gap: 11px;
}

.timeline-item {
  padding: 11px 0 11px 14px;
  border-left: 3px solid var(--amber);
}

.timeline-item strong {
  display: block;
  margin-bottom: 3px;
}

.section-bar {
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.section-bar > button {
  flex-shrink: 0;
}

.order-customer-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.order-customer-filter select {
  min-width: 220px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
}

.order-customer-filter-inline {
  width: 100%;
  justify-content: flex-start;
  gap: 6px;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.order-customer-filter-inline select {
  min-width: 96px;
  max-width: 160px;
  min-height: 28px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 12px;
}

.product-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -4px 0 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.bulk-move-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.bulk-move-control select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
}

.quote-records-modal-body > .history-archive,
.quote-records-fullscreen-body > .history-archive,
.dashboard-module-history-list > .history-archive {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.quote-records-fullscreen-body {
  grid-template-rows: minmax(0, 1fr);
}

.history-archive .history-archive-records,
.history-archive .history-archive-records.workbench-list {
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 9px !important;
  scroll-padding-bottom: 9px !important;
}

@media (max-width: 720px) {
  .history-archive-months {
    padding-left: 8px;
  }

  .history-archive-summary {
    min-height: 44px;
    padding: 9px 10px;
  }

  .inquiry-detail-modal {
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--paper);
  }

  .inquiry-detail-modal .inquiry-detail-dialog {
    width: 100vw;
    height: 100dvh;
    min-height: 100svh;
    max-width: none;
    max-height: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .inquiry-detail-modal .inquiry-detail-body {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none !important;
    align-self: stretch;
    align-content: start;
    overflow-y: auto !important;
    padding: 10px 8px calc(78px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .inquiry-detail-modal .inquiry-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .inquiry-detail-modal .inquiry-detail-card {
    grid-template-rows: minmax(108px, 30vw) auto;
    gap: 6px;
    padding: 6px;
  }

  .inquiry-detail-modal .inquiry-detail-image {
    height: 100%;
    min-height: 108px;
  }

  .inquiry-detail-modal .inquiry-detail-content {
    gap: 5px;
  }

  .inquiry-detail-modal .inquiry-detail-content label p,
  .inquiry-detail-modal .inquiry-detail-note p {
    padding: 6px;
  }
}

.product-bulk-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 760px);
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.product-bulk-upload .bulk-move-control input,
.product-bulk-upload .bulk-move-control select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.product-bulk-upload .bulk-move-control input {
  min-width: 150px;
}

#bulkProductUploadStatus.error {
  color: var(--rose);
}

.shipping-details-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 12px 14px;
}

.shipping-details-modal .shipment-item-picker {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.shipping-details-modal .shipment-order-groups-scroll {
  max-height: min(56dvh, 620px);
  padding-bottom: 8px;
  scroll-padding-bottom: 72px;
}

.shipping-details-modal .shipment-order-item-list {
  grid-template-columns: repeat(4, minmax(0, 152px));
  justify-content: center;
  height: var(--jzb-shipping-wall-height, 392px);
  min-height: var(--jzb-shipping-wall-height, 392px);
  max-height: var(--jzb-shipping-wall-height, 392px);
  overflow-y: auto;
  padding-right: 0;
}

.shipping-extra-details {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 10px;
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.shipping-extra-details label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  min-width: 0;
}

.shipping-extra-details input,
.shipping-extra-details textarea {
  width: 100%;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shipping-history {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.shipping-history h3 {
  margin: 0;
  font-size: 13px;
}

.shipping-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafb;
  font-size: 12px;
}

.shipping-history-item strong,
.shipping-history-item span,
.shipping-history-item small {
  overflow-wrap: anywhere;
}

.product-website-check {
  border-color: rgba(30, 127, 127, 0.35);
  background: #f4fbfa;
}

.product-website-check input {
  accent-color: var(--teal);
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.segment {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}

.segment.active {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 700;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 10px;
}

.website-hero {
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: #ffffff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.website-hero:hover {
  border-color: var(--teal);
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-2px);
}

.website-hero-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
}

.website-hero-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 38px;
  line-height: 1.05;
}

.website-hero-copy p:not(.eyebrow) {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.website-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.website-hero-actions .full-action {
  width: auto;
  min-width: 150px;
}

.website-hero-media {
  min-height: 320px;
}

.website-hero-media .product-image {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 8px;
}

.website-products-panel {
  display: grid;
  gap: 12px;
}

#website.active {
  display: flex;
  flex-direction: column;
}

.website-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.website-product-card {
  display: grid;
  grid-template-rows: 230px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
  will-change: transform;
}

.panel:hover,
.metric:hover,
.workbench-card:hover,
.product-card:hover,
.review-card:hover,
.shipment-card:hover,
.portal-order:hover,
.portal-product:hover,
.website-product-card:hover,
.document-records:hover,
.client-payment-summary-card:hover,
.dashboard-fold-panel:hover,
.detail-box:hover,
.comm-card:hover,
.payment-upload-form:hover,
.payment-replace-form:hover,
.payment-allocation-box:hover,
.payment-history-item:hover,
.payment-request-card:hover,
.quote-record-card:hover,
.source-card:hover,
.scraped-card:hover,
.basic-info-card:hover,
.field-manager-card:hover,
.report-metric:hover,
.purchase-metric:hover {
  border-color: var(--teal);
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-2px);
}

.pending-events-panel:hover,
.customer-pending-events-panel:hover,
.pending-customer-group:hover {
  transform: none;
}

.pending-customer-group {
  will-change: auto;
}

.workbench-card.selected,
.product-card.selected,
.review-card.selected,
.shipment-card.active,
.portal-order.selected,
.portal-product.selected,
.website-product-card.selected,
.dashboard-fold-panel[open],
.comm-card.focused,
.settings-card.focused,
.production-order-card.active {
  border-color: var(--teal);
  box-shadow: var(--card-selected-shadow);
  background: #f7fffd;
}

.website-product-image {
  width: 100%;
  height: 230px;
  border-radius: 0;
}

.website-product-body {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.website-product-body h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

.website-spec-list {
  display: grid;
  gap: 6px;
}

.website-spec-list span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.website-spec-list em {
  font-style: normal;
}

.website-spec-list strong {
  color: var(--ink);
  text-align: right;
}

.website-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.website-inquiry-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: 14px;
  margin-top: 14px;
}

.website-register-modal {
  position: fixed;
  z-index: 90;
  inset: 18px;
  margin: auto;
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.website-register-modal[hidden] {
  display: none;
}

body.website-register-modal-open {
  overflow: hidden;
}

body.website-register-modal-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(15, 23, 42, 0.42);
}

.website-register-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.website-account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.website-account-tabs button {
  border: 0;
  border-radius: 6px;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.website-account-tabs button.active {
  background: #fff;
  color: var(--teal);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.website-account-panel {
  display: grid;
  gap: 10px;
}

.website-account-panel[hidden] {
  display: none;
}

.inline-link-button {
  width: fit-content;
  border: 0;
  background: transparent;
  color: var(--teal);
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.website-account-message {
  min-height: 18px;
  margin: 0;
}

.website-account-message.error {
  color: var(--danger);
}

.website-account-message.success,
.website-account-inline-status.signed-in {
  color: var(--teal);
}

.website-account-inline-status {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.website-try-on-panel {
  margin-top: 16px;
}

.website-try-on-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
  align-items: start;
}

.website-try-on-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #f6f8f8;
  min-height: 420px;
}

.website-try-on-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 11;
}

.website-try-on-stage .cart-empty {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  pointer-events: none;
}

.website-try-on-controls {
  display: grid;
  gap: 12px;
}

.website-try-on-controls input[type="range"] {
  width: 100%;
}

.website-try-on-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.website-settings-card {
  align-self: start;
  grid-column: 1 / -1;
}

.website-settings-form {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.8fr);
  gap: 16px;
  margin-top: 10px;
  align-items: start;
}

.website-settings-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.website-settings-main > .wide-field {
  grid-column: 1 / -1;
}

.website-settings-side {
  display: grid;
  gap: 12px;
  align-self: start;
}

.website-settings-side label {
  min-width: 0;
}

.website-settings-side .website-section-switches {
  grid-template-columns: 1fr;
}

.website-settings-stack {
  display: grid;
  gap: 10px;
}

.website-settings-stack .select-line {
  margin: 0;
}

.storage-mode-status {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8faf9;
}

.storage-mode-status strong {
  display: block;
  margin-bottom: 4px;
}

.storage-mode-status p {
  margin: 4px 0 0;
}

.storage-mode-status span,
.storage-mode-status small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.storage-mode-status a {
  color: var(--accent-strong);
  font-weight: 700;
}

.storage-mode-status.storage-mode-warning {
  border-color: #f0c4bd;
  background: #fff5f3;
  color: var(--rose);
}

.website-settings-preview {
  min-height: 220px;
  border-radius: 8px;
}

.website-settings-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .website-settings-form {
    grid-template-columns: 1fr;
  }

  .website-settings-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .website-settings-main {
    grid-template-columns: 1fr;
  }
}

.website-permission-note {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fbfa;
}

.website-audit-log {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.website-audit-row {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.website-audit-row small {
  color: var(--muted);
}

.live-showroom-panel {
  max-width: 1180px;
}

.live-showroom-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f172a;
}

.live-showroom-frame video {
  width: 100%;
  height: 100%;
  display: block;
  background: #0f172a;
}

.live-showroom-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #0f172a;
}

.live-showroom-help {
  margin-top: 8px;
}

.product-tools-panel {
  margin-bottom: 10px;
  padding: 12px;
}

.product-tools-panel .panel-head {
  margin-bottom: 8px;
}

.product-tools-panel .panel-head p {
  margin-top: 2px;
}

.product-tools-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-tools-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 12px;
  margin-top: 10px;
}

.product-tools-panel.collapsed .product-tools-body {
  display: none;
}

.product-image-maintenance {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.product-image-maintenance .compact-head {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.product-image-maintenance h3 {
  margin: 0;
  font-size: 14px;
}

.product-image-maintenance-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.product-image-maintenance-summary span,
.product-image-maintenance-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
  padding: 8px 10px;
}

.product-image-maintenance-summary span {
  color: var(--muted);
}

.product-image-maintenance-summary strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
}

.product-image-maintenance-details {
  margin-top: 8px;
}

.product-image-maintenance-details summary {
  cursor: pointer;
  font-weight: 700;
}

.product-image-maintenance-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  max-height: 240px;
  overflow: auto;
}

.product-image-maintenance-item {
  display: grid;
  gap: 3px;
}

.product-image-maintenance-item span,
.product-image-maintenance-item small {
  color: var(--muted);
  word-break: break-word;
}

.folder-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid var(--teal);
  background: var(--teal);
  color: #fff;
  font-weight: 700;
}

.folder-picker input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.import-summary {
  min-height: 38px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7fafb;
  border: 1px solid var(--line);
  color: var(--muted);
}

.import-preview {
  max-height: 260px;
  margin-top: 8px;
  overflow: auto;
}

.import-bulk-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.import-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.import-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.import-select {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
}

.import-card .product-image {
  height: 92px;
}

.import-card-body {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.ai-product-grid {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.ai-product-grid textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  font: inherit;
}

.ai-product-grid .full-action {
  grid-column: 1 / -1;
  margin-top: 0;
}

.product-card,
.review-card,
.shipment-card,
.portal-order {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.product-card,
.portal-product {
  cursor: pointer;
}

.product-card:hover,
.portal-product:hover {
  border-color: var(--teal);
}

.product-card.selected {
  border-color: var(--teal);
}

.product-list-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px;
}

.product-list-row .product-image {
  width: 84px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
}

.product-list-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.product-list-main h3,
.product-list-main p {
  margin: 0;
}

.product-list-side {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.product-meta-compact {
  display: none;
}

.product-list-pagination {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.product-list-pagination .tiny-button {
  min-width: 36px;
}

.product-pager-arrow {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

.product-pager-arrow-vertical {
  display: none;
}

.product-list-paged {
  grid-column: 1 / -1;
  min-width: 0;
}

#bulkUploadProductImagesBtn {
  flex: 0 0 auto;
  width: auto;
  max-width: max-content;
  white-space: nowrap;
}

.product-picker-paged {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

.product-picker-viewport {
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  touch-action: pan-y;
}

.product-picker-viewport::-webkit-scrollbar {
  display: none;
}

.product-picker-track {
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: visible;
  backface-visibility: hidden;
  contain: layout paint;
}

.product-picker-page-panel {
  display: none;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.product-picker-page-panel.is-active {
  display: block;
}

.product-picker-page-grid {
  display: grid;
  grid-template-columns: repeat(var(--product-picker-columns, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--product-picker-rows, 1), minmax(190px, 1fr));
  gap: 12px;
  align-content: stretch;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.product-picker-pagination {
  padding-top: 0;
}

.product-image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 18px;
  padding: max(18px, env(safe-area-inset-top), env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left), env(safe-area-inset-right));
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, 0.78);
  color: inherit;
  font: inherit;
  cursor: zoom-out;
  pointer-events: auto !important;
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}

body.product-image-preview-open {
  overflow: hidden !important;
}

.product-image-preview-modal img {
  max-width: min(100%, 1280px);
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  margin: auto;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
  -webkit-user-drag: none;
}

.product-image-preview-modal[data-image-zoom-ready="false"]::after {
  content: "Loading image...";
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 1;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}

.product-image-preview-modal[data-image-zoom-ready="error"]::after {
  content: "Image could not be loaded.";
}

[data-product-preview-image]:not([data-product-preview-image=""]) {
  cursor: zoom-in;
}

.order-item-image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 8px;
  background: #f4f7f7;
  color: #687477;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.order-item-image-placeholder.is-loading {
  color: #708085;
}

.order-item-image-placeholder.is-error {
  color: #a63f4b;
}

.order-item-image-placeholder-icon {
  position: relative;
  width: 30px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 4px;
  opacity: 0.72;
}

.order-item-image-placeholder-icon::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 5px;
  width: 5px;
  height: 5px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.order-item-image-placeholder-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 4px;
  width: 15px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: skewX(-28deg) rotate(32deg);
  transform-origin: left bottom;
}

.product-list-viewport {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  touch-action: pan-y;
}

.product-list-viewport::-webkit-scrollbar {
  display: none;
}

.product-list-track {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: visible;
  backface-visibility: hidden;
  contain: layout paint;
}

.product-list-page-panel {
  display: none;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 10px;
  box-sizing: border-box;
  padding: 1px 1px 2px;
}

.product-list-page-panel.is-active {
  display: grid;
}

.portal-product-filters {
  margin-bottom: 10px;
}

.catalog-filter-bar {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.catalog-style-filter {
  display: block;
  min-width: 0;
}

.catalog-style-filter span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.catalog-style-filter select {
  width: 100%;
}

.catalog-category-filter {
  min-width: 0;
}

@media (max-width: 900px) {
  .catalog-filter-bar {
    grid-template-columns: 1fr;
  }
}

.product-image {
  height: 168px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 800;
  letter-spacing: 0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
}

.gem-ring {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.9) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 72%, transparent 0 28%, rgba(255, 255, 255, 0.72) 29% 36%, transparent 37%),
    linear-gradient(135deg, #8a6b31, #2d7b7b);
}

.gem-necklace {
  background:
    radial-gradient(circle at 50% 68%, rgba(255, 255, 255, 0.85) 0 8%, transparent 9%),
    radial-gradient(ellipse at 50% 25%, transparent 0 42%, rgba(255, 255, 255, 0.65) 43% 48%, transparent 49%),
    linear-gradient(135deg, #315f8f, #724c91);
}

.gem-earrings {
  background:
    radial-gradient(circle at 38% 46%, rgba(255, 255, 255, 0.88) 0 10%, transparent 11%),
    radial-gradient(circle at 62% 46%, rgba(255, 255, 255, 0.88) 0 10%, transparent 11%),
    linear-gradient(135deg, #9b4453, #c58a2a);
}

.gem-bracelet {
  background:
    radial-gradient(ellipse at 50% 52%, transparent 0 30%, rgba(255, 255, 255, 0.75) 31% 40%, transparent 41%),
    linear-gradient(135deg, #3f7d50, #8e5a96);
}

.product-body,
.review-body,
.shipment-body,
.portal-order {
  padding: 14px;
}

.product-row,
.review-actions,
.shipment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.source-list,
.review-list,
.shipment-list,
.quote-items {
  display: grid;
  gap: 12px;
}

.logistics-customer-group {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  overflow: visible;
}

.logistics-customer-group.admin-customer-fold {
  display: block;
}

.logistics-customer-launcher {
  width: 100%;
  border: 1px solid var(--line);
  text-align: left;
  cursor: default;
}

.logistics-customer-launcher:hover,
.logistics-customer-launcher:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 8px 24px rgba(31, 41, 51, 0.12);
  outline: 0;
}

.logistics-customer-launcher .customer-dashboard-head {
  width: 100%;
}

.logistics-customer-launcher strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
}

.logistics-customer-launcher small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 400;
}

.logistics-customer-launcher-side {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  text-align: right;
}

.logistics-add-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--teal);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.logistics-add-entry:hover,
.logistics-add-entry:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
  outline: 0;
}

.logistics-customer-group > .customer-dashboard-head::-webkit-details-marker {
  display: none;
}

.logistics-customer-group .customer-dashboard-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}

.logistics-customer-body {
  display: grid;
  gap: 12px;
}

.logistics-list-panel {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.logistics-list-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}

.logistics-list-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.logistics-scroll-list {
  max-height: calc(100vh - 330px);
  overflow-y: auto;
  padding: 3px 12px 12px;
  overscroll-behavior: contain;
}

.logistics-customer-modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
}

.logistics-customer-modal-body .logistics-scroll-list {
  max-height: none;
}

.logistics-customer-modal[data-logistics-customer-mode="list"] {
  padding: 12px;
}

.logistics-customer-modal[data-logistics-customer-mode="list"] .logistics-customer-dialog {
  width: min(1120px, calc(100vw - 24px));
  height: min(860px, calc(100dvh - 24px));
}

.logistics-customer-modal[data-logistics-customer-mode="list"] .logistics-customer-modal-body {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
}

.logistics-list-page-mode {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}

.logistics-list-page-mode .logistics-scroll-list {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.logistics-list-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

#shipments .split-layout {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.34fr);
}

.quote-product-picker {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f7fafb;
}

.quote-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quote-picker-head > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.quote-product-filters {
  margin-top: 10px;
}

.quote-product-grid {
  max-height: 420px;
  margin-top: 10px;
  overflow: auto;
}

.quote-product-picker.collapsed .quote-product-filters,
.quote-product-picker.collapsed .quote-product-grid {
  display: none;
}

.source-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  display: grid;
  gap: 6px;
}

.source-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  background: #fbfcfd;
}

.source-form[hidden] {
  display: none;
}

.source-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.product-manager {
  margin-bottom: 14px;
}

.product-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.product-description-field {
  grid-column: 1 / -1;
}

.product-dynamic-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.product-image-editor {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.input-with-unit,
.product-price-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.product-price-inputs {
  grid-template-columns: 86px minmax(0, 1fr);
}

.product-price-inputs select,
.product-price-inputs input,
.input-with-unit input {
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
}

.product-image-preview {
  width: 96px;
  height: 96px;
  min-height: 96px;
  border-radius: 8px;
  overflow: hidden;
}

.product-image-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rich-field {
  display: grid;
  gap: 8px;
}

.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rich-editor {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  color: var(--ink);
  overflow: auto;
}

.rich-editor:focus {
  outline: 2px solid var(--teal-soft);
  border-color: var(--teal);
}

.rich-editor img,
.rich-description img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
  margin: 10px 0;
}

.rich-editor video,
.rich-description video {
  width: 100%;
  max-height: 360px;
  border-radius: 8px;
  display: block;
  margin: 10px 0;
  background: #111827;
}

.rich-description {
  display: grid;
  gap: 8px;
  color: var(--ink);
}

.product-actions {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  align-items: center;
}

.portal-qty {
  margin-bottom: 0;
}

.quote-check {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--teal);
  border-radius: 8px;
  color: var(--teal);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.quote-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.source-description-field {
  grid-column: 1 / -1;
}

.source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.scraped-detail-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.scraped-detail-lines span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.review-card {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
}

.review-card .product-image {
  height: 100%;
  min-height: 150px;
}

.tiny-button {
  border: 1px solid var(--line);
  background: #fff;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 6px;
}

.icon-button {
  width: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.tiny-button.approve {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  font-weight: 700;
}

.tiny-button.ignore {
  color: var(--rose);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.full-span {
  grid-column: 1 / -1;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

label input,
label select,
label textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 39px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  resize: vertical;
}

.quote-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.quote-thumb {
  width: 92px;
  height: 92px;
  min-height: 92px;
  border-radius: 8px;
  overflow: hidden;
}

.quote-thumb.product-image img {
  object-fit: contain !important;
  background: #fff;
}

.quote-line-image-upload {
  cursor: pointer;
  position: relative;
  border: 1px dashed var(--line);
  background: #f7fafb;
}

.quote-image-control {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.quote-image-reload-button {
  appearance: none;
  padding: 0;
  color: inherit;
  font: inherit;
}

.quote-line-image-upload:hover {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
}

.quote-image-load-failed {
  border-color: #ef4444 !important;
  background: #fff7f7;
}

.quote-image-replace-hint,
.quote-image-reload-hint {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
  font-weight: 400;
}

.quote-image-reload-hint {
  display: none;
}

.quote-image-load-failed .quote-image-reload-hint {
  display: inline-block;
}

.quote-image-replace-link {
  border: 0;
  background: transparent;
  color: var(--teal);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  padding: 0;
  text-decoration: underline;
}

.quote-thumb.product-image img,
.product-card .product-image img,
.product-list-row .product-image img,
.detail-hero .product-image img,
.quote-product-picker .product-image img,
.portal-product .product-image img,
.portal-product-detail-dialog .product-image img,
.review-card .product-image img,
.import-card .product-image img,
.cart-thumb.product-image img,
.inquiry-detail-image.product-image img,
.portal-inquiry-wall-image.product-image img,
.portal-inquiry-image.product-image img,
#customImagePreview img,
.custom-image-grid img,
.custom-image-draft img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  background: #fff;
}

.quote-currency-control {
  display: inline-grid;
  grid-template-columns: auto 86px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quote-currency-control select {
  min-height: 34px;
  border: 1px solid var(--teal);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--teal);
  font-weight: 900;
}

.quote-modal-head-actions {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
}

.quote-modal-currency-control {
  grid-template-columns: auto minmax(76px, 86px);
  justify-content: end;
}

.quote-modal-currency-control .inline-error:not([hidden]) {
  grid-column: 1 / -1;
  max-width: min(420px, 46vw);
  color: var(--rose);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
}

.quote-customer-control {
  display: grid;
  grid-template-columns: 112px minmax(180px, 260px);
  align-items: stretch;
  gap: 6px;
  justify-content: start;
}

.quote-header-cell {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}

.quote-header-cell input,
.quote-header-cell select,
.quote-header-cell textarea {
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
}

.quote-header-cell select {
  padding: 0 10px;
}

.quote-header-cell textarea {
  padding: 9px 10px;
  line-height: 1.35;
}

.quote-bank-cell {
  grid-column: 1 / -1;
}

.wide-field {
  grid-column: 1 / -1;
}

.basic-info-form {
  align-items: start;
}

.basic-info-panel-head {
  display: grid;
  gap: 4px;
}

.basic-info-title-row {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.basic-info-title-row h2,
.basic-info-panel-head > .muted {
  margin: 0;
}

.basic-info-list {
  display: grid;
  gap: 10px;
}

.basic-info-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.basic-info-card p {
  margin: 6px 0 0;
  white-space: pre-wrap;
}

.basic-info-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.basic-info-actions {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 6px;
}

.basic-info-close-button {
  width: 30px;
  height: 30px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.quote-header-cell input[readonly] {
  background: #f7fafb;
  color: var(--muted);
  font-weight: 900;
}

.quote-label-cell {
  min-height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #f7fafb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.quote-customer-picker {
  position: relative;
  min-width: 0;
}

.quote-customer-trigger {
  width: 100%;
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 34px 0 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.quote-customer-trigger::after {
  content: "⌄";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-58%);
  color: var(--muted);
  font-size: 18px;
}

.quote-customer-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(33, 45, 52, 0.16);
}

.quote-customer-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
}

.quote-customer-option:hover {
  background: var(--teal-soft);
}

.quote-customer-option input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--teal);
}

.quote-customer-option span {
  overflow-wrap: anywhere;
}

.quote-confirm-focus {
  border-color: var(--focus-border) !important;
  background: var(--focus-bg) !important;
  box-shadow: 0 0 0 4px var(--focus-ring), 0 12px 30px rgba(255, 138, 0, 0.18) !important;
  outline: 2px solid rgba(255, 138, 0, 0.18);
  outline-offset: 2px;
}

.quote-checklist-modal {
  position: fixed;
  inset: 0;
  z-index: 10070 !important;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(31, 41, 51, 0.42);
}

.quote-checklist-dialog {
  width: min(420px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 20px 60px rgba(31, 41, 51, 0.24);
}

.quote-checklist-head {
  padding: 18px 20px 8px;
  border-bottom: 1px solid var(--line);
}

.quote-checklist-head strong {
  display: block;
  font-size: 16px;
  letter-spacing: 0;
}

.quote-checklist-question {
  margin: 0;
  padding: 22px 20px;
  font-size: 18px;
  line-height: 1.45;
}

.quote-checklist-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
}

.freight-quote-modal {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(31, 41, 51, 0.42);
}

.freight-quote-dialog {
  width: min(1320px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 20px 60px rgba(31, 41, 51, 0.24);
  overflow: hidden;
}

.freight-quote-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.freight-quote-head strong {
  display: block;
  font-size: 16px;
}

.freight-quote-head p {
  margin: 4px 0 0;
}

.freight-quote-form {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 220px);
  gap: 18px;
  padding: 16px 18px 18px;
  overflow: auto;
}

.freight-quote-grid,
.freight-tracking-panel {
  grid-column: 1;
}

.freight-quote-grid {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(190px, 1.2fr) minmax(220px, 1.5fr);
  gap: 12px;
}

.freight-quote-grid label,
.freight-tracking-add label,
.freight-tracking-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.freight-quote-grid input,
.freight-quote-grid select,
.freight-tracking-add select,
.freight-tracking-row input,
.freight-tracking-row textarea,
.freight-tracking-row select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  color: var(--ink);
}

.freight-tracking-row textarea[data-freight-tracking-number] {
  min-height: 39px;
  overflow-y: hidden;
  resize: none;
  font: inherit;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.freight-carrier-combo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
}

.freight-carrier-combo input {
  border-radius: 8px 0 0 8px;
}

.freight-carrier-toggle {
  width: 100%;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: #fff;
  color: var(--teal);
  cursor: pointer;
}

.freight-carrier-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(31, 41, 51, 0.14);
}

.freight-carrier-choice {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.freight-carrier-choice:hover,
.freight-carrier-choice.active {
  background: var(--teal-soft);
  color: var(--teal);
}

.freight-tracking-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.freight-tracking-add {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.freight-tracking-list {
  display: grid;
  gap: 8px;
}

.freight-tracking-row {
  display: grid;
  grid-template-columns: minmax(94px, 0.55fr) minmax(150px, 1fr) minmax(112px, 0.65fr) auto;
  gap: 10px;
  align-items: end;
}

.freight-quote-modal-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.freight-quote-modal-total strong {
  color: var(--teal);
  font-size: 16px;
}

.freight-quote-actions,
.other-quote-actions {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: start;
  display: grid;
  gap: 0;
  padding: 0;
  border-top: 0;
}

.freight-quote-actions .full-action,
.other-quote-actions .full-action {
  margin-top: 10px;
  border-color: var(--teal);
  background: transparent;
  color: var(--teal);
  font-weight: 700;
}

.freight-quote-actions .full-action.strong,
.other-quote-actions .full-action.strong {
  background: transparent;
  color: var(--teal);
}

.freight-quote-actions .full-action:focus-visible,
.other-quote-actions .full-action:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--teal-soft);
}

.quote-template-modal,
.other-quote-modal {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(31, 41, 51, 0.48);
}

.quote-template-dialog,
.other-quote-dialog {
  width: min(1320px, calc(100vw - 32px));
  max-height: calc(100vh - 44px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(31, 41, 51, 0.28);
  overflow: hidden;
}

.quote-template-dialog {
  width: min(860px, 100%);
}

.quote-template-dialog header,
.other-quote-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.quote-template-dialog strong,
.other-quote-dialog header strong {
  color: var(--ink);
  font-size: 18px;
}

.quote-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.quote-home {
  display: grid;
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.quote-template-list {
  display: grid;
  gap: 10px;
}

.quote-template-card {
  min-height: 150px;
  display: grid;
  align-content: start;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.quote-template-card:hover,
.quote-template-card:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(31, 41, 51, 0.14);
  transform: translateY(-1px);
  outline: 0;
}

.quote-template-card span {
  color: var(--muted);
  line-height: 1.45;
}

.quote-home .quote-template-card {
  min-height: 118px;
}

.quote-records-panel {
  min-height: calc(100vh - 190px);
}

.quote-editor-modal {
  display: none;
}

.quote-editor-modal.active {
  position: fixed;
  inset: 16px;
  z-index: 9000;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 16px;
  align-items: stretch;
  overflow: auto;
  padding: 0;
}

.quote-editor-modal.active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(31, 41, 51, 0.48);
}

.quote-editor-modal.active > .panel {
  min-height: 0;
  overflow: auto;
}

.quote-editor-modal.active > .panel:nth-of-type(2) .panel-head {
  display: none;
}

.quote-editor-modal.active > .panel:nth-of-type(2) {
  display: grid;
  align-content: start;
  gap: 0;
  padding-top: 58px;
}

#karatQuoteEditor > .panel:nth-of-type(1) .panel-head h2 {
  display: grid;
  gap: 0;
  margin: 0;
  font-size: 0;
  line-height: 1.2;
}

#karatQuoteEditor > .panel:nth-of-type(1) .panel-head h2::before {
  content: "Karat Gold Quotation";
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

#karatQuoteEditor.quote-readonly-mode > .panel:first-of-type {
  border-color: var(--line);
  background: #f8faf9;
}

#karatQuoteEditor.quote-readonly-mode input,
#karatQuoteEditor.quote-readonly-mode select,
#karatQuoteEditor.quote-readonly-mode textarea {
  color: var(--muted);
  background: #f3f5f4;
}

.karat-quote-number {
  display: inline-grid;
  grid-template-columns: auto minmax(150px, auto);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.karat-quote-number strong {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

#karatQuoteEditor .karat-quote-number #quoteNumberInput {
  min-height: 39px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
}

.quote-editor-close {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 3;
}

.quote-editor-close:hover,
.quote-editor-close:focus-visible {
  background: #fff;
}

.other-quote-form {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 220px);
  grid-template-rows: auto auto minmax(160px, 1fr) auto auto auto;
  gap: 12px;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto;
}

.other-quote-head-grid,
.other-quote-toolbar,
.other-quote-rows,
.other-quote-add-row,
.other-quote-total,
.other-quote-trade-terms-card {
  grid-column: 1;
}

.other-quote-head-grid {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.4fr);
  gap: 10px;
}

.other-quote-head-grid label,
.other-quote-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.other-quote-head-grid input,
.other-quote-head-grid select,
.other-quote-row input,
.other-quote-row textarea {
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

@media (max-width: 760px) {
  .freight-quote-head,
  .other-quote-dialog header {
    align-items: flex-start;
    padding: 10px 12px;
  }

  .quote-modal-head-actions {
    flex-shrink: 0;
    gap: 6px;
  }

  .quote-modal-currency-control {
    grid-template-columns: auto minmax(64px, 76px);
    gap: 5px;
    font-size: 11px;
  }

  .quote-modal-currency-control .inline-error:not([hidden]) {
    max-width: min(260px, 70vw);
  }
}

.other-quote-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.other-quote-rows {
  min-height: 160px;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
}

.other-quote-row {
  display: grid;
  grid-template-columns: 144px minmax(220px, 1fr) minmax(180px, 0.85fr) 72px 116px 116px auto;
  gap: 12px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.other-quote-image-cell {
  display: grid;
  justify-items: center;
  min-width: 0;
  padding-inline: 6px;
}

.other-quote-image {
  display: grid;
  gap: 6px;
  width: 96px;
  height: 96px;
  border-radius: 7px;
}

.other-quote-image img,
.other-quote-image span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  object-fit: contain;
  font-size: 12px;
}

.other-quote-image input[type="file"] {
  display: none;
}

.other-quote-description textarea {
  resize: vertical;
}

.other-quote-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.other-quote-total strong {
  color: var(--teal);
  font-size: 18px;
}

@media (max-width: 860px) {
  .quote-template-grid {
    grid-template-columns: 1fr;
  }

  .other-quote-head-grid,
  .other-quote-row,
  .freight-quote-form,
  .other-quote-form {
    grid-template-columns: 1fr;
  }

  .freight-quote-actions,
  .other-quote-actions {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

.quote-gold-control {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  grid-column: 1 / -1;
}

.quote-gold-inputs {
  display: grid;
  grid-template-columns:
    minmax(64px, 0.65fr)
    minmax(82px, 1fr)
    minmax(54px, 0.6fr)
    minmax(42px, 0.45fr)
    minmax(78px, 0.78fr)
    minmax(64px, 0.78fr)
    minmax(34px, 0.4fr)
    minmax(142px, 1.25fr)
    minmax(72px, 0.85fr)
    minmax(56px, 0.6fr);
  gap: 6px;
  width: 100%;
}

.quote-gold-inputs input,
.quote-gold-inputs select {
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
}

.quote-summary-controls {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(150px, 240px);
  gap: 6px;
  align-items: stretch;
  width: 100%;
}

.quote-total-gold-control {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 48px;
  gap: 6px;
  align-items: stretch;
}

.quote-total-gold-control input {
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #f6f8f8;
  color: #526467;
}

.quote-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.quote-empty-actions {
  display: grid;
  gap: 10px;
}

.quote-add-manual-row {
  justify-self: start;
}

.quote-manual-item {
  grid-template-columns: 132px minmax(330px, 2.65fr) minmax(130px, auto) minmax(170px, auto) minmax(124px, auto) auto;
  align-items: end;
}

.quote-manual-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.quote-manual-primary-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(260px, 2fr) minmax(220px, 1.2fr);
  gap: 10px;
}

.quote-manual-item .quote-thumb {
  align-self: center;
}

.quote-manual-image-cell {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.quote-manual-image-cell .quote-thumb {
  width: 76px;
  height: 76px;
}

.quote-manual-image-upload {
  width: 76px;
  height: 76px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  border: 1px dashed var(--line);
  background: #f7fafb;
}

.quote-manual-image-upload:hover {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
}

.quote-manual-image-placeholder {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 400;
  text-align: center;
  padding: 0 6px;
}

.quote-fixed-image-actions {
  display: block;
  margin-top: 4px;
  width: 132px;
}

.quote-fixed-image-select {
  width: 100%;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  line-height: 1;
  padding: 4px 5px;
}

.quote-fixed-image-select:hover,
.quote-fixed-image-select:focus {
  border-color: var(--teal);
  color: var(--teal);
}

.quote-manual-item textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.quote-manual-unit-price {
  margin-top: 0;
}

.quote-manual-item .compact-qty,
.quote-manual-item .quote-line-subtotal {
  margin-bottom: 0;
}

.quote-manual-subtotal {
  min-height: 58px;
  align-content: center;
}

.quote-manual-remove {
  align-self: center;
}

.quote-field-editor {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}

.quote-certificate-item {
  background: #f8fbfb;
}

.quote-certificate-thumb {
  background: #fffdf7;
}

.quote-certificate-thumb img {
  object-fit: contain;
}

.quote-field-editor input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fff;
}

.quote-field-editor input[readonly] {
  background: #f6f8f8;
  color: #526467;
  cursor: not-allowed;
}

.quote-field-editor input.quote-weight-invalid {
  border-color: #dc2626;
  color: #dc2626;
  background: #fff5f5;
}

.quote-input-with-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
}

.quote-unit-cell {
  min-width: 48px;
  min-height: 39px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #f7fafb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.quote-unit-input {
  width: 132px;
  text-align: center;
  outline: none;
}

.quote-color-editor {
  grid-template-columns: auto minmax(150px, 1fr);
  align-items: center;
}

.quote-color-input {
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 400;
}

.compact-qty {
  display: grid;
  grid-template-columns: auto 72px auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.compact-qty input {
  min-height: 32px;
}

.compact-qty .quote-unit-cell {
  min-height: 32px;
}

.quote-line-subtotal {
  display: grid;
  gap: 4px;
  margin: 6px 0 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.quote-line-subtotal span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quote-line-subtotal strong {
  color: var(--teal);
  white-space: nowrap;
}

.quote-negative-amount,
.quote-line-subtotal.quote-negative-amount strong {
  color: #dc2626 !important;
}

input.quote-negative-amount {
  color: #dc2626 !important;
  border-color: #dc2626 !important;
}

.quote-records {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.quote-records-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quote-records-title-row select {
  min-width: 150px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.quote-records-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-record-month {
  display: grid;
  gap: 8px;
}

.quote-record-month-title {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.quote-record-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.quote-record-card .quote-version-history {
  grid-column: 1 / -1;
}

.quote-version-history summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.quote-version-history-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.quote-history-card {
  background: #eef2f3;
  border-color: #d6dde0;
  color: #6a777b;
}

.quote-history-card strong,
.quote-history-card .muted {
  color: #6a777b;
}

.quote-record-card p {
  margin: 4px 0 0;
}

.quote-draft-card {
  background: #fffaf0;
  border-color: #f2c879;
}

.quote-record-side {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.quote-record-actions {
  align-content: start;
}

.quote-total {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quote-total strong {
  font-size: 24px;
  color: var(--teal);
}

.quote-extra-actions {
  margin: 0;
}

#quotes .quote-builder > .panel:nth-of-type(2) > .full-action,
#quotes .quote-extra-actions .full-action {
  margin-top: 10px;
  border-color: var(--teal);
  background: transparent;
  color: var(--teal);
  font-weight: 700;
}

#quotes .quote-builder > .panel:nth-of-type(2) > .full-action.strong,
#quotes .quote-extra-actions .full-action.strong {
  border-color: var(--teal);
  background: transparent;
  color: var(--teal);
}

.quote-picker-modal-open {
  overflow: hidden;
}

#quoteProductPicker.modal-open,
#documentProductPicker.modal-open,
#otherQuoteProductPicker.modal-open {
  position: fixed;
  inset: 10px;
  z-index: 9300;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: calc(100vw - 20px);
  max-width: none;
  height: calc(100vh - 20px);
  max-height: none;
  margin: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(31, 41, 51, 0.32);
  overflow: hidden;
}

#quoteProductPicker.modal-open::before,
#documentProductPicker.modal-open::before,
#otherQuoteProductPicker.modal-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(31, 41, 51, 0.48);
}

#quoteProductPicker.modal-open .quote-product-grid,
#documentProductPicker.modal-open .quote-product-grid,
#otherQuoteProductPicker.modal-open .quote-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-content: stretch;
  align-items: stretch;
  min-height: 0;
  max-height: none;
  height: 100%;
  overflow: hidden;
  padding-right: 0;
}

.quote-size-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: stretch;
  gap: 6px;
}

.quote-size-picker-button {
  width: 38px;
  min-width: 38px;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
  color: var(--teal);
  font-size: 20px;
  line-height: 1;
}

.quote-size-picker-popover {
  position: fixed;
  z-index: 10050;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  max-height: min(70dvh, 520px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.2);
}

.quote-size-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quote-size-picker-header .icon-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
}

.quote-size-picker-search {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.quote-size-picker-groups {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.quote-size-picker-group {
  border-top: 1px solid var(--line);
  padding: 7px 0;
}

.quote-size-picker-group:first-child {
  border-top: 0;
}

.quote-size-picker-group summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
}

.quote-size-picker-group > div {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.quote-size-picker-group button {
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: #f7fafb;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.quote-size-picker-group button:hover,
.quote-size-picker-group button:focus-visible {
  background: #e7f5f2;
  color: var(--teal);
}

.quote-size-custom-button {
  min-height: 38px;
}

.inquiry-quote-template-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(31, 41, 51, 0.48);
}

.inquiry-quote-template-panel {
  width: min(880px, 100%);
  max-height: min(840px, calc(100dvh - 40px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 12px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface, #fff);
  box-shadow: 0 18px 45px rgba(31, 41, 51, 0.24);
}

.inquiry-quote-template-head,
.inquiry-quote-template-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inquiry-quote-template-head h3,
.inquiry-quote-template-head p,
.inquiry-quote-template-panel > p {
  margin: 0;
}

.inquiry-quote-template-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  overscroll-behavior: contain;
}

.inquiry-quote-template-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(190px, 230px);
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.inquiry-quote-template-row.is-unassigned {
  border-color: #c93447;
  box-shadow: 0 0 0 1px rgba(201, 52, 71, 0.18);
}

.inquiry-quote-template-image {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f5f7f8;
}

.inquiry-quote-template-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inquiry-quote-template-copy,
.inquiry-quote-template-select {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.inquiry-quote-template-copy span,
.inquiry-quote-template-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inquiry-quote-template-select select {
  width: 100%;
}

.inquiry-quote-template-error {
  min-height: 20px;
  color: #c93447;
  font-weight: 700;
}

.inquiry-quote-template-actions {
  justify-content: flex-end;
}

#quoteProductPicker.modal-open .product-picker-paged,
#documentProductPicker.modal-open .product-picker-paged,
#otherQuoteProductPicker.modal-open .product-picker-paged,
#portalProductPicker.modal-open .product-picker-paged {
  grid-column: 1 / -1;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  height: 100%;
}

#quoteProductPicker.modal-open .product-picker-page-grid,
#documentProductPicker.modal-open .product-picker-page-grid,
#otherQuoteProductPicker.modal-open .product-picker-page-grid,
#portalProductPicker.modal-open .product-picker-page-grid {
  grid-template-columns: repeat(var(--product-picker-columns, 1), minmax(0, 1fr));
}

#quoteProductPicker.modal-open .quote-picker-image-card,
#documentProductPicker.modal-open .quote-picker-image-card,
#otherQuoteProductPicker.modal-open .quote-picker-image-card,
#portalProductPicker.modal-open .portal-inquiry-image-card {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(96px, 1fr) auto;
}

#quoteProductPicker.modal-open .quote-picker-image,
#documentProductPicker.modal-open .quote-picker-image,
#otherQuoteProductPicker.modal-open .quote-picker-image,
#portalProductPicker.modal-open .portal-inquiry-image {
  height: 100%;
  min-height: 96px;
}

.quote-picker-image-card {
  display: grid;
  grid-template-rows: minmax(132px, 1fr) auto;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.quote-picker-image-card:hover,
.quote-picker-image-card.selected {
  border-color: var(--teal);
  box-shadow: var(--card-hover-shadow);
}

.quote-picker-image {
  width: 100%;
  height: 132px;
  border-radius: 7px;
  overflow: hidden;
}

.quote-picker-image-meta {
  display: grid;
  gap: 6px;
}

.quote-picker-image-meta strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.quote-picker-image-meta .quote-check {
  min-height: 32px;
  padding: 0 8px;
  font-size: 12px;
}

.orders-table td:nth-child(5) {
  min-width: 220px;
}

.shipment-progress {
  display: grid;
  gap: 5px;
  border-radius: 8px;
  padding: 10px;
}

.shipment-progress.gray {
  background: #edf1f4;
}

.shipment-progress.blue {
  background: var(--blue-soft);
}

.shipment-progress.amber {
  background: var(--amber-soft);
}

.shipment-progress.green {
  background: var(--green-soft);
}

.shipment-progress.rose {
  background: var(--rose-soft);
}

.shipment-progress strong {
  display: block;
}

.drawer {
  margin-top: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  display: none;
}

.drawer.active {
  display: block;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.detail-box {
  background: #f7fafb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  gap: 14px;
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
  gap: 16px;
}

.detail-hero .product-image {
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
}

.spec-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.spec-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.spec-row span:first-child {
  color: var(--muted);
}

.progress-list {
  display: grid;
  gap: 10px;
}

.progress-step {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(8, minmax(220px, 1fr));
  gap: 14px;
  overflow-x: auto;
}

#production .kanban {
  display: block;
  overflow-x: hidden;
  padding-top: 8px;
}

.kanban-column {
  min-height: 500px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.task {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.task progress {
  width: 100%;
  height: 9px;
  accent-color: var(--teal);
}

.task select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.production-layout {
  display: grid;
  grid-template-columns: minmax(300px, 320px) minmax(0, 1fr) minmax(300px, 340px);
  gap: 14px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.production-order-panel {
  min-width: 0;
}

.production-progress-panel {
  min-width: 0;
}

.production-progress-mobile-drawer {
  margin: -2px 0 12px;
  padding: 12px;
  border-color: var(--teal);
  background: #ffffff;
}

.production-mobile-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.production-mobile-list-panel,
.production-mobile-history-entry,
.production-mobile-history-panel {
  min-width: 0;
}

.production-mobile-history-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.production-mobile-history-link strong,
.production-mobile-history-link small {
  display: block;
}

.production-mobile-history-link small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.production-mobile-pager,
.production-mobile-pager-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.production-mobile-pager .tiny-button {
  min-width: 38px;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 15px;
  line-height: 1;
}

#production .production-order-panel:hover,
#production .production-progress-panel:hover {
  transform: none;
}

.production-order-list {
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  padding: 52px 4px 12px 4px;
  scroll-padding-top: 52px;
  overscroll-behavior: contain;
}

.production-delete-actions {
  padding: 0 4px 10px;
}

.production-order-list-entry {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}

.production-order-delete-select {
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.production-order-delete-select:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.production-order-delete-check {
  width: 16px;
  height: 16px;
}

.production-order-list-entry .production-order-card {
  min-width: 0;
  height: 100%;
}

.production-order-list-entry .production-order-card > span {
  min-width: 0;
}

.production-order-list-entry .production-order-card strong,
.production-order-list-entry .production-order-shipment-summary small {
  white-space: normal;
  overflow-wrap: anywhere;
}

.production-order-list-entry .production-order-shipment-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.quote-unit-cell {
  min-height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #f7fafb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.quote-currency-unit-cell {
  color: var(--teal);
  background: var(--teal-soft);
}

.quote-gold-lost-label {
  color: var(--muted);
}

.production-order-list.history {
  opacity: 0.92;
}

.production-order-card {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  padding: 12px 12px 12px 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
  color: var(--ink);
  text-align: left;
}

.production-order-card:first-child,
.production-item-row:first-child {
  margin-top: 1px;
}

.production-order-card[data-card-index]::before,
.production-item-row[data-card-index]::before {
  content: attr(data-card-index);
  position: absolute;
  top: 12px;
  left: 12px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.production-order-card:hover,
.production-order-card.active {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.production-order-card-static {
  cursor: default;
}

.production-order-card-static:hover {
  border-color: var(--line);
  background: #ffffff;
}

.production-order-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.production-order-card strong {
  white-space: nowrap;
}

.production-order-card progress,
.production-main-progress {
  width: 100%;
  height: 9px;
  accent-color: var(--teal);
}

.production-order-card progress {
  grid-column: 1 / -1;
}

.production-order-shipment-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.production-order-birdview-link {
  margin-left: auto;
  justify-self: end;
}

.production-birdview-modal-status {
  padding: 10px 14px 0;
  justify-self: end;
}

.production-birdview-modal .production-birdview-paged {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
}

.production-birdview-modal .production-birdview-embedded-grid {
  align-self: center;
}

.production-birdview-modal .production-birdview-page-panel {
  align-content: center;
}

.production-order-shipment-summary small {
  margin-top: 0;
  white-space: nowrap;
}

.production-progress-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.production-progress-summary > div {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.production-progress-summary > .production-check-shipping-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding-block: 6px;
}

.production-progress-summary a[data-check-shipping-order] {
  display: inline;
  width: max-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: underline;
  box-shadow: none;
}

.production-progress-summary a[data-check-shipping-order]:hover {
  background: transparent;
  color: #1f4f86;
}

.production-shipped-birdview-row {
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
  min-width: 0;
}

.production-birdview-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  line-height: 1;
  text-decoration: underline;
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
}

.production-birdview-link:hover {
  background: transparent;
  color: #1f4f86;
}

.production-status-top-control {
  display: grid;
  gap: 5px;
  min-width: 190px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.production-status-top-control select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.production-items-section {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.production-item-list {
  display: grid;
  gap: 10px;
  max-height: clamp(220px, calc(100vh - 520px), 460px);
  overflow-y: auto;
  padding: 52px 4px 12px 4px;
  scroll-padding-top: 52px;
  overscroll-behavior: contain;
}

.production-item-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  padding: 10px 10px 10px 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.production-item-row .cart-thumb {
  width: 58px;
  height: 58px;
  justify-self: center;
}

.production-item-main {
  min-width: 0;
}

.production-item-main strong,
.production-item-main p {
  overflow-wrap: anywhere;
}

.production-item-row strong,
.production-item-row .production-shipped-ratio,
.production-item-row .production-shipped-label,
.production-item-row .production-item-check {
  font-weight: 400;
}

.production-item-qty {
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.production-item-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.production-item-ratio-cell,
.production-item-shipped-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

.production-item-ratio-cell {
  justify-content: center;
}

.production-item-shipped-cell {
  justify-content: flex-start;
}

.production-shipped-ratio {
  display: inline-block;
  min-width: 72px;
  text-align: center;
  white-space: nowrap;
}

.production-shipped-label {
  white-space: nowrap;
}

.production-shipped-label.green {
  color: var(--green);
}

.production-shipped-label.amber {
  color: var(--amber);
}

.production-shipped-label.blue {
  color: var(--blue);
}

.production-birdview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 202px;
  gap: 14px;
  align-content: start;
  min-height: 662px;
  max-height: calc(100vh - 126px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
}

.production-birdview-page-status {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 3px 8px;
  align-items: center;
  justify-items: end;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.production-birdview-page-status .pill {
  grid-row: span 2;
}

.production-birdview-page-status strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.production-birdview-page-status small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.production-birdview-paged {
  position: relative;
  min-width: 0;
  padding: 0;
  touch-action: pan-y;
}

.production-birdview-embedded-grid {
  display: block;
  min-height: 0;
  max-height: none;
  padding: 8px 2px 12px;
  scroll-padding-bottom: 32px;
  overflow: hidden;
}

.production-birdview-viewport {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.production-birdview-viewport[data-snap-axis="y"] {
  height: clamp(490px, 64dvh, 520px);
  min-height: 490px;
  max-height: 520px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
}

.production-birdview-viewport::-webkit-scrollbar {
  display: none;
}

.production-birdview-viewport.is-touch-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.production-birdview-track.production-birdview-embedded-grid {
  display: flex;
  width: var(--snap-track-width, 100%);
  padding: 0;
  overflow: visible;
  max-height: none;
  transform: none;
  backface-visibility: hidden;
  contain: layout paint;
}

.production-birdview-track.production-birdview-embedded-grid[data-snap-axis="y"] {
  display: block;
  width: 100%;
}

.production-birdview-track.production-birdview-embedded-grid.is-two-page-slide {
  width: 200%;
}

.production-birdview-track.production-birdview-embedded-grid.is-three-page-slide {
  width: 300%;
}

.production-birdview-track.is-sliding {
  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.production-birdview-page-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 150px;
  gap: 10px;
  align-content: start;
  will-change: transform, opacity;
}

.production-birdview-track .production-birdview-page-panel {
  flex: 0 0 var(--snap-panel-width, 100%);
  width: var(--snap-panel-width, 100%);
  min-width: var(--snap-panel-width, 100%);
  min-height: 490px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
  padding: 8px 2px 12px;
  backface-visibility: hidden;
  contain: layout paint;
}

.production-birdview-track[data-snap-axis="y"] .production-birdview-page-panel {
  flex: none;
  width: 100%;
  min-width: 100%;
  min-height: clamp(490px, 64dvh, 520px);
}

.production-birdview-track.is-two-page-slide .production-birdview-page-panel {
  flex-basis: 50%;
  width: 50%;
  min-width: 50%;
}

.production-birdview-track.is-three-page-slide .production-birdview-page-panel {
  flex-basis: 33.333333%;
  width: 33.333333%;
  min-width: 33.333333%;
}

.product-wall-page-exit-left {
  animation: productWallPageExitLeft 260ms ease-in forwards;
}

.product-wall-page-exit-right {
  animation: productWallPageExitRight 260ms ease-in forwards;
}

.product-wall-page-enter-right {
  animation: productWallPageEnterRight 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.product-wall-page-enter-left {
  animation: productWallPageEnterLeft 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes productWallPageExitLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 1; transform: translateX(-110%); }
}

@keyframes productWallPageExitRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 1; transform: translateX(110%); }
}

@keyframes productWallPageEnterRight {
  from { opacity: 1; transform: translateX(110%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes productWallPageEnterLeft {
  from { opacity: 1; transform: translateX(-110%); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .product-wall-page-exit-left,
  .product-wall-page-exit-right,
  .product-wall-page-enter-right,
  .product-wall-page-enter-left {
    animation: none;
  }
}

.production-birdview-page-panel[hidden] {
  display: none;
}

.production-birdview-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 28px;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.production-birdview-card.shipped {
  border-color: rgba(43, 155, 119, 0.55);
}

.production-birdview-card-embedded {
  padding: 6px;
}

.production-birdview-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}

.production-birdview-image::after {
  content: none;
}

.production-birdview-card.shipped .production-birdview-image::after {
  content: "\2713";
  position: absolute;
  right: 4px;
  bottom: 3px;
  z-index: 3;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16);
  pointer-events: none;
}

.production-birdview-image img {
  position: relative;
  z-index: 1;
  cursor: zoom-in;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.production-birdview-reload {
  z-index: 4;
  border: 1px solid var(--line);
  cursor: pointer;
}

.production-birdview-ratio-row {
  display: grid;
  height: 28px;
  text-align: center;
  min-width: 0;
  align-content: center;
  justify-content: center;
  margin-top: 0;
}

.production-birdview-ratio-row strong {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}

.production-birdview-caption span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  min-height: 30px;
  overflow-wrap: anywhere;
}

.birdview-title-note {
  font-weight: 400;
}

#documentProductPicker.modal-open {
  z-index: 9300;
}

.production-item-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
  background: var(--paper);
}

.production-item-check input {
  width: 14px;
  height: 14px;
  accent-color: var(--teal);
}

.shipment-card {
  padding: 0;
}

.shipment-card.active {
  border-color: var(--teal);
}

.package-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.package-line:last-child {
  border-bottom: 0;
}

.shipment-batch-line {
  align-items: start;
}

.shipment-batch-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.shipment-batch-side .tracking-link,
.shipment-batch-side .tiny-button {
  width: 100%;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.shipment-tracking-note {
  max-width: 360px;
}

.portal-hero {
  background: #15222b;
  color: #fff;
  border-radius: 8px;
  min-height: 132px;
  padding: 24px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  position: relative;
}

.portal-hero::after {
  content: "";
  position: absolute;
  right: 32px;
  bottom: -36px;
  width: 240px;
  height: 120px;
  border: 14px solid rgba(255, 214, 138, 0.42);
  border-radius: 50%;
  transform: rotate(-14deg);
}

.portal-hero > * {
  position: relative;
  z-index: 1;
}

.portal-hero h2 {
  font-size: 28px;
  margin-bottom: 4px;
}

#portalCustomerTitle {
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 4px;
}

.portal-hero-actions {
  display: grid;
  justify-items: stretch;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.portal-hero-actions .full-action {
  margin: 0;
}

.comm-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.12);
}

.comm-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f7fafb;
}

.login-card,
.panel,
.workbench-card,
.product-card,
.review-card,
.shipment-card,
.portal-order,
.portal-product,
.document-records,
.client-payment-summary-card,
.dashboard-fold-panel,
.detail-box,
.comm-card,
.payment-upload-form,
.payment-replace-form,
.payment-allocation-box,
.payment-history-item,
.payment-request-card,
.quote-record-card,
.source-card,
.scraped-card,
.basic-info-card,
.field-manager-card,
.report-metric,
.purchase-metric {
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
  will-change: transform;
}

.workbench-card.client-available-deposit-card {
  border-color: #b7c9c7;
  background: #fff;
}

.client-payment-history-panel .payment-upload-form.payment-slip-card {
  border-color: var(--line);
  background: #fff;
}

.client-payment-history-panel .payment-upload-form.payment-slip-card:active {
  transform: none;
}

.comm-card textarea {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  resize: vertical;
  color: var(--ink);
}

.settings-card {
  margin-top: 12px;
}

.settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.settings-card-head > div:first-child {
  min-width: 0;
}

.email-recipient-section {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.email-recipient-mode {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px);
  gap: 12px;
  align-items: center;
}

.document-records {
  position: relative;
}

.document-record-head {
  justify-content: flex-start;
  padding-right: 236px;
}

.document-record-head h3 {
  margin: 0;
}

.document-record-filter-row {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 1;
  width: 220px;
  max-width: calc(100% - 28px);
}

.document-record-filter-row select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.email-recipient-list {
  display: grid;
  gap: 8px;
}

.email-recipient-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(220px, 1.4fr) auto;
  gap: 8px;
  align-items: end;
}

.email-recipient-row label {
  min-width: 0;
}

.email-recipient-row .tiny-button {
  min-height: 40px;
}

.email-recipient-empty,
.email-recipient-source {
  margin: 0;
}

.email-recipient-source.warning {
  color: #9a6700;
  font-weight: 700;
}

@media (max-width: 720px) {
  .email-recipient-mode,
  .email-recipient-row {
    grid-template-columns: 1fr;
  }

  .email-recipient-row .tiny-button {
    width: fit-content;
  }
}

.image-loading-settings-head {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.settings-card.focused {
  border-color: var(--focus-border);
  background: var(--focus-bg);
  box-shadow: 0 0 0 4px var(--focus-ring), 0 12px 30px rgba(255, 138, 0, 0.18);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}

.settings-card[data-config-section="quote"] {
  grid-column: span 2;
}

.settings-card[data-config-section="translation"] {
  grid-column: span 2;
}

.settings-card[data-config-section="email"] {
  grid-column: span 2;
}

.settings-card[data-config-section="governance"] {
  grid-column: 1 / -1;
}

.governance-settings-card {
  min-width: 0;
}

.governance-heading {
  align-items: center;
}

.governance-heading-actions,
.governance-row-actions,
.governance-list-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.governance-global-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.governance-global-switch input {
  position: relative;
  appearance: none;
  width: 38px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: #bdc9cd;
  cursor: pointer;
  transition: background 150ms ease;
}

.governance-global-switch input::before {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 38, 42, 0.28);
  content: "";
  transition: transform 150ms ease;
}

.governance-global-switch input:checked {
  background: var(--teal);
}

.governance-global-switch input:checked::before {
  transform: translateX(16px);
}

.governance-global-switch input:focus-visible {
  outline: 3px solid rgba(17, 129, 124, 0.24);
  outline-offset: 2px;
}

.governance-global-switch input:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.status-cell.neutral {
  background: #edf1f3;
  color: #4b5c63;
}

.governance-observe-notice {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 4px solid #c17a00;
  background: #fff8e6;
  color: #6f4800;
  font-size: 13px;
  line-height: 1.5;
}

.governance-observe-notice.is-disabled {
  border-left-color: #6c7c82;
  background: #f1f4f5;
  color: #405158;
}

.governance-global-authority {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.governance-global-authority[hidden] {
  display: none;
}

.governance-global-authority > span:not(.status-cell) {
  color: var(--muted);
  font-size: 12px;
}

.governance-emergency-note {
  color: #8a4b00;
}

.governance-override-role-select {
  min-width: 150px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.governance-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 1px;
  margin-top: 14px;
  border: 1px solid var(--line);
  background: var(--line);
}

.governance-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
}

.governance-summary span {
  color: var(--muted);
  font-size: 12px;
}

.governance-summary strong {
  font-size: 20px;
}

.governance-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-bottom: 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.governance-tabs .tiny-button {
  flex: 0 0 auto;
}

.governance-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.governance-board-toolbar > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.governance-board-toolbar small,
.governance-board-toolbar > div:first-child span {
  color: var(--muted);
  font-size: 12px;
}

.governance-board-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
}

.governance-board-actions .tiny-button {
  flex: 0 0 auto;
}

.governance-panel {
  margin-top: 16px;
}

.governance-control-board {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.governance-module-group {
  min-width: 0;
  border: 1px solid var(--line);
  background: #fff;
}

.governance-module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f4f8f8;
}

.governance-module-head span {
  color: var(--muted);
  font-size: 12px;
}

.governance-board-table {
  min-width: 0;
  overflow-x: auto;
}

.governance-board-header,
.governance-control-summary {
  display: grid;
  grid-template-columns: minmax(176px, 1.55fr) repeat(3, minmax(76px, 0.72fr)) repeat(3, minmax(44px, 0.34fr)) minmax(92px, 0.82fr) minmax(76px, 0.58fr);
  gap: 8px;
  align-items: center;
  min-width: 880px;
}

.governance-board-header {
  min-height: 38px;
  padding: 8px 12px;
  color: var(--muted);
  background: #f9fbfb;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.governance-control-row {
  min-width: 880px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.governance-control-row:last-child {
  border-bottom: 0;
}

.governance-control-summary {
  position: relative;
  min-height: 58px;
  padding: 9px 30px 9px 12px;
  cursor: pointer;
  list-style: none;
}

.governance-control-summary::-webkit-details-marker {
  display: none;
}

.governance-control-summary::after {
  position: absolute;
  right: 11px;
  top: 50%;
  content: ">";
  color: var(--muted);
  font-size: 18px;
  transform: translateY(-50%) rotate(90deg);
}

.governance-control-row[open] > .governance-control-summary {
  background: #f7fbfa;
}

.governance-control-row[open] > .governance-control-summary::after {
  transform: translateY(-50%) rotate(-90deg);
}

.governance-control-summary > span,
.governance-control-summary > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.governance-process-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px 8px;
}

.governance-process-cell code {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
}

.governance-unassigned {
  color: #9a6700;
  font-size: 12px;
}

.governance-count-alert {
  color: var(--rose);
}

.governance-control-detail {
  min-width: 0;
  padding: 14px;
  border-top: 1px dashed var(--line);
  background: #fbfcfc;
}

.governance-capability-description p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.governance-operational-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 12px;
  border: 1px solid var(--line);
  background: var(--line);
}

.governance-operational-snapshot section {
  min-width: 0;
  padding: 10px;
  background: #fff;
}

.governance-operational-snapshot ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
}

.governance-operational-snapshot p {
  margin: 8px 0 0;
}

.governance-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.governance-section-head p,
.governance-capability header p {
  margin: 4px 0 0;
}

.governance-results-head {
  align-items: center;
  margin: 14px 0 0;
}

.governance-results-head + .governance-list {
  margin-top: 8px;
}

.governance-matrix {
  display: grid;
  border: 1px solid var(--line);
}

.governance-capability {
  padding: 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.governance-capability:last-child {
  border-bottom: 0;
}

.governance-capability > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex-wrap: wrap;
}

.governance-capability code {
  color: var(--muted);
  font-size: 12px;
}

.governance-capability header p {
  color: var(--muted);
  font-size: 13px;
}

.governance-duty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.governance-duty-picker {
  min-width: 0;
  border: 1px solid var(--line);
  background: #f8fafb;
}

.governance-duty-not-applicable {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 42px;
  padding: 8px 10px;
  color: var(--muted);
}

.governance-duty-not-applicable strong {
  color: var(--ink);
}

.governance-duty-not-applicable span {
  font-size: 12px;
}

.governance-duty-picker summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  cursor: pointer;
}

.governance-duty-picker summary span {
  color: var(--muted);
  font-size: 12px;
}

.governance-subject-options {
  display: grid;
  gap: 7px;
  max-height: 230px;
  padding: 9px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  background: #fff;
}

.governance-subject-options label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
}

.governance-subject-options input {
  margin: 1px 0 0;
}

.governance-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.governance-advanced-exceptions {
  margin-top: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

.governance-advanced-exceptions > summary,
.governance-exception-row > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
}

.governance-advanced-exceptions > summary::-webkit-details-marker,
.governance-exception-row > summary::-webkit-details-marker {
  display: none;
}

.governance-advanced-exceptions > summary::after,
.governance-exception-row > summary::after {
  content: ">";
  color: var(--muted);
  transform: rotate(90deg);
}

.governance-advanced-exceptions[open] > summary::after,
.governance-exception-row[open] > summary::after {
  transform: rotate(-90deg);
}

.governance-advanced-exceptions > summary span {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.governance-advanced-exceptions > p {
  margin: 0;
  padding: 0 11px 10px;
}

.governance-exception-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.governance-exception-row {
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.governance-exception-row:last-child {
  border-bottom: 0;
}

.governance-exception-row > summary > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}

.governance-exception-row > summary code {
  color: var(--muted);
  font-size: 11px;
}

.governance-exception-row > summary .status-cell {
  margin-left: auto;
}

.governance-exception-detail {
  padding: 12px;
  border-top: 1px dashed var(--line);
  background: #fbfcfc;
}

.governance-work-form,
.governance-approval-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--line);
}

.governance-work-form label,
.governance-approval-form label {
  min-width: 0;
}

.governance-work-form input,
.governance-work-form select,
.governance-approval-form input,
.governance-approval-form select {
  width: 100%;
  min-height: 40px;
  margin-top: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
}

.governance-work-form .full-action,
.governance-approval-form .full-action {
  align-self: end;
  min-height: 40px;
  margin: 0;
}

.governance-work-assignee-hint {
  display: block;
  min-height: 30px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.governance-work-assignee-hint.error {
  color: var(--rose);
}

.governance-automation-state {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.governance-automation-state.active {
  color: var(--teal);
  font-weight: 700;
}

.governance-approval-error {
  color: var(--rose);
  overflow-wrap: anywhere;
}

.governance-list {
  display: grid;
  margin-top: 12px;
  border: 1px solid var(--line);
}

.governance-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.governance-list-row:last-child {
  border-bottom: 0;
}

.governance-list-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.governance-list-main strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.governance-list-main small {
  width: 100%;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.governance-empty {
  margin: 0;
  padding: 18px;
  background: #fff;
}

.governance-audit-row {
  grid-template-columns: 1fr;
}

.translation-runtime-status {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.translation-runtime-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.translation-runtime-provider,
.translation-runtime-env,
.translation-runtime-readiness {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.translation-runtime-provider {
  display: grid;
  gap: 6px;
}

.translation-runtime-provider p,
.translation-runtime-env p {
  margin: 0;
}

.translation-runtime-provider-head,
.translation-runtime-readiness {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.translation-runtime-readiness {
  justify-content: flex-start;
}

.translation-runtime-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.translation-runtime-pill.ready,
.translation-runtime-env-list .ready {
  color: #0f766e;
  background: #e6fffb;
}

.translation-runtime-pill.blocked,
.translation-runtime-env-list .blocked {
  color: #b45309;
  background: #fff7ed;
}

.translation-runtime-env-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.translation-runtime-env-list span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.translation-runtime-env-list strong {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
}

.translation-runtime-language-samples {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.translation-runtime-language-samples > div {
  display: grid;
  gap: 6px;
}

.translation-runtime-language-samples > div > strong {
  font-size: 12px;
  color: var(--muted);
}

.translation-runtime-language-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.translation-runtime-language-chip-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.2;
}

.translation-runtime-language-chip-row small {
  color: var(--muted);
  font-size: 11px;
}

.detail-field-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.detail-field-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.quote-detail-field-item {
  grid-template-columns: minmax(128px, 190px) 56px max-content 108px;
  gap: 6px;
  justify-content: start;
}

.detail-field-item.disabled {
  border-style: dashed;
  background: #f8fafc;
  opacity: 0.72;
}

.detail-field-editors {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 6px;
}

.detail-field-name,
.detail-field-unit {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.quote-detail-field-item label {
  font-size: 11px;
  color: #5f6f72;
}

.quote-detail-field-item input {
  min-width: 0;
  min-height: 30px;
  padding: 0 7px;
  font-size: 12px;
}

.detail-field-print-toggle {
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 30px;
  color: #344749;
  font-size: 12px;
  white-space: nowrap;
}

.detail-field-print-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.field-state-pill {
  align-self: end;
  width: max-content;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 4px 8px;
  color: #64748b;
  font-size: 12px;
  line-height: 1;
}

.detail-field-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.quote-detail-field-item .detail-field-actions {
  flex-wrap: nowrap;
  min-width: max-content;
}

.quote-detail-field-item .tiny-button {
  white-space: nowrap;
}

.detail-field-actions .tiny-button {
  min-height: 30px;
  padding: 4px 6px;
  font-size: 12px;
}

.compact-grid {
  margin-top: 12px;
}

.status-note {
  color: var(--green);
  font-weight: 800;
}

.compact-field {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.compact-field input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
}

.qr-upload {
  margin-top: 10px;
  min-height: 36px;
  border: 1px dashed var(--teal);
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  font-weight: 700;
}

.qr-upload input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.portal-order {
  margin-bottom: 12px;
}

.portal-shopping {
  margin-bottom: 14px;
}

.portal-side-stack {
  display: grid;
  gap: 14px;
  align-self: start;
}

.portal-picker-entry {
  display: grid;
  gap: 12px;
}

.portal-inquiry-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.portal-inquiry-method-card {
  display: grid;
  grid-template-rows: 92px 180px auto;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfb;
}

.portal-inquiry-method-card > .panel-head {
  height: 92px;
  min-height: 92px;
  margin-bottom: 0;
  align-items: start;
  overflow: hidden;
}

.portal-method-entry,
.custom-upload {
  height: 180px;
  min-height: 0;
  border: 1px dashed var(--teal);
  border-radius: 8px;
  background: #fff;
  color: var(--teal);
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

#customImagePreview {
  font-weight: 400;
}

.portal-method-entry:hover,
.custom-upload:hover {
  background: var(--teal-soft);
}

.portal-method-action {
  width: 100%;
}

.portal-inquiry-cart-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.portal-inquiry-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.portal-inquiry-wall-card {
  display: grid;
  grid-template-rows: 138px auto;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--teal);
  border-radius: 8px;
  background: #fff;
}

.portal-inquiry-wall-image {
  width: 100%;
  height: 138px;
  border-radius: 7px;
  overflow: hidden;
}

.portal-inquiry-wall-image.product-image img {
  object-fit: contain;
  background: #fff;
}

.portal-inquiry-wall-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.portal-inquiry-wall-body p {
  margin: 0;
  min-width: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.portal-inquiry-wall-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portal-inquiry-wall-head strong {
  min-width: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.portal-inquiry-wall-head .tiny-button {
  min-height: 28px;
  padding: 0 7px;
  font-size: 11px;
}

.portal-inquiry-cart-count {
  margin-left: 8px;
  vertical-align: middle;
}

.compact-wall-field {
  gap: 4px;
  font-size: 11px;
}

.compact-wall-field textarea {
  min-height: 58px;
}

.compact-wall-field input {
  min-height: 30px;
}

.custom-inquiry {
  display: grid;
}

.custom-inquiry .panel-head {
  margin-bottom: 0;
}

.custom-inquiry h3 {
  margin: 0;
}

.custom-inquiry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.custom-upload {
  position: relative;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
  overflow: hidden;
}

.custom-upload input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

#customImagePreview {
  width: 100%;
  min-height: 142px;
  display: grid;
  place-items: center;
}

.custom-upload small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

#customImagePreview img,
.cart-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
}

.custom-image-grid {
  width: 100%;
  max-height: 260px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
  overflow: auto;
  padding: 6px;
}

.custom-image-grid img {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid var(--line);
  object-fit: contain;
  background: #fff;
}

.custom-image-draft-list {
  width: 100%;
  max-height: min(68vh, 640px);
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 6px;
}

.custom-image-draft {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.custom-image-draft img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.quote-pricing-group-title {
  padding: 8px 10px;
  border-left: 3px solid var(--teal);
  background: #eef6f5;
  color: #173b3a;
  font-size: 13px;
  font-weight: 800;
}

.quote-line-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quote-line-context-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.quote-pricing-mode-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.quote-pricing-mode-control select {
  width: auto;
  min-width: 132px;
  padding: 5px 26px 5px 7px;
  font-size: 12px;
}

.quote-request-trigger {
  border: 0;
  padding: 4px 2px;
  background: transparent;
  color: #7c8792;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.quote-request-trigger.has-request {
  color: #16805f;
}

.quote-request-popover {
  position: fixed;
  z-index: 9400;
  display: grid;
  gap: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
  border: 1px solid #8bb8aa;
  border-radius: 6px;
  background: #fff;
  color: #1f2933;
  box-shadow: 0 12px 28px rgba(31, 41, 51, 0.22);
  white-space: normal;
  overflow-wrap: anywhere;
}

.quote-request-popover.is-empty {
  border-color: var(--line);
  color: #7c8792;
}

.quote-items.quote-request-clearance {
  padding-top: var(--quote-request-clearance, 0);
}

.custom-draft-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12, 20, 22, 0.48);
}

.custom-draft-dialog {
  width: min(920px, 96vw);
  max-height: 92vh;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 32, 34, 0.24);
}

.custom-draft-head,
.custom-draft-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.custom-draft-actions {
  justify-content: flex-end;
}

.custom-request-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.custom-cart-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 10px;
  align-items: start;
}

.custom-request-field textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fff;
}

.custom-qty-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.custom-qty-field input {
  width: 100%;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
}

.custom-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.custom-fields .custom-qty-field {
  max-width: 180px;
}

.custom-fields label,
.custom-note {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.custom-fields input,
.custom-note textarea {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--ink);
  background: #fff;
}

.custom-note textarea {
  resize: vertical;
}

.account-form .full-action {
  align-self: end;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.form-status {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
}

.form-status.success {
  color: #0f766e;
}

.form-status.error {
  color: #b42318;
}

.compact-head {
  margin-top: 18px;
}

.compact-head h3 {
  margin: 0;
  font-size: 15px;
}

.account-invite-panel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.account-invite-create {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) max-content;
  gap: 10px;
  align-items: end;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.account-invite-create label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.account-invite-template {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.account-invite-template summary {
  cursor: pointer;
  padding: 10px;
  color: var(--ink);
  font-size: 13px;
}

.account-template-form {
  padding: 0 10px 10px;
}

.account-invite-actions,
.account-invite-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.account-invite-filters input,
.account-invite-filters select {
  min-width: 0;
  flex: 1 1 145px;
}

.account-invite-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  padding-right: 2px;
}

.account-invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.account-invite-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .account-invite-create {
    grid-template-columns: 1fr;
  }
}

.account-group-list {
  display: grid;
  gap: 10px;
}

.account-fold-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.account-fold-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  background: #f7fafb;
}

.account-row-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.account-row-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(170px, 0.7fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.account-row-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.account-row-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.account-row-identity > span:last-child {
  min-width: 0;
}

.account-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.account-row-card.is-editing {
  align-items: start;
}

.account-inline-edit {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.account-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.account-inline-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.account-inline-grid input,
.account-inline-grid select {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
}

.account-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  align-content: start;
  margin-top: 0;
  max-height: min(62vh, 720px);
  overflow-y: auto;
  padding-right: 6px;
  overscroll-behavior: contain;
}

.portal-picker-modal-open {
  overflow: hidden;
}

#portalProductPicker.modal-open {
  position: fixed;
  inset: 10px;
  z-index: 3300;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: calc(100vw - 20px);
  max-width: none;
  height: calc(100vh - 20px);
  max-height: none;
  margin: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(31, 41, 51, 0.32);
  overflow: hidden;
}

#portalProductPicker.modal-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(31, 41, 51, 0.48);
}

#portalProductPicker.modal-open .portal-product-grid {
  max-height: none;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
}

.portal-inquiry-image-card {
  display: grid;
  grid-template-rows: minmax(132px, 1fr) auto;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.portal-inquiry-image-card:hover,
.portal-inquiry-image-card.selected {
  border-color: var(--teal);
  box-shadow: var(--card-hover-shadow);
}

.portal-inquiry-image {
  width: 100%;
  height: 132px;
  border-radius: 7px;
  overflow: hidden;
}

.portal-inquiry-image.product-image img,
.cart-thumb.product-image img {
  object-fit: contain;
  background: #fff;
}

.portal-inquiry-image-meta {
  display: grid;
  gap: 6px;
}

.portal-inquiry-image-meta strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.portal-inquiry-image-meta .quote-check,
.portal-inquiry-image-meta .tiny-button {
  min-height: 32px;
  padding: 0 8px;
  font-size: 12px;
}

.portal-product-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 78;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(31, 41, 51, 0.48);
}

.portal-product-detail-dialog {
  width: min(980px, 100%);
  height: min(760px, calc(100vh - 44px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(31, 41, 51, 0.28);
  overflow: hidden;
}

.portal-product-detail-dialog header,
.portal-product-detail-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.portal-product-detail-dialog footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.portal-product-detail-body {
  min-height: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
}

.select-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.select-line label {
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 7px;
}

.qty-control {
  display: grid;
  grid-template-columns: auto 74px;
  align-items: center;
  gap: 8px;
}

.qty-control input {
  width: 74px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
}

.cart-empty {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #f7fafb;
}

button.cart-empty {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

button.cart-empty:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: #eef8f6;
}

.cart-list {
  display: grid;
  gap: 10px;
}

.cart-item {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.custom-cart-item {
  border-color: var(--teal);
  background: #f8fbfb;
}

.cart-item-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.cart-thumb {
  width: 62px;
  height: 62px;
  min-height: 62px;
  border-radius: 6px;
  border: 1px solid var(--line);
  overflow: hidden;
  font-size: 11px;
}

.cart-total {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.portal-inquiry-history-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.portal-inquiry-history-item {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.portal-inquiry-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portal-inquiry-history-head > span:first-child,
.portal-inquiry-history-head > .inline-record-link {
  overflow-wrap: anywhere;
}

.history-archive {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.history-archive-year,
.history-archive-month {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.quote-records-modal-body {
  grid-template-rows: minmax(0, 1fr);
}

.quote-records-modal-scroll {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.quote-records-draft-section {
  display: grid;
  gap: 10px;
}

.history-archive-month {
  background: #f7fafb;
}

.history-archive-summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.history-archive-summary::-webkit-details-marker {
  display: none;
}

.history-archive-summary::before {
  content: "›";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 140ms ease;
}

.history-archive-year[open] > .history-archive-year-summary::before,
.history-archive-month[open] > .history-archive-month-summary::before {
  transform: rotate(90deg);
}

.history-archive-summary > :first-child {
  min-width: 0;
  margin-right: auto;
  overflow-wrap: anywhere;
}

.history-archive-count {
  min-width: 25px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.history-archive-months {
  display: grid;
  gap: 7px;
  padding: 0 9px 9px 28px;
}

.history-archive-records {
  display: grid;
  gap: 8px;
  padding: 0 9px 9px;
}

.history-archive-table-wrap {
  margin: 0 9px 9px;
}

.bug-reporter {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 21;
  display: grid;
  justify-items: start;
  gap: 10px;
}

.bug-panel {
  position: fixed;
  left: 22px;
  bottom: 22px;
  width: min(1240px, calc(100vw - 28px));
  height: calc(100vh - 44px);
  height: calc(100dvh - 44px);
  min-width: min(560px, calc(100vw - 28px));
  min-height: min(460px, calc(100vh - 44px));
  min-height: min(460px, calc(100dvh - 44px));
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  resize: both;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(31, 41, 51, 0.2);
}

.bug-panel .feedback-tabs {
  grid-row: 1;
}

.bug-panel .feedback-message-list,
.bug-panel .feedback-submit-form {
  grid-row: 2;
}

.bug-panel #bugSubmitStatus {
  grid-row: 3;
}

.bug-panel.feedback-panel-customer-messages {
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  overflow: hidden;
  resize: both;
}

#bugSubmitStatus:empty {
  display: none;
}

.feedback-panel-drag-handle {
  position: absolute;
  top: 5px;
  left: 50%;
  z-index: 7;
  width: 82px;
  height: 14px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  cursor: move;
  touch-action: none;
}

.feedback-panel-drag-handle span {
  width: 48px;
  height: 4px;
  border-radius: 999px;
  background: #cbd5e1;
}

.feedback-panel-dragging {
  user-select: none;
}

.feedback-panel-window-controls {
  position: absolute;
  top: 5px;
  right: 6px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 1px;
  border-radius: 6px;
  background: transparent;
}

.feedback-panel-window-button {
  width: 26px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  padding: 0;
  background: transparent;
  color: #64748b;
  font-weight: 900;
  box-shadow: none;
}

.feedback-panel-window-button:hover,
.feedback-panel-window-button:focus-visible {
  background: #eef2f6;
  color: var(--ink);
  outline: 1px solid rgba(100, 116, 139, 0.18);
  outline-offset: -1px;
}

.feedback-panel-window-button.feedback-panel-close:hover,
.feedback-panel-window-button.feedback-panel-close:focus-visible {
  background: #fee2e2;
  color: #dc2626;
  outline-color: rgba(220, 38, 38, 0.22);
}

.feedback-panel-window-button[aria-pressed="true"] {
  background: var(--teal-soft);
  color: var(--teal);
}

.feedback-panel-window-icon {
  position: relative;
  width: 12px;
  height: 12px;
  display: block;
}

.feedback-panel-window-icon-minimize::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.feedback-panel-window-icon-maximize {
  border: 1.6px solid currentColor;
  border-radius: 2px;
}

.feedback-panel-window-icon-close::before,
.feedback-panel-window-icon-close::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 5px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.feedback-panel-window-icon-close::before {
  transform: rotate(45deg);
}

.feedback-panel-window-icon-close::after {
  transform: rotate(-45deg);
}

.bug-panel.feedback-panel-minimized {
  width: min(360px, calc(100vw - 28px));
  height: 42px;
  min-width: min(280px, calc(100vw - 28px));
  min-height: 42px;
  max-height: 42px;
  grid-template-rows: 1fr;
  align-items: center;
  resize: none;
  padding: 7px 88px 7px 12px;
  cursor: pointer;
}

.bug-panel.feedback-panel-minimized::before {
  content: "CONTACTS";
  min-width: 0;
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.bug-panel.feedback-panel-minimized .feedback-panel-drag-handle,
.bug-panel.feedback-panel-minimized .feedback-tabs,
.bug-panel.feedback-panel-minimized .feedback-message-list,
.bug-panel.feedback-panel-minimized .feedback-submit-form,
.bug-panel.feedback-panel-minimized .feedback-media-player,
.bug-panel.feedback-panel-minimized .feedback-image-viewer,
.bug-panel.feedback-panel-minimized .feedback-file-viewer,
.bug-panel.feedback-panel-minimized .feedback-camera-modal,
.bug-panel.feedback-panel-minimized #bugSubmitStatus {
  display: none;
}

.bug-panel.feedback-panel-minimized .feedback-panel-window-controls {
  top: 8px;
  right: 6px;
}

.bug-panel.feedback-panel-maximized {
  inset: 8px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  resize: none;
}

.feedback-nav-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.message-badge {
  min-width: 20px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 6px;
  background: var(--rose);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.pending-events-badge {
  background: #dc2626;
}

.pending-refresh-gauge {
  --pending-refresh-progress: 0deg;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: conic-gradient(#16a34a 0deg var(--pending-refresh-progress), #dc2626 var(--pending-refresh-progress) 360deg);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
}

.pending-refresh-gauge.is-refreshing {
  opacity: 0.78;
}

.feedback-nav-button.has-unread {
  color: #f7fafc;
}

.feedback-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.feedback-tabs .active {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal);
}

.feedback-message-list,
.feedback-submit-form {
  display: grid;
  gap: 10px;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
}

.feedback-message-list {
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.feedback-message-workspace {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  height: 100%;
}

.feedback-message-workspace-body {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.feedback-message-workspace-body > * {
  min-height: 0;
}

.feedback-message-account-header {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 8px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.96);
}

.feedback-message-account-trigger {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.feedback-message-account-trigger .current-account-avatar {
  width: 30px;
  height: 30px;
}

.feedback-message-account-trigger span:not(.feedback-avatar) {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.feedback-message-account-trigger strong,
.feedback-message-account-trigger small {
  max-width: min(210px, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-message-account-trigger small {
  color: var(--muted);
  font-size: 11px;
}

.feedback-contact-selector {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.feedback-room-title,
.feedback-room-header,
.feedback-conversation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.feedback-room-title > div,
.feedback-room-header > div,
.feedback-conversation-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.feedback-room-title strong,
.feedback-room-header strong,
.feedback-conversation-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.feedback-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  min-height: 0;
}

.feedback-contact-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.feedback-contact-card:hover,
.feedback-contact-card:focus-visible {
  border-color: var(--teal);
  background: #f4fbfa;
  outline: none;
}

.feedback-contact-card.unread {
  border-color: var(--rose);
  background: #fff7f7;
}

.feedback-contact-card .feedback-contact-unread-badge {
  align-self: start;
}

.feedback-contact-card span:not(.feedback-avatar):not(.message-badge):not(.feedback-contact-unread-badge) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.feedback-contact-card strong,
.feedback-contact-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-admin-message-room {
  position: relative;
  display: grid;
  grid-template-columns: minmax(310px, 0.9fr) minmax(0, 2.1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.feedback-contact-drawer-toggle,
.feedback-contact-drawer-backdrop,
.feedback-contact-list-close {
  display: none;
}

.feedback-contact-list-panel,
.feedback-contact-room-panel {
  display: grid;
  min-width: 0;
  min-height: 0;
}

.feedback-contact-room-panel {
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
}

.feedback-contact-list-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 6px;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #f6f8fa;
}

.feedback-admin-message-room.customer-desktop-drawer {
  grid-template-columns: 1fr;
  position: relative;
  overflow: hidden;
}

.feedback-admin-message-room.customer-desktop-drawer .feedback-contact-list-panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 7;
  width: min(360px, 42vw);
  max-height: none;
  transform: translateX(calc(-100% - 12px));
  transition: transform 0.22s ease;
  box-shadow: 12px 0 28px rgba(15, 23, 42, 0.18);
}

.feedback-admin-message-room.customer-desktop-drawer.contact-list-open .feedback-contact-list-panel {
  transform: translateX(0);
}

.feedback-admin-message-room.customer-desktop-drawer .feedback-contact-drawer-toggle {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 72px;
  min-width: 26px;
  min-height: 72px;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 7px 7px 0;
  padding: 4px 2px;
  background: #eaf5f3;
  backdrop-filter: none;
  color: var(--teal);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  overflow: hidden;
  transform: translateY(-50%);
  box-shadow: 2px 0 8px rgba(15, 23, 42, 0.12);
}

.feedback-admin-message-room.customer-desktop-drawer .feedback-contact-drawer-toggle::before {
  display: none;
}

.feedback-admin-message-room.customer-desktop-drawer .feedback-contact-drawer-toggle span:first-child {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: rotate(-90deg);
  transform-origin: center;
}

.feedback-admin-message-room.customer-desktop-drawer .feedback-contact-drawer-toggle .message-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.feedback-admin-message-room.customer-desktop-drawer.contact-list-open .feedback-contact-drawer-toggle {
  left: calc(min(360px, 42vw) - 1px);
}

.feedback-admin-message-room.customer-desktop-drawer .feedback-contact-drawer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  border: 0;
  background: rgba(15, 23, 42, 0.24);
}

.feedback-admin-message-room.customer-desktop-drawer.contact-list-open .feedback-contact-drawer-backdrop {
  display: block;
}

.feedback-admin-message-room.customer-desktop-drawer .feedback-contact-room-panel {
  min-height: 0;
  height: 100%;
}

.bug-panel .feedback-message-list,
.bug-panel .feedback-message-workspace,
.bug-panel .feedback-message-workspace-body,
.bug-panel .feedback-admin-message-room,
.bug-panel .feedback-contact-list-panel,
.bug-panel .feedback-contact-room-panel,
.bug-panel .feedback-customer-list,
.bug-panel .feedback-room-body,
.bug-panel .feedback-room-conversation,
.bug-panel .feedback-conversation-pane,
.bug-panel .feedback-room-shell {
  height: 100%;
  min-height: 0;
}

.bug-panel .feedback-message-list {
  overflow: hidden;
}

.bug-panel .feedback-message-workspace,
.bug-panel .feedback-message-workspace-body,
.bug-panel .feedback-admin-message-room {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.bug-panel .feedback-room-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.bug-panel .feedback-room-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.bug-panel .feedback-room-conversation {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.bug-panel .feedback-conversation-pane {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.bug-panel .feedback-conversation-pane.no-conversation-head {
  grid-template-rows: minmax(0, 1fr);
}

.bug-panel .feedback-room-conversation {
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bug-panel .feedback-conversation {
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
}

.bug-panel .feedback-conversation-pane > .cart-empty,
.bug-panel .feedback-customer-list > .cart-empty,
.bug-panel .feedback-empty-room {
  min-height: 100%;
  display: grid;
  align-content: center;
}

.bug-panel.feedback-gallery-active {
  grid-template-rows: minmax(0, 1fr);
}

.bug-panel.feedback-gallery-active .feedback-tabs,
.bug-panel.feedback-gallery-active .feedback-panel-window-controls,
.bug-panel.feedback-gallery-active .feedback-panel-close,
.bug-panel.feedback-gallery-active .feedback-room-header,
.bug-panel.feedback-gallery-active .feedback-room-footer,
.bug-panel.feedback-gallery-active .feedback-contact-list-panel,
.bug-panel.feedback-gallery-active .feedback-contact-drawer-toggle,
.bug-panel.feedback-gallery-active .feedback-contact-drawer-backdrop {
  display: none;
}

.bug-panel.feedback-gallery-active .feedback-message-list {
  grid-row: 1;
  padding: 0;
}

.bug-panel.feedback-gallery-active .feedback-admin-message-room {
  grid-template-columns: minmax(0, 1fr);
}

.bug-panel.feedback-gallery-active .feedback-room-shell {
  grid-template-rows: minmax(0, 1fr);
}

.bug-panel.feedback-gallery-active .feedback-room-conversation {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.bug-panel.feedback-gallery-active .feedback-room-title-bar {
  display: none;
}

.bug-panel.feedback-gallery-active .feedback-conversation-pane {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.feedback-contact-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.feedback-contact-list-head > div,
.feedback-contact-profile {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.feedback-contact-profile {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.feedback-contact-profile .current-account-avatar {
  width: 34px;
  height: 34px;
}

.feedback-contact-profile span:not(.feedback-avatar) {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.feedback-contact-profile strong,
.feedback-contact-profile small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-contact-profile small {
  color: var(--muted);
  font-size: 11px;
}

.feedback-contact-head-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(54px, auto));
  align-items: center;
  justify-content: end;
  gap: 6px;
}

.feedback-contact-head-stats span {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 1px;
}

.feedback-contact-head-stats strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.1;
}

.feedback-contact-head-stats small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.feedback-sound-toggle {
  position: relative;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

.feedback-sound-toggle.is-off {
  border-color: rgba(220, 38, 38, 0.32);
  background: #fff;
  color: var(--ink);
}

.feedback-sound-toggle.is-off .feedback-tool-icon,
.feedback-sound-toggle.is-off .feedback-speaker-icon {
  color: #dc2626;
}

.feedback-room-list-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 4px;
  min-height: 22px;
  margin: 0 0 -7px 6px;
}

.feedback-room-list-group-tab {
  min-width: 0;
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
}

.feedback-room-list-group-tab .feedback-group-manage-button {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  align-self: flex-end;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  padding: 0;
  background: #fff;
}

.feedback-room-list-group-button {
  min-width: 0;
  height: 24px;
  min-height: 24px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}

.feedback-room-list-group-button.active {
  border-color: var(--teal);
  background: #eaf5f3;
  color: var(--teal-dark);
}

.feedback-room-list-group-button.active + .feedback-group-manage-button {
  border-color: var(--teal);
  background: #eaf5f3;
  color: var(--teal-dark);
}

.feedback-room-list-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  height: 24px;
  min-height: 24px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  padding: 2px 8px 3px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.feedback-room-list-tabs button.active {
  border-color: var(--teal);
  background: #eaf5f3;
  color: var(--teal-dark);
}

.feedback-room-list-tabs .feedback-room-list-group-main {
  flex: 1 1 auto;
  height: 24px;
  min-height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.feedback-room-list-tabs .feedback-room-list-group-add {
  width: 24px;
  height: 24px;
  min-width: 22px;
  min-height: 24px;
  border: 0;
  border-left: 1px solid rgba(13, 148, 136, 0.18);
  border-radius: 0;
  padding: 2px 5px;
  background: transparent;
  color: inherit;
}

.feedback-contact-search input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.feedback-customer-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 4px 4px;
  background: #fff;
}

.feedback-room-list-tabs + .feedback-customer-list {
  border-radius: 0 8px 8px 8px;
}

.feedback-customer-list.has-room-tabs {
  background: #eaf5f3;
}

.feedback-customer-list.has-room-tabs.direct-mode,
.feedback-customer-list.has-room-tabs.group-mode {
  border-color: var(--teal);
}

.feedback-customer-list-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 54px;
  min-width: 0;
  border: 0;
  border-radius: 7px;
  padding: 6px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.feedback-customer-list-item:hover,
.feedback-customer-list-item:focus-visible {
  border-color: var(--teal);
  outline: none;
}

.feedback-customer-list-item.active {
  box-shadow: inset 3px 0 0 var(--teal);
  background: #eaf5f3;
}

.feedback-customer-list-item.unread:not(.active) {
  background: #fff7f7;
}

.feedback-customer-list-item.group-room {
  border-left: 3px solid #5b6ee1;
}

.feedback-customer-list-item.direct-room {
  border-left: 3px solid var(--teal);
}

.feedback-customer-list-item .feedback-avatar {
  width: 34px;
  height: 34px;
}

.feedback-contact-avatar-wrap {
  position: relative;
  width: 34px;
  height: 34px;
}

.feedback-presence-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.18);
}

.feedback-customer-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.feedback-customer-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(54px, auto);
  align-items: center;
  gap: 5px;
}

.feedback-customer-list-item strong,
.feedback-customer-list-item small,
.feedback-customer-list-item time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-customer-list-item time {
  max-width: 72px;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.feedback-contact-unread-badge {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 6px;
  background: var(--rose);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(224, 49, 49, 0.12);
}

.feedback-empty-room {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  min-height: 320px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  text-align: center;
}

.feedback-empty-room-pointer {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(13, 148, 136, 0.22);
  border-radius: 999px;
  background: #eaf5f3;
  color: var(--teal);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.feedback-room-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  min-height: 0;
  height: 100%;
}

.feedback-room-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
  padding: 5px 8px 4px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f6f8fa;
}

.feedback-room-header-customer {
  display: grid;
}

.feedback-room-header-main {
  flex: 1 1 360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.feedback-room-title-bar {
  min-width: 0;
  min-height: 23px;
  max-width: min(78%, 460px);
  display: inline-flex;
  align-items: center;
  justify-self: center;
  box-sizing: border-box;
  margin: 0 0 -1px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 2px 10px 3px;
  background: #eaf5f3;
  box-shadow: 0 -1px 0 rgba(13, 148, 136, 0.06) inset;
}

.feedback-room-title-name {
  min-width: 0;
  overflow: hidden;
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-room-title-bar .feedback-composer-search-tools {
  justify-self: end;
}

.feedback-room-title-bar .feedback-search-open-button {
  border-color: transparent;
  background: transparent;
  color: var(--teal);
}

.feedback-room-header-compact {
  grid-template-columns: minmax(0, 1fr);
}

.feedback-room-sync-card {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.feedback-room-sync-text {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-room-header-translation {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.feedback-room-header-translation .feedback-translation-control {
  flex: 1 1 0;
  width: auto;
  max-width: 560px;
}

.feedback-room-header-translation .feedback-composer-search-tools {
  justify-self: end;
}

.feedback-room-header-translation .feedback-search-open-button {
  border-color: transparent;
  background: transparent;
  color: var(--teal);
}

.feedback-room-type-badge {
  height: 30px;
  width: auto;
  flex: 0 0 auto;
  display: inline-flex;
  place-items: center;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.feedback-room-type-badge.group {
  background: transparent;
  color: inherit;
}

.feedback-room-type-badge .feedback-tool-icon {
  width: 30px;
  height: 30px;
}

.feedback-room-type-badge.group .feedback-tool-icon {
  width: 44px;
}

.feedback-room-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.feedback-group-announcement {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.feedback-room-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  height: 100%;
}

.feedback-room-conversation {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.feedback-room-conversation {
  align-content: stretch;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.feedback-room-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
  background: #fff;
  box-shadow: none;
}

.feedback-room-empty-compose {
  padding: 10px;
  color: var(--muted);
  text-align: center;
}

.feedback-conversation-pane {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 0 8px 0 0;
  padding: 6px;
  background: #f3f6f7;
  overflow: hidden;
}

.feedback-conversation-pane.no-conversation-head {
  grid-template-rows: minmax(0, 1fr);
}

.feedback-conversation-head-compact {
  justify-content: flex-end;
}

.feedback-load-earlier {
  justify-self: center;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 999px;
  padding: 5px 12px;
  background: rgba(15, 118, 110, 0.08);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.feedback-room-list-tabs button span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-load-earlier:hover,
.feedback-load-earlier:focus-visible {
  border-color: rgba(15, 118, 110, 0.48);
  background: rgba(15, 118, 110, 0.14);
  outline: none;
}

.feedback-message-manage-slot:empty {
  display: none;
}

.feedback-media-gallery-pane {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
}

.feedback-media-gallery-head {
  position: relative;
  z-index: 4;
  min-height: 38px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
}

.feedback-media-gallery-type-tabs {
  min-width: 0;
  justify-self: center;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(86px, max-content);
  gap: 6px;
  max-width: 100%;
}

.feedback-media-gallery-type-tabs.with-chat {
  grid-auto-columns: minmax(76px, max-content);
}

.feedback-media-gallery-type-tabs button {
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.feedback-media-gallery-type-tabs button.active {
  border-color: var(--teal);
  background: #eaf5f3;
  color: var(--teal-dark);
}

.feedback-media-gallery-close {
  justify-self: end;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 0;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
  cursor: pointer;
}

.feedback-media-gallery-close:hover,
.feedback-media-gallery-close:focus-visible {
  border-color: var(--teal);
  color: var(--teal);
  outline: none;
}

.feedback-media-gallery-tools {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.feedback-search-page-tools {
  min-width: 0;
}

.feedback-media-gallery-search {
  min-width: 0;
  display: block;
}

.feedback-media-gallery-search input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.feedback-media-gallery-summary {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: right;
}

.feedback-media-gallery-summary strong,
.feedback-media-gallery-summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-media-selection-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.feedback-gallery-return-button {
  border-color: rgba(15, 118, 110, 0.42);
  background: #eaf5f3;
  color: var(--teal-dark);
  font-weight: 900;
}

.feedback-search-return-button {
  border-color: rgba(49, 102, 166, 0.38);
  background: #edf5ff;
  color: var(--blue);
  font-weight: 900;
}

.feedback-media-gallery-results {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.feedback-media-gallery-group {
  display: grid;
  gap: 8px;
}

.feedback-media-gallery-group h4 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
}

.feedback-media-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

.feedback-media-gallery-grid.files {
  grid-template-columns: 1fr;
}

.feedback-media-gallery-card {
  position: relative;
  min-width: 0;
  min-height: 138px;
  display: grid;
  grid-template-rows: minmax(86px, 1fr) auto;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.feedback-media-gallery-card.selected {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.18);
}

.feedback-media-gallery-pane.select-mode .feedback-media-gallery-card {
  border-color: rgba(15, 118, 110, 0.32);
}

.feedback-media-gallery-pane.select-mode .feedback-media-gallery-card:not(.selected) {
  background: #fbfdfd;
}

.feedback-media-gallery-card img,
.feedback-media-video-thumb,
.feedback-media-file-thumb {
  width: 100%;
  height: 100%;
  min-height: 86px;
  border-radius: 6px;
  border: 1px solid #d9e4e8;
  background: #f8fbfb;
  object-fit: cover;
}

.feedback-media-gallery-card img,
.feedback-media-gallery-card video,
.feedback-media-gallery-card .feedback-media-video-fallback {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.feedback-media-video-thumb,
.feedback-media-file-thumb {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: var(--teal);
}

.feedback-media-video-preview {
  position: relative;
  overflow: hidden;
}

.feedback-media-video-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  background: #f8fbfb;
}

.feedback-media-video-preview.preview-ready video {
  opacity: 1;
}

.feedback-media-video-fallback {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 6px;
  background: rgba(248, 251, 251, 0.82);
}

.feedback-media-video-preview.preview-ready .feedback-media-video-fallback {
  align-self: end;
  justify-self: start;
  margin: 6px;
  padding: 4px 6px;
  background: rgba(15, 23, 42, 0.58);
  color: #fff;
}

.feedback-media-video-preview.preview-ready .feedback-media-video-fallback .feedback-tool-icon {
  display: none;
}

.feedback-media-video-thumb .feedback-tool-icon,
.feedback-media-file-thumb .feedback-tool-icon {
  width: 26px;
  height: 26px;
}

.feedback-media-gallery-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.feedback-media-gallery-info strong,
.feedback-media-gallery-info small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-media-gallery-info strong {
  font-size: 12px;
}

.feedback-media-gallery-info small {
  color: var(--muted);
  font-size: 11px;
}

.feedback-media-gallery-select {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(15, 118, 110, 0.9);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
}

.feedback-media-gallery-card.selectable .feedback-media-gallery-select {
  opacity: 1;
  border-color: rgba(15, 118, 110, 0.65);
  background: rgba(255, 255, 255, 0.94);
  color: transparent;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.feedback-media-gallery-card.selected .feedback-media-gallery-select {
  opacity: 1;
  border-color: transparent;
  background: rgba(15, 118, 110, 0.94);
  color: #fff;
}

.feedback-media-load-more {
  justify-self: center;
}

.feedback-current-topic-bar,
.feedback-tree-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 32px;
  color: var(--ink);
}

.feedback-current-topic-bar {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}

.feedback-current-topic-bar strong,
.feedback-current-topic-bar .muted {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-current-topic-bar strong {
  max-width: 28%;
}

.feedback-current-topic-bar .muted {
  flex: 1 1 auto;
}

.feedback-current-topic-label,
.feedback-topic-type {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #e8f1ef;
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.feedback-current-topic-label {
  min-height: 22px;
  padding: 0 8px;
}

.feedback-topic-drawer {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  overflow: hidden;
}

.feedback-topic-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.feedback-topic-drawer-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.message-badge.is-muted {
  background: #e5e7eb;
  color: var(--muted);
}

.feedback-message-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.feedback-message-actions .select-line {
  justify-content: flex-start;
}

.feedback-message-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  gap: 12px;
  align-items: start;
  min-height: 0;
}

.feedback-thread-list,
.feedback-thread-detail {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.feedback-thread-list {
  max-height: 100%;
  overflow-y: auto;
  padding-right: 3px;
}

.feedback-customer-group {
  display: grid;
  gap: 8px;
}

.feedback-customer-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.feedback-customer-group-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.feedback-customer-group-head span {
  min-width: 24px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.feedback-compose,
.feedback-reply-box {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.feedback-compose-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.feedback-compose input,
.feedback-compose textarea,
.feedback-reply-box textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.feedback-attachment-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.feedback-attachment-field input {
  padding: 7px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-weight: 400;
}

.feedback-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.feedback-thread-entry {
  display: grid;
  gap: 8px;
}

.feedback-thread-entry.subtopic {
  margin-left: 18px;
}

.feedback-subtopic-list {
  display: grid;
  gap: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.feedback-thread-inline-detail {
  display: grid;
  gap: 10px;
}

.feedback-message {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  border: 0;
  border-radius: 7px;
  padding: 9px;
  background: #f8fafb;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.feedback-message:hover,
.feedback-message:focus-visible {
  border-color: var(--teal);
  background: #f4fbfa;
  outline: none;
}

.feedback-message-check {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.feedback-message.unread {
  border-color: var(--rose);
  background: #fff7f7;
}

.feedback-message.active {
  box-shadow: inset 3px 0 0 var(--teal);
  background: var(--teal-soft);
}

.feedback-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 900;
  overflow: hidden;
  flex: 0 0 auto;
}

.feedback-avatar.has-image {
  background: #fff;
  color: transparent;
}

.feedback-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.feedback-message-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.feedback-message-main strong,
.feedback-message-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-message-main small,
.feedback-message time {
  color: var(--muted);
  font-size: 12px;
}

.feedback-topic-type {
  min-height: 22px;
  padding: 0 7px;
  background: #fff;
  color: var(--muted);
}

.feedback-conversation-frame {
  position: relative;
  min-height: 0;
  height: 100%;
  display: grid;
}

.feedback-conversation {
  display: grid;
  align-content: start;
  gap: 12px;
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: #f3f6f7;
}

.feedback-conversation-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.feedback-translation-control {
  display: inline-grid;
  grid-template-columns: minmax(76px, 1fr) 30px minmax(86px, 1fr) minmax(64px, max-content);
  align-items: center;
  gap: 4px;
  min-width: min(100%, 290px);
  max-width: 360px;
}

.feedback-translation-control select {
  min-width: 0;
  width: 100%;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 24px 0 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.feedback-translation-swap {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--brand-strong);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.feedback-translation-swap:hover {
  border-color: var(--brand);
  background: #f7fbfb;
}

.feedback-translation-auto-toggle {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.feedback-translation-auto-toggle.active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.14);
}

.feedback-message-manage-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  background: #f8fafb;
  overflow-x: auto;
}

.feedback-message-manage-bar .select-line {
  flex: 0 0 auto;
  margin-right: auto;
}

.feedback-message-manage-bar .muted {
  flex: 0 0 auto;
  white-space: nowrap;
}

.feedback-message-manage-bar .tiny-button {
  flex: 0 0 auto;
}

.feedback-search-result-line {
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.feedback-text-search-results-slot {
  min-width: 0;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.feedback-text-search-results-slot > .cart-empty {
  min-height: 100%;
  display: grid;
  align-content: center;
}

.feedback-text-search-results {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
  background: #f3f6f7;
}

.feedback-composer-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.feedback-composer-status:empty {
  display: none;
}

.feedback-unread-counter,
.feedback-new-messages-prompt {
  position: absolute;
  z-index: 5;
  min-height: 28px;
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 999px;
  background: rgba(240, 253, 244, 0.92);
  color: #15803d;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.feedback-unread-counter[hidden],
.feedback-new-messages-prompt[hidden] {
  display: none;
}

.feedback-unread-counter {
  top: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
}

.feedback-new-messages-prompt {
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 6px 12px;
}

.feedback-unread-chevrons {
  width: 12px;
  height: 14px;
  display: inline-grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-items: center;
}

.feedback-unread-chevrons span {
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.feedback-search-result-card {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.feedback-search-result-card:hover,
.feedback-search-result-card:focus-visible {
  border-color: var(--teal);
  background: #f7fbfb;
  outline: none;
}

.feedback-search-result-main,
.feedback-search-result-head {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.feedback-search-result-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
}

.feedback-search-result-head strong,
.feedback-search-result-head small,
.feedback-search-result-snippet {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feedback-search-result-head strong,
.feedback-search-result-snippet {
  white-space: nowrap;
}

.feedback-search-result-head small {
  max-width: min(42vw, 260px);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.feedback-search-result-snippet {
  color: var(--muted);
  font-size: 13px;
}

.feedback-search-result-snippet mark {
  border-radius: 4px;
  padding: 0 2px;
  background: #fff1cf;
  color: var(--ink);
}

.feedback-chat-line {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, max-content);
  align-items: start;
  gap: 8px;
  max-width: min(78%, 680px);
  justify-self: start;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.feedback-chat-line.focused .feedback-chat-bubble {
  box-shadow: 0 0 0 3px rgba(49, 102, 166, 0.18), 0 12px 28px rgba(15, 23, 42, 0.12);
}

.feedback-chat-line.selected .feedback-chat-bubble {
  box-shadow: 0 0 0 2px rgba(20, 125, 118, 0.24);
}

.feedback-chat-line.selected .feedback-chat-bubble::after {
  content: "✓";
  position: absolute;
  right: 9px;
  bottom: 6px;
  color: #168a52;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.feedback-chat-line.selecting .feedback-chat-bubble {
  cursor: pointer;
}

.feedback-chat-line.actions-open .feedback-chat-bubble {
  box-shadow: 0 0 0 2px rgba(20, 125, 118, 0.18), 0 8px 18px rgba(15, 23, 42, 0.08);
}

.feedback-chat-line.own {
  grid-template-columns: minmax(0, max-content) 36px;
  justify-self: end;
}

.feedback-chat-line.has-file-attachment {
  width: 100%;
  max-width: 100%;
  grid-template-columns: 36px minmax(0, 1fr);
}

.feedback-chat-line.own.has-file-attachment {
  grid-template-columns: minmax(0, 1fr) 36px;
}

.feedback-chat-line.own .feedback-avatar {
  grid-column: 2;
}

.feedback-chat-content {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 4px;
}

.feedback-chat-line.own .feedback-chat-content {
  grid-column: 1;
  grid-row: 1;
  justify-items: end;
}

.feedback-chat-line [data-feedback-chat-avatar-select] {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.feedback-avatar-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.78);
  cursor: zoom-out;
}

.feedback-avatar-preview-dialog {
  display: grid;
  justify-items: center;
  gap: 12px;
  color: #fff;
  text-align: center;
}

.feedback-avatar-preview-visual {
  width: min(62vw, 360px);
  height: min(62vw, 360px);
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 50%;
  background: linear-gradient(135deg, #2b5f77, #258474);
  color: #fff;
  font-size: clamp(84px, 18vw, 168px);
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.35);
}

.feedback-avatar-preview-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.feedback-avatar-preview-dialog strong {
  max-width: min(80vw, 420px);
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.feedback-chat-line.own .feedback-chat-bubble {
  border-color: rgba(37, 132, 116, 0.28);
  --feedback-chat-bubble-background: #dff1ed;
}

.feedback-chat-line.has-file-attachment .feedback-chat-content,
.feedback-chat-line.has-file-attachment .feedback-chat-bubble {
  width: 100%;
  min-width: 0;
}

.feedback-chat-timeline {
  justify-self: center;
  max-width: min(90%, 420px);
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(100, 116, 139, 0.12);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.feedback-chat-bubble {
  --feedback-chat-bubble-background: #fff;
  position: relative;
  min-width: min(280px, 100%);
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--feedback-chat-bubble-background);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.feedback-chat-bubble::before {
  content: "";
  position: absolute;
  top: 13px;
  left: -5px;
  width: 9px;
  height: 9px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--feedback-chat-bubble-background);
  transform: rotate(45deg);
  pointer-events: none;
}

.feedback-chat-line.own .feedback-chat-bubble::before {
  right: -5px;
  left: auto;
  border: 0;
  border-top: 1px solid rgba(37, 132, 116, 0.28);
  border-right: 1px solid rgba(37, 132, 116, 0.28);
}

.feedback-chat-sender-name {
  max-width: 100%;
  overflow: hidden;
  padding: 0 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafb;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.feedback-chat-actions .tiny-button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
}

.feedback-quote-rendered,
.feedback-quote-preview {
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  background: rgba(37, 132, 116, 0.08);
  color: #334155;
}

.feedback-quote-rendered {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 6px 8px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.feedback-quote-text {
  min-width: 0;
}

.feedback-quote-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 7px 8px;
}

.feedback-quote-preview-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.feedback-quote-preview-main > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-quote-media {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.feedback-quote-media-item {
  width: 54px;
  height: 54px;
  min-width: 54px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 7px;
  background: #f8fbfb;
  color: var(--teal);
}

.feedback-quote-media-item img,
.feedback-quote-media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feedback-quote-media-item.file {
  padding: 5px;
  gap: 3px;
}

.feedback-quote-media-item.file .feedback-tool-icon {
  width: 18px;
  height: 18px;
}

.feedback-quote-media-item.file small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-quote-preview .feedback-quote-media-item {
  width: 44px;
  height: 44px;
  min-width: 44px;
}

.feedback-chat-line strong,
.feedback-chat-line p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.feedback-chat-line p {
  margin: 0;
  white-space: pre-wrap;
}

.feedback-recalled-message {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

.feedback-recalled-edit {
  border: 0;
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(37, 132, 116, 0.12);
  color: var(--teal);
  font: inherit;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  cursor: pointer;
}

.feedback-recalled-edit:hover,
.feedback-recalled-edit:focus-visible {
  background: rgba(37, 132, 116, 0.2);
  outline: none;
}

.feedback-chat-translation {
  display: grid;
  gap: 4px;
  border-left: 3px solid #2563eb;
  border-radius: 6px;
  padding: 6px 8px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 12px;
}

.feedback-chat-translation span {
  color: #1d4ed8;
  font-weight: 900;
}

.feedback-chat-translation p {
  margin: 0;
}

.feedback-chat-translation-error {
  border-left-color: var(--rose);
  background: #fff7f7;
  color: var(--rose);
}

.feedback-call-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.feedback-media-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.feedback-attachment-menu {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}

.feedback-attachment-menu[open] {
  z-index: 35;
}

.feedback-attachment-menu summary {
  list-style: none;
  cursor: pointer;
}

.feedback-attachment-menu summary::-webkit-details-marker {
  display: none;
}

.feedback-attachment-menu-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  display: grid;
  gap: 4px;
  min-width: min(216px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
}

.feedback-attachment-menu-panel label,
.feedback-attachment-menu-panel button {
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.feedback-attachment-menu-panel label:hover,
.feedback-attachment-menu-panel button:hover,
.feedback-attachment-menu-panel label:focus-within,
.feedback-attachment-menu-panel button:focus-visible {
  background: #eef7f6;
  color: var(--teal);
}

.feedback-attachment-menu-panel input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.feedback-attachment-menu-panel .feedback-tool-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.feedback-composer-menu-panel .feedback-icon-button,
.feedback-composer-menu-panel .feedback-call-button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.feedback-composer-menu-panel .feedback-sound-toggle {
  position: relative;
}

.feedback-composer-menu-panel .feedback-sound-toggle.is-off {
  color: var(--text);
}

.feedback-composer-menu-panel .feedback-call-tools-menu {
  display: grid;
  gap: 4px;
}

.feedback-composer-menu-label {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-icon-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.feedback-tool-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feedback-speaker-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
}

.feedback-speaker-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  width: 7px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 5px -4px 0 -1px currentColor, 5px 4px 0 -1px currentColor;
}

.feedback-speaker-icon::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 4px;
  width: 8px;
  height: 10px;
  border: 2px solid currentColor;
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.feedback-voice-recording .feedback-speaker-icon::after {
  animation: feedbackPulse 0.7s ease-in-out infinite;
}

.feedback-call-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
}

.feedback-call-icon-voice::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 10px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 3px 3px 8px 8px;
  transform: rotate(-32deg);
}

.feedback-call-icon-video::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 5px;
  width: 11px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.feedback-call-icon-video::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 6px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes feedbackPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.feedback-chat-composer {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 7px;
  padding: 8px;
  background: #fff;
}

.feedback-room-footer .feedback-chat-composer {
  gap: 5px;
  border: 0;
  border-radius: 0;
  padding: 5px 6px;
  background: #fff;
}

.feedback-room-footer .feedback-composer-input-row {
  gap: 6px;
}

.feedback-composer-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.feedback-composer-input-shell {
  position: relative;
  min-width: 0;
  display: grid;
}

.feedback-composer-input-shell textarea {
  padding-right: 44px;
}

.feedback-voice-text-input-button {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.feedback-voice-text-input-button:hover,
.feedback-voice-text-input-button:focus-visible,
.feedback-voice-text-input-button.is-listening {
  border-color: rgba(15, 118, 110, 0.2);
  background: rgba(15, 118, 110, 0.1);
  color: var(--teal);
}

.feedback-mention-picker[hidden] {
  display: none;
}

.feedback-mention-picker {
  display: grid;
  gap: 4px;
  max-height: 178px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px;
  background: #f8fafc;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.feedback-mention-picker button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 0;
  border-radius: 7px;
  padding: 6px 7px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.feedback-mention-picker button:hover,
.feedback-mention-picker button:focus-visible {
  background: #e7f4f2;
  outline: none;
}

.feedback-mention-picker button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.feedback-mention-picker strong,
.feedback-mention-picker small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-mention-picker small {
  color: var(--muted);
  font-size: 11px;
}

.feedback-chat-composer .feedback-compose-actions {
  align-self: stretch;
  min-height: 40px;
  justify-content: flex-end;
}

.feedback-chat-composer:not(.has-message-payload) .feedback-compose-actions [data-feedback-clear-draft],
.feedback-chat-composer:not(.has-message-payload) .feedback-compose-actions .feedback-send-button {
  display: none;
}

.feedback-chat-composer.has-message-payload .feedback-composer-more-menu {
  display: none;
}

.feedback-chat-composer .feedback-compose-actions .muted {
  max-width: 160px;
  overflow-wrap: anywhere;
  text-align: right;
  font-size: 11px;
}

.feedback-chat-composer textarea {
  box-sizing: border-box;
  min-height: 40px;
  max-height: 118px;
  overflow-y: hidden;
  resize: none;
}

.feedback-chat-composer textarea:focus::placeholder {
  color: transparent;
  opacity: 0;
}

.feedback-chat-composer textarea.feedback-composer-textarea-scroll {
  overflow-y: auto;
}

.feedback-composer-tools {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  overflow: visible;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  white-space: nowrap;
}

.feedback-composer-context-bar {
  min-height: 38px;
  padding: 2px 3px 2px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.feedback-composer-context-spacer {
  width: 34px;
  height: 34px;
}

.feedback-composer-context-title {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-composer-search-tools {
  display: inline-flex;
  justify-self: end;
  flex: 0 0 auto;
}

.feedback-search-open-button {
  margin-left: auto;
}

.feedback-composer-context-bar .feedback-search-open-button {
  border-color: transparent;
  background: #fff;
  color: var(--teal);
}

.feedback-composer-tools::-webkit-scrollbar {
  display: none;
}

.feedback-attach-button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.feedback-photo-button {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

.feedback-attach-button input {
  display: none;
}

.feedback-selected-attachments {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 7px;
  padding: 4px 6px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.feedback-selected-attachments[hidden] {
  display: none;
}

.feedback-selected-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-original-toggle {
  display: none;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 9px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.feedback-chat-composer.has-image-selection .feedback-original-toggle {
  display: inline-flex;
}

.feedback-original-toggle.is-original {
  border-color: rgba(15, 118, 110, 0.45);
  background: var(--teal-soft);
  color: var(--teal);
}

.feedback-original-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.feedback-attachment-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

/* Factory Orders keeps supplier execution separate from customer-facing order data. */
.factory-order-workspace {
  min-width: 0;
}

.factory-order-heading {
  align-items: center;
  gap: 16px;
}

.factory-order-heading p {
  margin: 4px 0 0;
  max-width: 760px;
}

.factory-order-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid #d8e1e8;
  scrollbar-width: thin;
}

.factory-order-tab {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #526174;
  font-weight: 700;
  cursor: pointer;
}

.factory-order-tab.active {
  border-bottom-color: #087f79;
  color: #0b5f5b;
}

.factory-order-status {
  min-height: 0;
  margin: 0;
  color: #8a4b08;
  font-size: 13px;
}

.factory-order-status.active {
  min-height: 34px;
  padding: 9px 12px;
  border-left: 3px solid #d18b1c;
  background: #fff8e7;
}

.factory-order-tab-content {
  min-width: 0;
  padding-top: 12px;
}

.factory-order-toolbar,
.factory-order-detail-head,
.factory-order-inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.factory-order-toolbar {
  margin-bottom: 12px;
}

.factory-order-toolbar > div,
.factory-order-detail-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.factory-order-toolbar strong {
  font-size: 22px;
}

.factory-order-toolbar span,
.factory-order-detail-head span,
.factory-order-table td small,
.factory-order-line-summary small,
.factory-order-detail-line small {
  color: #69788a;
  font-size: 12px;
}

.factory-order-editor,
.factory-order-detail,
.factory-order-receipt-entry,
.factory-order-qc-editor {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid #cfd9e1;
  border-radius: 6px;
  background: #fbfcfd;
}

.factory-order-form-grid,
.factory-order-supplier-form,
.factory-order-metal-form,
.factory-order-cost-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  align-items: end;
  gap: 10px;
}

.factory-order-form-grid label,
.factory-order-supplier-form label,
.factory-order-metal-form label,
.factory-order-cost-form label,
.factory-order-allocation-row label,
.factory-order-qc-lines label,
.factory-order-notes {
  display: grid;
  gap: 5px;
  color: #526174;
  font-size: 12px;
  font-weight: 700;
}

.factory-order-form-grid input,
.factory-order-form-grid select,
.factory-order-supplier-form input,
.factory-order-supplier-form select,
.factory-order-metal-form input,
.factory-order-metal-form select,
.factory-order-cost-form input,
.factory-order-cost-form select,
.factory-order-allocation-row input,
.factory-order-allocation-row select,
.factory-order-allocation-row textarea,
.factory-order-qc-lines input,
.factory-order-qc-lines select,
.factory-order-receipt-entry input,
.factory-order-receipt-entry select,
.factory-order-notes textarea {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid #c8d3dc;
  border-radius: 4px;
  background: #fff;
  color: #172536;
}

.factory-order-allocation-row textarea,
.factory-order-draft-line textarea {
  width: 100%;
  min-height: 58px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #c8d3dc;
  border-radius: 4px;
  background: #fff;
  color: #172536;
  font: inherit;
  line-height: 1.4;
  overflow-wrap: anywhere;
  resize: vertical;
}

.factory-order-inline-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 12px 0;
}

.factory-order-allocation-list,
.factory-order-draft-lines,
.factory-order-detail-lines,
.factory-order-receipt-lines,
.factory-order-qc-lines {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.factory-order-paged {
  min-width: 0;
}

.factory-order-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  margin: 8px 0 12px;
  color: #526174;
  font-size: 12px;
  font-weight: 700;
}

.factory-order-pager .tiny-button {
  width: 38px;
  min-width: 38px;
  height: 34px;
  padding: 0;
}

.factory-order-select-all-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
  padding: 9px 10px;
  border: 1px solid #c7d6dd;
  background: #eef7f6;
  color: #365b58;
  font-size: 12px;
  font-weight: 700;
}

.factory-order-allocation-row {
  display: grid;
  grid-template-columns: minmax(86px, auto) 106px minmax(220px, 1.7fr) minmax(100px, .55fr) minmax(180px, 1fr);
  align-items: end;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid #e1e7ec;
}

.factory-order-line-check {
  align-self: center;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.factory-order-line-check input,
.factory-order-checkbox input {
  width: 18px;
  min-height: 18px;
}

.factory-order-line-summary,
.factory-order-detail-line > div {
  display: grid;
  gap: 3px;
  align-self: center;
}

.factory-order-line-product {
  display: grid;
  justify-items: center;
  align-self: start;
  gap: 6px;
  min-width: 0;
}

.factory-order-line-identity {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

.factory-order-line-identity span {
  flex: 0 0 auto;
  color: #647383;
}

.factory-order-line-identity strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.factory-order-specifications {
  display: grid;
  gap: 2px;
  color: #526b6b;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.factory-order-specifications span,
.factory-order-line-progress {
  display: block;
}

.factory-order-specifications b {
  color: #314d4d;
}

.factory-order-image-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #d4dde4;
  background: #f4f7f8;
}

.factory-order-image-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

.factory-order-image-cell .order-item-image-placeholder {
  width: 100%;
  min-height: 100%;
  padding: 4px;
  box-sizing: border-box;
  font-size: 9px;
}

.factory-order-table-wrap {
  max-height: min(62vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.factory-order-table {
  min-width: 760px;
}

.factory-order-table td strong,
.factory-order-table td small {
  display: block;
}

.factory-order-row-actions {
  white-space: nowrap;
}

.factory-order-row-actions > * + * {
  margin-left: 5px;
}

.factory-order-detail-head {
  margin-bottom: 10px;
}

.factory-order-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid #dce4e9;
  background: #fff;
}

.factory-order-summary-grid > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-right: 1px solid #dce4e9;
}

.factory-order-summary-grid > div:last-child {
  border-right: 0;
}

.factory-order-summary-grid span {
  color: #6b7887;
  font-size: 11px;
  text-transform: uppercase;
}

.factory-order-detail-line {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid #d8e1e6;
  background: #fff;
}

.factory-order-detail-lines {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.factory-order-detail-line .factory-order-image-cell {
  justify-self: center;
}

.factory-order-draft-editor {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #c7d6dd;
  background: #fff;
}

.factory-order-draft-notes {
  grid-column: span 2;
}

.factory-order-lock-note {
  margin: 10px 0;
  padding: 8px 10px;
  border-left: 3px solid #48867f;
  background: #eef7f6;
  color: #365b58;
  font-size: 12px;
}

.factory-order-draft-line {
  display: grid;
  grid-template-columns: 106px minmax(240px, 1.7fr) minmax(220px, 1fr);
  align-items: end;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid #e1e7ec;
}

.factory-order-draft-line label,
.factory-order-cost-form label {
  display: grid;
  gap: 5px;
  color: #526174;
  font-size: 12px;
  font-weight: 700;
}

.factory-order-draft-line input,
.factory-order-draft-line select,
.factory-order-qc-lines select {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid #c8d3dc;
  border-radius: 4px;
  background: #fff;
  color: #172536;
}

.factory-order-shared-terms,
.factory-order-shared-summary {
  margin: 12px 0;
}

.factory-order-shared-terms {
  display: grid;
  gap: 8px;
}

.factory-order-shared-operation,
.factory-order-shared-supply,
.factory-order-fee-terms {
  padding: 12px;
  border: 1px solid #c7d6dd;
  background: #f5f9f9;
}

.factory-order-shared-operation h3 {
  margin: 0 0 10px;
  color: #263e40;
  font-size: 14px;
}

.factory-order-fee-terms {
  margin: 12px 0;
}

.factory-order-fee-terms h3 {
  margin: 0 0 4px;
  color: #263e40;
  font-size: 14px;
}

.factory-order-fee-terms > p {
  margin: 0 0 10px;
  color: #526b6b;
  font-size: 12px;
}

.factory-order-fee-note {
  grid-column: span 2;
}

.factory-order-fee-note textarea {
  width: 100%;
  min-height: 58px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #c8d3dc;
  border-radius: 4px;
  background: #fff;
  color: #172536;
  font: inherit;
  resize: vertical;
}

.factory-order-shared-supply > summary {
  cursor: pointer;
  color: #263e40;
}

.factory-order-shared-supply > summary > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.factory-order-shared-supply > summary strong {
  font-size: 14px;
}

.factory-order-shared-supply > summary small {
  overflow: hidden;
  color: #526b6b;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.factory-order-shared-supply[open] > summary small {
  white-space: normal;
}

.factory-order-shared-supply-body {
  padding-top: 4px;
}

.factory-order-shared-warning {
  margin: 0 0 10px;
  color: #8b5a12;
  font-size: 12px;
}

.factory-order-supply-help {
  margin: 10px 0 8px;
  color: #526b6b;
  font-size: 12px;
}

.factory-order-supply-editor {
  display: grid;
  gap: 8px;
}

.factory-order-supply-row {
  display: grid;
  grid-template-columns: minmax(140px, .8fr) minmax(112px, .65fr) minmax(145px, 1fr) minmax(180px, 1.2fr) minmax(150px, 1fr);
  align-items: end;
  gap: 8px;
  padding: 9px;
  border: 1px solid #d6e0e5;
  background: #fff;
}

.factory-order-supply-row > strong {
  align-self: center;
  color: #263e40;
}

.factory-order-supply-row label {
  display: grid;
  gap: 5px;
  color: #526174;
  font-size: 12px;
  font-weight: 700;
}

.factory-order-supply-row input:not([type="checkbox"]),
.factory-order-supply-row select {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid #c8d3dc;
  border-radius: 4px;
  background: #fff;
  color: #172536;
}

.factory-order-supply-row select:disabled {
  background: #eef2f4;
  color: #7a8793;
}

.factory-order-line-supply {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border: 1px solid #d7e1e6;
  background: #f8fafb;
}

.factory-order-line-supply > summary {
  color: #315f5b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.factory-order-line-supply > .factory-order-checkbox {
  display: flex;
  margin: 9px 0;
}

.factory-order-shared-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #dce4e9;
  background: #f7fafb;
}

.factory-order-shared-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
}

.factory-order-shared-summary > div + div {
  border-left: 1px solid #dce4e9;
}

.factory-order-shared-summary span {
  color: #6b7887;
  font-size: 11px;
  text-transform: uppercase;
}

.factory-order-shared-summary strong {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.factory-order-costs {
  margin: 12px 0;
  border-top: 1px solid #dce4e9;
  border-bottom: 1px solid #dce4e9;
}

.factory-order-costs > summary {
  padding: 10px 0;
  color: #314354;
  font-weight: 700;
  cursor: pointer;
}

.factory-order-cost-form {
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid #dce4e9;
  background: #f7fafb;
}

.factory-order-supplier-form,
.factory-order-metal-form,
.factory-order-cost-form {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dce4e9;
}

.factory-order-checkbox {
  grid-template-columns: auto 1fr;
  align-items: center;
  align-self: center;
}

.factory-order-receipt-lines > div {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto 130px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #e1e7ec;
}

.factory-order-qc-lines > div {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(6, minmax(90px, 1fr));
  align-items: end;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #e1e7ec;
}

.factory-order-metal-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.factory-order-metal-summary button {
  display: grid;
  gap: 5px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid #b8ccc9;
  border-radius: 5px;
  background: #f2f8f7;
  color: #174d49;
  text-align: left;
  cursor: pointer;
}

@media (max-width: 980px) {
  .factory-order-form-grid,
  .factory-order-supplier-form,
  .factory-order-metal-form,
  .factory-order-cost-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .factory-order-allocation-row {
    grid-template-columns: 94px 106px minmax(180px, 1fr) minmax(100px, .6fr);
  }

  .factory-order-draft-line {
    grid-template-columns: 106px minmax(180px, 1fr);
  }

  .factory-order-supply-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .factory-order-supply-row > strong {
    grid-column: 1 / -1;
  }

  .factory-order-line-remark {
    grid-column: 1 / -1;
  }

  .factory-order-qc-lines > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .factory-order-qc-lines > div > strong {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  #factoryOrders {
    padding-bottom: calc(var(--mobile-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 14px);
  }

  #factoryOrders > .panel {
    margin: 0;
    padding: 10px;
    border-radius: 0;
  }

  .factory-order-heading {
    align-items: flex-start;
  }

  .factory-order-heading p {
    display: none;
  }

  .factory-order-tab {
    min-height: 40px;
    padding: 0 10px;
  }

  .factory-order-form-grid,
  .factory-order-supplier-form,
  .factory-order-metal-form,
  .factory-order-cost-form,
  .factory-order-summary-grid {
    grid-template-columns: 1fr;
  }

  .factory-order-summary-grid > div {
    border-right: 0;
    border-bottom: 1px solid #dce4e9;
  }

  .factory-order-summary-grid > div:last-child {
    border-bottom: 0;
  }

  .factory-order-shared-summary {
    grid-template-columns: 1fr;
  }

  .factory-order-select-all-bar {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .factory-order-supply-row {
    grid-template-columns: 1fr;
  }

  .factory-order-supply-row > strong {
    grid-column: auto;
  }

  .factory-order-shared-summary > div + div {
    border-left: 0;
    border-top: 1px solid #dce4e9;
  }

  .factory-order-editor,
  .factory-order-detail,
  .factory-order-receipt-entry,
  .factory-order-qc-editor {
    padding: 10px;
  }

  .factory-order-allocation-row {
    grid-template-columns: 78px 100px minmax(0, 1fr);
    align-items: center;
  }

  .factory-order-draft-notes {
    grid-column: auto;
  }

  .factory-order-draft-line {
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
  }

  .factory-order-draft-line > label {
    grid-column: 1 / -1;
  }

  .factory-order-allocation-row > label:not(.factory-order-line-check) {
    grid-column: 1 / -1;
  }

  .factory-order-receipt-lines > div,
  .factory-order-qc-lines > div {
    grid-template-columns: 1fr 1fr;
  }

  .factory-order-receipt-lines > div > span,
  .factory-order-receipt-lines > div > small,
  .factory-order-qc-lines > div > strong {
    grid-column: 1 / -1;
  }

  .factory-order-table-wrap {
    max-height: none;
    touch-action: pan-x pan-y;
  }

  .factory-order-detail-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    touch-action: pan-x;
  }

  .factory-order-detail-line {
    padding: 8px;
  }

  .factory-order-fee-note {
    grid-column: auto;
  }
}

.feedback-attachment-links.has-file-attachment {
  width: 100%;
  align-items: flex-start;
}

.feedback-chat-line.own .feedback-attachment-links.has-file-attachment {
  justify-content: flex-end;
}

.feedback-attachment-links .feedback-image-attachment {
  width: min(180px, 100%);
  display: grid;
  border-radius: 8px;
  padding: 4px;
  background: #fff;
}

.feedback-image-attachment img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  border-radius: 6px;
  background: #eef2f4;
  object-fit: cover;
}

.feedback-video-attachment {
  width: min(300px, 100%);
  display: grid;
  min-width: 0;
  padding: 4px;
  border-radius: 8px;
  background: #fff;
}

.feedback-attachment-links a:not(.feedback-image-attachment):not(.feedback-file-attachment) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-file-attachment {
  min-height: 34px;
  max-width: min(260px, 100%);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
  color: var(--teal);
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.feedback-chat-line.has-file-attachment .feedback-file-attachment {
  width: min(260px, 68%);
  max-width: min(260px, 68%);
}

.feedback-file-attachment:hover,
.feedback-file-attachment:focus-visible {
  border-color: var(--teal);
  background: #f4fbfa;
}

.feedback-file-attachment .feedback-tool-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.feedback-file-attachment-main {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 1px;
}

.feedback-file-attachment-main strong,
.feedback-file-attachment-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-file-attachment-main small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.feedback-attachment-expired {
  min-width: 160px;
  display: inline-grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px dashed rgba(100, 116, 139, 0.45);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.82);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.feedback-attachment-expired strong {
  color: var(--ink);
  font-size: 13px;
}

.feedback-attachment-expired small {
  color: var(--muted);
}

.media-retention-preview {
  display: grid;
  gap: 8px;
}

.media-retention-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.media-retention-summary span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}

.media-retention-summary strong {
  color: var(--ink);
  font-size: 13px;
}

.feedback-video-launcher {
  padding: 8px;
}

.feedback-video-preview {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  border: 1px solid rgba(15, 118, 110, 0.16);
}

.feedback-video-preview video {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 126px;
  display: block;
  border-radius: 7px;
  background: #0f172a;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

.feedback-video-preview.preview-ready video {
  opacity: 1;
}

.feedback-video-play-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(15, 118, 110, 0.32);
  border-radius: 8px;
  background: var(--teal-soft);
  color: var(--teal);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.feedback-video-preview .feedback-video-play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  min-width: 126px;
  transform: translate(-50%, -50%);
  background: rgba(234, 245, 243, 0.94);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.feedback-video-preview.preview-ready .feedback-video-play-button {
  background: rgba(15, 118, 110, 0.86);
  color: #fff;
}

.feedback-video-play-button .feedback-tool-icon {
  width: 18px;
  height: 18px;
}

.feedback-video-preview .feedback-video-status {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 6px;
}

.feedback-video-status[hidden] {
  display: none !important;
}

.feedback-media-player {
  position: absolute;
  right: 18px;
  top: 64px;
  z-index: 18;
  width: min(420px, calc(100% - 36px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22);
}

.feedback-media-player.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10080;
  width: auto;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: #05070a;
  box-shadow: none;
}

.feedback-media-player[hidden] {
  display: none;
}

.feedback-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 10090;
  display: grid;
  place-items: center;
  padding: 12px;
  padding: max(12px, env(safe-area-inset-top), env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left), env(safe-area-inset-right));
  background: rgba(5, 7, 10, 0.96);
  cursor: zoom-out;
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}

.feedback-image-viewer[hidden] {
  display: none;
}

.feedback-image-viewer img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  margin: auto;
  transform-origin: center;
  will-change: transform;
  -webkit-user-drag: none;
}

.feedback-image-viewer small {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.feedback-file-viewer {
  position: fixed;
  inset: 0;
  z-index: 10100;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #eef1f3;
  color: var(--ink);
}

.feedback-file-viewer[hidden] {
  display: none;
}

.feedback-file-viewer-head {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));
  border-bottom: 1px solid #d6dde1;
  background: #fff;
}

.feedback-file-viewer-back,
.feedback-file-viewer-more {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.feedback-file-viewer-more {
  font-size: 20px;
}

.feedback-file-viewer-back:hover,
.feedback-file-viewer-more:hover,
.feedback-file-viewer-back:focus-visible,
.feedback-file-viewer-more:focus-visible {
  background: #edf3f4;
}

.feedback-file-viewer-title {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: center;
}

.feedback-file-viewer-title strong,
.feedback-file-viewer-title small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-file-viewer-title strong {
  font-size: 14px;
  line-height: 1.3;
}

.feedback-file-viewer-title small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.feedback-file-viewer-more-wrap {
  position: relative;
  justify-self: end;
}

.feedback-file-viewer-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 2;
  width: 176px;
  display: grid;
  padding: 6px;
  border: 1px solid #d6dde1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.feedback-file-viewer-menu[hidden] {
  display: none;
}

.feedback-file-viewer-menu a {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.feedback-file-viewer-menu a:hover,
.feedback-file-viewer-menu a:focus-visible {
  background: #edf3f4;
}

.feedback-file-viewer-body {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: stretch;
  overflow: hidden;
}

.feedback-file-viewer-model3d {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #17212b;
}

.feedback-file-viewer-model3d-stage,
.feedback-file-viewer-model3d-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  touch-action: none;
}

.feedback-file-viewer-model3d-tools {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
}

.feedback-file-viewer-model3d-tools button {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 6px;
  padding: 0;
  background: rgba(23, 33, 43, 0.84);
  color: #fff;
  cursor: pointer;
}

.feedback-file-viewer-model3d-tools button:hover,
.feedback-file-viewer-model3d-tools button:focus-visible,
.feedback-file-viewer-model3d-tools button[aria-pressed="true"] {
  border-color: #79c8bf;
  background: #1f6f68;
}

.feedback-file-viewer-model3d-tools .feedback-tool-icon {
  width: 20px;
  height: 20px;
}

.feedback-file-viewer-pdf {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 12px 28px;
  overflow: auto;
  overscroll-behavior: contain;
  background: #dfe4e7;
}

.feedback-file-viewer-pdf-page {
  flex: 0 0 auto;
  width: min(1200px, 100%);
  min-height: min(70vh, 720px);
  display: grid;
  place-items: center;
  justify-self: center;
  overflow: hidden;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}

.feedback-file-viewer-pdf-page canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
}

.feedback-file-viewer-pdf-page[data-rendered="1"] {
  overflow: visible;
}

.feedback-file-viewer-pdf-page.is-error {
  min-height: 180px;
  color: #a12f2f;
}

.feedback-file-viewer-body pre {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 24px max(20px, calc((100vw - 960px) / 2));
  overflow: auto;
  background: #fff;
  color: #17212b;
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feedback-file-viewer-body audio {
  width: min(640px, calc(100% - 32px));
  align-self: center;
  justify-self: center;
}

.feedback-file-viewer-pdf[hidden],
.feedback-file-viewer-model3d[hidden],
.feedback-file-viewer-body pre[hidden],
.feedback-file-viewer-body audio[hidden],
.feedback-file-viewer-unavailable[hidden] {
  display: none;
}

.feedback-file-viewer-unavailable {
  align-self: center;
  justify-self: center;
  width: min(520px, calc(100% - 32px));
  display: grid;
  gap: 8px;
  padding: 24px;
  border: 1px solid #d6dde1;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.feedback-file-viewer-unavailable p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.feedback-file-viewer-primary-action {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  padding: 9px 14px;
  border: 1px solid var(--teal);
  border-radius: 6px;
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.feedback-file-viewer-primary-action:hover,
.feedback-file-viewer-primary-action:focus-visible {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.feedback-file-viewer-primary-action[hidden] {
  display: none;
}

.feedback-file-viewer-status {
  min-height: calc(32px + env(safe-area-inset-bottom));
  margin: 0;
  padding: 7px 16px calc(7px + env(safe-area-inset-bottom));
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.feedback-file-viewer-status:empty {
  min-height: env(safe-area-inset-bottom);
  padding-top: 0;
}

.feedback-camera-modal {
  position: absolute;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.34);
  min-height: 0;
  overflow: hidden;
}

.feedback-camera-modal[hidden] {
  display: none;
}

.feedback-camera-panel {
  width: min(560px, 100%);
  max-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.24);
  min-height: 0;
  overflow: hidden;
}

.feedback-camera-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.feedback-camera-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.feedback-camera-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.feedback-camera-mode-tabs {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.feedback-camera-mode-tabs button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.feedback-camera-mode-tabs button.active {
  border-color: rgba(15, 118, 110, 0.72);
  background: rgba(15, 118, 110, 0.12);
  color: var(--teal);
}

.feedback-camera-preview {
  min-height: 260px;
  min-width: 0;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #0f172a;
}

.feedback-camera-preview video {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
  object-fit: cover;
}

.feedback-camera-status {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.feedback-camera-status[data-tone="error"] {
  color: #b91c1c;
}

.feedback-camera-status[data-tone="warn"] {
  color: #b45309;
}

.feedback-camera-control-deck {
  display: grid;
  grid-template-columns: minmax(96px, 126px) minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin-bottom: 10px;
}

.feedback-camera-left-actions {
  display: grid;
  grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);
  gap: 6px;
}

.feedback-camera-left-actions #feedbackCameraSwitch {
  min-height: 40px;
  border-color: var(--line);
  background: #fff;
  color: var(--muted);
  font-weight: 900;
}

.feedback-camera-actions {
  display: grid;
  min-width: 0;
}

.feedback-camera-actions .tiny-button {
  width: 100%;
  min-height: 132px;
  white-space: normal;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.feedback-camera-modal.is-recording .feedback-camera-mode-tabs button,
.feedback-camera-modal.is-recording #feedbackCameraSwitch,
.feedback-camera-modal.is-recording #feedbackCameraCapture {
  pointer-events: none;
  opacity: 0.55;
}

.feedback-media-player-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.feedback-media-player-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-media-player video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 6px;
  background: #0f172a;
}

.feedback-media-player.fullscreen video {
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

.feedback-media-player-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.feedback-media-player.fullscreen .feedback-media-player-tools {
  justify-content: center;
}

.feedback-media-speed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.feedback-media-speed select {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
}

.feedback-media-player .feedback-video-status {
  display: none;
}

.feedback-video-attachment video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 6px;
  background: #0f172a;
}

.feedback-video-status {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.feedback-chat-line.own .feedback-video-attachment {
  background: rgba(255, 255, 255, 0.18);
}

.feedback-video-download {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-attachment-links a:not(.feedback-image-attachment):not(.feedback-file-attachment) {
  display: block;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.feedback-location-tools {
  display: inline-flex;
  gap: 6px;
}

.feedback-location-card {
  width: min(360px, 100%);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  margin-top: 7px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 8px;
  background: #f6fbfa;
  color: var(--ink);
}

.feedback-chat-line.own .feedback-location-card {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.34);
  color: inherit;
}

.feedback-location-card.active {
  border-color: rgba(22, 163, 74, 0.38);
  background: #f0fdf4;
}

.feedback-location-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(15, 118, 110, 0.12);
  color: var(--teal);
}

.feedback-location-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.feedback-location-main strong,
.feedback-location-main span,
.feedback-location-main small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.feedback-location-main small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.feedback-chat-line.own .feedback-location-main small {
  color: rgba(255, 255, 255, 0.72);
}

.feedback-location-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.feedback-location-actions .tiny-button {
  text-decoration: none;
}

.feedback-location-map-shell {
  grid-column: 1 / -1;
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 8px;
  background: #e8f2f1;
  cursor: pointer;
}

.feedback-location-map {
  width: 100%;
  height: 220px;
}

.feedback-location-map-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  background: #f5faf9;
}

.feedback-location-map-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.feedback-location-map-hit:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 0.5);
  outline-offset: -4px;
}

.feedback-chat-line.own .feedback-location-map-shell {
  border-color: rgba(255, 255, 255, 0.28);
}

.feedback-map-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.35);
}

.feedback-map-choice-dialog {
  width: min(430px, 100%);
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
}

.feedback-map-choice-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.feedback-map-choice-dialog header div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.feedback-map-choice-dialog header span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.feedback-map-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.feedback-map-choice-grid button,
.feedback-map-web-fallback {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfb;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.feedback-map-choice-grid button.active {
  border-color: rgba(15, 118, 110, 0.38);
  background: var(--teal-soft);
  color: var(--teal);
}

.feedback-map-web-fallback {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  color: var(--teal);
  font-weight: 800;
}

@media (max-width: 640px) {
  .feedback-location-map-shell,
  .feedback-location-map {
    min-height: 190px;
    height: 190px;
  }

  .feedback-map-choice-grid {
    grid-template-columns: 1fr;
  }
}

.feedback-topic-controls,
.feedback-subtopic-compose {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.feedback-topic-row,
.feedback-topic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.feedback-topic-row input,
.feedback-subtopic-compose input,
.feedback-subtopic-compose textarea {
  min-width: min(220px, 100%);
  flex: 1 1 220px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.feedback-subtopic-compose textarea {
  width: 100%;
  resize: vertical;
}

.feedback-voice-recording {
  animation: pulseNotice 1s ease-in-out infinite;
}

.feedback-voice-playback {
  display: grid;
  gap: 5px;
  min-width: min(240px, 100%);
}

.feedback-voice-playback audio {
  display: none;
}

.feedback-voice-playback-button {
  display: grid;
  grid-template-columns: 22px minmax(52px, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: min(220px, 100%);
  min-height: 38px;
  border: 0;
  border-radius: 19px;
  padding: 7px 11px;
  background: rgba(20, 184, 166, 0.16);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.feedback-chat-line.own .feedback-voice-playback-button {
  background: rgba(255, 255, 255, 0.28);
}

.feedback-voice-playback-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.feedback-voice-play-icon {
  position: relative;
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.16);
}

.feedback-voice-play-icon::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.feedback-voice-playback-button.is-playing .feedback-voice-play-icon::before {
  width: 8px;
  height: 10px;
  margin-left: 0;
  border: 0;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.feedback-voice-wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 52px;
}

.feedback-voice-wave i {
  display: block;
  width: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.62;
}

.feedback-voice-wave i:nth-child(1) {
  height: 8px;
}

.feedback-voice-wave i:nth-child(2) {
  height: 14px;
}

.feedback-voice-wave i:nth-child(3) {
  height: 10px;
}

.feedback-voice-playback-button.is-playing .feedback-voice-wave i {
  opacity: 0.88;
}

.feedback-voice-playback [data-feedback-voice-playback-time] {
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.feedback-voice-translate-button {
  justify-self: start;
  border: 0;
  background: transparent;
  color: #1d4ed8;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 2px;
}

.feedback-voice-translate-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.feedback-chat-line.own .feedback-voice-translate-button {
  color: #0f766e;
}

.feedback-voice-translation-state {
  display: grid;
  gap: 2px;
  max-width: min(280px, 100%);
  border-left: 3px solid #2563eb;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.08);
  color: #1e3a8a;
  font-size: 12px;
  line-height: 1.35;
  padding: 5px 7px;
}

.feedback-voice-translation-state.done strong {
  color: #1d4ed8;
}

.feedback-voice-translation-state .feedback-voice-playback-translated {
  margin-top: 3px;
}

.feedback-voice-translation-state .feedback-voice-playback-translated .feedback-voice-playback-button {
  min-width: 146px;
  background: #ffffff;
}

.feedback-voice-translation-state.error {
  border-left-color: var(--rose);
  background: #fff7f7;
  color: var(--rose);
}

.feedback-call-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 12000;
  width: min(760px, calc(100vw - 28px));
}

.feedback-call-panel[data-feedback-call-layout-key^="video:"] {
  right: 14px;
  bottom: 12px;
  width: min(920px, calc(100vw - 28px));
}

.feedback-call-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-radius: 8px;
  padding: 12px;
  max-height: calc(100dvh - 44px);
  overflow: auto;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
}

.feedback-call-panel[data-feedback-call-layout-key^="video:"] .feedback-call-card {
  height: min(860px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.feedback-call-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.feedback-call-card header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.feedback-call-card header strong,
.feedback-call-card header span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-call-card header span {
  color: var(--muted);
  font-size: 12px;
}

.feedback-call-audio-state {
  min-height: 96px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f8fa;
  color: var(--teal);
  font-weight: 900;
}

.feedback-call-audio-state .feedback-tool-icon {
  width: 28px;
  height: 28px;
}

.feedback-call-video-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
  height: 100%;
  min-height: 0;
}

.feedback-call-video-grid {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, auto) auto;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.feedback-call-remote-wrap,
.feedback-call-local-wrap {
  position: relative;
  min-width: 0;
  border: 0;
  padding: 0;
  background: #0f172a;
  border-radius: 8px;
  overflow: hidden;
}

.feedback-call-remote-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
}

.feedback-call-local-wrap {
  justify-self: start;
  z-index: 1;
  width: min(46%, 340px);
  min-width: 160px;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 96px;
  box-shadow: none;
  cursor: default;
  touch-action: auto;
  user-select: none;
}

.feedback-call-local-wrap.is-dragging {
  cursor: grabbing;
}

.feedback-call-remote-wrap:fullscreen {
  display: grid;
  place-items: center;
  background: #000;
}

.feedback-call-remote-wrap:-webkit-full-screen {
  display: grid;
  place-items: center;
  background: #000;
}

.feedback-call-remote-wrap:fullscreen video,
.feedback-call-remote-wrap:-webkit-full-screen video {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}

.feedback-call-video-grid video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f172a;
  object-fit: cover;
}

.feedback-call-video-grid video[data-feedback-call-local] {
  min-width: 0;
}

.feedback-call-remote-wrap audio[data-feedback-call-remote-audio] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.feedback-call-video-label {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.feedback-call-remote-wrap > .feedback-call-video-label {
  top: 7px;
  bottom: auto;
}

.feedback-call-zoom-toggle {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 8px;
  padding: 0;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.feedback-call-zoom-toggle:hover,
.feedback-call-zoom-toggle:focus-visible {
  background: rgba(15, 23, 42, 0.92);
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 2px;
}

.feedback-call-zoom-icon {
  position: relative;
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.feedback-call-zoom-icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 2px;
  opacity: 0.72;
}

.feedback-call-remote-wrap:fullscreen .feedback-call-zoom-toggle,
.feedback-call-remote-wrap:-webkit-full-screen .feedback-call-zoom-toggle {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
}

.feedback-call-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.feedback-call-voice-actions {
  justify-content: center;
}

.feedback-call-voice-actions .feedback-call-icon-button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.feedback-call-voice-actions .feedback-tool-icon {
  width: 24px;
  height: 24px;
}

.feedback-call-panel.is-call-expanded {
  inset: 0;
  width: auto;
  z-index: 13000;
  padding: 0;
  background: rgba(2, 6, 23, 0.96);
}

.feedback-call-panel.is-call-expanded .feedback-call-card {
  position: relative;
  height: 100%;
  max-height: 100dvh;
  display: block;
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  background: #020617;
  color: #fff;
}

.feedback-call-panel.is-call-expanded .feedback-call-card header {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  z-index: 8;
  max-width: min(420px, calc(100vw - 84px));
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.64);
  backdrop-filter: blur(10px);
}

.feedback-call-panel.is-call-expanded .feedback-call-card header span {
  color: rgba(255, 255, 255, 0.72);
}

.feedback-call-panel.is-call-expanded .feedback-call-video-layout {
  position: absolute;
  inset: 0;
  display: block;
  min-height: 0;
  height: 100%;
  align-items: start;
  gap: 0;
}

.feedback-call-panel.is-call-expanded .feedback-call-video-grid {
  display: block;
  position: relative;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.feedback-call-panel.is-call-expanded .feedback-call-remote-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.feedback-call-panel.is-call-expanded .feedback-call-local-wrap {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 7;
  width: min(34vw, 420px);
  min-width: 180px;
  min-height: 102px;
  justify-self: auto;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
  cursor: grab;
  touch-action: none;
}

.feedback-call-panel.is-call-expanded .feedback-call-video-grid video[data-feedback-call-remote] {
  border: 0;
  border-radius: 0;
  object-fit: contain;
}

.feedback-call-panel.is-call-expanded .feedback-call-video-grid video[data-feedback-call-local] {
  border-color: rgba(255, 255, 255, 0.42);
}

.feedback-call-video-actions {
  position: static;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, 42px);
  grid-auto-rows: 42px;
  align-content: end;
  justify-content: end;
  gap: 12px;
  min-width: 102px;
  padding: 2px 0;
}

.feedback-call-panel.is-call-expanded .feedback-call-video-actions {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  padding: 8px;
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.46);
  backdrop-filter: blur(10px);
}

.feedback-call-video-actions .feedback-icon-button,
.feedback-call-video-actions .feedback-call-quality-button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.feedback-call-video-actions .feedback-tool-icon {
  width: 24px;
  height: 24px;
}

.feedback-call-icon-button {
  position: relative;
  background: #fff;
  color: var(--ink);
}

.feedback-call-icon-button.is-off {
  border-color: rgba(220, 38, 38, 0.32);
  color: #dc2626;
}

.feedback-call-icon-button.is-danger {
  border-color: rgba(220, 38, 38, 0.42);
  background: #fff;
  color: var(--rose);
}

.feedback-call-actions .tiny-button.is-active,
.feedback-call-quality-button.active {
  border-color: rgba(15, 118, 110, 0.55);
  background: rgba(15, 118, 110, 0.12);
  color: var(--teal);
}

.feedback-call-quality-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.feedback-call-quality-button {
  min-width: 38px;
  padding-inline: 0;
  font-size: 12px;
  font-weight: 900;
}

@keyframes pulseNotice {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

.backup-panel {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 1500;
  width: min(760px, calc(100vw - 44px));
  max-height: calc(100dvh - 44px);
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(31, 41, 51, 0.2);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.backup-panel input[type="file"] {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f7fafb;
}

.recovery-dashboard {
  background: #f8fbfa;
}

.recovery-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.recovery-summary-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.recovery-summary-grid > div:nth-child(1) {
  border-color: #9dceb1;
  background: #f1faf4;
}

.recovery-summary-grid > div:nth-child(2) {
  border-color: #a9c9df;
  background: #f3f8fc;
}

.recovery-summary-grid > div:nth-child(3) {
  border-color: #e7c687;
  background: #fff9ed;
}

.recovery-summary-grid > div:nth-child(4) {
  border-color: #c9b8dc;
  background: #faf7fc;
}

.recovery-summary-grid span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recovery-summary-grid strong {
  font-size: 18px;
  font-weight: 700;
}

.recovery-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.recovery-primary-actions .full-action {
  margin: 0;
}

.recovery-wizard {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid #a9c9df;
  border-radius: 6px;
  background: #f7fbfe;
}

.recovery-device-import {
  display: grid;
  gap: 10px;
  padding: 12px 0;
}

.recovery-device-import progress {
  width: 100%;
  height: 10px;
  accent-color: #16835b;
}

.recovery-wizard[hidden] {
  display: none;
}

.restore-drill-history {
  max-height: min(320px, 38vh);
  overflow: auto;
  overscroll-behavior: contain;
}

.recovery-migration-gate {
  display: grid;
  gap: 12px;
}

.recovery-migration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.recovery-migration-grid > div {
  min-width: 0;
  padding: 10px;
  border-right: 1px solid var(--line);
}

.recovery-migration-grid > div:last-child {
  border-right: 0;
}

.recovery-migration-grid span,
.recovery-migration-grid strong {
  display: block;
}

.recovery-migration-grid span {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

@media (max-width: 720px) {
  .recovery-migration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recovery-migration-grid > div:nth-child(2) {
    border-right: 0;
  }

  .recovery-migration-grid > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

.recovery-guide-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.recovery-guide-steps > div,
.recovery-guide-steps > section {
  border-left: 3px solid #8aa6bf;
  padding: 8px 10px;
  background: #f7fafc;
}

.recovery-kit-guided-steps {
  grid-template-columns: 1fr;
}

.recovery-kit-step {
  display: grid;
  gap: 9px;
}

.recovery-kit-step[data-status="passed"] {
  border-left-color: #268066;
}

.recovery-guide-steps strong,
.recovery-guide-steps span {
  display: block;
}

.recovery-guide-steps span {
  margin-top: 4px;
  color: #53616f;
  line-height: 1.4;
}

.recovery-kit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recovery-kit-capacity-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}

.recovery-kit-capacity-grid > div {
  min-width: 0;
  padding: 8px;
  background: #fff;
}

.recovery-kit-capacity-grid span,
.recovery-kit-capacity-grid strong {
  display: block;
  overflow-wrap: anywhere;
}

.recovery-kit-capacity-grid span {
  color: var(--muted);
  font-size: 11px;
}

.recovery-kit-capacity-grid strong {
  margin-top: 3px;
  font-size: 12px;
}

.recovery-kit-step .recovery-command {
  margin-top: 0;
  white-space: normal;
}

.recovery-confirmation-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: flex-start;
}

.recovery-confirmation-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
}

@media (max-width: 720px) {
  .recovery-guide-steps {
    grid-template-columns: 1fr;
  }

  .recovery-kit-actions .full-action {
    flex: 1 1 100%;
  }

  .recovery-kit-capacity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recovery-kit-capacity-grid > div:last-child {
    grid-column: 1 / -1;
  }
}

.recovery-wizard-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.recovery-steps {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
  font-size: 12px;
}

.recovery-remote-settings {
  margin-top: 12px;
}

.recovery-secondary-actions {
  margin-top: 12px;
}

.recovery-command {
  display: block;
  margin-top: 10px;
  padding: 10px;
  overflow-wrap: anywhere;
  border: 1px solid #d6dae0;
  background: #f7f8fa;
  color: #20252b;
}

.recovery-history {
  padding-top: 8px;
}

.recovery-history-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.recovery-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.recovery-status-pill.complete {
  border-color: #9dceb1;
  color: #247046;
  background: #eff9f2;
}

.recovery-status-pill.failed,
.recovery-status-pill.incomplete {
  border-color: #e1aaa7;
  color: #9a2f2b;
  background: #fff5f4;
}

.backup-advanced {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
}

.backup-advanced > summary {
  padding: 11px 12px;
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.backup-advanced[open] > summary {
  border-bottom: 1px solid var(--line);
}

.backup-advanced > .backup-section {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.backup-advanced > .backup-section:last-child {
  border-bottom: 0;
}

@media (max-width: 620px) {
  .recovery-summary-grid,
  .recovery-primary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .backup-history-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .recovery-history-actions {
    justify-content: flex-start;
  }
}

.backup-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
}

.backup-section-head {
  display: grid;
  gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.backup-section-head strong {
  color: var(--ink);
  font-size: 14px;
}

.backup-section-head span {
  color: var(--muted);
  font-size: 12px;
}

.backup-policy {
  display: grid;
  gap: 8px;
  padding-top: 0;
  border-top: 0;
}

.backup-policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.backup-policy-grid label,
.backup-policy-check {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.backup-policy-grid input {
  width: 100%;
}

.backup-policy-check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.database-dump-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.database-dump-metrics > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.database-dump-metrics span {
  color: var(--muted);
  font-size: 12px;
}

.database-dump-metrics strong {
  overflow-wrap: anywhere;
  font-size: 16px;
}

.backup-cleanup-list {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 3px;
  overscroll-behavior: contain;
}

.backup-cleanup-list:empty {
  display: none;
}

.backup-cleanup-list-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.backup-cleanup-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #f2c879;
  border-radius: 8px;
  background: #fffaf0;
}

.backup-cleanup-item strong,
.backup-cleanup-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backup-cleanup-item small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.backup-cleanup-item span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.backup-history {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.backup-history-head,
.backup-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.backup-history-list {
  display: grid;
  gap: 8px;
  max-height: min(280px, 34vh);
  overflow-y: auto;
  padding-right: 3px;
  overscroll-behavior: contain;
}

.backup-history-item {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.backup-history-item-warning {
  border-color: var(--rose);
  background: #fff7f7;
}

.backup-history-item-prune {
  border-color: #f2c879;
  background: #fffaf0;
}

.backup-history-item p {
  margin: 3px 0 0;
}

.operations-panel {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 1500;
  width: min(1180px, calc(100vw - 44px));
  max-height: calc(100dvh - 44px);
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(31, 41, 51, 0.22);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.operations-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.system-protection-console {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-top: 2px solid #147d78;
  border-bottom: 1px solid var(--line);
}

.system-protection-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.system-protection-head h3,
.system-protection-head p {
  margin: 0;
}

.system-protection-head p {
  margin-top: 3px;
}

.system-protection-state {
  min-width: 92px;
  padding: 6px 10px;
  border: 1px solid #aeb9c2;
  border-radius: 999px;
  background: #f6f8f9;
  color: #53606b;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.system-protection-state[data-status="passed"] {
  border-color: #76ad8a;
  background: #edf8f0;
  color: #24613a;
}

.system-protection-state[data-status="running"] {
  border-color: #4c91c4;
  background: #edf6fc;
  color: #205d88;
}

.system-protection-state[data-status="provisional"],
.system-protection-state[data-status="review"] {
  border-color: #d4a84d;
  background: #fff8e7;
  color: #7c5813;
}

.system-protection-state[data-status="blocked"] {
  border-color: #c56a70;
  background: #fff0f1;
  color: #8f2730;
}

.system-protection-overview {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.system-protection-metric {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-left: 3px solid #aab5bd;
  background: #fff;
}

.system-protection-metric span,
.system-protection-metric strong {
  display: block;
}

.system-protection-metric span {
  min-height: 30px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.system-protection-metric strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 18px;
}

.system-protection-metric[data-tone="verified"] {
  border-left-color: #3d9560;
}

.system-protection-metric[data-tone="provisional"] {
  border-left-color: #cf9a2e;
}

.system-protection-metric[data-tone="known_issue"] {
  border-left-color: #c77435;
}

.system-protection-metric[data-tone="blocked"] {
  border-left-color: #b84b55;
}

.system-protection-run-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: #f8fafb;
}

.system-protection-run-main {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.system-protection-run-main > div,
.system-protection-run-main strong,
.system-protection-run-main span {
  min-width: 0;
}

.system-protection-run-main strong,
.system-protection-run-main > div > span {
  display: block;
}

.system-protection-run-main > div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.system-protection-run-indicator {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: #84939e;
}

.system-protection-run-main.is-running .system-protection-run-indicator {
  background: #277fb8;
  animation: system-protection-pulse 1.2s ease-in-out infinite;
}

@keyframes system-protection-pulse {
  50% { transform: scale(0.7); opacity: 0.45; }
}

.system-protection-boundary-badge {
  display: grid;
  gap: 2px;
  text-align: right;
}

.system-protection-boundary-badge span {
  color: var(--muted);
  font-size: 11px;
}

.system-protection-boundary-badge strong {
  color: #80541f;
  font-size: 12px;
}

.system-protection-actions {
  margin: 0;
}

.system-protection-section {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.system-protection-section > summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
}

.system-protection-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.system-protection-policy-grid label {
  display: grid;
  gap: 5px;
  align-content: center;
  color: var(--muted);
  font-size: 12px;
}

.system-protection-policy-grid label.checkbox-line {
  display: flex;
  min-height: 36px;
  align-items: center;
}

.system-protection-policy-grid input[type="number"] {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

.system-protection-boundary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 3px solid #bd8335;
  background: #fff9ef;
  color: #684717;
  font-size: 12px;
}

.system-protection-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 10px 0 8px;
  color: var(--muted);
  font-size: 11px;
}

.system-protection-legend span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.system-protection-legend i,
.system-protection-cell {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1px solid #87939c;
  border-radius: 50%;
  background: #e7ecef;
}

.system-protection-legend i[data-status="verified"],
.system-protection-cell[data-status="verified"] {
  border-color: #348254;
  background: #4ca66c;
}

.system-protection-legend i[data-status="provisional"],
.system-protection-cell[data-status="provisional"] {
  border-color: #b78019;
  background: #e0aa3b;
}

.system-protection-legend i[data-status="known_issue"],
.system-protection-cell[data-status="known_issue"] {
  border-color: #aa5d25;
  background: #d87a38;
}

.system-protection-legend i[data-status="blocked"],
.system-protection-cell[data-status="blocked"] {
  border-color: #9c3039;
  background: #c84d57;
}

.system-protection-matrix-wrap {
  max-height: 430px;
  overflow: auto;
  border: 1px solid var(--line);
  overscroll-behavior: contain;
}

.system-protection-matrix {
  width: max(100%, 980px);
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: 11px;
}

.system-protection-matrix th,
.system-protection-matrix td {
  height: 34px;
  padding: 5px 7px;
  border-right: 1px solid #e7ebee;
  border-bottom: 1px solid #e7ebee;
  text-align: center;
}

.system-protection-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #eef3f5;
  color: #4d5b65;
  font-size: 10px;
}

.system-protection-matrix th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 230px;
  max-width: 230px;
  background: #f8fafb;
  text-align: left;
}

.system-protection-matrix thead th:first-child {
  z-index: 3;
  background: #e8eff2;
}

.system-protection-matrix tbody th span,
.system-protection-matrix tbody th small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-protection-matrix tbody th small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.system-protection-runs {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.system-protection-run-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  padding: 8px 10px;
  border-left: 3px solid #a5b0b8;
  background: #f8fafb;
}

.system-protection-run-record[data-status="passed"] {
  border-left-color: #3d9560;
}

.system-protection-run-record[data-status="failed"] {
  border-left-color: #b84b55;
}

.system-protection-run-record > div:last-of-type {
  text-align: right;
}

.system-protection-run-record span,
.system-protection-run-record strong {
  display: block;
}

.system-protection-run-record span {
  color: var(--muted);
  font-size: 11px;
}

.system-protection-run-record details {
  grid-column: 1 / -1;
  color: #8f2730;
}

.system-protection-run-record p {
  margin: 5px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.operations-space-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.operations-security-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.operations-security-empty {
  display: grid;
  gap: 6px;
}

.operations-security-empty code {
  display: block;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafb;
  color: #1f2933;
  font: 12px/1.4 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.operations-security-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.operations-security-head p {
  margin: 3px 0 0;
}

.operations-security-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.operations-security-card {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

.operations-security-card span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.operations-security-card strong {
  font-size: 16px;
  font-weight: 500;
}

.operations-security-card.is-green {
  border-color: rgba(37, 132, 116, 0.28);
  background: #f3fbf8;
}

.operations-security-card.is-amber {
  border-color: rgba(190, 126, 35, 0.36);
  background: #fff9ef;
}

.operations-security-card.is-red {
  border-color: rgba(190, 65, 65, 0.36);
  background: #fff5f5;
}

.operations-security-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.operations-security-meta span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7fafb;
  color: var(--muted);
  font-size: 12px;
}

.operations-security-details {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.operations-security-details summary {
  cursor: pointer;
  color: var(--teal);
}

.operations-security-details pre {
  max-height: 220px;
  margin: 8px 0 0;
  padding: 9px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
  color: #1f2933;
  font: 12px/1.45 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.operations-wind-events {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.operations-wind-events-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.operations-wind-events-head p {
  margin: 3px 0 0;
}

.operations-wind-event-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.operations-wind-risk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.operations-wind-risk-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

.operations-wind-risk-card.is-green {
  border-color: rgba(37, 132, 116, 0.28);
  background: #f3fbf8;
}

.operations-wind-risk-card.is-amber {
  border-color: rgba(190, 126, 35, 0.36);
  background: #fff9ef;
}

.operations-wind-risk-card.is-red {
  border-color: rgba(190, 65, 65, 0.36);
  background: #fff5f5;
}

.operations-wind-risk-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.operations-wind-risk-head span,
.operations-wind-risk-meta {
  color: var(--muted);
  font-size: 12px;
}

.operations-wind-risk-head strong {
  font-weight: 600;
}

.operations-wind-risk-card p {
  margin: 0;
  color: #1f2933;
  font-size: 12px;
}

.operations-wind-risk-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.operations-wind-risk-meta span {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
}

.operations-wind-risk-lists {
  display: grid;
  gap: 5px;
}

.operations-wind-recommendations,
.operations-wind-timeline {
  display: grid;
  gap: 8px;
}

.operations-dynamic-honeypot {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.operations-dynamic-honeypot-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.operations-dynamic-honeypot-recent {
  display: grid;
  gap: 6px;
}

.operations-dynamic-honeypot-hit {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}

.operations-dynamic-honeypot-hit strong,
.operations-dynamic-honeypot-hit span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-dynamic-honeypot-hit small {
  color: var(--muted);
}

.operations-wind-subhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.operations-wind-subhead strong {
  font-size: 13px;
  font-weight: 600;
}

.operations-wind-subhead span {
  color: var(--muted);
  font-size: 12px;
}

.operations-wind-recommendation-list {
  display: grid;
  gap: 8px;
}

.operations-wind-recommendation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

.operations-wind-recommendation.is-green {
  border-color: rgba(37, 132, 116, 0.28);
  background: #f3fbf8;
}

.operations-wind-recommendation.is-amber {
  border-color: rgba(190, 126, 35, 0.36);
  background: #fff9ef;
}

.operations-wind-recommendation.is-red {
  border-color: rgba(190, 65, 65, 0.36);
  background: #fff5f5;
}

.operations-wind-recommendation strong {
  font-weight: 600;
}

.operations-wind-recommendation p {
  margin: 4px 0 6px;
  color: #1f2933;
  font-size: 12px;
}

.operations-snapshot-warning {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(190, 126, 35, 0.36);
  border-radius: 8px;
  background: #fff9ef;
  color: #7a4d12;
  font-size: 12px;
}

.operations-auto-ban-control {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.operations-auto-ban-control-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.operations-auto-ban-control-head p {
  margin: 3px 0 0;
  font-size: 12px;
}

.operations-auto-ban-switch {
  display: inline-grid;
  align-items: center;
  min-width: 70px;
  cursor: pointer;
}

.operations-auto-ban-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.operations-auto-ban-switch > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 70px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.operations-auto-ban-switch > span::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  background: #dc2626;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

.operations-auto-ban-switch input:checked + span {
  color: #1f2933;
}

.operations-auto-ban-switch input:checked + span::before {
  background: var(--teal);
}

.operations-auto-ban-switch input:disabled + span {
  cursor: not-allowed;
  opacity: 0.58;
}

.operations-auto-ban-switch input:not(:checked) + span .auto-ban-on,
.operations-auto-ban-switch input:checked + span .auto-ban-off {
  display: none;
}

.operations-auto-ban-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.operations-auto-ban-note span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #f0d89f;
  color: #5b4118;
  font-size: 11px;
  text-transform: uppercase;
}

.operations-auto-ban-note p {
  margin: 0;
  color: #5b4118;
  font-size: 12px;
}

.operations-auto-ban-rules {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

.operations-auto-ban-rules[open] {
  display: grid;
  gap: 8px;
}

.operations-auto-ban-rules summary {
  cursor: pointer;
  list-style: none;
}

.operations-auto-ban-rules summary::-webkit-details-marker {
  display: none;
}

.operations-auto-ban-rule-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.operations-auto-ban-rule,
.operations-auto-ban-rule-editor {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.operations-auto-ban-rule strong,
.operations-rule-enabled {
  font-size: 12px;
  font-weight: 600;
}

.operations-rule-enabled {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.operations-rule-enabled-check {
  display: inline-flex;
  flex: 1 1 auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.operations-rule-enabled-check span {
  min-width: 0;
  line-height: 1.25;
}

.operations-rule-enabled input,
.operations-rule-enabled-check input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.operations-auto-ban-rule p,
.operations-auto-ban-rule-editor p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.operations-rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
}

.operations-rule-grid label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
}

.operations-rule-grid input,
.operations-rule-grid select {
  min-width: 0;
  height: 30px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
}

.operations-auto-ban-global-settings {
  padding: 8px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 8px;
  background: #f0fdfa;
}

.operations-wind-pool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.operations-wind-pool-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.operations-wind-pool-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

.operations-wind-pool-item.is-green {
  border-color: rgba(37, 132, 116, 0.28);
  background: #f3fbf8;
}

.operations-wind-pool-item.is-amber {
  border-color: rgba(190, 126, 35, 0.36);
  background: #fff9ef;
}

.operations-wind-pool-item.is-red {
  border-color: rgba(190, 65, 65, 0.36);
  background: #fff5f5;
}

.operations-wind-pool-item > div {
  min-width: 0;
}

.operations-wind-pool-item strong,
.operations-wind-pool-item p {
  overflow-wrap: anywhere;
}

.operations-wind-pool-item p {
  margin: 3px 0 0;
  font-size: 12px;
}

.operations-wind-timeline-bars {
  display: grid;
  grid-template-columns: repeat(24, minmax(14px, 1fr));
  gap: 4px;
  height: 136px;
  align-items: end;
  padding: 9px 9px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow-x: auto;
}

.operations-wind-timeline-bucket {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 18px;
  gap: 4px;
  align-items: end;
  height: 100%;
  min-width: 0;
}

.operations-wind-timeline-bar {
  display: block;
  min-height: 2px;
  border-radius: 999px 999px 2px 2px;
  background: #d7e2e0;
}

.operations-wind-timeline-bar.is-l1 {
  background: #7fc7b5;
}

.operations-wind-timeline-bar.is-l2 {
  background: #d4a64f;
}

.operations-wind-timeline-bar.is-l3,
.operations-wind-timeline-bar.is-l4 {
  background: #c65f5f;
}

.operations-wind-timeline-bucket small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 18px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-wind-manual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 8px;
}

.operations-wind-manual-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.operations-wind-scroll-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.operations-wind-manual-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.operations-wind-manual-head strong {
  font-size: 13px;
  font-weight: 600;
}

.operations-wind-manual-head span {
  color: var(--muted);
  font-size: 12px;
}

.operations-wind-manual-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

.operations-wind-manual-item > div {
  min-width: 0;
}

.operations-wind-manual-item strong,
.operations-wind-manual-item code {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.operations-wind-manual-item p {
  margin: 3px 0 0;
  font-size: 12px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.operations-wind-manual-item code {
  margin-top: 3px;
  color: #1f2933;
  font: 11px/1.35 Consolas, "Courier New", monospace;
}

.operations-wind-watch-item {
  grid-template-columns: minmax(0, 1fr);
}

.operations-wind-watch-body {
  min-width: 0;
}

.operations-wind-watch-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.operations-wind-watch-actions .tiny-button {
  max-width: 100%;
  white-space: nowrap;
}

.operations-wind-ticket {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

.operations-wind-ticket.is-green {
  border-color: rgba(37, 132, 116, 0.28);
  background: #f3fbf8;
}

.operations-wind-ticket.is-amber {
  border-color: rgba(190, 126, 35, 0.36);
  background: #fff9ef;
}

.operations-wind-ticket.is-red {
  border-color: rgba(190, 65, 65, 0.36);
  background: #fff5f5;
}

.operations-wind-ticket-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.operations-wind-ticket strong,
.operations-wind-ticket code {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.operations-wind-ticket p {
  margin: 3px 0 0;
  font-size: 12px;
}

.operations-wind-ticket code {
  margin-top: 4px;
  color: #1f2933;
  font: 11px/1.35 Consolas, "Courier New", monospace;
}

.operations-wind-top-list {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 5px;
  align-items: start;
  min-width: 0;
}

.operations-wind-top-list span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.operations-wind-top-list code {
  overflow: hidden;
  color: #1f2933;
  font: 11px/1.35 Consolas, "Courier New", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-wind-section-title {
  font-size: 13px;
}

.operations-wind-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

.operations-wind-event.is-green {
  border-color: rgba(37, 132, 116, 0.28);
  background: #f3fbf8;
}

.operations-wind-event.is-amber {
  border-color: rgba(190, 126, 35, 0.36);
  background: #fff9ef;
}

.operations-wind-event.is-red {
  border-color: rgba(190, 65, 65, 0.36);
  background: #fff5f5;
}

.operations-wind-event-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.operations-wind-event-main strong {
  font-weight: 600;
}

.operations-wind-event-main span,
.operations-wind-event-meta {
  color: var(--muted);
  font-size: 12px;
}

.operations-wind-event-main code {
  overflow: hidden;
  color: #1f2933;
  font: 12px/1.4 Consolas, "Courier New", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-wind-event-meta {
  display: grid;
  gap: 3px;
  justify-items: end;
}

.operations-wind-event-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.operations-space-empty {
  display: grid;
  gap: 6px;
}

.operations-space-empty code {
  display: block;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafb;
  color: #1f2933;
  font: 12px/1.4 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.operations-space-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.operations-space-head p {
  margin: 3px 0 0;
}

.operations-space-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.operations-space-card {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

.operations-space-card.is-green {
  border-color: rgba(37, 132, 116, 0.28);
  background: #f3fbf8;
}

.operations-space-card.is-amber {
  border-color: rgba(190, 126, 35, 0.36);
  background: #fff9ef;
}

.operations-space-card.is-red {
  border-color: rgba(190, 65, 65, 0.36);
  background: #fff5f5;
}

.operations-space-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.operations-space-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.operations-space-title span {
  color: var(--muted);
  font-size: 12px;
}

.operations-space-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eef0;
}

.operations-space-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2f9e83;
}

.operations-space-card.is-amber .operations-space-meter span {
  background: #c8892f;
}

.operations-space-card.is-red .operations-space-meter span {
  background: #c34f4f;
}

.operations-space-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.operations-space-card p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-space-details {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.operations-space-details summary {
  cursor: pointer;
  color: var(--teal);
}

.operations-space-details pre {
  max-height: 220px;
  margin: 8px 0 0;
  padding: 9px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
  color: #1f2933;
  font: 12px/1.45 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.operations-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.operations-directory-item {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.operations-directory-item span {
  color: var(--muted);
  font-size: 12px;
}

.operations-directory-item strong {
  font-weight: 500;
}

.operations-cleanup-policy {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.operations-cleanup-policy-head {
  display: grid;
  gap: 3px;
}

.operations-cleanup-policy-head p {
  margin: 0;
}

.operations-cleanup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.operations-cleanup-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

.operations-cleanup-card.is-safe {
  border-color: rgba(37, 132, 116, 0.28);
  background: #f3fbf8;
}

.operations-cleanup-card.is-policy {
  border-color: rgba(190, 126, 35, 0.36);
  background: #fff9ef;
}

.operations-cleanup-card.is-locked {
  border-color: rgba(190, 65, 65, 0.36);
  background: #fff5f5;
}

.operations-cleanup-card strong {
  font-weight: 500;
}

.operations-cleanup-card ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 12px;
}

.operations-metric-card,
.operations-command-card,
.operations-report-card,
.operations-manual-item,
.operations-request-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.operations-metric-card {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.operations-command-card,
.operations-report-card,
.operations-manual-item,
.operations-request-item {
  overflow: visible;
}

.operations-runner-box {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.operations-request-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.operations-request-status-grid > section {
  min-width: 0;
  display: grid;
  gap: 7px;
  align-content: start;
}

.operations-summary-grid {
  overflow: visible;
}

.field-label-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.field-help-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 4px;
  border: 1px solid rgba(31, 111, 104, 0.32);
  border-radius: 999px;
  background: #f3fbf8;
  color: var(--teal);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  z-index: 20;
}

.field-help-bubble::after {
  display: none;
  content: attr(data-help);
}

.field-help-bubble:hover::after,
.field-help-bubble:focus::after {
  display: none;
}

.floating-help-tooltip {
  position: fixed;
  z-index: 7000;
  display: none;
  width: min(520px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 10px 12px;
  border: 1px solid rgba(31, 111, 104, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
  color: #172426;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  pointer-events: none;
  text-align: left;
  white-space: pre-line;
}

.operations-metric-card > span {
  color: var(--muted);
  font-size: 12px;
}

.operations-metric-card strong {
  font-size: 14px;
  font-weight: 500;
}

.operations-metric-card.is-ok {
  border-color: rgba(37, 132, 116, 0.28);
  background: #f3fbf8;
}

.operations-metric-card.is-warn {
  border-color: rgba(190, 126, 35, 0.36);
  background: #fff9ef;
}

.operations-command-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.operations-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.operations-command-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.operations-command-card input,
.operations-command-card select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
  background: #fff;
  color: var(--ink);
}

.operations-command-card textarea {
  width: 100%;
  min-height: 52px;
  resize: vertical;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
}

.operations-report-stack,
.operations-history {
  display: grid;
  gap: 8px;
}

.operations-report-card {
  padding: 10px;
}

.operations-report-card summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.operations-report-card pre {
  max-height: min(340px, 42vh);
  margin: 10px 0 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
  color: #1f2933;
  font: 12px/1.45 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.operations-manual-list {
  display: grid;
  gap: 8px;
  max-height: min(260px, 34vh);
  overflow-y: auto;
  padding-right: 3px;
  overscroll-behavior: contain;
}

.operations-request-list {
  display: grid;
  gap: 8px;
  max-height: min(320px, 42vh);
  overflow-y: auto;
  padding-right: 3px;
  overscroll-behavior: contain;
}

.operations-request-list-compact {
  min-height: 72px;
  max-height: min(220px, 30vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

.operations-security-status {
  min-height: 18px;
  margin: 0;
}

.operations-manual-item {
  padding: 9px 10px;
}

.operations-request-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
}

.operations-request-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.operations-manual-item p {
  margin: 3px 0 0;
}

.operations-request-item p {
  margin: 3px 0 0;
}

.operations-request-result {
  margin: 8px 0 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  color: #334155;
  white-space: pre-wrap;
  font-size: 12px;
}

.bug-preview {
  min-height: 120px;
  margin-top: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  background: #f7fafb;
  text-align: center;
}

.bug-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  display: block;
}

.bug-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.capture-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  cursor: crosshair;
  background: rgba(31, 41, 51, 0.24);
}

.capture-hint {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 6px;
  background: #1f2933;
  color: #fff;
  font-weight: 800;
}

.capture-box {
  position: fixed;
  display: none;
  border: 2px solid #fff;
  background: rgba(20, 125, 118, 0.18);
  box-shadow: 0 0 0 9999px rgba(31, 41, 51, 0.18);
}

.password-modal {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
}

.password-modal[hidden] {
  display: none;
}

.password-dialog {
  width: min(520px, calc(100vw - 32px));
  border: 1px solid #d8e0e6;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2933;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
  padding: 18px;
}

.password-dialog header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.password-dialog header p {
  margin: 4px 0 0;
}

.passkey-bind-dialog .form-grid {
  grid-template-columns: minmax(0, 1fr);
}

#passkeyBindStatus {
  margin: 0;
}

.feedback-group-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.feedback-group-form {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.feedback-group-form label {
  display: grid;
  gap: 5px;
}

.feedback-group-form input,
.feedback-group-form textarea,
.feedback-group-form select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.feedback-group-selector {
  display: grid;
  gap: 5px;
}

.feedback-group-member-tools,
.feedback-group-form footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.feedback-group-footer-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.feedback-group-member-search input {
  min-height: 34px;
}

.feedback-group-members {
  display: grid;
  gap: 8px;
  min-height: 0;
  max-height: min(46vh, 460px);
  overflow: auto;
  padding-right: 3px;
}

.feedback-group-member-row {
  display: grid;
  grid-template-columns: auto 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.feedback-group-member-row.disabled {
  opacity: 0.48;
}

.feedback-group-member-row .feedback-avatar {
  width: 36px;
  height: 36px;
}

.feedback-group-member-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.feedback-group-member-row strong,
.feedback-group-member-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.passkey-security-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

.passkey-list {
  display: grid;
  gap: 8px;
}

.passkey-account-context {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--teal);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.passkey-account-context strong {
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.passkey-account-context small {
  flex: 1 1 100%;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.passkey-record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.passkey-record p {
  margin: 3px 0 0;
}

.passkey-record > div:first-child {
  min-width: 0;
  flex: 1 1 220px;
}

.passkey-record-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.account-profile-form {
  align-items: end;
}

.account-profile-dialog {
  max-width: min(94vw, 520px);
}

.avatar-file-picker {
  display: grid;
  align-content: start;
  gap: 6px;
}

.avatar-file-control {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.avatar-file-control:hover,
.avatar-file-control:focus-within {
  border-color: var(--teal);
  color: var(--teal);
}

.avatar-file-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.avatar-file-picker small {
  color: var(--muted);
  font-size: 11px;
}

.account-avatar-crop-editor {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafb;
}

.account-avatar-crop-editor[hidden] {
  display: none;
}

.account-avatar-crop-stage {
  position: relative;
  width: min(220px, 62vw);
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border-radius: 8px;
  background: #e5edf0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.account-avatar-crop-stage:active {
  cursor: grabbing;
}

.account-avatar-crop-stage img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  max-height: none;
  display: block;
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
}

.account-avatar-crop-mask {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.36), inset 0 0 0 1px rgba(15, 23, 42, 0.16);
  pointer-events: none;
}

.account-avatar-crop-controls {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.account-avatar-crop-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.account-avatar-crop-controls input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
}

.account-avatar-crop-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-profile-preview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.account-profile-preview .feedback-avatar,
.current-account-avatar {
  width: 42px;
  height: 42px;
}

@media (max-width: 640px) {
  .account-avatar-crop-editor {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .account-avatar-crop-stage {
    width: min(220px, 72vw);
  }

  .account-avatar-crop-buttons .tiny-button {
    flex: 1 1 92px;
  }
}

.mobile-shell-bar,
.mobile-bottom-nav,
.mobile-nav-backdrop {
  display: none;
}

.compact-field textarea {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  resize: vertical;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .nav-list {
    grid-template-columns: repeat(3, 1fr);
    flex: none;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .dashboard-layout,
  .customer-status-grid,
  .split-layout,
  .quote-builder,
  .portal-shopping,
  .portal-inquiry-method-grid,
  .settings-grid,
  .product-tools-body,
  .product-form-grid,
  .custom-inquiry-grid,
  .client-payment-overview,
  .detail-layout,
  .detail-hero,
  .order-progress-layout,
  .client-orders-overview,
  .portal-grid {
    grid-template-columns: 1fr;
  }

  .settings-card[data-config-section="quote"],
  .settings-card[data-config-section="translation"],
  .settings-card[data-config-section="email"],
  .settings-card[data-config-section="governance"] {
    grid-column: span 1;
  }

  .governance-heading,
  .governance-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .governance-heading-actions {
    width: 100%;
    justify-content: space-between;
  }

  .governance-global-switch {
    margin-left: auto;
  }

  .governance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .governance-global-authority {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .governance-global-authority > span:not(.status-cell) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .governance-summary > div {
    display: grid;
    align-content: center;
    gap: 4px;
  }

  .governance-summary strong {
    line-height: 1;
  }

  .governance-summary > div:last-child {
    grid-column: 1 / -1;
  }

  .governance-board-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .governance-board-actions {
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 2px;
    overflow: visible;
    flex-wrap: wrap;
  }

  .governance-module-head {
    min-height: 42px;
  }

  .governance-board-table {
    overflow: visible;
  }

  .governance-board-header {
    display: none;
  }

  .governance-control-row,
  .governance-control-summary {
    min-width: 0;
  }

  .governance-control-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 12px 32px 12px 12px;
  }

  .governance-control-summary > span:not(.governance-process-cell),
  .governance-control-summary > strong {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 3px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .governance-control-summary > span:not(.governance-process-cell)::before,
  .governance-control-summary > strong::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .governance-process-cell {
    grid-column: 1 / -1;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--line);
  }

  .governance-control-summary > [data-label="Latest"] {
    grid-column: 1 / -1;
  }

  .governance-operational-snapshot {
    grid-template-columns: 1fr;
  }

  .governance-duty-grid,
  .governance-work-form,
  .governance-approval-form {
    grid-template-columns: 1fr;
  }

  .governance-list-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .governance-list-actions,
  .governance-row-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .translation-runtime-grid,
  .translation-runtime-env-list {
    grid-template-columns: 1fr;
  }

  .translation-runtime-provider-head,
  .translation-runtime-readiness {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-card[data-config-section="quote"] {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .settings-card[data-config-section="quote"] .detail-field-item {
    min-width: 600px;
  }

  .detail-field-print-toggle {
    justify-content: flex-end;
  }

  .global-market-ticker-line {
    max-width: calc(100vw - 64px);
  }

  .operations-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-wind-risk-grid,
  .operations-wind-manual-grid,
  .operations-wind-pool-grid,
  .operations-dynamic-honeypot-lists,
  .operations-dynamic-honeypot-hit {
    grid-template-columns: 1fr;
  }

  .operations-auto-ban-control-head {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .operations-wind-recommendation {
    grid-template-columns: 1fr;
  }

  .operations-wind-timeline-bars {
    gap: 3px;
  }

  .metric-grid,
  .metric-grid.compact {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .kanban {
    grid-template-columns: repeat(4, 260px);
  }

  .production-layout {
    grid-template-columns: 1fr;
  }

  .production-progress-summary {
    grid-template-columns: 1fr;
  }

  .production-item-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .production-item-qty,
  .production-item-controls,
  .production-item-ratio-cell,
  .production-item-shipped-cell {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

}

@media (max-width: 900px) {
  .shipment-v1-grid,
  .new-shipment-form {
    grid-template-columns: 1fr;
  }

  .carrier-select-combo {
    width: min(118px, 100%);
    max-width: 118px;
  }
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1180px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 4000;
    width: min(86vw, 320px);
    height: 100dvh;
    max-height: 100dvh;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  }

  body.mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  .mobile-nav-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 3990;
    border: 0;
    background: rgba(15, 23, 42, 0.45);
  }

  .nav-list {
    grid-template-columns: 1fr;
    max-height: none;
    overflow: visible;
  }

  .sidebar-panel {
    margin-top: 10px;
  }

  .main {
    padding: calc(58px + env(safe-area-inset-top) + var(--jzb-visual-viewport-top, 0px)) 10px calc(78px + env(safe-area-inset-bottom));
  }

  .client-orders-overview.client-orders-drawer-mode {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .client-orders-drawer-mode .client-order-list-panel {
    min-width: 0;
  }

  .client-order-list-panel-static {
    display: grid;
    gap: 10px;
  }

  .client-orders-drawer-mode .client-order-list {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0;
    padding-bottom: 0 !important;
  }

  .client-order-mobile-drawer {
    min-width: 0;
    margin: -2px 0 8px;
  }

  .client-order-mobile-drawer .client-order-detail-card {
    border-color: var(--teal);
    background: #ffffff;
  }

  .client-order-logistics-inline {
    display: grid;
    gap: 10px;
  }

  .client-order-logistics-inline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .client-order-logistics-inline-head h3 {
    margin: 0;
    font-size: 15px;
  }

  .client-logistics-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .client-logistics-card .order-shipment-actions {
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
  }

  .client-logistics-card .tracking-link,
  .client-logistics-card .shipping-details-link {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }

  .production-order-card .production-order-shipment-summary {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  .production-order-birdview-link {
    margin-left: auto;
    align-self: end;
    text-align: right;
  }

  .main,
  .main > section,
  .panel,
  .workbench-card,
  .dashboard-fold-panel,
  .payment-upload-form,
  .payment-replace-form,
  .payment-history-item,
  .client-payment-summary-card,
  .client-payment-history-panel,
  .client-payment-status-panel {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .panel > *,
  .workbench-card > *,
  .dashboard-fold-panel > *,
  .client-record-body > *,
  .feedback-message-list > *,
  .pending-events-list > *,
  .customer-pending-events-list > * {
    min-width: 0;
    max-width: 100%;
  }

  .panel-head,
  .workbench-card-head,
  .section-bar,
  .top-actions,
  .portal-hero-actions,
  .feedback-message-actions,
  .dashboard-flow-actions,
  .payment-slip-actions,
  .quote-actions,
  .document-actions {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }

  .panel-head > *,
  .workbench-card-head > *,
  .section-bar > *,
  .top-actions > *,
  .portal-hero-actions > *,
  .feedback-message-actions > *,
  .dashboard-flow-actions > *,
  .payment-slip-actions > *,
  .quote-actions > *,
  .document-actions > * {
    min-width: 0;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  .mobile-shell-bar {
    position: fixed;
    top: calc(var(--jzb-visual-viewport-top, 0px) + env(safe-area-inset-top));
    left: var(--jzb-visual-viewport-left, 0px);
    right: auto;
    width: var(--jzb-visual-viewport-width, 100vw);
    z-index: 1500;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 7px 10px;
    background: rgba(248, 250, 252, 0.96);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease;
  }

  .mobile-shell-bar strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: var(--ink);
    font-size: 14px;
  }

  .account-row-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .account-row-card > div {
    min-width: 0;
  }

  .account-row-card strong,
  .account-row-card small {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .account-row-actions {
    justify-content: flex-start;
  }

  .account-inline-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-inline-edit {
    padding-bottom: 2px;
  }

  .mobile-menu-button,
  .mobile-market-button {
    min-height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    padding: 0 10px;
    font-size: 12px;
  }

  .mobile-menu-button {
    position: relative;
    overflow: visible;
  }

  .mobile-menu-badge {
    position: absolute;
    top: -7px;
    left: -7px;
    min-width: 18px;
    min-height: 18px;
    width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 18px;
    box-shadow: 0 0 0 2px #fff;
    z-index: 2;
  }

  .mobile-menu-badge.pending-refresh-gauge {
    padding: 0;
  }

  .mobile-market-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 78px;
    min-width: 78px;
    max-width: 78px;
    border-radius: 999px;
    border-color: rgba(15, 118, 110, 0.22);
    background: rgba(240, 253, 250, 0.92);
    color: var(--teal);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    justify-self: end;
  }

  .mobile-market-button::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 999px;
    background: var(--teal);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  }

  .mobile-market-button.is-closed::before {
    background: #dc2626;
  }

  body.mobile-bars-collapsed .mobile-shell-bar {
    transform: translateY(calc(-100% - env(safe-area-inset-top)));
  }

  .topbar {
    display: none;
  }

  .global-market-ticker-shell {
    position: sticky;
    top: calc(48px + env(safe-area-inset-top));
    z-index: 1300;
    min-height: 0;
    margin: 0 0 10px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .global-market-ticker-shell.is-market-closed,
  .global-market-ticker-shell:has(.global-market-ticker:not([open])) {
    height: 0;
    margin: 0;
    overflow: hidden;
  }

  body.mobile-bars-collapsed .global-market-ticker-shell {
    transform: translateY(-52px);
    opacity: 0;
    pointer-events: none;
  }

  .global-market-ticker {
    padding: 6px;
    min-height: 40px;
  }

  .global-market-ticker[open] {
    grid-template-columns: 1fr;
  }

  .global-market-ticker summary {
    justify-self: end;
  }

  .global-market-ticker-line {
    max-width: calc(100vw - 20px);
    height: 34px;
    min-height: 34px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 0 3px;
    box-sizing: border-box;
  }

  .market-ticker-item {
    height: 30px;
    padding: 0 9px;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1450;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(58px, 1fr);
    gap: 4px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -10px 22px rgba(15, 23, 42, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mobile-bottom-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .mobile-bottom-nav button {
    position: relative;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
    padding: 0 8px;
  }

  .mobile-bottom-nav .mobile-menu-badge {
    top: -4px;
    right: -4px;
    left: auto;
  }

  .mobile-bottom-nav button.active {
    border-color: rgba(15, 118, 110, 0.24);
    background: var(--teal-soft);
    color: var(--teal);
  }

  .version-update-notice {
    right: 10px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
  }

  .table-wrap,
  .orders-table,
  .quote-table-wrap,
  .document-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .orders-table table,
  .document-table-wrap table {
    width: max-content;
    min-width: 940px;
  }

  .document-table-wrap table {
    min-width: 1040px;
  }

  .orders-table th,
  .orders-table td,
  .document-table-wrap th,
  .document-table-wrap td {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  .orders-table .order-customer-filter-inline,
  .orders-table .order-customer-filter-inline span,
  .document-record-head,
  .document-actions {
    white-space: nowrap;
  }

  .document-record-head,
  .document-actions {
    flex-wrap: nowrap;
  }

  .document-record-head {
    padding-right: 0;
  }

  .document-record-filter-row {
    position: static;
    width: 100%;
    max-width: none;
    margin: -2px 0 12px;
  }

  .document-record-filter-row select {
    width: 100%;
  }

  #documents .document-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: stretch;
    width: min(280px, 100%);
    margin: 0 auto;
    white-space: normal;
  }

  #documents .document-actions > .secondary-action {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }

  .topbar,
  .top-actions,
  .section-bar,
  .portal-hero,
  .portal-hero-actions,
  .search {
    min-width: 0;
    width: 100%;
  }

  .metric-grid,
  .metric-grid.compact,
  .product-grid,
  .website-hero,
  .website-try-on-layout,
  .website-inquiry-layout,
  .form-grid,
  .detail-grid,
  .custom-fields,
  .ai-product-grid,
  .review-card {
    grid-template-columns: 1fr;
  }

  .nav-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .review-card .product-image {
    min-height: 150px;
  }

  .product-list-row {
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
  }

  .product-list-row .product-image {
    width: 76px;
    height: 76px;
    min-height: 76px;
  }

  .portal-product-grid {
    max-height: 58vh;
    padding-right: 2px;
  }

  .portal-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .portal-inquiry-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    margin-bottom: 8px;
  }

  .portal-inquiry-method-card {
    display: block;
    gap: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .portal-inquiry-method-card > .panel-head {
    display: none;
  }

  .portal-hero {
    display: none;
  }

  .portal-shopping > .panel.wide > .panel-head {
    padding-bottom: 4px;
    margin-bottom: 6px;
  }

  .portal-shopping > .panel.wide > .panel-head h2 {
    display: none;
  }

  .portal-method-entry,
  .custom-upload {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    min-height: 0;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .portal-method-action {
    min-height: 40px;
    padding: 0 10px;
    font-size: 12px;
    white-space: normal;
  }

  .portal-inquiry-cart-panel[open] {
    margin-top: 8px;
  }

  .portal-inquiry-cart-panel[open] > summary {
    padding-bottom: 8px;
  }

  .portal-inquiry-cart-panel #portalInquiryCart {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 6px;
  }

  .portal-inquiry-cart-panel .portal-inquiry-wall {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  .portal-inquiry-cart-panel .portal-inquiry-wall-card {
    width: 100%;
    min-width: 0;
    grid-template-rows: 104px auto;
    padding: 6px;
  }

  .portal-inquiry-cart-panel .portal-inquiry-wall-image {
    height: 104px;
  }

  .portal-inquiry-cart-panel .cart-total {
    display: none;
  }

  .portal-inquiry-cart-panel [data-submit-inquiry],
  .portal-inquiry-cart-panel .muted {
    min-width: min(100%, 320px);
  }

  .portal-shopping > .panel.wide > .panel-head #portalSelectedCount {
    display: none;
  }

  .portal-method-action {
    min-height: 44px;
    white-space: normal;
    line-height: 1.2;
  }

  #quoteProductPicker.modal-open,
  #documentProductPicker.modal-open,
  #otherQuoteProductPicker.modal-open,
  #portalProductPicker.modal-open {
    top: calc(48px + env(safe-area-inset-top));
    right: 8px;
    bottom: calc(48px + env(safe-area-inset-bottom));
    left: 8px;
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    min-height: 0;
    padding: 8px;
    overflow: hidden;
  }

  #otherQuoteProductPicker.modal-open {
    z-index: 9300;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #quoteProductPicker.modal-open .quote-picker-head,
  #documentProductPicker.modal-open .quote-picker-head,
  #otherQuoteProductPicker.modal-open .quote-picker-head,
  #portalProductPicker.modal-open .quote-picker-head {
    position: sticky;
    top: 0;
    flex: 0 0 auto;
    z-index: 3;
    min-width: 0;
    padding-bottom: 4px;
    background: var(--paper);
  }

  #quoteProductPicker.modal-open .quote-picker-head > div,
  #documentProductPicker.modal-open .quote-picker-head > div,
  #otherQuoteProductPicker.modal-open .quote-picker-head > div,
  #portalProductPicker.modal-open .quote-picker-head > div {
    min-width: 0;
    justify-content: flex-end;
  }

  #quoteProductPicker.modal-open .quote-product-filters,
  #documentProductPicker.modal-open .quote-product-filters,
  #otherQuoteProductPicker.modal-open .quote-product-filters,
  #portalProductPicker.modal-open .portal-product-filters {
    flex: 0 0 auto;
    min-height: 0;
    max-height: 20dvh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  #quoteProductPicker.modal-open .catalog-style-filter select,
  #documentProductPicker.modal-open .catalog-style-filter select,
  #otherQuoteProductPicker.modal-open .catalog-style-filter select,
  #portalProductPicker.modal-open .catalog-style-filter select {
    min-height: 38px;
    height: 38px;
    padding: 0 34px 0 12px;
    font-size: 15px;
  }

  #quoteProductPicker.modal-open .catalog-category-filter,
  #documentProductPicker.modal-open .catalog-category-filter,
  #otherQuoteProductPicker.modal-open .catalog-category-filter,
  #portalProductPicker.modal-open .catalog-category-filter {
    gap: 6px;
  }

  #quoteProductPicker.modal-open .catalog-category-filter button,
  #documentProductPicker.modal-open .catalog-category-filter button,
  #otherQuoteProductPicker.modal-open .catalog-category-filter button,
  #portalProductPicker.modal-open .catalog-category-filter button {
    min-height: 36px;
    padding: 0 12px;
    font-size: 15px;
  }

  #quoteProductPicker.modal-open .quote-product-grid,
  #documentProductPicker.modal-open .quote-product-grid,
  #otherQuoteProductPicker.modal-open .quote-product-grid,
  #portalProductPicker.modal-open .portal-product-grid {
    flex: 1 1 auto;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: stretch;
    align-items: stretch;
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px 8px;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
  }

  #portalProductPicker.modal-open .portal-product-grid {
    max-height: none;
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  #quoteProductPicker.modal-open .product-picker-paged,
  #documentProductPicker.modal-open .product-picker-paged,
  #otherQuoteProductPicker.modal-open .product-picker-paged,
  #portalProductPicker.modal-open .product-picker-paged {
    grid-column: 1 / -1;
    height: 100%;
  }

  #quoteProductPicker.modal-open .product-picker-page-grid,
  #documentProductPicker.modal-open .product-picker-page-grid,
  #otherQuoteProductPicker.modal-open .product-picker-page-grid,
  #portalProductPicker.modal-open .product-picker-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow-y: auto;
  }

  #quoteProductPicker.modal-open .quote-picker-image-card,
  #documentProductPicker.modal-open .quote-picker-image-card,
  #otherQuoteProductPicker.modal-open .quote-picker-image-card,
  #portalProductPicker.modal-open .portal-inquiry-image-card {
    grid-template-rows: 118px auto;
    gap: 6px;
    padding: 6px;
  }

  #quoteProductPicker.modal-open .quote-picker-image,
  #documentProductPicker.modal-open .quote-picker-image,
  #otherQuoteProductPicker.modal-open .quote-picker-image,
  #portalProductPicker.modal-open .portal-inquiry-image {
    height: 118px;
  }

  #quoteProductPicker.modal-open .quote-picker-image-meta,
  #documentProductPicker.modal-open .quote-picker-image-meta,
  #otherQuoteProductPicker.modal-open .quote-picker-image-meta,
  #portalProductPicker.modal-open .portal-inquiry-image-meta {
    gap: 4px;
  }

  #quoteProductPicker.modal-open .quote-picker-image-meta strong,
  #documentProductPicker.modal-open .quote-picker-image-meta strong,
  #otherQuoteProductPicker.modal-open .quote-picker-image-meta strong,
  #portalProductPicker.modal-open .portal-inquiry-image-meta strong {
    font-size: 11px;
    line-height: 1.15;
  }

  #quoteProductPicker.modal-open .quote-picker-image-meta .quote-check,
  #documentProductPicker.modal-open .quote-picker-image-meta .quote-check,
  #otherQuoteProductPicker.modal-open .quote-picker-image-meta .quote-check,
  #portalProductPicker.modal-open .portal-inquiry-image-meta .quote-check {
    min-height: 28px;
    padding: 0 6px;
    gap: 5px;
    font-size: 12px;
  }

  #quoteProductPicker.modal-open .quote-picker-image-meta .quote-check span,
  #documentProductPicker.modal-open .quote-picker-image-meta .quote-check span,
  #otherQuoteProductPicker.modal-open .quote-picker-image-meta .quote-check span,
  #portalProductPicker.modal-open .portal-inquiry-image-meta .quote-check span {
    white-space: nowrap;
  }

  #quoteProductPicker.modal-open .quote-picker-image-meta .quote-check input,
  #documentProductPicker.modal-open .quote-picker-image-meta .quote-check input,
  #otherQuoteProductPicker.modal-open .quote-picker-image-meta .quote-check input,
  #portalProductPicker.modal-open .portal-inquiry-image-meta .quote-check input {
    width: 18px;
    height: 18px;
    min-width: 18px;
  }

  #quoteProductPicker.modal-open .product-picker-pagination,
  #documentProductPicker.modal-open .product-picker-pagination,
  #otherQuoteProductPicker.modal-open .product-picker-pagination,
  #portalProductPicker.modal-open .product-picker-pagination {
    min-height: 34px;
    padding: 2px 0 0;
    gap: 8px;
    font-size: 12px;
  }

  #quoteProductPicker.modal-open .product-picker-pagination .tiny-button,
  #documentProductPicker.modal-open .product-picker-pagination .tiny-button,
  #otherQuoteProductPicker.modal-open .product-picker-pagination .tiny-button,
  #portalProductPicker.modal-open .product-picker-pagination .tiny-button {
    min-width: 34px;
    min-height: 34px;
  }

  .website-hero {
    min-height: auto;
    padding: 14px;
  }

  .website-hero-copy h2 {
    font-size: 30px;
  }

  .website-hero-media,
  .website-hero-media .product-image {
    min-height: 220px;
  }

  .website-product-card {
    grid-template-rows: 190px minmax(0, 1fr);
  }

  .website-product-image {
    height: 190px;
  }

  .website-try-on-stage {
    min-height: 300px;
  }

  .client-payment-order-card {
    grid-template-columns: 1fr;
  }

  .client-payment-overview,
  .client-payment-summary-block,
  .payment-summary-grid,
  .client-payment-history-panel .payment-upload-form,
  .payment-file-field {
    grid-template-columns: 1fr;
  }

  .client-record-body.client-payment-overview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: none;
    overflow: visible;
  }

  .client-payment-status-panel,
  .client-payment-history-panel {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .pending-events-panel,
  .customer-pending-events-panel,
  .pending-customer-group {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .pending-events-list,
  .pending-customer-event-list,
  .customer-pending-events-list {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .pending-customer-event-list {
    max-height: min(52dvh, 460px);
  }

  .pending-event-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .pending-event-type {
    grid-column: 1 / 2;
    width: auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .pending-event-main {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .pending-event-main strong,
  .pending-event-main p {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .pending-event-card time {
    grid-column: 1 / -1;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .pending-event-card > .status-cell {
    grid-column: 1 / 2;
    justify-self: start;
  }

  .pending-event-card .tiny-button {
    grid-column: 2 / 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    min-width: 64px;
    white-space: nowrap;
  }

  .client-payment-history-panel {
    order: -1;
  }

  .workbench-card.client-available-deposit-card,
  .client-payment-history-panel .payment-upload-form {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    border-color: var(--card-border);
    background: var(--card-bg);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    transform: none;
    z-index: 0;
  }

  .client-payment-history-panel .payment-upload-form.payment-slip-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    border-color: var(--line);
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  }

  .workbench-card.client-available-deposit-card.payment-deposit-card {
    border-color: var(--line);
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  }

  .payment-deposit-summary strong {
    font-size: 20px;
  }

  .client-payment-history-panel .payment-upload-form:active {
    transform: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  }

  .quote-home {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .quote-template-panel,
  .quote-records-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .quote-records-panel {
    display: none;
  }

  .quote-records-launcher {
    display: inline-flex;
    justify-content: center;
  }

  .quote-template-list {
    grid-template-columns: 1fr;
  }

  .quote-home .quote-template-card {
    min-height: 0;
  }

  .quote-records,
  .quote-record-month {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .quote-records-title-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .quote-records-title-row select {
    width: 100%;
    max-width: 100%;
  }

  .quote-record-card {
    grid-template-columns: 1fr;
    align-items: start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }

  .quote-record-card > div:first-child {
    min-width: 0;
  }

  .quote-record-card strong,
  .quote-record-card p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .quote-record-side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  .quote-record-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
    position: relative;
    z-index: 1;
  }

  .quote-record-side strong {
    grid-column: 1 / -1;
  }

  .quote-record-side .tiny-button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    white-space: normal;
  }

  .mobile-collapsible-panel > summary::after {
    display: inline-grid;
  }

  #shipments .split-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #shipments .parcel-content-panel {
    display: none;
  }

  #shipments .panel,
  #shipments .logistics-customer-group,
  .logistics-list-panel,
  .logistics-customer-body {
    min-width: 0;
    max-width: 100%;
  }

  .logistics-list-panel > .panel-head,
  .quote-template-panel > .panel-head,
  .production-order-panel > .panel-head {
    min-height: 44px;
  }

  .logistics-scroll-list {
    max-height: min(58dvh, 520px);
  }

  .logistics-customer-modal[data-logistics-customer-mode="list"] {
    padding: 0;
    place-items: stretch;
  }

  .logistics-customer-modal[data-logistics-customer-mode="list"] .logistics-customer-dialog {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
  }

  .logistics-customer-modal[data-logistics-customer-mode="list"] .logistics-customer-modal-body {
    min-height: 0;
    height: 100%;
    padding: 8px 10px calc(16px + env(safe-area-inset-bottom));
  }

  .logistics-customer-modal[data-logistics-customer-mode="list"] .logistics-customer-body {
    min-height: 0;
    height: 100%;
    display: grid;
  }

  .logistics-customer-modal[data-logistics-customer-mode="list"] .logistics-customer-modal-body,
  .logistics-customer-modal[data-logistics-customer-mode="list"] .logistics-list-page-mode,
  .logistics-customer-modal[data-logistics-customer-mode="list"] .logistics-scroll-list {
    max-height: none;
  }

  .logistics-customer-modal[data-logistics-customer-mode="list"] .logistics-list-page-mode {
    gap: 8px;
  }

  .logistics-customer-modal[data-logistics-customer-mode="list"] .logistics-list-page-mode > .panel-head {
    display: none;
  }

  .logistics-customer-modal[data-logistics-customer-mode="list"] .logistics-scroll-list {
    height: 100%;
    max-height: none !important;
    padding: 0 2px 6px;
    padding-bottom: 6px !important;
    scroll-padding-bottom: 6px !important;
  }

  .quote-records-modal {
    padding: 0;
    place-items: stretch;
  }

  .quote-records-dialog {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .quote-records-modal-body,
  .quote-records-fullscreen-body {
    padding: 10px;
  }

  .quote-records-modal .quote-records-dialog header [data-close-quote-records-modal]:not([data-mobile-floating-close]) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .client-quote-records-fullscreen {
    min-height: calc(100dvh - 116px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .quote-records,
  .pending-events-list,
  .pending-customer-event-list,
  .customer-pending-events-list,
  .dashboard-fold-body > .workbench-list,
  .client-record-body > .workbench-list,
  .client-payment-status-panel > .workbench-list,
  .client-payment-list-panel > .workbench-list,
  .feedback-thread-list,
  .portal-inquiry-wall,
  .portal-inquiry-history-list,
  .cart-list,
  .client-order-list,
  .client-logistics-list,
  .payment-history-list,
  .production-order-list,
  .production-item-list,
  .logistics-scroll-list,
  .backup-history-list,
  .document-records,
  .shipping-history,
  .dashboard-fold-panel:not(.payment-slips-panel) .dashboard-fold-body,
  .payment-slips-scroll-list,
  .mobile-scroll-safe {
    max-height: min(62dvh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .pending-events-list,
  .pending-customer-event-list,
  .customer-pending-events-list,
  .feedback-thread-list {
    max-height: min(58dvh, 520px);
    padding-right: 3px;
  }

  .quote-records,
  .pending-events-list,
  .pending-customer-event-list,
  .customer-pending-events-list,
  .dashboard-fold-body > .workbench-list,
  .client-record-body > .workbench-list,
  .client-payment-status-panel > .workbench-list,
  .client-payment-list-panel > .workbench-list,
  .feedback-thread-list,
  .portal-inquiry-wall,
  .portal-inquiry-history-list,
  .cart-list,
  .client-order-list,
  .client-logistics-list,
  .payment-history-list,
  .production-order-list,
  .production-item-list,
  .logistics-scroll-list,
  .backup-history-list,
  .document-records,
  .shipping-history,
  .dashboard-fold-panel:not(.payment-slips-panel) .dashboard-fold-body,
  .payment-slips-scroll-list,
  .mobile-scroll-safe {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .feedback-message-list,
  .feedback-thread-inline-detail,
  .bug-report-card,
  .mobile-inline-detail-safe {
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .feedback-thread-inline-detail .bug-flow-actions,
  .feedback-thread-inline-detail .dashboard-flow-actions,
  .mobile-inline-detail-safe .bug-flow-actions,
  .mobile-inline-detail-safe .dashboard-flow-actions {
    margin-bottom: calc(38px + env(safe-area-inset-bottom));
  }

  .dashboard-fold-panel:not(.payment-slips-panel) .dashboard-fold-body {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .pending-events-list {
    max-height: none;
    overflow: visible;
    padding-bottom: 0;
    scroll-padding-bottom: 0;
  }

  .pending-customer-event-list,
  .customer-pending-events-list,
  .dashboard-fold-body > .workbench-list,
  .client-record-body > .workbench-list,
  .client-payment-status-panel > .workbench-list,
  .client-payment-list-panel > .workbench-list,
  .portal-inquiry-history-list,
  .cart-list,
  .client-order-list,
  .client-logistics-list,
  .payment-history-list,
  .production-order-list,
  .production-item-list,
  .logistics-scroll-list,
  .document-records,
  .shipping-history,
  .payment-slips-scroll-list,
  .mobile-scroll-safe {
    max-height: min(48dvh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 12px;
    scroll-padding-bottom: 24px;
  }

  .dashboard-flow-actions {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0 0 8px;
    background: var(--paper);
  }

  .new-shipment-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .new-shipment-actions,
  .new-shipment-order-field,
  .new-shipment-content-field {
    grid-column: 1 / -1;
  }

  .new-shipment-carrier-field {
    grid-column: 1;
  }

  .new-shipment-tracking-field {
    grid-column: 2;
  }

  .new-shipment-parcel-field {
    grid-column: 1;
  }

  .new-shipment-items-field {
    grid-column: 2;
    min-width: 0;
  }

  .bug-reporter {
    position: static;
    display: block;
  }

  .bug-panel,
  .backup-panel {
    position: fixed;
    inset: 0;
    z-index: 4600;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    background: var(--paper);
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: calc(12px + env(safe-area-inset-top)) 10px calc(86px + env(safe-area-inset-bottom));
  }

  .bug-panel {
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    resize: none;
    min-width: 0;
    min-height: 100dvh;
    padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
  }

  .bug-panel .feedback-panel-drag-handle {
    display: none;
  }

  .bug-panel .feedback-message-list {
    grid-row: 1;
    padding: 0;
    overflow: hidden;
  }

  .bug-panel .feedback-submit-form {
    grid-row: 1;
  }

  .bug-panel .feedback-panel-window-controls {
    position: fixed;
    top: calc(5px + env(safe-area-inset-top));
    right: calc(5px + env(safe-area-inset-right));
    z-index: 10030;
  }

  .bug-panel .feedback-panel-window-button {
    width: 22px;
    height: 22px;
    border-radius: 5px;
  }

  .bug-panel .feedback-panel-window-icon {
    width: 10px;
    height: 10px;
  }

  .bug-panel .feedback-panel-window-icon-minimize::before {
    bottom: 1px;
    height: 1.6px;
  }

  .bug-panel .feedback-panel-window-icon-maximize {
    border-width: 1.4px;
  }

  .bug-panel .feedback-panel-window-icon-close::before,
  .bug-panel .feedback-panel-window-icon-close::after {
    top: 4px;
    height: 1.6px;
  }

  .bug-panel.feedback-panel-minimized {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    height: 40px;
    min-width: 0;
    min-height: 40px;
    max-height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 78px 6px 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  }

  .bug-panel.feedback-panel-minimized .feedback-panel-window-controls {
    position: absolute;
    top: 8px;
    right: 6px;
  }

  .feedback-media-player {
    position: fixed;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 10020;
    width: auto;
    max-height: min(42dvh, 360px);
  }

  .feedback-media-player.fullscreen {
    inset: 0;
    bottom: auto;
    max-height: none;
    width: auto;
    height: 100dvh;
  }

  .feedback-media-player video {
    max-height: 30dvh;
  }

  .feedback-media-player.fullscreen video {
    max-height: none;
  }

  .feedback-camera-modal {
    position: fixed;
    inset: 0;
    z-index: 10040;
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    place-items: stretch;
    padding: calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom) + var(--jzb-mobile-browser-bottom-guard, 0px)) calc(10px + env(safe-area-inset-left));
    background: #0f172a;
    box-shadow: none;
    overscroll-behavior: contain;
  }

  .feedback-camera-panel {
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) minmax(16px, auto) auto;
    gap: 8px;
    border-radius: 0;
    background: #0f172a;
    padding-bottom: 12px;
    overflow: hidden;
  }

  .feedback-camera-panel .feedback-camera-head strong,
  .feedback-camera-panel .feedback-camera-status {
    color: #e2e8f0;
  }

  .feedback-camera-preview {
    min-height: 0;
    min-width: 0;
    height: 100%;
    align-self: stretch;
    aspect-ratio: auto;
  }

  .feedback-camera-preview video {
    min-height: 0;
  }

  .feedback-camera-control-deck {
    grid-template-columns: minmax(88px, 104px) minmax(0, 1fr);
    min-height: 132px;
    margin-bottom: 0;
  }

  .feedback-camera-actions .tiny-button {
    min-height: 132px;
  }

  .bug-panel .feedback-room-header {
    padding-right: 44px;
  }

  .bug-panel.feedback-gallery-active {
    padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
  }

  .bug-panel.feedback-gallery-active .feedback-message-list {
    padding-bottom: 0;
    scroll-padding-bottom: 0;
  }

  .feedback-media-gallery-pane {
    padding: 8px 4px;
  }

  .feedback-media-gallery-head {
    grid-template-columns: 30px minmax(0, 1fr) 36px;
    gap: 5px;
  }

  .feedback-media-gallery-type-tabs {
    width: min(100%, 286px);
    grid-auto-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .feedback-media-gallery-type-tabs.with-chat {
    width: min(100%, 340px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
  }

  .feedback-media-gallery-type-tabs button {
    min-height: 31px;
    padding: 5px 7px;
    font-size: 11px;
  }

  .feedback-media-gallery-close {
    width: 32px;
    height: 32px;
  }

  .feedback-media-gallery-tools {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .feedback-media-gallery-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    text-align: left;
  }

  .feedback-media-selection-actions,
  .feedback-media-gallery-tools .feedback-conversation-actions {
    justify-content: flex-start;
  }

  .quote-editor-modal.active {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .quote-editor-modal.active > .panel {
    min-height: auto;
    overflow: visible;
  }

  .payment-slip-modal,
  .quote-preview-modal,
  .quote-records-modal,
  .shipping-details-modal,
  .inquiry-detail-modal,
  .logistics-customer-modal,
  .production-birdview-modal,
  .quote-checklist-modal,
  .freight-quote-modal,
  .quote-template-modal,
  .other-quote-modal,
  .custom-draft-modal,
  .portal-product-detail-modal,
  .website-register-modal,
  .password-modal {
    z-index: 8800;
    place-items: stretch;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .freight-quote-modal,
  .quote-template-modal,
  .other-quote-modal {
    padding: calc(58px + env(safe-area-inset-top)) 8px calc(68px + env(safe-area-inset-bottom));
  }

  .freight-quote-modal,
  .other-quote-modal {
    z-index: 9000;
    padding: 0;
    overflow: hidden;
  }

  .payment-slip-viewer,
  .quote-preview-dialog,
  .quote-preview-shell,
  .shipping-details-dialog,
  .inquiry-detail-dialog,
  .logistics-customer-dialog,
  .production-birdview-dialog,
  .quote-checklist-dialog,
  .freight-quote-dialog,
  .quote-template-dialog,
  .other-quote-dialog,
  .custom-draft-dialog,
  .portal-product-detail-dialog,
  .website-register-card,
  .password-dialog {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .freight-quote-dialog,
  .other-quote-dialog {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .freight-quote-form,
  .other-quote-form {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  .shipping-details-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .shipping-details-modal {
    inset: 0 !important;
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    overflow: hidden !important;
    overscroll-behavior: none;
    pointer-events: auto;
    background: var(--paper);
  }

  .shipping-details-modal .shipping-details-dialog {
    justify-self: start;
    align-self: start;
    width: var(--jzb-visual-viewport-width, 100vw);
    margin-top: var(--jzb-visual-viewport-top, 0px);
    margin-left: var(--jzb-visual-viewport-left, 0px);
    height: var(--jzb-shipping-modal-height, var(--jzb-visual-viewport-height, 100svh));
    max-height: var(--jzb-shipping-modal-height, var(--jzb-visual-viewport-height, 100svh));
    min-height: 0;
  }

  .shipping-details-dialog .shipping-details-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(116px + env(safe-area-inset-bottom));
  }

  .shipping-details-dialog .shipment-item-picker {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .shipping-details-dialog .shipment-fill-summary,
  .shipping-details-dialog .shipment-order-tabs,
  .shipping-details-dialog .shipment-order-items-head,
  .shipping-details-dialog .shipment-items-pager {
    flex: 0 0 auto;
  }

  .shipping-details-dialog .shipment-order-tabs {
    margin-top: 4px;
    padding: 6px 0 2px;
    border-top: 1px solid rgba(217, 225, 232, 0.72);
  }

  .shipping-details-dialog .shipment-fill-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 7px;
    font-size: 10px;
  }

  .shipping-details-dialog .shipment-fill-summary > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shipping-details-dialog .shipment-order-groups-scroll {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .shipping-details-dialog .shipment-order-items-group {
    min-height: 0;
  }

  .shipping-details-dialog .shipment-order-item-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: max-content;
    align-items: start;
    align-content: start;
    justify-content: stretch;
    gap: 8px;
    height: var(--jzb-mobile-shipping-wall-height, 214px) !important;
    min-height: var(--jzb-mobile-shipping-wall-height, 214px) !important;
    max-height: var(--jzb-mobile-shipping-wall-height, 214px) !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    padding-right: 4px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }

  .shipping-details-dialog .shipment-items-pager {
    gap: 8px;
    min-height: 36px;
    font-size: 11px;
  }

  .shipping-details-dialog .shipping-extra-details {
    grid-template-columns: minmax(92px, 0.36fr) minmax(0, 0.64fr);
    gap: 8px;
  }

  .shipping-details-dialog .shipping-extra-details label {
    font-size: 11px;
  }

  .shipping-details-dialog .shipping-extra-details input {
    height: 32px;
    padding: 5px 7px;
  }

  .shipping-details-dialog .shipment-order-item-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 5px;
    padding: 5px;
    align-self: start;
    box-sizing: border-box;
    height: max-content;
    min-height: max-content;
    overflow: hidden;
  }

  .shipping-details-dialog .shipment-birdview-thumb {
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
  }

  .shipping-details-dialog .shipment-birdview-ratio {
    height: 24px;
    min-height: 24px;
    column-gap: 1px;
    font-size: 10px;
    flex: 0 0 auto;
  }

  .shipping-details-dialog .shipment-birdview-ratio input {
    width: 42px;
    height: 24px;
    padding: 2px 3px;
    border-radius: 5px;
    font-size: 16px;
  }

  .quote-preview-shell {
    overflow: hidden;
  }

  .quote-preview-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-preview-frame-wrap {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .quote-preview-touch-layer {
    display: block;
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    width: var(--managed-print-preview-width, 980px);
    min-width: var(--managed-print-preview-width, 980px);
    height: 100%;
    min-height: 100%;
    touch-action: none;
    background: transparent;
  }

  .quote-preview-arrow {
    display: none;
  }

  .quote-preview-shell iframe {
    width: var(--managed-print-preview-width, 980px);
    min-width: var(--managed-print-preview-width, 980px);
  }

  .quote-preview-footer {
    position: relative;
    z-index: 2;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .quote-preview-actions,
  .managed-print-actions {
    flex-shrink: 0;
  }

  .managed-print-dialog header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .managed-print-dialog header strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .freight-quote-dialog,
  .quote-template-dialog,
  .other-quote-dialog {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .freight-quote-form,
  .other-quote-form {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .freight-quote-form {
    max-height: none;
    overflow-y: visible;
  }

  .other-quote-form {
    display: block;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .other-quote-head-grid,
  .other-quote-toolbar,
  .other-quote-rows,
  .other-quote-add-row,
  .other-quote-total,
  .other-quote-actions {
    margin-bottom: 12px;
  }

  .other-quote-rows {
    max-height: none;
    overflow: visible;
  }

  .freight-quote-grid,
  .freight-tracking-add,
  .freight-tracking-row,
  .other-quote-head-grid,
  .other-quote-row {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .freight-quote-actions,
  .other-quote-actions {
    grid-column: 1;
    grid-row: auto;
    position: static;
    width: 100%;
    min-width: 0;
  }

  .quote-editor-modal.active {
    inset: 0;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .inquiry-quote-template-modal {
    padding: 0;
  }

  .inquiry-quote-template-panel {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }

  .inquiry-quote-template-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .inquiry-quote-template-image {
    width: 56px;
    height: 56px;
  }

  .inquiry-quote-template-select {
    grid-column: 1 / -1;
  }

  .quote-editor-modal.active > .panel {
    border-radius: 0;
  }

  .quote-editor-modal.active > .panel:nth-of-type(2) {
    padding-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }

  .quote-editor-modal.active > .panel:nth-of-type(2) .full-action,
  .quote-editor-modal.active > .panel:nth-of-type(2) .tiny-button {
    width: 100%;
    max-width: 100%;
  }

  .client-payment-order-gauge {
    justify-items: start;
    padding-right: 0;
  }

  .dashboard-fold-panel:not(.payment-slips-panel) .dashboard-fold-body,
  .payment-slips-scroll-list {
    max-height: 300px;
  }

  .feedback-message-layout {
    grid-template-columns: 1fr;
  }

  .feedback-admin-message-room {
    grid-template-columns: 1fr;
    position: relative;
    overflow: hidden;
  }

  .feedback-contact-list-panel {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 7;
    width: min(84vw, 330px);
    max-height: none;
    transform: translateX(calc(-100% - 12px));
    transition: transform 0.22s ease;
    box-shadow: 12px 0 28px rgba(15, 23, 42, 0.18);
  }

  .feedback-contact-list-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .feedback-contact-head-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  .feedback-contact-head-stats span {
    justify-items: start;
  }

  .feedback-admin-message-room.contact-list-open .feedback-contact-list-panel {
    transform: translateX(0);
  }

  .feedback-contact-drawer-toggle {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 72px;
    min-width: 26px;
    min-height: 72px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 7px 7px 0;
    padding: 4px 2px;
    background: #eaf5f3;
    backdrop-filter: none;
    color: var(--teal);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    overflow: hidden;
    transform: translateY(-50%);
    box-shadow: 2px 0 8px rgba(15, 23, 42, 0.12);
  }

  .feedback-contact-drawer-toggle::before {
    display: none;
  }

  .feedback-contact-drawer-toggle span:first-child {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    transform: rotate(-90deg);
    transform-origin: center;
  }

  .feedback-contact-drawer-toggle .message-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }

  .feedback-admin-message-room.contact-list-open .feedback-contact-drawer-toggle {
    left: calc(min(84vw, 330px) - 1px);
  }

  .feedback-contact-drawer-backdrop {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: none;
    border: 0;
    background: rgba(15, 23, 42, 0.24);
  }

  .feedback-admin-message-room.contact-list-open .feedback-contact-drawer-backdrop {
    display: block;
  }

  .feedback-contact-list-close {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    padding: 0;
    background: #fff;
    color: var(--ink);
    font-weight: 900;
  }

  .feedback-contact-room-panel {
    min-height: 0;
    height: 100%;
  }

  .feedback-room-body {
    grid-template-columns: 1fr;
  }

  .feedback-room-conversation {
    min-height: 280px;
  }

  .feedback-room-header {
    align-items: stretch;
  }

  .feedback-room-header-main {
    grid-template-columns: 1fr;
  }

  .feedback-room-header-translation .feedback-translation-control {
    width: auto;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 64px;
  }

  .feedback-topic-drawer {
    max-height: min(42dvh, 360px);
  }

  .feedback-current-topic-bar {
    flex-wrap: wrap;
  }

  .feedback-current-topic-bar strong,
  .feedback-current-topic-bar .muted {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .feedback-chat-line {
    max-width: 94%;
  }

  .feedback-chat-composer {
    grid-template-columns: minmax(0, 1fr);
  }

  .feedback-chat-composer textarea {
    width: 100%;
  }

  .feedback-composer-tools {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
  }

  .feedback-chat-composer .feedback-compose-actions {
    width: auto;
    justify-content: flex-end;
  }

  .feedback-chat-composer:not(.has-message-payload) {
    grid-template-columns: minmax(0, 1fr);
  }

  .feedback-chat-composer:not(.has-message-payload) .feedback-compose-actions [data-feedback-clear-draft],
  .feedback-chat-composer:not(.has-message-payload) .feedback-compose-actions .feedback-send-button {
    display: none;
  }

  .feedback-call-panel {
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
  }

  .feedback-call-panel[data-feedback-call-layout-key^="video:"] {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
  }

  .feedback-call-panel[data-feedback-call-layout-key^="video:"] .feedback-call-card {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .feedback-call-panel.is-call-expanded .feedback-call-card header {
    max-width: calc(100vw - 78px);
    padding: 6px 8px;
  }

  .feedback-call-panel.is-call-expanded .feedback-call-local-wrap {
    width: min(42vw, 230px);
    min-width: 136px;
    min-height: 76px;
    left: max(8px, env(safe-area-inset-left));
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .feedback-call-video-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }

  .feedback-call-local-wrap {
    width: min(52vw, 260px);
    min-width: 128px;
    min-height: 92px;
  }

  .feedback-call-video-actions {
    grid-template-columns: repeat(2, 40px);
    grid-auto-rows: 40px;
    gap: 9px;
    min-width: 90px;
    justify-self: end;
  }

  .feedback-call-panel.is-call-expanded .feedback-call-video-actions {
    position: absolute;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 6px;
  }

  .feedback-call-video-actions .feedback-icon-button,
  .feedback-call-video-actions .feedback-call-quality-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .feedback-send-button {
    min-height: 40px;
    padding: 0 12px;
  }

  .feedback-message-manage-bar {
    justify-content: flex-start;
  }

  .feedback-message-manage-bar .select-line {
    margin-right: 0;
  }

  .feedback-thread-detail {
    display: none;
  }

  .feedback-thread-inline-detail {
    display: grid;
    padding: 0 0 4px;
  }

  .feedback-thread-inline-detail .bug-report-card {
    width: 100%;
    min-width: 0;
  }

  .feedback-message {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .feedback-message-main strong,
  .feedback-message-main small {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .feedback-message time,
  .feedback-message .tiny-button {
    grid-column: 3;
    justify-self: start;
  }

  .product-dynamic-fields {
    grid-template-columns: 1fr;
  }

  #products .section-bar,
  #products .product-bulk-bar {
    gap: 5px;
    margin-bottom: 8px;
  }

  #products .catalog-filter-bar {
    align-items: center;
  }

  #products .catalog-style-filter select,
  #products .segment,
  #products .secondary-action,
  #products .bulk-move-control,
  #products .product-bulk-upload .bulk-move-control input,
  #products .bulk-move-control select,
  #products .product-bulk-bar .quote-check {
    min-height: 26px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.1;
  }

  #products .catalog-style-filter select,
  #products .product-bulk-upload .bulk-move-control input,
  #products .bulk-move-control select {
    padding: 0 7px;
  }

  #products .segment,
  #products .secondary-action,
  #products .product-bulk-bar .quote-check {
    padding: 0 7px;
  }

  #products .product-bulk-bar {
    padding: 6px;
  }

  #products .bulk-move-control {
    gap: 4px;
  }

  #products .bulk-move-control span {
    display: none;
  }

  #products .product-bulk-upload {
    min-width: 100%;
    padding-left: 0;
    border-left: 0;
  }

  #products .product-bulk-upload .bulk-move-control input {
    min-width: 112px;
  }

  #products .product-grid {
    display: block;
    gap: 0;
    touch-action: pan-x pan-y;
  }

  #products .product-list-paged {
    width: 100%;
  }

  #products .product-list-page-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(116px, auto);
    gap: 7px;
    padding: 1px 1px 2px;
  }

  #products .product-list-row {
    grid-template-columns: minmax(0, 1fr) 68px;
    grid-template-areas:
      "image actions";
    align-items: stretch;
    gap: 6px;
    padding: 5px;
    min-height: 116px;
  }

  #products .product-list-row .product-image {
    grid-area: image;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
    align-self: stretch;
  }

  #products .product-list-main {
    grid-area: main;
    gap: 3px;
    min-width: 0;
  }

  #products .product-list-main h3 {
    font-size: 12px;
  }

  #products .product-list-main p {
    font-size: 11px;
  }

  #products .product-list-main h3,
  #products .product-list-main p,
  #products .product-meta-compact,
  #products .product-list-side strong,
  #products .product-list-side .status-cell {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #products .product-meta-lines {
    display: none;
  }

  #products .product-meta-compact {
    display: block;
  }

  #products .product-list-side {
    grid-area: side;
    justify-items: start;
    align-self: start;
    gap: 0;
    min-width: 0;
    font-size: 11px;
  }

  #products .product-list-main,
  #products .product-list-side {
    display: none;
  }

  #products .product-list-row .product-actions {
    grid-area: actions;
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 4px;
    width: 68px;
    margin-top: 0;
  }

  #products .product-list-row .product-actions .tiny-button,
  #products .product-list-row .product-actions .quote-check {
    width: 100%;
    min-height: 26px;
    height: 26px;
    padding: 0 4px;
    justify-content: center;
    font-size: 9.5px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #products .product-list-row .product-actions .quote-check {
    gap: 4px;
  }

  #products .product-list-row .product-actions .quote-check input {
    width: 11px;
    height: 11px;
  }

  #products .product-list-pagination {
    gap: 6px;
    padding-top: 0;
    font-size: 11px;
  }

  #products .product-list-pagination .tiny-button {
    min-width: 30px;
    min-height: 26px;
    height: 26px;
    padding: 0 6px;
  }

  .product-list-side,
  .product-list-row .product-actions {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .quote-item {
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
  }

  .quote-line-title-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .quote-line-context-controls {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .quote-pricing-mode-control {
    flex: 1 1 190px;
  }

  .quote-pricing-mode-control select {
    min-width: 0;
    flex: 1 1 auto;
  }

  .quote-request-trigger {
    min-height: 34px;
    padding: 6px 4px;
  }

  .quote-thumb {
    width: 76px;
    height: 76px;
    min-height: 76px;
  }

  .quote-item > div:last-child {
    grid-column: 1 / -1;
  }

  .quote-manual-item {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .quote-manual-primary-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-manual-item > :not(.quote-manual-image-cell) {
    grid-column: 1 / -1;
  }

  .quote-field-grid {
    grid-template-columns: 1fr;
  }

  .quote-gold-inputs {
    grid-template-columns: 72px minmax(0, 1fr) 58px 44px;
  }

  .quote-gold-inputs .quote-unit-cell {
    grid-column: auto;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.15;
  }

  .quote-summary-controls {
    grid-template-columns: 1fr;
  }

  .quote-total-gold-control {
    grid-template-columns: minmax(0, 1fr) 52px;
  }

  .quote-gold-lost-label,
  #quoteGoldLostInput,
  #quoteGoldLostInput + .quote-unit-cell,
  #quoteDiamondProcessingInput,
  #quoteDiamondProcessingInput + .quote-unit-cell {
    grid-column: auto;
  }

  .custom-draft-modal {
    padding: 10px;
  }

  .custom-image-draft {
    grid-template-columns: 1fr;
  }

  .custom-image-draft img {
    width: 100%;
    height: auto;
    max-height: 220px;
  }

  .custom-cart-edit {
    grid-template-columns: 1fr;
  }

}


.website-value-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.website-value-card h2,
.website-footer-panel h2 {
  margin: 4px 0 8px;
  font-size: 22px;
}

.website-live-showroom-panel[hidden],
.website-value-grid[hidden],
.website-custom-blocks[hidden],
.website-products-panel[hidden],
.website-try-on-panel[hidden],
.website-inquiry-layout[hidden],
.website-footer-panel[hidden] {
  display: none !important;
}

.website-section-switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  align-items: center;
}

.product-detail-video {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  padding: 12px;
  background: #f8fbfa;
}

.product-detail-video h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.product-detail-video video,
.product-detail-video iframe {
  width: 100%;
  min-height: 260px;
  border: 0;
  background: #0f172a;
}

.product-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.product-detail-info-grid article {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbfa;
}

.product-detail-info-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.website-footer-panel {
  text-align: center;
}

.website-nav-bar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
}

.website-nav-bar[hidden] {
  display: none !important;
}

.website-footer-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 14px;
  text-align: left;
}

.website-footer-details[hidden] {
  display: none !important;
}

.website-footer-details span {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f8fbfa;
}

.website-footer-details em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.website-footer-details strong {
  color: var(--ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.website-custom-blocks {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.website-custom-block {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: center;
}

.website-custom-block:has(.website-custom-block-copy:first-child),
.website-custom-block:not(:has(.website-custom-block-image)) {
  grid-template-columns: 1fr;
}

.website-custom-block-text-only,
.website-custom-block-full-image {
  grid-template-columns: 1fr;
}

.website-custom-block-full-image .website-custom-block-image {
  min-height: 320px;
}

.website-custom-block-image {
  min-height: 220px;
  border-radius: 8px;
  overflow: hidden;
}

.website-custom-block-copy h2 {
  margin: 4px 0 10px;
  font-size: 26px;
}

.website-custom-block-copy .tiny-button {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .website-value-grid,
  .website-section-switches {
    grid-template-columns: 1fr;
  }
}


.website-brand-with-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.website-brand-with-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}


.website-style-manager,
.website-nav-manager,
.website-layout-manager,
.website-custom-block-manager,
.website-detail-info-manager {
  border: 1px solid var(--border);
  padding: 12px;
  background: #ffffff;
}

.website-style-row {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.website-custom-block-row {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.website-detail-info-row {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.website-nav-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(130px, 0.8fr) auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.website-custom-block-preview {
  border: 1px dashed var(--border);
  background: #f8fbfa;
  padding: 10px;
}

.website-custom-block-preview .website-custom-block {
  margin: 0;
  box-shadow: none;
}

.website-custom-block-preview .website-custom-block-image {
  min-height: 120px;
}

.website-custom-block-preview .website-custom-block-copy h2 {
  font-size: 18px;
}

.website-style-row-main {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(220px, 1.6fr) auto;
  gap: 10px;
  align-items: end;
}

.website-custom-block-main {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(220px, 1.4fr) minmax(130px, 0.7fr);
  gap: 10px;
  align-items: end;
}

.website-detail-info-main {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.website-style-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.website-style-type,
.website-style-enabled {
  min-height: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.website-style-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.website-layout-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.website-layout-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .website-style-row-main {
    grid-template-columns: 1fr;
  }

  .website-custom-block,
  .website-custom-block-main,
  .website-detail-info-main,
  .website-nav-row,
  .website-footer-details,
  .product-detail-info-grid {
    grid-template-columns: 1fr;
  }

  .website-style-actions {
    justify-content: flex-start;
  }

  .website-layout-row {
    grid-template-columns: 1fr;
  }

.website-layout-actions {
    justify-content: flex-start;
  }
}

.product-image > img,
.quote-thumb.product-image > img,
.quote-picker-image.product-image > img,
.portal-inquiry-image.product-image > img,
.portal-inquiry-wall-image.product-image > img,
.cart-thumb.product-image > img,
.inquiry-detail-image.product-image > img,
.other-quote-image > img,
#customImagePreview > img,
.custom-image-draft > img,
.custom-image-grid > img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
}

.product-image,
.quote-thumb.product-image,
.quote-picker-image.product-image,
.portal-inquiry-image.product-image,
.portal-inquiry-wall-image.product-image,
.cart-thumb.product-image,
.inquiry-detail-image.product-image,
.other-quote-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.product-image img,
.quote-thumb.product-image img,
.quote-picker-image.product-image img,
.portal-inquiry-image.product-image img,
.portal-inquiry-wall-image.product-image img,
.cart-thumb.product-image img,
.inquiry-detail-image.product-image img,
.other-quote-image img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.shipping-details-modal .shipment-birdview-thumb.product-image {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  align-self: start;
}

.shipping-details-modal .shipment-birdview-thumb.product-image > img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 720px) {
  .dashboard-module-modal {
    padding: 0;
    place-items: stretch;
  }

  .dashboard-module-dialog {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .dashboard-module-list {
    padding: 10px;
  }

  .dashboard-module-pager {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .customer-status-grid {
    grid-template-columns: 1fr;
    align-items: start;
    overflow: visible;
  }

  .dashboard-fold-panel,
  .mobile-collapsible-panel,
  .customer-pending-events-panel,
  .pending-customer-group {
    overflow: visible;
  }

  .dashboard-fold-panel:not(.payment-slips-panel) .dashboard-fold-body,
  .mobile-collapsible-panel .dashboard-fold-body,
  .customer-pending-events-panel .dashboard-fold-body {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 12px;
  }

  .mobile-scroll-safe,
  .panel .workbench-list,
  .mobile-collapsible-panel .workbench-list,
  .pending-customer-event-list,
  .customer-pending-events-list,
  .portal-inquiry-history-list,
  .quote-records,
  .feedback-thread-list,
  .cart-list,
  .client-order-list,
  .client-logistics-list,
  .payment-history-list,
  .production-order-list,
  .production-item-list,
  .logistics-scroll-list,
  .document-records,
  .shipping-history,
  .payment-slips-scroll-list {
    box-sizing: border-box;
    max-height: min(50dvh, 430px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(42px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  .pending-events-list {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .production-progress-mobile-drawer {
    margin: 0 0 12px;
    padding: 10px;
    max-width: 100%;
    overflow-x: hidden;
  }

  .production-mobile-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .production-mobile-order-list {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 0 2px !important;
    scroll-padding: 0 !important;
  }

  .production-mobile-list-panel {
    display: grid;
    gap: 10px;
  }

  .production-mobile-history-layout {
    min-height: calc(100dvh - 142px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .production-mobile-history-panel {
    min-height: calc(100dvh - 142px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    align-content: start;
  }

  .production-mobile-history-list {
    min-height: min(62dvh, 620px);
  }

  .production-mobile-history-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .production-mobile-history-entry {
    padding: 12px;
  }

  .production-mobile-pager {
    position: sticky;
    bottom: calc(4px + env(safe-area-inset-bottom));
    z-index: 5;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  }

  .pending-event-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "type action"
      "main main"
      "date status";
    align-items: start;
    min-height: 0;
    padding: 10px;
  }

  .pending-event-type {
    grid-area: type;
    display: block;
    width: auto;
    min-width: 0;
    white-space: nowrap;
  }

  .pending-event-main {
    grid-area: main;
    min-width: 0;
  }

  .pending-event-main strong {
    display: block;
    margin-bottom: 4px;
  }

  .pending-event-card time {
    grid-area: date;
    min-width: 0;
    align-self: center;
    white-space: normal;
  }

  .pending-event-card > .status-cell {
    grid-area: status;
    justify-self: end;
    align-self: center;
    white-space: nowrap;
  }

  .pending-event-card .tiny-button {
    grid-area: action;
    justify-self: end;
    align-self: start;
  }

  .dashboard-flow-actions {
    position: sticky;
    top: 0;
    z-index: 4;
    margin-bottom: 8px;
    background: var(--paper);
  }

  .managed-print-dialog header {
    position: sticky;
    top: 0;
    z-index: 3;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .managed-print-dialog header .managed-print-actions {
    display: none;
  }

  .managed-print-mobile-close {
    position: fixed;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 9005;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--teal);
    font: 600 15px/1 Arial, Helvetica, sans-serif;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
  }

  .managed-print-floating-actions {
    position: fixed;
    right: calc(116px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 9002;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
  }

  .managed-print-floating-actions .secondary-action {
    min-width: 82px;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--teal);
    font-size: 15px;
    line-height: 1;
  }

  .managed-print-frame-wrap {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  .report-period-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start;
  }

  .report-period-field,
  .report-customer-field {
    grid-column: 1 / -1;
  }

  .report-date-field {
    min-width: 0;
  }

  .report-date-field input {
    width: 100%;
    min-width: 0;
  }

  .report-date-field small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .operations-panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .operations-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-protection-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-protection-overview .system-protection-metric:last-child {
    grid-column: 1 / -1;
  }

  .system-protection-run-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .system-protection-boundary-badge {
    text-align: left;
  }

  .system-protection-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .system-protection-policy-grid {
    grid-template-columns: 1fr;
  }

  .system-protection-matrix-wrap {
    max-height: min(52dvh, 430px);
    -webkit-overflow-scrolling: touch;
  }

  .system-protection-matrix th:first-child {
    width: 168px;
    max-width: 168px;
  }

  .system-protection-run-record {
    grid-template-columns: minmax(0, 1fr);
  }

  .system-protection-run-record > div:last-of-type {
    text-align: left;
  }

  .operations-form-grid {
    grid-template-columns: 1fr;
  }

  .operations-space-head,
  .operations-space-meta,
  .operations-request-status-grid {
    grid-template-columns: 1fr;
  }

  .operations-space-grid {
    grid-template-columns: 1fr;
  }

  .operations-wind-risk-grid,
  .operations-wind-manual-grid,
  .operations-wind-pool-grid,
  .operations-dynamic-honeypot-lists,
  .operations-dynamic-honeypot-hit,
  .operations-wind-recommendation,
  .operations-wind-event {
    grid-template-columns: 1fr;
  }

  .operations-wind-event-meta {
    justify-items: start;
  }

  .operations-cleanup-grid {
    grid-template-columns: 1fr;
  }

  .operations-request-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .operations-command-card .panel-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .operations-report-card summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (hover: none) and (pointer: coarse), (display-mode: standalone) {
  .managed-print-dialog header .managed-print-actions {
    display: none;
  }

  .managed-print-mobile-close {
    position: fixed;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 9005;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--teal);
    font: 600 15px/1 Arial, Helvetica, sans-serif;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
  }

  .managed-print-floating-actions {
    position: fixed;
    right: calc(116px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 9002;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
  }

  .managed-print-floating-actions .secondary-action {
    min-width: 82px;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--teal);
    font-size: 15px;
    line-height: 1;
  }

  .managed-print-frame-wrap {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse), (display-mode: standalone) {
  .production-birdview-embedded-grid {
    display: block;
    max-height: none;
    padding: 6px 0 0;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .production-birdview-track.production-birdview-embedded-grid {
    display: flex;
  }

  .production-birdview-track.production-birdview-embedded-grid[data-snap-axis="y"] {
    display: block;
  }

  .production-birdview-paged {
    padding: 0;
  }

  .production-birdview-viewport[data-snap-axis="y"] {
    height: 348px;
    min-height: 336px;
  }

  .production-birdview-page-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 106px;
    gap: 6px;
  }

  .production-birdview-track .production-birdview-page-panel {
    min-height: 336px;
    padding: 6px 0 0;
  }

  .production-birdview-track[data-snap-axis="y"] .production-birdview-page-panel {
    min-height: 348px;
  }

  .production-birdview-page-status {
    grid-template-columns: auto;
    justify-items: end;
    gap: 3px;
  }

  .production-birdview-page-status .pill {
    grid-row: auto;
  }

  .production-birdview-card-embedded {
    padding: 4px;
    border-radius: 6px;
  }

  .production-birdview-card-embedded .production-birdview-image {
    min-height: 0;
  }

  .production-birdview-card-embedded .production-birdview-ratio-row {
    height: 22px;
    margin-top: 4px;
  }

  .production-birdview-card-embedded .production-birdview-ratio-row strong {
    font-size: 11px;
    line-height: 1.1;
  }

  .production-birdview-card-embedded .production-birdview-reload {
    right: 2px;
    bottom: 2px;
    padding: 1px 3px;
    font-size: 8px;
  }

  :is(
    .payment-slip-modal,
    .quote-preview-modal,
    .quote-records-modal,
    .document-records-modal,
    .shipping-details-modal,
    .inquiry-detail-modal,
    .logistics-customer-modal,
    .production-birdview-modal,
    .quote-checklist-modal,
    .freight-quote-modal,
    .quote-template-modal,
    .other-quote-modal,
    .custom-draft-modal,
    .production-mobile-history-layout,
    .portal-product-detail-modal,
    .website-register-modal:not([hidden]),
    .password-modal:not([hidden]),
    .quote-editor-modal.active,
    #quoteProductPicker.modal-open,
    #documentProductPicker.modal-open,
    #otherQuoteProductPicker,
    #portalProductPicker.modal-open,
    .backup-panel:not([hidden]),
    .operations-panel:not([hidden])
  ) :is(
    [data-close-payment-slip],
    [data-close-quote-preview],
    [data-close-document-records],
    [data-close-shipping-details],
    [data-close-inquiry-detail],
    [data-close-logistics-customer],
    [data-close-production-birdview],
    [data-close-quote-template],
    [data-close-freight-quote],
    [data-close-other-quote],
    [data-close-custom-drafts],
    [data-close-portal-product-detail],
    [data-document-product-close],
    #closeQuotePickerBtn,
    #closePortalProductPickerBtn,
    #closeKaratQuoteEditorBtn,
    #bugClose,
    #backupClose,
    #operationsClose,
    #websiteRegisterCloseBtn,
    #closePasswordModalBtn
  ) {
    display: none !important;
  }

  :is(
    .payment-slip-modal,
    .quote-preview-modal,
    .quote-records-modal,
    .document-records-modal,
    .shipping-details-modal,
    .inquiry-detail-modal,
    .logistics-customer-modal,
    .production-birdview-modal,
    .quote-checklist-modal,
    .freight-quote-modal,
    .quote-template-modal,
    .other-quote-modal,
    .custom-draft-modal,
    .production-mobile-history-layout,
    .portal-product-detail-modal,
    .website-register-modal:not([hidden]),
    .password-modal:not([hidden]),
    .quote-editor-modal.active,
    #quoteProductPicker.modal-open,
    #documentProductPicker.modal-open,
    #otherQuoteProductPicker,
    #portalProductPicker.modal-open,
    .backup-panel:not([hidden]),
    .operations-panel:not([hidden])
  ) > .mobile-modal-floating-close {
    position: fixed;
    right: calc(12px + env(safe-area-inset-right));
    bottom: var(--mobile-floating-close-bottom, calc(14px + env(safe-area-inset-bottom)));
    z-index: 10020;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--teal);
    font: 600 15px/1 Arial, Helvetica, sans-serif;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
    touch-action: none;
    user-select: none;
    cursor: grab;
    transition: bottom 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }

  .quote-records-modal > .mobile-modal-floating-close,
  .production-mobile-history-layout > .mobile-modal-floating-close {
    bottom: var(--mobile-floating-close-bottom, calc(74px + env(safe-area-inset-bottom)));
  }

  :is(
    .payment-slip-modal,
    .quote-preview-modal,
    .quote-records-modal,
    .document-records-modal,
    .shipping-details-modal,
    .inquiry-detail-modal,
    .logistics-customer-modal,
    .production-birdview-modal,
    .quote-checklist-modal,
    .freight-quote-modal,
    .quote-template-modal,
    .other-quote-modal,
    .custom-draft-modal,
    .production-mobile-history-layout,
    .portal-product-detail-modal,
    .website-register-modal:not([hidden]),
    .password-modal:not([hidden]),
    .quote-editor-modal.active,
    #quoteProductPicker.modal-open,
    #documentProductPicker.modal-open,
    #otherQuoteProductPicker,
    #portalProductPicker.modal-open,
    .backup-panel:not([hidden]),
    .operations-panel:not([hidden])
  ) > .mobile-modal-floating-close.is-dragging {
    cursor: grabbing;
    transform: scale(1.02);
    transition: none;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.24);
  }

  :is(
    .payment-slip-modal,
    .quote-preview-modal,
    .document-records-modal,
    .shipping-details-modal,
    .inquiry-detail-modal,
    .logistics-customer-modal,
    .production-birdview-modal,
    .quote-checklist-modal,
    .freight-quote-modal,
    .quote-template-modal,
    .other-quote-modal,
    .custom-draft-modal,
    .production-mobile-history-layout,
    .portal-product-detail-modal,
    .website-register-modal:not([hidden]),
    .password-modal:not([hidden]),
    .quote-editor-modal.active,
    #quoteProductPicker.modal-open,
    #documentProductPicker.modal-open,
    #otherQuoteProductPicker,
    #portalProductPicker.modal-open,
    .backup-panel:not([hidden]),
    .operations-panel:not([hidden])
  ) {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }
}

/* Keep native paged gestures available after mobile overrides. */
.shipment-page-viewport,
.shipment-page-viewport *,
.shipping-details-dialog .shipment-page-viewport,
.shipping-details-dialog .shipment-page-viewport *,
.shipping-details-dialog .shipment-order-item-list {
  touch-action: pan-x pan-y !important;
}

.shipping-details-dialog .shipment-page-viewport {
  overflow-x: hidden;
  overflow-y: auto !important;
}

.shipping-details-dialog .shipment-page-track,
.shipping-details-dialog .shipment-page-panel {
  contain: layout;
  overflow: visible;
}

.production-birdview-paged,
.production-birdview-viewport,
.production-birdview-viewport *,
.production-birdview-track,
.production-birdview-page-panel,
.production-birdview-card {
  touch-action: pan-x pan-y !important;
}

.product-picker-viewport,
.product-picker-viewport * {
  touch-action: pan-y !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .product-pager-arrow-horizontal {
    display: none;
  }

  .product-pager-arrow-vertical {
    display: inline-block;
  }

  .product-picker-viewport,
  .product-picker-viewport *,
  #products .product-list-viewport,
  #products .product-list-viewport * {
    touch-action: pan-x !important;
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse), (display-mode: standalone) {
  #quoteProductPicker.modal-open,
  #documentProductPicker.modal-open,
  #otherQuoteProductPicker.modal-open,
  #portalProductPicker.modal-open {
    position: fixed;
    top: var(--jzb-visual-viewport-top, 0px);
    right: auto;
    bottom: auto;
    left: var(--jzb-visual-viewport-left, 0px);
    z-index: 9300;
    display: flex;
    flex-direction: column;
    width: var(--jzb-visual-viewport-width, 100vw);
    height: var(--jzb-visual-viewport-height, 100dvh);
    min-height: 0;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: calc(6px + env(safe-area-inset-top)) 8px calc(6px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  #quoteProductPicker.modal-open > .mobile-modal-floating-close,
  #documentProductPicker.modal-open > .mobile-modal-floating-close,
  #otherQuoteProductPicker.modal-open > .mobile-modal-floating-close,
  #portalProductPicker.modal-open > .mobile-modal-floating-close {
    display: none !important;
  }

  #quoteProductPicker.modal-open #closeQuotePickerBtn,
  #documentProductPicker.modal-open #closeDocumentProductPickerBtn,
  #otherQuoteProductPicker.modal-open [data-close-other-product-picker],
  #portalProductPicker.modal-open #closePortalProductPickerBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
    flex: 0 0 auto;
  }

  #quoteProductPicker.modal-open .quote-product-filters,
  #documentProductPicker.modal-open .quote-product-filters,
  #otherQuoteProductPicker.modal-open .quote-product-filters,
  #portalProductPicker.modal-open .portal-product-filters {
    max-height: 22dvh;
    margin-top: 6px;
  }

  #quoteProductPicker.modal-open .quote-product-grid,
  #documentProductPicker.modal-open .quote-product-grid,
  #otherQuoteProductPicker.modal-open .quote-product-grid,
  #portalProductPicker.modal-open .portal-product-grid {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    padding: 0;
    touch-action: auto !important;
  }

  #quoteProductPicker.modal-open .product-picker-paged,
  #documentProductPicker.modal-open .product-picker-paged,
  #otherQuoteProductPicker.modal-open .product-picker-paged,
  #portalProductPicker.modal-open .product-picker-paged {
    grid-template-rows: minmax(0, 1fr) 36px;
    gap: 4px;
    min-height: 0;
  }

  #quoteProductPicker.modal-open .product-picker-page-grid,
  #documentProductPicker.modal-open .product-picker-page-grid,
  #otherQuoteProductPicker.modal-open .product-picker-page-grid,
  #portalProductPicker.modal-open .product-picker-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(164px, 1fr));
    gap: 6px;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    align-content: stretch;
  }

  #quoteProductPicker.modal-open .quote-picker-image-card,
  #documentProductPicker.modal-open .quote-picker-image-card,
  #otherQuoteProductPicker.modal-open .quote-picker-image-card,
  #portalProductPicker.modal-open .portal-inquiry-image-card {
    height: 100%;
    min-height: 164px;
    grid-template-rows: minmax(96px, 1fr) auto;
    gap: 4px;
    padding: 5px;
  }

  #quoteProductPicker.modal-open .quote-picker-image,
  #documentProductPicker.modal-open .quote-picker-image,
  #otherQuoteProductPicker.modal-open .quote-picker-image,
  #portalProductPicker.modal-open .portal-inquiry-image {
    width: 100%;
    height: 100%;
    min-height: 96px;
  }

  #quoteProductPicker.modal-open .product-picker-pagination,
  #documentProductPicker.modal-open .product-picker-pagination,
  #otherQuoteProductPicker.modal-open .product-picker-pagination,
  #portalProductPicker.modal-open .product-picker-pagination {
    min-height: 36px;
    height: 36px;
    padding: 0;
  }
}