/* ===== TWODRAPES — Consolidated Design System ===== */

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,122,255,.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(52,199,89,.03) 0%, transparent 50%);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html { background: var(--bg) }
button, input, select, textarea { font: inherit }
main { max-width: 1440px; margin: 0 auto; padding: 20px 24px 34px }
p { margin: 4px 0 0; color: var(--muted) }

/* ===== Design Tokens ===== */
:root {
  /* Background */
  --bg: #F0F0F5;
  --bg2: #E8E8ED;
  --card: #FFFFFF;
  --surface: #F2F2F7;
  --surface-alt: #ECECEC;
  --surface-highlight: #E0E0E0;
  --surface-info: #F5F5F5;
  --surface-dashed: #F5F5F5;
  /* Brand — iOS Blue */
  --brand: #007AFF;
  --brand-hover: #0066DD;
  --brand-light: #EBF4FF;
  --brand2: #0055CC;
  /* Accent — Muted Teal */
  --accent: #3A7CA5;
  --accent-hover: #2D6285;
  --accent-light: #EBF4F8;
  --accent-border: #B8D8E4;
  /* Status */
  --good: #34C759;
  --good-bg: #F0FFF4;
  --good-border: #A7F3D0;
  --warn: #FF9500;
  --warn-bg: #FFF8ED;
  --warn-border: #FDE68A;
  --bad: #FF3B30;
  --bad-bg: #FFF0F0;
  --bad-border: #FECACA;
  /* Text */
  --ink: #1C1C1E;
  --ink-secondary: #3A3A3C;
  --muted: #8E8E93;
  --text-label: #636366;
  /* Border */
  --line: #D1D1D6;
  --line-light: #E5E5EA;
  --border-hover: #C7C7CC;
  --border-checkbox: #C7C7CC;
  --border-checkbox-hover: #8E8E93;
  --border-drag: #007AFF;
  --border-danger: #FECACA;
  --border-good: #A7F3D0;
  --border-warn: #FDE68A;
  /* Shadow — iOS-style soft shadows */
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 1px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.06);
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,.04);
  --focus-ring: 0 0 0 4px rgba(0,122,255,.2);
  /* iOS Glass */
  --glass-bg: rgba(255,255,255,.65);
  --glass-bg-strong: rgba(255,255,255,.82);
  --glass-border: rgba(255,255,255,.6);
  --glass-blur: saturate(180%) blur(20px);
  --glass-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.08);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,.9);
  /* Radius — iOS-style larger radii */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;
  --soft: var(--surface);
  --r: var(--radius-lg);
  /* Animation */
  --ease: cubic-bezier(.25,.1,.25,1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 280ms;
  /* Chart colors */
  --chart-income: #2563EB;
  --chart-cost: #D97706;
  --chart-profit: #059669;
  --chart-income-light: rgba(37,99,235,.10);
  --chart-cost-light: rgba(217,119,6,.08);
  --chart-profit-light: rgba(5,150,105,.08);
  /* Metric card border colors */
  --metric-blue: #2C4A7C;
  --metric-green: #2D8659;
  --metric-amber: #B45309;
  --metric-red: #C53030;
  --metric-purple: #6B46C1;
  --metric-teal: #3A7CA5;
  /* Semantic overrides */
  --toast-bad: #991B1B;
  --toast-good: #166534;
  --toast-warn-bg: #92400E;
  --toast-warn-fg: #FEF3C7;
  --cost-production-bg: #ECFDF5;
  --cost-production-fg: #065F46;
  --cost-logistics-bg: #EFF6FF;
  --cost-logistics-fg: #1E40AF;
  --quote-good: #059669;
  --quote-bad: #DC2626;
  --notice-warn-bg: #FFFBEB;
  --notice-warn-fg: #92400E;
  --notice-warn-border: #FCD34D;
}

/* ===== Typography ===== */
h1 {
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-title h2,
.section-title h3 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* ===== Layout Grid ===== */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 20px }
.col-12 { grid-column: span 12 }
.col-8 { grid-column: span 8 }
.col-7 { grid-column: span 7 }
.col-6 { grid-column: span 6 }
.col-5 { grid-column: span 5 }
.col-4 { grid-column: span 4 }

/* ===== Pages ===== */
.page { display: none !important; visibility: hidden !important }
.page.active { display: block !important; visibility: visible !important; animation: pageIn .35s var(--ease) }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px) }
  to { opacity: 1; transform: translateY(0) }
}
.page > .grid,
#page-products > .grid,
#page-profit > .grid { gap: 16px }

/* ===== Topbar — iOS Liquid Glass ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 56px;
  height: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 18px;
  align-items: center;
  background: rgba(30,58,106,.82);
  backdrop-filter: saturate(200%) blur(28px);
  -webkit-backdrop-filter: saturate(200%) blur(28px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 1px 2px rgba(0,0,0,.08),
    0 4px 16px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.06);
  padding: 0 20px;
}
.topbar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
  border-radius: inherit;
}
.topbar h1 {
  padding-left: 12px;
  border-left: 3px solid #7EB0E0;
  color: #fff;
  font-size: 16px;
  letter-spacing: -.01em;
}
.topbar nav {
  flex: 1 1 auto;
  justify-self: center;
  max-width: 860px;
  min-width: 0;
  justify-content: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.topbar nav > button {
  color: rgba(255,255,255,.5);
  position: relative;
  transition: all .18s var(--ease);
}
.topbar nav > button:hover {
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08);
}
.topbar nav > button.active {
  background: rgba(255,255,255,.92);
  color: #1C1C1E;
  box-shadow:
    0 1px 3px rgba(0,0,0,.12),
    0 0 0 1px rgba(255,255,255,.2),
    inset 0 1px 0 rgba(255,255,255,.5);
}
/* Glow ring on active menu item */
.topbar nav > button.active::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255,255,255,.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: navGlowIn .25s var(--ease-out-quart);
}
@keyframes navGlowIn {
  from { opacity: 0; transform: scale(.8) }
  to { opacity: 1; transform: scale(1) }
}
.topbar .notify-wrap { flex: 0 0 auto; }
.topbar > div:first-child { flex: 0 0 auto; }

/* ===== Navigation Tabs — iOS Segmented Control ===== */
nav, .tab-nav {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(0,0,0,.06);
  overflow-x: auto;
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  scrollbar-width: none;
}
nav::-webkit-scrollbar, .tab-nav::-webkit-scrollbar { display: none }
nav button, .tab-nav button {
  position: relative;
  min-height: 32px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.5);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  transition: all .18s var(--ease);
  z-index: 1;
}
nav button:hover, .tab-nav button:hover {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
}
nav button.active, .tab-nav button.active {
  background: rgba(255,255,255,.92);
  color: #1C1C1E;
  box-shadow:
    0 1px 3px rgba(0,0,0,.1),
    0 0 0 1px rgba(255,255,255,.15),
    inset 0 1px 0 rgba(255,255,255,.4);
}
/* Subtle glow under active tab */
nav button.active::after, .tab-nav button.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: radial-gradient(ellipse at center, rgba(0,122,255,.5) 0%, transparent 100%);
  border-radius: 2px;
  pointer-events: none;
}

/* ===== Card — iOS Glass Panel ===== */
.card {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow), var(--glass-highlight);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  padding: 20px;
  position: relative;
  transition: box-shadow var(--duration-normal) var(--ease), border-color var(--duration-normal) var(--ease);
}
.card::before, .card::after { content: none }
.card:hover {
  box-shadow: var(--shadow-md), var(--glass-highlight);
  border-color: rgba(255,255,255,.8);
}
.card-divider { border: 0; border-top: 1px solid var(--line-light); margin: 16px 0 }
.card-header {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.card-content { padding-top: 0 }

/* ===== Section Title ===== */
.section-title {
  display: flex;
  align-items: center;
  min-width: 0;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.section-title h2 {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-left: 10px;
  border-left: 3px solid var(--brand);
}
.section-title h2::before { content: none }
.section-title h3 { font-size: 14px }
.section-title.compact { margin-bottom: 10px; padding-bottom: 10px }

/* ===== Buttons ===== */
.btn, .file-pick {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.8);
  color: var(--ink);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  min-height: 36px;
  line-height: 1.1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: all var(--duration-fast) var(--ease);
}
.btn:hover, .file-pick:hover {
  border-color: var(--border-hover);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.btn:active { transform: scale(.97) translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.04) }
.btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,122,255,.3);
}
.btn.primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  box-shadow: 0 4px 12px rgba(0,122,255,.3);
  transform: translateY(-1px);
}
.btn.primary:active { transform: scale(.97) translateY(0) }
.btn.secondary {
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
}
.btn.danger { color: var(--bad); border-color: var(--bad-border); background: var(--bad-bg) }
.btn.danger:hover { border-color: var(--bad); background: #FFE5E5; box-shadow: 0 2px 8px rgba(255,59,48,.15) }
.btn.small { min-height: 30px; padding: 5px 10px; border-radius: var(--radius-sm); font-size: 12px }
.btn:disabled, button:disabled { opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: none !important }
.btn-success {
  animation: successPulse .6s var(--ease);
}
@keyframes successPulse {
  0% { background: var(--brand); border-color: var(--brand) }
  30% { background: var(--good); border-color: var(--good) }
  100% { background: var(--brand); border-color: var(--brand) }
}
.toolbar, .actions, .product-data-tools, .product-main-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.actions.vertical { flex-direction: column; align-items: stretch }

/* ===== Forms ===== */
.form-grid, .control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  padding: 4px;
}
.control-grid { grid-template-columns: repeat(4, minmax(0,1fr)) }
.form-grid.compact { grid-template-columns: 1fr; gap: 10px }
.form-grid.one-col { grid-template-columns: 1fr }

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--text-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
label.wide, .wide { grid-column: span 2 }
small { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 12px }

input, select, textarea {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--line);
  background-color: rgba(255,255,255,.9);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  color: var(--ink);
  font-size: 13px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
textarea { min-height: 82px }
input:hover, select:hover, textarea:hover { border-color: var(--border-hover) }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,122,255,.15);
  background-color: #fff;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgba(255,255,255,.88);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238E8E93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 7px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 7px 36px 7px 10px;
  min-height: 36px;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
select:hover {
  border-color: var(--border-hover);
  background-color: rgba(255,255,255,.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(15,23,42,.05);
}
select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,122,255,.15);
  background-color: rgba(255,255,255,.95);
}
select:active:not(:disabled) {
  transform: scale(.98);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
select:disabled {
  opacity: .45;
  cursor: not-allowed;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 1.5px solid var(--border-checkbox);
  border-radius: 5px;
  background: var(--card);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
input[type=checkbox]:hover { border-color: var(--border-checkbox-hover) }
input[type=checkbox]:active { transform: scale(.92) }
input[type=checkbox]:checked {
  border-color: var(--brand);
  background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
input[type=checkbox]:focus-visible { outline: none; box-shadow: var(--focus-ring) }
input[type=checkbox]:disabled { opacity: .4; cursor: not-allowed }

button:focus-visible,
.tab-nav button:focus-visible,
.nav button:focus-visible,
.tools-dropdown-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.checkline {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 4px 0;
  color: var(--ink-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
.checkline input[type=checkbox] { flex: 0 0 18px }
.checkline.compact { font-size: 11px; gap: 3px }
.checkline.compact input { width: 14px; height: 14px }

/* ===== Unified Filter Components ===== */
.filter-field {
  position: relative;
  min-width: 0;
}
.filter-field label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-label);
  letter-spacing: 0;
  line-height: 1.25;
  transition: color var(--duration-fast) var(--ease);
}
.filter-field input,
.filter-field select {
  width: 100%;
  min-height: 40px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  background: rgba(255,255,255,.84);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 1px 2px rgba(15,23,42,.04);
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    background var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}
.filter-field input:hover,
.filter-field select:hover {
  border-color: var(--border-hover);
  background: rgba(255,255,255,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 4px 14px rgba(15,23,42,.06);
}
.filter-field input:focus,
.filter-field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow:
    0 0 0 4px rgba(0,122,255,.12),
    0 10px 26px rgba(0,122,255,.10),
    inset 0 1px 0 rgba(255,255,255,.78);
  background: rgba(255,255,255,.98);
}
.filter-field:focus-within label {
  color: var(--brand);
}
.filter-field.has-value input,
.filter-field.has-value select {
  border-color: rgba(0,122,255,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(245,249,255,.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(0,122,255,.06);
}
.filter-field.has-value input:hover,
.filter-field.has-value select:hover {
  border-color: rgba(0,122,255,.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(0,122,255,.1),
    0 2px 6px rgba(0,122,255,.06);
}
.filter-field.has-value label {
  color: var(--brand);
}
.filter-clear {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(148,163,184,.18);
  color: var(--muted);
  font-size: 12px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: scale(.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  transition: opacity var(--duration-normal) var(--ease-out-quart), transform var(--duration-normal) var(--ease-out-quart), background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
  padding: 0;
}
.filter-field.has-value .filter-clear {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.filter-clear:hover {
  background: var(--bad);
  color: #fff;
  transform: scale(1.08);
}
.filter-clear:active {
  transform: scale(.9);
}
.filter-field input[type=search] {
  padding-left: 36px;
}
.filter-field input[type=search]::placeholder {
  color: var(--muted);
  font-weight: 400;
  transition: color var(--duration-fast) var(--ease);
}
.filter-field input[type=search]:focus::placeholder {
  color: rgba(142,142,147,.6);
}
.filter-search-icon {
  position: absolute;
  left: 12px;
  bottom: 11px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
  transition: color var(--duration-fast) var(--ease);
}
.filter-field:focus-within .filter-search-icon,
.filter-field.has-value .filter-search-icon {
  color: var(--brand);
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 0;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0,122,255,.14);
  background: rgba(245,249,255,.94);
  color: #0b63ce;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  animation: chipIn var(--duration-fast) var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
@keyframes chipIn {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}
.filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--brand);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  transition: background var(--duration-fast);
}
.filter-chip-remove:hover {
  background: rgba(0,0,0,.08);
}
.filter-chips-clear {
  border: 1px solid transparent;
  background: rgba(255,255,255,.68);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  transition: color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.filter-chips-clear:hover {
  color: var(--bad);
  background: var(--bad-bg);
  border-color: rgba(255,59,48,.12);
}
.filter-chips-clear:active {
  transform: scale(.95);
}
.period-bar {
  display: inline-flex;
  gap: 3px;
  flex-wrap: wrap;
  padding: 4px;
  border: 1px solid rgba(214,223,237,.9);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 10px 26px rgba(15,23,42,.06);
  margin-bottom: 12px;
}
.period-btn {
  min-height: 34px;
  border: 1px solid rgba(214,223,237,.6);
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  color: var(--muted);
  padding: 7px 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  position: relative;
  transition:
    background var(--duration-normal) var(--ease-out-quart),
    color var(--duration-normal) var(--ease-out-quart),
    box-shadow var(--duration-normal) var(--ease-out-quart),
    transform var(--duration-fast) var(--ease);
}
.period-btn:hover { background: rgba(255,255,255,.88); color: var(--ink); border-color: rgba(180,195,215,.7); }
.period-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,122,255,.14);
}
.period-btn:active { transform: scale(.96) }
.period-btn.active {
  background: linear-gradient(180deg, #238cff, #007aff);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 6px 16px rgba(0,122,255,.28);
}

/* ===== Pills & Badges ===== */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-full);
  padding: 3px 9px;
  color: var(--text-label);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.pill.good, .status-completed, .order-status-select.completed { color: var(--good); background: var(--good-bg); border-color: var(--good-border) }
.pill.warn, .status-production, .order-status-select.production { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border) }
.pill.bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-border) }
.pill.accent, .status-shipping, .order-status-select.shipping { color: var(--accent); background: var(--accent-light); border-color: var(--accent-border) }
.pill.muted, .status-draft, .order-status-select.draft { color: var(--text-label); background: var(--surface); border-color: var(--line) }

/* ===== Tables — High Contrast, No Glass ===== */
.table-wrap {
  position: relative;
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
}
.table-wrap::-webkit-scrollbar { width: 6px; height: 6px }
.table-wrap::-webkit-scrollbar-track { background: transparent }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--border-hover) }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
  color: var(--ink);
}
th, td {
  border-bottom: 1px solid var(--line-light);
  padding: 9px 12px;
  text-align: left;
  vertical-align: middle;
}
th {
  position: sticky;
  top: 0;
  background: #F9F9FB;
  color: var(--muted);
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-light);
  background-clip: padding-box;
}
table th:first-child, table td:first-child { position: sticky; left: 0; z-index: 2; background: inherit }
table th:first-child { z-index: 3 }
td input, td select, td textarea {
  min-width: 90px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 13px;
}
td textarea { width: 100%; min-width: 260px; resize: vertical }
tr:last-child td { border-bottom: 0 }
tbody tr { transition: background .12s var(--ease) }
tbody tr:hover td { background: var(--surface-alt) }
.empty-cell { text-align: center; color: var(--muted); padding: 22px !important }

