:root {
  color-scheme: dark;
  --ui-font-display: "Bahnschrift", "DIN Alternate", "Segoe UI", sans-serif;
  --ui-font-body: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --ui-bg-canvas: #eef3f7;
  --ui-bg-panel: rgba(255, 255, 255, 0.92);
  --ui-bg-panel-solid: #ffffff;
  --ui-bg-subtle: #f6f8fb;
  --ui-ink: #15202b;
  --ui-ink-soft: #4f6275;
  --ui-ink-muted: #7b8da0;
  --ui-line: rgba(58, 82, 105, 0.14);
  --ui-line-strong: rgba(58, 82, 105, 0.24);
  --ui-steel: #2563eb;
  --ui-steel-soft: #dbeafe;
  --ui-cyan: #0ea5e9;
  --ui-green: #16a34a;
  --ui-amber: #d97706;
  --ui-orange: #ea580c;
  --ui-red: #dc2626;
  --ui-gray: #64748b;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 18px;
  --ui-radius-xl: 24px;
  --ui-shadow-card: 0 16px 42px rgba(15, 23, 42, 0.08);
  --ui-shadow-float: 0 28px 80px rgba(15, 23, 42, 0.18);
  --ui-focus: 0 0 0 3px rgba(37, 99, 235, 0.18);
  --ui-transition-fast: 140ms ease;
  --ui-transition-normal: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ui-sidebar-width: 220px;
  --ui-sidebar-collapsed-width: 76px;
  --ui-z-global-select: 3100;
  --ui-z-tooltip: 3200;
  --table-action-column-width: 300px;
  --bg: #09111b;
  --bg-deep: #050a11;
  --panel: rgba(14, 27, 42, 0.82);
  --panel-strong: rgba(16, 34, 53, 0.92);
  --line: rgba(109, 152, 189, 0.22);
  --text: #e5eef7;
  --muted: #89a1b8;
  --steel: #4fb4ff;
  --copper: #f29d52;
  --warning: #ffd166;
  --danger: #ff6f61;
  --success: #45d6a8;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  --font-ui: "Bahnschrift", "DIN Alternate", "Segoe UI", sans-serif;
}

body {
  font-family: var(--ui-font-body);
  color: var(--ui-ink);
  background:
    radial-gradient(circle at 16% 8%, rgba(37, 99, 235, 0.12), transparent 28%),
    linear-gradient(135deg, #eef3f7 0%, #f8fafc 48%, #e8eef5 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus);
}

/* ERP visual upgrade action and helper system */
.app-icon-primary {
  color: var(--ui-steel);
}

.action-button,
.primary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    transform var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast),
    background var(--ui-transition-fast),
    border-color var(--ui-transition-fast),
    color var(--ui-transition-fast);
}

.action-button:hover:not(:disabled),
.primary-button:hover:not(:disabled),
.ghost-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.action-button:active:not(:disabled),
.primary-button:active:not(:disabled),
.ghost-button:active:not(:disabled) {
  transform: translateY(0);
}

.action-button:disabled,
.primary-button:disabled,
.ghost-button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
  transform: none;
  box-shadow: none;
}

.action-button-primary,
.primary-button {
  color: #ffffff;
  background: linear-gradient(135deg, var(--ui-steel), var(--ui-cyan));
  border-color: rgba(37, 99, 235, 0.18);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22);
}

.action-button-secondary,
.action-button-ghost,
.ghost-button {
  color: var(--ui-ink-soft);
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--ui-line);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.action-button-success {
  color: #ffffff;
  background: linear-gradient(135deg, #15803d, var(--ui-green));
  border-color: rgba(22, 163, 74, 0.2);
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.18);
}

.action-button-warning {
  color: #78350f;
  background: linear-gradient(135deg, #fef3c7, #fdba74);
  border-color: rgba(217, 119, 6, 0.2);
  box-shadow: 0 12px 28px rgba(217, 119, 6, 0.16);
}

.action-button-danger,
.danger-ghost {
  color: var(--ui-red);
  background: rgba(254, 242, 242, 0.95);
  border-color: rgba(220, 38, 38, 0.22);
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.08);
}

.action-button-sm {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.action-button-md {
  padding: 0 14px;
  font-size: 13px;
}

.action-button-lg {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

.action-button-icon-only {
  width: 38px;
  min-width: 38px;
  padding: 0;
}

.action-button-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-button-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: action-button-spin 760ms linear infinite;
}

@keyframes action-button-spin {
  to {
    transform: rotate(360deg);
  }
}

.icon-button .app-icon {
  width: 17px;
  height: 17px;
  font-size: 17px;
}

.workflow-drawer-head .icon-button {
  flex: 0 0 auto;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}

.form-drawer-description {
  max-width: min(680px, 72vw);
  margin: 6px 0 0;
  color: var(--ui-ink-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.field-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  color: var(--ui-ink-muted);
  cursor: help;
  vertical-align: middle;
}

.field-hint .app-icon {
  width: 16px;
  height: 16px;
}

.field-hint-popover {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--ui-z-tooltip);
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  transform: translateY(4px);
  opacity: 0;
  pointer-events: none;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.94);
  box-shadow: var(--ui-shadow-float);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
  transition: opacity var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.field-hint-popover::after {
  content: "";
  position: absolute;
  left: var(--field-hint-arrow-left, 50%);
  top: 100%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -4px) rotate(45deg);
  background: rgba(15, 23, 42, 0.94);
}

.field-hint-popover-bottom::after {
  top: auto;
  bottom: 100%;
  transform: translate(-50%, 4px) rotate(45deg);
}

.field-hint-popover-open {
  opacity: 1;
  transform: translateY(0);
}

/* ERP visual upgrade shell and icon system */
.app-icon {
  display: block;
  width: 1em;
  height: 1em;
  color: currentColor;
  fill: none;
  flex: 0 0 auto;
}

.app-icon-default {
  color: currentColor;
}

.app-icon-muted {
  color: var(--ui-ink-muted);
}

.app-icon-accent {
  color: var(--ui-steel);
}

.app-icon-warning {
  color: var(--ui-amber);
}

.app-icon-danger {
  color: var(--ui-red);
}

.app-icon-success {
  color: var(--ui-green);
}

.shell.admin-shell.app-shell {
  grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr);
  background:
    radial-gradient(circle at 8% 0%, rgba(14, 165, 233, 0.1), transparent 32%),
    linear-gradient(135deg, #eef3f7 0%, #f7fafc 46%, #e8eef5 100%);
}

.shell.admin-shell.app-shell-collapsed,
.shell.admin-shell.app-shell.sidebar-collapsed {
  grid-template-columns: var(--ui-sidebar-collapsed-width) minmax(0, 1fr);
}

.admin-shell.app-shell .sidebar {
  background:
    linear-gradient(180deg, #243447 0%, #1e2b3b 52%, #162331 100%);
  color: #c8d5e4;
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.05),
    14px 0 34px rgba(15, 23, 42, 0.16);
}

.admin-shell.app-shell .brand {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.06));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.admin-shell.app-shell .nav-stage-list {
  padding: 12px 8px;
}

.admin-shell.app-shell .nav-stage {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  min-height: 54px;
  padding: 0 14px;
  border-radius: 14px;
  color: #c8d5e4;
  transition:
    background var(--ui-transition-fast),
    color var(--ui-transition-fast),
    transform var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast);
}

.admin-shell.app-shell .nav-stage-has-children {
  grid-template-columns: 30px minmax(0, 1fr) 18px;
}

.admin-shell.app-shell .nav-stage-step,
.admin-shell.app-shell .nav-subitem-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.admin-shell.app-shell .nav-stage-step .app-icon,
.admin-shell.app-shell .nav-subitem-icon .app-icon {
  width: 22px;
  height: 22px;
}

.admin-shell.app-shell .nav-stage:hover {
  transform: translateX(2px);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: inset 3px 0 0 rgba(14, 165, 233, 0.54);
}

.admin-shell.app-shell .router-link-active.nav-stage,
.admin-shell.app-shell .nav-stage-active {
  transform: none;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(14, 165, 233, 0.16));
  color: #ffffff;
  box-shadow:
    inset 3px 0 0 #4fb4ff,
    0 12px 28px rgba(15, 23, 42, 0.18);
}

.admin-shell.app-shell .nav-stage-active .nav-stage-step,
.admin-shell.app-shell .router-link-active.nav-stage .nav-stage-step,
.admin-shell.app-shell .nav-subitem-active .nav-subitem-icon,
.admin-shell.app-shell .router-link-active.nav-subitem .nav-subitem-icon {
  background: rgba(79, 180, 255, 0.18);
  color: #ffffff;
}

.admin-shell.app-shell .nav-stage-body {
  min-width: 0;
}

.admin-shell.app-shell .nav-stage-body strong {
  color: inherit;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.admin-shell.app-shell .nav-stage-body p {
  display: none;
}

.admin-shell.app-shell .nav-stage-chevron {
  color: rgba(200, 213, 228, 0.82);
}

.admin-shell.app-shell .nav-submenu {
  margin: 4px 0 8px;
  padding: 6px 0 6px 12px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-shell.app-shell .nav-subitem {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  min-height: 44px;
  margin: 2px 6px;
  padding: 0 10px 0 18px;
  border-radius: 12px;
  color: #b9c7d7;
  font-size: 14px;
  transition:
    background var(--ui-transition-fast),
    color var(--ui-transition-fast),
    transform var(--ui-transition-fast);
}

.admin-shell.app-shell .nav-subitem:hover,
.admin-shell.app-shell .nav-subitem-active,
.admin-shell.app-shell .router-link-active.nav-subitem {
  transform: translateX(2px);
  background: rgba(79, 180, 255, 0.12);
  color: #ffffff;
}

.admin-shell.app-shell .nav-subitem-active::before,
.admin-shell.app-shell .router-link-active.nav-subitem::before {
  inset: 12px auto 12px 6px;
  width: 3px;
  background: #4fb4ff;
}

.admin-shell.app-shell .main-panel {
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 2%, rgba(37, 99, 235, 0.09), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #eef3f7 100%);
}

.admin-shell.app-shell .topbar,
.admin-shell.app-shell .tags-view-container,
.admin-shell.app-shell .app-main {
  min-width: 0;
}

.admin-shell.app-shell-collapsed .brand,
.admin-shell.app-shell.sidebar-collapsed .brand {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

.admin-shell.app-shell-collapsed .brand h1,
.admin-shell.app-shell-collapsed .nav-stage-body,
.admin-shell.app-shell.sidebar-collapsed .brand h1,
.admin-shell.app-shell.sidebar-collapsed .nav-stage-body {
  display: none;
}

.admin-shell.app-shell-collapsed .nav-stage,
.admin-shell.app-shell.sidebar-collapsed .nav-stage {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

.admin-shell.app-shell-collapsed .nav-stage-has-children,
.admin-shell.app-shell.sidebar-collapsed .nav-stage-has-children {
  grid-template-columns: 1fr;
}

.admin-shell.app-shell-collapsed .nav-stage-chevron,
.admin-shell.app-shell-collapsed .nav-submenu,
.admin-shell.app-shell.sidebar-collapsed .nav-stage-chevron,
.admin-shell.app-shell.sidebar-collapsed .nav-submenu {
  display: none;
}

@media (max-width: 1024px) {
  .shell.admin-shell.app-shell {
    grid-template-columns: var(--ui-sidebar-collapsed-width) minmax(0, 1fr);
  }

  .admin-shell.app-shell .sidebar {
    width: var(--ui-sidebar-collapsed-width);
  }

  .admin-shell.app-shell .brand {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  .admin-shell.app-shell .brand h1,
  .admin-shell.app-shell .nav-stage-body {
    display: none;
  }

  .admin-shell.app-shell .nav-stage,
  .admin-shell.app-shell .nav-stage-has-children {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  .admin-shell.app-shell .nav-stage-chevron,
  .admin-shell.app-shell .nav-submenu {
    display: none;
  }

  .admin-shell.app-shell .main-panel {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .shell.admin-shell.app-shell {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .admin-shell.app-shell .sidebar {
    width: 64px;
  }

  .admin-shell.app-shell .nav-stage-list {
    padding: 8px 5px;
  }

  .admin-shell.app-shell .nav-stage-step {
    width: 32px;
    height: 32px;
  }

  .admin-shell.app-shell .topbar {
    min-width: 0;
    padding-inline: 8px;
  }

  .admin-shell.app-shell .app-main {
    min-width: 0;
    overflow-x: auto;
  }
}

.stocktake-summary-card svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workflow-drawer-mask.stocktake-mask {
  align-items: center;
  justify-content: center;
}

.stocktake-shell {
  position: relative;
  width: min(1500px, 92vw);
  height: min(860px, 90vh);
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto 48px minmax(0, 1fr);
  border: 1px solid rgba(148, 163, 184, 0.55);
  border-radius: 26px;
  background: rgba(248, 250, 252, 0.94);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.stocktake-head,
.stocktake-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.stocktake-head {
  grid-row: 1;
}

.stocktake-steps {
  grid-row: 2;
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  background: rgba(241, 245, 249, 0.78);
}

.stocktake-step,
.stocktake-warehouse-card,
.stocktake-summary-card,
.stocktake-action-card {
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.stocktake-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
}

.stocktake-step.active {
  border-color: rgba(37, 99, 235, 0.7);
  color: #1d4ed8;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.16);
}

.stocktake-panel {
  grid-row: auto;
  min-height: 0;
  overflow: auto;
  padding: 20px;
  align-content: start;
}

.stocktake-notice-row {
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 20px 0;
}

.stocktake-notice-row.empty {
  visibility: hidden;
  pointer-events: none;
}

.stocktake-notice-row .feedback-banner {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 9px 14px;
  border-radius: 12px;
}

.stocktake-main {
  grid-row: 4;
  display: grid;
  grid-template-columns: minmax(380px, 42%) minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
  padding: 20px;
  overflow: hidden;
}

.stocktake-flow-column {
  min-height: 0;
  overflow: auto;
}

.stocktake-panel-select,
.stocktake-panel-export,
.stocktake-panel-import,
.stocktake-single-panel,
.stocktake-panel-history {
  display: grid;
  gap: 16px;
  align-content: start;
}

.stocktake-single-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

.stocktake-diff-modal-mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 22px;
  background: rgba(15, 23, 42, 0.34);
}

.stocktake-diff-modal {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) 72px;
  width: min(1320px, calc(100vw - 64px));
  height: min(820px, 100%);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 24px;
  background: rgba(248, 250, 252, 0.98);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3);
}

.stocktake-diff-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.stocktake-diff-modal .stocktake-summary-grid,
.stocktake-diff-modal .stocktake-empty-state,
.stocktake-diff-modal .stocktake-diff-toolbar {
  margin: 14px 18px 0;
}

.stocktake-diff-modal .stocktake-diff-table-v2 {
  margin: 14px 18px 0;
  min-height: 0;
}

.stocktake-diff-modal .stocktake-footer {
  justify-content: flex-end;
  align-items: center;
  min-height: 72px;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(248, 250, 252, 0.98);
  z-index: 2;
}

.stocktake-panel .stocktake-footer {
  margin-top: 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  background: transparent;
  justify-content: flex-end;
}

.stocktake-panel-import .stocktake-action-card-wide {
  max-width: 620px;
  padding: 16px 18px;
}

.stocktake-panel-import .import-dropzone {
  min-height: 150px;
  padding: 18px;
}

.stocktake-panel-history {
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.stocktake-panel-history .table-wrap {
  margin-top: 0;
  min-height: 0;
  overflow: auto;
  max-height: none;
}

.stocktake-panel-history .pagination-bar {
  margin-top: 10px;
  padding: 12px 16px;
}

.stocktake-main .stocktake-panel-import,
.stocktake-main .stocktake-single-panel {
  padding: 0;
  overflow: visible;
}

.stocktake-warehouse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.stocktake-warehouse-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  cursor: pointer;
}

.stocktake-warehouse-card.active {
  border-color: rgba(22, 163, 74, 0.72);
  background: rgba(240, 253, 244, 0.9);
}

.stocktake-action-card {
  display: grid;
  gap: 12px;
  max-width: 520px;
  margin: 0;
  padding: 18px;
}

.import-dropzone {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 260px;
  border: 2px dashed rgba(37, 99, 235, 0.42);
  border-radius: 22px;
  background: rgba(239, 246, 255, 0.72);
  cursor: pointer;
}

.import-dropzone input {
  display: none;
}

.stocktake-summary-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.stocktake-summary-card {
  padding: 12px 14px;
}

.stocktake-summary-card strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
}

.stocktake-summary-card.gain,
.stocktake-summary-card.new {
  background: rgba(240, 253, 244, 0.92);
  color: #166534;
}

.stocktake-summary-card.loss,
.stocktake-summary-card.missing {
  background: rgba(254, 242, 242, 0.92);
  color: #991b1b;
}

.stocktake-summary-card.error {
  background: rgba(127, 29, 29, 0.92);
  color: #fff;
}

.stocktake-empty-state {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(64, 158, 255, 0.3);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(236, 245, 255, 0.96), rgba(255, 255, 255, 0.92));
  color: #303133;
  box-shadow:
    0 8px 18px rgba(64, 158, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.stocktake-empty-state strong {
  color: #1d4ed8;
  font-size: 16px;
}

.stocktake-empty-state span {
  color: #606266;
}

.stocktake-diff-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.stocktake-diff-toolbar .active {
  border-color: rgba(37, 99, 235, 0.7);
  color: #1d4ed8;
}

.stocktake-diff-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stocktake-diff-column {
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.86);
}

.stocktake-diff-column h4 {
  margin: 0;
  padding: 12px 14px;
  background: rgba(226, 232, 240, 0.8);
}

.stocktake-diff-row {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 12px 14px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.stocktake-diff-row.diff-gain,
.stocktake-diff-row.diff-new_lot {
  background: rgba(220, 252, 231, 0.86);
}

.stocktake-diff-row.diff-loss,
.stocktake-diff-row.diff-missing {
  background: rgba(254, 226, 226, 0.9);
}

.stocktake-diff-row.diff-error {
  background: #7f1d1d;
  color: #fff;
}

.stocktake-diff-table-v2 {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 180px minmax(280px, 1fr);
  gap: 0;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.stocktake-diff-header,
.stocktake-diff-change-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 14px;
  background: rgba(241, 245, 249, 0.96);
  color: #334155;
  font-weight: 800;
  border-bottom: 1px solid rgba(148, 163, 184, 0.36);
}

.stocktake-diff-change-header {
  text-align: center;
  border-left: 1px solid rgba(148, 163, 184, 0.28);
  border-right: 1px solid rgba(148, 163, 184, 0.28);
}

.stocktake-diff-cell,
.stocktake-diff-change {
  display: grid;
  gap: 5px;
  align-content: start;
  min-height: 140px;
  min-width: 0;
  padding: 12px 14px;
  color: #1f2937;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  overflow-wrap: anywhere;
}

.stocktake-diff-change {
  align-content: center;
  text-align: center;
  border-left: 1px solid rgba(148, 163, 184, 0.22);
  border-right: 1px solid rgba(148, 163, 184, 0.22);
}

.stocktake-diff-cell span,
.stocktake-diff-change span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  min-width: 0;
  overflow-wrap: anywhere;
}

.stocktake-diff-cell strong,
.stocktake-diff-change strong {
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.stocktake-diff-change em {
  color: #991b1b;
  font-style: normal;
  font-weight: 700;
}

.stocktake-diff-cell.diff-gain,
.stocktake-diff-change.diff-gain {
  background: rgba(220, 252, 231, 0.86);
}

.stocktake-diff-cell.diff-loss,
.stocktake-diff-change.diff-loss {
  background: rgba(254, 226, 226, 0.9);
}

.stocktake-diff-cell.diff-new,
.stocktake-diff-change.diff-new {
  background: rgba(219, 234, 254, 0.9);
}

.stocktake-diff-cell.diff-missing,
.stocktake-diff-change.diff-missing {
  background: rgba(255, 237, 213, 0.9);
}

.stocktake-diff-cell.diff-error,
.stocktake-diff-change.diff-error {
  background: rgba(127, 29, 29, 0.94);
  color: #fff;
}

.stocktake-diff-cell.diff-error span,
.stocktake-diff-change.diff-error span,
.stocktake-diff-change.diff-error em {
  color: #fee2e2;
}

.stocktake-diff-empty-v2 {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 24px;
  text-align: center;
  color: #475569;
}

.stocktake-confirm-mask {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.28);
}

.stocktake-confirm-dialog {
  display: grid;
  gap: 12px;
  width: min(430px, calc(100vw - 64px));
  padding: 22px;
  border: 1px solid rgba(64, 158, 255, 0.26);
  border-radius: 18px;
  background: #ffffff;
  color: #303133;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

.stocktake-confirm-dialog strong {
  color: #1f2d3d;
  font-size: 18px;
}

.stocktake-confirm-dialog span {
  color: #606266;
  line-height: 1.7;
}

.stocktake-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.stocktake-progress-rail {
  align-items: stretch;
}

.stocktake-progress-rail .stocktake-step {
  cursor: default;
}

.stocktake-progress-rail .stocktake-step.done {
  border-color: rgba(34, 197, 94, 0.58);
  color: #15803d;
  background: rgba(240, 253, 244, 0.92);
}

.stocktake-panel-overview {
  display: grid;
  gap: 16px;
}

.stocktake-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.stocktake-overview-card {
  display: grid;
  gap: 12px;
  min-height: 178px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  color: #1f2937;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
}

.stocktake-overview-card.selected {
  border-color: rgba(37, 99, 235, 0.65);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.18);
}

.stocktake-overview-card.locked {
  border-color: rgba(245, 158, 11, 0.62);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.92));
}

.stocktake-overview-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.stocktake-overview-card-head div {
  display: grid;
  gap: 4px;
}

.stocktake-overview-card-head span,
.stocktake-overview-card p {
  color: #64748b;
}

.stocktake-overview-card mark {
  height: fit-content;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(219, 234, 254, 0.9);
  color: #1d4ed8;
  font-weight: 800;
}

.stocktake-overview-card.locked mark {
  background: rgba(254, 243, 199, 0.92);
  color: #92400e;
}

.stocktake-card-actions,
.stocktake-inline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
}

.stocktake-action-card-wide {
  max-width: 760px;
}

.stocktake-stage-tag {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(219, 234, 254, 0.9);
  color: #1d4ed8;
  font-weight: 800;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-ui);
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(79, 180, 255, 0.18), transparent 24%),
    radial-gradient(circle at top right, rgba(242, 157, 82, 0.12), transparent 22%),
    linear-gradient(145deg, var(--bg-deep), var(--bg));
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 95%);
}

a {
  color: inherit;
  text-decoration: none;
}

.shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 100vh;
  overflow: hidden;
  background: transparent;
}

.shell::before {
  content: none;
}

.shell::after {
  content: none;
}

.app-photo-backdrop {
  position: fixed;
  inset: -34px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(4, 10, 18, 0.28), rgba(7, 17, 28, 0.36)),
    radial-gradient(circle at 50% 40%, rgba(79, 180, 255, 0.12), transparent 32%);
  filter: blur(14px) saturate(0.98) brightness(0.82);
  transform: scale(1.06);
}

.app-glass-tint {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 18% 15%, rgba(79, 180, 255, 0.13), transparent 28%),
    radial-gradient(circle at 86% 20%, rgba(242, 157, 82, 0.1), transparent 24%),
    linear-gradient(135deg, rgba(5, 10, 17, 0.34), rgba(5, 12, 19, 0.52));
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.sidebar {
  position: relative;
  z-index: 2;
  padding: 22px 18px;
  border-right: 2px solid rgba(126, 198, 255, 0.42);
  background: rgba(255, 255, 255, 0.018);
  backdrop-filter: blur(14px) saturate(1.08);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    inset -4px 0 18px rgba(79, 180, 255, 0.08),
    12px 0 36px rgba(0, 0, 0, 0.1);
  overflow: visible;
}

.brand {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.brand-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(79, 180, 255, 0.22));
}

.brand h1,
.topbar h2,
.panel h3,
.hero-copy h3,
.matrix-card h3 {
  margin: 0;
  letter-spacing: 0.04em;
}

.brand-subtitle,
.eyebrow {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: var(--steel);
}

.brand-caption,
.panel p,
.hero-copy p,
.kpi-note,
.nav-item p,
.doc-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.nav-list {
  display: grid;
  gap: 14px;
}

.nav-stage-list {
  gap: 8px;
}

.nav-stage {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(127, 170, 205, 0.14);
  appearance: none;
  background: rgba(8, 18, 30, 0.56);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.nav-stage:hover,
.router-link-active.nav-stage,
.nav-stage-active {
  transform: translateY(-1px);
  border-color: rgba(79, 180, 255, 0.56);
  background:
    linear-gradient(90deg, rgba(79, 180, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(17, 40, 64, 0.96), rgba(7, 17, 28, 0.9));
}

.router-link-active.nav-stage,
.nav-stage-active {
  box-shadow:
    inset 0 0 0 1px rgba(79, 180, 255, 0.16),
    0 14px 34px rgba(31, 122, 184, 0.14);
}

.router-link-active.nav-stage::before,
.nav-stage-active::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7fd2ff, #45d6a8);
}

.nav-stage-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(79, 180, 255, 0.16);
  background: linear-gradient(180deg, rgba(79, 180, 255, 0.14), rgba(79, 180, 255, 0.04));
  color: #d6ecff;
  font-size: 12px;
  letter-spacing: 0.08em;
}

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

.nav-stage-body strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.nav-stage-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 13px;
}

.nav-group {
  border: 1px solid rgba(127, 170, 205, 0.14);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(10, 20, 32, 0.82), rgba(6, 13, 22, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav-group:hover {
  border-color: rgba(79, 180, 255, 0.22);
}

.nav-group-open {
  background: linear-gradient(180deg, rgba(12, 24, 37, 0.92), rgba(7, 16, 26, 0.96));
}

.nav-group-active {
  border-color: rgba(79, 180, 255, 0.56);
  box-shadow:
    inset 4px 0 0 rgba(79, 180, 255, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 0 0 1px rgba(79, 180, 255, 0.18),
    0 14px 34px rgba(31, 122, 184, 0.14);
}

.nav-group-button {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.nav-group-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(79, 180, 255, 0.16);
  background: linear-gradient(180deg, rgba(79, 180, 255, 0.14), rgba(79, 180, 255, 0.04));
  color: #d6ecff;
  font-size: 12px;
  letter-spacing: 0.14em;
}

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

.nav-group-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nav-group-title-row strong {
  font-size: 15px;
  letter-spacing: 0.03em;
}

.nav-group-button p,
.nav-subitem p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 13px;
}

.nav-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 48px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(79, 180, 255, 0.14);
  background: rgba(79, 180, 255, 0.08);
  color: #b9dbf7;
  font-size: 12px;
}

.nav-group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #cfe8fb;
  background: rgba(79, 180, 255, 0.08);
  border: 1px solid rgba(79, 180, 255, 0.14);
  font-size: 18px;
  line-height: 1;
}

.nav-sublist {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px 16px;
}

.nav-subitem {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 14px 14px 12px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: rgba(13, 25, 39, 0.6);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.nav-subitem strong {
  display: block;
  margin-bottom: 4px;
}

.nav-subitem:hover,
.router-link-active.nav-subitem {
  transform: translateX(4px);
  border-color: rgba(79, 180, 255, 0.28);
  background: rgba(16, 31, 49, 0.92);
}

.nav-submark {
  width: 10px;
  min-height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--steel), rgba(79, 180, 255, 0.08));
}

.nav-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: rgba(14, 24, 37, 0.5);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.nav-item:hover,
.router-link-active.nav-item {
  transform: translateX(4px);
  border-color: rgba(79, 180, 255, 0.36);
  background: rgba(15, 31, 49, 0.8);
}

.nav-mark {
  width: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--steel), transparent);
}

.sidebar-footer {
  margin-top: 16px;
}

.status-chip,
.topbar-tag,
.panel-tag,
.table-chip,
.table-badge,
.required-chip,
.optional-chip,
.primary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
}

.status-chip,
.topbar-tag,
.panel-tag {
  background: rgba(79, 180, 255, 0.08);
  border: 1px solid rgba(79, 180, 255, 0.16);
  color: #b9dbf7;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 6px rgba(69, 214, 168, 0.12);
}

.main-panel {
  position: relative;
  z-index: 2;
  padding: 28px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.topbar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.topbar-right {
  display: grid;
  justify-items: end;
  gap: 10px;
  min-width: min(680px, 52vw);
}

.broadcast-banner {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: min(720px, 52vw);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(126, 198, 255, 0.32);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  color: #f4fbff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  white-space: nowrap;
  overflow: hidden;
}

.broadcast-banner strong,
.broadcast-banner span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.broadcast-speaker {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(79, 180, 255, 0.18);
  color: #9be3ff;
  animation: speakerPulse 1.8s ease-in-out infinite;
}

.broadcast-speaker svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.broadcast-success {
  border-color: rgba(69, 214, 168, 0.44);
}

.broadcast-warning {
  border-color: rgba(255, 209, 102, 0.5);
}

.broadcast-danger {
  border-color: rgba(255, 111, 97, 0.52);
}

.assistant-bot-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(126, 198, 255, 0.42);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 18%, rgba(69, 214, 168, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(79, 180, 255, 0.2), rgba(255, 255, 255, 0.05));
  color: #e8f8ff;
  cursor: pointer;
  animation: botHop 1.7s ease-in-out infinite;
  box-shadow: 0 14px 34px rgba(31, 122, 184, 0.18);
}

.assistant-bot-button:hover {
  border-color: rgba(69, 214, 168, 0.74);
}

.assistant-bot-wave {
  position: absolute;
  top: -14px;
  right: -12px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(69, 214, 168, 0.92);
  color: #06131c;
  font-size: 10px;
  font-weight: 800;
  transform-origin: left bottom;
  animation: botWave 1.7s ease-in-out infinite;
}

.assistant-bot-face {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 7px;
  width: 28px;
  height: 22px;
  border-radius: 10px;
  border: 1px solid rgba(205, 239, 255, 0.5);
  background: linear-gradient(180deg, #dff7ff, #8edcff);
}

.assistant-bot-face::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 2px;
  height: 7px;
  background: rgba(205, 239, 255, 0.74);
}

.assistant-bot-face::after {
  content: "";
  position: absolute;
  top: -10px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #45d6a8;
  box-shadow: 0 0 12px rgba(69, 214, 168, 0.9);
}

.assistant-bot-eye {
  width: 5px;
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: #081b2a;
  animation: botBlink 4s ease-in-out infinite;
}

.page-grid {
  display: grid;
  gap: 20px;
}

.panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 2px solid rgba(126, 198, 255, 0.38);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(20px) saturate(1.12);
  box-shadow:
    0 24px 76px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(79, 180, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.extension-hero {
  align-items: center;
}

.extension-status-card {
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(126, 198, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
}

.extension-status-card strong {
  color: #f5fbff;
  font-size: 18px;
}

.compact-extension-form {
  max-width: 1180px;
}

.extension-preview-field {
  justify-content: end;
}

.extension-preview-banner {
  max-width: 100%;
}

.panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 180, 255, 0.32), transparent);
}

.panel-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: stretch;
}

.master-compact-hero {
  display: block;
  padding: 18px 22px;
}

.compact-page-hero {
  display: block;
  padding: 18px 22px;
}

.master-compact-hero .hero-copy h3,
.compact-page-hero .hero-copy h3 {
  max-width: none;
  margin-bottom: 8px;
  font-size: clamp(22px, 3vw, 28px);
}

.master-compact-hero .hero-copy p,
.compact-page-hero .hero-copy p {
  max-width: 86ch;
}

.hero-copy h3 {
  font-size: clamp(28px, 4vw, 40px);
  max-width: 15ch;
  margin-bottom: 14px;
}

.hero-copy p {
  max-width: 62ch;
}

.hero-stats,
.summary-grid,
.kpi-grid,
.matrix-grid,
.field-grid {
  display: grid;
  gap: 16px;
}

.hero-stats {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.hero-stat,
.summary-card,
.highlight-panel,
.matrix-card,
.field-card {
  padding: 18px;
  border: 1px solid rgba(209, 229, 246, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(14px);
}

.hero-stat span,
.summary-card span,
.cost-number span,
.alert-footer span,
.flow-step-top span,
.field-card code,
.doc-card code {
  color: var(--muted);
}

.hero-stat strong,
.summary-card strong {
  display: block;
  margin-top: 10px;
  font-size: 22px;
}

.kpi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kpi-card {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(127, 170, 205, 0.14);
  background: linear-gradient(180deg, rgba(16, 31, 48, 0.84), rgba(7, 17, 28, 0.86));
}

.kpi-warning {
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.18);
}

.kpi-danger {
  box-shadow: inset 0 0 0 1px rgba(255, 111, 97, 0.2);
}

.kpi-label {
  margin: 0 0 14px;
  color: var(--muted);
}

.kpi-value-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.kpi-value {
  font-size: 40px;
  line-height: 1;
}

.kpi-unit {
  padding-bottom: 6px;
  color: var(--muted);
}

.panel-header,
.alert-top,
.alert-footer,
.flow-step-top,
.field-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.alert-list,
.cost-stack,
.table-chip-list {
  display: grid;
  gap: 14px;
}

.alert-item {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid transparent;
  background: rgba(6, 12, 20, 0.56);
}

.alert-warning {
  border-color: rgba(255, 209, 102, 0.24);
}

.alert-danger {
  border-color: rgba(255, 111, 97, 0.3);
}

.alert-item p,
.flow-step p {
  margin: 10px 0 0;
}

.flow-grid,
.two-column-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.flow-group {
  display: grid;
  gap: 14px;
}

.flow-group-head h4 {
  margin: 0;
}

.flow-step {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(126, 159, 190, 0.14);
  background: rgba(8, 18, 30, 0.58);
}

.flow-done {
  border-color: rgba(69, 214, 168, 0.24);
}

.flow-active {
  border-color: rgba(79, 180, 255, 0.26);
}

.flow-queued {
  border-color: rgba(242, 157, 82, 0.22);
}

.cost-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(126, 159, 190, 0.1);
}

.cost-row:last-child {
  border-bottom: none;
}

.cost-number {
  text-align: right;
}

.cost-number strong {
  display: block;
  margin-top: 6px;
}

.feature-list,
.ordered-flow {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.process-hero {
  align-items: center;
}

.formula-box,
.material-banner,
.doc-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(79, 180, 255, 0.18);
  background: linear-gradient(180deg, rgba(16, 32, 49, 0.82), rgba(7, 16, 26, 0.9));
}

.formula-box strong,
.material-banner strong,
.doc-card strong {
  display: block;
  margin-top: 12px;
  margin-bottom: 8px;
}

.summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.emphasis-card {
  box-shadow: inset 0 0 0 1px rgba(242, 157, 82, 0.24);
}

.material-banner {
  margin-top: 16px;
}

.feedback-banner,
.form-error {
  display: none !important;
}

