:root {
  --jy-page: #eef1ef;
  --jy-surface: #ffffff;
  --jy-soft: #f1fcf6;
  --jy-soft-2: #e7f4ee;
  --jy-primary: #006949;
  --jy-primary-bright: #138b63;
  --jy-primary-hover: #087555;
  --jy-text: #17211e;
  --jy-muted: #69746f;
  --jy-border: #e6ebe8;
  --jy-warning: #b7791f;
  --jy-error: #c2413a;
  --jy-shadow: 0 18px 52px rgba(27, 54, 45, .08);
  --jy-font: "Noto Sans SC", sans-serif;
  --jy-number: "Manrope", "Noto Sans SC", sans-serif;
}

* { scrollbar-width: thin; scrollbar-color: #d1ddd7 transparent; }
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-thumb { border-radius: 20px; background: #d1ddd7; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--jy-text);
  background:
    radial-gradient(circle at 12% 4%, rgba(114, 218, 172, .12), transparent 28%),
    var(--jy-page);
  font-family: var(--jy-font);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease; }
button:active { transform: translateY(1px); }
.material-symbols-outlined { font-size: 20px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; }

.app {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  overflow: clip;
  border: 0;
  border-radius: 0;
  background: var(--jy-surface);
  box-shadow: var(--jy-shadow);
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-width: 0;
  height: 100vh;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  color: var(--jy-text);
  background: #fbfdfc;
  border-right: 1px solid var(--jy-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px;
  margin-bottom: 22px;
}

.brand-mark {
  width: 56px;
  height: 39px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 6px 8px;
  border: 1px solid #e1e8e4;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(24, 55, 45, .1);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }

.brand > div:last-child { min-width: 0; display: grid; }
.brand strong { color: var(--jy-primary); font: 700 18px/1.25 var(--jy-number); letter-spacing: -.03em; }
.brand span { margin-top: 2px; color: var(--jy-muted); font-size: 10px; white-space: nowrap; }

.sidebar-create-btn {
  width: 100%;
  height: 43px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--jy-primary-bright);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(19, 139, 99, .14);
}
.sidebar-create-btn:hover { background: var(--jy-primary-hover); }

.nav-tabs { display: flex; flex: 1; flex-direction: column; gap: 3px; overflow-y: auto; }
.nav-group-label {
  display: block;
  padding: 13px 11px 5px;
  color: #8b9792;
  font: 600 10px/1 var(--jy-number);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nav-tab {
  width: 100%;
  min-height: 41px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 9px;
  color: #46534e;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.nav-tab:hover { color: var(--jy-primary); background: #f0f7f3; }
.nav-tab.is-active { color: var(--jy-primary); background: #cfeee1; font-weight: 700; }
.nav-tab.is-active .material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.nav-tab b { justify-self: end; float: none; color: #fff; background: var(--jy-warning); }

.platform-account {
  margin: 14px 0 0;
  padding: 12px;
  grid-template-columns: 1fr auto;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #0b5e43, #108860);
  box-shadow: 0 8px 18px rgba(11, 94, 67, .16);
}
.sidebar-quote-total { margin-top: 12px; padding: 13px; display: grid; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #0b5e43, #108860); }
.sidebar-quote-total span { font-size: 10px; opacity: .78; }
.sidebar-quote-total strong { margin: 5px 0 3px; font: 700 18px/1.2 var(--jy-number); }
.sidebar-quote-total small { font-size: 8px; opacity: .7; }
.platform-account strong, .platform-account span, .platform-account small { grid-column: 1; color: inherit; }
.platform-account span { color: rgba(255, 255, 255, .78); font-size: 11px; }
.platform-account small { color: rgba(255, 255, 255, .9); font-size: 10px; }
.platform-account-actions {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  display: grid;
  gap: 5px;
  justify-items: end;
}
.platform-account .platform-account-actions button {
  margin: 0;
  padding: 2px 0;
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
.platform-account .platform-account-actions button:hover { color: #fff; }
.platform-account .platform-account-actions button::after { content: none; }
.sidebar-footer { padding: 15px 11px 3px; display: flex; align-items: center; gap: 9px; color: #7b8782; font-size: 11px; }

.sidebar-quote-total,
.sidebar-footer {
  display: none;
}

.main { min-width: 0; padding: 0 28px 36px; background: #fff; }
.workspace-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 68px;
  margin: 0 -28px 24px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--jy-border);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
}
.global-search { width: min(430px, 42vw); height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border-radius: 9px; background: #f3f7f5; }
.global-search .material-symbols-outlined { color: #7b8782; }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--jy-text); }
.global-search kbd { padding: 3px 6px; border: 1px solid #dbe3df; border-radius: 5px; color: #89948f; background: #fff; font: 500 10px/1 var(--jy-number); }
.workspace-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.workspace-actions > button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; color: #4f5c57; background: transparent; cursor: pointer; position: relative; }
.workspace-actions > button:hover { background: #f1f6f3; }
.workspace-date { margin-right: 7px; color: var(--jy-muted); font: 500 11px/1 var(--jy-number); }
.workspace-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #275f50, #0d8a62); font: 700 11px/1 var(--jy-number); }
.workspace-actions i { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border: 2px solid #fff; border-radius: 50%; background: #dd743b; }
.mobile-menu-btn { display: none; border: 0; background: transparent; }

.topbar { margin: 3px 0 20px; padding: 0; align-items: flex-start; }
.topbar h1 { margin: 0 0 5px; color: var(--jy-text); font: 700 27px/1.3 var(--jy-number); letter-spacing: -.035em; }
.topbar p { color: var(--jy-muted); font-size: 13px; }
.topbar-actions { justify-content: flex-end; gap: 7px; }
.topbar-actions .ghost-btn, .topbar-actions .primary-btn { min-height: 38px; padding: 0 13px; font-size: 12px; white-space: nowrap; }

.primary-btn, .weight-calculate-btn {
  border-color: var(--jy-primary-bright);
  border-radius: 10px;
  color: #fff;
  background: var(--jy-primary-bright);
  font-weight: 600;
  box-shadow: none;
}
.primary-btn:hover, .weight-calculate-btn:hover { background: var(--jy-primary-hover); }
.ghost-btn, .small-btn {
  border-color: var(--jy-border);
  border-radius: 9px;
  color: #33413c;
  background: #fff;
}
.ghost-btn:hover, .small-btn:hover { border-color: #abc8bc; color: var(--jy-primary); background: #f7fbf9; }

input, select, textarea {
  border-color: #dfe6e2;
  border-radius: 8px;
  color: var(--jy-text);
  background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--jy-primary-bright); outline: none; box-shadow: 0 0 0 3px rgba(19, 139, 99, .09); }

/* Dashboard */
.dashboard-view { animation: jy-rise .28s ease both; }
.dashboard-welcome { margin: 2px 0 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-kicker { margin: 0 0 6px; color: var(--jy-primary); font: 700 10px/1 var(--jy-number); letter-spacing: .1em; }
.dashboard-welcome h1 { margin: 0; color: var(--jy-text); font: 700 28px/1.25 var(--jy-number); letter-spacing: -.035em; }
.dashboard-welcome h1 span { color: var(--jy-text); }
.dashboard-welcome > div > p:last-child { margin: 6px 0 0; color: var(--jy-muted); font-size: 13px; }
.dashboard-head-actions { display: flex; align-items: center; gap: 12px; color: var(--jy-muted); font-size: 11px; }
.dashboard-head-actions .primary-btn { min-height: 40px; display: flex; align-items: center; gap: 6px; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.dashboard-metrics article { position: relative; min-height: 128px; padding: 18px; display: grid; grid-template-columns: 1fr auto; align-content: start; border: 1px solid var(--jy-border); border-radius: 15px; background: #fff; }
.dashboard-metrics article > span { grid-column: 1; color: #596660; font-size: 12px; }
.dashboard-metrics article > strong { grid-column: 1 / -1; margin: 10px 0 4px; color: var(--jy-text); font: 700 25px/1.15 var(--jy-number); letter-spacing: -.025em; }
.dashboard-metrics article > small { grid-column: 1 / -1; color: #8a9690; font-size: 10px; }
.metric-icon { grid-column: 2; grid-row: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--jy-primary); background: var(--jy-soft-2); }
.metric-warning .metric-icon { color: var(--jy-warning); background: #fff4d9; }
.metric-profit .metric-icon { color: #fff; background: linear-gradient(135deg, #0f7c5d, #16a06f); }
.dashboard-grid { margin-top: 15px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .75fr); gap: 15px; }
.dashboard-card { min-width: 0; padding: 18px; border: 1px solid var(--jy-border); border-radius: 15px; background: #fff; }
.dashboard-card-head { margin-bottom: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dashboard-card-head h2 { margin: 0 0 3px; font: 700 15px/1.3 var(--jy-number); }
.dashboard-card-head p { margin: 0; color: var(--jy-muted); font-size: 10px; }
.dashboard-card-head > span, .dashboard-card-head button { border: 0; color: var(--jy-primary); background: transparent; font-size: 10px; }
.trend-chart { height: 220px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 18px; padding: 22px 12px 25px; border-bottom: 1px solid var(--jy-border); background: repeating-linear-gradient(to top, transparent 0 43px, #edf2ef 44px); }
.trend-column { height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.trend-column i { width: min(38px, 72%); min-height: 4px; border-radius: 7px 7px 2px 2px; background: linear-gradient(to top, #0a8c63, #bfe9d8); }
.trend-column span { position: absolute; bottom: -21px; color: #7a8681; font: 500 9px/1 var(--jy-number); }
.dashboard-status { display: flex; flex-direction: column; }
.status-donut { width: 148px; height: 148px; margin: 5px auto 16px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--jy-primary-bright) 0 45%, #efb94e 45% 65%, #9ba7a2 65% 88%, #d86b63 88% 100%); position: relative; }
.status-donut::before { content: ""; position: absolute; inset: 25px; border-radius: 50%; background: #fff; }
.status-donut > div { z-index: 1; display: grid; text-align: center; }
.status-donut strong { font: 700 23px/1 var(--jy-number); }
.status-donut span { margin-top: 5px; color: var(--jy-muted); font-size: 9px; }
.status-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.status-legend span { display: flex; align-items: center; gap: 6px; color: var(--jy-muted); font-size: 10px; }
.status-legend i { width: 7px; height: 7px; border-radius: 50%; }
.dashboard-recent { min-height: 255px; }
.dashboard-records { display: grid; }
.dashboard-record-row { min-height: 48px; display: grid; grid-template-columns: minmax(130px, 1.15fr) 1fr 100px 74px; align-items: center; gap: 10px; border-top: 1px solid #eef2f0; font-size: 10px; }
.dashboard-record-row strong { font: 600 10px/1.35 var(--jy-number); }
.dashboard-record-row small { display: block; color: var(--jy-muted); }
.dashboard-record-row > b { text-align: right; font: 700 11px/1 var(--jy-number); }
.dashboard-tasks { min-height: 255px; }
.dashboard-task-list { display: grid; gap: 9px; }
.dashboard-task { padding: 11px; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 9px; border-radius: 10px; background: #f6faf8; }
.dashboard-task > span:first-child { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: var(--jy-primary); background: var(--jy-soft-2); }
.dashboard-task strong { display: block; font-size: 10px; }
.dashboard-task small { color: var(--jy-muted); font-size: 9px; }
.dashboard-task b { color: var(--jy-primary); font: 700 12px/1 var(--jy-number); }
.dashboard-empty { min-height: 130px; display: grid; place-items: center; color: var(--jy-muted); font-size: 11px; text-align: center; }

/* Quotation editor */
.editor-grid { grid-template-columns: minmax(0, 2.55fr) minmax(285px, .9fr); gap: 16px; align-items: start; }
.quote-form { gap: 15px; }
.section-block, .summary-panel, .records-toolbar, .record-card, .product-library, .weight-calculator-card, .weight-result-card, .weight-reference-card, .platform-card {
  border: 1px solid var(--jy-border);
  border-radius: 15px;
  box-shadow: none;
  background: #fff;
}
.section-block { padding: 19px; }
.section-title { margin-bottom: 17px; padding-bottom: 12px; border-bottom: 1px solid #edf1ef; }
.section-title h2 { font: 700 15px/1.3 var(--jy-number); }
.section-title h2::before { content: ""; display: inline-block; width: 4px; height: 15px; margin-right: 8px; border-radius: 3px; vertical-align: -2px; background: var(--jy-primary-bright); }
.section-title p, .quote-update-tools { font-size: 10px; }
.field-grid { gap: 12px; }
.field-grid label > span, .line-main label > span, .line-extra label > span, .library-fields label > span { margin-bottom: 6px; color: #56635e; font-size: 10px; font-weight: 600; }
.field-grid input, .field-grid select, .field-grid textarea, .line-main input, .line-main select, .line-extra input, .line-extra select { min-height: 40px; padding: 8px 10px; font-size: 11px; }
.line-items { gap: 11px; }
.line-item { padding: 15px 15px 15px 21px; border: 1px solid var(--jy-border); border-radius: 12px; background: #fff; box-shadow: none; position: relative; }
.line-item::before { content: ""; position: absolute; left: 7px; top: 16px; bottom: 16px; width: 3px; border-radius: 4px; background: #d8e8e0; }
.line-toolbar { margin-bottom: 11px; }
.drag-handle { color: var(--jy-muted); background: #f2f7f4; }
.line-main { grid-template-columns: 1.05fr 1.35fr repeat(3, .7fr) .62fr .82fr .82fr .62fr .88fr .82fr .82fr; gap: 8px; }
.line-extra { margin-top: 11px; padding-top: 11px; gap: 9px; border-top: 1px dashed #dce5e0; }
.line-image-preview { border-color: #dfe7e3; background-color: #f7faf8; }
.line-total-row { color: var(--jy-primary); font: 700 13px/1 var(--jy-number); }
.line-insert-row { margin: 14px -15px -15px -21px; padding: 9px 15px; display: flex; justify-content: center; border-top: 1px dashed #d9e7e0; background: linear-gradient(180deg, #fff, #f8fcfa); border-radius: 0 0 12px 12px; }
.line-insert-btn { min-height: 34px; padding: 0 16px; border: 1px solid #b9ddce; border-radius: 18px; color: var(--jy-primary); background: #eff9f4; font-size: 12px; font-weight: 700; cursor: pointer; }
.line-insert-btn:hover { border-color: var(--jy-primary-bright); background: #dff3e9; box-shadow: 0 5px 14px rgba(0, 105, 73, .1); }
.summary-panel { top: 84px; padding: 18px; overflow: hidden; }
.summary-panel h2 { font: 700 15px/1.3 var(--jy-number); }
.summary-panel > div { border-color: #edf1ef; }
.summary-panel strong, [data-grand-total], [data-final-total] { font-family: var(--jy-number); }
.summary-panel .grand-total, .summary-final { margin: 12px -18px -18px; padding: 18px; color: #fff; background: var(--jy-primary); }

/* Records */
.records-toolbar { padding: 13px; display: flex; gap: 10px; background: #f8fbf9; }
.records-toolbar input { height: 40px; padding-left: 13px; background: #fff; }
.records-list { gap: 0; margin-top: 14px; overflow: hidden; border: 1px solid var(--jy-border); border-radius: 14px; }
.record-card { min-height: 72px; padding: 13px 17px; border: 0; border-bottom: 1px solid var(--jy-border); border-radius: 0; box-shadow: none; }
.record-card:last-child { border-bottom: 0; }
.record-card:hover { transform: none; background: #f8fbf9; }
.record-card h3 { font: 700 12px/1.4 var(--jy-number); }
.record-card p { margin: 4px 0 0; color: var(--jy-muted); font-size: 10px; }
.record-meta { margin-top: 6px; }
.status-pill { padding: 3px 8px; font-size: 9px; }
.order-card { align-items: center; }
.order-profit-grid { grid-template-columns: repeat(5, minmax(88px, 1fr)); }
.order-profit-grid > div { border-color: #edf1ef; border-radius: 10px; background: #fbfdfc; }
.order-profit-grid span { font-size: 10px; }
.order-profit-grid strong { font: 700 13px/1.2 var(--jy-number); }
.order-profit-grid .order-profit-total { border-color: var(--jy-primary); background: var(--jy-primary); }

/* Product library */
.products-head, .platform-page-head { margin-bottom: 17px; }
.products-head h2, .platform-page-head h2 { font: 700 25px/1.25 var(--jy-number); letter-spacing: -.03em; }
.products-head p, .platform-page-head p:not(.eyebrow) { font-size: 11px; }
.products-head-actions { display: flex; align-items: center; gap: 9px; }
.save-notice { position: fixed; top: 22px; right: 24px; z-index: 300; min-width: 210px; padding: 13px 18px; border: 1px solid #94cfb6; border-radius: 11px; color: #fff; background: #087555; box-shadow: 0 14px 34px rgba(0, 77, 54, .22); font-size: 13px; font-weight: 700; opacity: 0; transform: translateY(-12px); transition: opacity .2s ease, transform .2s ease; }
.save-notice.is-visible { opacity: 1; transform: translateY(0); }

/* Unified readable type scale */
body { font-size: 14px; line-height: 1.5; }
.brand span, .sidebar-quote-total span, .platform-account small, .nav-group-label { font-size: 11px; }
.sidebar-quote-total small { font-size: 10px; }
.platform-account span, .sidebar-footer, .workspace-date { font-size: 12px; }
.page-kicker, .dashboard-card-head p, .dashboard-card-head > span, .dashboard-card-head button { font-size: 11px; }
.dashboard-head-actions, .dashboard-metrics article > small, .dashboard-record-row, .dashboard-record-row strong, .dashboard-task strong { font-size: 11px; }
.trend-column span, .status-donut span, .status-legend span, .dashboard-task small { font-size: 10px; }
.dashboard-record-row > b, .dashboard-empty { font-size: 12px; }
.section-title p, .quote-update-tools { font-size: 11px; }
.field-grid label > span, .line-main label > span, .line-extra label > span, .library-fields label > span { font-size: 11px; line-height: 1.35; }
.field-grid input, .field-grid select, .field-grid textarea { font-size: 13px; line-height: 1.5; }
.line-main input, .line-main select, .line-extra input, .line-extra select { font-size: 12px; line-height: 1.4; }
.record-card h3 { font-size: 13px; }
.record-card p, .products-head p, .platform-page-head p:not(.eyebrow), .approval-card p, .weight-head p { font-size: 12px; line-height: 1.55; }
.status-pill { font-size: 10px; }
.library-fields input, .library-fields select, .library-fields textarea { font-size: 12px; line-height: 1.45; }
.platform-table th { font-size: 11px; }
.platform-table td { font-size: 12px; line-height: 1.45; }
.login-card::before, .login-card label span { font-size: 12px; }
.login-card > p:not(.eyebrow) { font-size: 13px; line-height: 1.6; }
.product-library { padding: 0; gap: 0; overflow: hidden; }
.library-card { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--jy-border); border-radius: 0; box-shadow: none; align-items: center; }
.library-card:last-child { border-bottom: 0; }
.library-card:hover { background: #f9fbfa; }
.library-image { width: 66px; height: 66px; border-radius: 9px; }
.library-fields { grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 8px; }
.library-fields input, .library-fields select, .library-fields textarea { min-height: 36px; padding: 7px 9px; font-size: 10px; }
.library-actions { align-self: center; }

/* Platform management */
.platform-view { padding-bottom: 20px; }
.platform-page-head .eyebrow { display: none; }
.platform-grid.two { gap: 14px; }
.platform-card { padding: 18px; }
.platform-card h3 { font: 700 14px/1.3 var(--jy-number); }
.platform-card label { margin-top: 12px; }
.platform-table th { padding: 12px 14px; color: var(--jy-muted); background: #f4f8f6; font-size: 9px; text-transform: uppercase; }
.platform-table td { height: 58px; padding: 10px 14px; font-size: 11px; }
.approval-card { border-color: var(--jy-border); border-radius: 14px; box-shadow: none; }
.approval-card h3 { font: 700 13px/1.4 var(--jy-number); }
.approval-card p { font-size: 10px; }
.pricing-tools { display: flex; gap: 8px; }
.pricing-tools select { min-width: 190px; }

/* Weight calculator */
.weight-page { gap: 16px; }
.weight-head {
  padding: 21px;
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(109, 225, 171, .22), transparent 32%),
    linear-gradient(125deg, #073f32 0%, #087455 52%, #12a06f 100%);
  box-shadow: 0 16px 34px rgba(8, 116, 85, .2);
}
.weight-kicker { color: #b9f0d9; font-size: 10px; }
.weight-head h2 { font: 700 25px/1.25 var(--jy-number); }
.weight-head p { color: rgba(255, 255, 255, .78); font-size: 11px; }
.weight-head .weight-badge {
  border-color: rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .78);
  background: rgba(4, 65, 48, .24);
  backdrop-filter: blur(8px);
}
.weight-head .weight-badge strong { color: #fff; }
.weight-layout { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .75fr); gap: 14px; }
.weight-calculator-card, .weight-result-card, .weight-reference-card { padding: 18px; }
.weight-card-title h3 { font: 700 14px/1.3 var(--jy-number); }
.weight-result-card { background: var(--jy-primary); }
.weight-primary-result b { font-family: var(--jy-number); }
.weight-reference-groups { gap: 12px; }

/* Login */
.platform-login {
  padding: 26px;
  background: var(--jy-page);
}
.platform-login::before {
  content: "";
  position: fixed;
  width: min(1120px, calc(100vw - 52px));
  height: min(720px, calc(100vh - 52px));
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(231, 245, 238, .96) 0 55%, #fff 55%),
    #fff;
  box-shadow: var(--jy-shadow);
}
.login-card {
  position: relative;
  z-index: 1;
  width: min(390px, calc(100vw - 64px));
  margin-left: min(52vw, 570px);
  padding: 34px;
  border-radius: 18px;
  box-shadow: none;
}
.login-card::before { content: "工程报价与全球供应链管理"; display: block; margin-bottom: 30px; color: var(--jy-primary); font-size: 11px; font-weight: 700; }
.login-brand { width: 104px; height: 64px; padding: 10px 13px; display: grid; place-items: center; border: 1px solid #e1e8e4; border-radius: 15px; background: #fff; box-shadow: 0 10px 24px rgba(24, 55, 45, .12); }
.login-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.login-card .eyebrow { display: none; }
.login-card h1 { margin-top: 24px; font: 700 25px/1.35 var(--jy-number); }
.login-card > p:not(.eyebrow) { font-size: 12px; }
.login-card label span { font-size: 11px; }
.login-card input { height: 43px; }

.mobile-bottom-nav { display: none; }

@keyframes jy-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .app { width: calc(100% - 20px); margin: 10px; grid-template-columns: 76px minmax(0, 1fr); min-height: calc(100vh - 20px); }
  .sidebar { height: calc(100vh - 20px); padding: 18px 10px; }
  .brand { justify-content: center; padding: 0; }
  .brand > div:last-child, .sidebar-create-btn:not(:hover)::after, .nav-group-label, .nav-tab > span:not(.material-symbols-outlined), .sidebar-footer span:last-child, .platform-account strong, .platform-account span, .platform-account small, .sidebar-quote-total { display: none; }
  .sidebar-create-btn { font-size: 0; }
  .sidebar-create-btn .material-symbols-outlined { font-size: 21px; }
  .nav-tab { grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .nav-tab b { position: absolute; margin: -22px 0 0 22px; }
  .platform-account { display: none !important; }
  .main { padding: 0 20px 28px; }
  .workspace-header { margin: 0 -20px 20px; padding: 0 20px; }
  .dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .line-main { grid-template-columns: repeat(5, minmax(90px, 1fr)); }
  .library-fields { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

@media (max-width: 760px) {
  body { background: #f5f8f6; }
  .app { width: 100%; min-height: 100dvh; margin: 0; display: block; border: 0; border-radius: 0; box-shadow: none; }
  .sidebar { position: fixed; left: -260px; top: 0; width: 238px; height: 100dvh; z-index: 100; transition: left .2s ease; box-shadow: 12px 0 34px rgba(15, 45, 36, .15); }
  .sidebar.is-mobile-open { left: 0; }
  .sidebar .brand { justify-content: flex-start; }
  .sidebar .brand > div:last-child, .sidebar .nav-group-label, .sidebar .nav-tab > span:not(.material-symbols-outlined), .sidebar .platform-account strong, .sidebar .platform-account span, .sidebar .platform-account small { display: grid; }
  .sidebar .sidebar-create-btn { font-size: 13px; }
  .sidebar .nav-tab { grid-template-columns: 22px 1fr auto; justify-items: stretch; padding: 0 12px; }
  .main { padding: 0 14px 94px; }
  .workspace-header { height: 58px; margin: 0 -14px 18px; padding: 0 14px; justify-content: space-between; }
  .mobile-menu-btn { display: grid; place-items: center; }
  .global-search, .workspace-date, .workspace-actions > button { display: none; }
  .workspace-actions { margin-left: 0; }
  .topbar { flex-direction: column; }
  .topbar h1, .dashboard-welcome h1 { font-size: 23px; }
  .topbar-actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 5px; }
  .topbar-actions > button { flex: 0 0 auto; white-space: nowrap; }
  .dashboard-welcome { align-items: flex-start; }
  .dashboard-welcome > div:first-child p:last-child { max-width: 250px; }
  .dashboard-head-actions > span { display: none; }
  .dashboard-head-actions .primary-btn { display: none; }
  .dashboard-metrics { grid-template-columns: 1fr 1fr; gap: 9px; }
  .dashboard-metrics article { min-height: 112px; padding: 14px; }
  .dashboard-metrics article > strong { font-size: 20px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 10px; }
  .dashboard-status { min-height: 300px; }
  .dashboard-record-row { grid-template-columns: 1fr 82px; padding: 8px 0; }
  .dashboard-record-row > span, .dashboard-record-row .status-pill { display: none; }
  .editor-grid { grid-template-columns: 1fr; }
  .summary-panel { position: static; order: -1; }
  .section-block { padding: 14px; }
  .field-grid.four, .line-main, .line-extra { grid-template-columns: 1fr 1fr; }
  .line-main label:nth-child(1), .line-main label:nth-child(2), .line-extra .span-2 { grid-column: 1 / -1; }
  .line-item { padding: 13px 11px 13px 18px; }
  .line-insert-row { margin: 13px -11px -13px -18px; }
  .products-head, .platform-page-head { align-items: stretch; flex-direction: column; }
  .products-head-actions { width: 100%; }
  .products-head-actions > button { flex: 1; }
  .save-notice { top: 12px; left: 14px; right: 14px; min-width: 0; text-align: center; }
  .library-card { grid-template-columns: 58px 1fr; padding: 12px; }
  .library-image { width: 54px; height: 54px; }
  .library-fields { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .library-actions { grid-column: 1 / -1; }
  .order-card { align-items: stretch; }
  .order-profit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-profit-grid .order-profit-total { grid-column: 1 / -1; }
  .platform-grid.two, .weight-layout, .weight-reference-groups { grid-template-columns: 1fr; }
  .pi-stamp-settings { width: 100%; grid-column: 1 / -1 !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }
  .pi-stamp-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-stamp-size, .pi-stamp-remove { grid-column: 1 / -1; }
  .pi-stamp-preview { width: 100%; height: 132px; }
  .pi-stamp-remove { width: 100%; white-space: nowrap; }
  .pricing-tools { flex-direction: column; }
  .records-toolbar { align-items: stretch; flex-direction: column; }
  .record-card { align-items: stretch; grid-template-columns: 1fr; }
  .platform-login { padding: 0; }
  .platform-login::before { display: none; }
  .login-card { width: 100%; min-height: 100dvh; margin: 0; padding: 48px 25px; border-radius: 0; display: flex; flex-direction: column; justify-content: center; }
  .login-card::before { margin-bottom: 20px; }
  .mobile-bottom-nav { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 80; height: 66px; padding: 5px 9px; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--jy-border); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 10px 35px rgba(25, 56, 47, .16); backdrop-filter: blur(16px); }
  .mobile-bottom-nav button { border: 0; color: #718079; background: transparent; display: grid; place-items: center; align-content: center; gap: 3px; font-size: 10px; }
  .mobile-bottom-nav button.is-active { color: var(--jy-primary); }
  .mobile-bottom-nav .mobile-add { width: 48px; height: 48px; margin: -16px auto 0; border-radius: 50%; color: #fff; background: var(--jy-primary-bright); box-shadow: 0 7px 18px rgba(19, 139, 99, .28); }
  .mobile-bottom-nav .mobile-add .material-symbols-outlined { font-size: 27px; }
}

@media print {
  .workspace-header, .mobile-bottom-nav, .line-insert-row { display: none !important; }
}

.pricing-row-actions { display: flex; gap: 7px; align-items: center; }
.pricing-product-cell { min-width: 180px; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 11px; }
.pricing-product-image { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border: 1px solid #dfe8e3; border-radius: 9px; color: var(--jy-primary); background: #f2f7f4; font: 750 10px/1 var(--jy-number); }
.pricing-product-image img { width: 100%; height: 100%; object-fit: contain; }
.pricing-product-info { min-width: 0; display: grid; gap: 3px; }
.pricing-product-info strong, .pricing-product-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pricing-product-info strong { display: flex; align-items: center; gap: 6px; color: #17332a; font: 700 12px/1.35 var(--jy-number); }
.pricing-product-info span { color: #64736d; font-size: 11px; }
.pricing-inactive-tag { flex: 0 0 auto; padding: 2px 5px; border-radius: 5px; color: #7c674c; background: #f3eadf; font: 700 9px/1.3 var(--jy-number); font-style: normal; }
.platform-table tr.is-inactive > td { background: #fafbfa; }
.platform-table [data-price-row] > td:first-child { min-width: 210px; }
.pricing-rule-detail > td { padding: 0 !important; background: #f4f9f6; }
.pricing-rule-editor { padding: 20px 22px 22px; border-top: 1px solid #d9e8e0; color: #19362d; }
.pricing-rule-head, .pricing-rule-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pricing-rule-head > div { display: grid; gap: 4px; }
.pricing-rule-head strong { font-size: 16px; }
.pricing-rule-head span { color: #708079; font-size: 12px; }
.pricing-rule-switch { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #cfe0d8; border-radius: 999px; background: #fff; font-weight: 700; white-space: nowrap; }
.pricing-rule-switch input { width: 17px !important; height: 17px; accent-color: var(--jy-primary); }
.pricing-rule-meta { margin-top: 16px; display: grid; grid-template-columns: 220px minmax(280px, 1fr); gap: 12px; }
.pricing-rule-meta label { display: grid; gap: 6px; }
.pricing-rule-meta span { font-size: 12px; font-weight: 700; color: #60726b; }
.pricing-rule-notes { grid-column: 1 / -1; }
.pricing-rule-editor input, .pricing-rule-editor textarea { min-width: 0; width: 100%; padding: 0 10px; border: 1px solid #d7e2dd; border-radius: 9px; background: #fff; color: #18352c; box-sizing: border-box; }
.pricing-rule-editor input { height: 38px; }
.pricing-rule-editor textarea { min-height: 58px; padding-top: 9px; padding-bottom: 9px; resize: vertical; line-height: 1.5; }
.pricing-rule-section { margin-top: 17px; padding-top: 15px; border-top: 1px solid #dce7e2; }
.pricing-rule-section-head { margin-bottom: 9px; }
.pricing-rule-grid, .pricing-tier-grid, .pricing-variant-grid { min-width: 920px; display: grid; grid-template-columns: minmax(190px, 1.5fr) 80px 80px repeat(3, minmax(112px, 1fr)) 64px; gap: 8px; align-items: center; padding: 5px 0; }
.pricing-variant-grid { grid-template-columns: 120px 120px minmax(170px, 1.3fr) repeat(3, minmax(112px, 1fr)) 64px; }
.pricing-rule-grid-head { color: #72827c; font-size: 11px; font-weight: 700; }
.pricing-rule-editor [data-standard-rule-list], .pricing-rule-editor [data-area-tier-list], .pricing-rule-editor [data-variant-rule-list] { overflow-x: auto; }

@media (max-width: 760px) {
  .pricing-rule-editor { padding: 16px; }
  .pricing-rule-head { align-items: flex-start; flex-direction: column; }
  .pricing-rule-meta { grid-template-columns: 1fr; }
}

/* Product catalog: scan-first rows with a focused edit drawer. */
.product-library { display: block; }
.product-library-toolbar { min-height: 68px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--jy-border); background: #fbfdfc; }
.product-library-search { width: min(420px, 46vw); min-height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #dce6e1; border-radius: 10px; background: #fff; }
.product-library-search:focus-within { border-color: #63ad91; box-shadow: 0 0 0 3px rgba(19, 139, 99, .1); }
.product-library-search .material-symbols-outlined { color: #74817c; }
.product-library-search input { width: 100%; min-width: 0; height: 40px; padding: 0; border: 0; outline: 0; background: transparent; font-size: 13px; }
.product-library-toolbar select { min-width: 150px; min-height: 42px; padding: 0 36px 0 12px; border: 1px solid #dce6e1; border-radius: 10px; color: var(--jy-text); background-color: #fff; font-size: 12px; }
.product-library-count { margin-left: auto; color: var(--jy-muted); font-size: 12px; white-space: nowrap; }
.product-library-count b { color: var(--jy-primary); font-family: var(--jy-number); }
.media-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.media-toolbar { display: flex; align-items: center; gap: 10px; }
.media-search { min-width: min(420px, 34vw); min-height: 44px; padding: 0 13px; display: flex; align-items: center; gap: 9px; border: 1px solid #dce6e1; border-radius: 12px; background: #fff; }
.media-search:focus-within { border-color: #63ad91; box-shadow: 0 0 0 3px rgba(19, 139, 99, .1); }
.media-search .material-symbols-outlined { color: #74817c; font-size: 19px; }
.media-search input { width: 100%; min-width: 0; height: 42px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--jy-text); font-size: 13px; }
.media-upload-btn { position: relative; min-height: 44px; display: inline-flex; align-items: center; gap: 7px; overflow: hidden; cursor: pointer; white-space: nowrap; }
.media-upload-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.media-stats { margin: -4px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #6b7973; font-size: 12px; }
.media-stats span:first-child { color: var(--jy-primary); font-weight: 800; }
.media-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.media-card { overflow: hidden; border: 1px solid var(--jy-border); border-radius: 18px; background: #fff; box-shadow: 0 14px 32px rgba(17, 49, 38, .06); }
.media-thumb { aspect-ratio: 1 / 1; display: grid; place-items: center; background: linear-gradient(135deg, #f5faf7, #edf5f1); border-bottom: 1px solid var(--jy-border); }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card-body { min-height: 86px; padding: 12px 13px 8px; display: grid; gap: 4px; }
.media-card-body strong { overflow: hidden; color: var(--jy-text); font-size: 14px; font-weight: 800; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.media-card-body span, .media-card-body small { overflow: hidden; color: var(--jy-muted); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.media-card-body p { min-height: 32px; margin: 2px 0 0; overflow: hidden; color: #607069; font-size: 11px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.media-actions { padding: 0 13px 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.media-actions button { min-height: 34px; border: 1px solid #dbe7e1; border-radius: 10px; background: #fff; color: var(--jy-primary); font-size: 12px; font-weight: 800; cursor: pointer; }
.media-actions button:hover { background: #f1faf6; border-color: #a8d7c4; }
.media-actions button:last-child { color: #b42626; }
.media-empty { grid-column: 1 / -1; min-height: 260px; padding: 34px; display: grid; place-items: center; align-content: center; gap: 9px; border: 1px dashed #cfe0d8; border-radius: 20px; background: linear-gradient(135deg, rgba(236, 248, 242, .76), rgba(255, 255, 255, .92)); text-align: center; color: var(--jy-muted); }
.media-empty .material-symbols-outlined { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; color: var(--jy-primary); background: #e7f5ef; font-size: 30px; }
.media-empty strong { color: var(--jy-text); font-size: 17px; }
.product-table-scroll { overflow-x: auto; }
.product-catalog-table { width: 100%; min-width: 1080px; border-collapse: collapse; table-layout: fixed; }
.product-catalog-table th { height: 46px; padding: 0 12px; color: #718079; background: #fff; border-bottom: 1px solid var(--jy-border); text-align: left; font-size: 11px; font-weight: 700; }
.product-catalog-table td { min-height: 78px; padding: 11px 12px; border-bottom: 1px solid #edf1ef; color: #33413c; font-size: 12px; vertical-align: middle; }
.product-catalog-table tbody tr:last-child td { border-bottom: 0; }
.product-catalog-table tbody tr:hover td { background: #f9fcfa; }
.product-catalog-table tbody tr.is-inactive td { color: #7a8580; background: #fafbfa; }
.product-catalog-table tbody tr.is-inactive:hover td { background: #f4f7f5; }
.product-catalog-table tbody tr.is-inactive .product-list-image { filter: grayscale(1); opacity: .62; }
.product-catalog-table th:nth-child(1), .product-catalog-table td:nth-child(1) { width: 82px; }
.product-catalog-table th:nth-child(2), .product-catalog-table td:nth-child(2) { width: 120px; }
.product-catalog-table th:nth-child(3), .product-catalog-table td:nth-child(3) { width: 250px; }
.product-catalog-table th:nth-child(4), .product-catalog-table td:nth-child(4) { width: 128px; }
.product-catalog-table th:nth-child(5), .product-catalog-table td:nth-child(5) { width: 142px; }
.product-catalog-table th:nth-child(6), .product-catalog-table td:nth-child(6) { width: 76px; }
.product-catalog-table th:nth-child(7), .product-catalog-table td:nth-child(7) { width: 126px; }
.product-catalog-table th:nth-child(8), .product-catalog-table td:nth-child(8) { width: 92px; }
.product-catalog-table th:nth-child(9), .product-catalog-table td:nth-child(9) { width: 132px; text-align: right; }
.product-list-image { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border: 1px solid #dfe7e3; border-radius: 10px; color: var(--jy-primary); background: #f1f7f4; font: 700 11px/1 var(--jy-number); }
.product-list-image img { width: 100%; height: 100%; object-fit: cover; }
.product-model, .product-price { color: #14251f; font-family: var(--jy-number); }
.product-name-cell { display: grid; gap: 4px; }
.product-name-cell strong { color: #14251f; font-size: 13px; }
.product-name-cell span { overflow: hidden; color: var(--jy-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.product-category-badge { display: inline-flex; min-height: 26px; padding: 0 9px; align-items: center; border-radius: 7px; color: #246047; background: #edf7f2; font-size: 11px; font-weight: 700; }
.product-status-badge { display: inline-flex; align-items: center; gap: 6px; color: #23734f; font-size: 11px; font-weight: 700; }
.product-status-badge i, .product-editor-status i { width: 7px; height: 7px; border-radius: 50%; background: #20a36f; box-shadow: 0 0 0 3px rgba(32, 163, 111, .12); }
.product-status-badge.is-inactive, .product-editor-status.is-inactive { color: #7b6850; }
.product-status-badge.is-inactive i, .product-editor-status.is-inactive i { background: #b09168; box-shadow: 0 0 0 3px rgba(176, 145, 104, .14); }
.product-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.product-action-btn, .product-icon-danger { min-height: 34px; border: 1px solid #d9e4df; border-radius: 8px; background: #fff; cursor: pointer; }
.product-action-btn { padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; color: #29473d; font-size: 11px; font-weight: 700; }
.product-action-btn .material-symbols-outlined, .product-icon-danger .material-symbols-outlined { font-size: 17px; }
.product-action-btn:hover { border-color: #8fc5ae; color: var(--jy-primary); background: #f0f9f5; }
.product-icon-danger { width: 34px; display: inline-grid; place-items: center; color: #a54a45; }
.product-icon-danger:hover { border-color: #e5bbb7; background: #fff6f5; }
.product-readonly-label { color: var(--jy-muted); font-size: 11px; }
.product-empty-state { height: 240px; text-align: center !important; }
.product-empty-state strong, .product-empty-state span { display: block; }
.product-empty-state strong { margin-bottom: 8px; color: var(--jy-text); font-size: 15px; }
.product-empty-state span { color: var(--jy-muted); }

.product-editor-dialog { width: min(620px, 100vw); max-width: none; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; overflow: hidden; border: 0; border-left: 1px solid #dbe5e0; border-radius: 0; color: var(--jy-text); background: #fff; box-shadow: -24px 0 64px rgba(16, 46, 36, .18); }
.product-editor-dialog[open] { animation: product-drawer-in .22s ease-out both; }
.product-editor-dialog::backdrop { background: rgba(18, 30, 26, .46); backdrop-filter: blur(3px); }
@keyframes product-drawer-in { from { opacity: .4; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
.product-editor-panel { height: 100%; display: flex; flex-direction: column; background: #fff; }
.product-editor-header { min-height: 112px; padding: 24px 26px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--jy-border); background: linear-gradient(135deg, #f5fbf8, #fff 68%); }
.product-editor-header .eyebrow { margin: 0 0 5px; color: var(--jy-primary); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.product-editor-header h2 { margin: 0; font: 750 22px/1.25 var(--jy-number); }
.product-editor-header p:last-child { margin: 7px 0 0; color: var(--jy-muted); font-size: 12px; }
.product-editor-close { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #dce6e1; border-radius: 10px; color: #52615b; background: #fff; cursor: pointer; }
.product-editor-body { flex: 1; min-height: 0; padding: 24px 26px 32px; overflow-y: auto; }
.product-editor-image-section { margin-bottom: 25px; padding-bottom: 24px; display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 18px; border-bottom: 1px solid #edf1ef; }
.product-editor-image { width: 108px; height: 108px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #cfdcd6; border-radius: 12px; color: #74817c; background-color: #f5f8f6; background-position: center; background-repeat: no-repeat; background-size: contain; font-size: 11px; }
.product-editor-image-section strong { display: block; margin-bottom: 5px; font-size: 13px; }
.product-editor-image-section p { margin: 0 0 12px; color: var(--jy-muted); font-size: 11px; }
.product-editor-image-actions { display: flex; align-items: center; gap: 12px; }
.product-image-upload { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; cursor: pointer; font-size: 11px; }
.product-image-upload input { display: none; }
.text-danger-btn { padding: 0; border: 0; color: #b34f49; background: transparent; cursor: pointer; font-size: 11px; }
.product-editor-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 14px; }
.product-editor-fields label { min-width: 0; display: grid; gap: 7px; }
.product-editor-fields label.span-2 { grid-column: 1 / -1; }
.product-editor-fields label > span { color: #4f5e58; font-size: 11px; font-weight: 700; }
.product-editor-fields label > span b { color: #b64842; }
.product-editor-fields input, .product-editor-fields select, .product-editor-fields textarea { width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px; border: 1px solid #dbe5e0; border-radius: 9px; outline: 0; color: var(--jy-text); background: #fff; font-size: 12px; box-sizing: border-box; }
.product-editor-fields textarea { min-height: 94px; resize: vertical; line-height: 1.6; }
.product-editor-fields input:focus, .product-editor-fields select:focus, .product-editor-fields textarea:focus { border-color: #5aa98a; box-shadow: 0 0 0 3px rgba(19, 139, 99, .1); }
.product-technical-section { padding: 16px; display: grid; gap: 16px; border: 1px solid #dbe8e2; border-radius: 13px; background: linear-gradient(145deg, #f4faf7, #fff 72%); }
.product-technical-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.product-technical-heading div { display: grid; gap: 4px; }
.product-technical-heading strong { color: #173c2e; font-size: 13px; }
.product-technical-heading small { color: #728079; font-size: 10px; line-height: 1.5; }
.product-technical-heading > .material-symbols-outlined { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--jy-primary); background: #e6f4ed; font-size: 19px; }
.product-technical-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.product-technical-grid label { min-width: 0; display: grid; gap: 7px; }
.product-technical-grid label.span-2 { grid-column: 1 / -1; }
.product-technical-grid label > span { color: #4f5e58; font-size: 11px; font-weight: 700; }
.product-brochure-section { border-color: #e3d6bd; background: linear-gradient(145deg, #fffaf0, #fff 72%); }
.product-brochure-section .product-technical-heading strong { color: #684d22; }
.product-brochure-section .product-technical-heading > .material-symbols-outlined { color: #8b641f; background: #f6ead1; }
.product-brochure-source { padding: 10px 12px; display: flex; align-items: center; gap: 8px; border: 1px solid #eadfc9; border-radius: 9px; color: #70572d; background: rgba(255,255,255,.76); font-size: 10px; line-height: 1.5; }
.product-brochure-source[hidden] { display: none; }
.product-brochure-source::before { content: "verified"; font-family: "Material Symbols Outlined"; color: #9a722c; font-size: 17px; }
.product-brochure-grid textarea { min-height: 78px; }

.media-editor-dialog { width: min(720px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; border: 1px solid #d7e4de; border-radius: 20px; color: var(--jy-text); background: #fff; box-shadow: 0 28px 90px rgba(14, 49, 37, .24); }
.media-editor-dialog::backdrop { background: rgba(15, 29, 24, .52); backdrop-filter: blur(4px); }
.media-editor-panel { max-height: calc(100dvh - 34px); display: flex; flex-direction: column; }
.media-editor-header { padding: 22px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--jy-border); background: linear-gradient(135deg, #edf8f3, #fff 78%); }
.media-editor-header .eyebrow { margin: 0 0 5px; color: var(--jy-primary); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.media-editor-header h2 { margin: 0; font: 750 20px/1.25 var(--jy-number); }
.media-editor-header p:last-child { margin: 6px 0 0; color: var(--jy-muted); font-size: 11px; }
.media-editor-header .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #dbe5e0; border-radius: 10px; color: #60706a; background: #fff; cursor: pointer; }
.media-editor-body { min-height: 0; padding: 22px 24px; display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 22px; overflow-y: auto; }
.media-editor-preview { width: 190px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid #dce7e2; border-radius: 14px; color: #78847f; background-color: #f3f7f5; background-position: center; background-repeat: no-repeat; background-size: contain; font-size: 11px; }
.media-editor-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.media-editor-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.media-editor-fields label { min-width: 0; display: grid; gap: 7px; color: #4f5e58; font-size: 11px; font-weight: 700; }
.media-editor-fields label.span-2 { grid-column: 1 / -1; }
.media-editor-fields input, .media-editor-fields select, .media-editor-fields textarea { width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px; border: 1px solid #dbe5e0; border-radius: 9px; outline: 0; color: var(--jy-text); background: #fff; box-sizing: border-box; }
.media-editor-fields textarea { min-height: 76px; resize: vertical; line-height: 1.55; }
.media-editor-fields input:focus, .media-editor-fields select:focus, .media-editor-fields textarea:focus { border-color: #5aa98a; box-shadow: 0 0 0 3px rgba(19, 139, 99, .1); }
.media-editor-footer { padding: 15px 24px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--jy-border); }
.media-editor-footer > span { color: var(--jy-muted); font-size: 10px; }
.media-editor-footer > div { display: flex; gap: 9px; }
.product-visibility-control { grid-column: 1 / -1; min-height: 74px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #dbe6e1; border-radius: 11px; background: #f8fbf9; }
.product-visibility-control > div:first-child { min-width: 0; display: grid; gap: 4px; }
.product-visibility-control strong { color: #263d34; font-size: 12px; }
.product-visibility-control small { color: #728079; font-size: 10px; line-height: 1.5; }
.product-active-options { flex: 0 0 auto; padding: 3px; display: flex; gap: 3px; border: 1px solid #d8e3de; border-radius: 10px; background: #fff; }
.product-active-options button { min-width: 82px; min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 7px; color: #68766f; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.product-active-options button .material-symbols-outlined { font-size: 16px; }
.product-active-options button.is-selected { color: #fff; background: var(--jy-primary); box-shadow: 0 4px 10px rgba(13, 117, 82, .16); }
.product-active-options button[data-product-active-choice="false"].is-selected { background: #866e50; box-shadow: 0 4px 10px rgba(92, 72, 48, .16); }
.product-editor-footer { min-height: 78px; padding: 15px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--jy-border); background: rgba(255, 255, 255, .97); }
.product-editor-footer > div { display: flex; gap: 10px; }
.product-editor-footer button { min-width: 96px; }
.product-editor-status { display: inline-flex; align-items: center; gap: 8px; color: #4e5f58; font-size: 11px; font-weight: 700; }

@media (max-width: 760px) {
  .product-library-toolbar { align-items: stretch; flex-wrap: wrap; }
  .product-library-search { width: 100%; }
  .product-library-toolbar select { flex: 1; min-width: 0; }
  .product-library-count { align-self: center; }
  .media-page-head { align-items: stretch; flex-direction: column; }
  .media-toolbar { align-items: stretch; flex-direction: column; }
  .media-search { width: 100%; min-width: 0; }
  .media-upload-btn { justify-content: center; }
  .media-stats { align-items: flex-start; flex-direction: column; }
  .media-library-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .product-editor-dialog { width: 100vw; }
  .product-editor-header { min-height: 96px; padding: 19px 18px 16px; }
  .product-editor-header h2 { font-size: 19px; }
  .product-editor-header p:last-child { display: none; }
  .product-editor-body { padding: 20px 18px 28px; }
  .product-editor-image-section { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .product-editor-image { width: 88px; height: 88px; }
  .product-editor-fields { grid-template-columns: 1fr; }
  .product-editor-fields label.span-2 { grid-column: auto; }
  .product-technical-grid { grid-template-columns: 1fr; }
  .product-technical-grid label.span-2 { grid-column: auto; }
  .product-visibility-control { grid-column: auto; align-items: stretch; flex-direction: column; gap: 10px; }
  .product-active-options { width: 100%; }
  .product-active-options button { flex: 1; }
  .product-editor-footer { padding: 13px 18px; }
  .product-editor-status { display: none; }
  .product-editor-footer > div { width: 100%; }
  .product-editor-footer button { flex: 1; }
  .media-editor-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; }
  .media-editor-panel { max-height: calc(100dvh - 22px); }
  .media-editor-body { grid-template-columns: 1fr; padding: 18px; }
  .media-editor-preview { width: 100%; max-height: 210px; }
  .media-editor-fields { grid-template-columns: 1fr; }
  .media-editor-fields label.span-2 { grid-column: auto; }
  .media-editor-footer { padding: 14px 18px 18px; align-items: stretch; flex-direction: column; }
  .media-editor-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .product-editor-dialog[open] { animation: none; }
}

@media print {
  .product-editor-dialog { display: none !important; }
}

/* Password management: self-service for every role and scoped resets for admins. */
.password-dialog {
  width: min(500px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 105, 73, .16);
  border-radius: 20px;
  color: var(--jy-text);
  background: #fff;
  box-shadow: 0 28px 90px rgba(14, 49, 37, .24);
}
.password-dialog[open] { animation: password-dialog-in .18s ease-out both; }
.password-dialog::backdrop { background: rgba(15, 29, 24, .52); backdrop-filter: blur(4px); }
@keyframes password-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.password-dialog-panel { margin: 0; display: flex; flex-direction: column; background: #fff; }
.password-dialog-header {
  min-height: 92px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--jy-border);
  background: linear-gradient(135deg, #edf8f3, #fff 78%);
}
.password-dialog-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, var(--jy-primary), var(--jy-primary-bright)); box-shadow: 0 10px 24px rgba(0, 105, 73, .2); }
.password-dialog-icon .material-symbols-outlined { font-size: 23px; }
.password-dialog-header h2 { margin: 0; font: 750 20px/1.25 var(--jy-number); }
.password-dialog-header p { margin: 5px 0 0; color: var(--jy-muted); font-size: 12px; line-height: 1.5; }
.password-dialog-header .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #dbe5e0; border-radius: 10px; color: #60706a; background: #fff; cursor: pointer; }
.password-dialog-body { padding: 22px 24px 10px; display: grid; gap: 16px; overflow-y: auto; }
.password-dialog-body > label { display: grid; gap: 7px; color: #405149; font-size: 12px; font-weight: 700; }
.password-dialog-body > label[hidden], .password-target[hidden] { display: none !important; }
.password-input-wrap { min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 42px; border: 1px solid #d9e4df; border-radius: 10px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }
.password-input-wrap:focus-within { border-color: #59aa89; box-shadow: 0 0 0 3px rgba(19, 139, 99, .1); }
.password-input-wrap input { min-width: 0; height: 42px; padding: 0 12px; border: 0; outline: 0; background: transparent; }
.password-input-wrap button { width: 42px; height: 42px; display: grid; place-items: center; border: 0; color: #718079; background: transparent; cursor: pointer; }
.password-input-wrap button:hover { color: var(--jy-primary); }
.password-target { padding: 12px 14px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid #dceae4; border-radius: 11px; color: var(--jy-primary); background: #f2faf6; }
.password-target > .material-symbols-outlined { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--jy-primary); }
.password-target div { min-width: 0; display: grid; gap: 3px; }
.password-target strong { overflow: hidden; color: #17372c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.password-target small { overflow: hidden; color: #63766f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.password-requirement { margin: 0; display: flex; align-items: flex-start; gap: 7px; color: #75827d; font-size: 11px; line-height: 1.55; }
.password-requirement .material-symbols-outlined { margin-top: 1px; color: #6f9b88; font-size: 16px; }
.password-form-error { min-height: 18px; margin: -6px 0 0; color: var(--jy-error); font-size: 12px; }
.password-dialog-footer { padding: 16px 24px 22px; display: flex; justify-content: flex-end; gap: 10px; }
.password-dialog-footer button { min-width: 104px; min-height: 40px; }
.reset-password-btn { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.reset-password-btn .material-symbols-outlined { font-size: 16px; }
.permission-muted { color: #9aa49f; font-size: 11px; white-space: nowrap; }
.user-management-table th:last-child, .user-management-table td:last-child { width: 116px; text-align: right; }

@media (max-width: 560px) {
  .password-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; }
  .password-dialog-header { padding: 18px; grid-template-columns: 42px minmax(0, 1fr) 34px; gap: 11px; }
  .password-dialog-icon { width: 42px; height: 42px; border-radius: 12px; }
  .password-dialog-header h2 { font-size: 18px; }
  .password-dialog-body { padding: 18px 18px 8px; }
  .password-dialog-footer { padding: 14px 18px 18px; }
  .password-dialog-footer button { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .password-dialog[open] { animation: none; }
}

@media print {
  .password-dialog { display: none !important; }
}

/* Cooperation order and receivables workflow. */
.dashboard-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.records-toolbar [data-open-recycle] { display: inline-flex; align-items: center; gap: 6px; }
.records-toolbar [data-open-recycle] .material-symbols-outlined { font-size: 17px; }
.orders-head { align-items: flex-end; }
.order-toolbar { display: flex; align-items: center; gap: 9px; }
.order-toolbar input, .order-toolbar select { min-height: 40px; border: 1px solid #dce6e1; border-radius: 9px; background: #fff; }
.order-toolbar input { width: 230px; }
.order-toolbar select { width: 142px; }
.order-list { display: grid; gap: 12px; }
.order-workflow-card { padding: 16px; display: grid; grid-template-columns: minmax(280px, 1.35fr) minmax(190px, .75fr) minmax(275px, 1fr) auto; align-items: center; gap: 18px; border: 1px solid var(--jy-border); border-radius: 15px; background: #fff; box-shadow: 0 10px 34px rgba(30, 57, 48, .045); }
.order-workflow-card:hover { border-color: #cadbd3; box-shadow: 0 14px 38px rgba(25, 67, 52, .07); }
.order-card-main { min-width: 0; display: grid; gap: 10px; }
.order-card-heading { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; }
.order-card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #006949, #149568); box-shadow: 0 8px 20px rgba(0, 105, 73, .15); }
.order-card-heading h3 { margin: 0 0 3px; overflow: hidden; color: #18332a; font: 750 14px/1.35 var(--jy-number); text-overflow: ellipsis; white-space: nowrap; }
.order-card-heading p { margin: 0; overflow: hidden; color: var(--jy-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.order-status-badge { min-height: 25px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; color: #8b651b; background: #fff5d8; font-size: 10px; font-weight: 750; }
.order-status-badge.deposit_received, .order-status-badge.paid, .order-status-badge.completed { color: #087353; background: #e8f7f0; }
.order-status-badge.in_production, .order-status-badge.ready_to_ship, .order-status-badge.shipped { color: #225e96; background: #eaf3fb; }
.order-status-badge.balance_pending { color: #a95c1e; background: #fff0e3; }
.order-status-badge.cancelled { color: #a74b46; background: #fff0ef; }
.order-delivery-meta { display: flex; flex-wrap: wrap; gap: 12px; color: #75817c; font-size: 10px; }
.order-delivery-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.order-delivery-meta .material-symbols-outlined { font-size: 15px; color: #6d9383; }
.order-card-finance { min-width: 0; padding: 0 18px; display: grid; gap: 5px; border-left: 1px solid #edf1ef; border-right: 1px solid #edf1ef; }
.order-money-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #68756f; font-size: 10px; }
.order-money-row strong { color: #203c32; font: 700 12px/1.4 var(--jy-number); }
.order-money-row.received strong { color: #087755; }
.order-money-row.outstanding strong { color: #b16b23; }
.order-collection-progress { margin-top: 4px; display: grid; grid-template-columns: minmax(80px, 1fr) auto; align-items: center; gap: 7px; }
.order-collection-progress i { height: 6px; overflow: hidden; border-radius: 999px; background: #e9efec; }
.order-collection-progress b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #0c7957, #22ad78); }
.order-collection-progress span { color: #718079; font-size: 9px; white-space: nowrap; }
.order-card-profit { display: grid; grid-template-columns: repeat(2, minmax(85px, 1fr)); gap: 7px; }
.order-card-profit > div { padding: 8px 10px; display: grid; gap: 3px; border: 1px solid #edf1ef; border-radius: 9px; background: #fafcfb; }
.order-card-profit span { color: #77837e; font-size: 9px; }
.order-card-profit strong { color: #213b32; font: 700 11px/1.3 var(--jy-number); }
.order-card-profit .order-profit-highlight { border-color: #147a5a; color: #fff; background: linear-gradient(135deg, #0a684d, #128660); }
.order-card-profit .order-profit-highlight span, .order-card-profit .order-profit-highlight strong { color: #fff; }
.order-card-actions { display: grid; gap: 7px; }
.order-card-actions button { min-width: 86px; min-height: 36px; white-space: nowrap; }
.order-empty { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 13px; }
.order-empty > .material-symbols-outlined { color: #8a9b94; font-size: 32px; }
.order-empty strong { display: block; margin-bottom: 3px; }
.order-empty p { margin: 0; color: var(--jy-muted); }

.order-dialog { width: min(980px, 100vw); max-width: none; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; overflow: hidden; border: 0; border-left: 1px solid #dce5e1; border-radius: 0; color: var(--jy-text); background: #f5f8f6; box-shadow: -24px 0 70px rgba(13, 46, 35, .22); }
.order-dialog[open] { animation: product-drawer-in .22s ease-out both; }
.order-dialog::backdrop, .recycle-dialog::backdrop { background: rgba(15, 29, 24, .48); backdrop-filter: blur(3px); }
.order-dialog-panel { height: 100%; display: flex; flex-direction: column; }
.order-dialog-header { min-height: 104px; padding: 22px 26px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--jy-border); background: linear-gradient(135deg, #eff8f4, #fff 72%); }
.order-dialog-header .eyebrow, .recycle-dialog header .eyebrow { margin: 0 0 5px; color: var(--jy-primary); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.order-dialog-header h2, .recycle-dialog header h2 { margin: 0; font: 750 22px/1.25 var(--jy-number); }
.order-dialog-header p:last-child, .recycle-dialog header p:last-child { margin: 6px 0 0; color: var(--jy-muted); font-size: 11px; }
.order-dialog-header .icon-btn, .recycle-dialog header .icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #dce5e1; border-radius: 10px; color: #5f6e68; background: #fff; cursor: pointer; }
.order-dialog-body { flex: 1; min-height: 0; padding: 20px 26px 34px; display: grid; align-content: start; gap: 16px; overflow-y: auto; }
.order-dialog-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.order-dialog-summary article { min-height: 86px; padding: 15px; display: grid; align-content: center; gap: 7px; border: 1px solid var(--jy-border); border-radius: 12px; background: #fff; }
.order-dialog-summary span { color: #738079; font-size: 10px; }
.order-dialog-summary strong { color: #17342a; font: 750 19px/1.2 var(--jy-number); }
.order-dialog-summary article:nth-child(2) strong { color: #0a7b57; }
.order-dialog-summary article:nth-child(3) strong { color: #b26a21; }
.order-dialog-summary article:last-child { border-color: #0d7958; background: #0c7153; }
.order-dialog-summary article:last-child span, .order-dialog-summary article:last-child strong { color: #fff; }
.order-dialog-section { padding: 20px; border: 1px solid var(--jy-border); border-radius: 14px; background: #fff; }
.order-section-title { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.order-section-title > div { display: flex; align-items: center; gap: 10px; }
.order-section-title > div > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--jy-primary); font: 700 10px/1 var(--jy-number); }
.order-section-title div div { display: grid; gap: 2px; }
.order-section-title strong { font-size: 13px; }
.order-section-title small { color: var(--jy-muted); font-size: 10px; }
.order-edit-form, .order-payment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.order-payment-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.order-edit-form label, .order-payment-form label { min-width: 0; display: grid; gap: 6px; }
.order-edit-form label > span, .order-payment-form label > span { color: #56665f; font-size: 10px; font-weight: 700; }
.order-edit-form input, .order-edit-form select, .order-edit-form textarea, .order-payment-form input, .order-payment-form select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #dbe5e0; border-radius: 9px; background: #fff; box-sizing: border-box; }
.order-edit-form textarea { resize: vertical; line-height: 1.5; }
.order-edit-form .span-2, .order-payment-form .span-2 { grid-column: 1 / -1; }
.order-form-actions { display: flex; justify-content: flex-end; }
.order-form-actions button { min-width: 142px; }
.payment-voucher-preview { min-height: 78px; padding: 10px; display: flex; align-items: center; gap: 12px; border: 1px dashed #cbdcd4; border-radius: 10px; color: #60716a; background: #f6faf8; font-size: 11px; }
.payment-voucher-preview[hidden] { display: none; }
.payment-voucher-preview img { width: 72px; height: 58px; object-fit: contain; border-radius: 7px; background: #fff; }
.error-text { color: var(--jy-error); }
.order-payment-list { margin-top: 18px; border-top: 1px solid #edf1ef; }
.order-payment-row { min-height: 70px; padding: 12px 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; border-bottom: 1px solid #edf1ef; }
.payment-type-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #087657; background: #eaf7f1; }
.payment-type-icon .material-symbols-outlined { font-size: 18px; }
.order-payment-row > div:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.order-payment-row strong { color: #1a382e; font-size: 11px; }
.order-payment-row span, .order-payment-row small { overflow: hidden; color: #74817c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.order-payment-row > a { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.payment-delete-btn { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #b0524d; background: transparent; cursor: pointer; }
.payment-delete-btn:hover { background: #fff0ef; }
.payment-delete-btn .material-symbols-outlined { font-size: 17px; }
.order-payment-empty { min-height: 100px; display: grid; place-items: center; align-content: center; gap: 5px; color: #8a9791; }
.order-payment-empty .material-symbols-outlined { font-size: 28px; }
.order-payment-empty p { margin: 0; font-size: 10px; }

.recycle-dialog { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: min(720px, calc(100dvh - 32px)); padding: 0; overflow: hidden; border: 1px solid #d9e4df; border-radius: 18px; background: #fff; box-shadow: 0 28px 80px rgba(14, 48, 36, .24); }
.recycle-dialog-panel { display: flex; flex-direction: column; max-height: inherit; }
.recycle-dialog header { padding: 21px 23px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--jy-border); background: linear-gradient(135deg, #f0f8f4, #fff 75%); }
.recycle-list { min-height: 240px; padding: 10px 22px 22px; overflow-y: auto; }
.recycle-row { min-height: 84px; padding: 13px 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid #edf1ef; }
.recycle-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #687972; background: #eef3f0; }
.recycle-row > div:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.recycle-row strong { overflow: hidden; color: #1c372e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.recycle-row span, .recycle-row small { overflow: hidden; color: #74817b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.recycle-row button { min-height: 36px; display: inline-flex; align-items: center; gap: 5px; }
.recycle-row button .material-symbols-outlined { font-size: 17px; }
.recycle-empty, .recycle-loading { min-height: 240px; display: grid; place-items: center; align-content: center; gap: 7px; color: #829089; text-align: center; }
.recycle-empty .material-symbols-outlined { font-size: 35px; }
.recycle-empty p { margin: 0; font-size: 11px; }

.customer-page-head { align-items: flex-end; }
.customer-toolbar input { width: min(330px, 36vw); min-height: 42px; padding: 0 14px; border: 1px solid #dce6e1; border-radius: 10px; background: #fff; }
.customer-metrics { margin-bottom: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.customer-metrics article { min-height: 104px; padding: 17px 18px; display: grid; align-content: center; gap: 5px; border: 1px solid var(--jy-border); border-radius: 14px; background: #fff; }
.customer-metrics span { color: #68766f; font-size: 11px; font-weight: 600; }
.customer-metrics strong { color: #173c30; font: 750 23px/1.15 var(--jy-number); }
.customer-metrics small { color: #94a099; font-size: 9px; }
.customer-metrics .customer-deal-metric { border-color: #b9ddcd; background: linear-gradient(135deg, #edf9f3, #fff); }
.customer-metrics .customer-deal-metric strong { color: #087657; }
.customer-list { overflow: hidden; border: 1px solid var(--jy-border); border-radius: 15px; background: #fff; }
.customer-row { min-height: 94px; padding: 15px 17px; display: grid; grid-template-columns: 48px minmax(250px, 1.35fr) minmax(125px, .55fr) minmax(125px, .55fr) minmax(150px, .65fr) auto; align-items: center; gap: 16px; border-bottom: 1px solid #edf1ef; transition: background .16s ease; }
.customer-row:last-child { border-bottom: 0; }
.customer-row:hover { background: #f8fbf9; }
.customer-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: #087657; background: linear-gradient(145deg, #dff3ea, #f5fbf8); font: 800 13px/1 var(--jy-number); }
.customer-identity { min-width: 0; display: grid; gap: 4px; }
.customer-identity strong { overflow: hidden; color: #17382d; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.customer-identity span, .customer-identity small { overflow: hidden; color: #718079; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.customer-identity small { display: flex; align-items: center; gap: 3px; }
.customer-identity .material-symbols-outlined { font-size: 14px; color: #80a092; }
.customer-stat { min-width: 0; display: grid; gap: 4px; }
.customer-stat > span { color: #8a9690; font-size: 9px; font-weight: 700; }
.customer-stat strong { color: #29453b; font: 750 13px/1.3 var(--jy-number); }
.customer-stat small { overflow: hidden; color: #8c9892; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.customer-stat.customer-deal strong { color: #087657; }
.customer-detail-btn { min-height: 36px; white-space: nowrap; }
.customer-empty { min-height: 290px; display: grid; place-items: center; align-content: center; gap: 7px; color: #84918b; text-align: center; }
.customer-empty .material-symbols-outlined { font-size: 36px; color: #a8bbb2; }
.customer-empty p { margin: 0; font-size: 11px; }
.customer-empty.compact { min-height: 130px; }

.customer-dialog { width: min(920px, 100vw); max-width: none; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; overflow: hidden; border: 0; border-left: 1px solid #dce5e1; border-radius: 0; color: var(--jy-text); background: #f5f8f6; box-shadow: -24px 0 70px rgba(13, 46, 35, .22); }
.customer-dialog[open] { animation: product-drawer-in .22s ease-out both; }
.customer-dialog::backdrop { background: rgba(15, 29, 24, .48); backdrop-filter: blur(3px); }
.customer-dialog-panel { height: 100%; display: flex; flex-direction: column; }
.customer-dialog-header { min-height: 104px; padding: 22px 26px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--jy-border); background: linear-gradient(135deg, #eff8f4, #fff 72%); }
.customer-dialog-header .eyebrow { margin: 0 0 5px; color: var(--jy-primary); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.customer-dialog-header h2 { margin: 0; color: #17382d; font: 750 22px/1.25 var(--jy-number); }
.customer-dialog-header p:last-child { margin: 5px 0 0; color: #728079; font-size: 10px; }
.customer-dialog-body { padding: 18px 22px 32px; overflow-y: auto; }
.customer-dialog-summary { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.customer-dialog-summary article { min-height: 76px; padding: 13px 14px; display: grid; align-content: center; gap: 5px; border: 1px solid var(--jy-border); border-radius: 11px; background: #fff; }
.customer-dialog-summary span { color: #7c8983; font-size: 9px; }
.customer-dialog-summary strong { color: #173d30; font: 750 16px/1.2 var(--jy-number); }
.customer-dialog-summary article:last-child { border-color: #9fd1bc; background: #eaf7f1; }
.customer-dialog-section { margin-top: 14px; padding: 18px; border: 1px solid var(--jy-border); border-radius: 14px; background: #fff; }
.customer-section-title { margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.customer-section-title > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #0a8262; font-size: 10px; font-weight: 800; }
.customer-section-title > div { display: grid; gap: 2px; }
.customer-section-title strong { color: #213e34; font-size: 13px; }
.customer-section-title small { color: #87948e; font-size: 9px; }
.customer-edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.customer-edit-form label { display: grid; gap: 6px; color: #5d6d66; font-size: 10px; font-weight: 600; }
.customer-edit-form input, .customer-edit-form textarea { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid #dce5e1; border-radius: 9px; background: #fff; font-size: 12px; }
.customer-edit-form textarea { min-height: 78px; resize: vertical; }
.customer-edit-form .span-2 { grid-column: 1 / -1; }
.customer-form-actions { display: flex; justify-content: flex-end; }
.customer-form-actions button { min-width: 140px; }
.customer-quote-history { border-top: 1px solid #edf1ef; }
.customer-history-row { min-height: 78px; padding: 12px 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(120px, auto) auto; align-items: center; gap: 11px; border-bottom: 1px solid #edf1ef; }
.customer-history-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #087657; background: #eaf7f1; }
.customer-history-icon .material-symbols-outlined { font-size: 18px; }
.customer-history-row > div:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.customer-history-row > div:nth-child(2) strong { color: #203d33; font-size: 11px; }
.customer-history-row > div:nth-child(2) span, .customer-history-row > div:nth-child(2) small { overflow: hidden; color: #7e8a84; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.customer-history-money { display: grid; gap: 3px; text-align: right; }
.customer-history-money strong { color: #153c2f; font: 750 12px/1.3 var(--jy-number); }
.customer-history-money small { color: #809087; font-size: 9px; }

@media (max-width: 1380px) {
  .order-workflow-card { grid-template-columns: minmax(260px, 1.15fr) minmax(180px, .7fr) minmax(230px, .9fr); }
  .order-card-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
}

@media (max-width: 900px) {
  .customer-page-head { align-items: stretch; flex-direction: column; }
  .customer-toolbar input { width: 100%; }
  .customer-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-row { grid-template-columns: 46px minmax(0, 1fr) minmax(120px, .5fr); }
  .customer-order-stat { display: none; }
  .orders-head { align-items: stretch; flex-direction: column; }
  .order-toolbar { width: 100%; }
  .order-toolbar input { flex: 1; width: auto; }
  .order-workflow-card { grid-template-columns: 1fr 1fr; }
  .order-card-main { grid-column: 1 / -1; }
  .order-card-finance { padding-left: 0; border-left: 0; }
  .order-card-actions { grid-column: 1 / -1; }
  .order-dialog { width: 100vw; }
}

@media (max-width: 620px) {
  .customer-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .customer-metrics article { min-height: 90px; padding: 13px; }
  .customer-row { padding: 14px; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; }
  .customer-avatar { width: 40px; height: 40px; }
  .customer-stat { grid-column: 2; }
  .customer-detail-btn { grid-column: 2; justify-self: start; }
  .customer-dialog { width: 100vw; }
  .customer-dialog-header { padding: 18px; }
  .customer-dialog-body { padding: 13px 13px 28px; }
  .customer-dialog-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-edit-form { grid-template-columns: 1fr; }
  .customer-edit-form .span-2 { grid-column: auto; }
  .customer-form-actions button { width: 100%; }
  .customer-history-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .customer-history-money { grid-column: 2; text-align: left; }
  .customer-history-row > button { grid-column: 3; grid-row: 1 / span 2; }
  .order-toolbar { align-items: stretch; flex-direction: column; }
  .order-toolbar input, .order-toolbar select { width: 100%; }
  .order-workflow-card { padding: 14px; grid-template-columns: 1fr; gap: 14px; }
  .order-card-main, .order-card-actions { grid-column: auto; }
  .order-card-finance { padding: 12px 0; border: 0; border-top: 1px solid #edf1ef; border-bottom: 1px solid #edf1ef; }
  .order-card-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .order-dialog-header { min-height: 92px; padding: 18px; }
  .order-dialog-header h2 { font-size: 18px; }
  .order-dialog-body { padding: 14px 14px 28px; }
  .order-dialog-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-dialog-section { padding: 15px; }
  .order-edit-form, .order-payment-form { grid-template-columns: 1fr; }
  .order-edit-form .span-2, .order-payment-form .span-2 { grid-column: auto; }
  .order-form-actions button { width: 100%; }
  .order-payment-row { grid-template-columns: 34px minmax(0, 1fr) 30px; }
  .order-payment-row > a { grid-column: 2; justify-self: start; }
  .recycle-dialog { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); border-radius: 14px; }
  .recycle-dialog header { padding: 18px; }
  .recycle-list { padding: 7px 16px 18px; }
  .recycle-row { grid-template-columns: 38px minmax(0, 1fr); }
  .recycle-row button { grid-column: 2; justify-self: start; }
}

@media print {
  .order-dialog, .recycle-dialog, .customer-dialog { display: none !important; }
}