/* ===== Toast ===== */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  background: var(--brand2);
  color: #fff;
  border: 0;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 360px;
  font-size: 13px;
  font-weight: 500;
  animation: toastIn .3s var(--ease);
}
.toast.bad { background: var(--toast-bad) }
.toast.good { background: var(--toast-good) }
.toast.warn { background: var(--toast-warn-bg); color: var(--toast-warn-fg) }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px) scale(.96) }
  to { opacity: 1; transform: translateY(0) scale(1) }
}
.toast-exit {
  animation: toastOut .2s var(--ease) forwards;
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(8px) scale(.96) }
}

/* ===== Utilities ===== */
.hidden { display: none !important }
[hidden] { display: none !important }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px }
hr { border: 0; border-top: 1px solid var(--line-light); margin: 16px 0 }
.hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.file-pick { cursor: pointer }
.link-button {
  border: 0;
  background: transparent;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  transition: color .12s var(--ease);
}
.link-button:hover { color: var(--brand-hover); text-decoration: underline }

/* ===== Notice ===== */
.notice {
  border: 1px solid var(--line-light);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 11px 12px;
  min-height: 42px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 12px;
}

/* ===== Order Info Layout ===== */
.order-info-layout { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 14px }
.order-info-layout.compact-order {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.info-panel {
  border: 1px solid var(--line-light);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 14px;
  min-width: 0;
  box-shadow: none;
}
.info-panel.full { grid-column: 1/-1 }
.info-panel h3 { margin: 0 0 10px; color: var(--ink); font-size: 13px; font-weight: 600 }
.order-date-panel {
  background: rgba(255,255,255,.65);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-lg);
}
.order-date-panel h3 { color: var(--ink) }
.order-main-panel { background: var(--card) }
.compact-order .order-main-panel .form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.compact-order .order-main-panel .form-grid .wide { grid-column: span 2 }
.compact-order .order-main-panel textarea { min-height: 78px }
.order-main-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px }
.order-main-title h3 { margin: 0 }
.address-panel textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px;
  background: var(--card);
  resize: vertical;
  color: var(--ink);
  line-height: 1.5;
}
.inline-actions { margin-top: 8px }

/* ===== Order Creation — Custom Options ===== */
.custom-options-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
  align-items: start;
}
.custom-options-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line-light);
  border-radius: 10px;
  background: var(--card);
  min-width: 0;
}
.custom-product-field { width: 100%; min-width: 0 }
.custom-product-field select, #itemProduct {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
}

.input-row-4 {
  display: grid;
  grid-template-columns: minmax(96px, .55fr) repeat(2, minmax(150px, .8fr)) minmax(96px, .55fr);
  gap: 10px;
}
.input-row-4 label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.input-row-4 input { width: 100%; box-sizing: border-box }

.dynamic-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px 16px;
  margin-top: 4px;
}
.dynamic-options label, .dynamic-options select { min-width: 0 }
.dynamic-options select {
  width: 100%;
  background-color: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
}
.dynamic-options.wide, .custom-options-form .wide { grid-column: auto }

.option-quote-panel {
  min-width: 0;
  align-self: start;
  border: 1px solid rgba(11,109,255,.2);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(235,244,255,.98), rgba(255,255,255,.94));
  padding: 18px;
  position: sticky;
  top: 88px;
  box-shadow: 0 16px 36px rgba(10,22,70,.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.option-quote-head {
  display: grid;
  gap: 12px;
}
.option-quote-title-row {
  align-items: start;
}
.option-quote-title-row h3 {
  margin: 0;
  font-size: 18px;
}
.option-quote-meta {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
.option-quote-panel #quoteToggleBtn {
  width: 100%;
  min-height: 44px;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(11,109,255,.2);
}
.option-quote-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.option-quote-stat {
  padding: 10px 12px;
  border: 1px solid rgba(210,219,232,.92);
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}
.option-quote-stat-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.2;
}
.option-quote-stat-value {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.option-quote-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}
.option-quote-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line-light);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  padding: 11px 12px;
  box-shadow: 0 8px 18px rgba(10,22,70,.04);
}
.option-quote-row b {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.option-quote-row span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.option-quote-row strong {
  color: var(--accent);
  font-size: 13px;
  white-space: nowrap;
  padding-top: 1px;
}
.option-quote-empty {
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 14px;
  font-size: 13px;
  background: rgba(255,255,255,.86);
}

.price-summary {
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  padding: 12px;
  background: var(--card);
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
  gap: 12px;
  font-size: 13px;
}
.price-row span { color: var(--muted); font-weight: 500 }
.price-row b { color: var(--ink); font-weight: 700; font-size: 14px }
.price-row.discount-result b { color: var(--brand2) }
.price-row b, .price-row span { overflow-wrap: anywhere }

.discount-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(104px, .7fr) auto;
  gap: 8px;
  align-items: end;
  font-size: 12px;
  padding: 8px 0;
}
.discount-row input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.discount-mode-label, .discount-value-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  color: var(--text-label);
  font-size: 11px;
  font-weight: 700;
  white-space: normal;
}
.discount-mode-label select, .discount-row input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  padding: 6px 30px 6px 9px;
  font-size: 12px;
}
.discount-apply-label {
  min-height: 34px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4px;
  white-space: nowrap;
}
.checkline.compact.discount-apply-label input {
  width: 16px;
  height: 16px;
  min-height: 16px;
}

.order-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .8fr);
  gap: 18px;
  margin-top: 18px;
}
.preview-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(250,247,242,.88);
  padding: 14px;
  min-width: 0;
  box-shadow: var(--shadow-inset);
}
.form-grid + .actions,
.custom-options-layout + .actions,
.order-preview-layout + .actions {
  padding-top: 16px;
  border-top: 1px solid var(--line-light);
  margin-top: 18px;
}
.table-wrap + .actions {
  padding-top: 12px;
  margin-top: 12px;
}

/* ===== Preview Controls ===== */
.preview-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.preview-controls .checkline { padding-top: 0; align-self: end }
.field-with-btn { display: flex; align-items: flex-end; gap: 8px }
.field-with-btn label { flex: 1 }

/* ===== Metrics ===== */
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px }
.preview-panel .metrics { grid-template-columns: repeat(4, minmax(120px,1fr)) }
.metrics div {
  border: 1px solid var(--line-light);
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 12px;
  min-height: 78px;
  box-shadow: var(--shadow);
}
.metrics div:hover { border-color: var(--border-hover) }
.metrics label { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px }
.metrics b { display: block; font-size: 18px; margin-top: 5px; color: var(--brand2); font-weight: 700; line-height: 1.2 }
.preview-panel .metrics div:first-child,
.preview-panel .metrics div:nth-child(7) {
  border-color: rgba(15,118,110,.2);
  background: linear-gradient(180deg, rgba(236,253,245,.8), rgba(15,118,110,.1));
}
.preview-panel .metrics div:first-child b,
.preview-panel .metrics div:nth-child(7) b { color: var(--accent) }
.preview-panel .metrics .btn { margin-top: 8px; padding: 4px 8px }

/* ===== Product Workbench ===== */
.product-page-shell { display: grid; gap: 18px }
.product-workbench-hero {
  padding: 18px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,255,.88));
}
.product-workbench-title {
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
}
.product-primary-actions,
.product-secondary-actions,
.product-tertiary-actions {
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.product-primary-actions .btn { min-width: 120px }
.product-workbench-layout {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.product-sidebar-card {
  position: sticky;
  top: 88px;
  overflow: hidden;
}
.product-sidebar-header { padding-bottom: 0 }
.product-sidebar-body {
  display: grid;
  gap: 14px;
  padding-top: 14px;
}
.product-floating-toolbar-card {
  position: sticky;
  top: 88px;
  z-index: 10;
}
.product-floating-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) minmax(180px, .9fr);
  gap: 12px;
  padding: 14px 16px;
}
.product-toolbar-group {
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(210,219,232,.82);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
.product-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-secondary-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.product-tertiary-actions {
  display: grid;
  grid-template-columns: 1fr;
}
.product-select-label { margin: 0 }
.product-select-label select { margin-top: 8px }
.product-select-label input { margin-top: 8px }
.product-list-panel {
  display: grid;
  gap: 8px;
  max-height: min(68vh, 760px);
  overflow: auto;
  padding-right: 4px;
}
.product-list-empty {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  color: var(--muted);
  text-align: center;
}
.product-list-item {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 12px 14px;
  text-align: left;
  transition: border-color .14s var(--ease), transform .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease);
}
.product-list-item:hover {
  border-color: rgba(11,109,255,.28);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(10,22,70,.06);
}
.product-list-item.active {
  border-color: rgba(11,109,255,.38);
  background: linear-gradient(180deg, rgba(11,109,255,.08), rgba(11,109,255,.03));
  box-shadow: 0 14px 28px rgba(10,22,70,.09);
}
.product-list-item strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}
.product-editor-stack {
  display: grid;
  gap: 18px;
}
.product-editor-title,
.product-basics-grid { min-width: 0 }
.product-basics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.product-section-card .card-content { display: grid; gap: 14px }
.product-options-stack {
  display: grid;
  gap: 18px;
}
.product-options-price-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(210,219,232,.84);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.9));
}
.product-table-wrap table { min-width: 100% }
.product-price-section-header {
  gap: 12px;
  align-items: center;
}
.product-price-section-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.product-price-section-tabs .btn.is-active {
  background: rgba(11,109,255,.12);
  border-color: rgba(11,109,255,.24);
  color: var(--brand);
}
.product-price-section-tools {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.product-price-summary {
  font-size: 12px;
  color: var(--muted);
}
.product-price-single-panel {
  min-width: 0;
}
.product-price-single-panel .product-table-wrap {
  max-height: 360px;
  overflow: auto;
}
.product-table-wrap table {
  table-layout: fixed;
  min-width: 0;
}
.product-table-wrap thead,
.product-table-wrap tbody {
  position: static;
}
.product-table-wrap thead th,
.product-table-wrap table th:first-child,
.product-table-wrap table td:first-child {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
}
.product-table-wrap thead th {
  background: #f9f9fb;
}
.product-table-wrap tbody td {
  background: #fff;
}
.product-table-wrap tbody td:first-child {
  background: #fff;
}
.product-table-wrap td input {
  width: 100%;
  min-width: 0;
}
.product-modal-panel { width: min(100%, 460px) }
.product-import-modal-panel { width: min(100%, 760px) }
.archived-products-modal-panel { width: min(100%, 760px) }
.product-modal-body { padding: 18px 22px }
.product-modal-footer { justify-content: flex-end }
.archived-products-modal-body {
  display: grid;
  gap: 14px;
  padding: 20px 22px 22px;
}
.archived-products-list {
  display: grid;
  gap: 12px;
}
.archived-product-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(210,219,232,.84);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
}
.archived-product-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.archived-product-info strong {
  font-size: 14px;
  color: var(--ink);
}
.archived-product-meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  word-break: break-all;
}
.archived-products-empty,
.archived-products-error {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--surface-alt);
  text-align: center;
}
.product-import-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 4px 0;
}
.product-import-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  background: var(--surface);
}
.product-import-card-primary { background: linear-gradient(180deg, rgba(11,109,255,.06), rgba(255,255,255,.92)) }
.product-import-card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600 }
.product-import-card p { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5 }
.product-import-actions { display: grid; gap: 10px; align-items: start }
.product-import-filename {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background: var(--surface-alt);
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
}
.editor-block { min-width: 0 }

/* ===== Option Groups Editor ===== */
.option-groups-editor {
  border: 1px solid rgba(210,219,232,.84);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.9));
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 12px;
}
.option-group-list {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: auto;
  max-height: 420px;
}
.option-group-list-item {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--line-light);
  transition: background .12s var(--ease);
}
.option-group-list-item:last-child { border-bottom: 0 }
.option-group-list-item:hover { background: var(--surface-highlight) }
.option-group-list-item.active { background: linear-gradient(180deg, rgba(11,109,255,.12), rgba(11,109,255,.05)) }
.option-group-list-item.drag-over { outline: 1px dashed var(--border-drag); outline-offset: -2px }
.option-group-list-item.dragging { opacity: .6 }
.option-group-label { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 8px }
.option-group-actions { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap }
.option-group-actions .btn { padding: 4px 8px; min-width: auto }
.option-group-detail { border: 1px solid var(--line-light); border-radius: var(--radius-md); background: var(--surface); padding: 14px; min-width: 0; box-shadow: none }
.option-group-detail-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); min-height: 120px }
.option-values-table table { min-width: 760px }
.option-values-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px }
.option-drag-handle {
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  font-size: 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: grab;
}

/* ===== Order List ===== */
.orders-import-hint {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 10px;
}
.orders-filter-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1.8fr) repeat(5, minmax(130px, 1fr));
  gap: 12px 14px;
  align-items: end;
  position: relative;
  border: 1px solid rgba(214,223,237,.92);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,250,255,.86));
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 16px 36px rgba(15,23,42,.08);
  transition: box-shadow var(--duration-normal) var(--ease);
}
.orders-filter-panel:focus-within {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 16px 36px rgba(15,23,42,.08),
    0 0 0 2px rgba(0,122,255,.08);
}
.orders-filter-panel::before,
.analytics-filters::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 42%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0));
  pointer-events: none;
}
.orders-filter-panel label { margin: 0; min-width: 0 }
.orders-search-field { min-width: 0 }

.orders-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  background: var(--accent-light);
  color: var(--brand2);
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
.orders-bulk-bar .btn { width: auto }

/* ===== Order Row Hover ===== */
.orders-data-table tbody tr { transition: background .12s var(--ease) }
.orders-data-table tbody tr:hover td { background: rgba(0,0,0,.02) }
.orders-data-table tbody tr:hover td:first-child { background: inherit }

/* ===== Per-Row Action Dropdown ===== */
.order-row-actions { position: relative; width: 32px; min-width: 32px; text-align: center }
.order-action-trigger {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
}
.order-action-trigger:hover { background: var(--surface); color: var(--ink); border-color: var(--line-light) }
.order-action-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
  min-width: 150px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: var(--radius-lg);
  box-shadow:
    0 20px 50px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  padding: 6px;
  margin-top: 4px;
  animation: dropdownIn .15s var(--ease-out-quart);
  transform-origin: top right;
}
.order-action-menu.open { display: block }
.order-action-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: all .12s var(--ease);
}
.order-action-menu button:hover { background: rgba(0,122,255,.08) }
.order-action-menu button:active { transform: scale(.98) }
.order-action-menu button.danger { color: var(--bad) }
.order-action-menu button.danger:hover { background: rgba(255,59,48,.08) }
.order-action-menu .menu-divider { height: 1px; background: var(--line-light); margin: 4px 0 }

.orders-data-table table { min-width: 980px }
.feedback-data-table table { min-width: 1120px }
.orders-data-table th:first-child,
.orders-data-table td.order-select-cell {
  width: 54px;
  min-width: 54px;
  text-align: center;
}
.orders-data-table th:first-child input[type=checkbox],
.orders-data-table td input.order-select-box {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border-radius: 6px;
  display: inline-block;
}
.orders-data-table td input.order-select-box:checked,
.orders-data-table th:first-child input[type=checkbox]:checked {
  border-color: var(--accent);
  background-color: var(--accent);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.detail-grid div {
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 12px;
}
.detail-grid b { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; text-transform: none; letter-spacing: 0; font-weight: 600 }
.detail-grid span { display: block; word-break: break-word; color: var(--ink) }
.detail-table { max-height: 260px; margin-top: 10px }
.detail-table table { min-width: 760px }
.detail-value {
  display: block;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.detail-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line) }