.notification-stack {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 4200;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.notification-stack-list {
  display: grid;
  gap: 12px;
}

.notification-toast-card {
  display: grid;
  grid-template-columns: 5px 1fr auto;
  gap: 12px;
  align-items: stretch;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(126, 159, 190, 0.22);
  background: linear-gradient(135deg, rgba(8, 18, 30, 0.96), rgba(13, 31, 48, 0.94));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  color: #eef8ff;
  pointer-events: auto;
}

.notification-toast-indicator {
  background: #4fb4ff;
}

.notification-toast-success .notification-toast-indicator {
  background: linear-gradient(180deg, #62e6a2, #4fb4ff);
}

.notification-toast-error .notification-toast-indicator {
  background: linear-gradient(180deg, #ff6f61, #f29d52);
}

.notification-toast-info .notification-toast-indicator {
  background: linear-gradient(180deg, #4fb4ff, #b9dbf7);
}

.notification-toast-body {
  padding: 14px 0;
}

.notification-toast-body strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 4px;
}

.notification-toast-body p {
  margin: 0;
  color: #b9c7d6;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}

.notification-toast-close {
  align-self: start;
  margin: 10px 10px 0 0;
  border: 0;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  color: #b9dbf7;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.notification-toast-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.notification-toast-enter-active,
.notification-toast-leave-active {
  transition: transform 0.24s ease, opacity 0.24s ease;
}

.notification-toast-enter-from,
.notification-toast-leave-to {
  opacity: 0;
  transform: translateX(24px);
}

.notification-toast-move {
  transition: transform 0.24s ease;
}

.table-wrap {
  overflow-x: auto;
  margin-top: 16px;
}

.table-control-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(209, 229, 246, 0.14);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(14px);
}

.table-search-field,
.table-sort-field {
  display: grid;
  gap: 6px;
}

.table-search-field {
  min-width: min(360px, 100%);
  flex: 1;
}

.table-sort-field {
  min-width: 180px;
}

.table-search-field span,
.table-sort-field span {
  color: var(--muted);
  font-size: 12px;
}

.table-search-field input,
.table-sort-field select {
  min-height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(79, 180, 255, 0.16);
  background: rgba(4, 11, 19, 0.5);
  backdrop-filter: blur(10px);
  color: #eef8ff;
  font: inherit;
  padding: 8px 12px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 880px;
}

.data-table th,
.data-table td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(126, 159, 190, 0.12);
}

.data-table th {
  color: #b9dbf7;
  font-weight: 600;
}

.sortable-th {
  user-select: none;
}

.sortable-th-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.sortable-th-button:hover {
  color: #eef8ff;
}

.sort-arrow {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(79, 180, 255, 0.18);
  background: rgba(79, 180, 255, 0.08);
  color: rgba(185, 219, 247, 0.72);
  font-size: 11px;
  line-height: 1;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.sortable-th-button:hover .sort-arrow {
  border-color: rgba(79, 180, 255, 0.42);
  color: #eef8ff;
}

.sortable-th-active {
  color: #eef8ff;
}

.sort-arrow-active {
  border-color: rgba(242, 157, 82, 0.66);
  background: linear-gradient(135deg, rgba(242, 157, 82, 0.95), rgba(79, 180, 255, 0.82));
  color: #08121e;
  box-shadow: 0 0 0 3px rgba(242, 157, 82, 0.12);
}

.row-danger {
  background: rgba(255, 111, 97, 0.08);
}

.dashboard-order-panel {
  min-height: calc(100vh - 148px);
}

.dashboard-order-header p:not(.eyebrow) {
  max-width: 860px;
  margin: 6px 0 0 0;
  color: var(--muted);
}

.dashboard-order-table {
  min-width: 1480px;
}

.dashboard-order-table td strong {
  display: block;
  color: #eef8ff;
  font-size: 13px;
}

.dashboard-order-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.strong-link {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.workflow-drawer-mask.lifecycle-modal-mask {
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.lifecycle-modal {
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(99vw, 1980px, calc(100vw - 8px));
  height: min(97dvh, 1180px, calc(100dvh - 8px));
  min-height: 0;
  border-radius: 22px;
  border: 2px solid rgba(79, 180, 255, 0.26);
  background:
    radial-gradient(circle at 18% 12%, rgba(79, 180, 255, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(7, 16, 26, 0.98), rgba(10, 28, 43, 0.96));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.lifecycle-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(126, 159, 190, 0.14);
}

.lifecycle-modal-head h3 {
  margin: 3px 0;
  color: #ffffff;
}

.lifecycle-modal-head p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
}

.dag-click-lock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(144, 215, 255, 0.24);
  background: rgba(79, 180, 255, 0.08);
  color: #d9edff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.dag-click-lock-toggle input {
  width: 15px;
  height: 15px;
  accent-color: #4fb4ff;
}

.dag-click-lock-toggle:has(input:checked) {
  border-color: rgba(247, 253, 255, 0.62);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22), transparent 38%),
    rgba(79, 180, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(79, 180, 255, 0.12), 0 0 18px rgba(79, 180, 255, 0.28);
}

.dag-loading-card {
  margin: 24px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  border: 1px dashed rgba(79, 180, 255, 0.24);
  color: #b9dbf7;
  background: rgba(8, 18, 30, 0.46);
}

.lifecycle-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  min-height: 0;
}

.dag-viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
  background:
    radial-gradient(circle at 12% 18%, rgba(79, 180, 255, 0.12), transparent 28%),
    linear-gradient(rgba(79, 180, 255, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 180, 255, 0.065) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
}

.dag-viewport:active {
  cursor: grabbing;
}

.dag-transform {
  transform-origin: 0 0;
}

.dag-canvas {
  position: relative;
}

.dag-stage-band {
  position: absolute;
  top: 18px;
  bottom: 18px;
  border-radius: 26px;
  border: 1px solid rgba(79, 180, 255, 0.12);
  background: linear-gradient(180deg, rgba(79, 180, 255, 0.075), rgba(79, 180, 255, 0.018));
}

.dag-stage-band span {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  color: rgba(185, 219, 247, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  writing-mode: horizontal-tb;
  white-space: nowrap;
}

.dag-edge-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dag-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 24;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: pointer;
}

.dag-edge-path {
  fill: none;
  stroke: rgba(144, 215, 255, 0.92);
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: bevel;
  filter: drop-shadow(0 0 7px rgba(79, 180, 255, 0.34));
  opacity: 0.92;
  transition: stroke 0.14s ease, opacity 0.14s ease, filter 0.14s ease;
}

.dag-edge-highlighted {
  stroke: #f7fdff;
  stroke-width: 7.4;
  opacity: 1;
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 18px rgba(79, 180, 255, 0.95))
    drop-shadow(0 0 32px rgba(79, 180, 255, 0.62));
}

.dag-edge-warning.dag-edge-highlighted {
  stroke: #ffe0a6;
  filter:
    drop-shadow(0 0 7px rgba(255, 244, 218, 0.92))
    drop-shadow(0 0 18px rgba(255, 174, 86, 0.96))
    drop-shadow(0 0 32px rgba(242, 157, 82, 0.62));
}

.dag-edge-danger.dag-edge-highlighted {
  stroke: #ffd2cc;
  filter:
    drop-shadow(0 0 7px rgba(255, 238, 235, 0.92))
    drop-shadow(0 0 18px rgba(255, 112, 97, 0.98))
    drop-shadow(0 0 32px rgba(255, 116, 102, 0.66));
}

.dag-edge-dimmed {
  opacity: 0.16;
  filter: none;
}

.dag-edge-warning {
  stroke: rgba(255, 174, 86, 0.98);
  filter: drop-shadow(0 0 8px rgba(242, 157, 82, 0.3));
}

.dag-edge-danger {
  stroke: rgba(255, 112, 97, 1);
  filter: drop-shadow(0 0 8px rgba(255, 116, 102, 0.34));
}

.dag-edge-terminal {
  fill: #d8f2ff;
  stroke: rgba(6, 21, 34, 0.96);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 8px rgba(79, 180, 255, 0.5));
  transition: opacity 0.14s ease, filter 0.14s ease;
}

.dag-edge-terminal-warning {
  fill: #ffca81;
}

.dag-edge-terminal-danger {
  fill: #ff7a70;
}

.dag-edge-start {
  fill: rgba(7, 16, 26, 0.98);
  stroke: rgba(144, 215, 255, 0.96);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 8px rgba(79, 180, 255, 0.5));
  transition: opacity 0.14s ease, filter 0.14s ease;
}

.dag-edge-start-warning {
  stroke: rgba(255, 174, 86, 0.98);
}

.dag-edge-start-danger {
  stroke: rgba(255, 112, 97, 1);
}

.dag-edge-dot-highlighted {
  stroke-width: 3.6;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.86))
    drop-shadow(0 0 18px rgba(79, 180, 255, 0.86));
}

.dag-edge-dot-dimmed {
  opacity: 0.18;
  filter: none;
}

.dag-edge-label {
  fill: rgba(219, 239, 255, 0.9);
  font-size: 11.5px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(7, 16, 26, 0.96);
  stroke-width: 5px;
  transition: opacity 0.14s ease, fill 0.14s ease, font-size 0.14s ease;
}

.dag-edge-label-highlighted {
  fill: #ffffff;
  font-size: 13px;
}

.dag-edge-label-dimmed {
  opacity: 0.2;
}

.dag-node-card {
  position: absolute;
  width: 250px;
  min-height: 122px;
  padding: 13px;
  display: grid;
  gap: 7px;
  border-radius: 18px;
  border: 1px solid rgba(79, 180, 255, 0.22);
  background: linear-gradient(145deg, rgba(9, 24, 39, 0.98), rgba(12, 42, 64, 0.94));
  color: #eef8ff;
  text-align: left;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dag-node-card:hover,
.dag-node-active {
  transform: translateY(-2px);
  border-color: rgba(242, 157, 82, 0.82);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.34), 0 0 0 5px rgba(242, 157, 82, 0.14);
}

.dag-node-locked {
  border-color: rgba(247, 253, 255, 0.74);
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.34),
    0 0 0 5px rgba(79, 180, 255, 0.2),
    0 0 28px rgba(79, 180, 255, 0.42);
}

.dag-node-stage {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(79, 180, 255, 0.1);
  color: #b9dbf7;
  font-size: 11px;
}

.dag-node-card strong {
  font-size: 14px;
  line-height: 1.35;
}

.dag-node-card small {
  color: var(--muted);
  line-height: 1.35;
}

.dag-node-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #b9dbf7;
  font-size: 12px;
}

.dag-node-success {
  border-color: rgba(98, 230, 162, 0.24);
}

.dag-node-warning {
  border-color: rgba(242, 157, 82, 0.32);
}

.dag-node-danger {
  border-color: rgba(255, 111, 97, 0.38);
  background: linear-gradient(145deg, rgba(42, 20, 24, 0.98), rgba(42, 31, 23, 0.94));
}

.dag-detail-panel {
  min-width: 0;
  padding: 22px;
  border-left: 1px solid rgba(126, 159, 190, 0.14);
  background: rgba(7, 16, 26, 0.62);
  overflow: auto;
}

.dag-detail-panel h3 {
  margin: 4px 0 10px 0;
  color: #ffffff;
  line-height: 1.3;
}

.dag-detail-summary {
  margin: 14px 0;
  color: #b9c7d6;
  line-height: 1.65;
}

.dag-detail-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.dag-detail-metrics article {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(79, 180, 255, 0.12);
  background: rgba(79, 180, 255, 0.06);
}

.dag-detail-metrics span,
.dag-detail-list dt {
  color: var(--muted);
  font-size: 12px;
}

.dag-detail-metrics strong {
  display: block;
  margin-top: 6px;
  color: #ffffff;
}

.dag-detail-list {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px 12px;
  margin: 0;
}

.dag-detail-list dd {
  margin: 0;
  color: #eef8ff;
  word-break: break-word;
}

.node-chip-success,
.node-chip-normal {
  background: rgba(79, 180, 255, 0.08);
}

.node-chip-warning {
  background: rgba(242, 157, 82, 0.13);
  color: #ffd6ad;
  border-color: rgba(242, 157, 82, 0.22);
}

.node-chip-danger {
  background: rgba(255, 111, 97, 0.13);
  color: #ffd4ce;
  border-color: rgba(255, 111, 97, 0.22);
}

.table-badge,
.table-chip,
.required-chip,
.optional-chip {
  width: fit-content;
}

.badge-normal,
.table-chip,
.optional-chip {
  background: rgba(79, 180, 255, 0.08);
  color: #b9dbf7;
  border: 1px solid rgba(79, 180, 255, 0.14);
}

.badge-danger,
.required-chip {
  background: rgba(255, 111, 97, 0.12);
  color: #ffd4ce;
  border: 1px solid rgba(255, 111, 97, 0.18);
}

.field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field-card code {
  display: inline-block;
  margin: 10px 0;
  font-size: 13px;
}

.matrix-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.doc-card + .doc-card {
  margin-top: 14px;
}

.ghost-button,
.primary-button,
.link-button {
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.ghost-button {
  background: rgba(79, 180, 255, 0.08);
  color: #b9dbf7;
  border-color: rgba(79, 180, 255, 0.16);
}

.primary-button {
  justify-content: center;
  background: linear-gradient(135deg, rgba(79, 180, 255, 0.92), rgba(31, 122, 184, 0.92));
  color: #07111b;
  font-weight: 700;
  border-color: rgba(79, 180, 255, 0.28);
  padding: 12px 18px;
}

.ghost-button:hover,
.primary-button:hover {
  transform: translateY(-1px);
}

.danger-ghost {
  color: #ffd4ce;
  border-color: rgba(255, 111, 97, 0.18);
  background: rgba(255, 111, 97, 0.08);
}

.small-button {
  padding: 8px 14px;
  font-size: 12px;
}

.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #d7efff;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(79, 180, 255, 0.42);
  text-underline-offset: 4px;
}

.link-button:hover {
  color: #ffffff;
  text-decoration-color: rgba(79, 180, 255, 0.9);
}

.planning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.customer-info-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.customer-info-card {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(120px, 0.6fr) minmax(140px, 0.7fr) minmax(220px, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(209, 229, 246, 0.14);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
}

.customer-info-card p,
.customer-info-card span {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.customer-info-card strong {
  display: block;
  color: #eef8ff;
}

.workflow-drawer-mask.dual-drawer-mask {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

.dual-drawer-shell {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  width: min(1180px, 100%);
  height: 100%;
  max-height: calc(100dvh - 24px);
  min-height: 0;
}

.compact-side-drawer {
  width: min(560px, calc(50vw - 18px));
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.planning-hero {
  align-items: center;
}

.workspace-hero {
  align-items: center;
}

.workspace-panel {
  display: grid;
  gap: 18px;
}

.workspace-tabbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.workspace-tab {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(127, 170, 205, 0.14);
  background: rgba(8, 18, 30, 0.56);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.workspace-tab:hover,
.workspace-tab-active {
  transform: translateY(-1px);
  border-color: rgba(79, 180, 255, 0.56);
  background:
    linear-gradient(90deg, rgba(79, 180, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(17, 40, 64, 0.96), rgba(7, 17, 28, 0.9));
}

.workspace-tab-active {
  box-shadow:
    inset 0 0 0 1px rgba(79, 180, 255, 0.16),
    0 14px 34px rgba(31, 122, 184, 0.14);
}

.workspace-tab-active::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7fd2ff, #45d6a8);
}

.workspace-tab-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(79, 180, 255, 0.16);
  background: linear-gradient(180deg, rgba(79, 180, 255, 0.14), rgba(79, 180, 255, 0.04));
  color: #d6ecff;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.workspace-tab strong {
  display: block;
  margin-bottom: 4px;
}

.workspace-tab p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 13px;
}

.workspace-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.workspace-section-head h3 {
  margin: 0;
}

.workspace-section-note {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(79, 180, 255, 0.14);
  background: rgba(79, 180, 255, 0.06);
  color: var(--muted);
  line-height: 1.6;
}

.stack-form,
.order-item-stack {
  display: grid;
  gap: 14px;
}

.form-field {
  display: grid;
  gap: 8px;
}

.compact-select-field {
  min-width: min(360px, 100%);
}

.form-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.form-field span {
  font-size: 13px;
  color: #b9dbf7;
}

.required-mark {
  color: #ff9f8f;
  font-weight: 700;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(209, 229, 246, 0.16);
  background: rgba(4, 11, 19, 0.54);
  backdrop-filter: blur(10px);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.muted-option {
  color: #8a8f98;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: rgba(79, 180, 255, 0.42);
  box-shadow: 0 0 0 4px rgba(79, 180, 255, 0.08);
}

.double-field,
.triple-field,
.checkbox-grid {
  display: grid;
  gap: 14px;
}

.double-field {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.triple-field {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkbox-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(209, 229, 246, 0.16);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
  color: var(--text);
}

.checkbox-field input {
  width: 16px;
  height: 16px;
}

.subsection-head,
.action-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.drawer-title-row,
.title-with-help,
.section-title-with-help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.drawer-title-row h3,
.title-with-help h3,
.section-title-with-help h3 {
  margin: 0;
}

.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #c6e2ff;
  border-radius: 50%;
  background: #ecf5ff;
  color: #409eff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: default;
  user-select: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.help-tip:hover,
.help-tip:focus-visible {
  border-color: #409eff;
  background: #409eff;
  color: #fff;
}

.help-tip[title]::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 20000;
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  padding: 9px 12px;
  border: 1px solid #d9ecff;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  color: #303133;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  box-shadow: 0 10px 28px rgba(31, 45, 61, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.help-tip[title]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  z-index: 20001;
  width: 10px;
  height: 10px;
  border-right: 1px solid #d9ecff;
  border-bottom: 1px solid #d9ecff;
  background: rgba(255, 255, 255, 0.98);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px) rotate(45deg);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.help-tip[title]:hover::after,
.help-tip[title]:hover::before,
.help-tip[title]:focus-visible::after,
.help-tip[title]:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.help-tip[title]:hover::before,
.help-tip[title]:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.order-item-card,
.login-stat-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(209, 229, 246, 0.16);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
}

.purchase-order-compose {
  display: grid;
  grid-template-columns: minmax(320px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.purchase-order-form-body {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.purchase-demand-calculator {
  position: sticky;
  top: 0;
  display: grid;
  gap: 14px;
  max-height: min(50dvh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(79, 180, 255, 0.28);
  background: linear-gradient(155deg, rgba(7, 20, 32, 0.86), rgba(12, 34, 48, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 50px rgba(0, 0, 0, 0.2);
}

.calculator-hint {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.calculator-warning {
  margin: -4px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 178, 107, 0.22);
  background: rgba(255, 178, 107, 0.08);
  color: #ffe0b7;
  line-height: 1.45;
}

.calculator-selected-material {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(209, 229, 246, 0.13);
  background: rgba(255, 255, 255, 0.04);
}

.calculator-selected-material span,
.calculator-result-grid span {
  color: #b9dbf7;
  font-size: 12px;
}

.calculator-selected-material strong {
  line-height: 1.45;
}

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

.calculator-result-grid article {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(209, 229, 246, 0.12);
  background: rgba(255, 255, 255, 0.045);
}

.calculator-result-grid strong {
  font-size: 17px;
}

.calculator-focus-result {
  border-color: rgba(79, 180, 255, 0.34) !important;
  background: rgba(79, 180, 255, 0.1) !important;
}

.feedback-banner {
  margin-top: 14px;
  margin-bottom: 8px;
  padding: 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(69, 214, 168, 0.16);
  background: rgba(69, 214, 168, 0.08);
  color: #d5fff1;
}

.error-banner {
  border-color: rgba(255, 111, 97, 0.16);
  background: rgba(255, 111, 97, 0.08);
  color: #ffd4ce;
}

.compact-table {
  min-width: 100%;
}

.inventory-lot-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.inventory-lot-summary-grid article {
  padding: 12px;
  border: 1px solid #c6e2ff;
  border-radius: 16px;
  background: linear-gradient(145deg, #f8fbff 0%, #eef7ff 100%);
  box-shadow: 0 12px 28px rgba(64, 158, 255, 0.16);
}

.inventory-lot-summary-grid span,
.inventory-source-lots > span {
  display: block;
  color: #606266;
  font-size: 12px;
  font-weight: 600;
}

.inventory-lot-summary-grid strong {
  display: block;
  margin-top: 6px;
  color: #1677c7;
  font-size: 18px;
  font-weight: 800;
}

.inventory-source-lots {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.inventory-source-lots div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inventory-source-lots b {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #91e5c8;
  background: #e9fbf4;
  color: #0f7660;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(15, 118, 96, 0.1);
}

.inventory-source-lots em {
  color: #909399;
  font-style: normal;
  font-size: 12px;
}

.inventory-lot-row-unavailable {
  opacity: 0.46;
  filter: grayscale(0.45);
}

.empty-row {
  text-align: center;
  color: var(--muted);
}

.row-selected {
  background:
    linear-gradient(90deg, rgba(79, 180, 255, 0.18), rgba(79, 180, 255, 0.05));
  box-shadow: inset 4px 0 0 rgba(79, 180, 255, 0.82);
}

.pagination-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(209, 229, 246, 0.14);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  color: var(--muted);
}

.pagination-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #d7efff;
}

.pagination-size-field {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.pagination-size-field select {
  min-width: 96px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(79, 180, 255, 0.18);
  background: rgba(7, 16, 26, 0.88);
  color: #d7efff;
  font: inherit;
}

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

.detail-item,
.detail-block {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(127, 170, 205, 0.14);
  background: rgba(7, 16, 26, 0.72);
}

.detail-item span,
.detail-block span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.detail-item strong,
.detail-block strong {
  color: #eef8ff;
}

.detail-block {
  grid-column: 1 / -1;
}

.login-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 36px;
  overflow: hidden;
  background: #07111a;
  cursor: pointer;
}

.login-revealed {
  cursor: default;
}

.login-photo-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(4, 10, 18, 0.34), rgba(6, 15, 25, 0.66)),
    radial-gradient(circle at 50% 40%, rgba(79, 180, 255, 0.12), transparent 32%);
  transform: scale(1.02);
}

.login-photo-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.12), transparent 25%),
    radial-gradient(circle at 16% 18%, rgba(79, 180, 255, 0.22), transparent 28%),
    linear-gradient(180deg, rgba(3, 8, 14, 0.08), rgba(3, 8, 14, 0.76));
  pointer-events: none;
}

.login-ambient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(79, 180, 255, 0.14), transparent 22%),
    radial-gradient(circle at 80% 18%, rgba(242, 157, 82, 0.15), transparent 20%),
    radial-gradient(circle at 50% 85%, rgba(69, 214, 168, 0.08), transparent 24%);
  pointer-events: none;
}

.login-entry,
.login-panel {
  position: relative;
  z-index: 1;
}

.login-entry {
  display: grid;
  justify-items: center;
  gap: 18px;
  transform-origin: center;
  animation: loginBrandPop 760ms cubic-bezier(0.2, 1, 0.22, 1) both;
  transition: transform 520ms cubic-bezier(0.2, 1, 0.22, 1);
}

.login-panel {
  position: absolute;
  top: 53%;
  left: 50%;
  z-index: 2;
  width: min(462px, calc(100vw - 42px));
  padding: 30px;
  border-radius: 30px;
  border: 1px solid rgba(209, 229, 246, 0.24);
  background: linear-gradient(180deg, rgba(7, 18, 31, 0.72), rgba(4, 11, 19, 0.68));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -32%) translateY(42px) scale(0.96);
  transition:
    opacity 360ms ease,
    transform 520ms cubic-bezier(0.2, 1, 0.22, 1);
}

.login-revealed .login-entry {
  animation: none;
  transform: translateY(clamp(-250px, -27vh, -176px)) scale(0.68);
}

.login-revealed .login-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -30%) translateY(0) scale(1);
  transition-delay: 180ms;
}

.login-brand {
  display: grid;
  grid-template-columns: 132px minmax(0, auto);
  gap: 26px;
  align-items: center;
  padding: 30px 36px;
  border-radius: 34px;
  border: 1px solid rgba(209, 229, 246, 0.22);
  background: linear-gradient(135deg, rgba(6, 16, 27, 0.62), rgba(7, 19, 31, 0.38));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(12px);
}

.login-logo {
  width: 132px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(79, 180, 255, 0.22));
}

.login-brand h1,
.login-panel h2 {
  margin: 0 0 12px;
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: 0.05em;
}

.login-stat-card span {
  color: var(--muted);
}

.login-stat-card strong {
  display: block;
  margin-top: 10px;
  font-size: 20px;
}

.login-click-tip {
  margin: 0;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(79, 180, 255, 0.18);
  background: rgba(4, 11, 19, 0.5);
  color: #d7efff;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.login-revealed .login-click-tip {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

@keyframes loginBrandPop {
  0% {
    opacity: 0;
    transform: translateY(34px) scale(0.78);
    filter: blur(8px);
  }
  64% {
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes speakerPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 180, 255, 0.24);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(79, 180, 255, 0);
  }
}

@keyframes botHop {
  0%,
  100% {
    transform: translateY(0);
  }
  42% {
    transform: translateY(-8px);
  }
  58% {
    transform: translateY(-5px);
  }
}

@keyframes botWave {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  42% {
    transform: rotate(14deg) translateY(-2px);
  }
}

@keyframes botBlink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.15);
  }
}

@keyframes broadcastMarquee {
  from {
    transform: translateX(var(--broadcast-marquee-width));
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes assistantDrawerPop {
  from {
    opacity: 0;
    transform: translate(18px, -12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

.login-panel-head p {
  color: var(--muted);
  margin: 0;
}

.login-form {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.login-actions {
  display: grid;
  gap: 10px;
}

.form-message,
.form-error {
  margin: 0;
  font-size: 13px;
}

.form-message {
  color: #d5fff1;
}

.form-error {
  color: #ffd4ce;
}

.workflow-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.workflow-drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  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));
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(4, 10, 17, 0.72);
  backdrop-filter: blur(10px);
}

.workflow-drawer {
  width: min(1460px, calc(100vw - 24px));
  height: auto;
  max-height: calc(100dvh - 24px);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
  background:
    radial-gradient(circle at top right, rgba(79, 180, 255, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(9, 18, 29, 0.98), rgba(5, 11, 18, 0.98));
  border: 1px solid rgba(79, 180, 255, 0.2);
  border-radius: 28px 0 0 28px;
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.32);
}

.assistant-chat-mask {
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 84px;
}

.assistant-chat-drawer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(560px, calc(100vw - 24px));
  height: min(720px, calc(100dvh - 108px));
  min-height: 0;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(126, 198, 255, 0.34);
  background:
    radial-gradient(circle at top left, rgba(79, 180, 255, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(9, 18, 29, 0.98), rgba(5, 11, 18, 0.98));
  box-shadow: -18px 20px 70px rgba(0, 0, 0, 0.36);
  transform-origin: top right;
  animation: assistantDrawerPop 180ms ease-out;
}

.assistant-chat-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid rgba(126, 198, 255, 0.16);
}

.assistant-chat-title {
  display: flex;
  gap: 12px;
  align-items: center;
}

.assistant-chat-title h3,
.assistant-chat-title p {
  margin: 0;
}

.assistant-chat-avatar {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: rgba(79, 180, 255, 0.13);
}

.assistant-chat-body {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.assistant-message {
  display: flex;
}

.assistant-message-user {
  justify-content: flex-end;
}

.assistant-message-bubble {
  max-width: 82%;
  padding: 12px 14px;
  border-radius: 18px;
  color: #eef8ff;
  line-height: 1.65;
  background: rgba(255, 255, 255, 0.08);
}

.assistant-message-user .assistant-message-bubble {
  background: linear-gradient(135deg, rgba(79, 180, 255, 0.34), rgba(69, 214, 168, 0.18));
}

.assistant-message-assistant .assistant-message-bubble {
  border: 1px solid rgba(126, 198, 255, 0.16);
}

.assistant-chat-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid rgba(126, 198, 255, 0.16);
}

.assistant-chat-input textarea {
  resize: none;
}

.product-workflow-drawer {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  width: min(1460px, calc(100vw - 24px));
  height: auto;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border-radius: 28px 0 0 28px;
}

.workflow-drawer-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.workflow-drawer-scroll::-webkit-scrollbar {
  width: 10px;
}

.workflow-drawer-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(126, 198, 255, 0.28);
}

.workflow-drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.workflow-drawer-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.workflow-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.workflow-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(79, 180, 255, 0.14);
  background: rgba(13, 25, 39, 0.82);
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
}

.workflow-step:hover {
  transform: translateY(-1px);
  border-color: rgba(79, 180, 255, 0.26);
}

.workflow-step-active {
  transform: translateY(-1px);
  border-color: rgba(79, 180, 255, 0.62);
  background:
    linear-gradient(90deg, rgba(79, 180, 255, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(17, 42, 66, 0.98), rgba(10, 19, 31, 0.98));
  box-shadow:
    inset 4px 0 0 rgba(79, 180, 255, 0.84),
    0 0 0 1px rgba(79, 180, 255, 0.18),
    0 14px 34px rgba(31, 122, 184, 0.18);
}

.workflow-step-active .workflow-step-index {
  border-color: rgba(127, 210, 255, 0.48);
  background: linear-gradient(180deg, rgba(127, 210, 255, 0.36), rgba(69, 214, 168, 0.14));
  color: #ffffff;
  box-shadow: 0 0 0 5px rgba(79, 180, 255, 0.1);
}

.workflow-step-completed .workflow-step-index {
  background: linear-gradient(180deg, rgba(69, 214, 168, 0.26), rgba(69, 214, 168, 0.08));
  border-color: rgba(69, 214, 168, 0.24);
  color: #dffcf4;
}

.workflow-step-locked {
  opacity: 0.58;
}

.workflow-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(79, 180, 255, 0.16);
  background: linear-gradient(180deg, rgba(79, 180, 255, 0.12), rgba(79, 180, 255, 0.04));
  color: #d8edff;
  letter-spacing: 0.12em;
  font-size: 12px;
}

.workflow-step-body {
  display: grid;
  gap: 5px;
}

.workflow-step-body strong {
  font-size: 14px;
  letter-spacing: 0.03em;
}

.workflow-step-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 12px;
}

.workflow-drawer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(300px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.workflow-drawer-main,
.workflow-drawer-side {
  display: grid;
  gap: 18px;
}

.workflow-section-card,
.workflow-summary-card {
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(209, 229, 246, 0.16);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.workflow-tip,
.workflow-empty-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(79, 180, 255, 0.14);
  background: rgba(11, 22, 35, 0.7);
  color: var(--muted);
  line-height: 1.7;
}

.workflow-selection-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.workflow-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.workflow-picker-card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(109, 152, 189, 0.16);
  background: rgba(10, 19, 31, 0.8);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.workflow-picker-card:hover {
  transform: translateY(-1px);
  border-color: rgba(79, 180, 255, 0.24);
}

.workflow-picker-card-selected {
  border-color: rgba(79, 180, 255, 0.56);
  background:
    linear-gradient(90deg, rgba(79, 180, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(16, 34, 53, 0.95), rgba(10, 19, 31, 0.95));
  box-shadow:
    inset 4px 0 0 rgba(79, 180, 255, 0.78),
    0 0 0 1px rgba(79, 180, 255, 0.16);
}

.workflow-picker-card input {
  margin-top: 4px;
}

.workflow-picker-content {
  display: grid;
  gap: 6px;
}

.workflow-picker-content strong {
  font-size: 14px;
}

.workflow-picker-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 13px;
}

.workflow-inline-form {
  margin-top: 18px;
}

.workflow-inline-checkbox {
  align-self: end;
  min-height: 44px;
}

.workflow-summary-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.workflow-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(109, 152, 189, 0.12);
}

.workflow-summary-list div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.workflow-summary-list span {
  color: var(--muted);
}

.workflow-summary-list strong {
  font-size: 14px;
}

.workflow-chip-row,
.workflow-chip-column {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workflow-chip-column {
  margin-top: 14px;
}

.workflow-muted-note {
  color: var(--muted);
  line-height: 1.6;
}

.workflow-divider {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid rgba(109, 152, 189, 0.12);
}

.workflow-side-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.workflow-close-button {
  margin-top: 12px;
}

.finance-board-panel {
  padding: 0;
}

.finance-board-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 24px 0 24px;
}

.finance-board-title h3 {
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 12px;
}

.finance-board-title p:last-child {
  max-width: 64ch;
}

.finance-board-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  align-items: flex-end;
}

.finance-compact-field {
  min-width: 168px;
}

.finance-board-panel > .feedback-banner {
  margin: 0 24px 16px 24px;
}

.finance-inline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 24px 18px 24px;
  margin-top: 18px;
}

.finance-inline-stat {
  flex: 1 1 180px;
  min-width: 180px;
  padding: 14px 16px;
}

.finance-inline-stat span {
  display: block;
  margin-bottom: 8px;
}

.finance-inline-stat strong {
  display: block;
  font-size: 22px;
  letter-spacing: 0.02em;
}

.finance-board-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 24px 18px 24px;
}

.finance-sheet-wrap {
  padding: 0 24px 24px 24px;
  overflow: auto;
}

.finance-sheet-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.finance-sheet-table th,
.finance-sheet-table td {
  padding: 11px 10px;
  white-space: nowrap;
}

.finance-sheet-title-row th {
  position: sticky;
  padding: 18px 16px;
  text-align: center;
}

.finance-sheet-group-row th {
  position: sticky;
  padding: 12px 10px;
  text-align: center;
}

.finance-sheet-group-single {
  white-space: normal;
  line-height: 1.45;
}

.finance-sheet-column-row th {
  position: sticky;
  line-height: 1.45;
}

.finance-sticky-cell {
  position: sticky;
}

.finance-sheet-table tbody .finance-sticky-cell {
  z-index: 8;
}

.finance-sheet-column-row .finance-sticky-cell,
.finance-sheet-group-row .finance-sticky-cell,
.finance-sheet-title-row .finance-sticky-cell {
  z-index: 20;
}

.finance-sticky-1 {
  left: 0;
}

.finance-sticky-2 {
  left: 84px;
}

.finance-sticky-3 {
  left: 200px;
}

.finance-sticky-4 {
  left: 360px;
}

.finance-sticky-5 {
  left: 520px;
}

.finance-number-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.finance-code-cell {
  display: grid;
  gap: 4px;
}

.finance-code-cell strong {
  font-size: 13px;
  letter-spacing: 0.03em;
}

.finance-code-cell small,
.finance-note-cell span {
  line-height: 1.5;
}

.finance-note-cell {
  max-width: 240px;
  white-space: normal;
}

.finance-mode-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.negative-value {
  color: #ffb0a7;
}

.finance-empty-cell {
  padding: 28px 16px !important;
  text-align: center;
}

.finance-footer-stack {
  display: grid;
  gap: 16px;
  padding: 0 24px 24px 24px;
}

.finance-rollup-table,
.finance-expense-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.finance-rollup-table th,
.finance-rollup-table td,
.finance-expense-table th,
.finance-expense-table td {
  padding: 14px 16px;
}

.finance-rollup-table th,
.finance-expense-table th {
  text-align: left;
}

.finance-rollup-table td,
.finance-expense-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.finance-expense-profit-row th,
.finance-expense-profit-row td {
  font-size: 16px;
  background: rgba(79, 180, 255, 0.06);
}

.finance-expense-drawer {
  width: min(1120px, calc(100vw - 24px));
  overflow: auto;
}

.form-drawer {
  width: min(860px, calc(100vw - 24px));
}

.form-drawer-wide {
  width: min(1180px, calc(100vw - 24px));
}

.form-drawer-xl {
  width: min(1280px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
}

.form-drawer-fullscreen {
  width: min(1680px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  height: min(940px, calc(100vh - 28px));
}

.form-drawer-fullscreen .form-drawer-body,
.form-drawer-xl .form-drawer-body {
  min-width: 0;
}

.form-drawer-body {
  margin-top: 18px;
}

.finance-expense-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.7fr);
  gap: 18px;
}