.detail-section h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text-label) }

/* ===== Order Group & Item Rows ===== */
.order-group-header { background: var(--card); font-weight: 600 }
.order-group-header td {
  padding: 14px 12px;
  vertical-align: middle;
  border-bottom-color: var(--line-light);
}
.order-primary { display: grid; gap: 2px }
.order-primary strong { color: var(--ink); font-size: 15px; font-weight: 800; letter-spacing: -0.01em }
.order-primary span, .order-date, .order-count-muted {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.order-customer { color: var(--ink); font-weight: 600 }
.order-customer small { color: var(--muted) }
.order-money {
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.order-count-muted {
  display: inline-flex;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-full);
  background: var(--accent-light);
  color: var(--accent);
  padding: 3px 8px;
}
.order-items-list { display: flex; flex-direction: column; gap: 1px }
.order-item-row {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  line-height: 1.6;
}
.order-item-name { color: var(--ink); font-weight: 600 }
.order-item-size { color: var(--muted); font-weight: 400; font-size: 12px }
.order-item-qty { color: var(--accent); font-weight: 500; font-size: 12px }
.order-item-expand { cursor: pointer; user-select: none }
.order-item-expand .order-item-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.order-item-expand .order-item-name::after {
  content: '\25BE';
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.15s;
}
.order-item-expand.open .order-item-name::after { transform: rotate(180deg) }
.order-item-detail {
  display: none;
  padding: 4px 0 2px 12px;
  font-size: 12px;
  color: var(--muted);
  flex-direction: column;
  gap: 2px;
}
.order-item-expand.open .order-item-detail { display: flex }
.order-item-module {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--card);
}
.order-item-module h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 8px }
.item-module-code { font-weight: 400; font-size: 12px; color: var(--muted) }
.item-module-qty {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--ink);
}
.item-module-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 8px;
}
.item-size-editor, .item-qty-editor { align-items: end; flex-wrap: wrap }
.item-size-editor label, .item-qty-editor label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.item-size-editor input { width: 120px }
.item-module-qty label { display: inline-flex; align-items: center; gap: 4px }
.item-module-qty input { width: 60px }
.item-discount-editor {
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 10px;
  margin: 8px 0 10px;
}
.item-discount-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 13px;
}
.item-discount-header span { color: var(--muted); font-size: 12px }
.item-discount-grid {
  display: grid;
  grid-template-columns: minmax(110px, .7fr) minmax(130px, 1fr) minmax(110px, .8fr) minmax(130px, .9fr) auto;
  gap: 8px;
  align-items: end;
}
.item-discount-grid label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.item-discount-grid input, .item-discount-grid select {
  width: 100%;
  background-color: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
}
.item-discount-grid .discount-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: var(--ink);
}
.item-options-list { list-style: none; margin: 0; padding: 0; font-size: 13px }
.item-options-list li {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--line-light);
}
.item-options-list li:last-child { border-bottom: none }
.opt-label { color: var(--muted); min-width: 80px }
.opt-value { color: var(--ink); font-weight: 500 }
.item-group-card { border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius-lg); margin-bottom: 10px; background: rgba(255,255,255,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden }
.item-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0,0,0,.02);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.item-group-name { font-size: 14px; font-weight: 600; color: var(--ink) }
.item-group-count { font-size: 12px; color: var(--muted) }
.item-group-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.item-group-row:last-child { border-bottom: none }
.item-row-main { display: flex; align-items: center; gap: 10px; min-width: 0 }
.item-row-code { color: var(--muted); font-size: 12px; min-width: 140px; overflow-wrap: anywhere }
.item-row-size { min-width: 70px; color: var(--ink) }
.item-row-qty { min-width: 32px; color: var(--ink) }
.item-row-price { min-width: 60px; color: var(--ink); font-weight: 500 }
.item-row-cost { font-size: 12px; color: var(--brand2); margin-left: auto }
.item-group-cost-footer {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand2);
  border-top: 1px solid var(--line);
  text-align: right;
}
.order-production-cost-row {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--soft);
  border-radius: var(--r);
}
.order-production-cost-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
}
.order-production-cost-row input { flex: 1; max-width: 200px }
.cost-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}
.cost-tag-production { background: var(--cost-production-bg); color: var(--cost-production-fg) }
.cost-tag-logistics { background: var(--cost-logistics-bg); color: var(--cost-logistics-fg) }

/* ===== Order Profit & Status ===== */
.order-profit {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 700;
  white-space: nowrap;
}
.order-profit small { color: inherit; font-size: 11px; font-weight: 700 }
.order-profit.good { color: var(--good) }
.order-profit.warn { color: var(--warn) }
.order-profit.bad { color: var(--bad) }
.order-status {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.order-status.good { color: var(--good); background: var(--good-bg); border-color: var(--good-border) }
.order-status.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border) }
.order-status.bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-border) }
.order-status.ship { color: var(--brand-hover); background: var(--brand-light); border-color: var(--accent-border) }
.order-status.muted { color: var(--muted); background: var(--surface); border-color: var(--line-light) }
.order-status-select {
  width: auto;
  min-width: 92px;
  min-height: 30px;
  border-radius: var(--radius-full);
  padding: 4px 30px 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s var(--ease);
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238E8E93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.order-status-select:hover {
  box-shadow: 0 0 0 2px var(--accent-light);
  transform: translateY(-1px);
}
.order-status-select:active {
  transform: scale(.97) translateY(0);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.order-status-select.good { color: var(--good); background-color: var(--good-bg); border-color: var(--good-border) }
.order-status-select.warn { color: var(--warn); background-color: var(--warn-bg); border-color: var(--warn-border) }
.order-status-select.ship { color: var(--brand-hover); background-color: var(--brand-light); border-color: var(--accent-border) }
.order-status-select.muted { color: var(--muted); background-color: rgba(255,255,255,.85); border-color: var(--line-light) }
.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 210px;
}
.order-actions .btn { min-width: auto; padding: 6px 10px; min-height: 30px }
.order-actions .btn:disabled { opacity: .45; cursor: not-allowed }
.order-actions.compact { flex-wrap: nowrap; min-width: 150px; gap: 6px }
.order-more-menu {
  min-width: 78px;
  width: 78px;
  min-height: 30px;
  padding: 4px 28px 4px 9px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
}
.order-item-row td { padding: 0 12px 10px; font-weight: 400; background: var(--card) }
.order-item-row.hidden { display: none }
.order-item-row td:first-child { position: static; padding-left: 12px }
.order-item-detail-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(90px, .8fr)) minmax(220px, 1.6fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-secondary);
  padding: 9px 12px;
}
.order-item-detail-row .item-code { color: var(--ink); font-weight: 600 }
.order-item-card {
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 12px;
  box-shadow: none;
}
.order-item-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.order-item-card-head strong { color: var(--ink); font-size: 14px }
.order-item-card-head span { color: var(--muted); font-size: 12px; text-align: right }
.order-item-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}
.order-item-card-grid span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 8px 9px;
  color: var(--ink-secondary);
  min-width: 0;
}
.order-item-card-grid span.wide { grid-column: span 2 }
.order-item-card-grid b {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.order-summary-row td { border-top: 2px solid var(--line); font-weight: 700; background: var(--surface-highlight) }
.order-toggle-btn { text-transform: none; letter-spacing: 0 }

.orders-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  padding-top: 12px;
}
.orders-pager label {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
.orders-pager select {
  width: auto;
  min-height: 32px;
  padding: 5px 30px 5px 8px;
  background-color: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ===== Info Matcher ===== */
.info-matcher {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 10px;
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.info-matcher textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--card);
  resize: vertical;
  line-height: 1.5;
  min-height: 100px;
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.info-matcher textarea:focus { border-color: var(--brand); box-shadow: var(--focus-ring) }
.info-matcher textarea::placeholder { color: var(--muted); font-size: 13px }
.info-matcher .actions { margin-top: 12px }
.matcher-input-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px }
.matcher-input-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-label);
  letter-spacing: 0;
}

/* Matcher Preview */
.matcher-preview {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-light);
  animation: matcherFadeIn .25s var(--ease);
}
@keyframes matcherFadeIn {
  from { opacity: 0; transform: translateY(-4px) }
  to { opacity: 1; transform: translateY(0) }
}
.matcher-preview-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px }
.matcher-preview-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-label);
  letter-spacing: 0;
}
.matcher-preview-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px }
.matcher-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
  box-shadow: none;
}
.matcher-card.matched { border-color: var(--good-border); background: var(--good-bg) }
.matcher-card.unmatched { opacity: .45; border-style: dashed }
.matcher-card-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.matcher-card-value {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  word-break: break-all;
  line-height: 1.4;
}
.matcher-card-value.empty { color: var(--muted); font-style: italic; font-weight: 400 }
.matcher-card-icon { display: inline-flex; align-items: center; gap: 4px }
.matcher-card-icon::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.matcher-card.matched .matcher-card-icon::before { background: var(--good) }
.field-flash { animation: fieldFlash 1.2s var(--ease) }
@keyframes fieldFlash {
  0% { box-shadow: 0 0 0 3px rgba(0,0,0,.1); background-color: var(--brand-light) }
  100% { box-shadow: none; background-color: var(--card) }
}

/* ===== Shopify Panel ===== */
.shopify-panel, .shopify-settings {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 14px;
}
.shopify-fetch { display: grid; grid-template-columns: minmax(220px,1fr) auto auto; gap: 10px; align-items: end }
.small-note { color: var(--muted); font-size: 12px; margin-top: 8px }
.shopify-recent { margin-top: 10px; max-height: 260px }

/* ===== Modals ===== */
.modal { position: fixed; inset: 0; z-index: 80 }
.modal:not(.hidden) { overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px }
.modal-backdrop { position: absolute; inset: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none }
.modal-panel {
  position: relative;
  width: min(100%, 920px);
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--glass-highlight);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  animation: modalIn .28s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.98) }
  to { opacity: 1; transform: translateY(0) scale(1) }
}
.edit-order-modal-panel { width: min(100%, 920px) }
.quote-modal-panel {
  width: min(100%, 860px);
  max-width: 860px;
  max-height: min(88vh, 920px);
  overflow: hidden;
  padding: 0;
}
.quote-modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
}
.quote-modal-content {
  max-height: calc(min(88vh, 920px) - 86px);
  overflow: auto;
}

/* Modal Header */
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.4);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  flex-shrink: 0;
}
.modal-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.modal-header-desc {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.modal-close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.modal-close-btn:hover { background: #fff; color: var(--ink); box-shadow: var(--shadow) }
.modal-close-btn:active { transform: scale(.92) }

/* Modal Body — scrollable content zone */
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  overscroll-behavior: contain;
}

/* Modal Footer — fixed action bar */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.4);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  flex-shrink: 0;
}
.modal-footer:empty { display: none }

/* Edit Order Modal */
.modal-body .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.modal-body .detail-grid > div {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 14px;
}
.modal-body .detail-grid label { text-transform: none; letter-spacing: 0; font-size: 12px }
.modal-body .detail-grid input,
.modal-body .detail-grid textarea {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}
.modal-body .detail-grid textarea { min-height: 52px; resize: vertical }
.modal-body .order-options-detail { margin-top: 16px }
.modal-body .order-options-detail h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink) }
.modal-body .detail-table table { min-width: 600px }
.modal-body .detail-table { max-height: none }

/* Order detail modal — ERP-readable iOS glass shell with solid data sections */
.edit-order-modal-panel,
#orderDetailModal .modal-panel {
  width: min(100%, 980px);
  max-height: calc(100vh - 48px);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.88);
  box-shadow: 0 24px 70px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.78);
}
.order-detail-stack {
  display: grid;
  gap: 14px;
}
.modal-body .order-detail-stack .detail-section {
  margin-top: 0;
  padding: 16px;
  border: 1px solid rgba(226,232,240,.86);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.modal-body .order-detail-stack .detail-section-overview {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.78));
}
.detail-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.detail-section-title h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.detail-section-title span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.modal-body .order-detail-stack .detail-grid {
  gap: 10px;
}
.modal-body .order-detail-stack .detail-field-wide {
  grid-column: 1 / -1;
}
.modal-body .order-detail-stack .detail-grid > div {
  min-height: 72px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.94);
  padding: 13px 14px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal-body .order-detail-stack .detail-grid label {
  gap: 5px;
  color: var(--text-label);
}
.modal-body .order-detail-stack .detail-value {
  min-height: 24px;
  padding: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.amount-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.amount-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.94);
}
.amount-summary-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.amount-summary-row b {
  margin-left: auto;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.amount-summary-row.strong {
  background: #fff;
  border-color: rgba(203,213,225,.95);
}
.amount-summary-row.good b { color: var(--good) }
.amount-summary-row.bad b { color: var(--bad) }
.detail-section-items {
  overflow-x: auto;
}
.detail-section-items .item-group-card,
.detail-section-items .order-item-module {
  min-width: 680px;
  border-color: rgba(226,232,240,.95);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.detail-section-items .item-group-header {
  background: rgba(248,250,252,.96);
  border-bottom-color: rgba(226,232,240,.95);
}
.detail-section-items .item-row-main {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 92px 54px 94px;
  gap: 12px;
  align-items: center;
}
.detail-section-items .item-row-code {
  min-width: 0;
  color: var(--ink-secondary);
  font-weight: 700;
}
.detail-section-items .item-row-size,
.detail-section-items .item-row-qty,
.detail-section-items .item-row-price {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.detail-section-items .item-row-price {
  text-align: right;
  font-weight: 800;
}
.detail-section-items .item-row-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.detail-section-items .item-option-row {
  background: rgba(248,250,252,.96);
  border-color: rgba(226,232,240,.9);
}
.order-production-cost-row {
  border: 1px solid rgba(226,232,240,.95);
  background: #fff;
}
.delivery-screenshot-section {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.9);
}

/* ===== Tracking Code Link ===== */
.tracking-code-link {
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 0.12s ease;
  display: block;
  text-align: left;
}
.tracking-code-text { font-size: 15px; color: var(--ink); letter-spacing: -0.01em }
.tracking-code-icon { display: none; }
.tracking-code-link:hover .tracking-code-text { color: var(--primary, #007aff); }

/* ===== Production Photos ===== */
.production-photos-section { margin-top: 16px; }
.production-photos-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.production-photos-empty { font-size: 12px; color: var(--muted); padding: 8px 0; }
.production-photo-thumb { position: relative; width: 80px; height: 80px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(226,232,240,.8); }
.production-photo-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.production-photo-delete { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(239,68,68,.85); color: #fff; border: 0; font-size: 12px; line-height: 20px; text-align: center; cursor: pointer; opacity: 0; transition: opacity .15s; }
.production-photo-thumb:hover .production-photo-delete { opacity: 1; }
.production-photos-upload-btn { font-size: 12px; }

/* ===== Channel Switcher ===== */
.channel-switcher-wrap { position: relative; }
.channel-switcher-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-full);
  background: rgba(255,255,255,.8); color: var(--ink); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease; backdrop-filter: blur(8px);
}
.channel-switcher-btn:hover { border-color: var(--brand); background: rgba(255,255,255,.95); }
.channel-switcher-menu {
  position: absolute; top: 100%; right: 0; margin-top: 6px;
  min-width: 180px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  z-index: 100; overflow: hidden;
}
.channel-switcher-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px 14px; border: 0; background: none;
  font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer;
  text-align: left; transition: background 0.1s;
}
.channel-switcher-item:hover { background: rgba(176,90,48,.06); }
.channel-switcher-item.active { color: var(--brand); font-weight: 600; }
.channel-switcher-item small { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ===== Logistics Analysis ===== */
.logistics-analytics-panel { margin-top: 12px; }
.logistics-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.logistics-kpi { padding: 10px 12px; border: 1px solid rgba(226,232,240,.6); border-radius: var(--radius-md); background: rgba(255,255,255,.6); }
.logistics-kpi span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.logistics-kpi b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ===== Profit Preview ===== */
.profit-preview-bar { padding: 12px 14px; margin: 8px 0 12px; border: 1px solid rgba(226,232,240,.6); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(245,249,255,.7), rgba(255,255,255,.6)); }
.profit-preview-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.profit-preview-label small { font-weight: 400; color: var(--muted); font-size: 11px; }
.profit-preview-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.profit-preview-cell { display: flex; flex-direction: column; gap: 2px; }
.profit-preview-cell span { font-size: 11px; color: var(--muted); }
.profit-preview-cell b { font-size: 14px; font-variant-numeric: tabular-nums; }
.profit-preview-cell b.good { color: #059669; }
.profit-preview-cell b.bad { color: #dc2626; }
.profit-preview-cell b.warn { color: #d97706; }

@media (max-width: 760px) {
  .edit-order-modal-panel,
  #orderDetailModal .modal-panel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
  .modal-body .order-detail-stack .detail-grid,
  .amount-summary-grid {
    grid-template-columns: 1fr;
  }
  .detail-section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .detail-section-title span { text-align: left }
  .detail-section-items .item-group-card,
  .detail-section-items .order-item-module {
    min-width: 620px;
  }
}
.order-level-discount { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); padding: 12px; margin-top: 8px }
.order-actual-paid-row { margin-top: 10px; display: flex; flex-direction: column; gap: 4px }
.order-actual-paid-row label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 700 }
.order-actual-paid-row input { width: 100%; max-width: 240px; height: 34px; padding: 6px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: var(--radius-sm) }
.muted-hint { font-size: 11px; color: var(--muted) }
.discount-breakdown { margin-top: 12px }
.discount-breakdown > b { display: block; font-size: 12px; color: var(--ink); margin-bottom: 6px }
.discount-breakdown table { width: 100%; font-size: 12px }
.discount-breakdown th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line) }
.discount-breakdown td { padding: 4px 8px; border-bottom: 1px solid var(--line-light) }
.discount-breakdown .bd-discount { color: var(--bad) }

/* ===== Quote Modal ===== */
.quote-modal-body {
  display: grid;
  gap: 16px;
  padding: 20px 24px 24px;
}
.quote-overview-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.quote-overview-cell {
  padding: 14px 16px;
  border: 1px solid rgba(210,219,232,.88);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(248,250,255,.96), rgba(255,255,255,.92));
}
.quote-overview-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .02em;
}
.quote-overview-value {
  display: block;
  margin-top: 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.quote-item-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,251,255,.94));
  transition: box-shadow .15s, transform .15s;
}
.quote-item-card:hover {
  box-shadow: 0 14px 30px rgba(10,22,70,.08);
  transform: translateY(-1px);
}
.quote-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.quote-item-title { flex: 1; min-width: 0 }
.quote-item-title h4 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3 }
.quote-item-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 2px }
.quote-item-price { flex-shrink: 0 }
.quote-item-price-usd {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}
.quote-item-price-rmb { display: block; font-size: 12px; color: var(--muted); text-align: right; margin-top: 2px }
.quote-opts { display: grid; gap: 5px; margin-bottom: 12px }
.quote-opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  padding: 5px 10px;
  background: #ffffff;
  border-radius: var(--radius-sm);
}
.quote-opt-key { color: var(--muted); min-width: 140px; flex-shrink: 0; font-size: 12px }
.quote-opt-val { color: var(--ink); font-weight: 500 }
.quote-item-footer {
  display: flex;
  gap: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.quote-item-footer b { color: var(--ink); font-weight: 600; margin-left: 4px }
.quote-item-footer b.good { color: var(--quote-good) }
.quote-item-footer b.bad { color: var(--quote-bad) }
.quote-price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px }
.quote-price-cell {
  text-align: center;
  padding: 8px 4px;
  background: var(--surface-highlight);
  border-radius: var(--radius-sm);
}
.quote-price-label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px }
.quote-price-value { display: block; font-size: 14px; font-weight: 600 }
.quote-summary-card {
  background: linear-gradient(180deg, rgba(238,245,255,.94), rgba(255,255,255,.96));
  border: 1px solid rgba(11,109,255,.22);
  border-radius: 18px;
  padding: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.quote-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.quote-summary-cell {
  text-align: center;
  padding: 12px 10px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(210,219,232,.88);
  border-radius: 14px;
}
.quote-summary-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; letter-spacing: .02em }
.quote-summary-value { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.01em }
.quote-summary-value.warn { color: var(--quote-bad) }
.quote-logistics-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.quote-logistics-row { display: flex; align-items: center; gap: 10px }
.quote-logistics-label { font-size: 13px; color: var(--muted); white-space: nowrap }
.quote-logistics-input {
  width: 130px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--surface);
  transition: border-color .15s;
}
.quote-logistics-input:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: var(--focus-ring);
}
.quote-net-result {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(210,219,232,.88);
  border-radius: 12px;
}
.quote-net-profit { font-size: 18px; font-weight: 800; letter-spacing: -0.01em }
.quote-profit-warning {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--notice-warn-bg);
  color: var(--notice-warn-fg);
  border: 1px solid var(--notice-warn-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.item-row-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 8px 0 0;
}
.item-option-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-secondary);
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
}
.item-option-row b { color: var(--muted); font-weight: 700; overflow-wrap: anywhere }
.item-option-row span { min-width: 0; overflow-wrap: anywhere }