@media (max-width: 1180px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .panel-hero,
  .flow-grid,
  .planning-grid,
  .two-column-panel,
  .customer-info-card,
  .matrix-grid,
  .field-grid,
  .summary-grid,
  .kpi-grid,
  .double-field,
  .triple-field,
  .purchase-order-compose,
  .login-shell {
    grid-template-columns: 1fr;
  }

  .purchase-demand-calculator {
    position: relative;
    max-height: none;
  }

  .login-brand {
    grid-template-columns: 1fr;
  }

  .workflow-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-drawer-grid,
  .finance-expense-grid {
    grid-template-columns: 1fr;
  }

  .dual-drawer-shell {
    width: min(760px, 100%);
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .compact-side-drawer {
    width: 100%;
    min-height: 50vh;
  }

  .finance-board-header {
    flex-direction: column;
  }

  .finance-board-toolbar {
    justify-content: flex-start;
  }

}

@media (max-width: 720px) {
  .main-panel,
  .sidebar {
    padding: 18px;
  }

  .topbar {
    flex-direction: column;
  }

  .brand {
    grid-template-columns: 64px minmax(0, 1fr);
  }

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

  .nav-stage {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .nav-stage-step {
    width: 42px;
    height: 42px;
  }

  .nav-stage-tail {
    display: none;
  }

  .nav-group-button {
    grid-template-columns: 42px minmax(0, 1fr) 24px;
    gap: 12px;
    padding: 14px;
  }

  .nav-group-step {
    width: 42px;
    height: 42px;
  }

  .nav-group-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .workspace-tabbar {
    grid-template-columns: 1fr;
  }

  .workspace-tab {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .workspace-tab-step {
    width: 44px;
    height: 44px;
  }

  .workspace-section-head {
    flex-direction: column;
  }

  .login-shell {
    padding: 18px;
  }

  .login-entry,
  .login-panel {
    padding: 22px;
  }

  .login-brand {
    gap: 16px;
    padding: 22px;
    text-align: center;
  }

  .login-logo {
    width: 84px;
    height: 84px;
  }

  .login-revealed .login-entry {
    animation: none;
    transform: translateY(-200px) scale(0.58);
  }

  .login-panel {
    top: 60%;
  }

  .workflow-drawer {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 18px;
  }

  .workflow-drawer-mask.dual-drawer-mask {
    padding: 10px;
  }

  .dual-drawer-shell {
    width: 100%;
  }

  .workflow-drawer-head,
  .workflow-selection-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .finance-board-header,
  .finance-inline-stats,
  .finance-board-tags,
  .finance-sheet-wrap,
  .finance-footer-stack {
    padding-left: 18px;
    padding-right: 18px;
  }

  .finance-board-toolbar {
    width: 100%;
  }

  .finance-compact-field {
    width: 100%;
  }

  .finance-precision-panel .finance-sheet-wrap {
    max-height: 72vh;
  }

  .finance-precision-panel .finance-sticky-cell {
    position: sticky;
  }

  .finance-precision-panel .finance-sheet-title-row th,
  .finance-precision-panel .finance-sheet-group-row th,
  .finance-precision-panel .finance-sheet-column-row th {
    position: sticky;
  }

  .workflow-stepper {
    grid-template-columns: 1fr;
  }

  .workflow-step {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .workflow-step-index {
    width: 42px;
    height: 42px;
  }

  .workflow-picker-grid {
    grid-template-columns: 1fr;
  }

  .workflow-side-actions {
    flex-direction: column;
  }
}

/* RuoYi/Vfadmin inspired layout and light admin theme */
:root {
  color-scheme: light;
  --bg: #f0f2f5;
  --bg-deep: #e9edf3;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --line: #ebeef5;
  --text: #303133;
  --muted: #909399;
  --steel: #409eff;
  --copper: #e6a23c;
  --warning: #e6a23c;
  --danger: #f56c6c;
  --success: #67c23a;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --font-ui: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

body {
  color: var(--text);
  background: #f0f2f5;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before,
.app-photo-backdrop,
.app-glass-tint {
  content: none;
  display: none;
}

.shell.admin-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: #f0f2f5;
}

.shell.admin-shell.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}

.admin-shell .sidebar {
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100vh;
  padding: 0;
  border: 0;
  background: #304156;
  color: #bfcbd9;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.18);
  backdrop-filter: none;
  overflow: hidden;
}

.admin-shell .brand {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  height: 50px;
  min-height: 50px;
  margin: 0;
  padding: 0 14px;
  overflow: hidden;
  background: #2b2f3a;
  color: #ffffff;
}

.admin-shell .brand-logo {
  width: 32px;
  height: 32px;
  filter: none;
}

.admin-shell .brand h1 {
  overflow: hidden;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-shell.sidebar-collapsed .brand {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

.admin-shell.sidebar-collapsed .brand h1,
.admin-shell.sidebar-collapsed .nav-stage-body {
  display: none;
}

.admin-shell.sidebar-collapsed .nav-stage {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

.admin-shell .brand-subtitle,
.admin-shell .brand-caption {
  display: none;
}

.admin-shell .nav-stage-list {
  flex: 1;
  min-height: 0;
  display: block;
  overflow-y: auto;
  padding: 8px 0;
}

.admin-shell .nav-stage-list::-webkit-scrollbar {
  width: 6px;
}

.admin-shell .nav-stage-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(191, 203, 217, 0.28);
}

.admin-shell .nav-stage {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #bfcbd9;
  transition: color 0.18s ease, background 0.18s ease;
}

.admin-shell .nav-stage-has-children {
  grid-template-columns: 22px minmax(0, 1fr) 14px;
}

.admin-shell .nav-stage:hover {
  transform: none;
  background: #263445;
  color: #ffffff;
}

.admin-shell .router-link-active.nav-stage,
.admin-shell .nav-stage-active {
  transform: none;
  background: #263445;
  color: #409eff;
  box-shadow: none;
}

.admin-shell .router-link-active.nav-stage::before,
.admin-shell .nav-stage-active::before {
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 0;
  background: #409eff;
}

.admin-shell .nav-stage-step {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.admin-shell .nav-stage-step svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-shell .nav-stage-body {
  min-width: 0;
}

.admin-shell .nav-stage-body strong {
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-shell .nav-stage-body p,
.admin-shell .sidebar-footer {
  display: none;
}

.admin-shell .nav-stage-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: inherit;
  transition: transform 0.18s ease;
}

.admin-shell .nav-stage-chevron svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-shell .nav-stage-group-expanded .nav-stage-chevron {
  transform: rotate(180deg);
}

.admin-shell .nav-submenu {
  margin: -2px 8px 8px 8px;
  padding: 4px 0 4px 34px;
  border-radius: 0 0 10px 10px;
  background: #1f2d3d;
}

.admin-shell .nav-subitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  color: #bfcbd9;
  font-size: 13px;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.admin-shell .nav-subitem:hover,
.admin-shell .nav-subitem-active,
.admin-shell .router-link-active.nav-subitem {
  transform: translateX(2px);
  background: rgba(64, 158, 255, 0.12);
  color: #409eff;
}

.admin-shell .nav-subitem-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.72;
}

.admin-shell.sidebar-collapsed .nav-stage-has-children {
  grid-template-columns: 1fr;
}

.admin-shell.sidebar-collapsed .nav-stage-chevron,
.admin-shell.sidebar-collapsed .nav-submenu {
  display: none;
}

.admin-shell .main-panel {
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #f0f2f5;
}

.admin-shell .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 50px;
  height: 50px;
  margin: 0;
  padding: 0 14px;
  border-bottom: 1px solid #e6e6e6;
  background: #ffffff;
  color: #303133;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.topbar-left {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
}

.hamburger-container {
  display: inline-grid;
  place-items: center;
  gap: 3px;
  width: 44px;
  height: 50px;
  margin: 0 8px 0 -10px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hamburger-container:hover {
  background: rgba(0, 0, 0, 0.025);
}

.hamburger-container span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: #606266;
}

.breadcrumb-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}

.breadcrumb-container strong {
  overflow: hidden;
  color: #303133;
  font-weight: 500;
  text-overflow: ellipsis;
}

.breadcrumb-separator {
  color: #c0c4cc;
}

.admin-shell .topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.admin-shell .topbar-meta {
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.admin-shell .topbar-tag {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #dcdfe6;
  background: #ffffff;
  color: #606266;
}

.admin-shell .broadcast-banner {
  max-width: min(520px, 42vw);
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #f4f4f5;
  color: #606266;
  box-shadow: none;
  backdrop-filter: none;
}

.admin-shell .broadcast-banner strong {
  color: #303133;
}

.broadcast-marquee {
  position: relative;
  min-width: 0;
  width: min(460px, 36vw);
  overflow: hidden;
  --broadcast-marquee-width: min(460px, 36vw);
}

.broadcast-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: broadcastMarquee 18s linear infinite;
}

.broadcast-marquee-track strong,
.broadcast-marquee-track span {
  overflow: visible;
  text-overflow: clip;
}

.broadcast-marquee:hover .broadcast-marquee-track {
  animation-play-state: paused;
}

.admin-shell .broadcast-speaker {
  width: 22px;
  height: 22px;
  background: #ecf5ff;
  color: #409eff;
}

.admin-shell .assistant-bot-button {
  width: 36px;
  height: 36px;
  border-color: transparent;
  border-radius: 999px;
  background: transparent;
  color: #409eff;
  box-shadow: none;
}

.admin-shell .assistant-bot-button:hover {
  border-color: transparent;
  background: transparent;
}

.admin-shell .assistant-bot-wave {
  top: -11px;
  right: -9px;
  background: #409eff;
  color: #ffffff;
}

.admin-shell .assistant-bot-face {
  border-color: #b3d8ff;
  background: #ecf5ff;
}

.admin-shell .tags-view-container {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 34px;
  min-height: 34px;
  padding: 0 10px;
  overflow-x: auto;
  border-bottom: 1px solid #d8dce5;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 21, 41, 0.04);
}

.admin-shell .tags-view-container::-webkit-scrollbar {
  height: 4px;
}

.admin-shell .tags-view-container::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c0c4cc;
}

.admin-shell .tags-view-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid #d8dce5;
  border-radius: 2px;
  background: #ffffff;
  color: #495060;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

.admin-shell .tags-view-open {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 180px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.admin-shell .tags-view-item.active {
  border-color: #409eff;
  background: #409eff;
  color: #ffffff;
}

.admin-shell .tags-view-title {
  overflow: hidden;
  max-width: 180px;
  text-overflow: ellipsis;
}

.admin-shell .tags-view-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.72;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.admin-shell .tags-view-close:hover {
  background: #b4bccc;
  color: #ffffff;
  opacity: 1;
}

.admin-shell .tags-view-item.active .tags-view-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.admin-shell .app-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: #f0f2f5;
}

.page-grid {
  gap: 16px;
}

.panel,
.workspace-panel {
  overflow: visible;
  padding: 18px;
  border: 1px solid #e6ebf5;
  border-radius: 4px;
  background: #ffffff;
  color: #303133;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.04);
  backdrop-filter: none;
}

.panel::after {
  content: none;
}

.panel-header,
.workspace-section-head,
.subsection-head,
.action-row {
  align-items: center;
}

.panel h3,
.workspace-section-head h3,
.flow-group-head h4,
.workflow-drawer-head h3,
.workflow-section-card h3,
.finance-board-title h3,
.login-panel h2 {
  color: #303133;
  letter-spacing: 0;
}

.brand-subtitle,
.eyebrow {
  margin-bottom: 4px;
  color: #909399;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.panel p,
.hero-copy p,
.kpi-note,
.doc-note,
.workspace-section-note,
.workflow-muted-note,
.workflow-tip,
.workflow-empty-card {
  color: #909399;
}

.panel-tag,
.table-chip,
.table-badge,
.required-chip,
.optional-chip,
.status-chip,
.topbar-tag {
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 4px;
  border-color: #d9ecff;
  background: #ecf5ff;
  color: #409eff;
}

.required-chip,
.badge-danger {
  border-color: #fde2e2;
  background: #fef0f0;
  color: #f56c6c;
}

.badge-normal,
.table-chip,
.optional-chip {
  border-color: #d9ecff;
  background: #ecf5ff;
  color: #409eff;
}

.kpi-card,
.hero-stat,
.summary-card,
.highlight-panel,
.matrix-card,
.field-card,
.flow-step,
.workflow-section-card,
.workflow-summary-card,
.order-item-card,
.customer-info-card,
.detail-item,
.detail-block,
.calculator-selected-material,
.calculator-result-grid article,
.extension-status-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #ffffff;
  color: #303133;
  box-shadow: none;
  backdrop-filter: none;
}

.kpi-value,
.hero-stat strong,
.summary-card strong,
.detail-item strong,
.detail-block strong,
.customer-info-card strong {
  color: #303133;
}

.kpi-label,
.hero-stat span,
.summary-card span,
.detail-item span,
.detail-block span,
.customer-info-card p,
.customer-info-card span {
  color: #909399;
}

.table-wrap {
  margin-top: 14px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #ffffff;
}

.data-table {
  color: #606266;
}

.data-table th,
.data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #ebeef5;
}

.data-table th {
  background: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

.data-table tbody tr:hover td {
  background: #f5f7fa;
}

.dashboard-order-table td strong,
.link-button,
.strong-link {
  color: #409eff;
}

.dashboard-order-table td small,
.empty-row {
  color: #909399;
}

.sortable-th-button:hover,
.sortable-th-active {
  color: #409eff;
}

.sort-arrow {
  border-color: #dcdfe6;
  background: #ffffff;
  color: #909399;
}

.sort-arrow-active {
  border-color: #409eff;
  background: #ecf5ff;
  color: #409eff;
  box-shadow: none;
}

.table-control-bar {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #fafafa;
  backdrop-filter: none;
}

.table-search-field span,
.table-sort-field span,
.form-field span,
.calculator-selected-material span,
.calculator-result-grid span,
.workflow-summary-list span {
  color: #606266;
}

.table-search-field input,
.table-sort-field select,
.form-field input,
.form-field select,
.form-field textarea,
.pagination-size-field select,
.assistant-chat-input textarea {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #ffffff;
  color: #606266;
  box-shadow: none;
  backdrop-filter: none;
}

.form-field textarea,
.assistant-chat-input textarea {
  padding-top: 8px;
  padding-bottom: 8px;
}

.table-search-field input:focus,
.table-sort-field select:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.assistant-chat-input textarea:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
}

select option {
  background: #ffffff;
  color: #303133;
}

.ghost-button,
.primary-button,
.link-button {
  border-radius: 4px;
  font-weight: 500;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ghost-button {
  background: #ffffff;
  color: #606266;
  border-color: #dcdfe6;
}

.ghost-button:hover {
  transform: none;
  color: #409eff;
  border-color: #c6e2ff;
  background: #ecf5ff;
}

.icon-button {
  display: inline-grid !important;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.icon-button::before {
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.icon-add::before {
  content: "+";
  font-size: 22px;
}

.icon-edit::before {
  content: "✎";
}

.icon-delete::before {
  content: "×";
  font-size: 22px;
}

.icon-close::before {
  content: "×";
  font-size: 22px;
}

.icon-refresh::before {
  content: "↻";
}

.icon-reset::before {
  content: "⟲";
}

.icon-save::before {
  content: "✓";
}

.icon-pass::before {
  content: "✓";
}

.icon-reject::before {
  content: "!";
}

.icon-dispose::before {
  content: "↪";
}

.icon-records::before {
  content: "≡";
}

.icon-cost::before {
  content: "¥";
}

.icon-upload::before {
  content: "↑";
  font-size: 22px;
}

.icon-download::before {
  content: "↓";
  font-size: 22px;
}

.icon-prev::before {
  content: "‹";
  font-size: 24px;
}

.icon-next::before {
  content: "›";
  font-size: 24px;
}

.icon-open::before {
  content: "□";
}

.icon-generate::before {
  content: "⚙";
}

.hidden-file-input {
  display: none !important;
}

.import-dropzone input[type="file"],
.stocktake-panel-import .import-dropzone input[type="file"] {
  display: none !important;
}

.workflow-mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: min(100%, 460px);
  padding: 5px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.86)),
    #ffffff;
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.workflow-mode-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ui-ink-soft);
  cursor: pointer;
  font-weight: 800;
  transition:
    transform var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast),
    background var(--ui-transition-fast),
    color var(--ui-transition-fast),
    border-color var(--ui-transition-fast);
}

.workflow-mode-option:hover {
  color: var(--ui-steel);
  background: rgba(255, 255, 255, 0.74);
  transform: translateY(-1px);
}

.workflow-mode-option.active {
  color: #ffffff;
  border-color: rgba(37, 99, 235, 0.26);
  background: linear-gradient(135deg, var(--ui-steel), var(--ui-cyan));
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

.workflow-mode-option strong {
  min-width: 0;
  overflow: hidden;
  font-family: var(--ui-font-display);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-mode-option small {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--ui-ink-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.workflow-mode-option.active small {
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.9);
}

.mode-option-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.28);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.07);
}

.workflow-mode-option.active .mode-option-dot {
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22);
}

.delivery-mode-switch {
  margin-bottom: 4px;
}

.upload-form-field {
  align-content: start;
}

.modern-upload-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px dashed rgba(37, 99, 235, 0.36);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(255, 255, 255, 0.92)),
    #ffffff;
  color: var(--ui-steel);
  cursor: pointer;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transition:
    transform var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast),
    background var(--ui-transition-fast),
    border-color var(--ui-transition-fast),
    color var(--ui-transition-fast);
}

.modern-upload-pill:hover:not(.is-busy) {
  border-color: rgba(14, 165, 233, 0.7);
  background:
    linear-gradient(135deg, rgba(219, 234, 254, 0.96), rgba(236, 253, 245, 0.84)),
    #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.modern-upload-pill.is-uploaded {
  border-color: rgba(22, 163, 74, 0.46);
  background:
    linear-gradient(135deg, rgba(220, 252, 231, 0.9), rgba(255, 255, 255, 0.92)),
    #ffffff;
  color: var(--ui-green);
}

.modern-upload-pill.is-busy {
  cursor: wait;
  opacity: 0.72;
}

.modern-upload-pill strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modern-upload-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: rgba(37, 99, 235, 0.1);
  font-family: var(--ui-font-display);
  font-size: 16px;
  line-height: 1;
}

.modern-upload-pill.is-uploaded .modern-upload-icon {
  background: rgba(22, 163, 74, 0.12);
}

.modern-upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.modern-upload-input:disabled {
  cursor: wait;
}

.modern-upload-note {
  color: var(--ui-green);
  font-size: 11px;
  font-weight: 700;
}

.supplier-action-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  border: 1px solid rgba(220, 223, 230, 0.88);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 250, 0.92)),
    #ffffff;
  box-shadow:
    0 8px 18px rgba(31, 45, 61, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.supplier-exchange-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(220, 223, 230, 0.82);
}

.supplier-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #606266;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.supplier-action-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #c6e2ff;
  background: #ecf5ff;
  color: #409eff;
  box-shadow: 0 8px 16px rgba(64, 158, 255, 0.13);
}

.supplier-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.supplier-action-primary {
  padding: 0 14px;
  border-color: rgba(64, 158, 255, 0.5);
  background: linear-gradient(180deg, #66b1ff 0%, #409eff 100%);
  color: #ffffff;
  box-shadow:
    0 8px 16px rgba(64, 158, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.supplier-action-primary:hover:not(:disabled) {
  border-color: rgba(64, 158, 255, 0.66);
  background: linear-gradient(180deg, #79bbff 0%, #409eff 100%);
  color: #ffffff;
  box-shadow:
    0 10px 20px rgba(64, 158, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.supplier-action-import {
  border-color: rgba(37, 99, 235, 0.28);
  background: linear-gradient(180deg, #eff8ff 0%, #dbeafe 100%);
  color: #1d4ed8;
  box-shadow:
    0 8px 16px rgba(37, 99, 235, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.supplier-action-import:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.42);
  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  box-shadow:
    0 10px 20px rgba(37, 99, 235, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.supplier-action-export {
  border-color: rgba(22, 163, 74, 0.3);
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  color: #166534;
  box-shadow:
    0 8px 16px rgba(22, 163, 74, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.supplier-action-export:hover:not(:disabled) {
  border-color: rgba(22, 163, 74, 0.46);
  background: linear-gradient(180deg, #d1fae5 0%, #bbf7d0 100%);
  color: #14532d;
  box-shadow:
    0 10px 20px rgba(22, 163, 74, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.supplier-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: rgba(64, 158, 255, 0.09);
  color: currentColor;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.supplier-action-primary .supplier-action-icon {
  background: rgba(255, 255, 255, 0.2);
}

.supplier-action-import .supplier-action-icon {
  background: rgba(37, 99, 235, 0.12);
}

.supplier-action-export .supplier-action-icon {
  background: rgba(22, 163, 74, 0.14);
}

.supplier-action-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button.primary-button {
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(64, 158, 255, 0.18);
}

.icon-button.danger-ghost {
  color: #f56c6c;
  border-color: #fde2e2;
  background: #fef0f0;
}

.action-row {
  gap: 6px;
}

.admin-shell .panel-header > div > .eyebrow,
.admin-shell .panel-header > div > h3,
.admin-shell .panel-header > div > .title-with-help,
.admin-shell .panel-header > div > p:not(.eyebrow),
.admin-shell .panel-header > .panel-tag,
.admin-shell .panel-header .panel-tag,
.admin-shell .workflow-drawer-head .eyebrow,
.admin-shell .workflow-drawer-head p:not(.eyebrow),
.admin-shell .workflow-drawer-head .panel-tag,
.admin-shell .workspace-section-head,
.admin-shell .workspace-section-note,
.admin-shell .workspace-tab p,
.admin-shell .workflow-step-button p,
.admin-shell .workflow-muted-note,
.admin-shell .workflow-tip,
.admin-shell .table-search-field > span {
  display: none !important;
}

.admin-shell .panel-header {
  justify-content: flex-end;
  min-height: 40px;
  margin-bottom: 14px;
}

.admin-shell .workflow-drawer-head {
  align-items: center;
}

.admin-shell .workflow-drawer-head > div:first-child {
  min-width: 0;
}

.user-menu-shell {
  position: relative;
  flex: 0 0 auto;
}

.user-avatar-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 4px 9px 4px 5px;
  border: 1px solid #dcdfe6;
  border-radius: 999px;
  background: #ffffff;
  color: #303133;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.user-avatar-button:hover {
  border-color: #409eff;
  box-shadow: 0 8px 20px rgba(64, 158, 255, 0.16);
  transform: translateY(-1px);
}

.user-avatar {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #409eff, #67c23a);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.user-avatar-meta {
  display: grid;
  gap: 1px;
  line-height: 1.1;
  text-align: left;
}

.user-avatar-meta strong {
  font-size: 13px;
  font-weight: 600;
}

.user-avatar-meta small {
  max-width: 128px;
  overflow: hidden;
  color: #909399;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  display: grid;
  min-width: 150px;
  padding: 6px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(0, 21, 41, 0.16);
}

.user-menu-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 24px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  background: #ffffff;
  transform: rotate(45deg);
}

.user-menu-dropdown button {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #303133;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.user-menu-dropdown button:hover {
  background: #ecf5ff;
  color: #409eff;
}

.user-menu-dropdown .danger-menu-item:hover {
  background: #fef0f0;
  color: #f56c6c;
}

.password-modal-mask {
  align-items: center;
  justify-content: center;
}

.password-modal-card {
  display: grid;
  gap: 18px;
  width: min(480px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(126, 198, 255, 0.34);
  border-radius: 20px;
  background: #ffffff;
  color: #303133;
  box-shadow: 0 28px 76px rgba(0, 21, 41, 0.24);
}

.password-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ebeef5;
}

.password-modal-head h3,
.password-modal-head p {
  margin: 0;
}

.password-modal-card .form-field span {
  color: #606266;
}

.password-modal-card .form-field input {
  border-radius: 8px;
  border-color: #dcdfe6;
  background: #ffffff;
  color: #303133;
}

.import-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: start;
}

.import-card,
.import-result-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(126, 198, 255, 0.28);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.import-dropzone {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 220px;
  padding: 22px;
  border: 1px dashed rgba(126, 198, 255, 0.56);
  border-radius: 18px;
  background: rgba(64, 158, 255, 0.08);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.import-dropzone:hover {
  border-color: rgba(64, 158, 255, 0.95);
  background: rgba(64, 158, 255, 0.14);
  transform: translateY(-2px);
}

.import-dropzone input {
  display: none;
}

.import-dropzone strong,
.import-dropzone p {
  margin: 0;
}

.import-icon {
  display: inline-grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 18px;
  background: linear-gradient(135deg, #67c23a, #409eff);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 16px 28px rgba(64, 158, 255, 0.24);
}

.compact-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.primary-button {
  min-height: 36px;
  padding: 9px 15px;
  background: #409eff;
  color: #ffffff;
  border-color: #409eff;
}

.primary-button:hover {
  transform: none;
  background: #66b1ff;
  border-color: #66b1ff;
}

.danger-ghost {
  color: #f56c6c;
  border-color: #fde2e2;
  background: #fef0f0;
}

.link-button {
  color: #409eff;
  text-decoration-color: rgba(64, 158, 255, 0.4);
}

.link-button:hover {
  color: #66b1ff;
  text-decoration-color: rgba(64, 158, 255, 0.8);
}

.workspace-tabbar {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.workspace-tab {
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 72px;
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #ffffff;
  color: #303133;
}

.workspace-tab:hover,
.workspace-tab-active {
  transform: none;
  border-color: #409eff;
  background: #ecf5ff;
  color: #409eff;
}

.workspace-tab-active {
  box-shadow: inset 3px 0 0 #409eff;
}

.workspace-tab-active::before {
  content: none;
}

.workspace-tab-step {
  width: 38px;
  height: 38px;
  border-color: #d9ecff;
  border-radius: 4px;
  background: #ecf5ff;
  color: #409eff;
}

.workspace-tab p {
  color: #909399;
}

.workspace-section-note,
.feedback-banner,
.workflow-tip,
.workflow-empty-card {
  border-color: #d9ecff;
  border-radius: 4px;
  background: #ecf5ff;
  color: #606266;
}

.form-message {
  color: #67c23a;
}

.form-error {
  color: #f56c6c;
}

.login-panel .form-error {
  display: block !important;
}

.error-banner {
  border-color: #fde2e2;
  background: #fef0f0;
  color: #f56c6c;
}

.row-selected {
  background: #ecf5ff;
  box-shadow: inset 3px 0 0 #409eff;
}

.row-danger {
  background: #fef0f0;
}

.pagination-bar {
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #606266;
  box-shadow: none;
  backdrop-filter: none;
}

.pagination-actions {
  color: #606266;
}

.workflow-drawer-mask {
  z-index: 2600;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
}

.workflow-drawer,
.assistant-chat-drawer {
  border: 0;
  border-radius: 4px;
  background: #ffffff;
  color: #303133;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.workflow-drawer {
  border-left: 1px solid #ebeef5;
}

.workflow-drawer-head,
.assistant-chat-head {
  border-bottom-color: #ebeef5;
}

.workflow-drawer-head p,
.assistant-chat-title p,
.workflow-step-body p,
.workflow-picker-content p {
  color: #909399;
}

.workflow-drawer-scroll::-webkit-scrollbar-thumb {
  background: #c0c4cc;
}

.workflow-step,
.workflow-picker-card {
  border-color: #ebeef5;
  border-radius: 4px;
  background: #ffffff;
  color: #303133;
}

.workflow-step:hover,
.workflow-step-active,
.workflow-picker-card:hover,
.workflow-picker-card-selected {
  transform: none;
  border-color: #409eff;
  background: #ecf5ff;
  box-shadow: inset 3px 0 0 #409eff;
}

.workflow-step-active .workflow-step-index,
.workflow-step-index {
  border-color: #d9ecff;
  border-radius: 4px;
  background: #ecf5ff;
  color: #409eff;
  box-shadow: none;
}

.checkbox-field {
  border-color: #dcdfe6;
  border-radius: 4px;
  background: #ffffff;
  color: #606266;
}

.purchase-demand-calculator {
  border-color: #d9ecff;
  border-radius: 4px;
  background: #f8fbff;
  box-shadow: none;
}

.calculator-warning {
  border-color: #faecd8;
  border-radius: 4px;
  background: #fdf6ec;
  color: #e6a23c;
}

.assistant-chat-body {
  background: #f5f7fa;
}

.assistant-message-bubble {
  color: #303133;
  background: #ffffff;
  border: 1px solid #ebeef5;
}

.assistant-message-user .assistant-message-bubble {
  color: #ffffff;
  background: #409eff;
  border-color: #409eff;
}

.assistant-message-assistant .assistant-message-bubble {
  border-color: #ebeef5;
}

.assistant-chat-input {
  border-top-color: #ebeef5;
  background: #ffffff;
}

.notification-toast-card {
  border-color: #ebeef5;
  border-radius: 4px;
  background: #ffffff;
  color: #303133;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.status-badge,
.status-badge-auto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 54px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #f4f4f5;
  color: #909399;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

.status-badge-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

.status-value-cell {
  font-weight: 600;
}

.status-badge-success,
.status-tone-success {
  border-color: #e1f3d8 !important;
  background: #f0f9eb !important;
  color: #67c23a !important;
}

.status-badge-primary,
.status-tone-primary {
  border-color: #d9ecff !important;
  background: #ecf5ff !important;
  color: #409eff !important;
}

.status-badge-warning,
.status-tone-warning {
  border-color: #faecd8 !important;
  background: #fdf6ec !important;
  color: #e6a23c !important;
}

.status-badge-orange,
.status-tone-orange {
  border-color: #ffe0b2 !important;
  background: #fff4e5 !important;
  color: #d97706 !important;
}

.status-badge-danger,
.status-tone-danger {
  border-color: #fde2e2 !important;
  background: #fef0f0 !important;
  color: #f56c6c !important;
}

.status-badge-neutral,
.status-tone-neutral {
  border-color: #e4e7ed !important;
  background: #f5f7fa !important;
  color: #606266 !important;
}

.status-badge-info,
.status-tone-info {
  border-color: #e9e9eb !important;
  background: #f4f4f5 !important;
  color: #909399 !important;
}

.notification-toast-body strong {
  color: #303133;
}

.notification-toast-body p {
  color: #606266;
}

.notification-toast-close {
  background: #f5f7fa;
  color: #909399;
}

.login-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: #f0f2f5;
  cursor: default;
}

.login-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
}

.login-photo-bg {
  display: block;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(79, 180, 255, 0.12), transparent 32%);
  filter: none;
  transform: none;
}

.login-panel {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 25px 25px 12px;
  border: 0;
  border-radius: 6px;
  background: #ffffff;
  color: #303133;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
  backdrop-filter: none;
}

.login-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #303133;
  font-size: 15px;
  font-weight: 600;
}

.login-logo {
  width: 34px;
  height: 34px;
  filter: none;
}

.login-panel-head {
  text-align: center;
}

.login-panel-head h2 {
  margin: 0 0 22px;
  color: #707070;
  font-size: 22px;
  font-weight: 600;
}

.login-panel-head p {
  display: none;
}

.login-form {
  gap: 18px;
  margin: 0;
}

.login-actions {
  gap: 10px;
}

.login-actions .primary-button {
  width: 100%;
  min-height: 40px;
  font-size: 15px;
}

.login-photo-vignette,
.login-ambient,
.login-entry,
.login-click-tip {
  display: none;
}

@media (max-width: 1180px) {
  .shell.admin-shell {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .admin-shell .sidebar {
    border-bottom: 0;
  }
}

@media (max-width: 860px) {
  .shell.admin-shell {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .admin-shell .brand {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  .admin-shell .brand h1,
  .admin-shell .nav-stage-body {
    display: none;
  }

  .admin-shell .nav-stage {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  .admin-shell .topbar {
    padding-right: 8px;
  }

  .breadcrumb-container span:first-child,
  .breadcrumb-separator,
  .admin-shell .topbar-tag:nth-of-type(2),
  .admin-shell .broadcast-banner {
    display: none;
  }
}

@media (max-width: 720px) {
  .admin-shell .app-main {
    padding: 10px;
  }

  .panel,
  .workspace-panel,
  .finance-board-panel {
    padding: 14px;
  }

  .admin-shell .topbar {
    flex-direction: row;
    align-items: center;
  }

  .workflow-drawer {
    border-radius: 4px;
  }
}

@media (max-width: 1180px) {
  .lifecycle-modal {
    width: min(96vw, 100%);
  }

  .lifecycle-content {
    grid-template-columns: 1fr;
  }

  .dag-detail-panel {
    max-height: 34vh;
    border-left: 0;
    border-top: 1px solid rgba(126, 159, 190, 0.14);
  }
}

/* 3D card elevation layer */
:root {
  --card-radius: 14px;
  --card-border: rgba(217, 225, 236, 0.92);
  --card-shadow-low: 0 6px 16px rgba(31, 45, 61, 0.08), 0 1px 2px rgba(31, 45, 61, 0.06);
  --card-shadow-mid: 0 12px 28px rgba(31, 45, 61, 0.12), 0 3px 8px rgba(31, 45, 61, 0.08);
  --card-shadow-high: 0 20px 46px rgba(31, 45, 61, 0.16), 0 8px 18px rgba(31, 45, 61, 0.1);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(217, 225, 236, 0.42);
}

.admin-shell .app-main {
  background:
    radial-gradient(circle at 18% 12%, rgba(64, 158, 255, 0.06), transparent 28%),
    linear-gradient(180deg, #f5f7fb 0%, #edf1f6 100%);
}

.panel,
.workspace-panel,
.workflow-drawer,
.assistant-chat-drawer,
.login-panel {
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 254, 255, 0.96));
  box-shadow: var(--card-shadow-mid), var(--card-highlight);
  transform: translateZ(0);
}

.panel,
.workspace-panel {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.panel:hover,
.workspace-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(188, 208, 235, 0.98);
  box-shadow: var(--card-shadow-high), var(--card-highlight);
}

.panel-header,
.workspace-section-head {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(232, 237, 246, 0.9);
}

.table-wrap,
.table-control-bar,
.pagination-bar,
.kpi-card,
.hero-stat,
.summary-card,
.highlight-panel,
.matrix-card,
.field-card,
.flow-step,
.workflow-section-card,
.workflow-summary-card,
.order-item-card,
.customer-info-card,
.detail-item,
.detail-block,
.calculator-selected-material,
.calculator-result-grid article,
.extension-status-card {
  border-color: rgba(222, 230, 241, 0.98);
  border-radius: 12px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: var(--card-shadow-low), var(--card-highlight);
}

.table-wrap,
.workflow-section-card,
.workflow-summary-card,
.order-item-card,
.detail-item,
.detail-block {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.workflow-section-card:hover,
.workflow-summary-card:hover,
.order-item-card:hover,
.detail-item:hover,
.detail-block:hover,
.customer-info-card:hover,
.kpi-card:hover,
.hero-stat:hover,
.summary-card:hover,
.matrix-card:hover,
.field-card:hover {
  transform: translateY(-2px);
  border-color: rgba(188, 208, 235, 0.98);
  box-shadow: var(--card-shadow-mid), var(--card-highlight);
}

.data-table th {
  background:
    linear-gradient(180deg, #f8fafd 0%, #eef3f8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.data-table tbody tr {
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.data-table tbody tr:hover td {
  background: #f7fbff;
}

.row-selected,
.workflow-tab-active,
.workspace-tab-active,
.workflow-step-active,
.workflow-picker-card-selected {
  position: relative;
  transform: translateY(-2px);
  border-color: rgba(64, 158, 255, 0.72) !important;
  background:
    linear-gradient(180deg, #f7fbff 0%, #ecf5ff 100%) !important;
  box-shadow:
    0 14px 30px rgba(64, 158, 255, 0.16),
    0 4px 10px rgba(64, 158, 255, 0.1),
    inset 4px 0 0 #409eff,
    var(--card-highlight) !important;
}

.workspace-tab,
.workflow-step,
.workflow-picker-card,
  .nav-stage,
  .tags-view-item,
  .primary-button,
  .ghost-button,
  .status-badge,
  .status-badge-auto {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.workspace-tab,
.workflow-step,
.workflow-picker-card {
  box-shadow: var(--card-shadow-low), var(--card-highlight);
}

.workspace-tab:hover,
.workflow-step:hover,
.workflow-picker-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-mid), var(--card-highlight);
}

.primary-button {
  box-shadow:
    0 8px 16px rgba(64, 158, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 22px rgba(64, 158, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.ghost-button {
  box-shadow: 0 4px 10px rgba(31, 45, 61, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.ghost-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(64, 158, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.admin-shell .topbar,
.admin-shell .tags-view-container {
  box-shadow:
    0 4px 14px rgba(31, 45, 61, 0.08),
    inset 0 -1px 0 rgba(232, 237, 246, 0.9);
}

.admin-shell .nav-stage {
  margin: 3px 8px;
  border-radius: 10px;
}

.admin-shell .nav-stage:hover,
.admin-shell .router-link-active.nav-stage,
.admin-shell .nav-stage-active {
  transform: translateX(3px);
  box-shadow:
    0 8px 18px rgba(0, 21, 41, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.admin-shell .tags-view-item {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(31, 45, 61, 0.06);
}

.admin-shell .tags-view-item:hover,
.admin-shell .tags-view-item.active {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(64, 158, 255, 0.18);
}

/* vfadmin-like sidebar menu */
.shell.admin-shell {
  grid-template-columns: 220px minmax(0, 1fr);
}

.shell.admin-shell.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}

.admin-shell .sidebar {
  background: #304156;
  color: #bfcbd9;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.18);
}

.admin-shell .brand {
  height: 56px;
  min-height: 56px;
  padding: 0 20px;
  background: #304156;
}

.admin-shell .brand-logo {
  width: 34px;
  height: 34px;
}

.admin-shell .brand h1 {
  color: #eef5fb;
  font-size: 17px;
  font-weight: 600;
}

.admin-shell .nav-stage-list {
  padding: 10px 0;
  overflow-y: auto;
}

.admin-shell .nav-stage-group {
  margin: 0;
}

.admin-shell .nav-stage {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 16px;
  min-height: 58px;
  margin: 0;
  padding: 0 24px 0 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #bfcbd9;
  box-shadow: none;
  transition: color 0.16s ease, background 0.16s ease;
}

.admin-shell .nav-stage-has-children {
  grid-template-columns: 26px minmax(0, 1fr) 18px;
}

.admin-shell .nav-stage:hover,
.admin-shell .router-link-active.nav-stage,
.admin-shell .nav-stage-active {
  transform: none;
  border-color: transparent;
  background: #263445;
  color: #d7e4f0;
  box-shadow: none;
}

.admin-shell .router-link-active.nav-stage::before,
.admin-shell .nav-stage-active::before {
  content: none;
}

.admin-shell .nav-stage-step {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.admin-shell .nav-stage-step svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.2;
}

.admin-shell .nav-stage-body strong {
  color: inherit;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}

.admin-shell .nav-stage-chevron {
  width: 18px;
  height: 18px;
}

.admin-shell .nav-stage-chevron svg {
  width: 18px;
  height: 18px;
}

.admin-shell .nav-stage-group-expanded .nav-stage-chevron {
  transform: rotate(180deg);
}

.admin-shell .nav-submenu {
  display: block;
  margin: 0;
  padding: 8px 0 12px 0;
  border-radius: 0;
  background: #1f2d3d;
}

.admin-shell .nav-subitem {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 0 16px 0 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #bfcbd9;
  font-size: 18px;
  font-weight: 500;
  box-shadow: none;
  transition: color 0.16s ease, background 0.16s ease;
}

.admin-shell .nav-stage-body strong,
.admin-shell .nav-subitem span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-shell .nav-subitem:hover,
.admin-shell .nav-subitem-active,
.admin-shell .router-link-active.nav-subitem {
  transform: none;
  border-color: transparent;
  background: rgba(64, 158, 255, 0.1);
  color: #d7e4f0;
  box-shadow: none;
}

.admin-shell .nav-subitem-active,
.admin-shell .router-link-active.nav-subitem {
  position: relative;
  background: rgba(64, 158, 255, 0.18);
  color: #66b1ff;
}

.admin-shell .nav-subitem-active::before,
.admin-shell .router-link-active.nav-subitem::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 24px;
  width: 4px;
  border-radius: 999px;
  background: #409eff;
  box-shadow: 0 0 12px rgba(64, 158, 255, 0.72);
}

.admin-shell .nav-subitem-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: inherit;
}

.admin-shell .nav-subitem-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-shell .nav-subitem-dot {
  display: none;
}

.admin-shell.sidebar-collapsed .nav-stage {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

.admin-shell.sidebar-collapsed .nav-stage-step {
  width: 26px;
  height: 26px;
}

.form-field input,
.form-field select,
.form-field textarea,
.table-search-field input,
.table-sort-field select,
.pagination-size-field select,
.assistant-chat-input textarea {
  box-shadow:
    inset 0 1px 2px rgba(31, 45, 61, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.8);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.table-search-field input:focus,
.table-sort-field select:focus,
.pagination-size-field select:focus,
.assistant-chat-input textarea:focus {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px rgba(64, 158, 255, 0.12),
    0 8px 16px rgba(64, 158, 255, 0.08),
    inset 0 1px 2px rgba(31, 45, 61, 0.04);
}

.workflow-drawer,
.assistant-chat-drawer {
  box-shadow:
    -18px 0 42px rgba(31, 45, 61, 0.18),
    0 12px 34px rgba(31, 45, 61, 0.12),
    var(--card-highlight);
}

.notification-toast-card {
  border-radius: 12px;
  box-shadow:
    0 16px 34px rgba(31, 45, 61, 0.16),
    0 4px 10px rgba(31, 45, 61, 0.1);
}

.status-badge,
.status-badge-auto,
.panel-tag,
.table-chip,
.table-badge,
.required-chip,
.optional-chip,
.topbar-tag {
  box-shadow:
    0 3px 8px rgba(31, 45, 61, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.status-badge:hover,
.status-badge-auto:hover,
.panel-tag:hover,
.table-chip:hover,
.table-badge:hover {
  transform: translateY(-1px);
  box-shadow:
    0 7px 14px rgba(31, 45, 61, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.login-panel {
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.12),
    var(--card-highlight);
}

.assistant-bot-face {
  box-shadow:
    0 6px 12px rgba(64, 158, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.inventory-unified-panel {
  display: grid;
  gap: 14px;
}

.inventory-warehouse-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 6px;
  border: 1px solid rgba(222, 230, 241, 0.98);
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafd 0%, #eef3f8 100%);
  box-shadow:
    inset 0 1px 2px rgba(31, 45, 61, 0.06),
    0 4px 12px rgba(31, 45, 61, 0.05);
}

.inventory-tabbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 6px;
  border: 1px solid rgba(222, 230, 241, 0.98);
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafd 0%, #eef3f8 100%);
  box-shadow:
    inset 0 1px 2px rgba(31, 45, 61, 0.06),
    0 4px 12px rgba(31, 45, 61, 0.05);
}

.inventory-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #606266;
  font: inherit;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.inventory-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(64, 158, 255, 0.18);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(236, 245, 255, 0.82));
  color: #409eff;
  box-shadow:
    0 5px 12px rgba(64, 158, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.inventory-tab-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inventory-tab-icon-semi {
  color: #e6a23c;
  border-color: rgba(230, 162, 60, 0.22);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(253, 246, 236, 0.86));
}

.inventory-tab-icon-finished {
  color: #67c23a;
  border-color: rgba(103, 194, 58, 0.24);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 249, 235, 0.88));
}

.inventory-tab-icon-auxiliary {
  color: #f56c6c;
  border-color: rgba(245, 108, 108, 0.22);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(254, 240, 240, 0.88));
}

.inventory-tab strong {
  color: inherit;
  font-weight: 700;
}

.inventory-tab span {
  color: #909399;
  font-size: 12px;
}

.inventory-tab:hover {
  transform: translateY(-1px);
  color: #409eff;
  background: rgba(255, 255, 255, 0.82);
}

.inventory-tab-active {
  transform: translateY(-2px);
  border-color: rgba(64, 158, 255, 0.34);
  background: #ffffff;
  color: #409eff;
  box-shadow:
    0 10px 20px rgba(64, 158, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.inventory-tab-active .inventory-tab-icon {
  transform: scale(1.06);
  border-color: currentColor;
}

.inventory-tab-active span {
  color: #409eff;
}

.inventory-tab-active .inventory-tab-icon {
  color: inherit;
}

.inventory-tab-panel {
  min-width: 0;
}

.inventory-section-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(64, 158, 255, 0), rgba(64, 158, 255, 0.22), rgba(64, 158, 255, 0));
}

.inventory-io-bar {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px 330px 12px 14px;
  border: 1px solid rgba(222, 230, 241, 0.96);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 253, 0.88)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    0 10px 24px rgba(31, 45, 61, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.inventory-io-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.inventory-io-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 32px;
  border-radius: 10px;
  color: #606266;
  background: rgba(245, 247, 250, 0.92);
  border: 1px solid rgba(220, 223, 230, 0.9);
  font-size: 13px;
  font-weight: 700;
}

.inventory-io-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px 0 8px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: #ffffff;
  color: #303133;
  font: inherit;
  cursor: pointer;
  box-shadow:
    0 6px 14px rgba(31, 45, 61, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.inventory-ledger-button {
  position: absolute;
  right: 190px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(64, 158, 255, 0.36);
  border-radius: 14px;
  color: #337ecc;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 245, 255, 0.94));
  box-shadow:
    0 10px 24px rgba(64, 158, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.production-work-order-inbound-button {
  right: 18px;
}

.inventory-ledger-button:hover {
  transform: translateY(-52%);
  border-color: rgba(64, 158, 255, 0.68);
  box-shadow:
    0 14px 30px rgba(64, 158, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.inventory-ledger-icon {
  width: 18px;
  height: 18px;
}

.inventory-ledger-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inventory-io-action:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px rgba(31, 45, 61, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.inventory-io-action strong {
  font-size: 13px;
  font-weight: 700;
}

.inventory-io-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
}

.inventory-io-action-in {
  border-color: rgba(103, 194, 58, 0.26);
}

.inventory-io-action-in .inventory-io-mark {
  color: #67c23a;
  background: rgba(240, 249, 235, 0.96);
  border: 1px solid rgba(103, 194, 58, 0.24);
}

.inventory-io-action-in:hover {
  color: #529b2e;
  border-color: rgba(103, 194, 58, 0.46);
}

.inventory-io-action-out {
  border-color: rgba(245, 108, 108, 0.24);
}

.inventory-io-action-out .inventory-io-mark {
  color: #f56c6c;
  background: rgba(254, 240, 240, 0.96);
  border: 1px solid rgba(245, 108, 108, 0.24);
}

.inventory-io-action-out:hover {
  color: #c45656;
  border-color: rgba(245, 108, 108, 0.46);
}

.warehouse-ledger-drawer {
  gap: 16px;
}

.warehouse-ledger-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.warehouse-ledger-summary-card {
  padding: 14px;
  border: 1px solid rgba(222, 230, 241, 0.96);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 253, 0.92)),
    rgba(255, 255, 255, 0.78);
  box-shadow:
    0 12px 28px rgba(31, 45, 61, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.warehouse-ledger-summary-card span {
  display: block;
  color: #606266;
  font-size: 12px;
}

.warehouse-ledger-summary-card strong {
  display: block;
  margin-top: 6px;
  color: #303133;
  font-size: 18px;
}

.warehouse-ledger-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(248, 251, 255, 0.98), rgba(241, 247, 255, 0.92)),
    rgba(255, 255, 255, 0.88);
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.warehouse-ledger-filter-fields {
  display: grid;
  grid-template-columns: minmax(240px, 1.45fr) minmax(118px, 0.55fr) minmax(180px, 1fr) repeat(2, minmax(132px, 0.7fr));
  gap: 12px;
  min-width: 0;
}

.warehouse-ledger-filter-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 9px;
  align-items: end;
  justify-content: flex-end;
}

.warehouse-ledger-filter-actions button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 14px;
  white-space: nowrap;
}

.warehouse-ledger-export-button {
  position: relative;
  overflow: hidden;
  color: #0f5b3d !important;
  border: 1px solid rgba(22, 163, 74, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(240, 253, 244, 0.98), rgba(220, 252, 231, 0.88)) !important;
  box-shadow:
    0 10px 22px rgba(22, 163, 74, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  font-weight: 850;
}

.warehouse-ledger-export-button::before {
  content: "⇩";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  border-radius: 7px;
  color: #ffffff;
  background: linear-gradient(135deg, #16a34a, #0f766e);
  box-shadow: 0 4px 10px rgba(15, 118, 110, 0.2);
  font-size: 12px;
  line-height: 1;
}

.warehouse-ledger-export-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(22, 163, 74, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.warehouse-ledger-table-wrap {
  max-height: min(58vh, 620px);
  margin-top: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.warehouse-ledger-table {
  min-width: max(100%, 1460px) !important;
  border-collapse: separate;
  border-spacing: 0;
}

.warehouse-ledger-table th,
.warehouse-ledger-table td {
  height: 58px;
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.7);
  color: #26364d;
}

.warehouse-ledger-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #34445d !important;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(237, 244, 255, 0.96));
  font-size: 12px;
  font-weight: 900 !important;
}

.warehouse-ledger-table td {
  background: rgba(255, 255, 255, 0.96);
}

.warehouse-ledger-table tbody tr:hover td {
  background: rgba(239, 246, 255, 0.92);
}

.warehouse-ledger-table .ledger-col-time {
  width: 132px;
}

.warehouse-ledger-table .ledger-col-direction {
  width: 70px;
}

.warehouse-ledger-table .ledger-col-type {
  width: 98px;
}

.warehouse-ledger-table .ledger-col-item {
  width: 168px;
}

.warehouse-ledger-table .ledger-col-lot {
  width: 160px;
}

.warehouse-ledger-table .ledger-col-qty,
.warehouse-ledger-table .ledger-col-weight {
  width: 104px;
}

.warehouse-ledger-table .ledger-col-price,
.warehouse-ledger-table .ledger-col-amount {
  width: 82px;
}

.warehouse-ledger-table .ledger-col-source {
  width: 126px;
}

.warehouse-ledger-table .ledger-col-operator {
  width: 96px;
}

.warehouse-ledger-table .ledger-col-logistics {
  width: 112px;
}

.warehouse-ledger-table .ledger-col-remark {
  width: 168px;
}

.warehouse-ledger-table .ledger-col-archive {
  width: 154px;
}

.warehouse-ledger-table th:last-child,
.warehouse-ledger-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 3;
  box-shadow: -12px 0 22px rgba(15, 23, 42, 0.06);
}

.warehouse-ledger-table th:last-child {
  z-index: 4;
}

.warehouse-ledger-remark-cell {
  color: #475569;
}

.warehouse-ledger-archive-cell {
  overflow: visible !important;
}

.warehouse-ledger-table .document-archive-actions {
  display: grid;
  grid-template-columns: 1fr;
  width: 132px;
  min-width: 0;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.94));
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.warehouse-ledger-table .document-archive-status {
  justify-content: center;
  min-height: 22px;
  padding: 0 7px;
  font-size: 11px;
  letter-spacing: 0.01em;
}

.warehouse-ledger-table .document-archive-status-dot {
  width: 6px;
  height: 6px;
}

.warehouse-ledger-table .document-archive-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.warehouse-ledger-table .document-archive-button {
  min-height: 25px;
  padding: 0;
  border-width: 1px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 0;
  letter-spacing: 0;
}

.warehouse-ledger-table .document-archive-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 7px 14px rgba(15, 23, 42, 0.1);
}

.warehouse-ledger-table .document-archive-icon {
  min-width: 22px;
  height: 20px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 10px;
}

@media (max-width: 1180px) {
  .warehouse-ledger-filters {
    grid-template-columns: 1fr;
  }

  .warehouse-ledger-filter-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .warehouse-ledger-filter-fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .warehouse-ledger-filter-fields,
  .warehouse-ledger-filter-actions {
    grid-template-columns: 1fr;
  }

  .warehouse-ledger-filter-actions {
    display: grid;
  }

  .warehouse-ledger-filter-actions button {
    width: 100%;
  }
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}

.status-pill.status-success {
  color: #529b2e;
  border-color: rgba(103, 194, 58, 0.32);
  background: rgba(240, 249, 235, 0.96);
}

.status-pill.status-warning {
  color: #b88230;
  border-color: rgba(230, 162, 60, 0.32);
  background: rgba(253, 246, 236, 0.96);
}

.status-pill.status-info {
  color: #337ecc;
  border-color: rgba(64, 158, 255, 0.32);
  background: rgba(236, 245, 255, 0.96);
}

.status-pill.status-muted {
  color: #606266;
  border-color: rgba(220, 223, 230, 0.86);
  background: rgba(245, 247, 250, 0.96);
}

.material-item-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 520px;
}

.material-item-chip {
  display: inline-grid;
  gap: 2px;
  max-width: 240px;
  padding: 6px 9px;
  border: 1px solid #d9ecff;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #ecf5ff 100%);
  color: #303133;
  box-shadow:
    0 4px 10px rgba(64, 158, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: default;
}

.material-item-chip strong,
.material-item-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-item-chip strong {
  color: #409eff;
  font-size: 12px;
}

.material-item-chip small {
  color: #606266;
  font-size: 11px;
}

.material-item-chip .material-performance-line {
  color: #2f7d4f;
}

.empty-inline {
  color: #909399;
  font-size: 12px;
}

@media (max-width: 720px) {
  .panel:hover,
  .workspace-panel:hover,
  .finance-board-panel:hover,
  .workflow-section-card:hover,
  .workflow-summary-card:hover,
  .order-item-card:hover,
  .detail-item:hover,
  .detail-block:hover {
    transform: none;
  }
}

/* Unified pagination bar */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding: 18px 24px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  background: #ffffff;
  color: #606266;
  box-shadow:
    0 10px 24px rgba(31, 45, 61, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.pagination-summary {
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}

.pagination-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: #303133;
  font-size: 14px;
}

.pagination-total-pages {
  margin-right: 2px;
  color: #606266;
  white-space: nowrap;
}

.pagination-page,
.pagination-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #303133;
  font: inherit;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.pagination-page:hover,
.pagination-arrow:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #f2f7ff;
  color: #409eff;
  box-shadow: 0 6px 12px rgba(64, 158, 255, 0.12);
}

.pagination-page-active {
  background: #ecf5ff;
  color: #409eff;
  font-weight: 700;
  box-shadow:
    0 8px 16px rgba(64, 158, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.pagination-arrow {
  min-width: 26px;
  padding: 0;
  color: #909399;
  font-size: 34px;
  line-height: 1;
}

.pagination-arrow:disabled {
  cursor: not-allowed;
  color: #c0c4cc;
  opacity: 0.62;
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 34px;
  color: #303133;
  letter-spacing: 0.08em;
}

.pagination-size-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 34px;
  margin-left: 8px;
  padding: 0 32px 0 14px;
  border-radius: 10px;
  background: #f4f6f8;
  color: #303133;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: inset 0 1px 1px rgba(31, 45, 61, 0.04);
}

.pagination-size-field::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #606266;
  border-bottom: 2px solid #606266;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.pagination-size-field span {
  color: #303133;
}

.pagination-size-field select {
  width: auto;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #303133;
  font: inherit;
  outline: none;
  appearance: none;
  box-shadow: none;
}

.pagination-size-field select:focus {
  box-shadow: none;
}

.admin-shell .form-field select,
.admin-shell .table-sort-field select,
.admin-shell .compact-select-field select,
.admin-shell select {
  min-height: 36px;
  border: 1px solid #dcdfe6 !important;
  border-radius: 4px !important;
  background-color: #ffffff !important;
  color: #606266 !important;
  box-shadow:
    inset 0 1px 2px rgba(31, 45, 61, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.8) !important;
  outline: none;
}

.admin-shell .form-field select:focus,
.admin-shell .table-sort-field select:focus,
.admin-shell .compact-select-field select:focus,
.admin-shell select:focus {
  border-color: #409eff !important;
  box-shadow:
    0 0 0 3px rgba(64, 158, 255, 0.12),
    0 8px 16px rgba(64, 158, 255, 0.08),
    inset 0 1px 2px rgba(31, 45, 61, 0.04) !important;
}

.admin-shell select option {
  background: #ffffff;
  color: #303133;
}

@media (max-width: 860px) {
  .pagination-bar {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .pagination-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .import-layout,
  .compact-summary-grid {
    grid-template-columns: 1fr;
  }

  .user-avatar-meta {
    display: none;
  }
}

.workflow-drawer .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
}

.workflow-drawer .data-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.workflow-drawer .data-table th {
  writing-mode: horizontal-tb;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  line-height: 1.35;
  vertical-align: middle;
}

.workflow-drawer .data-table td {
  min-width: 0;
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: anywhere;
}

.drawer-cell-ellipsis {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-cell-code {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1f5fa8;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-cell-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.drawer-data-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
}

.drawer-data-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.drawer-data-table th,
.drawer-data-table td {
  min-width: 0;
}

.drawer-table-head-label {
  display: inline-block;
  max-width: 100%;
  line-height: 1.35;
  white-space: normal;
  word-break: keep-all;
}

.drawer-cell-actions {
  text-align: center;
}

.mini-icon-button {
  border: 1px solid #d9e6f5;
  border-radius: 999px;
  background: #f5f9ff;
  color: #2f74c8;
  font-size: 12px;
  padding: 4px 9px;
  cursor: pointer;
}

.mini-icon-button:hover {
  border-color: #9fc9f5;
  background: #ecf5ff;
}

.drawer-row-detail td {
  background: #f8fbff;
}

.drawer-row-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.drawer-row-detail-grid article {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #e4edf7;
  border-radius: 12px;
  background: #ffffff;
}

.drawer-row-detail-grid span {
  color: #7a8699;
  font-size: 12px;
}

.drawer-row-detail-grid strong {
  color: #1f2d3d;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.inventory-ledger-detail-mask .dual-drawer-shell {
  width: min(1760px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
}

.inventory-ledger-detail-mask .workflow-drawer {
  min-width: 0;
}

.inventory-ledger-detail-mask .compact-side-drawer {
  width: min(820px, calc(50vw - 22px));
}

.work-order-detail-mask .dual-drawer-shell {
  width: min(1680px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
}

.work-order-detail-mask .workflow-drawer {
  min-width: 0;
}

.work-order-detail-mask .compact-side-drawer {
  width: min(800px, calc(50vw - 22px));
}

/* ERP visual upgrade foundation overrides */
body {
  font-family: var(--ui-font-body);
  color: var(--ui-ink);
  background:
    radial-gradient(circle at 16% 8%, rgba(37, 99, 235, 0.12), transparent 28%),
    linear-gradient(135deg, #eef3f7 0%, #f8fafc 48%, #e8eef5 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus);
}

/* Task 6 final overrides: formal data table system */
.table-wrap,
.drawer-data-table-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 16px;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  border: 1px solid rgba(209, 218, 232, 0.96);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0)) 0 0 / 24px 100% no-repeat,
    linear-gradient(270deg, rgba(232, 238, 247, 0.92), rgba(232, 238, 247, 0)) 100% 0 / 34px 100% no-repeat,
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:
    inset -18px 0 22px -28px rgba(37, 54, 77, 0.72),
    0 16px 38px rgba(31, 45, 61, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.92);
}

.drawer-data-table-wrap {
  margin-top: 0;
}

.data-table,
.drawer-data-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

.data-table th,
.data-table td {
  vertical-align: middle;
  border-bottom: 1px solid rgba(221, 228, 238, 0.95);
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(238, 244, 251, 0.98) 100%);
  color: #334155;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  writing-mode: horizontal-tb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 1px 0 rgba(209, 218, 232, 0.96);
}

.data-table td {
  color: #42526b;
  line-height: 1.45;
}

.data-table tbody tr {
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.data-table tbody tr:hover td {
  background: #f7fbff;
}

.data-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 rgba(64, 158, 255, 0.48);
}

.sortable-th-button {
  min-width: 0;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
}

.sortable-th-label,
.drawer-table-head-label {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  writing-mode: horizontal-tb;
}

.sort-arrow {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  color: #2563eb;
}

.sort-arrow:not(.sort-arrow-active)::before,
.sort-arrow:not(.sort-arrow-active)::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  border: solid currentColor;
  opacity: 0.42;
  transform: translateX(-50%) rotate(45deg);
}

.sort-arrow:not(.sort-arrow-active)::before {
  top: 4px;
  border-width: 1px 0 0 1px;
}

.sort-arrow:not(.sort-arrow-active)::after {
  bottom: 4px;
  border-width: 0 1px 1px 0;
}

.sort-arrow-active {
  display: inline-grid;
  place-items: center;
  color: #0f172a;
  font-size: 11px;
  font-weight: 800;
}

.drawer-data-table th,
.drawer-data-table td {
  max-width: 220px;
  min-width: 0;
}

.drawer-data-table th {
  max-width: 180px;
}

.drawer-data-table .drawer-cell-long,
.drawer-data-table .drawer-cell-code,
.drawer-data-table .drawer-cell-ellipsis {
  max-width: 220px;
}

.drawer-cell-ellipsis,
.drawer-cell-code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.drawer-cell-ellipsis {
  display: block;
}

.drawer-cell-code {
  display: inline-block;
  vertical-align: middle;
}

/* Task 7: smart drawer and form section system */
.smart-drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 2700;
  display: flex;
  justify-content: flex-end;
  padding: 18px;
  background:
    radial-gradient(circle at 78% 20%, rgba(14, 165, 233, 0.18), transparent 34%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.26), rgba(15, 23, 42, 0.52));
  backdrop-filter: blur(10px);
}

.smart-drawer-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(760px, 100%);
  max-height: calc(100vh - 36px);
  overflow: hidden;
  border: 1px solid rgba(195, 209, 226, 0.86);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 253, 0.98) 100%);
  box-shadow:
    0 34px 90px rgba(15, 23, 42, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.smart-drawer-shell::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--ui-steel), var(--ui-cyan), rgba(22, 163, 74, 0.74));
}

.smart-drawer-xl {
  width: min(1040px, 100%);
}

.smart-drawer-fullscreen {
  width: min(1440px, 100%);
}

.smart-drawer-header,
.smart-drawer-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
}

.smart-drawer-header {
  border-bottom: 1px solid rgba(214, 224, 236, 0.9);
  background:
    linear-gradient(135deg, rgba(248, 251, 255, 0.98), rgba(236, 244, 252, 0.92));
}

.smart-drawer-footer {
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid rgba(214, 224, 236, 0.9);
  background: rgba(248, 251, 255, 0.96);
}

.smart-drawer-heading {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.smart-drawer-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.smart-drawer-eyebrow,
.form-section-eyebrow,
.metric-strip-label {
  margin: 0;
  color: var(--ui-steel);
  font-family: var(--ui-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.smart-drawer-title {
  margin: 0;
  color: #0f172a;
  font-family: var(--ui-font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.08;
}

.smart-drawer-description {
  max-width: 68ch;
  margin: 0;
  color: var(--ui-ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

.smart-drawer-close {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(194, 207, 224, 0.92);
  border-radius: 14px;
  color: var(--ui-ink-soft);
  background: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transition:
    transform var(--ui-transition-fast),
    border-color var(--ui-transition-fast),
    color var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast);
}

.smart-drawer-close:hover {
  color: #0f172a;
  border-color: rgba(37, 99, 235, 0.32);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
}

.smart-drawer-close .app-icon {
  width: 18px;
  height: 18px;
}

.smart-drawer-body {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding: 22px 24px 26px;
  overflow: auto;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(248, 251, 255, 0.96));
}

.form-section {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(211, 222, 236, 0.92);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.form-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.form-section-heading {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.form-section-title {
  margin: 0;
  color: #142033;
  font-family: var(--ui-font-display);
  font-size: 18px;
  line-height: 1.2;
}

.form-section-description {
  margin: 0;
  color: var(--ui-ink-muted);
  font-size: 13px;
  line-height: 1.55;
}

.form-section-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.form-section-grid {
  display: grid;
  gap: 14px;
  align-items: start;
}

.form-section-columns-1 .form-section-grid {
  grid-template-columns: minmax(0, 1fr);
}

.form-section-columns-2 .form-section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-section-columns-3 .form-section-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.metric-strip-item {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 15px 16px;
  overflow: hidden;
  border: 1px solid rgba(205, 217, 232, 0.9);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 247, 255, 0.92));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.metric-strip-item::after {
  content: "";
  position: absolute;
  inset: auto 14px 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--ui-steel), rgba(14, 165, 233, 0.34));
}

.metric-strip-value {
  min-width: 0;
  color: #0f172a;
  font-family: var(--ui-font-display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.metric-strip-hint {
  color: var(--ui-ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .smart-drawer-mask {
    padding: 0;
  }

  .smart-drawer-shell,
  .smart-drawer-xl,
  .smart-drawer-fullscreen {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .smart-drawer-header,
  .smart-drawer-footer,
  .smart-drawer-body {
    padding-right: 18px;
    padding-left: 18px;
  }

  .smart-drawer-header,
  .form-section-header {
    flex-direction: column;
  }

  .smart-drawer-actions {
    width: 100%;
    justify-content: flex-start;
    padding-right: 48px;
  }

  .smart-drawer-close {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .smart-drawer-heading {
    padding-right: 48px;
  }

  .form-section-columns-2 .form-section-grid,
  .form-section-columns-3 .form-section-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-section-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Task 8: elevated searchable select overlay for long business options. */
.global-select-layer.global-select-layer {
  z-index: 3100;
  pointer-events: none;
}

.global-select-layer .global-select-input-box {
  pointer-events: auto;
}

.global-select-layer .global-select-search-input {
  height: 100%;
  border: 1px solid rgba(113, 133, 158, 0.28);
  border-radius: 14px;
  color: #102033;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 253, 0.96));
  font-family: var(--ui-font-body);
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 0 38px 0 14px;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.1),
    0 16px 34px rgba(15, 23, 42, 0.14);
  transition:
    border-color var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast),
    background var(--ui-transition-fast);
}

.global-select-layer .global-select-search-input:focus {
  border-color: rgba(37, 99, 235, 0.48);
  background: #ffffff;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.16),
    0 20px 42px rgba(15, 23, 42, 0.18);
}

.global-select-layer .global-select-search-input::placeholder {
  color: #93a4b7;
}

.global-select-layer .global-select-arrow {
  right: 15px;
  width: 9px;
  height: 9px;
  border-color: #71859e;
}

.global-select-layer .global-select-panel {
  overflow: hidden;
  border: 1px solid rgba(190, 205, 222, 0.92);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 252, 0.96));
  box-shadow:
    0 26px 70px rgba(15, 23, 42, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.75) inset;
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.global-select-layer .global-select-option-list {
  display: grid;
  gap: 6px;
  padding: 7px;
  scrollbar-gutter: stable;
}

.global-select-layer .global-select-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #18283a;
  background: transparent;
  text-align: left;
  transition:
    background var(--ui-transition-fast),
    border-color var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast);
}

.global-select-layer .global-select-option:hover,
.global-select-layer .global-select-option-active {
  color: #102033;
  border-color: rgba(37, 99, 235, 0.2);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(232, 245, 255, 0.86));
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.1);
}

.global-select-layer .global-select-option-selected {
  border-color: rgba(37, 99, 235, 0.32);
  color: #0f3f8f;
  background:
    linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(236, 253, 245, 0.72));
  box-shadow:
    0 12px 28px rgba(37, 99, 235, 0.12),
    3px 0 0 rgba(37, 99, 235, 0.72) inset;
}

.global-select-layer .global-select-option-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  color: inherit;
  font-family: var(--ui-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.24;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-select-layer .global-select-option-sub {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  color: #50657a;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-select-layer .global-select-option-meta {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  color: #64748b;
  background: rgba(226, 232, 240, 0.72);
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-select-layer .global-select-option-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(0.2);
  transform: none;
}

.global-select-layer .global-select-option-disabled:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.global-select-layer .global-select-empty {
  margin: 4px;
  padding: 18px 12px;
  border-radius: 14px;
  color: #71859e;
  background: rgba(241, 245, 249, 0.72);
  text-align: center;
}

.warehouse-switchboard {
  display: grid;
  grid-template-columns: repeat(6, minmax(128px, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(188, 204, 224, 0.72);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 197, 94, 0.16), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(14, 165, 233, 0.17), transparent 32%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(239, 246, 255, 0.9));
  box-shadow:
    0 22px 48px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.warehouse-tab-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: 18px;
  color: #334155;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.78)),
    rgba(255, 255, 255, 0.78);
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  cursor: pointer;
  text-align: left;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.warehouse-tab-card::after {
  position: absolute;
  right: -18px;
  bottom: -28px;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  opacity: 0.07;
}

.warehouse-tab-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 116, 144, 0.28);
  box-shadow:
    0 16px 30px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.warehouse-tab-card-active {
  color: #0f766e;
  transform: translateY(-3px);
  border: 2px solid color-mix(in srgb, currentColor 72%, white 28%);
  background:
    radial-gradient(circle at 94% 18%, color-mix(in srgb, currentColor 16%, transparent), transparent 34%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, currentColor 10%, white 90%)),
    #ffffff;
  box-shadow:
    0 0 0 5px color-mix(in srgb, currentColor 14%, transparent),
    0 24px 44px color-mix(in srgb, currentColor 22%, transparent),
    inset 6px 0 0 currentColor,
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.warehouse-tab-card-active::before {
  position: absolute;
  top: 8px;
  right: 9px;
  z-index: 2;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, currentColor 30%, white 70%);
  border-radius: 999px;
  color: currentColor;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 18px color-mix(in srgb, currentColor 14%, transparent);
  content: "当前";
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.warehouse-tab-card-active::after {
  width: 96px;
  height: 96px;
  opacity: 0.14;
}

.warehouse-tab-card-active:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, currentColor 78%, white 22%);
  box-shadow:
    0 0 0 5px color-mix(in srgb, currentColor 16%, transparent),
    0 28px 52px color-mix(in srgb, currentColor 26%, transparent),
    inset 6px 0 0 currentColor,
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.warehouse-tab-card-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  opacity: 0.92;
}

.warehouse-tab-card-icon .app-icon {
  width: 20px;
  height: 20px;
}

.warehouse-tab-card-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.warehouse-tab-card-copy strong {
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.warehouse-tab-card-copy span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.warehouse-tab-card-active .warehouse-tab-card-copy span {
  color: #0f766e;
}

.warehouse-tab-card.inventory-tab-icon-raw {
  color: #2563eb;
}

.warehouse-tab-card.inventory-tab-icon-semi {
  color: #b45309;
}

.warehouse-tab-card.inventory-tab-icon-finished {
  color: #15803d;
}

.warehouse-tab-card.inventory-tab-icon-auxiliary {
  color: #be123c;
}

.warehouse-tab-card.inventory-tab-icon-scrap {
  color: #475569;
}

.warehouse-tab-card.inventory-tab-icon-return {
  color: #7c3aed;
}

.warehouse-operation-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.52fr);
  gap: 14px;
  align-items: stretch;
}

.inventory-page-feedback {
  display: grid;
  gap: 10px;
  margin: 16px 0 18px;
}

.warehouse-operation-group {
  position: relative;
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.88)),
    #ffffff;
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.warehouse-operation-group::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  content: "";
}

.warehouse-operation-group header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.warehouse-operation-group header strong {
  color: #172033;
  font-size: 16px;
  font-weight: 900;
}

.warehouse-operation-kicker {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.warehouse-operation-actions,
.warehouse-tool-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.warehouse-operation-button,
.warehouse-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 13px;
  color: #1e293b;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  cursor: pointer;
  font: inherit;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}

.warehouse-operation-button .app-icon,
.warehouse-tool-button .app-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.warehouse-operation-button strong,
.warehouse-tool-button strong {
  color: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.warehouse-operation-button:hover,
.warehouse-tool-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.warehouse-operation-group-in {
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 197, 94, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 253, 244, 0.72));
}

.warehouse-operation-group-in::before {
  background: linear-gradient(180deg, #22c55e, #86efac);
}

.warehouse-operation-button-in {
  border-color: rgba(34, 197, 94, 0.24);
  color: #15803d;
}

.warehouse-operation-button-in:hover {
  border-color: rgba(34, 197, 94, 0.48);
  background: rgba(240, 253, 244, 0.96);
}

.warehouse-operation-group-out {
  background:
    radial-gradient(circle at 100% 0%, rgba(239, 68, 68, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 241, 242, 0.7));
}

.warehouse-operation-group-out::before {
  background: linear-gradient(180deg, #ef4444, #fda4af);
}

.warehouse-operation-button-out {
  border-color: rgba(239, 68, 68, 0.23);
  color: #be123c;
}

.warehouse-operation-button-out:hover {
  border-color: rgba(239, 68, 68, 0.46);
  background: rgba(255, 241, 242, 0.96);
}

.warehouse-operation-group-tools {
  background:
    radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.15), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(239, 246, 255, 0.72));
}

.warehouse-operation-group-tools::before {
  background: linear-gradient(180deg, #0ea5e9, #67e8f9);
}

.warehouse-tool-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.warehouse-tool-button {
  width: 100%;
  color: #0369a1;
}

.warehouse-tool-button:hover {
  border-color: rgba(14, 165, 233, 0.44);
  background: rgba(240, 249, 255, 0.96);
}

.warehouse-tool-button-primary {
  color: #0f766e;
  border-color: rgba(20, 184, 166, 0.3);
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.96), rgba(236, 253, 245, 0.84)),
    #ffffff;
}

.warehouse-tool-button-primary:hover {
  border-color: rgba(20, 184, 166, 0.54);
}

@media (max-width: 1180px) {
  .warehouse-switchboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .warehouse-operation-zone {
    grid-template-columns: minmax(0, 1fr);
  }

  .warehouse-tool-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .warehouse-switchboard {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px;
    border-radius: 18px;
  }

  .warehouse-tab-card {
    min-height: 64px;
  }

  .warehouse-operation-group {
    padding: 14px;
    border-radius: 18px;
  }

  .warehouse-operation-actions,
  .warehouse-tool-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .warehouse-operation-button,
  .warehouse-tool-button {
    width: 100%;
  }
}

/* Task 10A: purchase chain page hero system */
.page-hero-card {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  min-height: 132px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid rgba(190, 205, 224, 0.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(14, 165, 233, 0.16), transparent 32%),
    radial-gradient(circle at 92% 16%, rgba(22, 163, 74, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 247, 252, 0.94) 58%, rgba(232, 239, 247, 0.9) 100%);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.page-hero-card::before {
  content: "";
  position: absolute;
  inset: 18px auto 18px 0;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--ui-steel), var(--ui-cyan), var(--ui-green));
}

.page-hero-card::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 168px;
  height: 44px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.08) 1px, transparent 1px) 0 0 / 18px 100%,
    rgba(255, 255, 255, 0.2);
  opacity: 0.62;
  pointer-events: none;
}

.page-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.page-hero-card .eyebrow {
  margin: 0;
  color: var(--ui-steel);
  font-family: var(--ui-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-hero-card h3 {
  margin: 0;
  color: #0f172a;
  font-family: var(--ui-font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 850;
  line-height: 1.08;
}

.page-hero-subtitle {
  max-width: 68ch;
  margin: 0;
  color: var(--ui-ink-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
}

.page-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  max-width: 420px;
}

.page-hero-actions .panel-tag {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.purchase-chain-hero {
  margin-bottom: 16px;
}

.purchase-receipt-hero {
  background:
    radial-gradient(circle at 10% 0%, rgba(22, 163, 74, 0.16), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(14, 165, 233, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 250, 246, 0.94) 58%, rgba(235, 245, 240, 0.9) 100%);
}

.quality-inspection-hero {
  background:
    radial-gradient(circle at 10% 0%, rgba(217, 119, 6, 0.16), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(37, 99, 235, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 249, 242, 0.94) 56%, rgba(244, 246, 250, 0.9) 100%);
}

.status-badge-stack {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.receipt-line-meta-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.drawer-row-detail-grid strong.status-badge-stack {
  justify-content: flex-start;
}

/* Keep wide business tables inside their scroll containers instead of stretching the whole page. */
.page-grid,
.page-grid > *,
.panel,
.table-wrap {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 860px) {
  .page-hero-card {
    flex-direction: column;
    min-height: 0;
    padding: 18px;
  }

  .page-hero-actions {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .page-hero-actions > button {
    width: 100%;
  }
}

/* Task 10B: sales and delivery pages reuse the page hero system without changing table rules. */
.sales-chain-hero {
  margin-bottom: 16px;
}

.sales-chain-hero.page-hero-card {
  border-color: rgba(176, 196, 218, 0.94);
}

.sales-planning-hero {
  background:
    radial-gradient(circle at 10% 0%, rgba(20, 184, 166, 0.16), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(37, 99, 235, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 250, 0.94) 56%, rgba(234, 242, 252, 0.9) 100%);
}

.sales-order-hero {
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.15), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(14, 165, 233, 0.13), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 247, 252, 0.94) 58%, rgba(232, 239, 247, 0.9) 100%);
}

.delivery-ledger-hero {
  background:
    radial-gradient(circle at 10% 0%, rgba(14, 165, 233, 0.15), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(245, 158, 11, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 249, 255, 0.94) 56%, rgba(248, 244, 234, 0.9) 100%);
}

.sales-chain-hero .page-hero-actions {
  row-gap: 10px;
}

.sales-planning-hero .page-hero-actions {
  max-width: 540px;
}

.sales-chain-hero .supplier-action-bar {
  flex-wrap: wrap;
  justify-content: flex-end;
  border-color: rgba(207, 219, 234, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 251, 255, 0.76)),
    rgba(255, 255, 255, 0.66);
}

.sales-chain-hero .supplier-exchange-group {
  flex-wrap: wrap;
}

.sales-chain-hero .contract-header-button,
.sales-chain-hero .primary-button {
  min-height: 38px;
}

@media (max-width: 860px) {
  .sales-chain-hero .supplier-action-bar {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .sales-chain-hero .supplier-action-bar,
  .sales-chain-hero .supplier-exchange-group {
    width: 100%;
  }

  .sales-chain-hero .supplier-exchange-group {
    padding-left: 0;
    border-left: 0;
  }

  .sales-chain-hero .supplier-action-button,
  .sales-chain-hero .supplier-exchange-group .supplier-action-button {
    flex: 1 1 100%;
  }
}

/* Task 10C: production pages align with the page hero system without touching table rules. */
.production-chain-hero,
.operation-chain-hero {
  margin-bottom: 16px;
  border-color: rgba(176, 196, 218, 0.94);
}

.production-ledger-hero {
  background:
    radial-gradient(circle at 10% 0%, rgba(22, 163, 74, 0.16), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(37, 99, 235, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 252, 246, 0.94) 56%, rgba(234, 242, 252, 0.9) 100%);
}

.operation-report-hero {
  background:
    radial-gradient(circle at 10% 0%, rgba(14, 165, 233, 0.16), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(217, 119, 6, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 249, 255, 0.94) 56%, rgba(251, 247, 238, 0.9) 100%);
}

.operation-filter-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -2px 0 14px;
  padding: 10px;
  border: 1px solid rgba(207, 219, 234, 0.86);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.82)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.operation-filter-default {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.92);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.operation-filter-field {
  display: inline-grid;
  grid-template-columns: auto minmax(132px, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 8px 4px 12px;
  border: 1px solid rgba(207, 219, 234, 0.78);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ui-ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.operation-filter-field input {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  background: rgba(241, 245, 249, 0.88);
  color: var(--ui-ink);
  font-size: 12px;
  font-weight: 700;
}

.operation-filter-ribbon .ghost-button {
  min-height: 34px;
}

.production-compact-tip,
.production-ledger-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(186, 203, 222, 0.78);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.86)),
    rgba(255, 255, 255, 0.72);
  color: var(--ui-ink-soft);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.production-compact-tip strong,
.production-ledger-note strong {
  color: #0f172a;
  font-weight: 850;
  white-space: nowrap;
}

.production-compact-tip span,
.production-ledger-note span {
  min-width: 0;
}

.production-mode-tip {
  margin-bottom: 14px;
  border-color: rgba(245, 158, 11, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 237, 0.84)),
    rgba(255, 255, 255, 0.72);
  color: #92400e;
}

.production-mode-tip strong {
  color: #78350f;
}

.production-mode-tip .field-hint {
  flex: 0 0 auto;
  margin-left: 0;
}

.production-ledger-note {
  margin: 14px 0;
}

.production-drawer-tip {
  margin-top: 14px;
}

@media (max-width: 860px) {
  .operation-filter-ribbon {
    align-items: stretch;
  }

  .operation-filter-field {
    flex: 1 1 220px;
  }
}

@media (max-width: 560px) {
  .operation-filter-ribbon,
  .production-compact-tip,
  .production-ledger-note {
    align-items: stretch;
  }

  .operation-filter-default,
  .operation-filter-field,
  .operation-filter-ribbon .ghost-button {
    width: 100%;
  }

  .production-compact-tip,
  .production-ledger-note {
    flex-direction: column;
  }

  .production-compact-tip strong,
  .production-ledger-note strong {
    white-space: normal;
  }
}

/* Task 11: finance and system permission precision console polish */
.finance-precision-panel,
.system-permission-page,
.system-permission-map-card,
.system-permission-maintenance-card,
.org-permission-tree-card {
  min-width: 0;
}

.finance-precision-panel {
  overflow: hidden;
  border-color: rgba(190, 205, 224, 0.9);
  border-radius: 26px;
  background:
    radial-gradient(circle at 4% 0%, rgba(14, 165, 233, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 252, 0.92));
  box-shadow: var(--ui-shadow-card);
}

.finance-report-hero.page-hero-card {
  margin: 0 0 14px;
  border: 0;
  border-radius: 0 0 24px 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(14, 165, 233, 0.14), transparent 32%),
    radial-gradient(circle at 92% 20%, rgba(217, 119, 6, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 246, 252, 0.94) 58%, rgba(234, 240, 247, 0.9));
}

.finance-report-hero .title-with-help,
.system-permission-hero-card .page-hero-copy {
  min-width: 0;
}

.finance-report-hero .title-with-help h3 {
  margin: 0;
}

.filter-ribbon,
.finance-filter-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(207, 219, 234, 0.88);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.84)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.finance-filter-ribbon.page-hero-actions {
  max-width: min(620px, 100%);
  align-content: center;
  justify-content: flex-end;
}

.finance-filter-ribbon .finance-compact-field {
  display: inline-grid;
  grid-template-columns: auto minmax(132px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 4px 8px 4px 12px;
  border: 1px solid rgba(207, 219, 234, 0.8);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.finance-filter-ribbon .finance-compact-field span {
  margin: 0;
  color: var(--ui-ink-soft);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.finance-filter-ribbon .finance-compact-field input {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  background: rgba(241, 245, 249, 0.9);
  color: var(--ui-ink);
  font-size: 12px;
  font-weight: 700;
}

.finance-filter-ribbon .ghost-button,
.finance-filter-ribbon .primary-button {
  min-height: 36px;
  border-radius: 12px;
  padding-inline: 14px;
  font-size: 12px;
}

.finance-precision-panel > .table-control-bar {
  margin: 0 18px 12px;
}

.finance-precision-panel .finance-inline-stats {
  margin-top: 0;
}

.finance-precision-panel .finance-inline-stat {
  border-radius: 18px;
  border: 1px solid rgba(190, 205, 224, 0.9);
  border-color: rgba(190, 205, 224, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.finance-precision-panel .finance-inline-stat span {
  color: var(--ui-ink-muted);
}

.finance-precision-panel .finance-inline-stat strong {
  color: #0f172a;
  font-family: var(--ui-font-display);
  font-variant-numeric: tabular-nums;
}

.finance-precision-panel .finance-inline-stat-steel {
  border-color: rgba(14, 165, 233, 0.3);
}

.finance-precision-panel .finance-inline-stat-copper {
  border-color: rgba(217, 119, 6, 0.28);
}

.finance-precision-panel .finance-inline-stat-success {
  border-color: rgba(22, 163, 74, 0.28);
}

.finance-precision-panel .finance-inline-stat-danger {
  border-color: rgba(220, 38, 38, 0.3);
}

.finance-precision-panel .finance-board-tags {
  padding-bottom: 14px;
}

.finance-precision-panel .finance-sheet-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
}

.finance-precision-panel .finance-sheet-table {
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: fixed;
  border: 1px solid rgba(190, 205, 224, 0.92);
  border-color: rgba(190, 205, 224, 0.92);
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.finance-precision-panel .finance-sheet-table th,
.finance-precision-panel .finance-sheet-table td {
  border-right: 1px solid rgba(207, 219, 234, 0.92);
  border-bottom: 1px solid rgba(207, 219, 234, 0.92);
  border-color: rgba(207, 219, 234, 0.92);
  color: #334155;
  font-size: 12px;
  line-height: 1.45;
}

.finance-precision-panel .finance-sheet-table th:last-child,
.finance-precision-panel .finance-sheet-table td:last-child {
  border-right: 0;
}

.finance-precision-panel .finance-sheet-table tbody td,
.finance-precision-panel .finance-sheet-table tbody tr:nth-child(even) td {
  background: #ffffff;
}

.finance-precision-panel .finance-sheet-table tbody tr:hover td {
  background: #f8fbff;
}

.finance-precision-panel .finance-sheet-title-row th {
  top: 0;
  z-index: 28;
  background:
    linear-gradient(90deg, rgba(217, 119, 6, 0.1), rgba(14, 165, 233, 0.12), rgba(217, 119, 6, 0.1)),
    linear-gradient(180deg, #f8fafc, #eef4fa);
  color: #0f172a;
  font-family: var(--ui-font-display);
  font-size: 22px;
  letter-spacing: 0.06em;
}

.finance-precision-panel .finance-sheet-group-row th {
  top: 58px;
  z-index: 27;
  background: linear-gradient(180deg, #eef6ff, #e8f0f8);
  color: #1e3a5f;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.finance-precision-panel .finance-sheet-column-row th {
  top: 104px;
  z-index: 26;
  background: linear-gradient(180deg, #f8fafc, #eef3f8);
  color: #334155;
  font-weight: 850;
}

.finance-precision-panel .finance-sheet-table tbody .finance-sticky-cell {
  z-index: 16;
  background: #fbfdff;
  box-shadow: 1px 0 0 rgba(207, 219, 234, 0.95);
}

.finance-precision-panel .finance-sheet-column-row .finance-sticky-cell,
.finance-precision-panel .finance-sheet-group-row .finance-sticky-cell,
.finance-precision-panel .finance-sheet-title-row .finance-sticky-cell {
  z-index: 32;
}

.finance-precision-panel .finance-sticky-1 {
  left: 0;
}

.finance-precision-panel .finance-sticky-2 {
  left: 84px;
}

.finance-precision-panel .finance-sticky-3 {
  left: 200px;
}

.finance-precision-panel .finance-sticky-4 {
  left: 360px;
}

.finance-precision-panel .finance-sticky-5 {
  left: 520px;
}

.finance-precision-panel .finance-code-cell strong {
  color: #0f172a;
}

.finance-precision-panel .finance-code-cell small,
.finance-precision-panel .finance-note-cell span {
  color: var(--ui-ink-muted);
}

.finance-precision-panel .finance-mode-chip {
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-color: rgba(14, 165, 233, 0.22);
  background: #eff8ff;
  color: #0369a1;
  font-weight: 800;
}

.finance-precision-panel .finance-mode-self {
  border-color: rgba(14, 165, 233, 0.22);
}

.finance-precision-panel .finance-mode-customer {
  border-color: rgba(22, 163, 74, 0.24);
  background: #f0fdf4;
  color: #15803d;
}

.finance-precision-panel .finance-mode-outsource {
  border-color: rgba(217, 119, 6, 0.25);
  background: #fff7ed;
  color: #b45309;
}

.finance-precision-panel .finance-sheet-row-warning td {
  box-shadow: inset 0 1px 0 rgba(217, 119, 6, 0.1);
}

.finance-precision-panel .finance-sheet-row-loss td,
.finance-precision-panel .finance-sheet-row-loss .finance-sticky-cell {
  background: #fff5f5 !important;
}

.finance-precision-panel .finance-empty-cell {
  color: var(--ui-ink-muted);
  background: #f8fafc !important;
}

.finance-precision-panel .finance-rollup-table,
.finance-precision-panel .finance-expense-table {
  border: 1px solid rgba(190, 205, 224, 0.92);
  border-color: rgba(190, 205, 224, 0.92);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.9));
}

.finance-precision-panel .finance-rollup-table th,
.finance-precision-panel .finance-rollup-table td,
.finance-precision-panel .finance-expense-table th,
.finance-precision-panel .finance-expense-table td {
  border-right: 1px solid rgba(207, 219, 234, 0.86);
  border-bottom: 1px solid rgba(207, 219, 234, 0.86);
}

.finance-precision-panel .finance-rollup-table th:last-child,
.finance-precision-panel .finance-rollup-table td:last-child,
.finance-precision-panel .finance-expense-table th:last-child,
.finance-precision-panel .finance-expense-table td:last-child {
  border-right: 0;
}

.finance-precision-panel .finance-rollup-table tr:last-child th,
.finance-precision-panel .finance-rollup-table tr:last-child td,
.finance-precision-panel .finance-expense-table tr:last-child th,
.finance-precision-panel .finance-expense-table tr:last-child td {
  border-bottom: 0;
}

.finance-expense-drawer {
  border-left: 1px solid rgba(190, 205, 224, 0.95);
  background:
    radial-gradient(circle at 0 0, rgba(14, 165, 233, 0.1), transparent 34%),
    linear-gradient(180deg, #ffffff, #f6f9fc);
}

.finance-expense-grid {
  align-items: start;
}

.finance-expense-drawer .workflow-section-card,
.finance-expense-drawer .workflow-summary-card {
  border-color: rgba(190, 205, 224, 0.92);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.finance-expense-drawer .table-wrap {
  overflow-x: auto;
}

.system-permission-page {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.system-permission-page .system-permission-hero-card.page-hero-card {
  min-height: 128px;
  padding: 22px 24px;
  border-color: rgba(190, 205, 224, 0.92);
  background:
    radial-gradient(circle at 8% 0%, rgba(14, 165, 233, 0.15), transparent 32%),
    radial-gradient(circle at 92% 16%, rgba(37, 99, 235, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 252, 0.94) 58%, rgba(232, 239, 247, 0.9));
}

.system-permission-page .system-permission-hero-card h3 {
  margin: 0;
  color: #0f172a;
  font-family: var(--ui-font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.08;
}

.admin-tab-switcher.system-permission-main-tabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(190, 205, 224, 0.92);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.84)),
    rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.admin-tab-switcher.system-permission-main-tabs button {
  min-width: 150px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 10px 16px;
  color: var(--ui-ink-soft);
  background: transparent;
  font-family: var(--ui-font-display);
  font-weight: 850;
}

.admin-tab-switcher.system-permission-main-tabs button.active {
  border-color: rgba(14, 165, 233, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 248, 255, 0.92));
  color: #0f5f96;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.08),
    inset 0 3px 0 rgba(14, 165, 233, 0.72);
}

.system-permission-map-card,
.system-permission-maintenance-card {
  border: 1px solid rgba(190, 205, 224, 0.92);
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, rgba(14, 165, 233, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 253, 0.92));
  box-shadow: var(--ui-shadow-card);
}

.system-permission-page .section-head {
  align-items: flex-start;
}

.mindmap-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.org-view-switch,
.mindmap-toolbar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(207, 219, 234, 0.88);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

.org-view-switch button,
.mindmap-toolbar button {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 10px;
  background: transparent;
  color: var(--ui-ink-soft);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.org-view-switch button.active,
.mindmap-toolbar button:hover {
  border-color: rgba(14, 165, 233, 0.22);
  background: #eff8ff;
  color: #0369a1;
}

.maintenance-table-panel,
.employee-panel,
.org-tree-panel {
  min-width: 0;
}

.maintenance-table-panel .table-wrap,
.employee-panel .table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(190, 205, 224, 0.9);
  border-radius: 18px;
  background: #ffffff;
}

.maintenance-table-panel .data-table,
.org-employee-table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.maintenance-table-panel .data-table th,
.maintenance-table-panel .data-table td,
.org-employee-table th,
.org-employee-table td {
  border-bottom: 1px solid rgba(207, 219, 234, 0.86);
}

.maintenance-table-panel .data-table thead th,
.org-employee-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #f8fafc, #eef3f8);
  color: #334155;
  font-family: var(--ui-font-display);
  font-weight: 850;
}

.maintenance-table-panel .data-table tbody tr:hover td,
.org-employee-table tbody tr:hover td {
  background: #f8fbff;
}

.system-permission-drawer {
  border-left: 1px solid rgba(190, 205, 224, 0.95);
  background:
    radial-gradient(circle at 0 0, rgba(14, 165, 233, 0.1), transparent 34%),
    linear-gradient(180deg, #ffffff, #f6f9fc);
}

.system-permission-drawer .drawer-header,
.finance-expense-drawer .workflow-drawer-head {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(207, 219, 234, 0.86);
}

.authorize-summary,
.permission-tree,
.selected-manager-tags,
.manager-search-box,
.manager-option-grid {
  border-color: rgba(190, 205, 224, 0.9);
}

.org-context-menu {
  border: 1px solid rgba(190, 205, 224, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--ui-shadow-float);
}

.org-context-menu button:hover {
  background: #eff8ff;
  color: #0369a1;
}

.org-permission-tree-card .org-tree-panel,
.org-permission-tree-card .employee-panel {
  border-color: rgba(190, 205, 224, 0.92);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92));
}

.org-permission-tree-card .employee-search-field {
  border: 1px solid rgba(207, 219, 234, 0.88);
  border-radius: 16px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.82);
}

.org-permission-tree-card .employee-search-field input {
  background: #f8fafc;
}

@media (max-width: 980px) {
  .finance-report-hero.page-hero-card,
  .system-permission-page .system-permission-hero-card.page-hero-card {
    flex-direction: column;
  }

  .finance-filter-ribbon.page-hero-actions,
  .mindmap-card-actions {
    justify-content: flex-start;
  }

  .finance-filter-ribbon .finance-compact-field {
    flex: 1 1 190px;
  }

  .system-permission-page .section-head {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .finance-report-hero.page-hero-card,
  .system-permission-page .system-permission-hero-card.page-hero-card {
    padding: 18px;
  }

  .filter-ribbon,
  .finance-filter-ribbon,
  .admin-tab-switcher.system-permission-main-tabs {
    width: 100%;
  }

  .finance-filter-ribbon .finance-compact-field,
  .finance-filter-ribbon .ghost-button,
  .finance-filter-ribbon .primary-button,
  .admin-tab-switcher.system-permission-main-tabs button,
  .org-view-switch,
  .mindmap-toolbar {
    width: 100%;
  }

  .admin-tab-switcher.system-permission-main-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .finance-precision-panel .finance-sticky-3,
  .finance-precision-panel .finance-sticky-4,
  .finance-precision-panel .finance-sticky-5 {
    left: auto;
  }
}

/* Absolute final UI contract: no bulky explanation headers, readable table headers, long values ellipsize. */
body .page-hero-card,
body .sales-chain-hero.page-hero-card,
body .purchase-chain-hero.page-hero-card,
body .production-chain-hero.page-hero-card,
body .operation-chain-hero.page-hero-card,
body .finance-report-hero.page-hero-card,
body .system-permission-page .system-permission-hero-card.page-hero-card,
body .panel-hero,
body .master-compact-hero,
body .compact-page-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 0 0 8px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .page-hero-card::before,
body .page-hero-card::after,
body .panel-hero::before,
body .panel-hero::after,
body .master-compact-hero::before,
body .master-compact-hero::after,
body .compact-page-hero::before,
body .compact-page-hero::after {
  display: none !important;
}

body .page-hero-copy,
body .hero-copy,
body .finance-board-title.page-hero-copy,
body .system-permission-hero-card .page-hero-copy {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 10px !important;
}

body .page-hero-card .eyebrow,
body .page-hero-subtitle,
body .hero-copy p,
body .master-compact-hero .hero-copy p,
body .compact-page-hero .hero-copy p {
  display: none !important;
}

body .page-hero-card h3,
body .hero-copy h3,
body .master-compact-hero .hero-copy h3,
body .compact-page-hero .hero-copy h3,
body .system-permission-page .system-permission-hero-card h3 {
  max-width: 100% !important;
  margin: 0 !important;
  color: #0f172a !important;
  font-family: var(--ui-font-display) !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .page-hero-actions,
body .sales-chain-hero .supplier-action-bar,
body .finance-filter-ribbon.page-hero-actions {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
}

body .table-wrap,
body .drawer-data-table-wrap,
body .workflow-drawer .table-wrap,
body .finance-expense-drawer .table-wrap,
body .maintenance-table-panel .table-wrap,
body .employee-panel .table-wrap,
body .stocktake-panel-history .table-wrap,
body .special-adjustment-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

body .data-table,
body .compact-table,
body .drawer-data-table,
body .workflow-drawer .data-table,
body .maintenance-table-panel .data-table,
body .org-employee-table,
body .special-adjustment-table {
  width: 100% !important;
  min-width: max(100%, 1120px) !important;
  table-layout: fixed !important;
}

body .compact-table,
body .maintenance-table-panel .data-table,
body .org-employee-table {
  min-width: max(100%, 980px) !important;
}

body .data-table th,
body .drawer-data-table th,
body .workflow-drawer .data-table th,
body .sortable-th-button,
body .sortable-th-label,
body .drawer-table-head-label {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
  line-height: 1.35 !important;
}

body .data-table td,
body .drawer-data-table td,
body .workflow-drawer .data-table td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body .drawer-cell-ellipsis,
body .drawer-cell-code,
body .drawer-data-table .drawer-cell-long,
body .drawer-data-table .drawer-cell-code,
body .drawer-data-table .drawer-cell-ellipsis {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Admin polish: compact page headers and Ruoyi-style tag actions. */
.admin-shell .tags-context-menu,
.tags-context-menu {
  position: fixed;
  z-index: 5000;
  display: grid;
  min-width: 148px;
  padding: 6px;
  border: 1px solid rgba(190, 205, 224, 0.92);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  animation: tagsContextIn 0.12s ease-out;
}

.tags-context-menu::before {
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: #409eff;
  content: "";
}

.tags-context-menu button {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #334155;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    transform 0.14s ease;
}

.tags-context-menu button:hover:not(:disabled) {
  background: #ecf5ff;
  color: #096dd9;
  transform: translateX(2px);
}

.tags-context-menu button:disabled {
  color: #a8abb2;
  cursor: not-allowed;
}

.tags-context-menu .tags-context-danger:hover:not(:disabled) {
  background: #fff1f0;
  color: #d4380d;
}

@keyframes tagsContextIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.page-hero-card {
  align-items: center;
  min-height: 0;
  padding: 13px 18px 13px 20px;
  border-radius: 16px;
  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.page-hero-card::before {
  inset: 12px auto 12px 0;
  width: 4px;
}

.page-hero-card::after {
  right: 16px;
  bottom: 10px;
  width: 112px;
  height: 28px;
  opacity: 0.24;
}

.page-hero-copy {
  gap: 4px;
}

.page-hero-card h3 {
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.16;
}

.page-hero-subtitle {
  max-width: min(74ch, 100%);
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-hero-actions {
  align-items: center;
  justify-content: flex-end;
}

.sales-chain-hero,
.purchase-chain-hero,
.production-chain-hero,
.operation-chain-hero {
  margin-bottom: 10px;
}

.panel-hero,
.master-compact-hero,
.compact-page-hero {
  padding: 13px 18px;
  border-radius: 16px;
}

.panel-hero {
  gap: 12px;
}

.hero-copy h3,
.master-compact-hero .hero-copy h3,
.compact-page-hero .hero-copy h3 {
  max-width: none;
  margin-bottom: 4px;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.18;
}

.hero-copy p,
.master-compact-hero .hero-copy p,
.compact-page-hero .hero-copy p {
  max-width: min(86ch, 100%);
  margin: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .page-hero-card,
  .panel-hero,
  .master-compact-hero,
  .compact-page-hero {
    padding: 13px 14px;
  }

  .page-hero-card {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .page-hero-copy {
    flex: 1 1 180px;
  }

  .page-hero-actions {
    width: auto;
    max-width: 100%;
  }

  .sales-chain-hero .supplier-action-bar {
    width: 100%;
    gap: 4px;
    padding: 2px;
    justify-content: flex-start;
  }

  .page-hero-subtitle,
  .hero-copy p,
  .master-compact-hero .hero-copy p,
  .compact-page-hero .hero-copy p {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .page-hero-actions > button {
    width: auto;
  }

  .sales-chain-hero .supplier-action-button,
  .sales-chain-hero .supplier-exchange-group .supplier-action-button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .sales-chain-hero .contract-header-button,
  .sales-chain-hero .primary-button {
    min-height: 30px;
  }

  .supplier-action-icon {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    font-size: 15px;
  }

  .supplier-exchange-group {
    gap: 2px;
  }

  .page-hero-subtitle {
    display: none;
  }
}

/* Final density pass: table width comes from column structure, not from long values. */
.table-wrap,
.drawer-data-table-wrap,
.workflow-drawer .table-wrap,
.finance-expense-drawer .table-wrap,
.maintenance-table-panel .table-wrap,
.employee-panel .table-wrap,
.stocktake-panel-history .table-wrap,
.special-adjustment-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}

.data-table,
.compact-table,
.drawer-data-table,
.workflow-drawer .data-table,
.maintenance-table-panel .data-table,
.org-employee-table,
.special-adjustment-table {
  width: 100% !important;
  min-width: max(100%, 1120px) !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

.compact-table,
.maintenance-table-panel .data-table,
.org-employee-table {
  min-width: max(100%, 980px) !important;
}

.drawer-data-table,
.workflow-drawer .data-table,
.special-adjustment-table {
  min-width: max(100%, 1040px) !important;
}

.data-table th,
.data-table td,
.drawer-data-table th,
.drawer-data-table td,
.workflow-drawer .data-table th,
.workflow-drawer .data-table td {
  min-width: 0 !important;
  max-width: none;
  overflow: hidden;
  text-align: left;
  vertical-align: middle;
}

.data-table th,
.drawer-data-table th,
.workflow-drawer .data-table th,
.sortable-th-button,
.sortable-th-label,
.drawer-table-head-label {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  writing-mode: horizontal-tb;
  line-height: 1.35;
}

.data-table td,
.drawer-data-table td,
.workflow-drawer .data-table td {
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}

.drawer-cell-ellipsis,
.drawer-cell-code,
.drawer-data-table .drawer-cell-long,
.drawer-data-table .drawer-cell-code,
.drawer-data-table .drawer-cell-ellipsis {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.drawer-cell-number,
.data-table .number-cell,
.data-table td[data-cell-type="number"] {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.data-table .action-row,
.drawer-data-table .action-row,
.org-employee-table .action-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  overflow: hidden;
}

.data-table .action-row button,
.drawer-data-table .action-row button {
  min-width: 0;
  padding-inline: 10px;
  white-space: nowrap;
}

/* Final hero cleanup: remove the bulky explanatory head cards across the system. */
.page-hero-card,
.sales-chain-hero.page-hero-card,
.finance-report-hero.page-hero-card,
.system-permission-page .system-permission-hero-card.page-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-hero-card::before,
.page-hero-card::after,
.sales-chain-hero.page-hero-card::before,
.sales-chain-hero.page-hero-card::after,
.finance-report-hero.page-hero-card::before,
.finance-report-hero.page-hero-card::after,
.system-permission-page .system-permission-hero-card.page-hero-card::before,
.system-permission-page .system-permission-hero-card.page-hero-card::after {
  display: none !important;
}

.page-hero-copy,
.finance-board-title.page-hero-copy,
.system-permission-hero-card .page-hero-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.page-hero-card .eyebrow,
.page-hero-card .page-hero-subtitle,
.hero-copy p,
.master-compact-hero .hero-copy p,
.compact-page-hero .hero-copy p {
  display: none !important;
}

.page-hero-card h3,
.system-permission-page .system-permission-hero-card h3 {
  margin: 0 !important;
  color: #0f172a;
  font-family: var(--ui-font-display);
  font-size: 18px !important;
  font-weight: 850;
  line-height: 1.2 !important;
  white-space: nowrap;
}

.page-hero-actions,
.sales-chain-hero .supplier-action-bar,
.finance-filter-ribbon.page-hero-actions {
  flex: 0 0 auto;
  max-width: 100%;
  margin-left: auto;
  padding: 4px !important;
  border-radius: 12px !important;
}

.panel-hero,
.master-compact-hero,
.compact-page-hero {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 0 !important;
  padding: 0 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.panel-hero::after {
  display: none !important;
}

.hero-copy h3,
.master-compact-hero .hero-copy h3,
.compact-page-hero .hero-copy h3 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

/* System permission page: keep mind map as the only scroll surface inside its card. */
.system-permission-page {
  gap: 12px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.system-permission-page .system-permission-hero-card.page-hero-card {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  padding: 11px 18px;
}

.system-permission-page .system-permission-hero-card h3 {
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.14;
}

.system-permission-page .system-permission-hero-card .page-hero-subtitle {
  max-width: 82ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-permission-page .system-permission-main-tabs {
  flex: 0 0 auto;
  margin: 0;
}

.system-permission-page .system-permission-map-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 18px;
  overflow: hidden;
}

.system-permission-page.system-permission-page--maintenance {
  height: auto;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
}

.system-permission-page.system-permission-page--maintenance .system-permission-maintenance-card {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

.system-permission-page.system-permission-page--maintenance .maintenance-table-panel {
  min-height: 0;
  overflow: visible;
}

.system-permission-page .system-permission-map-card.tree-layout-card {
  overflow-x: auto;
  overflow-y: hidden;
}

.system-permission-page .system-permission-map-card > .section-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.system-permission-page .system-permission-map-card > .section-head h3 {
  font-size: 20px;
  line-height: 1.18;
}

.system-permission-page .system-permission-map-card > .section-head .permission-note {
  display: none;
}

.system-permission-page .org-mind-map {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
}

.system-permission-page .org-permission-tree-card {
  flex: 1 1 auto;
  height: 100%;
  width: max(100%, 1040px);
  min-width: 1040px;
  min-height: 0;
  overflow: hidden;
}

.system-permission-page .org-permission-tree-card .org-tree-panel,
.system-permission-page .org-permission-tree-card .employee-panel {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.system-permission-page .org-permission-tree-card .org-tree-list,
.system-permission-page .org-permission-tree-card .employee-panel .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.system-permission-page .org-permission-tree-card .employee-panel .pagination-bar {
  flex: 0 0 auto;
  min-height: 0;
}

@media (max-width: 760px) {
  .system-permission-page {
    height: auto;
    overflow: visible;
  }

  .system-permission-page .system-permission-map-card {
    max-height: none;
    overflow: visible;
  }

  .system-permission-page .system-permission-map-card > .section-head {
    grid-template-columns: 1fr;
  }

  .system-permission-page .mindmap-card-actions {
    justify-content: flex-start;
  }

  .system-permission-page .org-mind-map {
    height: 360px;
    min-height: 320px;
  }

  .system-permission-page .system-permission-map-card.tree-layout-card {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .system-permission-page .org-permission-tree-card {
    height: 100%;
    min-width: 1040px;
    overflow: hidden;
  }

  .system-permission-page .org-permission-tree-card .org-tree-panel,
  .system-permission-page .org-permission-tree-card .employee-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
}

/* Final table header fix: sortable icons must never cover header text. */
body .data-table:has(thead th:nth-child(8)),
body .compact-table:has(thead th:nth-child(8)) {
  min-width: max(100%, 1120px) !important;
}

body .data-table:has(thead th:nth-child(10)),
body .compact-table:has(thead th:nth-child(10)) {
  min-width: max(100%, 1360px) !important;
}

body .data-table:has(thead th:nth-child(12)),
body .compact-table:has(thead th:nth-child(12)) {
  min-width: max(100%, 1632px) !important;
}

body .data-table:has(thead th:nth-child(13)),
body .compact-table:has(thead th:nth-child(13)) {
  min-width: max(100%, 1768px) !important;
}

body .data-table:has(thead th:nth-child(15)),
body .compact-table:has(thead th:nth-child(15)) {
  min-width: max(100%, 2040px) !important;
}

body .sortable-th {
  min-width: 124px !important;
}

body .sortable-th-button {
  display: grid !important;
  grid-template-columns: minmax(max-content, 1fr) 20px !important;
  align-items: center !important;
  column-gap: 8px !important;
  width: 100% !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

body .sortable-th-label {
  display: inline-block !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

body .sort-arrow {
  justify-self: end !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  margin-left: 0 !important;
}

/* Global table display modes: overview fits every field on screen; wide table shows every value in full. */
body .table-view-mode-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: end;
  gap: 3px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid rgba(196, 210, 228, 0.95);
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 18px rgba(15, 23, 42, 0.06);
}

body .table-view-mode-button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

body .table-view-mode-button:hover {
  color: #096dd9;
  background: #ecf5ff;
}

body .table-view-mode-button.table-view-mode-active {
  background:
    linear-gradient(180deg, #409eff 0%, #1677ff 100%);
  color: #ffffff;
  box-shadow:
    0 8px 18px rgba(22, 119, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body .table-view-mode-button.table-view-mode-active:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

body .table-view-overview {
  overflow-x: hidden !important;
}

body .table-view-overview .data-table,
body .table-view-overview .compact-table,
body .table-view-overview .drawer-data-table,
body .table-view-overview .org-employee-table,
body .table-view-overview .special-adjustment-table,
body .table-view-overview .data-table.data-table-overview,
body .table-view-overview .compact-table.data-table-overview,
body .table-view-overview .drawer-data-table.data-table-overview,
body .table-view-overview .org-employee-table.data-table-overview,
body .table-view-overview .special-adjustment-table.data-table-overview,
body .data-table.data-table-overview,
body .compact-table.data-table-overview,
body .drawer-data-table.data-table-overview,
body .org-employee-table.data-table-overview,
body .special-adjustment-table.data-table-overview {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

body .table-view-overview .data-table th,
body .table-view-overview .data-table th .sortable-th-button,
body .table-view-overview .data-table th .sortable-th-label,
body .data-table.data-table-overview th,
body .data-table.data-table-overview th .sortable-th-button,
body .data-table.data-table-overview th .sortable-th-label {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

body .table-view-overview .data-table th .sortable-th-button,
body .data-table.data-table-overview th .sortable-th-button {
  grid-template-columns: minmax(0, 1fr) 18px !important;
  column-gap: 5px !important;
}

body .table-view-overview .data-table td,
body .data-table.data-table-overview td {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body .table-view-overview .data-table td[data-table-tooltip="auto"] {
  cursor: help;
}

body .table-cell-hover-tooltip {
  position: fixed;
  z-index: 7000;
  max-width: min(460px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
  box-shadow:
    0 20px 44px rgba(15, 23, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

body .table-cell-hover-tooltip-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body .table-view-wide {
  overflow-x: auto !important;
}

body .table-view-wide .data-table,
body .table-view-wide .compact-table,
body .table-view-wide .drawer-data-table,
body .table-view-wide .org-employee-table,
body .table-view-wide .special-adjustment-table,
body .table-view-wide .data-table.data-table-wide,
body .table-view-wide .compact-table.data-table-wide,
body .table-view-wide .drawer-data-table.data-table-wide,
body .table-view-wide .org-employee-table.data-table-wide,
body .table-view-wide .special-adjustment-table.data-table-wide,
body .data-table.data-table-wide,
body .compact-table.data-table-wide,
body .drawer-data-table.data-table-wide,
body .org-employee-table.data-table-wide,
body .special-adjustment-table.data-table-wide {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  table-layout: auto !important;
}

body .table-view-wide .data-table th,
body .table-view-wide .data-table th .sortable-th-button,
body .table-view-wide .data-table th .sortable-th-label,
body .data-table.data-table-wide th,
body .data-table.data-table-wide th .sortable-th-button,
body .data-table.data-table-wide th .sortable-th-label {
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body .table-view-wide .data-table td:not(.action-row),
body .data-table.data-table-wide td:not(.action-row) {
  min-width: 0 !important;
  max-width: 10em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body .table-view-wide .data-table td[data-table-tooltip="auto"],
body .data-table.data-table-wide td[data-table-tooltip="auto"] {
  cursor: help;
}

body .table-view-wide .data-table td.action-row,
body .data-table.data-table-wide td.action-row {
  display: table-cell !important;
  width: var(--table-action-column-width) !important;
  min-width: var(--table-action-column-width) !important;
  max-width: none !important;
  overflow: visible !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

body .table-view-wide .data-table:has(td.action-row) thead th:last-child,
body .data-table.data-table-wide:has(td.action-row) thead th:last-child {
  width: var(--table-action-column-width) !important;
  min-width: var(--table-action-column-width) !important;
  max-width: none !important;
  text-align: center !important;
}

body .table-view-wide .data-table .action-row .semantic-action-button,
body .table-view-wide .data-table .action-row .ghost-button,
body .table-view-wide .data-table .action-row .primary-button,
body .data-table.data-table-wide .action-row .semantic-action-button,
body .data-table.data-table-wide .action-row .ghost-button,
body .data-table.data-table-wide .action-row .primary-button {
  display: inline-flex !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  gap: 7px !important;
  padding: 0 10px 0 8px !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

body .table-view-wide .data-table .action-row button:last-child,
body .data-table.data-table-wide .action-row button:last-child {
  margin-right: 0 !important;
}

@media (max-width: 720px) {
  body .table-view-mode-switch {
    width: 100%;
    margin-left: 0;
  }

  body .table-view-mode-button {
    flex: 1 1 0;
  }
}

/* Final semantic action button system: industrial-console clarity, explicit icon + label, no demo buttons. */
body button.primary-button:not(.icon-button):not(.table-view-mode-button),
body button.ghost-button:not(.icon-button):not(.table-view-mode-button),
body button.action-button:not(.action-button-icon-only),
body button.link-button.semantic-action-button,
body button.workflow-close-button.semantic-action-button,
body button.contract-header-button.semantic-action-button,
body button.purchase-contract-button.semantic-action-button,
body button.small-button.semantic-action-button {
  --button-bg: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  --button-border: rgba(148, 163, 184, 0.62);
  --button-text: #334155;
  --button-shadow: 0 9px 20px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --button-icon-bg: rgba(15, 23, 42, 0.06);
  --button-icon-text: #334155;
  --button-rail: #64748b;
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 36px;
  padding: 0 14px 0 10px !important;
  overflow: hidden;
  border: 1px solid var(--button-border) !important;
  border-radius: 12px !important;
  background: var(--button-bg) !important;
  box-shadow: var(--button-shadow);
  color: var(--button-text) !important;
  font-family: var(--ui-font-body) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none !important;
  text-underline-offset: 0 !important;
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}

body button.semantic-action-button::before,
body button.action-button::before {
  position: absolute;
  inset: 7px auto 7px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--button-rail);
  opacity: 0.92;
  content: "";
}

body button.semantic-action-button::after,
body button.action-button::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.5) 42%, transparent 74%);
  opacity: 0;
  transform: translateX(-62%);
  transition:
    opacity 0.18s ease,
    transform 0.36s ease;
  content: "";
}

body button.semantic-action-button:hover:not(:disabled),
body button.action-button:hover:not(:disabled),
body button.primary-button:not(.icon-button):not(.table-view-mode-button):hover:not(:disabled),
body button.ghost-button:not(.icon-button):not(.table-view-mode-button):hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--button-rail) 46%, var(--button-border)) !important;
  box-shadow:
    0 13px 26px rgba(15, 23, 42, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

body button.semantic-action-button:hover:not(:disabled)::after,
body button.action-button:hover:not(:disabled)::after {
  opacity: 1;
  transform: translateX(68%);
}

body button.semantic-action-button:active:not(:disabled),
body button.action-button:active:not(:disabled),
body button.primary-button:not(.icon-button):not(.table-view-mode-button):active:not(:disabled),
body button.ghost-button:not(.icon-button):not(.table-view-mode-button):active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.12),
    inset 0 2px 6px rgba(15, 23, 42, 0.08);
}

body button.semantic-action-button:disabled,
body button.action-button:disabled,
body button.primary-button:disabled,
body button.ghost-button:disabled {
  cursor: not-allowed;
  filter: saturate(0.72);
  opacity: 0.54;
  transform: none !important;
  box-shadow: none;
}

body .semantic-action-icon,
body .action-button .app-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  background: var(--button-icon-bg);
  color: var(--button-icon-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 0 rgba(15, 23, 42, 0.04);
}

body .semantic-action-svg,
body .action-button .app-icon {
  width: 16px;
  height: 16px;
}

body .semantic-action-label,
body .action-button-label {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body button.semantic-action-button[data-button-tone="primary"],
body button.action-button[data-button-tone="primary"],
body button.primary-button:not(.semantic-action-button):not(.icon-button):not(.table-view-mode-button) {
  --button-bg: linear-gradient(180deg, #2563eb 0%, #0f7fcf 100%);
  --button-border: rgba(37, 99, 235, 0.52);
  --button-text: #ffffff;
  --button-shadow: 0 14px 30px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  --button-icon-bg: rgba(255, 255, 255, 0.18);
  --button-icon-text: #ffffff;
  --button-rail: #7dd3fc;
}

body button.semantic-action-button[data-button-tone="info"],
body button.action-button[data-button-tone="info"] {
  --button-bg: linear-gradient(180deg, #eff8ff 0%, #dff0ff 100%);
  --button-border: rgba(14, 116, 144, 0.24);
  --button-text: #075985;
  --button-shadow: 0 10px 22px rgba(14, 116, 144, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  --button-icon-bg: rgba(14, 165, 233, 0.14);
  --button-icon-text: #0369a1;
  --button-rail: #0ea5e9;
}

body button.semantic-action-button[data-button-tone="success"],
body button.action-button[data-button-tone="success"] {
  --button-bg: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  --button-border: rgba(22, 163, 74, 0.28);
  --button-text: #166534;
  --button-shadow: 0 10px 22px rgba(22, 163, 74, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --button-icon-bg: rgba(22, 163, 74, 0.15);
  --button-icon-text: #15803d;
  --button-rail: #16a34a;
}

body button.semantic-action-button[data-button-tone="warning"],
body button.action-button[data-button-tone="warning"] {
  --button-bg: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  --button-border: rgba(234, 88, 12, 0.28);
  --button-text: #9a3412;
  --button-shadow: 0 10px 22px rgba(234, 88, 12, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --button-icon-bg: rgba(234, 88, 12, 0.14);
  --button-icon-text: #c2410c;
  --button-rail: #f97316;
}

body button.semantic-action-button[data-button-tone="danger"],
body button.action-button[data-button-tone="danger"],
body button.danger-ghost:not(.icon-button) {
  --button-bg: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
  --button-border: rgba(225, 29, 72, 0.3);
  --button-text: #be123c;
  --button-shadow: 0 10px 22px rgba(225, 29, 72, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --button-icon-bg: rgba(225, 29, 72, 0.13);
  --button-icon-text: #be123c;
  --button-rail: #e11d48;
}

body .data-table button.semantic-action-button.semantic-action-button[data-button-tone="info"],
body .drawer-data-table button.semantic-action-button.semantic-action-button[data-button-tone="info"] {
  --button-bg: linear-gradient(180deg, #eff8ff 0%, #bfdbfe 100%);
  --button-border: rgba(14, 116, 144, 0.34);
  --button-text: #075985;
  --button-shadow: 0 6px 14px rgba(14, 116, 144, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --button-icon-bg: rgba(14, 165, 233, 0.18);
  --button-icon-text: #0369a1;
  --button-rail: #0284c7;
}

body .data-table button.semantic-action-button.semantic-action-button[data-button-tone="danger"],
body .drawer-data-table button.semantic-action-button.semantic-action-button[data-button-tone="danger"] {
  --button-bg: linear-gradient(180deg, #fff1f2 0%, #fecdd3 100%);
  --button-border: rgba(225, 29, 72, 0.38);
  --button-text: #be123c;
  --button-shadow: 0 6px 14px rgba(225, 29, 72, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --button-icon-bg: rgba(225, 29, 72, 0.17);
  --button-icon-text: #be123c;
  --button-rail: #e11d48;
}

body button.semantic-action-button[data-button-kind="table"],
body .data-table .semantic-action-button,
body .drawer-data-table .semantic-action-button {
  min-height: 28px;
  padding: 0 9px 0 7px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

body .data-table .semantic-action-icon,
body .drawer-data-table .semantic-action-icon {
  width: 21px;
  height: 21px;
  border-radius: 7px;
}

body .data-table .semantic-action-svg,
body .drawer-data-table .semantic-action-svg {
  width: 14px;
  height: 14px;
}

body .action-row {
  gap: 6px !important;
}

body .form-toolbar .semantic-action-button,
body .drawer-form-actions .semantic-action-button,
body .drawer-actions .semantic-action-button,
body .workflow-inline-actions .semantic-action-button,
body .page-hero-actions .semantic-action-button,
body .operation-filter-ribbon .semantic-action-button {
  flex: 0 0 auto;
}

body .operation-filter-ribbon .semantic-action-button {
  align-self: end;
}

body .link-button.semantic-action-button {
  width: auto;
  vertical-align: middle;
}

body .table-view-overview .data-table .action-row {
  display: table-cell !important;
  width: 104px !important;
  min-width: 104px !important;
  overflow: visible !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body .table-view-overview .data-table:has(td.action-row) thead th:last-child {
  width: 104px !important;
  min-width: 104px !important;
  text-align: center !important;
}

body .table-view-overview .data-table .action-row .semantic-action-button,
body .table-view-overview .data-table .action-row .ghost-button,
body .table-view-overview .data-table .action-row .primary-button {
  width: calc((100% - 6px) / 2) !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

body .table-view-overview .data-table .action-row button + button {
  margin-left: 6px !important;
}

body .table-view-overview .data-table .action-row button:only-child {
  width: 100% !important;
}

body .table-view-overview .data-table .action-row:has(button:nth-of-type(3)) button {
  width: calc((100% - 12px) / 3) !important;
}

body .table-view-overview .data-table .action-row .semantic-action-label {
  display: none !important;
}

body .table-view-overview .data-table .action-row .semantic-action-icon {
  margin: 0 auto !important;
}

@media (prefers-reduced-motion: reduce) {
  body button.semantic-action-button,
  body button.semantic-action-button::after,
  body button.action-button,
  body button.action-button::after {
    transition: none !important;
  }
}

/* System permission org tree: keep the personnel list readable inside its own panel. */
body .system-permission-page .system-permission-map-card.tree-layout-card {
  height: min(720px, calc(100vh - 220px)) !important;
  min-height: 480px !important;
  overflow: hidden !important;
}

body .system-permission-page .tree-layout-card .org-permission-tree-card {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) !important;
}

body .system-permission-page .tree-layout-card .employee-panel {
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body .system-permission-page .tree-layout-card .employee-panel .table-wrap {
  flex: 1 1 0 !important;
  min-height: 220px !important;
  overflow: auto !important;
}

body .system-permission-page .tree-layout-card .org-employee-table {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

body .system-permission-page .tree-layout-card .org-employee-table th,
body .system-permission-page .tree-layout-card .org-employee-table td {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .system-permission-page .tree-layout-card .org-employee-table th:nth-child(1),
body .system-permission-page .tree-layout-card .org-employee-table td:nth-child(1) {
  width: 13% !important;
}

body .system-permission-page .tree-layout-card .org-employee-table th:nth-child(2),
body .system-permission-page .tree-layout-card .org-employee-table td:nth-child(2) {
  width: 20% !important;
}

body .system-permission-page .tree-layout-card .org-employee-table th:nth-child(3),
body .system-permission-page .tree-layout-card .org-employee-table td:nth-child(3) {
  width: 14% !important;
}

body .system-permission-page .tree-layout-card .org-employee-table th:nth-child(4),
body .system-permission-page .tree-layout-card .org-employee-table td:nth-child(4) {
  width: 17% !important;
}

body .system-permission-page .tree-layout-card .org-employee-table th:nth-child(5),
body .system-permission-page .tree-layout-card .org-employee-table td:nth-child(5) {
  width: 12% !important;
}

body .system-permission-page .tree-layout-card .org-employee-table th:nth-child(6),
body .system-permission-page .tree-layout-card .org-employee-table td:nth-child(6) {
  width: 24% !important;
}

body .system-permission-page .tree-layout-card .org-employee-table .action-row {
  display: table-cell !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body .system-permission-page .tree-layout-card .org-employee-table .action-row button {
  min-height: 30px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}

@media (max-width: 980px) {
  body .system-permission-page .system-permission-map-card.tree-layout-card {
    overflow: auto !important;
  }

  body .system-permission-page .tree-layout-card .org-permission-tree-card {
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(260px, auto) minmax(320px, 1fr) !important;
    overflow: visible !important;
  }

  body .system-permission-page .tree-layout-card .org-tree-panel,
  body .system-permission-page .tree-layout-card .employee-panel {
    width: 100% !important;
    min-width: 0 !important;
  }

body .system-permission-page .tree-layout-card .employee-panel .table-wrap {
  min-height: 260px !important;
  }
}

/* Quality inspection: compact title switch and on-demand remark confirmation. */
body .quality-inspection-hero .page-hero-copy {
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body .quality-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body .quality-title-row h3 {
  flex: 0 0 auto;
  margin: 0 !important;
}

body .quality-title-tabbar.inventory-tabbar {
  width: auto;
  margin: 0;
  padding: 4px;
  gap: 4px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(31, 45, 61, 0.08);
}

body .quality-title-tabbar .inventory-tab {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  gap: 6px;
}

body .quality-title-tabbar .inventory-tab strong,
body .quality-title-tabbar .inventory-tab span {
  font-size: 13px;
}

body .quality-remark-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 2800;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(8px);
}

body .quality-remark-modal {
  display: grid;
  gap: 14px;
  width: min(560px, calc(100vw - 48px));
  padding: 22px;
  border: 1px solid rgba(64, 158, 255, 0.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 0%, rgba(64, 158, 255, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  color: #303133;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

body .quality-remark-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body .quality-remark-modal-head h3 {
  margin: 0;
  color: #1f2d3d;
  font-size: 20px;
}

body .quality-remark-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body .quality-remark-summary span {
  border: 1px solid rgba(190, 205, 224, 0.8);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.72);
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

body .quality-remark-field {
  margin: 0;
}

body .quality-remark-field textarea {
  resize: vertical;
}

body .quality-remark-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

@media (max-width: 760px) {
  body .quality-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  body .quality-title-tabbar.inventory-tabbar {
    width: 100%;
  }
}

/* Login redesign: industrial hardware cockpit with restrained sci-fi motion. */
.login-shell {
  --login-forge-blue: #38bdf8;
  --login-steel: #2563eb;
  --login-mint: #34d399;
  --login-copper: #f59e0b;
  --login-ink: #d8e8f7;
  --login-muted: #8ca7bd;
  --login-panel: rgba(8, 20, 34, 0.78);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: clamp(18px, 4vw, 44px);
  overflow: hidden;
  color: var(--login-ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(56, 189, 248, 0.22), transparent 30%),
    radial-gradient(circle at 82% 22%, rgba(52, 211, 153, 0.16), transparent 26%),
    linear-gradient(135deg, #07111f 0%, #0c1827 48%, #122235 100%);
  cursor: default;
  isolation: isolate;
}

.login-photo-bg {
  position: absolute;
  inset: 0;
  display: block;
  background:
    linear-gradient(115deg, rgba(4, 11, 20, 0.82), rgba(7, 18, 31, 0.56) 48%, rgba(8, 17, 29, 0.88)),
    radial-gradient(circle at 50% 40%, rgba(79, 180, 255, 0.12), transparent 32%);
  filter: saturate(1.04) contrast(1.04);
  opacity: 0.8;
  transform: scale(1.03);
  z-index: -5;
}

.login-forge-grid {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 52% 48%, #000 0%, transparent 74%);
}

.login-forge-grid::after {
  position: absolute;
  inset: -20% 0;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.2), transparent);
  content: "";
  opacity: 0.72;
  transform: translateY(-45%);
  animation: loginScanSweep 5.8s ease-in-out infinite;
}

.login-metal-beam {
  position: absolute;
  z-index: -3;
  width: min(46vw, 680px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.86), rgba(245, 158, 11, 0.52), transparent);
  filter: blur(0.2px);
  opacity: 0.72;
  animation: loginBeamDrift 7.2s ease-in-out infinite alternate;
}

.login-metal-beam-a {
  top: 18%;
  left: -8%;
  transform: rotate(-18deg);
}

.login-metal-beam-b {
  right: -12%;
  bottom: 22%;
  animation-delay: -2s;
  transform: rotate(15deg);
}

.login-hex-field {
  position: absolute;
  right: min(8vw, 120px);
  top: min(10vh, 110px);
  z-index: -2;
  width: clamp(170px, 22vw, 340px);
  aspect-ratio: 1;
  border: 1px solid rgba(56, 189, 248, 0.16);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  background:
    radial-gradient(circle at center, rgba(56, 189, 248, 0.12), transparent 62%),
    repeating-linear-gradient(60deg, rgba(226, 232, 240, 0.08) 0 1px, transparent 1px 18px);
  opacity: 0.88;
}

.login-cockpit {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 430px);
  gap: clamp(22px, 4vw, 58px);
  align-items: stretch;
  width: min(1180px, 100%);
}

.login-command-deck,
.login-auth-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(174, 199, 224, 0.26);
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(10, 24, 40, 0.84), rgba(7, 18, 31, 0.68)),
    rgba(9, 20, 34, 0.74);
  box-shadow:
    0 36px 96px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
}

.login-command-deck {
  display: grid;
  grid-template-rows: auto auto auto minmax(210px, 1fr);
  gap: clamp(18px, 3vw, 28px);
  min-height: 620px;
  padding: clamp(24px, 4vw, 42px);
}

.login-command-deck::before,
.login-auth-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 32%),
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.18), transparent 28%);
  content: "";
  pointer-events: none;
}

.login-command-brand,
.login-hero-copy,
.login-status-strip,
.login-forge-visual,
.login-panel-head,
.login-form,
.login-security-foot {
  position: relative;
  z-index: 1;
}

.login-command-brand {
  display: inline-grid;
  grid-template-columns: 54px minmax(0, auto);
  gap: 14px;
  align-items: center;
  width: fit-content;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.login-command-brand .login-logo,
.login-shell .login-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(56, 189, 248, 0.34));
}

.login-command-brand span,
.login-console-chip,
.login-kicker {
  color: #9fdfff;
  font-family: var(--ui-font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.login-command-brand strong {
  display: block;
  margin-top: 3px;
  color: #f8fbff;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.login-hero-copy {
  max-width: 660px;
}

.login-hero-copy h1 {
  margin: 8px 0 14px;
  color: #f8fbff;
  font-family: var(--ui-font-display);
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.login-hero-copy p:last-child {
  max-width: 560px;
  margin: 0;
  color: #abc2d6;
  font-size: 15px;
  line-height: 1.8;
}

.login-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.login-status-strip article {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 22px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(15, 30, 48, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.login-status-strip .app-icon {
  width: 25px;
  height: 25px;
  color: var(--login-forge-blue);
}

.login-status-strip span {
  color: #b8ccdc;
  font-size: 13px;
  font-weight: 700;
}

.login-status-strip strong {
  color: #f8fbff;
  font-family: var(--ui-font-display);
  font-size: 13px;
  letter-spacing: 0.11em;
}

.login-forge-visual {
  min-height: 260px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 48%, rgba(56, 189, 248, 0.2), transparent 36%),
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    rgba(7, 16, 28, 0.52);
  background-size: auto, 32px 32px, 32px 32px, auto;
}

.login-factory-orbit,
.login-factory-core,
.login-factory-node {
  position: absolute;
  left: 50%;
  top: 50%;
}

.login-factory-orbit {
  width: min(340px, 62%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.login-factory-orbit span {
  position: absolute;
  inset: calc(var(--ring, 0) * 22px);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 999px;
  animation: loginOrbitGlow 3.8s ease-in-out infinite;
}

.login-factory-orbit span:nth-child(1) {
  --ring: 0;
}

.login-factory-orbit span:nth-child(2) {
  --ring: 1;
  animation-delay: -1s;
}

.login-factory-orbit span:nth-child(3) {
  --ring: 2;
  animation-delay: -2s;
}

.login-factory-core {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(56, 189, 248, 0.36);
  border-radius: 28px;
  color: #e8f8ff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(145deg, rgba(37, 99, 235, 0.78), rgba(14, 165, 233, 0.42));
  box-shadow:
    0 22px 52px rgba(56, 189, 248, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(45deg);
}

.login-factory-core .app-icon,
.login-factory-core strong {
  transform: rotate(-45deg);
}

.login-factory-core .app-icon {
  width: 28px;
  height: 28px;
}

.login-factory-core strong {
  font-family: var(--ui-font-display);
  font-size: 18px;
  letter-spacing: 0.18em;
}

.login-factory-node {
  display: inline-grid;
  grid-template-columns: 22px auto;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: #daf1ff;
  background: rgba(9, 22, 36, 0.88);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

.login-factory-node .app-icon {
  width: 20px;
  height: 20px;
  color: var(--login-mint);
}

.login-factory-node span {
  font-size: 12px;
  font-weight: 900;
}

.login-factory-node-a {
  transform: translate(-210%, -170%);
}

.login-factory-node-b {
  transform: translate(84%, -130%);
}

.login-factory-node-c {
  transform: translate(-34%, 154%);
}

.login-auth-card {
  align-self: center;
  padding: clamp(24px, 3vw, 34px);
}

.login-panel-head {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
  text-align: left;
}

.login-panel-head h2 {
  margin: 0;
  color: #f8fbff;
  font-family: var(--ui-font-display);
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1;
  letter-spacing: 0.03em;
}

.login-panel-head p {
  display: block;
  margin: 0;
  color: var(--login-muted);
  font-size: 13px;
  line-height: 1.7;
}

.login-form {
  display: grid;
  gap: 16px;
  margin: 0;
}

.login-input-shell {
  display: grid;
  gap: 8px;
}

.login-input-shell > span {
  color: #b9cde0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.login-input-frame {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045)),
    rgba(7, 17, 29, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    border-color var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast),
    background var(--ui-transition-fast);
}

.login-input-frame:focus-within {
  border-color: rgba(56, 189, 248, 0.72);
  background: rgba(10, 24, 40, 0.82);
  box-shadow:
    0 0 0 4px rgba(56, 189, 248, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.login-input-frame .app-icon {
  width: 21px;
  height: 21px;
  color: var(--login-forge-blue);
}

.login-input-frame input {
  width: 100%;
  min-height: 50px;
  border: 0;
  outline: 0;
  color: #f8fbff;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
}

.login-input-frame input::placeholder {
  color: rgba(184, 204, 220, 0.56);
}

.login-actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.login-submit-button.primary-button {
  position: relative;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.46);
  border-radius: 17px;
  background:
    linear-gradient(90deg, #1d4ed8, #0891b2 52%, #0f766e);
  box-shadow:
    0 20px 44px rgba(14, 165, 233, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  font-family: var(--ui-font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.login-submit-button::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%);
  content: "";
  transform: translateX(-120%);
  animation: loginButtonGlint 3.4s ease-in-out infinite;
}

.login-submit-button span,
.login-submit-button .app-icon {
  position: relative;
  z-index: 1;
}

.login-submit-button .app-icon {
  width: 20px;
  height: 20px;
}

.login-auth-card .form-message,
.login-auth-card .form-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 800;
}

.login-auth-card .form-message {
  border: 1px solid rgba(52, 211, 153, 0.24);
  color: #bbf7d0;
  background: rgba(22, 101, 52, 0.24);
}

.login-auth-card .form-error {
  border: 1px solid rgba(248, 113, 113, 0.24);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.22);
}

.login-security-foot {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  color: #8ca7bd;
  font-size: 12px;
  line-height: 1.5;
}

.login-security-foot span {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(52, 211, 153, 0.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(52, 211, 153, 0.9) 0 3px, transparent 4px),
    rgba(52, 211, 153, 0.1);
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.22);
}

.login-security-foot p {
  margin: 0;
}

.login-command-deck {
  grid-template-rows: auto minmax(420px, 1fr);
  min-height: 620px;
}

.login-forge-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(310px, 1fr) auto;
  gap: 18px;
  min-height: 520px;
  padding: clamp(18px, 2.6vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(84, 145, 185, 0.32);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    radial-gradient(circle at 24% 24%, rgba(56, 189, 248, 0.18), transparent 30%),
    radial-gradient(circle at 72% 64%, rgba(245, 158, 11, 0.1), transparent 34%),
    rgba(3, 13, 24, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(56, 189, 248, 0.08),
    0 22px 54px rgba(0, 0, 0, 0.24);
}

.login-forge-stage::before {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.04) 0 1px, transparent 1px 28px);
  content: "";
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

.login-forge-stage::after {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.54), rgba(52, 211, 153, 0.44), transparent);
  box-shadow: 0 0 26px rgba(56, 189, 248, 0.24);
  content: "";
  pointer-events: none;
}

.login-stage-header,
.login-process-map {
  position: relative;
  z-index: 1;
}

.login-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  color: #dff5ff;
  font-family: var(--ui-font-display);
  letter-spacing: 0.08em;
}

.login-stage-header div {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 900;
}

.login-stage-header strong {
  padding: 7px 10px;
  border: 1px solid rgba(52, 211, 153, 0.32);
  border-radius: 999px;
  color: #bbf7d0;
  background: rgba(15, 118, 110, 0.16);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.login-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--login-mint);
  box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.12), 0 0 24px rgba(52, 211, 153, 0.7);
  animation: loginLivePulse 1.8s ease-in-out infinite;
}

.login-process-map {
  display: grid;
  grid-template-rows: minmax(250px, 1fr) auto;
  gap: 18px;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 42%, rgba(56, 189, 248, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 42%),
    rgba(3, 12, 22, 0.44);
}

.login-press-showcase {
  position: relative;
  min-height: 260px;
  overflow: hidden;
}

.login-press-showcase::before {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 62%;
  height: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.22) 0 13px, rgba(15, 23, 42, 0.34) 13px 25px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(52, 211, 153, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.24);
  content: "";
}

.login-coil {
  position: absolute;
  left: 8%;
  top: 35%;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(3, 12, 22, 0.92) 0 18px, transparent 19px),
    conic-gradient(from 20deg, rgba(226, 232, 240, 0.86), rgba(71, 85, 105, 0.36), rgba(226, 232, 240, 0.82), rgba(15, 23, 42, 0.5), rgba(226, 232, 240, 0.86));
  box-shadow:
    0 0 44px rgba(56, 189, 248, 0.14),
    inset 0 0 0 9px rgba(15, 23, 42, 0.28);
  animation: loginCoilTurn 8s linear infinite;
}

.login-coil span {
  position: absolute;
  inset: calc(var(--coil-ring, 0) * 13px);
  border: 1px solid rgba(226, 232, 240, 0.28);
  border-radius: 999px;
}

.login-coil span:nth-child(1) {
  --coil-ring: 1;
}

.login-coil span:nth-child(2) {
  --coil-ring: 2;
}

.login-coil span:nth-child(3) {
  --coil-ring: 3;
}

.login-feeder-line {
  position: absolute;
  left: 18%;
  right: 22%;
  top: calc(62% - 12px);
  height: 28px;
  overflow: hidden;
}

.login-metal-strip {
  position: absolute;
  left: -12%;
  top: 2px;
  width: 50px;
  height: 24px;
  border: 1px solid rgba(226, 232, 240, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.86), rgba(148, 163, 184, 0.42) 42%, rgba(15, 23, 42, 0.2)),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.24) 7px 8px);
  box-shadow:
    0 0 22px rgba(56, 189, 248, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  opacity: 0;
  animation: loginMetalTravel 4.6s linear infinite;
}

.login-metal-strip-b {
  animation-delay: 1.5s;
}

.login-metal-strip-c {
  animation-delay: 3s;
}

.login-press-machine {
  position: absolute;
  left: 50%;
  top: 21%;
  width: 150px;
  height: 176px;
  transform: translateX(-50%);
}

.login-press-arm {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 4px;
  height: 90px;
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 26px 26px 14px 14px;
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.34), rgba(15, 23, 42, 0.84)),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, 0.08) 12px 13px);
  box-shadow:
    0 22px 50px rgba(56, 189, 248, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.login-press-hammer {
  position: absolute;
  left: 50%;
  top: 66px;
  width: 52px;
  height: 34px;
  border: 1px solid rgba(226, 232, 240, 0.4);
  border-radius: 9px;
  background: linear-gradient(180deg, #dbeafe, #64748b 56%, #1e293b);
  box-shadow:
    0 12px 28px rgba(56, 189, 248, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  transform: translateX(-50%);
  animation: loginPressStamp 1.45s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.login-press-die {
  position: absolute;
  left: 27px;
  right: 27px;
  bottom: 18px;
  height: 16px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.46), rgba(56, 189, 248, 0.38));
  box-shadow: 0 0 26px rgba(245, 158, 11, 0.2);
}

.login-spark {
  position: absolute;
  left: 50%;
  top: 132px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #fbbf24;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.82);
  opacity: 0;
  animation: loginSparkBurst 1.45s ease-out infinite;
}

.login-spark-a {
  --spark-x: -44px;
  --spark-y: 18px;
}

.login-spark-b {
  --spark-x: 34px;
  --spark-y: 18px;
  animation-delay: 0.05s;
}

.login-spark-c {
  --spark-x: 4px;
  --spark-y: 34px;
  animation-delay: 0.1s;
}

.login-stamped-stack {
  position: absolute;
  right: 8%;
  top: 44%;
  width: 86px;
  height: 88px;
}

.login-stamped-stack span {
  position: absolute;
  right: calc(var(--part, 0) * 10px);
  bottom: calc(var(--part, 0) * 10px);
  width: 58px;
  height: 34px;
  border: 1px solid rgba(56, 189, 248, 0.32);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 8px, rgba(226, 232, 240, 0.55) 9px 10px, transparent 11px),
    linear-gradient(135deg, rgba(226, 232, 240, 0.72), rgba(71, 85, 105, 0.24));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
  animation: loginPartGlow 2.6s ease-in-out infinite;
}

.login-stamped-stack span:nth-child(1) {
  --part: 0;
}

.login-stamped-stack span:nth-child(2) {
  --part: 1;
  animation-delay: 0.18s;
}

.login-stamped-stack span:nth-child(3) {
  --part: 2;
  animation-delay: 0.36s;
}

.login-flow-ribbon {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.login-flow-chip {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 7px;
  align-items: center;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(15, 30, 48, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.login-flow-chip .app-icon {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  color: var(--login-forge-blue);
}

.login-flow-chip span {
  color: #eef8ff;
  font-size: 13px;
  font-weight: 900;
}

.login-flow-chip small {
  color: #89a8bd;
  font-size: 10px;
  font-weight: 800;
}

@keyframes loginScanSweep {
  0%,
  100% {
    transform: translateY(-52%);
    opacity: 0.18;
  }
  50% {
    transform: translateY(52%);
    opacity: 0.76;
  }
}

@keyframes loginBeamDrift {
  from {
    opacity: 0.36;
    filter: blur(0.4px);
  }
  to {
    opacity: 0.88;
    filter: blur(1.1px);
  }
}

@keyframes loginOrbitGlow {
  0%,
  100% {
    opacity: 0.32;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.02);
  }
}

@keyframes loginButtonGlint {
  0%,
  48% {
    transform: translateX(-120%);
  }
  72%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes loginLivePulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.68;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes loginMetalTravel {
  0% {
    left: -16%;
    opacity: 0;
    transform: translateY(0) scale(0.82);
  }
  10%,
  72% {
    opacity: 1;
  }
  46% {
    transform: translateY(-4px) scale(1);
  }
  100% {
    left: 98%;
    opacity: 0;
    transform: translateY(0) scale(0.86);
  }
}

@keyframes loginPressStamp {
  0%,
  58%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  70%,
  82% {
    transform: translateX(-50%) translateY(30px);
  }
}

@keyframes loginCoilTurn {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes loginPartGlow {
  0%,
  100% {
    opacity: 0.68;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes loginSparkBurst {
  0%,
  62% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.08);
  }
}

@keyframes loginQualityScan {
  0%,
  100% {
    opacity: 0.18;
    transform: scaleX(0.4) skewX(-16deg);
  }
  50% {
    opacity: 0.78;
    transform: scaleX(1) skewX(12deg);
  }
}

@media (max-width: 900px) {
  .login-shell {
    align-items: start;
    padding: 16px;
    overflow-y: auto;
  }

  .login-cockpit {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .login-command-deck {
    grid-template-rows: auto;
    min-height: auto;
    padding: 22px;
  }

  .login-forge-stage {
    grid-template-rows: auto auto;
    min-height: auto;
  }

  .login-process-map {
    grid-template-rows: minmax(230px, 1fr) auto;
    min-height: 380px;
  }

  .login-flow-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-status-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .login-forge-visual {
    display: none;
  }

  .login-auth-card {
    padding: 22px;
  }
}

@media (max-width: 560px) {
  .login-shell {
    padding: 10px;
  }

  .login-command-deck,
  .login-auth-card {
    border-radius: 24px;
  }

  .login-command-brand {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .login-command-brand .login-logo,
  .login-shell .login-logo {
    width: 44px;
    height: 44px;
  }

  .login-forge-stage {
    padding: 16px;
  }

  .login-process-map {
    min-height: 330px;
  }

  .login-press-showcase {
    min-height: 200px;
  }

  .login-coil {
    left: 7%;
    top: 42%;
    width: 64px;
    height: 64px;
  }

  .login-feeder-line {
    left: 18%;
    right: 18%;
    top: calc(62% - 10px);
    height: 24px;
  }

  .login-metal-strip {
    width: 38px;
    height: 19px;
  }

  .login-press-machine {
    top: 24%;
    width: 96px;
    height: 122px;
    transform: translateX(-50%);
  }

  .login-press-arm {
    left: 14px;
    right: 14px;
    top: 3px;
    width: auto;
    height: 62px;
    border-radius: 13px 13px 8px 8px;
  }

  .login-press-hammer {
    left: 50%;
    top: 48px;
    width: 34px;
    height: 22px;
  }

  .login-press-die {
    left: 16px;
    right: 16px;
    bottom: 12px;
    height: 11px;
  }

  .login-spark {
    top: 92px;
  }

  .login-stamped-stack {
    right: 5%;
    top: 48%;
    transform: scale(0.72);
  }

  .login-stage-header {
    align-items: flex-start;
  }

  .login-stage-header div {
    font-size: 12px;
  }

  .login-flow-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0 10px 10px;
  }

  .login-flow-chip {
    padding: 9px 7px;
  }

  .login-flow-chip span {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-forge-grid::after,
  .login-metal-beam,
  .login-factory-orbit span,
  .login-live-dot,
  .login-metal-strip,
  .login-press-hammer,
  .login-coil,
  .login-stamped-stack span,
  .login-spark,
  .login-submit-button::after {
    animation: none !important; /* disables loginScanSweep, loginBeamDrift, loginOrbitGlow, loginMetalTravel, loginPressStamp and loginButtonGlint */
  }
}

/* Login final direction: unified A+C industrial cockpit, no split hero/login cards. */
body .login-industrial-stage {
  --login-forge-blue: #38bdf8;
  --login-steel: #2563eb;
  --login-mint: #34d399;
  --login-copper: #f59e0b;
  --login-ink: #e7f5ff;
  --login-muted: #91aec4;
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
  padding: clamp(18px, 4vw, 44px);
  color: var(--login-ink);
  background:
    radial-gradient(circle at 27% 45%, rgba(56, 189, 248, 0.22), transparent 30%),
    radial-gradient(circle at 68% 26%, rgba(52, 211, 153, 0.14), transparent 28%),
    radial-gradient(circle at 76% 78%, rgba(245, 158, 11, 0.08), transparent 24%),
    linear-gradient(135deg, #030914 0%, #071627 46%, #0d2033 100%);
  cursor: default;
  isolation: isolate;
}

body .login-industrial-stage::before {
  position: absolute;
  inset: 0;
  z-index: -7;
  background:
    linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
  background-size: 58px 58px;
  content: "";
  mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 78%);
}

body .login-industrial-stage::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(180deg, rgba(2, 6, 12, 0.04), rgba(2, 6, 12, 0.44));
  content: "";
  pointer-events: none;
}

body .login-kinetic-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

body .login-depth-grid {
  position: absolute;
  left: 8%;
  right: 6%;
  bottom: 9%;
  height: 42%;
  border: 1px solid rgba(56, 189, 248, 0.12);
  background:
    linear-gradient(rgba(56, 189, 248, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.1) 1px, transparent 1px);
  background-size: 64px 34px;
  opacity: 0.46;
  transform: perspective(780px) rotateX(62deg);
  transform-origin: bottom;
  animation: loginFactoryDepth 8s linear infinite;
}

body .login-scan-plane {
  position: absolute;
  width: min(48vw, 720px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.88), rgba(245, 158, 11, 0.45), transparent);
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.24);
  opacity: 0.74;
  animation: loginBeamDrift 6.8s ease-in-out infinite alternate;
}

body .login-scan-plane-a {
  left: -7%;
  top: 20%;
  transform: rotate(-16deg);
}

body .login-scan-plane-b {
  right: -10%;
  bottom: 18%;
  animation-delay: -2s;
  transform: rotate(13deg);
}

body .login-data-thread {
  position: absolute;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(56, 189, 248, 0.16);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  background:
    radial-gradient(circle at center, rgba(56, 189, 248, 0.12), transparent 62%),
    repeating-linear-gradient(60deg, rgba(226, 232, 240, 0.08) 0 1px, transparent 1px 18px);
  opacity: 0.65;
  animation: loginHudFloat 7.5s ease-in-out infinite;
}

body .login-data-thread-a {
  left: 11%;
  top: 14%;
}

body .login-data-thread-b {
  right: 8%;
  top: 10%;
  animation-delay: -2.6s;
}

body .login-unified-cockpit {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(380px, 430px);
  grid-template-rows: 1fr auto;
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  width: min(1240px, 100%);
  min-height: min(760px, calc(100vh - 72px));
}

body .login-brand-panel {
  align-self: start;
  display: grid;
  gap: 18px;
  max-width: 420px;
  padding-top: clamp(8px, 4vh, 48px);
}

body .login-command-brand {
  display: inline-grid;
  grid-template-columns: 54px minmax(0, auto);
  gap: 14px;
  align-items: center;
  width: fit-content;
  padding: 10px 14px;
  border: 1px solid rgba(174, 199, 224, 0.24);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(9, 22, 36, 0.42);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
}

body .login-command-brand .login-logo,
body .login-shell .login-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(56, 189, 248, 0.34));
}

body .login-command-brand span,
body .login-console-chip {
  color: #9fdfff;
  font-family: var(--ui-font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body .login-command-brand strong {
  display: block;
  margin-top: 3px;
  color: #f8fbff;
  font-size: 18px;
  letter-spacing: 0.02em;
}

body .login-live-caption {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 18px;
  background: rgba(6, 18, 31, 0.46);
  color: #dff5ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

body .login-live-caption strong {
  color: #f3fbff;
  font-size: 14px;
}

body .login-live-caption small {
  grid-column: 2;
  color: var(--login-muted);
  font-size: 12px;
  font-weight: 800;
}

body .login-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--login-mint);
  box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.12), 0 0 24px rgba(52, 211, 153, 0.7);
  animation: loginLivePulse 1.8s ease-in-out infinite;
}

body .login-holo-press {
  position: absolute;
  left: 46%;
  top: 50%;
  z-index: -1;
  width: min(54vw, 700px);
  height: min(54vw, 700px);
  min-width: 430px;
  min-height: 430px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body .login-holo-ring {
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(56, 189, 248, 0.13);
  border-radius: 999px;
  box-shadow: inset 0 0 46px rgba(56, 189, 248, 0.05);
  animation: loginOrbitGlow 4.2s ease-in-out infinite;
}

body .login-holo-ring-b {
  inset: 26%;
  animation-delay: -1.6s;
}

body .login-coil {
  position: absolute;
  left: 8%;
  top: 48%;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(3, 12, 22, 0.92) 0 23px, transparent 24px),
    conic-gradient(from 20deg, rgba(226, 232, 240, 0.9), rgba(71, 85, 105, 0.38), rgba(226, 232, 240, 0.84), rgba(15, 23, 42, 0.5), rgba(226, 232, 240, 0.9));
  box-shadow:
    0 0 54px rgba(56, 189, 248, 0.16),
    inset 0 0 0 12px rgba(15, 23, 42, 0.28);
  animation: loginCoilTurn 8s linear infinite;
}

body .login-coil span {
  position: absolute;
  inset: calc(var(--coil-ring, 0) * 17px);
  border: 1px solid rgba(226, 232, 240, 0.28);
  border-radius: 999px;
}

body .login-coil span:nth-child(1) {
  --coil-ring: 1;
}

body .login-coil span:nth-child(2) {
  --coil-ring: 2;
}

body .login-coil span:nth-child(3) {
  --coil-ring: 3;
}

body .login-feeder-line {
  position: absolute;
  left: 18%;
  right: 20%;
  top: calc(62% - 15px);
  height: 32px;
  overflow: hidden;
}

body .login-feeder-line::before {
  position: absolute;
  inset: 10px 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.22) 0 13px, rgba(15, 23, 42, 0.34) 13px 25px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(52, 211, 153, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.24);
  content: "";
}

body .login-metal-strip {
  position: absolute;
  left: -16%;
  top: 3px;
  width: 56px;
  height: 26px;
  border: 1px solid rgba(226, 232, 240, 0.36);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.86), rgba(148, 163, 184, 0.42) 42%, rgba(15, 23, 42, 0.2)),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.24) 7px 8px);
  box-shadow:
    0 0 22px rgba(56, 189, 248, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  opacity: 0;
  animation: loginMetalTravel 4.6s linear infinite;
}

body .login-metal-strip-b {
  animation-delay: 1.5s;
}

body .login-metal-strip-c {
  animation-delay: 3s;
}

body .login-press-machine {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 170px;
  height: 206px;
  transform: translateX(-50%);
}

body .login-press-arm {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 4px;
  height: 112px;
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 32px 32px 16px 16px;
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.34), rgba(15, 23, 42, 0.84)),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, 0.08) 12px 13px);
  box-shadow:
    0 22px 50px rgba(56, 189, 248, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body .login-press-hammer {
  position: absolute;
  left: 50%;
  top: 88px;
  width: 58px;
  height: 36px;
  border: 1px solid rgba(226, 232, 240, 0.4);
  border-radius: 10px;
  background: linear-gradient(180deg, #dbeafe, #64748b 56%, #1e293b);
  box-shadow:
    0 12px 28px rgba(56, 189, 248, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  transform: translateX(-50%);
  animation: loginPressStamp 1.45s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

body .login-press-die {
  position: absolute;
  left: 29px;
  right: 29px;
  bottom: 22px;
  height: 17px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.46), rgba(56, 189, 248, 0.38));
  box-shadow: 0 0 26px rgba(245, 158, 11, 0.2);
}

body .login-spark {
  position: absolute;
  left: 50%;
  top: 158px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #fbbf24;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.82);
  opacity: 0;
  animation: loginSparkBurst 1.45s ease-out infinite;
}

body .login-spark-a {
  --spark-x: -50px;
  --spark-y: 20px;
}

body .login-spark-b {
  --spark-x: 40px;
  --spark-y: 18px;
  animation-delay: 0.05s;
}

body .login-spark-c {
  --spark-x: 4px;
  --spark-y: 36px;
  animation-delay: 0.1s;
}

body .login-stamped-stack {
  position: absolute;
  right: 9%;
  top: 51%;
  width: 100px;
  height: 96px;
}

body .login-stamped-stack span {
  position: absolute;
  right: calc(var(--part, 0) * 11px);
  bottom: calc(var(--part, 0) * 10px);
  width: 66px;
  height: 38px;
  border: 1px solid rgba(56, 189, 248, 0.32);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 9px, rgba(226, 232, 240, 0.55) 10px 11px, transparent 12px),
    linear-gradient(135deg, rgba(226, 232, 240, 0.72), rgba(71, 85, 105, 0.24));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
  animation: loginPartGlow 2.6s ease-in-out infinite;
}

body .login-stamped-stack span:nth-child(1) {
  --part: 0;
}

body .login-stamped-stack span:nth-child(2) {
  --part: 1;
  animation-delay: 0.18s;
}

body .login-stamped-stack span:nth-child(3) {
  --part: 2;
  animation-delay: 0.36s;
}

body .login-control-console {
  position: relative;
  align-self: center;
  padding: clamp(24px, 3vw, 36px);
  overflow: hidden;
  border: 1px solid rgba(174, 199, 224, 0.25);
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(10, 24, 40, 0.76), rgba(7, 18, 31, 0.54)),
    rgba(9, 20, 34, 0.56);
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(25px);
}

body .login-control-console::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.14), transparent 34%),
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.18), transparent 28%);
  content: "";
  pointer-events: none;
}

body .login-panel-head,
body .login-form,
body .login-security-foot {
  position: relative;
  z-index: 1;
}

body .login-panel-head {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
  text-align: left;
}

body .login-panel-head h2 {
  margin: 0;
  color: #f8fbff;
  font-family: var(--ui-font-display);
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: 0.03em;
}

body .login-panel-head p {
  margin: 0;
  color: var(--login-muted);
  font-size: 13px;
  line-height: 1.7;
}

body .login-form {
  display: grid;
  gap: 16px;
  margin: 0;
}

body .login-input-shell {
  display: grid;
  gap: 8px;
}

body .login-input-shell > span {
  color: #b9cde0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

body .login-input-frame {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045)),
    rgba(7, 17, 29, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    border-color var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast),
    background var(--ui-transition-fast);
}

body .login-input-frame:focus-within {
  border-color: rgba(56, 189, 248, 0.72);
  background: rgba(10, 24, 40, 0.82);
  box-shadow:
    0 0 0 4px rgba(56, 189, 248, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body .login-input-frame .app-icon {
  width: 21px;
  height: 21px;
  color: var(--login-forge-blue);
}

body .login-input-frame input {
  width: 100%;
  min-height: 50px;
  border: 0;
  outline: 0;
  color: #f8fbff;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
}

body .login-input-frame input::placeholder {
  color: rgba(184, 204, 220, 0.56);
}

body .login-actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

body .login-submit-button.primary-button {
  position: relative;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.46);
  border-radius: 17px;
  background:
    linear-gradient(90deg, #1d4ed8, #0891b2 52%, #0f766e);
  box-shadow:
    0 20px 44px rgba(14, 165, 233, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  font-family: var(--ui-font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
}

body .login-submit-button::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%);
  content: "";
  transform: translateX(-120%);
  animation: loginButtonGlint 3.4s ease-in-out infinite;
}

body .login-submit-button span,
body .login-submit-button .app-icon {
  position: relative;
  z-index: 1;
}

body .login-submit-button .app-icon {
  width: 20px;
  height: 20px;
}

body .login-control-console .form-message,
body .login-control-console .form-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 800;
}

body .login-control-console .form-message {
  border: 1px solid rgba(52, 211, 153, 0.24);
  color: #bbf7d0;
  background: rgba(22, 101, 52, 0.24);
}

body .login-control-console .form-error {
  border: 1px solid rgba(248, 113, 113, 0.24);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.22);
}

body .login-security-foot {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  color: #8ca7bd;
  font-size: 12px;
  line-height: 1.5;
}

body .login-security-foot span {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(52, 211, 153, 0.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(52, 211, 153, 0.9) 0 3px, transparent 4px),
    rgba(52, 211, 153, 0.1);
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.22);
}

body .login-security-foot p {
  margin: 0;
}

body .login-flow-ribbon {
  grid-column: 1 / -1;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: min(760px, 100%);
}

body .login-flow-chip {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  min-height: 64px;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.028)),
    rgba(10, 24, 40, 0.48);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
}

body .login-flow-chip .app-icon {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  color: var(--login-forge-blue);
}

body .login-flow-chip span {
  color: #eef8ff;
  font-size: 13px;
  font-weight: 900;
}

body .login-flow-chip small {
  color: #89a8bd;
  font-size: 10px;
  font-weight: 800;
}

@keyframes loginFactoryDepth {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 68px, 128px 0;
  }
}

@keyframes loginHudFloat {
  0%,
  100% {
    opacity: 0.45;
    transform: translateY(0) rotate(0deg);
  }
  50% {
    opacity: 0.78;
    transform: translateY(-12px) rotate(4deg);
  }
}

@media (max-width: 900px) {
  body .login-industrial-stage {
    align-items: start;
    min-height: 100vh;
    padding: 14px;
    overflow-y: auto;
  }

  body .login-unified-cockpit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 16px;
    min-height: auto;
  }

  body .login-brand-panel {
    align-self: auto;
    padding-top: 0;
  }

  body .login-holo-press {
    position: relative;
    left: auto;
    top: auto;
    grid-row: 2;
    width: min(100%, 460px);
    height: 320px;
    min-width: 0;
    min-height: 0;
    margin: -20px auto -8px;
    transform: none;
  }

  body .login-control-console {
    grid-row: 3;
    padding: 22px;
  }

  body .login-flow-ribbon {
    grid-row: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body .login-industrial-stage {
    padding: 10px;
  }

  body .login-command-brand {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  body .login-command-brand .login-logo,
  body .login-shell .login-logo {
    width: 44px;
    height: 44px;
  }

  body .login-holo-press {
    height: 260px;
    margin-top: -8px;
  }

  body .login-coil {
    left: 4%;
    top: 48%;
    width: 72px;
    height: 72px;
  }

  body .login-coil span {
    inset: calc(var(--coil-ring, 0) * 10px);
  }

  body .login-feeder-line {
    left: 16%;
    right: 16%;
    top: calc(62% - 12px);
  }

  body .login-metal-strip {
    width: 40px;
    height: 20px;
  }

  body .login-press-machine {
    top: 28%;
    width: 108px;
    height: 136px;
  }

  body .login-press-arm {
    left: 14px;
    right: 14px;
    height: 72px;
    border-radius: 18px 18px 11px 11px;
  }

  body .login-press-hammer {
    top: 54px;
    width: 36px;
    height: 24px;
  }

  body .login-press-die {
    left: 18px;
    right: 18px;
    bottom: 14px;
    height: 12px;
  }

  body .login-spark {
    top: 104px;
  }

  body .login-stamped-stack {
    right: 1%;
    top: 51%;
    transform: scale(0.72);
  }

  body .login-flow-ribbon {
    gap: 7px;
  }

  body .login-flow-chip {
    min-height: 58px;
    padding: 9px 8px;
  }

  body .login-flow-chip span {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .login-industrial-stage::before,
  body .login-depth-grid,
  body .login-scan-plane,
  body .login-data-thread,
  body .login-holo-ring,
  body .login-live-dot,
  body .login-metal-strip,
  body .login-press-hammer,
  body .login-coil,
  body .login-stamped-stack span,
  body .login-spark,
  body .login-submit-button::after {
    animation: none !important;
  }
}

/* Login page v3: separated forge line + access console */
body .login-industrial-stage.login-production-layout {
  --login-ink: #eaf6ff;
  --login-muted: #8eabc2;
  --login-forge-blue: #38bdf8;
  --login-forge-cyan: #22d3ee;
  --login-forge-green: #34d399;
  --login-hot-metal: #f59e0b;
  --login-steel-line: rgba(148, 163, 184, 0.22);
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: clamp(22px, 4vw, 56px);
  overflow: hidden;
  color: var(--login-ink);
  background:
    radial-gradient(circle at 17% 24%, rgba(56, 189, 248, 0.18), transparent 26%),
    radial-gradient(circle at 73% 26%, rgba(52, 211, 153, 0.14), transparent 27%),
    linear-gradient(135deg, #050914 0%, #091827 48%, #07111d 100%);
}

body .login-industrial-stage.login-production-layout::before {
  position: absolute;
  inset: -20%;
  z-index: -3;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(56, 189, 248, 0.1) 37% 38%, transparent 39% 100%),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.035) 0 1px, transparent 1px 92px);
  content: "";
  transform: rotate(-7deg);
  animation: loginFactoryDepth 18s linear infinite;
}

body .login-industrial-stage.login-production-layout::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 120%, rgba(56, 189, 248, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.05), rgba(2, 6, 23, 0.72));
  content: "";
  pointer-events: none;
}

body .login-production-layout .login-kinetic-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

body .login-production-layout .login-depth-grid {
  position: absolute;
  inset: 10% 5% 8%;
  background:
    linear-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse at 42% 48%, #000 0 42%, transparent 72%);
  opacity: 0.58;
  transform: perspective(760px) rotateX(62deg) translateY(70px);
  transform-origin: center bottom;
  animation: loginFactoryDepth 14s linear infinite;
}

body .login-production-layout .login-scan-plane {
  position: absolute;
  width: 58vw;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.8), transparent);
  opacity: 0.5;
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.45));
  animation: loginScanSweep 7s ease-in-out infinite;
}

body .login-production-layout .login-scan-plane-a {
  left: 5%;
  top: 29%;
}

body .login-production-layout .login-scan-plane-b {
  right: 8%;
  top: 70%;
  animation-delay: -3.2s;
}

body .login-production-layout .login-data-thread {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.72), transparent),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(255, 255, 255, 0.42) 16px 21px);
  opacity: 0.34;
  transform-origin: left center;
  animation: loginSteelPulse 5.8s ease-in-out infinite;
}

body .login-production-layout .login-data-thread-a {
  left: 12%;
  top: 17%;
  width: 36%;
  transform: rotate(5deg);
}

body .login-production-layout .login-data-thread-b {
  right: 10%;
  top: 83%;
  width: 30%;
  transform: rotate(-4deg);
  animation-delay: -2s;
}

body .login-production-layout .login-data-thread-c {
  left: 42%;
  top: 50%;
  width: 26%;
  transform: rotate(-12deg);
  animation-delay: -3.4s;
}

body .login-production-layout .login-heat-column {
  position: absolute;
  bottom: -18%;
  width: 24vw;
  height: 68vh;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(56, 189, 248, 0.18), transparent 42%),
    linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.1), transparent);
  filter: blur(18px);
  opacity: 0.2;
  transform: translateY(16%);
  animation: loginHeatRise 7.2s ease-in-out infinite;
}

body .login-production-layout .login-heat-column-a {
  left: 18%;
}

body .login-production-layout .login-heat-column-b {
  left: 42%;
  width: 30vw;
  animation-delay: -2.4s;
}

body .login-production-layout .login-heat-column-c {
  right: 8%;
  animation-delay: -4.6s;
}

body .login-production-cockpit {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(570px, 1fr) minmax(450px, 520px);
  gap: clamp(12px, 2.5vw, 34px);
  align-items: center;
  width: min(1360px, 100%);
  min-height: min(760px, calc(100vh - 64px));
}

body .login-line-area {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(390px, 1fr) auto;
  min-width: 0;
  min-height: 630px;
  padding: clamp(6px, 1.8vw, 18px) 0;
}

body .login-line-brand {
  position: relative;
  z-index: 2;
  display: inline-grid;
  grid-template-columns: 48px minmax(0, max-content);
  gap: 12px;
  align-items: center;
  justify-self: start;
  max-width: min(280px, 100%);
  padding: 10px 15px 10px 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(8, 20, 34, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 20px 46px rgba(2, 6, 23, 0.28);
  backdrop-filter: blur(18px);
}

body .login-line-brand .login-logo,
body .login-production-layout .login-logo {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.28);
}

body .login-line-brand span {
  display: block;
  color: #f8fbff;
  font-family: var(--ui-font-display);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

body .login-line-brand strong {
  display: block;
  margin-top: 2px;
  color: var(--login-muted);
  font-family: var(--ui-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body .login-line-status {
  position: absolute;
  top: clamp(78px, 10vh, 118px);
  left: clamp(8px, 3vw, 56px);
  z-index: 2;
  display: grid;
  grid-template-columns: 12px minmax(0, max-content);
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  max-width: min(370px, calc(100% - 40px));
  padding: 10px 13px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 999px;
  background: rgba(6, 18, 31, 0.44);
  color: var(--login-muted);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 44px rgba(2, 6, 23, 0.18);
  backdrop-filter: blur(16px);
}

body .login-line-status .login-live-dot {
  grid-row: span 2;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--login-forge-green);
  box-shadow: 0 0 22px rgba(52, 211, 153, 0.78);
  animation: loginLivePulse 1.8s ease-in-out infinite;
}

body .login-line-status strong {
  color: #effaff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

body .login-line-status small {
  color: rgba(184, 204, 220, 0.76);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

body .login-production-line {
  position: relative;
  align-self: center;
  width: min(850px, 100%);
  height: clamp(390px, 49vw, 560px);
  margin: 34px 0 20px;
  overflow: visible;
}

body .login-line-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 58px;
  height: 98px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 50% 50% 26px 26px / 36% 36% 24px 24px;
  background:
    linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.08), transparent),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.12) 0 1px, transparent 1px 38px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 80px rgba(0, 0, 0, 0.2);
  transform: perspective(520px) rotateX(62deg);
  transform-origin: center bottom;
}

body .login-line-floor::after {
  position: absolute;
  inset: 12px 11%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.28), transparent);
  content: "";
  opacity: 0;
  animation: loginForgeBeam 3.7s ease-in-out infinite;
}

body .login-forge-beam {
  position: absolute;
  z-index: 1;
  width: 2px;
  height: 72%;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.92), transparent);
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.52),
    0 0 42px rgba(56, 189, 248, 0.24);
  opacity: 0;
  transform: skewX(-13deg);
  animation: loginForgeBeam 3.2s ease-in-out infinite;
  pointer-events: none;
}

body .login-forge-beam-a {
  left: 39%;
  top: 12%;
}

body .login-forge-beam-b {
  left: 67%;
  top: 20%;
  height: 54%;
  animation-delay: -1.5s;
}

body .login-production-line .login-coil {
  position: absolute;
  left: 1%;
  top: 45%;
  width: 136px;
  height: 136px;
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(3, 12, 22, 0.94) 0 24px, transparent 25px),
    conic-gradient(from 20deg, rgba(241, 245, 249, 0.9), rgba(71, 85, 105, 0.38), rgba(241, 245, 249, 0.84), rgba(15, 23, 42, 0.5), rgba(241, 245, 249, 0.9));
  box-shadow:
    0 0 58px rgba(56, 189, 248, 0.18),
    inset 0 0 0 13px rgba(15, 23, 42, 0.26);
  animation: loginCoilTurn 8s linear infinite;
}

body .login-production-line .login-coil::before {
  position: absolute;
  inset: -18px;
  border: 1px dashed rgba(56, 189, 248, 0.14);
  border-radius: inherit;
  content: "";
}

body .login-production-line .login-coil span {
  position: absolute;
  inset: calc(var(--coil-ring, 0) * 18px);
  border: 1px solid rgba(226, 232, 240, 0.28);
  border-radius: 999px;
}

body .login-production-line .login-coil span:nth-child(1) {
  --coil-ring: 1;
}

body .login-production-line .login-coil span:nth-child(2) {
  --coil-ring: 2;
}

body .login-production-line .login-coil span:nth-child(3) {
  --coil-ring: 3;
}

body .login-production-line .login-feeder-line {
  position: absolute;
  left: 13%;
  right: 13%;
  top: calc(61% - 16px);
  height: 36px;
  overflow: hidden;
}

body .login-production-line .login-feeder-line::before {
  position: absolute;
  inset: 10px 0;
  border: 1px solid rgba(148, 163, 184, 0.23);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.2) 0 14px, rgba(15, 23, 42, 0.38) 14px 27px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(52, 211, 153, 0.17));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.24);
  content: "";
  animation: loginConveyorRoll 1.2s linear infinite;
}