/* ===== Cost Grid ===== */
.cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.cost-grid div { border: 1px solid var(--line-light); border-radius: var(--radius-md); background: var(--card); padding: 10px }
.cost-grid b { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px }
.cost-grid span { display: block; margin-top: 4px; font-weight: 700; color: var(--brand2) }

/* ===== Financial Edit ===== */
.financial-edit {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 14px;
}
.financial-edit h4 { margin: 0 0 10px; color: var(--ink); font-size: 14px; font-weight: 600 }

/* ===== Stat Cards ===== */
.stat-card {
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  padding: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.stat-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.stat-label { display: block; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase }
.stat-value { display: block; margin-top: 8px; color: var(--ink); font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em }

/* ===== Inline Detail ===== */
.order-inline-detail-row td { background: var(--surface-alt) }
.order-inline-detail { padding: 8px 2px }
.inline-logistics { display: flex; gap: 8px; align-items: center }
.inline-logistics input { max-width: 180px }
.row-action-select {
  min-width: 96px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  background: rgba(255,255,255,.88);
  font-size: 13px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.row-action-select:hover {
  border-color: var(--border-hover);
  background: rgba(255,255,255,.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(15,23,42,.05);
}
.row-action-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,122,255,.15);
}
.row-action-select:active {
  transform: scale(.98);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}

/* ===== Notify Panel ===== */
.notify-wrap { position: relative }
.notify-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 2px 8px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.15);
  transition: all .15s var(--ease);
}
.notify-btn:hover {
  background: rgba(255,255,255,.22);
  color: #fff;
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 4px 12px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.notify-btn:active {
  transform: translateY(0) scale(.94);
  background: rgba(255,255,255,.18);
}
.notify-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.3), 0 2px 8px rgba(0,0,0,.08);
  border-color: rgba(255,255,255,.4);
}
.notify-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #FF3B30;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid rgba(30,58,106,.88);
  box-shadow: 0 2px 6px rgba(255,59,48,.35);
  pointer-events: none;
  animation: notifyBadgeIn .25s var(--ease-out-quart);
}
@keyframes notifyBadgeIn {
  from { transform: scale(0); opacity: 0 }
  to { transform: scale(1); opacity: 1 }
}
@keyframes notifyPanelIn {
  from { opacity: 0; transform: translateY(-8px) scale(.98) }
  to { opacity: 1; transform: translateY(0) scale(1) }
}
.notify-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(400px, calc(100vw - 24px));
  max-height: min(500px, calc(100vh - 86px));
  overflow-y: auto;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: var(--radius-xl);
  box-shadow:
    0 20px 50px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
  z-index: 30;
  padding: 0;
  animation: notifyPanelIn .18s var(--ease-out-quart);
}
.notify-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.notify-panel-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.notify-panel-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-light);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0,122,255,.15);
}
.notify-section { padding: 8px 12px; border-bottom: 1px solid rgba(0,0,0,.04) }
.notify-section:last-child { border-bottom: none }
.notify-section-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  padding: 0 4px;
}
.notify-section-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.6);
}
.notify-section-dot.warn { background: var(--warn); box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 0 6px rgba(255,149,0,.3) }
.notify-section-dot.brand { background: var(--brand); box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 0 6px rgba(0,122,255,.3) }
.notify-section-dot.bad { background: var(--bad); box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 0 6px rgba(255,59,48,.3) }
.notify-section h4 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-label);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
}
.notify-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-width: 0;
  font-size: 13px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all .12s var(--ease);
  border: 1px solid transparent;
}
.notify-row:hover {
  background: rgba(0,122,255,.06);
  border-color: rgba(0,122,255,.08);
}
.notify-row:active { transform: scale(.99) }
.notify-row:not(:last-child) { margin-bottom: 2px }
.notify-row span:not(.notify-order-date):not(.notify-order-no) {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink-secondary);
  line-height: 1.4;
}
.notify-order-no {
  font-weight: 700;
  white-space: nowrap;
  color: var(--brand);
  font-size: 12px;
  letter-spacing: .01em;
}
.notify-order-date { color: var(--muted); font-size: 11px; margin-left: auto; white-space: nowrap; font-weight: 500 }
.notify-empty {
  padding: 36px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.notify-empty-icon {
  display: block;
  margin: 0 auto 10px;
  width: 36px;
  height: 36px;
  opacity: .25;
}
.notify-clear-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: rgba(0,122,255,.08);
  color: var(--brand);
  border: 1px solid rgba(0,122,255,.15);
  cursor: pointer;
  transition: all .12s var(--ease);
}
.notify-clear-btn:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(0,122,255,.25);
  transform: translateY(-1px);
}
.notify-clear-btn:active { transform: translateY(0) scale(.97) }
.reminder-tag {
  display: inline-block;
  background: rgba(255,149,0,.12);
  color: #C77C00;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  margin-left: 4px;
  font-weight: 600;
  border: 1px solid rgba(255,149,0,.2);
  letter-spacing: .01em;
}
.reminder-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line) }
.reminder-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
.reminder-section-header h4 { margin: 0 }
.reminder-status-active {
  font-size: 11px;
  font-weight: 600;
  color: var(--good);
  background: var(--good-bg);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.reminder-form { display: flex; flex-direction: column; gap: 8px }
.reminder-form textarea { resize: vertical; min-height: 60px }
.reminder-active { background: var(--warn); color: white; border-color: var(--warn) }

/* ===== Tax Rates ===== */
#taxRatesTable { min-width: 480px }
#taxRatesTable td { vertical-align: middle }
#taxRatesTable input { min-height: 34px; padding: 6px 10px }
.tax-code { text-transform: uppercase; font-weight: 600; text-align: center }
.tax-rate { text-align: right; font-variant-numeric: tabular-nums }

/* ===== Splice Calculator ===== */
.splice-page-card { padding: 22px }
.splice-page-title { align-items: flex-start }
.section-subtitle {
  margin: 4px 0 0;
  color: var(--muted, #64748b);
  font-size: 12px;
  line-height: 1.5;
}
.splice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr);
  gap: 16px;
  align-items: start;
}
.splice-panel {
  min-width: 0;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 16px;
}
.splice-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.splice-panel-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink) }
.splice-panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45 }
.splice-search-label {
  display: block;
  color: var(--text-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}
.splice-order-search { margin-top: 6px; min-width: 0 }
.splice-order-search input {
  width: 100%;
  height: 42px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-normal) var(--ease-out-quart), box-shadow var(--duration-normal) var(--ease-out-quart), background var(--duration-normal) var(--ease-out-quart);
}
.splice-order-search input:hover { border-color: var(--border-hover); background: rgba(255,255,255,.95) }
.splice-order-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,122,255,.15); background: rgba(255,255,255,.95) }
.splice-items-panel, .splice-result-panel { margin-top: 16px }
.splice-toolbar { align-items: center; gap: 10px }
.splice-toolbar .toolbar { margin-left: auto }
.splice-items-table { max-height: 300px }
.splice-items-table table, .splice-result-table table { min-width: 760px }
.splice-result-table { max-height: 360px }
.splice-items-table table th:first-child,
.splice-items-table table td:first-child,
.splice-result-table table th:first-child,
.splice-result-table table td:first-child {
  position: static;
  left: auto;
  z-index: auto;
  background: transparent;
}
.splice-manual-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px }
.splice-manual-grid .wide { grid-column: 1 / -1 }
.splice-actions { margin-top: 12px; justify-content: flex-start }
.splice-summary {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  padding: 12px;
  color: var(--ink);
}
.splice-summary.empty { color: var(--muted); border-style: dashed }
.splice-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.splice-summary-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 9px 10px;
  min-width: 0;
}
.splice-summary-item b {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.splice-summary-item span {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}
.splice-summary-note { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.45 }
.splice-item-check, #spliceCheckAll {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}
.splice-diagram-btn { margin: 8px 0 4px }

/* ===== Cutting Diagram ===== */
.cutting-diagram-modal-panel { max-width: 920px; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.15) }
.cutting-diagram-content { padding: 12px 0 }
.cutting-diagram-content:empty { display: none }
.cutting-diagram-figure {
  text-align: center;
  margin: 12px 0;
  padding: 8px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.cutting-diagram-figure .cutting-diagram {
  max-width: 100%;
  height: auto;
  border: none;
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cutting-diagram-figure .cutting-diagram:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.cutting-diagram-figure .cutting-diagram + .cutting-diagram { margin-top: 8px }
.cutting-diagram-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-label);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

/* ===== Delivery Screenshot ===== */
.delivery-screenshot-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line) }
.delivery-screenshot-header { margin-bottom: 8px }
.delivery-screenshot-header h4 { margin: 0; font-size: 13px; color: var(--muted) }
.delivery-screenshot-area { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; position: relative }
.delivery-screenshot-area.uploading { pointer-events: none; opacity: .7 }
.delivery-screenshot-preview { position: relative; display: inline-block; border-radius: 8px; overflow: hidden; border: 1px solid var(--line) }
.delivery-screenshot-preview img { display: block; max-width: 240px; max-height: 180px; cursor: pointer; object-fit: cover; transition: transform .2s, box-shadow .2s }
.delivery-screenshot-preview img:hover { transform: scale(1.03); box-shadow: 0 4px 16px rgba(0,0,0,.15) }
.delivery-screenshot-preview .screenshot-actions { position: absolute; top: 6px; right: 6px }
.delivery-screenshot-preview .btn { font-size: 10px; padding: 3px 8px; background: rgba(255,59,48,.88); backdrop-filter: blur(4px); border-color: transparent }
.delivery-screenshot-preview .btn:hover { background: rgba(255,59,48,1) }
.delivery-screenshot-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 220px;
  min-height: 100px;
  padding: 16px 20px;
  border: 2px dashed rgba(206,217,233,.8);
  border-radius: 10px;
  background: rgba(248,250,252,.6);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.delivery-screenshot-dropzone:hover { border-color: var(--brand); background: rgba(0,122,255,.04) }
.delivery-screenshot-dropzone.drag-over { border-color: var(--brand); background: rgba(0,122,255,.08); box-shadow: 0 0 0 4px rgba(0,122,255,.1) }
.delivery-screenshot-dropzone svg { color: var(--muted); opacity: .6 }
.delivery-screenshot-dropzone.drag-over svg { color: var(--brand); opacity: 1 }
.screenshot-browse-link { color: var(--brand); cursor: pointer; font-weight: 600 }
.screenshot-browse-link:hover { text-decoration: underline }
.screenshot-upload-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  z-index: 2;
}
.screenshot-upload-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(0,122,255,.2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* ===== Archived Products ===== */
.archived-products-list { display: flex; flex-direction: column; gap: 8px }
.archived-product-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--surface-alt); border-radius: 6px; border: 1px solid var(--line) }
.archived-product-info { display: flex; flex-direction: column; gap: 2px }
.archived-product-info strong { font-size: 13px }
.archived-product-info .muted { font-size: 11px; color: var(--muted) }