body .login-production-line .login-feeder-line::after {
  position: absolute;
  inset: 12px 10%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.28), transparent);
  content: "";
  opacity: 0.7;
  transform: translateX(-40%);
  animation: loginConveyorSignal 2.4s ease-in-out infinite;
}

body .login-production-line .login-metal-strip {
  position: absolute;
  left: -16%;
  top: 3px;
  width: 58px;
  height: 28px;
  border: 1px solid rgba(226, 232, 240, 0.38);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.88), rgba(148, 163, 184, 0.44) 42%, rgba(15, 23, 42, 0.2)),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.24) 7px 8px);
  box-shadow:
    0 0 22px rgba(56, 189, 248, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  opacity: 0;
  animation: loginMetalTravel 3.7s linear infinite;
}

body .login-production-line .login-metal-strip-b {
  animation-delay: 1.23s;
}

body .login-production-line .login-metal-strip-c {
  animation-delay: 2.46s;
}

body .login-line-machine {
  position: absolute;
  left: 45%;
  top: 21%;
  width: 230px;
  height: 275px;
  transform: translateX(-50%);
}

body .login-line-machine::before {
  position: absolute;
  inset: 6px 0 auto;
  height: 232px;
  border: 1px solid rgba(56, 189, 248, 0.16);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.08), transparent 36%),
    rgba(8, 20, 34, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 74px rgba(2, 6, 23, 0.28);
  content: "";
}

body .login-production-line .login-press-machine {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 174px;
  height: 210px;
  transform: translateX(-50%);
}

body .login-production-line .login-press-aura {
  position: absolute;
  left: 50%;
  top: 122px;
  width: 116px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(245, 158, 11, 0.52), rgba(56, 189, 248, 0.18) 45%, transparent 72%);
  filter: blur(3px);
  opacity: 0;
  transform: translateX(-50%) scale(0.7);
  animation: loginPressAura 1.45s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

body .login-production-line .login-press-arm {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 4px;
  height: 112px;
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 32px 32px 16px 16px;
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.34), rgba(15, 23, 42, 0.84)),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, 0.08) 12px 13px);
  box-shadow:
    0 22px 50px rgba(56, 189, 248, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body .login-production-line .login-press-hammer {
  position: absolute;
  left: 50%;
  top: 88px;
  width: 58px;
  height: 36px;
  border: 1px solid rgba(226, 232, 240, 0.42);
  border-radius: 10px;
  background: linear-gradient(180deg, #dbeafe, #64748b 56%, #1e293b);
  box-shadow:
    0 12px 28px rgba(56, 189, 248, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  transform: translateX(-50%);
  animation: loginPressStamp 1.45s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

body .login-production-line .login-press-die {
  position: absolute;
  left: 29px;
  right: 29px;
  bottom: 22px;
  height: 17px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.48), rgba(56, 189, 248, 0.4));
  box-shadow: 0 0 26px rgba(245, 158, 11, 0.2);
}

body .login-production-line .login-spark {
  position: absolute;
  left: 50%;
  top: 158px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #fbbf24;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.82);
  opacity: 0;
  animation: loginSparkBurst 1.45s ease-out infinite;
}

body .login-production-line .login-spark-a {
  --spark-x: -50px;
  --spark-y: 20px;
}

body .login-production-line .login-spark-b {
  --spark-x: 40px;
  --spark-y: 18px;
  animation-delay: 0.05s;
}

body .login-production-line .login-spark-c {
  --spark-x: 4px;
  --spark-y: 36px;
  animation-delay: 0.1s;
}

body .login-inspection-gate {
  position: absolute;
  right: 20%;
  top: 40%;
  width: 76px;
  height: 145px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.12), transparent),
    rgba(8, 20, 34, 0.3);
  box-shadow:
    0 0 44px rgba(34, 211, 238, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body .login-inspection-gate::before {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 18px;
  height: 4px;
  border-radius: 999px;
  background: var(--login-forge-green);
  box-shadow: 0 0 22px rgba(52, 211, 153, 0.62);
  content: "";
  animation: loginSteelPulse 2.5s ease-in-out infinite;
}

body .login-inspection-gate span {
  position: absolute;
  left: 16px;
  right: 16px;
  height: 1px;
  background: rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
  animation: loginScanSweep 2.4s ease-in-out infinite;
}

body .login-inspection-gate span:first-child {
  top: 54px;
}

body .login-inspection-gate span:last-child {
  top: 86px;
  animation-delay: -1.1s;
}

body .login-production-line .login-stamped-stack {
  position: absolute;
  right: 2%;
  top: 50%;
  width: 116px;
  height: 108px;
}

body .login-production-line .login-stamped-stack span {
  position: absolute;
  right: calc(var(--part, 0) * 12px);
  bottom: calc(var(--part, 0) * 10px);
  width: 72px;
  height: 42px;
  border: 1px solid rgba(56, 189, 248, 0.32);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 9px, rgba(226, 232, 240, 0.55) 10px 11px, transparent 12px),
    linear-gradient(135deg, rgba(226, 232, 240, 0.74), rgba(71, 85, 105, 0.26));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
  animation: loginPartGlow 2.6s ease-in-out infinite;
}

body .login-production-line .login-stamped-stack span:nth-child(1) {
  --part: 0;
}

body .login-production-line .login-stamped-stack span:nth-child(2) {
  --part: 1;
  animation-delay: 0.18s;
}

body .login-production-line .login-stamped-stack span:nth-child(3) {
  --part: 2;
  animation-delay: 0.36s;
}

body .login-part-runner {
  position: absolute;
  left: 50%;
  right: 5%;
  top: calc(61% - 19px);
  height: 42px;
  overflow: hidden;
  pointer-events: none;
}

body .login-part-runner span {
  position: absolute;
  left: 0;
  top: 4px;
  width: 54px;
  height: 30px;
  border: 1px solid rgba(125, 211, 252, 0.38);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 7px, rgba(226, 232, 240, 0.62) 8px 9px, transparent 10px),
    linear-gradient(135deg, rgba(226, 232, 240, 0.72), rgba(71, 85, 105, 0.22));
  box-shadow:
    0 0 24px rgba(56, 189, 248, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  opacity: 0;
  animation: loginPartRun 3.2s linear infinite;
}

body .login-part-runner span:nth-child(2) {
  animation-delay: 1.06s;
}

body .login-part-runner span:nth-child(3) {
  animation-delay: 2.12s;
}

body .login-console-link {
  position: absolute;
  right: -38px;
  top: 60%;
  width: min(240px, 30%);
  height: 32px;
  border-top: 1px solid rgba(56, 189, 248, 0.35);
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.02), rgba(56, 189, 248, 0.2), rgba(52, 211, 153, 0.08)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, 0.26) 18px 22px);
  box-shadow:
    0 0 30px rgba(56, 189, 248, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: loginSteelPulse 3.2s ease-in-out infinite;
}