/* ===== Profit Page ===== */
.profit-order-search {
  position: relative;
  flex: 1 1 420px;
  min-width: min(100%, 360px);
  width: min(680px, 100%);
}
.profit-order-search input {
  height: 46px;
  padding: 10px 14px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  border: 1.5px solid rgba(203,213,225,.92);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    0 1px 2px rgba(15,23,42,.04);
  transition:
    border-color var(--duration-normal) var(--ease-out-quart),
    box-shadow var(--duration-normal) var(--ease-out-quart),
    background var(--duration-normal) var(--ease-out-quart);
}
.profit-order-search input:hover {
  border-color: var(--border-hover);
  background: rgba(255,255,255,.96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 6px 18px rgba(15,23,42,.07);
}
.profit-order-search input:focus {
  border-color: var(--brand);
  box-shadow:
    0 0 0 4px rgba(0,122,255,.12),
    0 12px 28px rgba(0,122,255,.12),
    inset 0 1px 0 rgba(255,255,255,.84);
  background: rgba(255,255,255,.98);
}
.profit-order-search select.hidden { display: none !important }
.profit-order-results {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid rgba(214,223,237,.95);
  border-radius: 18px;
  background: rgba(250,252,255,.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 22px 54px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.82);
  padding: 8px;
  animation: dropdownIn .18s var(--ease-out-quart);
}
.profit-order-option {
  width: 100%;
  border: 1px solid transparent;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  justify-items: start;
  align-items: start;
  gap: 4px;
  min-height: auto;
  text-align: left;
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
  white-space: normal;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68);
  transition:
    background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}
.profit-order-option:hover, .profit-order-option:focus {
  background: rgba(240,247,255,.96);
  border-color: rgba(0,122,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 8px 18px rgba(15,23,42,.06);
  outline: none;
}
.profit-order-option:active { transform: scale(.99) }
.profit-order-option span, .profit-order-option small {
  display: block;
  width: 100%;
  text-align: left;
  line-height: 1.35;
}
.profit-order-option span {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.profit-order-option small {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.profit-order-empty {
  color: var(--muted);
  padding: 18px 16px;
  text-align: center;
  font-size: 13px;
  border: 1px dashed rgba(203,213,225,.92);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
}
@supports not ((backdrop-filter: blur(20px))) {
  .profit-order-results { background: rgba(255,255,255,.97) }
}
.profit-adjust-form .form-grid.compact { gap: 10px }
.profit-adjust-form .actions { margin-top: 12px }
#profitItemsCard { margin-top: 0 }

/* ===== Tools Dropdown ===== */
.tools-dropdown { position: relative }
.tools-dropdown-btn {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .18s var(--ease);
}
.tools-dropdown-btn:hover { background: var(--surface-highlight); color: var(--ink) }
.topbar .tools-dropdown-btn { color: rgba(255,255,255,.5) }
.topbar .tools-dropdown-btn:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
}
.tools-dropdown-menu {
  position: fixed;
  top: auto;
  left: auto;
  min-width: 160px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: var(--radius-lg);
  box-shadow:
    0 20px 50px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  z-index: 100;
  padding: 6px;
  overflow: hidden;
  animation: dropdownIn .18s var(--ease-out-quart);
  transform-origin: top center;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: scaleY(.95) translateY(-4px) }
  to { opacity: 1; transform: scaleY(1) translateY(0) }
}
.tools-dropdown-menu button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  transition: all .12s var(--ease);
}
.tools-dropdown-menu button:hover {
  background: rgba(0,122,255,.08);
}
.tools-dropdown-menu button:active {
  transform: scale(.98);
}

/* ===== Analytics Dashboard ===== */
.analytics-card { display: grid; gap: 20px }
.analytics-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px;
  border: 1px solid rgba(214,223,237,.92);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,250,255,.86));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  margin-bottom: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 16px 40px rgba(15,23,42,.08);
}
.analytics-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
  gap: 14px 16px;
  align-items: end;
}
.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.analytics-metric-card {
  position: relative;
  min-height: 110px;
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 20px;
  background: rgba(255,255,255,0.92);
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.02);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: all .2s cubic-bezier(.25,.1,.25,1);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  align-items: start;
}
.analytics-metric-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(circle, rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.analytics-metric-card > * { position: relative; z-index: 1; }
.analytics-metric-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  border-color: rgba(203,213,225,0.9);
  transform: translateY(-1px);
}
.analytics-metric-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  grid-column: 1;
  grid-row: 1;
}
.analytics-metric-card b {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  grid-column: 1;
  grid-row: 2;
}
.analytics-metric-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  grid-column: 1;
  grid-row: 3;
}
.analytics-metric-card .metric-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  grid-column: 1;
  grid-row: 4;
}
.analytics-metric-card .metric-trend.up { color: #059669; background: rgba(5,150,105,.08); }
.analytics-metric-card .metric-trend.down { color: #DC2626; background: rgba(220,38,38,.08); }
.analytics-metric-card .metric-trend.flat { color: var(--muted); background: var(--surface-alt); }
/* Sparkline container */
.metric-sparkline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 40px;
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  opacity: 0.7;
}
.mini-area-chart { width: 100%; height: 100%; }
.mini-area-chart polyline { transition: stroke-width .15s ease; }
.analytics-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.analytics-panel {
  min-width: 0;
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 20px;
  background: rgba(255,255,255,0.92);
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.02);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: box-shadow .2s cubic-bezier(.25,.1,.25,1);
}
.analytics-panel:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.03);
}
.analytics-panel-wide { grid-row: span 1 }
.analytics-chart {
  min-height: 300px;
  display: flex;
  align-items: end;
  gap: 14px;
  overflow-x: auto;
  padding: 20px 12px 8px;
  position: relative;
  scrollbar-width: thin;
}
.analytics-chart::-webkit-scrollbar { height: 4px }
.analytics-chart::-webkit-scrollbar-track { background: transparent }
.analytics-chart::-webkit-scrollbar-thumb { background: var(--line-light); border-radius: 2px }
.trend-month {
  flex: 0 0 76px;
  display: grid;
  grid-template-rows: 260px auto;
  gap: 12px;
  text-align: center;
}
.trend-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 7px;
  height: 260px;
  border-bottom: 1px solid rgba(226,232,240,0.5);
  position: relative;
}
.trend-bars::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent calc(25% - 1px),
    rgba(226,232,240,0.3) calc(25% - 1px),
    rgba(226,232,240,0.3) 25%
  );
  pointer-events: none;
}
.trend-bar {
  width: 18px;
  min-height: 4px;
  border-radius: 6px 6px 2px 2px;
  transition: opacity .2s ease, transform .2s cubic-bezier(.25,.1,.25,1);
  position: relative;
  z-index: 1;
}
.trend-bars:hover .trend-bar { opacity: .55 }
.trend-bars:hover .trend-bar:hover { opacity: 1; transform: scaleY(1.03); transform-origin: bottom }
.trend-bar.income { background: linear-gradient(180deg, #2563EB, #1D4ED8) }
.trend-bar.cost { background: linear-gradient(180deg, #D97706, #B45309) }
.trend-bar.profit { background: linear-gradient(180deg, #059669, #047857) }
.trend-legend {
  display: flex;
  gap: 20px;
  padding: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid rgba(226,232,240,0.4);
  margin-top: 12px;
}
.trend-legend-item { display: flex; align-items: center; gap: 7px }
.trend-legend-color { display: inline-block; width: 14px; height: 14px; border-radius: 4px }
.trend-month b { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .01em }
.analytics-expense-chart, .analytics-channel-chart { display: grid; gap: 16px }
.expense-row, .channel-row { display: grid; gap: 8px }
.expense-row-head, .channel-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.expense-row-head span, .channel-row-head span { color: var(--ink); font-weight: 600 }
.expense-row-head b, .channel-row-head b { color: var(--ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums }
.expense-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(226,232,240,0.4);
}
.expense-track span { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .4s cubic-bezier(.25,.1,.25,1) }
.expense-row small, .channel-row small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums }
.analytics-sort-label { min-width: 150px }
.analytics-sort-label select {
  background-color: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.analytics-table-wrap {
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.92);
}
.analytics-table-wrap table { min-width: 980px }
.analytics-table-wrap td strong, .analytics-table-wrap td small { display: block }
.analytics-table-wrap td small { color: var(--muted); margin-top: 3px }
.analytics-table-wrap td { font-variant-numeric: tabular-nums }
.empty.analytics-chart,
.empty.analytics-expense-chart,
.empty.analytics-channel-chart {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  border: 1px dashed rgba(226,232,240,0.8);
  border-radius: 16px;
  background: rgba(255,255,255,0.5);
}

/* Channel Toggle */
.analytics-channel-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 10px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.analytics-channel-btn {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 7px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  transition:
    background var(--duration-normal) var(--ease-out-quart),
    color var(--duration-normal) var(--ease-out-quart),
    box-shadow var(--duration-normal) var(--ease-out-quart),
    transform var(--duration-fast) var(--ease);
}
.analytics-channel-btn:hover { background: rgba(255,255,255,.68); color: var(--ink) }
.analytics-channel-btn:active { transform: scale(.96) }
.analytics-channel-btn.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,122,255,.25);
}

/* Channel Section */
.channel-section {
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 20px;
  padding: 22px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  display: grid;
  gap: 18px;
}
.channel-section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226,232,240,0.6);
}
.channel-section .analytics-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.channel-section .product-analytics-panel {
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 20px;
  background: rgba(255,255,255,0.92);
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* ===== Analytics: Area Chart ===== */
.analytics-area-chart {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.analytics-area-chart svg {
  width: 100%;
  height: 100%;
}
.analytics-area-chart .area-fill {
  transition: opacity var(--duration-normal) var(--ease);
}
.analytics-area-chart .area-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.analytics-area-chart .area-dot {
  fill: var(--card);
  stroke-width: 2;
  transition: r var(--duration-fast) var(--ease);
}
.analytics-area-chart:hover .area-dot {
  r: 4;
}

/* ===== Analytics: Donut Chart ===== */
.analytics-donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 0;
}
.analytics-donut {
  position: relative;
  flex: 0 0 160px;
  width: 160px;
  height: 160px;
}
.analytics-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.analytics-donut .donut-segment {
  transition: opacity var(--duration-fast) var(--ease);
}
.analytics-donut:hover .donut-segment {
  opacity: .85;
}
.analytics-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.analytics-donut-center .donut-total {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.analytics-donut-center .donut-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.analytics-donut-legend {
  flex: 1;
  display: grid;
  gap: 8px;
}
.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.donut-legend-color {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.donut-legend-label {
  flex: 1;
  color: var(--ink);
}
.donut-legend-value {
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ===== Analytics: Sparkline ===== */
.sparkline {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 20px;
}
.sparkline svg {
  width: 100%;
  height: 100%;
}

/* ===== Analytics: Status Pill ===== */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.status-pill.good { color: var(--good); background: var(--good-bg); }
.status-pill.warn { color: var(--warn); background: var(--warn-bg); }
.status-pill.bad { color: var(--bad); background: var(--bad-bg); }

/* ===== Analytics: Tooltip ===== */
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--brand2);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease);
  z-index: 10;
  box-shadow: var(--shadow-md);
}
.chart-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border: 4px solid transparent;
  border-top-color: var(--brand2);
}

/* ===== Analytics: Time Range Selector ===== */
.analytics-time-range {
  display: inline-flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-self: end;
  padding: 4px;
  border: 1px solid rgba(214,223,237,.9);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    0 10px 22px rgba(15,23,42,.05);
}
.analytics-time-btn {
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  padding: 7px 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  position: relative;
  transition:
    background var(--duration-normal) var(--ease-out-quart),
    color var(--duration-normal) var(--ease-out-quart),
    box-shadow var(--duration-normal) var(--ease-out-quart),
    transform var(--duration-fast) var(--ease);
}
.analytics-time-btn:hover { background: rgba(255,255,255,.68); color: var(--ink) }
.analytics-time-btn:active { transform: scale(.96) }
.analytics-time-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,122,255,.14);
}
.analytics-time-btn.active {
  background: linear-gradient(180deg, #1f8bff, #007aff);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 10px 20px rgba(0,122,255,.22);
}

.analytics-view-tabs {
  display: flex;
  gap: 6px;
  background: rgba(0,0,0,.04);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
}
.analytics-view-btn {
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  padding: 8px 24px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  position: relative;
  transition:
    background var(--duration-normal) var(--ease-out-quart),
    color var(--duration-normal) var(--ease-out-quart),
    box-shadow var(--duration-normal) var(--ease-out-quart),
    transform var(--duration-fast) var(--ease);
}
.analytics-view-btn:hover { color: var(--ink) }
.analytics-view-btn:active { transform: scale(.96) }
.analytics-view-btn.active {
  background: #fff;
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 8px rgba(0,0,0,.1);
}
.analytics-view-btn[data-view="completed"].active {
  color: #28a745;
}
.analytics-view-btn[data-view="pending"].active {
  color: #e68600;
}

.analytics-provisional-hint {
  font-size: 12px;
  color: #ff9f0a;
  padding: 6px 12px;
  margin: 8px 0 0;
  background: rgba(255,159,10,.08);
  border-radius: 8px;
  font-weight: 500;
}

/* ===== Skeleton Loading ===== */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-alt) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  height: 96px;
  border-radius: 16px;
}
.skeleton-chart {
  height: 220px;
  border-radius: 16px;
}
.skeleton-row {
  height: 40px;
  margin-bottom: 8px;
  border-radius: 8px;
}

/* ===== Count-Up Animation ===== */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-count-up {
  animation: countUp var(--duration-slow) var(--ease) forwards;
}

/* ===== Analytics: Table Sortable ===== */
.analytics-table-wrap th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.analytics-table-wrap th.sortable::after {
  content: '\2195';
  margin-left: 4px;
  opacity: .3;
  font-size: 10px;
}
.analytics-table-wrap th.sortable.asc::after { content: '\2191'; opacity: .7; }
.analytics-table-wrap th.sortable.desc::after { content: '\2193'; opacity: .7; }
.analytics-table-wrap tbody tr {
  transition: background .12s ease;
}
.analytics-table-wrap tbody tr:hover {
  background: rgba(0,122,255,.03);
}

/* ===== UI Refinement Pass: ERP Apple Glass Approximation ===== */
:root {
  --ui-glass-panel: linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,249,253,.74));
  --ui-glass-panel-strong: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,253,.88));
  --ui-solid-panel: rgba(255,255,255,.94);
  --ui-glass-border: rgba(255,255,255,.68);
  --ui-data-border: rgba(210,219,232,.86);
  --ui-soft-shadow: 0 14px 36px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --ui-float-shadow: 0 24px 70px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.8);
}

.topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 64px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(210,219,232,.72);
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(238,244,252,.70)),
    rgba(255,255,255,.62);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 10px 34px rgba(15,23,42,.08);
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
}
.topbar::after {
  border-bottom-color: rgba(255,255,255,.46);
  background: linear-gradient(90deg, rgba(0,122,255,.08), transparent 22%, rgba(52,199,89,.05) 82%, transparent);
}
.topbar h1 {
  color: var(--ink);
  border-left-color: var(--brand);
  text-shadow: none;
}
.topbar nav,
.topbar .tab-nav {
  justify-content: center;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 18px;
  background: rgba(255,255,255,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 8px 24px rgba(15,23,42,.06);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.topbar nav > button,
.topbar .tab-nav > button,
.topbar .tools-dropdown-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 38px;
  border-radius: 14px;
  color: var(--ink-secondary);
  font-weight: 700;
  letter-spacing: 0;
  transition:
    background var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}
.topbar nav > button:hover,
.topbar .tab-nav > button:hover,
.topbar .tools-dropdown-btn:hover {
  color: var(--ink);
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 6px 18px rgba(15,23,42,.08);
  transform: translateY(-1px);
}
.topbar nav > button:active,
.topbar .tab-nav > button:active,
.topbar .tools-dropdown-btn:active {
  transform: translateY(0) scale(.98);
}
.topbar nav > button.active,
.topbar .tab-nav > button.active {
  color: #052b5f;
  background: rgba(255,255,255,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(0,122,255,.12),
    0 12px 26px rgba(0,122,255,.16);
}
.topbar nav > button.active::before,
.topbar .tab-nav > button.active::before {
  inset: -26%;
  z-index: -1;
  background:
    radial-gradient(circle at center, rgba(0,122,255,.22), rgba(0,122,255,.08) 42%, transparent 70%);
}
.topbar-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.tools-dropdown-menu,
.channel-switcher-menu {
  border: 1px solid var(--ui-glass-border);
  border-radius: 18px;
  background: rgba(252,253,255,.92);
  box-shadow: var(--ui-float-shadow);
  backdrop-filter: saturate(170%) blur(22px);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  padding: 8px;
}
.tools-dropdown-menu button,
.channel-switcher-menu button {
  border-radius: 12px;
  color: var(--ink);
}
.tools-dropdown-menu button:hover,
.channel-switcher-menu button:hover {
  background: rgba(0,122,255,.08);
  color: #075fcb;
}
.channel-switcher-btn {
  border-color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.62);
  color: var(--ink-secondary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 22px rgba(15,23,42,.06);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.channel-switcher-btn:hover {
  background: rgba(255,255,255,.88);
  color: var(--ink);
}
.topbar-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 8px 22px rgba(15,23,42,.08);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.topbar-logout-btn:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.54);
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 26px rgba(15,23,42,.1);
}
.topbar-logout-btn:active {
  transform: translateY(0) scale(.98);
}
.topbar-logout-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.15), 0 0 0 1px rgba(255,255,255,.7) inset;
}
.topbar-logout-btn svg {
  flex: 0 0 auto;
  color: rgba(255,159,159,.96);
}
.topbar-logout-btn span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