body .login-console-link::after {
  position: absolute;
  right: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--login-forge-blue);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.72);
  content: "";
  transform: translateY(-50%);
}

body .login-console-dock {
  position: relative;
  align-self: center;
  display: grid;
  align-items: center;
  min-height: 560px;
  padding: 56px 0 58px 48px;
  overflow: visible;
}

body .login-console-dock::before {
  position: absolute;
  left: -28%;
  right: -4%;
  top: 14%;
  bottom: 10%;
  border: 1px solid rgba(56, 189, 248, 0.12);
  border-left-color: rgba(56, 189, 248, 0.32);
  border-radius: 28px 36px 36px 28px;
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.06), rgba(7, 18, 31, 0.35) 26%, rgba(7, 18, 31, 0.1)),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.05) 0 1px, transparent 1px 38px);
  box-shadow:
    inset 12px 0 28px rgba(56, 189, 248, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  content: "";
  pointer-events: none;
}

body .login-console-dock::after {
  position: absolute;
  left: -32%;
  right: -10%;
  top: 51%;
  height: 68px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.16) 42%, rgba(52, 211, 153, 0.12), transparent),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.16) 22px 27px);
  box-shadow: 0 0 46px rgba(56, 189, 248, 0.12);
  content: "";
  opacity: 0.78;
  transform: translateY(-50%);
  animation: loginDockSignal 3.6s ease-in-out infinite;
  pointer-events: none;
}

body .login-dock-rail {
  position: absolute;
  left: -28%;
  right: 8%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.46), rgba(52, 211, 153, 0.18), transparent);
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.28);
  opacity: 0.64;
  pointer-events: none;
}

body .login-dock-rail-a {
  top: 31%;
}

body .login-dock-rail-b {
  bottom: 25%;
  animation: loginDockSignal 4.4s ease-in-out infinite reverse;
}

body .login-dock-floor {
  position: absolute;
  left: -18%;
  right: 3%;
  bottom: 40px;
  height: 98px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 50% 50% 24px 24px / 38% 38% 22px 22px;
  background:
    linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.08), rgba(52, 211, 153, 0.04), transparent),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.12) 0 1px, transparent 1px 38px);
  box-shadow: 0 28px 70px rgba(2, 6, 23, 0.2);
  transform: perspective(520px) rotateX(62deg);
  transform-origin: center bottom;
  pointer-events: none;
}

body .login-console-frame {
  position: relative;
  z-index: 2;
  padding: 20px 20px 22px 24px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.12), transparent 22%),
    linear-gradient(145deg, rgba(10, 24, 40, 0.38), rgba(7, 18, 31, 0.2));
  box-shadow:
    -18px 0 48px rgba(56, 189, 248, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.08);
  animation: loginDockBreathe 4.8s ease-in-out infinite;
}

body .login-line-labels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  gap: 9px;
  align-items: center;
  justify-content: start;
  max-width: 100%;
}

body .login-conveyor-label {
  display: inline-grid;
  grid-template-columns: 17px max-content;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(8, 20, 34, 0.44);
  color: #dff6ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

body .login-conveyor-label .app-icon {
  width: 17px;
  height: 17px;
  color: var(--login-forge-blue);
}

body .login-conveyor-label span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

body .login-production-layout .login-control-console {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: clamp(28px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid rgba(174, 199, 224, 0.18);
  border-left-color: rgba(56, 189, 248, 0.36);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 48%, rgba(56, 189, 248, 0.2), transparent 32%),
    linear-gradient(90deg, rgba(8, 24, 38, 0.82), rgba(7, 18, 31, 0.6) 52%, rgba(6, 16, 29, 0.48)),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.035) 0 1px, transparent 1px 34px);
  box-shadow:
    -8px 0 22px rgba(56, 189, 248, 0.12),
    0 22px 64px rgba(2, 6, 23, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 18px 0 34px rgba(56, 189, 248, 0.04);
  backdrop-filter: blur(18px);
}

body .login-production-layout .login-control-console::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28%),
    radial-gradient(circle at 0% 52%, rgba(56, 189, 248, 0.18), transparent 26%);
  content: "";
  pointer-events: none;
}

body .login-production-layout .login-control-console::after {
  position: absolute;
  left: -1px;
  top: 25%;
  width: 3px;
  height: 50%;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--login-forge-blue), var(--login-forge-green), transparent);
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.5);
  content: "";
  animation: loginSteelPulse 3.2s ease-in-out infinite;
}

body .login-production-layout .login-panel-head,
body .login-production-layout .login-form,
body .login-production-layout .login-security-foot {
  position: relative;
  z-index: 1;
}

body .login-production-layout .login-panel-head {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
  text-align: left;
}

body .login-production-layout .login-panel-head h2 {
  margin: 0;
  color: #f8fbff;
  font-family: var(--ui-font-display);
  font-size: clamp(32px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

body .login-production-layout .login-panel-head p {
  margin: 0;
  color: var(--login-muted);
  font-size: 13px;
  line-height: 1.7;
}

body .login-production-layout .login-console-chip {
  justify-self: start;
  padding: 6px 10px;
  border: 1px solid rgba(56, 189, 248, 0.26);
  border-radius: 999px;
  color: #bdefff;
  background: rgba(56, 189, 248, 0.08);
  font-family: var(--ui-font-display);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
}

body .login-production-layout .login-form {
  display: grid;
  gap: 16px;
  margin: 0;
}

body .login-production-layout .login-input-shell {
  display: grid;
  gap: 8px;
}

body .login-production-layout .login-input-shell > span {
  color: #bdd3e6;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

body .login-production-layout .login-input-frame {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045)),
    rgba(7, 17, 29, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    border-color var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast),
    background var(--ui-transition-fast),
    transform var(--ui-transition-fast);
}

body .login-production-layout .login-input-frame:focus-within {
  border-color: rgba(56, 189, 248, 0.76);
  background: rgba(10, 24, 40, 0.86);
  box-shadow:
    0 0 0 4px rgba(56, 189, 248, 0.12),
    0 14px 34px rgba(2, 6, 23, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

body .login-production-layout .login-input-frame .app-icon {
  width: 21px;
  height: 21px;
  color: var(--login-forge-blue);
}

body .login-production-layout .login-input-frame input {
  width: 100%;
  min-height: 52px;
  border: 0;
  outline: 0;
  color: #f8fbff;
  background: transparent;
  font-size: 15px;
  font-weight: 800;
}

body .login-production-layout .login-input-frame input::placeholder {
  color: rgba(184, 204, 220, 0.56);
}

body .login-production-layout .login-actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

body .login-production-layout .login-submit-button.primary-button {
  position: relative;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 18px;
  background:
    linear-gradient(90deg, #1d4ed8, #0891b2 52%, #0f766e);
  box-shadow:
    0 20px 44px rgba(14, 165, 233, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  font-family: var(--ui-font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  transition:
    transform var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast),
    filter var(--ui-transition-fast);
}

body .login-production-layout .login-submit-button.primary-button::before {
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--button-light-x, 20%) 50%, rgba(255, 255, 255, 0.32), transparent 22%),
    linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.24), transparent);
  content: "";
  opacity: 0.58;
  animation: loginConveyorSignal 2.8s ease-in-out infinite;
}

body .login-production-layout .login-submit-button.primary-button:hover {
  filter: saturate(1.08);
  box-shadow:
    0 24px 52px rgba(14, 165, 233, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

body .login-production-layout .login-submit-button::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.34) 42%, transparent 68%);
  content: "";
  transform: translateX(-120%);
  animation: loginButtonGlint 3.4s ease-in-out infinite;
}

body .login-production-layout .login-submit-button span,
body .login-production-layout .login-submit-button .app-icon {
  position: relative;
  z-index: 1;
}