input,
select,
textarea {
  border-color: rgba(203,213,225,.9);
  background-color: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64), 0 1px 2px rgba(15,23,42,.03);
}
input:hover,
select:hover,
textarea:hover {
  background-color: rgba(255,255,255,.96);
  border-color: rgba(148,163,184,.76);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0,122,255,.14), inset 0 1px 0 rgba(255,255,255,.8);
}
select {
  border-radius: 12px;
  background-color: rgba(255,255,255,.9);
}
td input,
td select,
td textarea,
.analytics-table-wrap,
.orders-data-table table,
.detail-section-items .item-group-card,
.detail-section-items .order-item-module,
.order-production-cost-row {
  background-color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.period-bar,
.analytics-time-range,
.analytics-channel-toggle {
  border-color: rgba(214,223,237,.92);
  border-radius: 16px;
  background: rgba(255,255,255,.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 10px 26px rgba(15,23,42,.06);
  backdrop-filter: saturate(155%) blur(16px);
  -webkit-backdrop-filter: saturate(155%) blur(16px);
}
.period-btn,
.analytics-time-btn,
.analytics-channel-btn {
  border-radius: 12px;
  transition:
    background var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}
.period-btn:hover,
.analytics-time-btn:hover,
.analytics-channel-btn:hover {
  background: rgba(255,255,255,.9);
  color: var(--ink);
}
.period-btn.active,
.analytics-time-btn.active,
.analytics-channel-btn.active {
  color: #fff;
  background: linear-gradient(180deg, #238cff, #007aff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 10px 20px rgba(0,122,255,.22);
}

.notify-btn {
  width: 42px;
  height: 42px;
  border-color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.66);
  color: var(--ink-secondary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 8px 22px rgba(15,23,42,.08);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.notify-btn:hover {
  background: rgba(255,255,255,.92);
  color: var(--ink);
  border-color: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px rgba(15,23,42,.12);
}
.notify-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(0,122,255,.16), 0 8px 22px rgba(15,23,42,.08);
  border-color: rgba(0,122,255,.34);
}
.notify-badge {
  top: -4px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  line-height: 16px;
  border-radius: 999px;
  border-color: rgba(247,249,252,.96);
}
.notify-panel {
  width: min(400px, calc(100vw - 24px));
  border-color: var(--ui-glass-border);
  border-radius: 22px;
  background: rgba(252,253,255,.94);
  box-shadow: var(--ui-float-shadow);
  backdrop-filter: saturate(170%) blur(24px);
  -webkit-backdrop-filter: saturate(170%) blur(24px);
}
.notify-panel-header {
  border-bottom-color: rgba(210,219,232,.78);
  background: rgba(255,255,255,.64);
}
.notify-section {
  border-bottom-color: rgba(226,232,240,.72);
}
.notify-row {
  background: rgba(255,255,255,.76);
  border-color: transparent;
  border-radius: 14px;
}
.notify-row:hover {
  background: rgba(239,247,255,.94);
  border-color: rgba(0,122,255,.12);
}
.notify-order-no {
  color: #075fcb;
}
.notify-clear-btn {
  background: rgba(0,122,255,.08);
  color: #075fcb;
}

.modal:not(.hidden) {
  align-items: center;
  padding: 24px 16px;
}
.modal-backdrop {
  background: rgba(15,23,42,.34);
  backdrop-filter: saturate(130%) blur(10px);
  -webkit-backdrop-filter: saturate(130%) blur(10px);
}
.modal-panel {
  max-height: calc(100vh - 48px);
  border: 1px solid var(--ui-glass-border);
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--ui-float-shadow);
  backdrop-filter: saturate(170%) blur(28px);
  -webkit-backdrop-filter: saturate(170%) blur(28px);
}
.modal-header,
.modal-footer {
  border-color: rgba(210,219,232,.78);
  background: rgba(255,255,255,.64);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
}
.modal-header {
  padding: 18px 24px 16px;
}
.modal-body {
  background: rgba(248,250,252,.42);
}
.modal-close-btn {
  border-color: rgba(203,213,225,.78);
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 12px rgba(15,23,42,.06);
}
.modal-close-btn:hover {
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
}
#orderDetailModal .modal-panel,
.edit-order-modal-panel {
  border-radius: 26px;
  background: rgba(255,255,255,.92);
}
.modal-body .order-detail-stack .detail-section {
  border-color: rgba(210,219,232,.9);
  background: rgba(255,255,255,.78);
}
.modal-body .order-detail-stack .detail-grid > div,
.amount-summary-row {
  border-color: rgba(210,219,232,.9);
  background: #fff;
}
.amount-summary-row.strong {
  border-color: rgba(0,122,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(0,122,255,.07);
}

.analytics-card,
.channel-section {
  gap: 16px;
}
.analytics-metric-card,
.analytics-panel,
.channel-section,
.channel-section .product-analytics-panel {
  border-color: rgba(210,219,232,.86);
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--ui-soft-shadow);
  backdrop-filter: saturate(145%) blur(16px);
  -webkit-backdrop-filter: saturate(145%) blur(16px);
}
.analytics-metric-card:hover,
.analytics-panel:hover {
  border-color: rgba(148,163,184,.72);
  box-shadow: 0 16px 34px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.04);
}
.analytics-metric-card span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
.analytics-metric-card b,
.analytics-table-wrap td,
.expense-row-head b,
.channel-row-head b,
.donut-legend-value {
  font-variant-numeric: tabular-nums;
}
.analytics-chart {
  border-radius: 16px;
  background: rgba(255,255,255,.62);
}
.trend-bars {
  border-bottom-color: rgba(210,219,232,.86);
}
.expense-row,
.channel-row {
  padding: 10px 12px;
  border: 1px solid rgba(226,232,240,.74);
  border-radius: 14px;
  background: #fff;
}
.expense-track {
  background: rgba(226,232,240,.72);
}
.analytics-table-wrap {
  border-color: rgba(210,219,232,.86);
  border-radius: 18px;
  background: #fff;
}
.empty.analytics-chart,
.empty.analytics-expense-chart,
.empty.analytics-channel-chart {
  background: rgba(255,255,255,.82);
}

.profit-order-results {
  border-color: var(--ui-glass-border);
  background: rgba(252,253,255,.94);
  box-shadow: var(--ui-float-shadow);
}
.profit-order-option {
  background: #fff;
  border-color: rgba(226,232,240,.72);
}
.profit-order-option:hover,
.profit-order-option:focus {
  background: rgba(239,247,255,.96);
  border-color: rgba(0,122,255,.16);
}
.profit-order-empty {
  background: #fff;
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .topbar-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: flex-end;
  }
  .topbar nav,
  .topbar .tab-nav {
    grid-column: 1 / -1;
    justify-self: stretch;
    order: 3;
  }
  .channel-switcher-wrap {
    order: 2;
  }
  .topbar-logout-btn,
  .notify-wrap {
    order: 2;
  }
}

@media (max-width: 640px) {
  .modal:not(.hidden) {
    align-items: flex-start;
    padding: 10px;
  }
  .modal-panel {
    max-height: calc(100vh - 20px);
    border-radius: 20px;
  }
  .notify-panel {
    right: auto;
    left: 0;
  }
  .product-basics-grid,
  .product-import-options {
    grid-template-columns: 1fr;
  }
  .product-workbench-hero,
  .product-modal-body {
    padding-left: 18px;
    padding-right: 18px;
  }
  .product-modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .product-modal-footer .btn { width: 100% }
}

/* ===== Responsive Breakpoints ===== */
@media (max-width: 1180px) {
  .custom-options-layout,
  .order-info-layout.compact-order,
  .splice-layout {
    grid-template-columns: 1fr;
  }
  .option-quote-panel { position: static }
  .orders-filter-panel { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .orders-filter-panel .filter-field:first-child { grid-column: span 2 }
  .compact-order .order-main-panel .form-grid,
  .option-groups-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-workbench-layout,
  .product-import-options {
    grid-template-columns: 1fr;
  }
  .product-sidebar-card { position: static }
  .product-floating-toolbar-card { position: static }
  .product-floating-toolbar { grid-template-columns: 1fr; }
  .product-secondary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-filters,
  .analytics-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .analytics-time-range {
    grid-column: span 3;
    justify-self: start;
  }
  .analytics-grid,
  .channel-section .analytics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .topbar {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 16px;
  }
  main { padding: 14px }
  nav, .tab-nav { width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto }
  nav button, .tab-nav button { flex: 0 0 auto }
  .col-8, .col-7, .col-6, .col-5, .col-4 { grid-column: span 12 }
  .form-grid, .control-grid, .dynamic-options, .split,
  .custom-options-layout, .order-preview-layout, .product-editor .form-grid,
  .shopify-fetch, .order-info-layout, .order-info-layout.compact-order,
  .compact-order .order-main-panel .form-grid, .preview-controls,
  .option-groups-editor {
    grid-template-columns: 1fr;
  }
  .product-workbench-actions { justify-items: stretch }
  .product-primary-actions,
  .product-secondary-actions,
  .product-tertiary-actions { justify-content: stretch }
  .product-primary-actions .btn,
  .product-secondary-actions .btn,
  .product-tertiary-actions .btn { flex: 1 1 180px }
  .product-list-panel { max-height: none }
  .product-modal-panel,
  .product-import-modal-panel { width: min(100%, 100%) }
  .product-price-section-tools {
    width: 100%;
    justify-content: space-between;
  }
  .archived-product-item { grid-template-columns: 1fr; }
  .compact-order .order-main-panel .form-grid,
  .product-editor-title {
    grid-template-columns: 1fr;
  }
  .option-quote-panel { position: static }
  .product-data-tools { justify-content: flex-start }
  .product-data-tools label { min-width: unset; flex: 1 1 220px }
  .product-main-actions .btn { flex: 1 1 auto }
  label.wide, .wide { grid-column: span 1 }
  .metrics { grid-template-columns: 1fr }
  .orders-filter-panel { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .orders-search-field { grid-column: span 3 }
  .orders-filter-panel .filter-field:first-child { grid-column: span 3 }
  .analytics-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .analytics-time-range {
    grid-column: span 2;
    justify-self: stretch;
  }
}

@media (max-width: 760px) {
  .topbar { align-items: stretch }
  .topbar nav { justify-content: flex-start }
  .orders-data-table { border: 0; overflow: visible }
  .orders-data-table table,
  .orders-data-table thead,
  .orders-data-table tbody,
  .orders-data-table tr,
  .orders-data-table th,
  .orders-data-table td { display: block; width: 100% }
  .orders-data-table thead { display: none }
  .orders-data-table table { min-width: 0; border-spacing: 0 }
  .orders-data-table th:first-child,
  .orders-data-table td:first-child { position: static }
  .orders-data-table .order-group-header {
    border: 1px solid var(--line-light);
    border-radius: var(--radius-lg);
    background: var(--card);
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .orders-data-table .order-group-header td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-light);
  }
  .orders-data-table .order-group-header td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
  }
  .orders-data-table .order-group-header td:last-child { border-bottom: 0 }
  .orders-data-table .order-actions { justify-content: flex-start; min-width: 0 }
  .orders-data-table .order-item-row td { padding: 0 0 8px }
  .orders-data-table .order-item-detail-row {
    grid-template-columns: 1fr;
    margin: -4px 0 8px;
  }
  .orders-data-table .order-item-card { margin: -4px 0 8px }
  .orders-data-table .order-item-card-grid { grid-template-columns: 1fr }
  .orders-data-table .order-item-card-grid span.wide { grid-column: span 1 }
  .compact-order .order-main-panel .form-grid,
  .orders-filter-panel,
  .product-toolbar-main,
  .option-groups-editor,
  .input-row-4,
  .dynamic-options,
  .discount-row {
    grid-template-columns: 1fr;
  }
  .compact-order .order-main-panel .form-grid .wide { grid-column: auto }
  .product-data-tools label, .product-data-tools .btn { flex: 1 1 100% }
  .modal:not(.hidden) { padding: 10px }
  .modal-header { padding: 16px 16px 12px }
  .modal-body { padding: 16px }
  .modal-footer { padding: 12px 16px; flex-direction: column }
  .modal-footer .btn { width: 100% }
  .notify-wrap { align-self: flex-start }
  .notify-panel { left: 0; right: auto; width: calc(100vw - 20px) }
  .orders-filter-panel { grid-template-columns: 1fr 1fr; gap: 10px }
  .orders-search-field { grid-column: span 2 }
  .orders-filter-panel .filter-field:first-child { grid-column: span 2 }
  .orders-filter-panel label { display: flex; flex-direction: column; gap: 4px }
  .orders-filter-panel select { width: 100% }
  .analytics-filter-row { grid-template-columns: 1fr 1fr }
  .analytics-time-range {
    grid-column: span 2;
    justify-self: stretch;
  }
}

@media (max-width: 640px) {
  main { padding: 10px }
  .card { padding: 14px; border-radius: var(--radius-lg) }
  .topbar { padding: 12px }
  nav { border-radius: var(--radius-md); overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start }
  nav button { width: auto; flex: 0 0 auto }
  .btn { width: auto; max-width: 100%; white-space: normal }
  .actions .btn { flex: 1 1 100% }
  .actions, .toolbar, .product-data-tools, .product-main-actions { width: 100%; justify-content: flex-start }
  h1 { font-size: 16px }
  table { min-width: 680px }
  .section-title { align-items: flex-start; flex-direction: column }
  .btn, .file-pick { min-height: 34px }
  .custom-options-form { padding: 12px }
  .splice-page-card { padding: 14px }
  .splice-panel { padding: 12px }
  .splice-panel-head { flex-direction: column }
  .splice-toolbar { align-items: flex-start }
  .splice-toolbar .toolbar { margin-left: 0 }
  .splice-manual-grid, .splice-summary-grid { grid-template-columns: 1fr }
  .quote-modal-panel { max-width: 100% }
  .quote-modal-content { max-height: none }
  .quote-modal-body { padding: 16px }
  .quote-overview-strip { grid-template-columns: repeat(2, 1fr) }
  .quote-item-card { padding: 14px }
  .quote-item-header { flex-direction: column; gap: 6px }
  .quote-item-price-usd { font-size: 16px }
  .quote-opt-row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 5px 8px }
  .quote-opt-key { min-width: auto }
  .quote-item-footer { flex-wrap: wrap; gap: 12px }
  .quote-summary-grid { grid-template-columns: repeat(2, 1fr); gap: 10px }
  .quote-summary-value { font-size: 15px }
  .quote-logistics-section { flex-direction: column; align-items: stretch; gap: 10px }
  .quote-logistics-row { justify-content: space-between }
  .quote-logistics-input { width: 100%; flex: 1 }
  .quote-net-result { justify-content: space-between; margin-left: 0 }
  .option-quote-stats { grid-template-columns: 1fr }
  .orders-bulk-bar { flex-direction: column; align-items: stretch; gap: 6px }
  .orders-bulk-bar .btn { width: 100% }
  .orders-pager { flex-wrap: wrap; gap: 8px }
  .order-group-header td { font-size: 12px }
  .order-item-card-grid { gap: 4px }
  .order-item-card-grid span { font-size: 12px }
  .orders-filter-panel { grid-template-columns: 1fr }
  .orders-search-field,
  .orders-filter-panel .filter-field:first-child { grid-column: span 1 }
  .analytics-filter-row, .analytics-summary-grid { grid-template-columns: 1fr }
  .analytics-time-range { grid-column: span 1 }
  .analytics-chart { min-height: 240px }
  .analytics-area-chart { height: 180px }
  .analytics-donut-wrap { flex-direction: column; align-items: center }
  .trend-month { grid-template-rows: 200px auto }
  .trend-bars { height: 200px }
  .analytics-metric-card { min-height: 90px; padding: 14px }
  .analytics-metric-card b { font-size: 22px }
  .metric-sparkline { display: none }
  .profit-order-search { min-width: 100%; width: 100% }
}