body .login-production-layout .login-submit-button .app-icon {
  width: 20px;
  height: 20px;
}

body .login-production-layout .login-control-console .form-message,
body .login-production-layout .login-control-console .form-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 900;
}

body .login-production-layout .login-control-console .form-message {
  border: 1px solid rgba(52, 211, 153, 0.24);
  color: #bbf7d0;
  background: rgba(22, 101, 52, 0.24);
}

body .login-production-layout .login-control-console .form-error {
  border: 1px solid rgba(248, 113, 113, 0.24);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.22);
}

body .login-production-layout .login-security-foot {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  color: #8ca7bd;
  font-size: 12px;
  line-height: 1.5;
}

body .login-production-layout .login-security-foot span {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(52, 211, 153, 0.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(52, 211, 153, 0.9) 0 3px, transparent 4px),
    rgba(52, 211, 153, 0.1);
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.22);
}

body .login-production-layout .login-security-foot p {
  margin: 0;
}

@keyframes loginSteelPulse {
  0%,
  100% {
    opacity: 0.34;
    filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0));
  }
  50% {
    opacity: 0.92;
    filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.4));
  }
}

@keyframes loginForgeBeam {
  0%,
  100% {
    opacity: 0;
    transform: translateX(-34px) skewX(-13deg) scaleY(0.72);
  }
  42%,
  58% {
    opacity: 0.85;
    transform: translateX(18px) skewX(-13deg) scaleY(1);
  }
}

@keyframes loginPartRun {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.88);
  }
  12%,
  68% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translateX(210px) scale(1.04);
  }
}

@keyframes loginHeatRise {
  0%,
  100% {
    opacity: 0.16;
    transform: translateY(16%) scaleX(0.82);
  }
  50% {
    opacity: 0.38;
    transform: translateY(-9%) scaleX(1.08);
  }
}

@keyframes loginConveyorRoll {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 54px 0, 0 0;
  }
}

@keyframes loginConveyorSignal {
  0% {
    opacity: 0;
    transform: translateX(-42%);
  }
  38%,
  58% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: translateX(44%);
  }
}

@keyframes loginPressAura {
  0%,
  46%,
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.68);
  }
  58% {
    opacity: 0.9;
    transform: translateX(-50%) scale(1.15);
  }
}

@keyframes loginDockSignal {
  0%,
  100% {
    opacity: 0.26;
    background-position: -140px 0, 0 0;
    filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0));
  }
  48%,
  58% {
    opacity: 0.86;
    background-position: 140px 0, 56px 0;
    filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.34));
  }
}

@keyframes loginDockBreathe {
  0%,
  100% {
    border-left-color: rgba(56, 189, 248, 0.38);
    box-shadow:
      -18px 0 48px rgba(56, 189, 248, 0.08),
      inset 1px 0 0 rgba(255, 255, 255, 0.08);
  }
  50% {
    border-left-color: rgba(52, 211, 153, 0.52);
    box-shadow:
      -24px 0 62px rgba(56, 189, 248, 0.14),
      inset 1px 0 0 rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 1080px) {
  body .login-production-cockpit {
    grid-template-columns: minmax(460px, 1fr) minmax(390px, 450px);
    gap: 18px;
  }

  body .login-line-area {
    min-height: 560px;
  }

  body .login-production-line {
    height: 430px;
  }

  body .login-line-labels {
    grid-template-columns: repeat(2, minmax(0, max-content));
  }
}

@media (max-width: 900px) {
  body .login-industrial-stage.login-production-layout {
    align-items: start;
    min-height: 100vh;
    padding: 14px;
    overflow-y: auto;
  }

  body .login-production-cockpit {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    width: min(560px, 100%);
    min-height: auto;
  }

  body .login-line-area {
    order: 1;
    grid-template-rows: auto auto auto;
    min-height: auto;
    padding: 0;
  }

  body .login-production-layout .login-control-console {
    padding: 24px;
  }

  body .login-console-dock {
    order: 2;
    min-height: auto;
    padding: 12px 0 0;
  }

  body .login-console-dock::before,
  body .login-console-dock::after,
  body .login-dock-rail,
  body .login-dock-floor {
    display: none;
  }

  body .login-console-frame {
    padding: 12px;
    border-radius: 28px;
  }

  body .login-line-status {
    display: none;
  }

  body .login-production-line {
    height: 260px;
    margin: 18px 0 12px;
    overflow: hidden;
  }

  body .login-production-line .login-coil {
    left: 2%;
    top: 46%;
    width: 78px;
    height: 78px;
  }

  body .login-production-line .login-coil span {
    inset: calc(var(--coil-ring, 0) * 10px);
  }

  body .login-line-machine {
    left: 46%;
    top: 18%;
    width: 134px;
    height: 168px;
  }

  body .login-line-machine::before {
    height: 146px;
    border-radius: 24px;
  }

  body .login-production-line .login-press-machine {
    top: 14px;
    width: 108px;
    height: 136px;
  }

  body .login-production-line .login-press-arm {
    left: 14px;
    right: 14px;
    height: 72px;
    border-radius: 18px 18px 11px 11px;
  }

  body .login-production-line .login-press-hammer {
    top: 54px;
    width: 36px;
    height: 24px;
  }

  body .login-production-line .login-press-die {
    left: 18px;
    right: 18px;
    bottom: 14px;
    height: 12px;
  }

  body .login-production-line .login-spark {
    top: 104px;
  }

  body .login-production-line .login-press-aura {
    top: 74px;
    width: 78px;
    height: 38px;
  }

  body .login-inspection-gate {
    right: 20%;
    top: 39%;
    width: 48px;
    height: 92px;
    border-radius: 15px;
  }

  body .login-production-line .login-stamped-stack {
    right: 1%;
    top: 49%;
    transform: scale(0.72);
    transform-origin: right center;
  }

  body .login-console-link {
    display: none;
  }

  body .login-forge-beam {
    height: 54%;
  }

  body .login-part-runner {
    left: 48%;
    right: 0;
  }

  body .login-line-labels {
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 7px;
  }

  body .login-conveyor-label {
    min-height: 30px;
    padding: 6px 9px;
  }
}

@media (max-width: 560px) {
  body .login-industrial-stage.login-production-layout {
    padding: 10px;
  }

  body .login-line-brand {
    grid-template-columns: 42px minmax(0, max-content);
    border-radius: 17px;
  }

  body .login-line-brand .login-logo,
  body .login-production-layout .login-logo {
    width: 42px;
    height: 42px;
  }

  body .login-line-brand span {
    font-size: 16px;
  }

  body .login-production-layout .login-panel-head h2 {
    font-size: 28px;
    white-space: normal;
  }

  body .login-production-line {
    height: 220px;
  }

  body .login-line-status {
    grid-template-columns: 10px minmax(0, 1fr);
    border-radius: 18px;
  }

  body .login-line-labels {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body .login-conveyor-label {
    grid-template-columns: 16px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  body .login-production-layout::before,
  body .login-production-layout .login-depth-grid,
  body .login-production-layout .login-scan-plane,
  body .login-production-layout .login-data-thread,
  body .login-production-layout .login-live-dot,
  body .login-production-layout .login-coil,
  body .login-production-layout .login-metal-strip,
  body .login-production-layout .login-press-hammer,
  body .login-production-layout .login-spark,
  body .login-production-layout .login-stamped-stack span,
  body .login-production-layout .login-console-link,
  body .login-production-layout .login-dock-rail,
  body .login-production-layout .login-console-frame,
  body .login-production-layout .login-forge-beam,
  body .login-production-layout .login-press-aura,
  body .login-production-layout .login-part-runner span,
  body .login-production-layout .login-heat-column,
  body .login-production-layout .login-submit-button::after {
    animation: none !important;
  }
}

/* Industrial archive document forms */
.document-paper-shell {
  --document-paper: #fff6df;
  --document-paper-deep: #f5e8c7;
  --document-paper-edge: #c8ad73;
  --document-paper-ink: #17120a;
  --document-paper-muted: #6a5631;
  --document-paper-grid: rgba(20, 14, 6, 0.88);
  --document-paper-red: #b42318;
  --document-paper-green: #1f7a4a;
  --document-paper-stamp: var(--document-paper-red);
  position: relative;
  isolation: isolate;
  max-width: 1040px;
  margin: 0 auto;
  padding: 26px 22px 32px;
  color: var(--document-paper-ink);
  font-family: "Songti SC", "SimSun", var(--ui-font-body);
}

.document-paper-tone-green {
  --document-paper-stamp: var(--document-paper-green);
}

.document-paper-tone-red {
  --document-paper-stamp: var(--document-paper-red);
}

.document-paper-stack,
.document-paper-sheet {
  border: 2px solid var(--document-paper-grid);
  background:
    linear-gradient(90deg, rgba(78, 55, 20, 0.06) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(0deg, rgba(78, 55, 20, 0.045) 1px, transparent 1px) 0 0 / 42px 42px,
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.82), transparent 30%),
    linear-gradient(135deg, var(--document-paper) 0%, #fffaf0 48%, var(--document-paper-deep) 100%);
  box-shadow:
    0 22px 52px rgba(52, 39, 15, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.document-paper-stack {
  position: absolute;
  inset: 28px 20px 30px;
  z-index: -2;
  pointer-events: none;
}

.document-paper-stack-back {
  transform: rotate(-2deg) translate(-8px, 9px);
  opacity: 0.62;
}

.document-paper-stack-mid {
  transform: rotate(1.35deg) translate(7px, 3px);
  opacity: 0.78;
}

.document-paper-sheet {
  position: relative;
  min-height: 640px;
  padding: clamp(24px, 4vw, 44px);
  overflow: hidden;
}

.document-paper-sheet::before {
  position: absolute;
  inset: 9px;
  content: "";
  border: 1px solid rgba(20, 14, 6, 0.5);
  pointer-events: none;
}

.document-paper-sheet::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 22% 20%, rgba(106, 86, 49, 0.08) 0 1px, transparent 1.6px),
    radial-gradient(circle at 74% 66%, rgba(106, 86, 49, 0.06) 0 1px, transparent 1.8px);
  background-size: 18px 18px, 23px 23px;
  mix-blend-mode: multiply;
  opacity: 0.52;
  pointer-events: none;
}

.document-paper-clip {
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: 3;
  width: 110px;
  height: 44px;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 12px rgba(37, 29, 15, 0.24));
}

.document-paper-clip-bar,
.document-paper-clip-jaw {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid rgba(39, 43, 43, 0.92);
  background: linear-gradient(180deg, #e7ece9, #8e9894 54%, #f7fbf7);
}

.document-paper-clip-bar {
  top: 0;
  width: 92px;
  height: 17px;
  border-radius: 0 0 12px 12px;
}

.document-paper-clip-jaw {
  top: 12px;
  width: 66px;
  height: 26px;
  border-top: 0;
  border-radius: 0 0 18px 18px;
}

.document-paper-binder {
  position: absolute;
  left: 15px;
  top: 88px;
  bottom: 88px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.document-paper-binder-hole {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(31, 24, 12, 0.82);
  border-radius: 999px;
  background:
    radial-gradient(circle at 48% 45%, rgba(77, 57, 24, 0.42), transparent 45%),
    #efe0b9;
  box-shadow:
    inset 0 2px 4px rgba(57, 42, 16, 0.34),
    0 0 0 4px rgba(255, 246, 223, 0.72);
}

.document-retained-mark {
  position: absolute;
  right: 17px;
  top: 118px;
  z-index: 2;
  writing-mode: vertical-rl;
  letter-spacing: 0.22em;
  color: rgba(23, 18, 10, 0.58);
  font-family: var(--ui-font-display);
  font-size: 13px;
  font-weight: 800;
}

.document-paper-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 18px;
  min-height: 122px;
  padding: 18px 22px 22px;
  border: 2px solid var(--document-paper-grid);
  border-bottom-width: 3px;
}

.document-company-name {
  margin: 0;
  align-self: start;
  color: var(--document-paper-muted);
  font-family: var(--ui-font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-paper-title {
  margin: 0;
  text-align: center;
  color: var(--document-paper-ink);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1;
}

.document-number-stamp {
  justify-self: end;
  min-width: 150px;
  padding: 9px 12px;
  color: var(--document-paper-stamp);
  text-align: center;
  border: 2px solid currentColor;
  transform: rotate(-2.2deg);
  font-family: var(--ui-font-display);
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 223, 0.72);
}

.document-number-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
}

.document-number-stamp strong {
  display: block;
  margin-top: 2px;
  font-size: 16px;
}

.document-paper-body {
  position: relative;
  z-index: 1;
  padding-top: 18px;
}

.document-grid {
  display: grid;
  grid-template-columns: repeat(var(--document-grid-columns, 4), minmax(0, 1fr));
  margin: 0;
  border-top: 2px solid var(--document-paper-grid);
  border-left: 2px solid var(--document-paper-grid);
}

.document-grid-cell {
  min-width: 0;
  border-right: 2px solid var(--document-paper-grid);
  border-bottom: 2px solid var(--document-paper-grid);
  background: rgba(255, 250, 240, 0.5);
}

.document-grid-label,
.document-grid-value {
  margin: 0;
}

.document-grid-label {
  min-height: 30px;
  padding: 7px 9px;
  color: rgba(23, 18, 10, 0.74);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(227, 207, 161, 0.62);
  border-bottom: 1px solid rgba(20, 14, 6, 0.56);
}

.document-grid-value {
  min-height: 42px;
  padding: 10px 9px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  word-break: break-word;
}

.document-line-table {
  margin-top: 18px;
  border: 2px solid var(--document-paper-grid);
  background: rgba(255, 250, 240, 0.38);
}

.document-line-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 8px 12px;
  border-bottom: 2px solid var(--document-paper-grid);
  background:
    linear-gradient(90deg, rgba(23, 18, 10, 0.1), transparent 40%),
    rgba(227, 207, 161, 0.72);
}

.document-line-table-title {
  margin: 0;
  font-family: var(--ui-font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.document-line-table-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.document-line-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.document-line-table table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.document-line-table th,
.document-line-table td {
  min-height: 38px;
  padding: 9px 10px;
  color: var(--document-paper-ink);
  text-align: left;
  vertical-align: top;
  border-right: 1.5px solid var(--document-paper-grid);
  border-bottom: 1.5px solid var(--document-paper-grid);
}

.document-line-table th:last-child,
.document-line-table td:last-child {
  border-right: 0;
}

.document-line-table tbody tr:last-child td {
  border-bottom: 0;
}

.document-line-table th {
  font-weight: 900;
  background: rgba(227, 207, 161, 0.5);
}

.document-signature-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 0;
  margin-top: 24px;
  border-top: 2px solid var(--document-paper-grid);
  border-left: 2px solid var(--document-paper-grid);
}

.document-signature-cell {
  min-height: 74px;
  padding: 12px;
  border-right: 2px solid var(--document-paper-grid);
  border-bottom: 2px solid var(--document-paper-grid);
}

.document-signature-label {
  display: block;
  color: rgba(23, 18, 10, 0.74);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.document-signature-line {
  display: block;
  margin-top: 24px;
  border-bottom: 1px solid rgba(23, 18, 10, 0.62);
}

.document-archive-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(20, 14, 6, 0.2);
  border-radius: 14px;
  background: rgba(255, 250, 240, 0.82);
}

.document-archive-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  color: var(--document-paper-muted, #6a5631);
  border: 1px solid rgba(106, 86, 49, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 900;
}

.document-archive-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(106, 86, 49, 0.12);
}

.document-archive-actions-archived .document-archive-status {
  color: var(--document-paper-green, #1f7a4a);
  border-color: rgba(31, 122, 74, 0.3);
}

.document-archive-actions-failed .document-archive-status {
  color: var(--document-paper-red, #b42318);
  border-color: rgba(180, 35, 24, 0.34);
}

.document-archive-actions-pending .document-archive-status {
  color: #906312;
  border-color: rgba(144, 99, 18, 0.3);
}

.document-archive-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.document-archive-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 31px;
  padding: 0 10px;
  color: var(--document-paper-ink, #17120a);
  border: 1.5px solid rgba(23, 18, 10, 0.82);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 52%),
    rgba(255, 246, 223, 0.9);
  box-shadow:
    0 2px 0 rgba(23, 18, 10, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.54);
  cursor: pointer;
  font-family: var(--ui-font-display);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: none;
  transition:
    transform var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast),
    background var(--ui-transition-fast),
    color var(--ui-transition-fast);
  white-space: nowrap;
}

.document-archive-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 4px 0 rgba(23, 18, 10, 0.18),
    0 10px 18px rgba(52, 39, 15, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.document-archive-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(23, 18, 10, 0.22),
    inset 0 2px 5px rgba(52, 39, 15, 0.14);
}

.document-archive-button:disabled {
  color: rgba(106, 86, 49, 0.48);
  border-color: rgba(106, 86, 49, 0.34);
  background:
    repeating-linear-gradient(-45deg, rgba(106, 86, 49, 0.06) 0 4px, transparent 4px 8px),
    rgba(239, 224, 185, 0.56);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  cursor: not-allowed;
  transform: none;
}

.document-archive-button-preview,
.document-archive-button-download {
  color: var(--document-paper-green, #1f7a4a);
  border-color: rgba(31, 122, 74, 0.68);
}

.document-archive-button-preview:not(:disabled),
.document-archive-button-download:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 52%),
    rgba(232, 246, 232, 0.74);
}

.document-archive-button-regenerate {
  color: var(--document-paper-red, #b42318);
  border-color: rgba(180, 35, 24, 0.74);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 52%),
    rgba(255, 238, 224, 0.78);
}

.document-archive-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  font-family: var(--ui-font-display);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  border: 1px solid currentColor;
  border-radius: 4px;
}

@media (max-width: 780px) {
  .document-paper-shell {
    padding: 14px 8px 20px;
  }

  .document-paper-stack {
    inset: 18px 8px 18px;
  }

  .document-paper-sheet {
    min-height: 560px;
    padding: 22px 16px 24px 28px;
  }

  .document-paper-header {
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    gap: 12px;
    padding: 18px 16px;
    text-align: center;
  }

  .document-company-name,
  .document-number-stamp {
    justify-self: center;
  }

  .document-retained-mark {
    right: 8px;
    top: 98px;
    font-size: 11px;
  }

  .document-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-line-table-toolbar,
  .document-archive-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .document-line-table-actions,
  .document-archive-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .document-paper-sheet {
    padding-right: 12px;
    padding-left: 24px;
  }

  .document-paper-title {
    letter-spacing: 0.1em;
  }

  .document-grid {
    grid-template-columns: 1fr;
  }

  .document-archive-buttons {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .document-archive-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .document-archive-button {
    transition: none;
  }
}

/* Warehouse paper-form sample */
.warehouse-document-operation-form {
  display: grid;
  gap: 14px;
  padding-bottom: 86px;
}

.warehouse-document-operation-form .document-paper-shell {
  max-width: 1080px;
  padding: 18px 12px 26px;
}

.warehouse-document-operation-form .document-paper-sheet {
  min-height: 0;
  padding-bottom: 34px;
}

.warehouse-document-operation-form .document-paper-title {
  font-size: clamp(34px, 4.2vw, 48px);
}

.warehouse-document-operation-form .document-number-stamp {
  min-width: 196px;
}

.warehouse-document-meta-strip {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 9px 12px;
  color: rgba(23, 18, 10, 0.72);
  border: 2px solid rgba(20, 14, 6, 0.82);
  background:
    linear-gradient(90deg, rgba(31, 122, 74, 0.12), transparent 42%),
    rgba(255, 250, 240, 0.54);
  font-family: "Songti SC", "SimSun", var(--ui-font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.warehouse-document-meta-strip strong {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  color: #145c39;
  border: 1.5px solid rgba(31, 122, 74, 0.64);
  background: rgba(232, 246, 232, 0.62);
}

.warehouse-paper-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid rgba(20, 14, 6, 0.88);
  border-left: 2px solid rgba(20, 14, 6, 0.88);
  background: rgba(255, 250, 240, 0.34);
}

.warehouse-paper-field {
  display: grid;
  grid-template-rows: auto minmax(48px, auto);
  min-width: 0;
  margin: 0;
  border-right: 2px solid rgba(20, 14, 6, 0.88);
  border-bottom: 2px solid rgba(20, 14, 6, 0.88);
  background: rgba(255, 250, 240, 0.44);
}

.warehouse-paper-field-wide {
  grid-column: span 2;
}

.warehouse-paper-field-full {
  grid-column: 1 / -1;
}

.warehouse-paper-field > span {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  color: rgba(23, 18, 10, 0.78);
  border-bottom: 1px solid rgba(20, 14, 6, 0.56);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent),
    rgba(227, 207, 161, 0.62);
  font-family: var(--ui-font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.warehouse-paper-field input,
.warehouse-paper-field select,
.warehouse-paper-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 11px;
  color: #17120a;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Songti SC", "SimSun", var(--ui-font-body);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.warehouse-paper-field select {
  cursor: pointer;
}

.warehouse-paper-field textarea {
  min-height: 104px;
  resize: vertical;
}

.warehouse-paper-field input:focus,
.warehouse-paper-field select:focus,
.warehouse-paper-field textarea:focus {
  background:
    linear-gradient(90deg, rgba(31, 122, 74, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 0 0 2px rgba(31, 122, 74, 0.42);
}

.warehouse-paper-field input[readonly] {
  color: #145c39;
  background:
    repeating-linear-gradient(-45deg, rgba(31, 122, 74, 0.06) 0 5px, transparent 5px 10px),
    rgba(232, 246, 232, 0.32);
}

.warehouse-paper-readonly-value {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 10px 11px;
  color: #145c39;
  background:
    repeating-linear-gradient(-45deg, rgba(31, 122, 74, 0.06) 0 5px, transparent 5px 10px),
    rgba(232, 246, 232, 0.32);
  font-family: "Songti SC", "SimSun", var(--ui-font-body);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.warehouse-paper-field input::placeholder,
.warehouse-paper-field textarea::placeholder {
  color: rgba(106, 86, 49, 0.58);
}

.warehouse-paper-upload-field {
  grid-template-rows: auto minmax(48px, auto);
}

.warehouse-paper-upload {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 12px;
  overflow: hidden;
  color: #145c39;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 60%),
    rgba(232, 246, 232, 0.36);
  cursor: pointer;
  font-family: var(--ui-font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  transition:
    background var(--ui-transition-fast),
    box-shadow var(--ui-transition-fast),
    color var(--ui-transition-fast);
}

.warehouse-paper-upload:hover:not(.is-busy) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 60%),
    rgba(219, 246, 231, 0.68);
  box-shadow: inset 0 0 0 2px rgba(31, 122, 74, 0.28);
}

.warehouse-paper-upload.is-uploaded {
  color: #0f6b3d;
  background: rgba(220, 252, 231, 0.62);
}

.warehouse-paper-upload.is-busy {
  cursor: wait;
  opacity: 0.72;
}

.warehouse-paper-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: inherit;
}

.warehouse-paper-upload b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: currentColor;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
}

.warehouse-paper-upload strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-document-action-anchor {
  display: none;
}

.document-paper-action-host {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.warehouse-document-action-bar {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: fit-content;
  max-width: 1080px;
  margin: 0 0 0 auto;
  padding: 10px;
  border: 1px solid rgba(31, 122, 74, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(232, 246, 232, 0.92), rgba(255, 250, 240, 0.96)),
    rgba(255, 255, 255, 0.92);
  box-shadow:
    0 -12px 28px rgba(5, 11, 18, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(14px);
}

.warehouse-document-action-bar .primary-button {
  flex: 0 0 auto;
}

@media (max-width: 960px) {
  .warehouse-paper-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warehouse-document-meta-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .warehouse-document-operation-form .document-paper-shell {
    padding-inline: 0;
  }

  .warehouse-paper-grid {
    grid-template-columns: 1fr;
  }

  .warehouse-paper-field,
  .warehouse-paper-field-wide,
  .warehouse-paper-field-full {
    grid-column: 1 / -1;
  }

  .warehouse-document-action-bar {
    align-items: stretch;
    width: 100%;
  }

  .warehouse-document-action-bar .primary-button {
    width: 100%;
  }
}

/* Shared warehouse paper-form components */
.warehouse-document-form {
  display: block;
  color: var(--document-paper-ink, #17120a);
  font-family: "Songti SC", "SimSun", var(--ui-font-body);
}

.warehouse-document-form .document-paper-shell {
  max-width: 1080px;
  padding: 18px 12px 26px;
}

.warehouse-document-form .document-paper-sheet {
  min-height: 0;
  padding-bottom: 34px;
}

.warehouse-document-form .document-paper-title {
  font-size: clamp(34px, 4.2vw, 48px);
}

.warehouse-document-form .document-number-stamp {
  min-width: 196px;
}

.warehouse-document-form-meta {
  display: grid;
  grid-template-columns: auto minmax(120px, max-content) auto minmax(120px, 1fr);
  gap: 0;
  margin-bottom: 16px;
  border-top: 2px solid var(--document-paper-grid, rgba(20, 14, 6, 0.88));
  border-left: 2px solid var(--document-paper-grid, rgba(20, 14, 6, 0.88));
  background: rgba(255, 250, 240, 0.42);
}

.warehouse-document-form-meta span,
.warehouse-document-form-meta strong {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 0;
  padding: 8px 11px;
  border-right: 2px solid var(--document-paper-grid, rgba(20, 14, 6, 0.88));
  border-bottom: 2px solid var(--document-paper-grid, rgba(20, 14, 6, 0.88));
  line-height: 1.4;
}

.warehouse-document-form-meta span {
  color: rgba(23, 18, 10, 0.76);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent),
    rgba(227, 207, 161, 0.62);
  font-family: var(--ui-font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.warehouse-document-form-meta strong {
  color: var(--document-paper-stamp, #1f7a4a);
  background:
    repeating-linear-gradient(-45deg, rgba(31, 122, 74, 0.045) 0 5px, transparent 5px 10px),
    rgba(255, 250, 240, 0.48);
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.warehouse-document-body {
  display: grid;
  gap: 18px;
}

.warehouse-document-section {
  position: relative;
  border: 2px solid var(--document-paper-grid, rgba(20, 14, 6, 0.88));
  background:
    linear-gradient(90deg, rgba(78, 55, 20, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, rgba(78, 55, 20, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    rgba(255, 250, 240, 0.5);
}

.warehouse-document-section::before {
  position: absolute;
  inset: 5px;
  content: "";
  border: 1px solid rgba(20, 14, 6, 0.22);
  pointer-events: none;
}

.warehouse-document-section-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 12px;
  border-bottom: 2px solid var(--document-paper-grid, rgba(20, 14, 6, 0.88));
  background:
    linear-gradient(90deg, rgba(31, 122, 74, 0.12), transparent 44%),
    rgba(227, 207, 161, 0.72);
  color: var(--document-paper-ink, #17120a);
  font-family: var(--ui-font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.warehouse-document-section-index {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  color: var(--document-paper-stamp, #1f7a4a);
  border: 1.5px solid currentColor;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 58%),
    rgba(232, 246, 232, 0.58);
  font-size: 12px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 246, 223, 0.7);
}

.warehouse-document-section-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 0;
  padding: 14px;
}

.warehouse-document-section-grid > .stack-form,
.warehouse-document-section-grid > .double-field,
.warehouse-document-section-grid > .triple-field,
.warehouse-document-section-grid > .table-wrap,
.warehouse-document-section-grid > .feedback-banner,
.warehouse-document-section-grid > .workflow-tip,
.warehouse-document-section-grid > .inventory-live-summary,
.warehouse-document-section-grid > .work-order-settle-panel,
.warehouse-document-section-grid > .subsection-head,
.warehouse-document-section-grid > .form-field,
.warehouse-document-section-grid > label {
  grid-column: 1 / -1;
}

.warehouse-document-action-bar--shared {
  justify-content: flex-end;
  gap: 14px;
}

.warehouse-document-action-bar--shared.warehouse-document-action-bar--with-state {
  justify-content: space-between;
  width: min(100%, 1080px);
}

.warehouse-document-action-state {
  min-width: 0;
  color: var(--document-paper-muted, #6a5631);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
}

.warehouse-document-action-buttons {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 960px) {
  .warehouse-document-form-meta,
  .warehouse-document-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .warehouse-document-form .document-paper-shell {
    padding-inline: 0;
  }

  .warehouse-document-form .document-number-stamp {
    min-width: min(196px, 100%);
  }

  .warehouse-document-form-meta,
  .warehouse-document-section-grid {
    grid-template-columns: 1fr;
  }

  .warehouse-document-action-bar--shared,
  .warehouse-document-action-bar--shared.warehouse-document-action-bar--with-state {
    align-items: stretch;
    width: 100%;
  }

  .warehouse-document-action-state,
  .warehouse-document-action-buttons {
    width: 100%;
  }

  .warehouse-document-action-buttons {
    display: grid;
    grid-template-columns: 1fr;
  }

  .warehouse-document-action-buttons > * {
    width: 100%;
  }
}

/* Final warehouse ledger drawer UI override: keep this after global table and paper-document styles. */
body .workflow-drawer.form-drawer:has(.warehouse-ledger-drawer) {
  overflow-x: hidden !important;
}

body .workflow-drawer.form-drawer:has(.warehouse-ledger-drawer) .form-drawer-body {
  min-width: 0 !important;
}

body .warehouse-ledger-drawer {
  gap: 14px !important;
}

body .warehouse-ledger-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body .warehouse-ledger-summary-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 12px 13px !important;
}

body .warehouse-ledger-summary-card span,
body .warehouse-ledger-summary-card strong {
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

body .warehouse-ledger-summary-card span {
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

body .warehouse-ledger-summary-card strong {
  flex: 1 1 auto !important;
  margin: 0 !important;
  text-align: right !important;
  line-height: 1.2 !important;
}

body .warehouse-ledger-filters {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(37, 99, 235, 0.14) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 0 0, rgba(14, 165, 233, 0.08), transparent 38%),
    linear-gradient(135deg, rgba(248, 251, 255, 0.98), rgba(241, 247, 255, 0.92)) !important;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

body .warehouse-ledger-filter-fields {
  display: grid !important;
  grid-template-columns: minmax(240px, 1.45fr) minmax(112px, 0.55fr) minmax(190px, 1fr) repeat(2, minmax(132px, 0.68fr)) !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body .warehouse-ledger-filter-fields .form-field {
  min-width: 0 !important;
}

body .warehouse-ledger-filter-fields input,
body .warehouse-ledger-filter-fields select {
  min-width: 0 !important;
}

body .warehouse-ledger-filter-actions {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: end !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: max-content !important;
}

body .warehouse-ledger-filter-actions > button {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 72px !important;
  max-width: none !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
  white-space: nowrap !important;
}

body .warehouse-ledger-filter-actions .warehouse-ledger-export-button {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  min-width: 126px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 11px !important;
  color: #1f5f45 !important;
  border: 1px solid rgba(100, 116, 139, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 251, 0.94)) !important;
  box-shadow:
    0 8px 16px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  font-family: var(--ui-font-body) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

body .warehouse-ledger-filter-actions .warehouse-ledger-export-button::before {
  content: "⇩" !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: 1px solid rgba(22, 101, 52, 0.2) !important;
  border-radius: 6px !important;
  color: #166534 !important;
  background: rgba(240, 253, 244, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

body .warehouse-ledger-filter-actions .warehouse-ledger-export-button:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: rgba(22, 101, 52, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(240, 253, 244, 0.84)) !important;
  box-shadow:
    0 10px 20px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

body .warehouse-ledger-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(58vh, 620px) !important;
  margin-top: 12px !important;
  overflow: auto !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

body .warehouse-ledger-table.data-table.compact-table {
  width: 100% !important;
  min-width: max(100%, 1480px) !important;
  max-width: none !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body .warehouse-ledger-table .ledger-col-time {
  width: 132px !important;
}

body .warehouse-ledger-table .ledger-col-direction {
  width: 76px !important;
}

body .warehouse-ledger-table .ledger-col-type {
  width: 104px !important;
}

body .warehouse-ledger-table .ledger-col-item {
  width: 176px !important;
}

body .warehouse-ledger-table .ledger-col-lot {
  width: 172px !important;
}

body .warehouse-ledger-table .ledger-col-qty,
body .warehouse-ledger-table .ledger-col-weight {
  width: 116px !important;
}

body .warehouse-ledger-table .ledger-col-price,
body .warehouse-ledger-table .ledger-col-amount {
  width: 92px !important;
}

body .warehouse-ledger-table .ledger-col-source {
  width: 132px !important;
}

body .warehouse-ledger-table .ledger-col-operator {
  width: 96px !important;
}

body .warehouse-ledger-table .ledger-col-logistics {
  width: 116px !important;
}

body .warehouse-ledger-table .ledger-col-remark {
  width: 162px !important;
}

body .warehouse-ledger-table .ledger-col-archive {
  width: 166px !important;
}

body .warehouse-ledger-table th,
body .warehouse-ledger-table td {
  height: 56px !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.7) !important;
  color: #26364d !important;
  line-height: 1.35 !important;
  writing-mode: horizontal-tb !important;
}

body .warehouse-ledger-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  color: #34445d !important;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.99), rgba(237, 244, 255, 0.97)) !important;
  font-family: var(--ui-font-display) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-align: left !important;
}

body .warehouse-ledger-table td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background: rgba(255, 255, 255, 0.97) !important;
}

body .warehouse-ledger-table tbody tr:hover td {
  background: rgba(239, 246, 255, 0.94) !important;
}

body .warehouse-ledger-table th:last-child,
body .warehouse-ledger-table td:last-child,
body .warehouse-ledger-table .warehouse-ledger-archive-cell {
  position: sticky !important;
  right: 0 !important;
  overflow: visible !important;
  z-index: 6 !important;
  background:
    linear-gradient(90deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98)) !important;
  box-shadow: -12px 0 24px rgba(15, 23, 42, 0.08) !important;
}

body .warehouse-ledger-table th:last-child {
  z-index: 8 !important;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 1), rgba(237, 244, 255, 0.98)) !important;
}

body .warehouse-ledger-table .link-button {
  display: inline-flex !important;
  min-height: 24px !important;
  margin-left: 6px !important;
  padding: 0 7px !important;
  border: 1px solid rgba(14, 116, 144, 0.2) !important;
  border-radius: 8px !important;
  background: rgba(240, 249, 255, 0.9) !important;
  color: #0369a1 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

body .warehouse-ledger-table .document-archive-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 138px !important;
  min-width: 138px !important;
  max-width: 138px !important;
  gap: 5px !important;
  padding: 6px !important;
  overflow: visible !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 12% 0, rgba(14, 165, 233, 0.1), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(241, 247, 255, 0.95)) !important;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

body .warehouse-ledger-table .document-archive-status {
  justify-content: center !important;
  min-height: 22px !important;
  padding: 0 7px !important;
  border: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
}

body .warehouse-ledger-table .document-archive-status-dot {
  width: 6px !important;
  height: 6px !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent) !important;
}

body .warehouse-ledger-table .document-archive-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 4px !important;
  width: 100% !important;
}

body .warehouse-ledger-table .document-archive-button {
  display: inline-grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 26px !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-width: 1px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body .warehouse-ledger-table .document-archive-button:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 7px 14px rgba(15, 23, 42, 0.1) !important;
}

body .warehouse-ledger-table .document-archive-icon {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 22px !important;
  width: 22px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

@media (max-width: 1180px) {
  body .warehouse-ledger-filter-actions {
    justify-self: start !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 820px) {
  body .warehouse-ledger-filter-fields {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 560px) {
  body .workflow-drawer.form-drawer:has(.warehouse-ledger-drawer) {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 12px !important;
  }

  body .workflow-drawer.form-drawer:has(.warehouse-ledger-drawer) .workflow-drawer-head {
    margin-bottom: 10px !important;
  }

  body .workflow-drawer.form-drawer:has(.warehouse-ledger-drawer) .form-drawer-body {
    margin-top: 10px !important;
    padding: 12px !important;
  }

  body .warehouse-ledger-summary {
    grid-template-columns: 1fr !important;
  }

  body .warehouse-ledger-summary-card {
    min-height: 54px !important;
    padding: 10px 12px !important;
  }

  body .warehouse-ledger-summary-card strong {
    font-size: 16px !important;
  }

  body .warehouse-ledger-filter-fields,
  body .warehouse-ledger-filter-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }

  body .warehouse-ledger-filter-actions > button {
    width: 100% !important;
  }
}

/* Final warehouse document action contract: submit buttons live at the paper document bottom. */
body .warehouse-document-action-bar {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  margin: 0 0 0 auto !important;
  transform: none !important;
}

@media (max-width: 620px) {
  body .warehouse-document-action-bar,
  body .warehouse-document-action-bar--shared,
  body .warehouse-document-action-bar--shared.warehouse-document-action-bar--with-state {
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
  }
}