@media (max-width: 480px) {
  .topbar h1 { font-size: 15px }
  .card { padding: 10px; border-radius: var(--radius-md) }
  .section-title { flex-direction: column; align-items: flex-start; gap: 8px }
  .metrics { grid-template-columns: 1fr }
  .detail-grid { grid-template-columns: 1fr }
  .cost-grid { grid-template-columns: 1fr }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .topbar, .card, .modal-panel, .modal-header, .modal-footer, .modal-close-btn,
  .notify-panel, .tools-dropdown-menu, .order-action-menu,
  .orders-filter-panel, .analytics-filters, .analytics-metric-card, .analytics-panel,
  .channel-section, nav, .tab-nav, .btn.secondary, .period-bar, .order-date-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ===== Mobile: Reduce Blur for Performance ===== */
@media (max-width: 760px) {
  .card, .modal-panel, .notify-panel, .tools-dropdown-menu, .order-action-menu,
  .profit-order-results, select, .filter-field select {
    backdrop-filter: saturate(120%) blur(12px);
    -webkit-backdrop-filter: saturate(120%) blur(12px);
  }
  .analytics-metric-card, .analytics-panel, .channel-section, .period-bar, .order-date-panel {
    backdrop-filter: saturate(120%) blur(10px);
    -webkit-backdrop-filter: saturate(120%) blur(10px);
  }
  .orders-filter-panel, .analytics-filters {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,.95);
  }
  nav, .tab-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  select, .filter-field select, .profit-order-search input, .splice-order-search input {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,.95);
  }
}

/* ===== Fallback for no backdrop-filter support ===== */
@supports not (backdrop-filter: blur(1px)) {
  .card { background: rgba(255,255,255,.95) }
  .modal-panel { background: rgba(255,255,255,.97) }
  .modal-header, .modal-footer { background: rgba(255,255,255,.85); backdrop-filter: none; -webkit-backdrop-filter: none }
  .modal-close-btn { background: rgba(255,255,255,.9); backdrop-filter: none; -webkit-backdrop-filter: none }
  .item-group-card, .modal-body .detail-grid > div { background: rgba(255,255,255,.9); backdrop-filter: none; -webkit-backdrop-filter: none }
  .notify-panel { background: rgba(255,255,255,.97) }
  .tools-dropdown-menu { background: rgba(255,255,255,.97) }
  .order-action-menu { background: rgba(255,255,255,.97) }
  .orders-filter-panel { background: rgba(255,255,255,.95) }
  .analytics-filters { background: rgba(255,255,255,.95) }
  .analytics-metric-card { background: rgba(255,255,255,.95) }
  .analytics-panel { background: rgba(255,255,255,.95) }
  .channel-section { background: rgba(255,255,255,.95) }
  .btn.secondary { background: rgba(255,255,255,.95) }
  .profit-order-results { background: rgba(255,255,255,.97) }
  select, .filter-field select { background: rgba(255,255,255,.95) }
  .profit-order-search input, .splice-order-search input { background: rgba(255,255,255,.95) }
  .period-bar { background: rgba(255,255,255,.95) }
  .order-date-panel { background: rgba(255,255,255,.95) }
  input[type="date"] { background: rgba(255,255,255,.95); backdrop-filter: none; -webkit-backdrop-filter: none }
}

/* ===== Amazon Channel — uses same theme as Shopify ===== */

/* Auth Profile + User Menu */
.account-dock {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 70;
  pointer-events: none;
}
.account-dock-shell {
  display: grid;
  gap: 10px;
  min-width: 236px;
  padding: 12px;
  border-radius: 24px;
  border: 1px solid rgba(210,219,232,.84);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,248,253,.84));
  box-shadow: 0 18px 44px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: saturate(165%) blur(20px);
  -webkit-backdrop-filter: saturate(165%) blur(20px);
  pointer-events: auto;
}
.account-dock-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.user-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}
.user-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(203,213,225,.9);
  background: rgba(255,255,255,.92);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 18px rgba(15,23,42,.06);
}
.user-menu-btn:hover {
  background: rgba(255,255,255,.98);
  border-color: rgba(148,163,184,.72);
  transform: translateY(-1px);
}
.user-menu-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,122,255,.14), inset 0 1px 0 rgba(255,255,255,.92);
}
.user-menu-button-copy {
  display: grid;
  gap: 3px;
  text-align: left;
  min-width: 0;
  flex: 1 1 auto;
}
.user-menu-button-copy strong {
  font-size: 14px;
  font-weight: 700;
  color: #132034;
}
.user-menu-button-copy small {
  font-size: 12px;
  color: var(--muted);
}
.user-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(86,140,255,.16), rgba(31,93,215,.18));
  border: 1px solid rgba(86,140,255,.18);
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
}
.user-menu-panel {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  width: min(280px, calc(100vw - 32px));
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  color: #111827;
  z-index: 80;
}
.user-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 8px;
}
.user-menu-header .user-menu-avatar {
  width: 36px;
  height: 36px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 10px;
}
.user-menu-meta {
  display: grid;
  gap: 1px;
}
.user-menu-meta strong {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}
.user-menu-meta span {
  font-size: 12px;
  color: #6b7280;
}
.user-menu-info,
.user-menu-section {
  display: grid;
  gap: 2px;
  padding: 4px;
}
.user-menu-info span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  font-size: 13px;
  color: #6b7280;
  border-radius: 6px;
}
.user-menu-info b {
  color: #374151;
  font-weight: 600;
  font-size: 13px;
  min-width: 50px;
}
.user-menu-section-title {
  font-size: 12px;
  color: #9ca3af;
  padding: 8px 8px 4px;
  font-weight: 500;
}
.user-menu-action-group {
  display: grid;
  gap: 1px;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background .1s ease;
  cursor: pointer;
}
.user-menu-item:hover {
  background: #f3f4f6;
}
.user-menu-item.active {
  background: #eff6ff;
  color: #2563eb;
}
.user-menu-item small {
  color: #9ca3af;
  font-size: 12px;
}
.user-menu-item.danger {
  color: #ef4444;
  background: transparent;
}
.user-menu-item.danger:hover {
  background: #fef2f2;
}
.user-menu-item svg {
  width: 16px;
  height: 16px;
  color: #9ca3af;
  flex-shrink: 0;
}
.user-menu-shortcut {
  margin-left: auto;
  font-size: 12px;
  color: #9ca3af;
  font-family: ui-monospace, monospace;
}
.profile-modal-panel {
  width: min(100%, 760px);
}
.profile-modal-body {
  display: grid;
  gap: 16px;
}
.profile-summary-card,
.profile-password-card {
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.92);
  background: rgba(248,250,252,.96);
  padding: 16px;
}
.profile-summary-copy {
  display: grid;
  gap: 4px;
}
.profile-summary-copy strong {
  font-size: 18px;
  color: #132034;
}
.profile-summary-copy span,
.profile-section-head p {
  font-size: 12px;
  color: var(--muted);
}
.profile-section-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}
.profile-section-head h4 {
  margin: 0;
  font-size: 14px;
  color: #162132;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.profile-field {
  display: grid;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #243649;
}
.profile-field.wide {
  grid-column: 1 / -1;
}
.profile-field input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(207,218,232,.92);
  background: rgba(255,255,255,.98);
  color: #132034;
}
.profile-field input:focus {
  outline: none;
  border-color: rgba(86,140,255,.66);
  box-shadow: 0 0 0 4px rgba(86,140,255,.14);
}
.profile-field input:disabled {
  color: rgba(36,54,73,.76);
  background: rgba(244,247,250,.98);
}
.profile-modal-footer {
  justify-content: space-between;
}
@media (max-width: 760px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .account-dock {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  .account-dock-shell,
  .user-menu-wrap,
  .user-menu-btn {
    width: 100%;
  }
  .user-menu-panel {
    width: 100%;
    left: 0;
    right: auto;
  }
  .profile-modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* ===== UI Refinement Pass: Filters + Date + Search Dropdowns ===== */
.orders-filter-panel,
.analytics-filters {
  gap: 14px 16px;
  padding: 18px;
  border-color: rgba(206,217,233,.94);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,249,255,.86));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 18px 38px rgba(15,23,42,.08);
}
.orders-filter-panel::after,
.analytics-filters::after {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.88) 20%, rgba(207,218,232,.44) 50%, rgba(255,255,255,.88) 80%, rgba(255,255,255,0));
  pointer-events: none;
}
.orders-filter-panel:focus-within,
.analytics-filters:focus-within {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 18px 38px rgba(15,23,42,.08),
    0 0 0 2px rgba(0,122,255,.10),
    0 10px 28px rgba(0,122,255,.08);
}
.orders-filter-panel .filter-field,
.analytics-filters .filter-field {
  display: grid;
  align-self: stretch;
}
.filter-field label {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #53657c;
  text-transform: uppercase;
}
.filter-field input,
.filter-field select,
select {
  min-height: 44px;
  border-radius: 14px;
  border-color: rgba(206,217,233,.96);
  background-color: rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 1px 2px rgba(15,23,42,.04);
}
.filter-field input,
.filter-field select {
  padding-top: 10px;
  padding-bottom: 10px;
}
.filter-field input:hover,
.filter-field select:hover,
select:hover {
  border-color: rgba(151,166,186,.82);
  background-color: rgba(255,255,255,.97);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 18px rgba(15,23,42,.06);
}
.filter-field input:focus,
.filter-field select:focus,
select:focus {
  box-shadow:
    0 0 0 4px rgba(0,122,255,.14),
    0 14px 30px rgba(0,122,255,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.filter-field.has-value input,
.filter-field.has-value select {
  border-color: rgba(0,122,255,.32);
  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(243,248,255,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 0 0 1px rgba(0,122,255,.06),
    0 4px 12px rgba(0,122,255,.06);
}
.filter-clear {
  right: 10px;
  bottom: 9px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  background: rgba(148,163,184,.16);
}
.filter-field input[type=search] {
  padding-left: 40px;
}
.filter-search-icon {
  left: 14px;
  bottom: 14px;
}
input[type="date"],
.filter-field input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  min-height: 44px;
  border: 1.5px solid rgba(206,217,233,.96);
  border-radius: 14px;
  background-color: rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 1px 2px rgba(15,23,42,.04);
  padding: 10px 40px 10px 12px;
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
input[type="date"]:hover {
  border-color: rgba(151,166,186,.82);
  background-color: rgba(255,255,255,.97);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 18px rgba(15,23,42,.06);
}
input[type="date"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow:
    0 0 0 4px rgba(0,122,255,.14),
    0 14px 30px rgba(0,122,255,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
}
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1;
}
.period-bar,
.analytics-time-range,
.analytics-channel-toggle {
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(214,223,237,.94);
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 12px 24px rgba(15,23,42,.06);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.period-btn,
.analytics-time-btn,
.analytics-channel-btn {
  min-height: 36px;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
}
.period-btn:hover,
.analytics-time-btn:hover,
.analytics-channel-btn:hover {
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}
.period-btn:focus-visible,
.analytics-time-btn:focus-visible,
.analytics-channel-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0,122,255,.14),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.period-btn.active,
.analytics-time-btn.active,
.analytics-channel-btn.active {
  background: linear-gradient(180deg, #2790ff, #007aff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    0 10px 20px rgba(0,122,255,.22);
}
.analytics-filters {
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(200px, 1.2fr) auto;
}
.analytics-time-range {
  justify-self: end;
}
.profit-order-search,
.splice-order-search {
  position: relative;
}
.profit-order-search::before,
.splice-order-search::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 15px;
  height: 15px;
  border: 1.9px solid rgba(123,138,159,.92);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.profit-order-search::after,
.splice-order-search::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 26px;
  width: 7px;
  height: 1.9px;
  border-radius: 999px;
  background: rgba(123,138,159,.92);
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
  z-index: 1;
}
.profit-order-search input,
.splice-order-search input {
  min-height: 46px;
  padding: 11px 14px 11px 40px;
  border-radius: 15px;
  border-color: rgba(206,217,233,.96);
  background: rgba(255,255,255,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 4px 14px rgba(15,23,42,.05);
}
.profit-order-search:focus-within::before,
.splice-order-search:focus-within::before,
.profit-order-search:focus-within::after,
.splice-order-search:focus-within::after {
  border-color: rgba(0,122,255,.9);
  background: rgba(0,122,255,.9);
}
.profit-order-results {
  top: calc(100% + 10px);
  max-height: 360px;
  border-color: rgba(206,217,233,.96);
  border-radius: 20px;
  background: rgba(249,251,255,.94);
  box-shadow:
    0 24px 54px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.86);
  padding: 8px;
}
.profit-order-results::-webkit-scrollbar {
  width: 8px;
}
.profit-order-results::-webkit-scrollbar-track {
  background: transparent;
}
.profit-order-results::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.44);
  border-radius: 999px;
}
.profit-order-option {
  gap: 5px;
  padding: 12px 13px;
  border-radius: 14px;
  border-color: rgba(255,255,255,0);
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.profit-order-option:hover,
.profit-order-option:focus {
  background: linear-gradient(180deg, rgba(245,249,255,.98), rgba(236,245,255,.96));
  border-color: rgba(0,122,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 10px 24px rgba(15,23,42,.08);
}
.profit-order-option span {
  font-size: 13px;
  line-height: 1.4;
}
.profit-order-option small {
  color: #67788f;
  line-height: 1.45;
}
.profit-order-empty {
  padding: 20px 18px;
  border-radius: 14px;
  border-style: solid;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,249,253,.74));
}

@media (max-width: 1180px) {
  .orders-filter-panel {
    grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(150px, 1fr));
  }
  .orders-search-field {
    grid-column: span 2;
  }
  .analytics-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .analytics-time-range {
    grid-column: span 3;
    justify-self: start;
  }
}

@media (max-width: 980px) {
  .orders-filter-panel {
    grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, 1fr));
  }
  .orders-search-field,
  .orders-filter-panel .filter-field:first-child {
    grid-column: span 3;
  }
}

@media (max-width: 760px) {
  .orders-filter-panel,
  .analytics-filters {
    padding: 15px;
  }
  .orders-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .orders-search-field,
  .orders-filter-panel .filter-field:first-child {
    grid-column: span 2;
  }
  .analytics-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .analytics-time-range {
    grid-column: span 2;
    width: 100%;
    justify-self: stretch;
  }
  .profit-order-results {
    max-height: 320px;
  }
}

@media (max-width: 640px) {
  .orders-filter-panel,
  .analytics-filters {
    border-radius: 18px;
    padding: 13px;
  }
  .orders-filter-panel,
  .analytics-filters {
    grid-template-columns: 1fr;
  }
  .orders-search-field,
  .orders-filter-panel .filter-field:first-child,
  .analytics-time-range {
    grid-column: span 1;
  }
  .period-bar,
  .analytics-time-range,
  .analytics-channel-toggle {
    width: 100%;
    justify-content: flex-start;
  }
  .profit-order-search,
  .splice-order-search {
    width: 100%;
  }
}

/* ===== Production Board ===== */
.production-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.production-board-card {
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  padding: 18px;
  cursor: pointer;
  transition: all .2s ease;
}
.production-board-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.production-board-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.production-board-no { font-size: 15px; font-weight: 700; color: var(--ink); }
.production-board-date { font-size: 12px; color: var(--muted); }
.production-board-customer { font-size: 13px; color: var(--ink-secondary); margin-bottom: 12px; }
.production-board-items { display: flex; flex-direction: column; gap: 8px; }
.production-board-item { padding: 10px 12px; background: var(--surface); border-radius: 10px; }
.production-board-item-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.production-board-item-specs { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.production-board-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-light); }
.production-board-photo-count { font-size: 12px; color: var(--muted); }

/* ===== Dark Mode ===== */
[data-theme="dark"] {
  --ink: #f1f5f9;
  --ink-secondary: #94a3b8;
  --muted: #64748b;
  --card: #1e293b;
  --surface: #0f172a;
  --surface-alt: #1e293b;
  --surface-highlight: #334155;
  --surface-info: #1e293b;
  --line: #334155;
  --line-light: #1e293b;
  --good: #34d399;
  --bad: #f87171;
  --brand: #818cf8;
  --brand2: #6366f1;
  --primary: #818cf8;
  --text-label: #94a3b8;
}
[data-theme="dark"] body { background: #0f172a; color: #f1f5f9; }
[data-theme="dark"] .topbar { background: #1e293b; border-color: #334155; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
[data-theme="dark"] .topbar::after { border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] .topbar h1 { color: #f1f5f9; }
[data-theme="dark"] .topbar nav button { color: #94a3b8; }
[data-theme="dark"] .topbar nav button:hover { color: #f1f5f9; background: #334155; }
[data-theme="dark"] .topbar nav button.active { color: #818cf8; background: rgba(129,140,248,.15); }
[data-theme="dark"] .card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .card .section-title h2,
[data-theme="dark"] .card .section-title h3 { color: #f1f5f9; }
[data-theme="dark"] .btn.secondary { background: #334155; color: #94a3b8; border-color: #475569; }
[data-theme="dark"] .btn.secondary:hover { background: #475569; color: #f1f5f9; }
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129,140,248,.25);
}
[data-theme="dark"] .table-wrap { border-color: #334155; }
[data-theme="dark"] .table-wrap th { background: #1e293b; color: #94a3b8; }
[data-theme="dark"] .table-wrap td { border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .table-wrap tr:hover td { background: #1e293b; }
[data-theme="dark"] label { color: #94a3b8; }
[data-theme="dark"] .analytics-card { background: transparent; }
[data-theme="dark"] .analytics-filters { background: rgba(30,41,59,.85); border-color: #334155; }
[data-theme="dark"] .analytics-metric-card { background: rgba(30,41,59,.85); border-color: #334155; }
[data-theme="dark"] .analytics-panel { background: rgba(30,41,59,.85); border-color: #334155; }
[data-theme="dark"] .analytics-table-wrap { background: rgba(30,41,59,.85); border-color: #334155; }
[data-theme="dark"] .modal-panel { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .modal-header { background: rgba(30,41,59,.9); border-color: #334155; }
[data-theme="dark"] .modal-body { color: #f1f5f9; }
[data-theme="dark"] .toast { background: #1e293b; color: #f1f5f9; border-color: #334155; }
[data-theme="dark"] .notify-panel { background: rgba(30,41,59,.92); border-color: #334155; }
[data-theme="dark"] .notify-row { color: #f1f5f9; }
[data-theme="dark"] .notify-row:hover { background: rgba(129,140,248,.1); }
[data-theme="dark"] .detail-section-title h4 { color: #f1f5f9; }
[data-theme="dark"] .expense-track { background: #334155; }
[data-theme="dark"] .trend-bars { border-color: #334155; }
[data-theme="dark"] .trend-legend { border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .analytics-metric-card span { color: #94a3b8; }
[data-theme="dark"] .analytics-metric-card b { color: #f1f5f9; }
[data-theme="dark"] .analytics-metric-card small { color: #64748b; }
[data-theme="dark"] .analytics-metric-card .metric-trend.flat { background: #334155; }
[data-theme="dark"] .status-pill { border-color: #334155; }
[data-theme="dark"] .logistics-kpi { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .logistics-kpi span { color: #94a3b8; }
[data-theme="dark"] .logistics-kpi b { color: #f1f5f9; }
[data-theme="dark"] .quote-opt-row { background: #1e293b; }
[data-theme="dark"] .quote-opt-key { color: #94a3b8; }
[data-theme="dark"] .quote-opt-val { color: #f1f5f9; }
[data-theme="dark"] .detail-value { color: #f1f5f9; }
[data-theme="dark"] .detail-grid b { color: #94a3b8; }
[data-theme="dark"] .detail-grid span { color: #f1f5f9; }
[data-theme="dark"] .production-board-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .production-board-card:hover { border-color: #818cf8; }
[data-theme="dark"] .production-board-no { color: #f1f5f9; }
[data-theme="dark"] .production-board-customer { color: #94a3b8; }
[data-theme="dark"] .production-board-item { background: #0f172a; }
[data-theme="dark"] .production-board-item-name { color: #f1f5f9; }
[data-theme="dark"] .production-board-footer { border-color: #334155; }
/* Form & UI elements */
[data-theme="dark"] .form-grid label { color: #94a3b8; }
[data-theme="dark"] .form-grid label .detail-value,
[data-theme="dark"] .form-grid label span { color: #f1f5f9; }
[data-theme="dark"] .section-title h2,
[data-theme="dark"] .section-title h3 { color: #f1f5f9; }
[data-theme="dark"] .card-header { border-color: #334155; }
[data-theme="dark"] .card-content { color: #f1f5f9; }
[data-theme="dark"] .order-info-layout { border-color: #334155; }
[data-theme="dark"] .info-panel { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .info-panel h3 { color: #f1f5f9; }
[data-theme="dark"] .custom-options-layout { border-color: #334155; }
[data-theme="dark"] .dynamic-options select { background: #1e293b; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .option-quote-panel { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .option-quote-head h3 { color: #f1f5f9; }
[data-theme="dark"] .option-quote-meta { color: #94a3b8; }
[data-theme="dark"] .option-quote-stat-label { color: #94a3b8; }
[data-theme="dark"] .option-quote-stat-value { color: #f1f5f9; }
[data-theme="dark"] .option-quote-row b { color: #f1f5f9; }
[data-theme="dark"] .option-quote-row span { color: #94a3b8; }
[data-theme="dark"] .option-quote-row strong { color: #818cf8; }
[data-theme="dark"] .order-action-trigger { color: #94a3b8; background: #334155; }
[data-theme="dark"] .order-action-trigger:hover { color: #f1f5f9; background: #475569; }
[data-theme="dark"] .order-group-header td { background: #1e293b; color: #f1f5f9; border-color: #334155; }
[data-theme="dark"] .order-item-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .order-item-card td { color: #f1f5f9; }
[data-theme="dark"] .status-pill { color: #f1f5f9; }
[data-theme="dark"] .status-pill.good { color: #34d399; }
[data-theme="dark"] .status-pill.warn { color: #fbbf24; }
[data-theme="dark"] .status-pill.bad { color: #f87171; }
[data-theme="dark"] .reminder-tag { color: #fbbf24; background: rgba(251,191,36,.15); }
[data-theme="dark"] .amount-summary-row span { color: #94a3b8; }
[data-theme="dark"] .amount-summary-row b { color: #f1f5f9; }
[data-theme="dark"] .amount-summary-row.strong b { color: #818cf8; }
[data-theme="dark"] .discount-breakdown { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .discount-breakdown b { color: #f1f5f9; }
[data-theme="dark"] .order-actual-paid-row label { color: #94a3b8; }
[data-theme="dark"] .splice-panel { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .splice-panel h3 { color: #f1f5f9; }
[data-theme="dark"] .splice-toolbar { border-color: #334155; }
[data-theme="dark"] .splice-summary-grid > div { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .splice-summary-grid b { color: #f1f5f9; }
[data-theme="dark"] .splice-result { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .splice-result b { color: #f1f5f9; }
[data-theme="dark"] .splice-result span { color: #94a3b8; }
[data-theme="dark"] .profit-detail-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .profit-detail-card h3 { color: #f1f5f9; }
[data-theme="dark"] .metrics > div { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .metrics label { color: #94a3b8; }
[data-theme="dark"] .metrics b { color: #f1f5f9; }
[data-theme="dark"] .order-summary-row td { background: #1e293b; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .product-data-tools { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .product-data-tools h3 { color: #f1f5f9; }
[data-theme="dark"] .product-main-actions { border-color: #334155; }
[data-theme="dark"] .account-dock { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .account-dock-label { color: #94a3b8; }
[data-theme="dark"] .user-menu-btn { background: #334155; color: #f1f5f9; }
[data-theme="dark"] .user-menu-panel { background: #1f2937; border-color: #374151; box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2); }
[data-theme="dark"] .user-menu-header .user-menu-avatar { background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%); }
[data-theme="dark"] .user-menu-meta strong { color: #f9fafb; }
[data-theme="dark"] .user-menu-meta span { color: #9ca3af; }
[data-theme="dark"] .user-menu-info span { color: #9ca3af; }
[data-theme="dark"] .user-menu-info b { color: #e5e7eb; }
[data-theme="dark"] .user-menu-section-title { color: #6b7280; }
[data-theme="dark"] .user-menu-item { color: #d1d5db; }
[data-theme="dark"] .user-menu-item:hover { background: #374151; }
[data-theme="dark"] .user-menu-item.active { background: rgba(99,102,241,.15); color: #818cf8; }
[data-theme="dark"] .user-menu-item svg { color: #6b7280; }
[data-theme="dark"] .user-menu-item.danger { color: #f87171; }
[data-theme="dark"] .user-menu-item.danger:hover { background: rgba(239,68,68,.1); }
[data-theme="dark"] .modal-footer { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .modal-close-btn { background: #334155; color: #f1f5f9; }
[data-theme="dark"] .modal-close-btn:hover { background: #475569; }
[data-theme="dark"] .empty { color: #64748b; }
[data-theme="dark"] .status-draft { color: #94a3b8; background: #334155; }
[data-theme="dark"] .status-production { color: #fbbf24; background: rgba(251,191,36,.15); }
[data-theme="dark"] .status-shipping { color: #60a5fa; background: rgba(96,165,250,.15); }
[data-theme="dark"] .status-completed { color: #34d399; background: rgba(52,211,153,.15); }
/* Production Board Grid */
[data-theme="dark"] .production-board-grid { gap: 16px; }
[data-theme="dark"] .production-board-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .production-board-card:hover { border-color: #818cf8; box-shadow: 0 4px 16px rgba(129,140,248,.15); }
[data-theme="dark"] .production-board-no { color: #f1f5f9; }
[data-theme="dark"] .production-board-date { color: #64748b; }
[data-theme="dark"] .production-board-customer { color: #94a3b8; }
[data-theme="dark"] .production-board-item { background: #0f172a; }
[data-theme="dark"] .production-board-item-name { color: #f1f5f9; }
[data-theme="dark"] .production-board-item-specs { color: #94a3b8; }
[data-theme="dark"] .production-board-footer { border-color: #334155; }
[data-theme="dark"] .production-board-photo-count { color: #64748b; }
/* Form elements dark mode */
[data-theme="dark"] .form-grid select { background: #1e293b; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .form-grid textarea { background: #1e293b; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .dynamic-options select { background: #1e293b; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .actions { border-color: #334155; }
[data-theme="dark"] .btn.primary { background: #818cf8; color: #fff; }
[data-theme="dark"] .btn.primary:hover { background: #6366f1; }
[data-theme="dark"] .btn.danger { background: #ef4444; color: #fff; }
[data-theme="dark"] .btn.small { background: #334155; color: #94a3b8; border-color: #475569; }
[data-theme="dark"] .btn.small:hover { background: #475569; color: #f1f5f9; }
[data-theme="dark"] .order-info-layout { background: transparent; }
[data-theme="dark"] .order-main-panel { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .order-date-panel { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .order-date-panel h3 { color: #f1f5f9; }
[data-theme="dark"] .order-main-title h3 { color: #f1f5f9; }
[data-theme="dark"] .custom-options-form { background: transparent; }
[data-theme="dark"] .option-quote-panel { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .option-quote-head { border-color: #334155; }
[data-theme="dark"] .option-quote-list { border-color: #334155; }
[data-theme="dark"] .option-quote-list-item { border-color: #334155; }
[data-theme="dark"] .option-quote-list-item:hover { background: #334155; }
[data-theme="dark"] .order-item-detail-row { border-color: #334155; }
[data-theme="dark"] .order-item-detail-row td { color: #f1f5f9; }
[data-theme="dark"] .order-item-detail-row small { color: #94a3b8; }
[data-theme="dark"] .order-item-card-grid { border-color: #334155; }
[data-theme="dark"] .order-item-card-grid td { color: #f1f5f9; }
[data-theme="dark"] .order-item-card-grid small { color: #94a3b8; }
/* Product Control Page */
[data-theme="dark"] .product-list-panel { background: transparent; }
[data-theme="dark"] .product-list-item { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .product-list-item:hover { border-color: #818cf8; box-shadow: 0 4px 12px rgba(129,140,248,.1); }
[data-theme="dark"] .product-list-item.active { background: linear-gradient(180deg, rgba(129,140,248,.15), rgba(129,140,248,.05)); border-color: #818cf8; }
[data-theme="dark"] .product-list-item strong { color: #f1f5f9; }
[data-theme="dark"] .product-list-item small { color: #94a3b8; }
[data-theme="dark"] .product-editor-stack { background: transparent; }
[data-theme="dark"] .product-section-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .product-section-card .card-header { border-color: #334155; }
[data-theme="dark"] .product-section-card h2 { color: #f1f5f9; }
[data-theme="dark"] .product-section-card .card-content { color: #f1f5f9; }
[data-theme="dark"] .product-basics-grid label { color: #94a3b8; }
[data-theme="dark"] .product-options-price-panel { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .product-options-price-panel label { color: #94a3b8; }
[data-theme="dark"] .option-groups-editor { background: transparent; }
[data-theme="dark"] .option-group-list { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .option-group-list-item { border-color: #334155; }
[data-theme="dark"] .option-group-list-item:hover { background: #334155; }
[data-theme="dark"] .option-group-list-item.active { background: linear-gradient(180deg, rgba(129,140,248,.15), rgba(129,140,248,.05)); }
[data-theme="dark"] .option-group-label { background: #0f172a; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .option-group-detail { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .option-group-detail-empty { color: #64748b; }
[data-theme="dark"] .option-group-detail .form-grid label { color: #94a3b8; }
[data-theme="dark"] .option-values-table { border-color: #334155; }
[data-theme="dark"] .option-values-table th { background: #1e293b; color: #94a3b8; border-color: #334155; }
[data-theme="dark"] .option-values-table td { border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .option-values-table tr:hover td { background: #1e293b; }
[data-theme="dark"] .product-actions-bar { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .product-actions-bar .btn { background: #334155; color: #94a3b8; border-color: #475569; }
[data-theme="dark"] .product-actions-bar .btn:hover { background: #475569; color: #f1f5f9; }
[data-theme="dark"] .product-actions-bar .btn.primary { background: #818cf8; color: #fff; }
[data-theme="dark"] .product-actions-bar .btn.danger { background: #ef4444; color: #fff; }
/* Order List Page */
[data-theme="dark"] .order-table-wrap { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .order-table-wrap table { border-color: #334155; }
[data-theme="dark"] .order-table-wrap th { background: #1e293b; color: #94a3b8; border-color: #334155; }
[data-theme="dark"] .order-table-wrap td { border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .order-table-wrap tr:hover td { background: #1e293b; }
[data-theme="dark"] .order-filters { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .order-filters label { color: #94a3b8; }
[data-theme="dark"] .order-filters select { background: #0f172a; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .orders-summary-bar { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .orders-summary-bar .stat { color: #f1f5f9; }
[data-theme="dark"] .orders-summary-bar small { color: #94a3b8; }
[data-theme="dark"] .order-actions-menu { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .order-actions-menu button { color: #94a3b8; }
[data-theme="dark"] .order-actions-menu button:hover { background: #334155; color: #f1f5f9; }
/* User Management Page */
[data-theme="dark"] .user-management-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .user-management-card h2 { color: #f1f5f9; }
[data-theme="dark"] .user-management-card .card-content { color: #f1f5f9; }
[data-theme="dark"] .user-table { border-color: #334155; }
[data-theme="dark"] .user-table th { background: #1e293b; color: #94a3b8; border-color: #334155; }
[data-theme="dark"] .user-table td { border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .user-table tr:hover td { background: #1e293b; }
[data-theme="dark"] .user-role-badge { background: #334155; color: #94a3b8; }
[data-theme="dark"] .user-status-badge { background: rgba(52,211,153,.15); color: #34d399; }
[data-theme="dark"] .user-channel-select { background: #0f172a; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .user-info-text { color: #94a3b8; }
[data-theme="dark"] .user-count-badge { background: #334155; color: #94a3b8; }