:root {
  --bg: #f4f6f5;
  --panel: #ffffff;
  --ink: #1f2a2a;
  --muted: #70807d;
  --line: #dfe7e4;
  --soft: #e9f5f2;
  --brand: #0f766e;
  --brand-dark: #0b4d47;
  --gold: #c9964a;
  --warm: #f8efe4;
  --danger: #c05a46;
  --danger-soft: #fff0ed;
  --shadow: 0 14px 36px rgba(26, 45, 43, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(130deg, rgba(15, 118, 110, 0.07), transparent 31%),
    linear-gradient(315deg, rgba(201, 150, 74, 0.1), transparent 34%), var(--bg);
}

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

button {
  cursor: pointer;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.login-panel {
  width: min(440px, 100%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 28px;
  display: grid;
  gap: 24px;
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px 1fr;
}

.sidebar {
  background: #102321;
  color: rgba(255, 255, 255, 0.8);
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sidebar-close,
.sidebar-backdrop { display: none; }
.topbar .tablet-menu-btn { display: none; }

.brand {
  color: #fff;
  font-weight: 950;
  font-size: 17px;
  margin-bottom: 16px;
}

.topbar-title { flex: 1; min-width: 0; }

.role-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 14px;
}

.role-card b {
  display: block;
  color: #fff;
  margin-bottom: 4px;
}

.nav-search {
  height: 38px;
  margin-bottom: 8px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .62);
}

.nav-search input {
  min-height: 0;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 13px;
}

.nav-search input::placeholder { color: rgba(255, 255, 255, .48); }
.nav-search input:focus { box-shadow: none; }
.nav-search-clear { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
.nav-search-clear[hidden] { display: none; }
.nav-search kbd,
.topbar-search kbd {
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 5px;
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font-family: inherit;
  font-size: 10px;
  line-height: 1.2;
}

.nav-section {
  margin: 12px 0 5px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  font-weight: 900;
}

.nav-section-toggle {
  width: 100%;
  min-height: 28px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.nav-section-static { padding: 0 4px; }
.nav-section-meta { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; }
.nav-section-meta i { font-style: normal; transition: transform .16s ease; }
.nav-group.collapsed .nav-section-meta i { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-items { display: none; }
.nav-link-row { display: grid; grid-template-columns: minmax(0, 1fr) 27px; gap: 3px; align-items: center; }
.nav-link-row + .nav-link-row { margin-top: 2px; }
.nav-favorites { margin-bottom: 5px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.nav-favorite {
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, .24);
  font-size: 14px;
}
.nav-favorite:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-favorite.active { color: #f1c56f; }
.nav-no-result { padding: 22px 8px; color: rgba(255, 255, 255, .55); font-size: 13px; text-align: center; }

.nav-btn {
  width: 100%;
  min-height: 31px;
  border: 0;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  text-align: left;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
}

.nav-btn.active,
.nav-btn:hover {
  color: #fff;
  background: rgba(15, 118, 110, 0.86);
}
.nav-btn-label { min-width: 0; display: flex; align-items: center; gap: 6px; }
.nav-live-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ed665c; color: #fff; display: inline-grid; place-items: center; font-size: 10px; font-style: normal; line-height: 1; box-shadow: 0 3px 8px rgba(237, 102, 92, .3); }
.nav-live-badge[hidden] { display: none; }

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

.topbar {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
}

.topbar h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
}

.topbar p {
  margin: 4px 0 0;
}

.eyebrow {
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
  margin: 0 0 7px;
}

.muted {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

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

.topbar-search kbd { border-color: var(--line); background: var(--bg); color: var(--muted); }
.quick-create-menu {
  position: absolute;
  z-index: 35;
  top: 50px;
  right: 78px;
  width: min(320px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(12, 42, 38, .2);
}
.quick-create-menu[hidden] { display: none; }
.quick-create-head { padding: 8px 9px 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.quick-create-head span { color: var(--muted); font-size: 11px; }
.quick-create-menu > button { width: 100%; padding: 10px 9px; border: 0; border-radius: 8px; background: transparent; display: grid; gap: 3px; text-align: left; color: var(--ink); }
.quick-create-menu > button:hover { background: var(--soft); color: var(--brand-dark); }
.quick-create-menu > button span { color: var(--muted); font-size: 12px; }

.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn {
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.primary-btn {
  background: var(--brand);
  color: #fff;
}

.ghost-btn {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}

.danger-btn {
  background: var(--danger-soft);
  border-color: #f4c7bc;
  color: var(--danger);
}

.icon-btn {
  width: 34px;
  padding: 0;
  background: #fff;
  border-color: var(--line);
  color: var(--brand-dark);
}

.grid {
  display: grid;
  gap: 14px;
}

.stats {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
}

.customer-stats {
  grid-template-columns: repeat(8, minmax(140px, 1fr));
  overflow-x: auto;
  padding-bottom: 4px;
}

.customer-stats .stat-card {
  min-width: 140px;
}

.two-col {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.55fr);
  align-items: start;
}

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

.customer-detail-records {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.customer-detail-records > .panel {
  width: 100%;
  min-width: 0;
}

body.has-customer-record-modal { overflow: hidden; }
.customer-record-modal { z-index: 86; }
.customer-record-modal .modal-backdrop { border: 0; }
.customer-record-modal-panel { width: min(920px, 100%); padding: 20px; }
.customer-record-kicker { margin: 0 0 4px; color: #0f766e; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.customer-record-modal-panel .panel-head h2 { margin: 0; }
.customer-record-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; }
.customer-record-details > div { min-width: 0; padding: 12px 14px; border: 1px solid #e0e9e6; border-radius: 8px; background: #f8fbfa; }
.customer-record-details dt { color: #7a8985; font-size: 12px; }
.customer-record-details dd { margin: 6px 0 0; color: #24423d; font-size: 14px; font-weight: 650; white-space: pre-wrap; overflow-wrap: anywhere; }
.customer-record-files { margin-top: 14px; }
.customer-record-related { margin-top: 18px; }
.customer-record-related h3 { margin: 0 0 9px; color: #27443f; font-size: 15px; }
.customer-record-review, .customer-record-lock-note { margin-top: 16px; padding: 13px 15px; border: 1px solid #cfe3de; border-radius: 8px; background: #f2faf8; color: #526863; }
.customer-record-review { display: grid; gap: 5px; }
.customer-record-review b { color: #174f47; }
.customer-record-review p { margin: 0; }
.customer-record-bottom { justify-content: flex-end; margin-top: 18px; }
.customer-record-modal-panel form { margin-top: 18px; }

@media (max-width: 720px) {
  .customer-record-modal { padding: 8px; }
  .customer-record-modal-panel { max-height: calc(100vh - 16px); padding: 14px; }
  .customer-record-details { grid-template-columns: 1fr; }
}

.panel,
.stat-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(26, 45, 43, 0.06);
}

.panel {
  padding: 16px;
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-head h2,
.panel h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
}

.stat-card {
  padding: 14px;
  min-height: 94px;
}

.stat-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.stat-card strong {
  display: block;
  font-size: 25px;
  margin: 9px 0 3px;
}

.stat-card small {
  color: var(--brand);
  font-weight: 900;
}

.dashboard-workbench { margin-bottom: 14px; background: linear-gradient(135deg, #fff, #f2faf7); }
.dashboard-shortcuts { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.dashboard-shortcuts .ghost-btn { min-height: 30px; padding: 0 10px; font-size: 12px; }
.dashboard-tasks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dashboard-task {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  text-align: left;
  color: var(--ink);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.dashboard-task:hover { transform: translateY(-2px); border-color: #a9d6ce; box-shadow: 0 8px 20px rgba(15, 118, 110, .1); }
.dashboard-task > span { color: var(--muted); font-size: 12px; font-weight: 850; }
.dashboard-task strong { grid-row: span 2; color: var(--brand-dark); font-size: 25px; line-height: 1; }
.dashboard-task small { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.dashboard-task i { grid-column: 1 / -1; margin-top: 5px; color: var(--brand); font-size: 11px; font-style: normal; font-weight: 900; }

.positive { color: #087864 !important; }
.negative { color: var(--danger) !important; }
.marketing-filter-panel { margin-bottom: 14px; background: linear-gradient(135deg, #fff, #f1faf7); }
.marketing-filter-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.marketing-filter-form label { min-width: 150px; }
.marketing-filter-form > .muted { align-self: center; margin-left: auto; }
.marketing-data-tabs { margin-bottom: 14px; padding: 5px; border: 1px solid #d7e5e1; border-radius: 12px; background: #edf4f2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.marketing-data-tabs button { min-width: 0; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: #647671; font-size: 13px; font-weight: 850; cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.marketing-data-tabs button:hover { color: #0f766e; }
.marketing-data-tabs button.active { background: #fff; color: #0f766e; box-shadow: 0 3px 10px rgba(24, 67, 59, .11); }
.marketing-data-tabs button:active { transform: scale(.99); }
.marketing-tab-panel { margin-top: 0; }
.marketing-tab-panel[hidden] { display: none !important; }
.marketing-tab-panel > .marketing-stats { margin-top: 0; }
.finance-page { width: 100%; }
.finance-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.finance-toolbar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.finance-summary { grid-template-columns: repeat(4, minmax(170px, 1fr)); margin-top: 14px; }
.finance-summary .stat-card { min-height: 145px; }
.finance-summary .stat-card strong { font-size: clamp(27px, 2.4vw, 38px); }
.finance-available-card { color: #fff; border-color: #0f766e; background: linear-gradient(140deg, #145d54, #0f766e); }
.finance-available-card span,
.finance-available-card small,
.finance-available-card strong { color: #fff; }
.finance-period-summary { grid-template-columns: repeat(3, minmax(170px, 1fr)); margin-top: 14px; }
.finance-period-summary .stat-card { min-height: 108px; }
.finance-period-summary strong { font-size: 24px; }
.finance-income-text { color: #0f766e !important; }
.finance-expense-text { color: #c44d42 !important; }
.finance-ledger-panel { margin-top: 14px; }
.finance-tabs { margin: 14px 0; padding: 4px; border: 1px solid #dce8e5; border-radius: 10px; background: #f1f6f4; display: flex; width: fit-content; max-width: 100%; }
.finance-tabs button { min-width: 112px; height: 38px; padding: 0 18px; border: 0; border-radius: 7px; background: transparent; color: #63736f; font-weight: 800; cursor: pointer; }
.finance-tabs button.active { background: #fff; color: #0f766e; box-shadow: 0 2px 8px rgba(24, 67, 59, .1); }
.finance-direction { display: inline-flex; min-width: 48px; height: 26px; padding: 0 9px; align-items: center; justify-content: center; border-radius: 999px; background: #e8f7f3; color: #0f766e; font-size: 12px; font-weight: 900; }
.finance-direction.expense { background: #fff0ed; color: #b84439; }
.finance-amount { white-space: nowrap; font-size: 16px; }
.finance-amount.income { color: #0f766e; }
.finance-amount.expense { color: #c44d42; }
.finance-stat-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(390px, .9fr); gap: 14px; align-items: start; }
.finance-monthly-list { display: grid; gap: 7px; }
.finance-month-row { width: 100%; min-width: 680px; padding: 9px 10px; border: 1px solid #e2ebe8; border-radius: 8px; background: #fbfdfc; display: grid; grid-template-columns: 42px minmax(140px, 1fr) 220px 110px; align-items: center; gap: 12px; color: #294942; text-align: left; cursor: pointer; }
.finance-month-row:hover { border-color: #9dcec5; background: #f5fbf9; }
.finance-month-row > b { font-size: 14px; }
.finance-month-row > span { display: flex; gap: 10px; color: #6c7d79; font-size: 11px; }
.finance-month-row i { font-style: normal; white-space: nowrap; }
.finance-month-row > strong { text-align: right; color: #0f766e; white-space: nowrap; }
.finance-month-row > strong.negative { color: #c44d42; }
.finance-flow-bars { position: relative; height: 20px; border-radius: 5px; background: #edf3f1; overflow: hidden; }
.finance-flow-bars span { position: absolute; left: 0; height: 6px; border-radius: 0 4px 4px 0; }
.finance-flow-bars .income { top: 3px; background: #44aa9a; }
.finance-flow-bars .expense { bottom: 3px; background: #e18579; }
.finance-monthly-panel { overflow: hidden; }
.finance-monthly-panel .finance-monthly-list { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.finance-form-note { padding: 12px 14px; border: 1px solid #cfe3de; border-radius: 8px; background: #f1faf7; color: #5f716d; line-height: 1.6; }
.finance-modal .modal-panel { width: min(760px, 100%); }
.finance-mobile-ledger { display: none; }
.finance-mobile-card { padding: 14px; border: 1px solid #dce8e5; border-radius: 11px; background: #fff; box-shadow: 0 5px 16px rgba(23, 63, 57, .06); }
.finance-mobile-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.finance-mobile-card-head > div { min-width: 0; display: flex; align-items: center; gap: 8px; }
.finance-mobile-card-head > div b { min-width: 0; overflow-wrap: anywhere; color: #244942; }
.finance-mobile-card-head > strong { flex: 0 0 auto; font-size: 18px; }
.finance-mobile-meta { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.finance-mobile-meta span { padding: 9px 10px; border-radius: 8px; background: #f4f8f7; color: #7a8a86; font-size: 11px; }
.finance-mobile-meta b { margin-top: 3px; display: block; color: #334f49; font-size: 13px; }
.finance-mobile-link { margin-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #425d57; font-size: 13px; }
.finance-mobile-link span { min-width: 0; overflow-wrap: anywhere; }
.finance-mobile-link small { flex: 0 0 auto; color: #84918e; }
.finance-mobile-card > p { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed #dce8e5; color: #71807d; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.finance-mobile-card footer { margin-top: 12px; padding-top: 11px; border-top: 1px solid #e8efed; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.finance-mobile-card footer .row-actions { margin-left: auto; }
.marketing-secondary-stats { grid-template-columns: repeat(5, minmax(130px, 1fr)); margin-top: 14px; }
.marketing-trend-panel { margin-top: 14px; }
.marketing-trend { display: grid; gap: 8px; }
.marketing-trend-row {
  min-width: 720px;
  display: grid;
  grid-template-columns: 50px minmax(220px, 1fr) 150px 106px;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid #e3ece9;
  border-radius: 8px;
  background: #fbfdfc;
}
.marketing-trend-row > button:first-child { height: 32px; padding: 0; border: 0; background: transparent; color: var(--brand-dark); font-weight: 900; cursor: pointer; }
.marketing-trend-row > .ghost-btn { white-space: nowrap; }
.marketing-trend-row > div:nth-child(3) { display: grid; gap: 3px; text-align: right; }
.marketing-trend-row small { font-weight: 800; }
.marketing-conversion-panel { margin-top:14px; }
.marketing-tab-panel.marketing-conversion-panel { margin-top: 0; }
.marketing-conversion-rates { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.marketing-conversion-rates span { padding:7px 10px; border-radius:8px; background:#eef7f4; color:#61736e; font-size:12px; }
.marketing-conversion-rates b { margin-left:4px; color:var(--brand-dark); }
.marketing-conversion-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(240px,.8fr); gap:18px; margin-top:16px; }
.marketing-funnel { display:grid; gap:10px; }
.marketing-funnel-step { display:grid; grid-template-columns:minmax(0,1fr) 92px; column-gap:12px; align-items:center; }
.marketing-funnel-label { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:5px; color:#4f625d; font-size:13px; }
.marketing-funnel-label b { color:#173f39; font-size:16px; }
.marketing-funnel-track { height:18px; border-radius:6px; background:#edf3f1; overflow:hidden; }
.marketing-funnel-track span { height:100%; border-radius:6px; background:linear-gradient(90deg,#7ac2b5,#0f766e); display:block; }
.marketing-funnel-step small { color:#81908c; font-size:11px; text-align:right; }
.marketing-conversion-side { padding:14px; border:1px solid #dce8e5; border-radius:10px; background:#f8fbfa; display:grid; align-content:start; gap:9px; }
.marketing-conversion-side>div { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:8px; border-bottom:1px solid #e4ecea; color:#60716d; font-size:12px; }
.marketing-conversion-side b { color:#173f39; font-size:15px; }
.marketing-conversion-side h3 { margin:8px 0 0; color:#294942; font-size:14px; }
.marketing-trend-bars { position: relative; height: 22px; border-radius: 6px; background: #eef4f2; overflow: hidden; }
.marketing-trend-bars span { position: absolute; left: 0; border-radius: 0 5px 5px 0; }
.marketing-trend-bars .revenue { top: 3px; height: 7px; background: #79bdb2; }
.marketing-trend-bars .profit { bottom: 3px; height: 7px; background: #0f766e; }
.marketing-trend-bars .profit.negative { background: var(--danger); }
.marketing-profit { font-size: 15px; }
body.has-marketing-modal { overflow: hidden; }
body.has-contract-business-modal,
body.has-contract-push-modal,
body.has-quote-project-modal { overflow: hidden; }
body.has-manual-order-modal { overflow: hidden; }
.contract-business-modal { z-index: 92; }
.contract-push-modal { z-index: 93; }
.manual-order-modal { z-index: 93; }
.contract-business-panel { width: min(760px, 100%); max-height: min(880px, calc(100vh - 32px)); padding: 20px; overflow: auto; }
.contract-business-panel form { margin-top: 18px; }
.contract-business-note { padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #cfe3de; border-radius: 8px; background: #f1faf7; color: var(--muted); font-size: 13px; line-height: 1.6; }
.contract-business-note b { flex: 0 0 auto; color: var(--brand-dark); }
.quote-project-modal { z-index: 93; }
.contract-order-items { display: grid; gap: 8px; }
.contract-order-item { min-width: 0; padding: 11px 12px; border: 1px solid #dce8e5; border-radius: 8px; background: #f7faf9; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.contract-order-item span { min-width: 0; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.contract-order-item small { color: var(--muted); }
.contract-order-item b { color: var(--brand); white-space: nowrap; }
.marketing-modal { z-index: 90; }
.marketing-modal .modal-backdrop { border: 0; }
.marketing-modal-panel { width: min(820px, 100%); max-height: min(860px, calc(100vh - 32px)); padding: 20px; overflow: auto; }
.marketing-modal-panel form { margin-top: 18px; }
.marketing-material-section { padding: 15px; border: 1px solid #cfe3de; border-radius: 10px; background: #f8fcfb; }
.marketing-material-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marketing-material-head h3 { margin: 0 0 3px; font-size: 16px; }
.marketing-material-head p { margin: 0; }
.marketing-material-list { margin-top: 13px; display: grid; gap: 10px; }
.marketing-material-item { display: grid; grid-template-columns: minmax(145px, 1.05fr) minmax(110px, .65fr) minmax(180px, 1.3fr) auto; align-items: end; gap: 9px; padding: 11px; border: 1px solid #dcebe7; border-radius: 8px; background: #fff; }
.marketing-material-item label { min-width: 0; }
.marketing-material-item input { width: 100%; }
.marketing-material-remove { min-width: 64px; }
.marketing-material-total { margin-top: 11px; display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
.marketing-material-total b { color: var(--brand-dark); font-size: 18px; }
.marketing-form-summary { padding: 13px 15px; border: 1px solid #cfe3de; border-radius: 8px; background: #f1faf7; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.marketing-form-summary b { margin-left: 5px; color: var(--brand-dark); font-size: 16px; }

.list-tools { margin: -2px 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.list-search {
  width: min(390px, 100%);
  height: 38px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
}
.list-search:focus-within { border-color: #82c8bc; box-shadow: 0 0 0 3px rgba(15, 118, 110, .08); }
.list-search input { min-height: 0; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.list-search input:focus { box-shadow: none; }
.list-search button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); color: var(--muted); }
.list-search-result { color: var(--brand); font-size: 12px; font-weight: 800; }
.customer-location-tools { align-items: flex-end; }
.customer-location-filter { min-width: 150px; display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 750; }
.customer-location-filter select { min-height: 38px; padding: 6px 30px 6px 10px; }
.customer-property-summary { margin: 14px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.customer-property-summary > div { min-width: 0; padding: 12px 14px; border: 1px solid #dce8e5; border-radius: 8px; background: #f7fbfa; display: grid; gap: 5px; }
.customer-property-summary span { color: var(--muted); font-size: 11px; }
.customer-property-summary b { color: var(--brand-dark); font-size: 14px; overflow-wrap: anywhere; }

.funnel {
  min-height: 235px;
  display: grid;
  grid-template-columns: repeat(5, minmax(54px, 1fr));
  gap: 12px;
  align-items: end;
}

.bar {
  min-height: 44px;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, #0f766e, #72bbb0);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #fff;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 900;
}

.bar:nth-child(even) {
  background: linear-gradient(180deg, #c9964a, #eac77e);
}

.table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.table-block { min-width: 0; }
.table-scroll-hint { display: none; }

.pagination {
  min-height: 52px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pagination-info {
  color: var(--muted);
  font-size: 13px;
}

.pagination-current {
  margin-left: 10px;
  color: var(--ink);
  font-weight: 800;
}

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

.page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}

.page-btn.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(15, 118, 110, .18);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: 13px;
}

table.table-medium { min-width: 820px; }
table.table-wide { min-width: 1040px; }

thead th {
  position: sticky;
  z-index: 3;
  top: 0;
}

th {
  text-align: left;
  padding: 11px 12px;
  color: #53635f;
  background: #f1f5f4;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 950;
}

td {
  padding: 11px 12px;
  border-bottom: 1px solid #eef2f0;
  vertical-align: top;
}

tbody tr:nth-child(even) td { background: #fbfdfc; }
tbody tr:hover td { background: #f1f8f6; }
tbody tr { transition: background-color .16s ease; }

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

.tag {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: var(--soft);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.tag.gold {
  background: var(--warm);
  color: #8a5a22;
}

.tag.red {
  background: var(--danger-soft);
  color: var(--danger);
}

.form-grid {
  display: grid;
  gap: 12px;
}

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

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

label {
  color: #40514e;
  font-size: 12px;
  font-weight: 900;
  display: grid;
  gap: 6px;
}

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

.order-payment-plan {
  padding: 18px;
  border: 1px solid #cfe2de;
  border-radius: 16px;
  background: #f4faf8;
}

.order-payment-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.order-payment-plan-head p {
  margin: 4px 0 0;
}

.order-payment-plan-head > span {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--primary);
  background: #dff2ed;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.order-payment-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.order-payment-plan-grid input[readonly] {
  color: #0b6f63;
  background: #fff;
  font-size: 18px;
  font-weight: 900;
}

.payment-ratio-summary {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #d8e4e1;
  border-radius: 10px;
  color: #0b6f63;
  background: #f4faf8;
}

.field-label {
  color: #40514e;
  font-size: 12px;
  font-weight: 900;
}

.mini-feature-setting {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f6fbf9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
}

.mini-feature-setting p { margin: 5px 0 0; }
.feature-text-input { max-width: 360px; margin-top: 12px; display: grid; grid-template-columns: auto minmax(140px, 1fr); align-items: center; gap: 10px; color: #40514e; font-size: 13px; font-weight: 800; }
.feature-text-input input { min-height: 40px; padding: 8px 12px; background: #fff; }
.feature-switch { display: flex; grid-template-columns: none; align-items: center; gap: 8px; white-space: nowrap; }
.feature-switch input { width: 42px; height: 22px; min-height: 0; accent-color: var(--primary); }

@media (max-width: 760px) {
  .mini-feature-setting { grid-template-columns: 1fr; align-items: start; }
}

.warranty-stats .warranty-stat-active {
  border-color: #bfe1da;
  background: linear-gradient(145deg, #ffffff, #eef9f6);
}

.after-sale-photo-cell {
  min-width: 126px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.after-sale-photo-cell a {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
  overflow: hidden;
  background: #edf3f1;
  display: block;
}

.after-sale-photo-cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.after-sale-photo-cell small {
  margin-left: 3px;
  color: #7d8b88;
  font-size: 11px;
  white-space: nowrap;
}

.after-sale-review-cell {
  min-width: 220px;
  max-width: 300px;
  display: grid;
  gap: 7px;
}

.after-sale-review-cell > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.after-sale-review-cell > div:first-child b {
  padding: 4px 8px;
  border-radius: 10px;
  background: #e7f5f2;
  color: #0d7168;
  font-size: 11px;
}

.after-sale-review-cell > div:first-child span {
  color: #d88c17;
  font-size: 12px;
  font-weight: 750;
}

.after-sale-review-cell p {
  margin: 0;
  color: #687874;
  font-size: 11px;
  line-height: 1.5;
}

.after-sale-review-cell p strong {
  margin-right: 7px;
  color: #334b46;
  font-size: 11px;
}

.after-sale-review-cell .after-sale-photo-cell {
  min-width: 0;
}

.warranty-stats .warranty-stat-active strong {
  color: #08766b;
}

.warranty-stats .warranty-stat-empty {
  border-color: #ecdcb7;
  background: linear-gradient(145deg, #ffffff, #fff9ed);
}

.warranty-filter-bar {
  margin: 0 0 16px;
  padding: 5px;
  border: 1px solid #dfe8e5;
  border-radius: 12px;
  background: #f4f8f7;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
}

.warranty-filter {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #687975;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.warranty-filter b {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #e3ece9;
  color: #6a7c78;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
}

.warranty-filter:hover {
  background: #e8f1ef;
}

.warranty-filter.active {
  background: #ffffff;
  color: var(--brand);
  box-shadow: 0 3px 10px rgba(24, 64, 57, .09);
}

.warranty-filter.active b {
  background: #dff2ee;
  color: var(--brand);
}

.warranty-card-cell {
  min-width: 170px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.warranty-mini-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  background: linear-gradient(145deg, #16786e, #0b4b45);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  box-shadow: 0 5px 12px rgba(15, 105, 95, .16);
}

.warranty-card-cell div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.warranty-card-cell b {
  color: #233d38;
  font-size: 13px;
}

.warranty-card-cell small {
  color: #85938f;
  font-size: 11px;
}

.warranty-admin-status {
  width: max-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  background: #eef3f2;
  color: #65736f;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
}

.warranty-admin-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(101, 115, 111, .1);
}

.warranty-admin-status.active {
  background: #e5f5f1;
  color: #08766b;
}

.warranty-admin-status.pending {
  background: #fff3de;
  color: #98631a;
}

.warranty-admin-status.expired {
  background: #f3efee;
  color: #7b6965;
}

.warranty-admin-status.empty {
  background: #fff0ed;
  color: #b05245;
}

.warranty-editor-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.warranty-preview-column {
  display: grid;
  gap: 14px;
}

.warranty-admin-preview {
  position: relative;
  min-height: 390px;
  padding: 24px;
  border-radius: 22px;
  background: linear-gradient(145deg, #165149, #0a332f 70%, #082825);
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(15, 65, 57, .2);
}

.warranty-qr-inline {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: center;
  gap: 12px;
}

.warranty-qr-inline > div { display: grid; gap: 5px; }
.warranty-qr-inline small { color: #74857f; font-size: 11px; line-height: 1.5; }
.warranty-qr-inline img, .warranty-qr-placeholder { width: 76px; height: 76px; border: 1px solid var(--line); border-radius: 10px; background: #f3f8f6; object-fit: cover; }
.warranty-qr-placeholder { display: grid; place-items: center; color: #6f8c85; font-size: 24px; font-weight: 800; }
.warranty-qr-inline button { grid-column: 1 / -1; width: 100%; }

.warranty-qr-thumb { border: 0; padding: 0; background: transparent; display: inline-flex; align-items: center; gap: 8px; color: #176f65; cursor: pointer; }
.warranty-qr-thumb img { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 8px; background: #fff; object-fit: cover; }
.warranty-qr-thumb span { font-size: 12px; font-weight: 700; }

.warranty-qr-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; }
.warranty-qr-modal .modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(8, 31, 28, .58); }
.warranty-qr-modal-panel { position: relative; width: min(480px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 18px; background: #fff; box-shadow: 0 26px 70px rgba(5, 35, 30, .28); }
.warranty-qr-modal-head { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.warranty-qr-modal-head h2 { margin: 0 0 5px; font-size: 19px; }
.warranty-qr-modal-head p { margin: 0; color: #74857f; font-size: 12px; }
.warranty-qr-modal-body { min-height: 330px; padding: 26px; display: grid; justify-items: center; align-content: center; gap: 16px; text-align: center; }
.warranty-qr-image { width: 250px; height: 250px; border: 1px solid #e0e9e6; border-radius: 16px; background: #fff; object-fit: contain; }
.warranty-qr-meta { display: grid; gap: 5px; }
.warranty-qr-meta b { color: #173f39; font-size: 16px; }
.warranty-qr-meta small { color: #74857f; font-size: 12px; }
.warranty-qr-actions { display: flex; justify-content: center; gap: 10px; }
.warranty-qr-actions a { text-decoration: none; display: inline-flex; align-items: center; }
.warranty-qr-loading, .warranty-qr-error { min-height: 260px; display: grid; justify-items: center; align-content: center; gap: 10px; }
.warranty-qr-loading span { width: 34px; height: 34px; border: 3px solid #d7e7e3; border-top-color: #16877b; border-radius: 50%; animation: warrantyQrSpin .8s linear infinite; }
.warranty-qr-loading small, .warranty-qr-error small { max-width: 320px; color: #7b8d88; line-height: 1.6; }
.warranty-qr-error b { color: #a4463d; }
.warranty-qr-privacy { margin: 0 22px 22px; padding: 13px 15px; border-radius: 10px; background: #eff8f6; display: grid; gap: 5px; }
.warranty-qr-privacy b { color: #26655d; font-size: 12px; }
.warranty-qr-privacy span { color: #667b75; font-size: 11px; line-height: 1.6; }
@keyframes warrantyQrSpin { to { transform: rotate(360deg); } }

.warranty-admin-preview::before,
.warranty-admin-preview::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;
}

.warranty-admin-preview::before {
  top: -80px;
  right: -80px;
  width: 230px;
  height: 230px;
}

.warranty-admin-preview::after {
  top: -42px;
  right: -42px;
  width: 150px;
  height: 150px;
}

.warranty-admin-preview.expired {
  background: linear-gradient(145deg, #5d6866, #374340);
}

.warranty-admin-preview.pending,
.warranty-admin-preview.empty {
  background: linear-gradient(145deg, #3a665f, #244a45);
}

.warranty-admin-preview-head,
.warranty-preview-owner,
.warranty-preview-period,
.warranty-admin-preview > p {
  position: relative;
  z-index: 1;
}

.warranty-admin-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.warranty-preview-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}

.warranty-admin-preview-head > div {
  display: grid;
  gap: 3px;
}

.warranty-admin-preview-head > div b {
  font-size: 14px;
  letter-spacing: .08em;
}

.warranty-admin-preview-head > div small {
  color: rgba(255,255,255,.45);
  font-size: 8px;
  letter-spacing: .1em;
}

.warranty-admin-preview-head em {
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.88);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.warranty-preview-owner {
  margin-top: 52px;
  display: grid;
  gap: 7px;
}

.warranty-preview-owner small,
.warranty-preview-period small {
  color: rgba(255,255,255,.48);
  font-size: 11px;
}

.warranty-preview-owner strong {
  font-size: 27px;
  line-height: 1.25;
}

.warranty-preview-owner span {
  color: rgba(255,255,255,.58);
  font-size: 12px;
}

.warranty-preview-period {
  margin-top: 30px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.warranty-preview-period div {
  display: grid;
  gap: 7px;
}

.warranty-preview-period b {
  font-size: 14px;
}

.warranty-admin-preview > p {
  margin: 20px 0 0;
  color: rgba(255,255,255,.43);
  font-size: 11px;
  line-height: 1.6;
}

.warranty-editor-panel {
  min-height: 390px;
}

.warranty-calculated-field input[readonly] {
  background: #f3f7f6;
  color: #315c55;
  font-weight: 700;
  cursor: not-allowed;
}

.warranty-calculated-field small {
  color: #7b8d88;
  font-size: 11px;
}

.warranty-reminder-field textarea {
  min-height: 96px;
  border-color: #ead9b6;
  background: #fffbf2;
}

.warranty-reminder-field textarea:focus {
  border-color: #d7b66d;
  box-shadow: 0 0 0 3px rgba(215, 182, 109, .12);
}

.warranty-reminder-field small {
  color: #8b7650;
  font-size: 11px;
}

.warranty-form-note {
  padding: 14px 16px;
  border-left: 3px solid #65b9ab;
  border-radius: 8px;
  background: #eff8f6;
}

.warranty-form-note b {
  color: #315c55;
  font-size: 13px;
}

.warranty-form-note p {
  margin: 5px 0 0;
  color: #6c7e79;
  font-size: 12px;
  line-height: 1.65;
}

.warranty-form-actions {
  grid-template-columns: auto 1fr auto auto;
}

@media (max-width: 900px) {
  .warranty-editor-layout {
    grid-template-columns: 1fr;
  }

  .warranty-admin-preview {
    position: relative;
    top: auto;
    min-height: 340px;
  }
}

@media (max-width: 600px) {
  .warranty-form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .warranty-form-actions span {
    display: none;
  }
}

input,
select,
textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.55;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #9dd2ca;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

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

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

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

.module-card b {
  display: block;
  margin-bottom: 5px;
}

.row-actions,
.card-footer,
.modal-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.row-actions { white-space: nowrap; }

.card-footer {
  justify-content: space-between;
  margin-top: 10px;
}

.crud-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 35, 33, 0.58);
}

.modal-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 20px;
}

body.has-appointment-dispatch-modal { overflow: hidden; }
.appointment-dispatch-modal { z-index: 84; }
.appointment-dispatch-modal .modal-backdrop { border: 0; }
.appointment-dispatch-panel { width: min(820px, 100%); border-radius: 14px; padding: 22px; }
.appointment-dispatch-kicker { margin: 0 0 4px; color: var(--brand); font-size: 12px; font-weight: 850; letter-spacing: .06em; }
.appointment-dispatch-panel .panel-head h2 { margin: 0; }
.appointment-dispatch-summary { margin: 16px 0 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.appointment-dispatch-summary > div { min-width: 0; padding: 13px 14px; border: 1px solid #dce8e5; border-radius: 10px; background: #f6faf9; display: grid; gap: 5px; }
.appointment-dispatch-summary span { color: #7a8985; font-size: 11px; font-weight: 750; }
.appointment-dispatch-summary b { color: #21423c; font-size: 14px; overflow-wrap: anywhere; }
.appointment-dispatch-summary small { color: #71817d; line-height: 1.45; overflow-wrap: anywhere; }
.appointment-dispatch-panel textarea { min-height: 120px; resize: vertical; }
.appointment-dispatch-panel label > small { display: block; margin-top: 5px; color: #80908c; font-size: 11px; line-height: 1.45; }

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

.check-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.check-field input {
  width: auto;
  min-height: auto;
}

.multi-check-field > label {
  display: block;
  margin-bottom: 4px;
}

.multi-check-field > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.multi-check-field > div label {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8faf9;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.multi-check-field input {
  width: 16px;
  min-height: 16px;
  margin: 0;
}

.modal-actions {
  justify-content: flex-end;
  padding-top: 8px;
}

.setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.editor-page {
  max-width: 920px;
}

.list-page .table-wrap {
  min-height: 180px;
}

.parameter-sort-list {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.parameter-sort-row {
  min-height: 78px;
  padding: 12px;
  border-bottom: 1px solid #e8efed;
  display: grid;
  grid-template-columns: 38px 24px minmax(260px, 1fr) 76px 76px auto;
  align-items: center;
  gap: 12px;
  transition: background .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.parameter-sort-row:last-child { border-bottom: 0; }
.parameter-sort-row.dragging { opacity: .45; background: #eaf6f3; }
.parameter-sort-row.drag-target { background: #e5f5f1; box-shadow: inset 0 3px 0 var(--brand); }

.parameter-drag-handle {
  width: 36px;
  height: 44px;
  border: 1px solid #c9dbd7;
  border-radius: 8px;
  background: #f3f8f7;
  color: var(--brand);
  cursor: grab;
  user-select: none;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
}

.parameter-drag-handle:active { cursor: grabbing; }
.parameter-sort-main { min-width: 0; }
.parameter-sort-main > b { display: block; margin-bottom: 7px; font-size: 14px; }
.parameter-sort-options { display: flex; flex-wrap: wrap; gap: 4px; }
.parameter-sort-order { color: var(--muted); font-size: 12px; font-weight: 700; }

@media (max-width: 900px) {
  .parameter-sort-row {
    grid-template-columns: 38px 24px minmax(0, 1fr) auto;
  }
  .parameter-sort-order { display: none; }
  .parameter-sort-row > .row-actions { grid-column: 3 / -1; }
}

.list-filters {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.list-filters label {
  min-width: 220px;
  color: var(--muted);
  font-size: 13px;
}

.category-filters {
  align-items: center;
}

.filter-label {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fbfa;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.filter-chip:hover {
  border-color: rgba(0, 128, 112, .35);
  color: var(--brand);
}

.filter-chip.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.filter-chip small { margin-left: 4px; opacity: .72; font-size: 11px; }

.row-check,
.row-check-all {
  width: 16px;
  min-height: 16px;
  margin: 0;
}

.settings-list {
  display: grid;
  gap: 12px;
  max-width: 780px;
}

.image-manager {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.upload-btn {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 13px;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.image-preview-list,
.effect-image-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.image-preview {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.product-image-sort-card {
  cursor: grab;
  transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease;
}

.product-image-sort-card:active {
  cursor: grabbing;
}

.product-image-sort-card.dragging {
  opacity: .55;
  transform: scale(.98);
}

.product-image-sort-card.drag-target {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 128, 112, .14);
}

.product-image-drag-handle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 6px;
  background: rgba(16, 35, 33, .82);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  font-style: normal;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.product-image-drag-handle b,
.product-image-drag-handle em {
  color: inherit;
  font: inherit;
  font-style: normal;
}

.image-preview img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  margin-bottom: 8px;
}

.image-actions {
  display: grid;
  grid-template-columns: 1fr 70px;
  gap: 8px;
}

.image-actions button {
  min-height: 34px;
  padding: 0 10px;
  white-space: nowrap;
}

.image-preview span {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.crop-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: 28px;
  background: rgba(16, 35, 33, 0.58);
  display: grid;
  place-items: center;
}

.crop-dialog {
  width: min(1080px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
}

.crop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 18px;
  align-items: start;
}

.crop-stage-wrap {
  position: relative;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef4f2;
}

#productCropCanvas {
  display: block;
  max-width: none;
}

#productCropBox {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(15, 118, 110, 0.85);
  cursor: move;
  touch-action: none;
}

#productCropBox::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid #fff;
}

.crop-controls {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf9;
}

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

.crop-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.crop-presets button {
  min-height: 34px;
  border: 1px solid #cfe0dc;
  border-radius: 7px;
  background: #fff;
  color: var(--brand);
  font-weight: 800;
}

body.is-cropping {
  user-select: none;
}

@media (max-width: 860px) {
  .crop-layout {
    grid-template-columns: 1fr;
  }

  .crop-modal {
    padding: 12px;
  }
}

.crud-image-field { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.crud-image-preview { width: 120px; height: 90px; border: 1px solid var(--line); border-radius: 6px; background: #f4f7f6; object-fit: cover; }
.crud-image-preview.is-empty { visibility: hidden; }
.crud-media-field textarea {
  min-height: 96px;
}

.crud-media-preview {
  min-height: 72px;
  padding: 9px;
  border: 1px dashed #cbdad6;
  border-radius: 8px;
  background: #f8fbfa;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crud-media-sort-list {
  align-items: stretch;
  gap: 12px;
}

.crud-media-sort-card {
  position: relative;
  width: 176px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: grab;
  transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease;
}

.crud-media-sort-card:active { cursor: grabbing; }
.crud-media-sort-card.dragging { opacity: .5; transform: scale(.97); }
.crud-media-sort-card.drag-target { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 128, 112, .14); }
.crud-media-sort-card img { width: 100%; aspect-ratio: 4 / 3; border-radius: 7px; object-fit: cover; display: block; }

.crud-media-remove {
  position: absolute;
  top: 14px;
  left: 14px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 6px;
  background: rgba(171, 48, 38, .9);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(65, 18, 14, .2);
}
.crud-media-remove:hover { background: #a52f25; }

.crud-media-drag-handle {
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(16, 35, 33, .84);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  user-select: none;
  touch-action: none;
}

.crud-media-drag-handle b { font-size: 15px; letter-spacing: -3px; }
.crud-media-order { padding: 8px 2px 1px; color: #60736f; font-size: 12px; font-weight: 750; text-align: center; }

.upload-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-head > .upload-line {
  justify-content: flex-end;
}

.upload-status {
  min-height: 32px;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  background: #f2f7f6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  line-height: 1.35;
}

.upload-status.active {
  background: #ecf8f5;
  color: var(--brand);
}

.upload-status.done {
  background: #e9f5f2;
  color: var(--brand-dark);
}

.upload-status.error {
  background: var(--danger-soft);
  color: var(--danger);
}

.table-thumb { width: 72px; height: 54px; border-radius: 5px; object-fit: cover; background: #f2f5f4; display: block; }
.case-table-thumb { width: 96px; height: auto; aspect-ratio: 4 / 3; border-radius: 8px; background: transparent; }
.product-table-thumb { width: 96px; height: auto; aspect-ratio: 4 / 3; border-radius: 6px; object-fit: cover; background: transparent; }
.forum-media-cell { display: flex; align-items: center; gap: 8px; min-width: 100px; }
.forum-media-review { min-width: 190px; color: var(--muted); font-size: 12px; }
.forum-media-gallery { max-width: 220px; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.forum-review-thumb { width: 48px; height: 48px; }
.buyer-showcase-content-cell { display: block; min-width: 220px; max-width: 420px; line-height: 1.6; white-space: normal; word-break: break-word; }
.forum-content-cell { max-width: 360px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.table-audio { width: 230px; max-width: 100%; display: block; }
.noise-mini-wave { width: 170px; min-height: 66px; padding: 8px; border-radius: 8px; background: #f2f7f6; display: flex; align-items: center; justify-content: center; gap: 3px; }
.noise-mini-wave span { width: 4px; min-height: 8px; border-radius: 99px; background: linear-gradient(180deg, #d84c3e, #e1a336 48%, #0f766e); }
.permission-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.permission-group { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; }
.permission-group > b { display: block; margin-bottom: 10px; color: var(--ink); }
.permission-group > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.permission-group label { min-height: 32px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.permission-group input { width: 16px; min-height: 16px; margin: 0; }
@media (max-width: 760px) { .permission-groups { grid-template-columns: 1fr; } }

.price-old { text-decoration: line-through; }

.module-editor-section,
.rich-editor-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.module-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.product-param-row {
  grid-column: 1 / -1;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.product-param-row.dragging {
  opacity: .45;
  border-color: #9bc9c0;
  background: #eaf6f3;
}

.product-param-row.drag-target {
  border-color: var(--brand);
  background: #f1faf8;
  box-shadow: inset 0 3px 0 var(--brand);
}

.product-param-sort {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-param-sort b {
  margin: 0;
}

.product-param-drag-handle {
  width: 36px;
  height: 38px;
  border: 1px solid #c9dbd7;
  border-radius: 8px;
  background: #f3f8f7;
  color: var(--brand);
  cursor: grab;
  user-select: none;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
}

.product-param-drag-handle:active {
  cursor: grabbing;
}

.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f4f7f6;
}

.rich-toolbar button {
  min-width: 36px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid #d7e0de;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.rich-editor {
  min-height: 320px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  background: #fff;
  outline: none;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: #9aa6a3;
}

.rich-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.notice {
  border: 1px solid #d6e8e3;
  background: #f2faf8;
  color: #345853;
  border-radius: 8px;
  padding: 11px 12px;
  line-height: 1.6;
  font-size: 13px;
}

.empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: 380px;
  background: #102321;
  color: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  z-index: 20;
}

.toast.error {
  background: #7a2b22;
}

.upload-queue {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 260;
  width: min(380px, calc(100vw - 36px));
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 48px rgba(16, 35, 33, 0.18);
  backdrop-filter: blur(10px);
  display: grid;
  gap: 10px;
}

.upload-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.upload-queue-head b {
  color: var(--ink);
  font-size: 14px;
}

.upload-queue-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.upload-task {
  padding: 10px;
  border: 1px solid #e1ebe8;
  border-radius: 8px;
  background: #f8fbfa;
}

.upload-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.upload-task-row strong {
  min-width: 0;
  color: #203b38;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-task-row span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

.upload-task-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.upload-progress {
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #e3ece9;
}

.upload-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #26b8a8 55%, #c9964a);
  transition: width .18s ease;
}

.upload-task.done .upload-progress i {
  background: linear-gradient(90deg, #0f766e, #54c3a3);
}

.upload-task.error .upload-task-row span,
.upload-task.error .upload-task-meta {
  color: var(--danger);
}

.upload-task.error .upload-progress i {
  background: linear-gradient(90deg, #c05a46, #e18c72);
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(16, 35, 33, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(1px);
}

.loading-spinner {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
}

.loading-spinner span {
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--soft);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

@media (max-width: 1200px) {
  body.has-admin-sidebar { overflow: hidden; }

  .shell { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    z-index: 92;
    inset: 0 auto 0 0;
    width: min(336px, 86vw);
    height: 100dvh;
    max-height: none;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    box-shadow: 20px 0 52px rgba(4, 25, 22, .28);
    transform: translateX(-105%);
    transition: transform .24s ease;
  }

  .shell.sidebar-open .sidebar { transform: translateX(0); }

  .sidebar-backdrop {
    position: fixed;
    z-index: 91;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(8, 29, 26, .42);
    opacity: 0;
    pointer-events: none;
    display: block;
    transition: opacity .2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .shell.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .sidebar-head .brand { margin-bottom: 0; }
  .sidebar-head { margin-bottom: 16px; }
  .nav-search { height: 44px; }
  .nav-search input { height: 40px; }
  .nav-link-row { grid-template-columns: minmax(0, 1fr) 42px; gap: 5px; }
  .nav-btn { min-height: 42px; padding: 0 11px; font-size: 14px; }
  .nav-favorite { width: 42px; height: 42px; font-size: 16px; }
  .nav-section-toggle { min-height: 40px; }
  .sidebar-close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 25px;
    line-height: 1;
  }

  .topbar .tablet-menu-btn { display: inline-flex; flex: 0 0 44px; width: 44px; min-height: 44px; font-size: 20px; }
  .workspace { min-height: 100vh; padding: 18px; padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .topbar {
    position: sticky;
    z-index: 32;
    top: 0;
    height: auto;
    min-height: 66px;
    margin: -8px -4px 14px;
    padding: 8px 4px;
    gap: 12px;
    background: rgba(244, 246, 245, .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .topbar-search { display: none; }
  .topbar h1 { font-size: 24px; }
  .toolbar { flex-wrap: nowrap; }

  .primary-btn,
  .ghost-btn,
  .danger-btn,
  .icon-btn,
  .filter-chip,
  .page-btn,
  .upload-btn { min-height: 44px; }

  input,
  select,
  textarea { min-height: 44px; font-size: 16px; }
  textarea { min-height: 104px; }
  .check-field { min-height: 44px; }
  .check-field input,
  .row-check,
  .row-check-all { width: 20px; min-height: 20px; }

  .table-wrap { scrollbar-gutter: stable; }
  table { min-width: 760px; font-size: 14px; }
  table.table-medium { min-width: 900px; }
  table.table-wide { min-width: 1180px; }
  th { padding: 13px 12px; font-size: 13px; }
  td { padding: 13px 12px; }
  .row-actions { white-space: normal; }

  .table-scroll-hint {
    min-height: 30px;
    margin-bottom: 7px;
    color: #72827e;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
    font-weight: 750;
  }
  .table-scroll-hint span { display: inline-flex; align-items: center; gap: 5px; }
  .table-scroll-hint span::before { content: "↔"; color: var(--brand); font-size: 16px; }

  .table-wrap th:first-child,
  .table-wrap td:first-child {
    position: sticky;
    z-index: 2;
    left: 0;
    box-shadow: 8px 0 14px -14px rgba(16, 35, 33, .65);
  }
  .table-wrap th:last-child,
  .table-wrap td:last-child {
    position: sticky;
    z-index: 2;
    right: 0;
    min-width: 142px;
    box-shadow: -8px 0 14px -14px rgba(16, 35, 33, .65);
  }
  .table-wrap th:first-child,
  .table-wrap th:last-child { z-index: 5; background: #eaf1ef; }
  .table-wrap tbody td:first-child,
  .table-wrap tbody td:last-child { background: #fff; }
  .table-wrap tbody tr:nth-child(even) td:first-child,
  .table-wrap tbody tr:nth-child(even) td:last-child { background: #fbfdfc; }
  .table-wrap tbody tr:hover td:first-child,
  .table-wrap tbody tr:hover td:last-child { background: #f1f8f6; }

  .list-page > .panel-head { align-items: center; }
  .list-page > .panel-head > div:first-child { min-width: 0; }
  .list-page > .panel-head > .row-actions { flex: 0 0 auto; justify-content: flex-end; }
  .list-page .list-tools { margin-bottom: 10px; }
  .list-page .list-search { width: min(480px, 100%); height: 44px; }
  .list-page .list-search input { height: 40px; }
  .list-page .list-filters { align-items: center; overflow: hidden; }
  .list-page .filter-chips {
    min-width: 0;
    flex: 1;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 2px 5px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .list-page .filter-chip { flex: 0 0 auto; }

  .pagination { align-items: center; }
  .pagination-actions {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .pagination-actions > button { flex: 0 0 auto; }

  .crud-modal,
  .crop-modal { padding: 14px; padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .modal-panel,
  .crop-dialog { max-height: calc(100dvh - 28px); }
  .modal-actions { padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 1100px) {
  #sidebarNav { columns: 1; }
  .nav-favorites,
  .nav-search-results,
  .nav-group { break-inside: avoid; }

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

  .marketing-secondary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats.finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-stat-grid { grid-template-columns: 1fr; }

  .two-col,
  .editor-grid {
    grid-template-columns: 1fr;
  }

  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stats.customer-stats {
    grid-template-columns: repeat(8, minmax(140px, 1fr));
  }
}

@media (max-width: 760px) {
  .order-payment-plan-grid { grid-template-columns: 1fr; }
  .order-payment-plan-head { align-items: flex-start; }
  .marketing-filter-form { align-items: stretch; }
  .marketing-filter-form label, .marketing-filter-form button { width: 100%; }
  .marketing-data-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .marketing-data-tabs button { white-space: nowrap; }
  .finance-toolbar { align-items: stretch; flex-direction: column; }
  .finance-toolbar .marketing-filter-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
  .finance-toolbar .marketing-filter-form label { min-width: 0; }
  .finance-toolbar .marketing-filter-form > button { grid-column: 1 / -1; }
  .finance-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .stats.finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .finance-summary .stat-card { min-height: 124px; padding: 13px; }
  .finance-summary .stat-card strong { font-size: clamp(23px, 7vw, 30px); }
  .finance-summary .stat-card small { font-size: 10px; line-height: 1.45; }
  .finance-period-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .finance-period-summary .stat-card { min-height: 88px; padding: 11px; }
  .finance-period-summary .stat-card span { font-size: 10px; }
  .finance-period-summary .stat-card strong { font-size: clamp(15px, 4.7vw, 20px); overflow-wrap: anywhere; }
  .finance-ledger-panel .panel-head { align-items: stretch; }
  .finance-ledger-panel .panel-head .list-search { width: 100%; }
  .finance-tabs { width: 100%; overflow-x: auto; }
  .finance-tabs button { flex: 1 0 auto; min-width: 100px; padding: 0 12px; }
  .finance-desktop-ledger { display: none; }
  .finance-mobile-ledger { display: grid; gap: 10px; }
  .finance-month-row { min-width: 0; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding: 10px; }
  .finance-month-row > b { grid-column: 1; grid-row: 1; }
  .finance-month-row > span { grid-column: 2; grid-row: 1; min-width: 0; gap: 7px; }
  .finance-month-row > strong { grid-column: 3; grid-row: 1; font-size: 12px; }
  .finance-month-row > .finance-flow-bars { grid-column: 1 / -1; grid-row: 2; }
  .finance-yearly-panel .table-wrap { overflow-x: auto; }
  .finance-yearly-panel table { min-width: 450px; }
  .marketing-secondary-stats { grid-template-columns: 1fr; }
  .marketing-conversion-rates { justify-content:flex-start; }
  .marketing-conversion-grid { grid-template-columns:1fr; }
  .marketing-trend { overflow-x: auto; }
  .marketing-modal { padding: 8px; }
  .marketing-modal-panel { max-height: calc(100vh - 16px); padding: 14px; }
  .contract-business-modal { padding: 8px; }
  .contract-business-panel { max-height: calc(100vh - 16px); padding: 14px; }
  .contract-business-note { display: grid; }
  .marketing-material-head { align-items: flex-start; }
  .marketing-material-head .ghost-btn { width: auto; }
  .marketing-material-item { grid-template-columns: 1fr; }
  .marketing-material-remove { justify-self: end; }
  .panel-head > .upload-line {
    width: 100%;
    justify-content: flex-start;
  }

  .sidebar .nav-section {
    font-size: 12px;
  }
  .sidebar .nav-btn {
    font-size: 14px;
    min-height: 38px;
  }
  #sidebarNav { columns: 1; }
  .sidebar { max-height: none; }
  .topbar {
    flex-wrap: wrap;
    height: auto;
    gap: 10px;
  }
  .topbar-title { flex: 1 1 calc(100% - 58px); }
  .topbar h1 {
    font-size: 22px;
  }
  .workspace { padding: 14px; }
  .toolbar { width: 100%; }
  .topbar-search { flex: 1; }
  .quick-create-menu { top: 104px; right: 0; }
  .dashboard-workbench .panel-head { display: grid; }
  .dashboard-shortcuts { justify-content: flex-start; }
  .dashboard-tasks { grid-template-columns: 1fr; }
  .list-search { width: 100%; }
  .customer-location-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .customer-location-tools .list-search { grid-column: 1 / -1; }
  .customer-location-filter { min-width: 0; }
  .customer-property-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-page > .panel-head { align-items: stretch; display: grid; }
  .list-page > .panel-head > .row-actions { justify-content: flex-start; }
  .list-page > .panel-head > .row-actions > button { flex: 1 1 auto; }
  .list-page .list-filters { padding: 10px; display: grid; gap: 8px; }
  .list-page .filter-chips { width: 100%; }
  .pagination { align-items: stretch; }
  .pagination-info { width: 100%; }
  .pagination-current { display: block; margin: 4px 0 0; }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .three-col,
  .form-grid.two,
  .form-grid.three { grid-template-columns: 1fr; }
  .stats.customer-stats {
    grid-template-columns: repeat(8, minmax(140px, 1fr));
  }
  .stat-card strong {
    font-size: 20px;
  }
  .list-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .list-filters label {
    min-width: auto;
  }
  .crud-modal .modal-panel {
    width: 100%;
    padding: 14px;
  }
  .appointment-dispatch-summary { grid-template-columns: 1fr; }
  .funnel {
    grid-template-columns: repeat(5, minmax(40px, 1fr));
    gap: 6px;
  }
  .bar {
    font-size: 10px;
    min-height: 32px;
  }
}
.solution-layout-card { margin-top: 16px; padding: 16px; border: 1px solid #dfe7e4; border-radius: 8px; background: #f8fbfa; transition: opacity .16s ease, background .16s ease, box-shadow .16s ease; }
.solution-layout-card.dragging { opacity: .45; background: #eaf6f3; }
.solution-layout-card.drag-target { background: #e5f5f1; box-shadow: inset 0 3px 0 var(--brand); }
.solution-layout-sort { min-height: 42px; margin: -4px 0 12px; display: flex; align-items: center; gap: 10px; }
.solution-layout-drag-handle { width: 38px; height: 38px; border: 1px solid #c9dbd7; border-radius: 8px; background: #fff; color: var(--brand); cursor: grab; user-select: none; touch-action: none; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; }
.solution-layout-drag-handle:active { cursor: grabbing; }
.solution-layout-card .panel-head label { min-width: 260px; }
.solution-positions { display: grid; gap: 16px; }
.solution-position-card { padding: 15px; border: 1px solid #cfe0dc; border-radius: 8px; background: #f1f8f6; box-shadow: inset 4px 0 0 rgba(15, 118, 110, .32); }
.solution-position-card.dragging { opacity: .45; background: #e7f4f0; }
.solution-position-card.drag-target { background: #e1f2ed; box-shadow: inset 0 3px 0 var(--brand), inset 4px 0 0 rgba(15, 118, 110, .32); }
.solution-position-sort { min-height: 40px; margin: -3px 0 10px; display: flex; align-items: center; gap: 9px; }
.solution-position-drag-handle { width: 34px; height: 34px; border: 1px solid #bfd5d0; border-radius: 7px; background: #fff; color: var(--brand); cursor: grab; user-select: none; touch-action: none; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; }
.solution-position-drag-handle:active { cursor: grabbing; }
.solution-position-card > .panel-head { margin-bottom: 12px; }
.solution-position-card > .panel-head label { min-width: 240px; }
.solution-position-card [data-role="solution-position-order"] { color: #54706a; font-size: 13px; white-space: nowrap; }
.solution-scheme { min-width: 0; padding: 12px; border: 1px solid #dfe7e4; border-radius: 8px; background: #fff; }
.solution-scheme h4 { margin: 0 0 10px; }
.solution-scheme textarea { min-height: 90px; }
.solution-image-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px; }
.solution-image-preview { width: 100%; min-width: 0; padding: 7px; border: 1px solid #dfe7e4; border-radius: 7px; background: #fff; }
.solution-image-preview > img { width: 100%; aspect-ratio: 4 / 3; border-radius: 5px; object-fit: contain; background: transparent; display: block; }
.solution-image-title { width: 100%; min-width: 0; min-height: 34px; margin-top: 7px; padding: 6px 8px; font-size: 12px; }
.solution-image-actions { margin-top: 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.solution-image-actions .ghost-btn,
.solution-image-actions .danger-btn { min-width: 0; min-height: 32px; padding: 0 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; white-space: nowrap; }

.customer-chat-page { padding: 24px; }
.customer-chat-layout { height: clamp(520px, calc(100vh - 250px), 720px); min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); overflow: hidden; border: 1px solid #dce7e4; border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgba(24, 65, 57, .08); }
.customer-chat-users { min-height: 0; overflow: hidden; border-right: 1px solid #dfe7e4; background: #f7faf9; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.customer-chat-users-head { padding: 15px 14px 12px; border-bottom: 1px solid #e1eae7; background: #fff; }
.customer-chat-users-head > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.customer-chat-users-head b { font-size: 14px; }
.customer-chat-users-head span { padding: 2px 7px; border-radius: 10px; background: #edf5f3; color: var(--brand); font-size: 11px; font-weight: 700; }
.customer-chat-users-head small { margin-top: 3px; display: block; color: #8b9996; font-size: 11px; }
.customer-chat-user-list { min-height: 0; padding: 6px; overflow-y: auto; }
.customer-chat-user { appearance: none; width: 100%; min-height: 58px; margin: 0 0 3px; padding: 8px 9px; border: 0; border-radius: 10px; background: transparent; color: inherit; display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer; transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.customer-chat-user:hover { background: #eef6f4; }
.customer-chat-user:active { transform: scale(.99); }
.customer-chat-user.active { background: #dff1ed; box-shadow: inset 3px 0 0 var(--brand); }
.customer-chat-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; background: linear-gradient(145deg, #0f756b, #14988a); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; box-shadow: 0 4px 10px rgba(15, 117, 107, .15); }
.customer-chat-user.active .customer-chat-avatar { border-radius: 50%; }
.customer-chat-user-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.customer-chat-user-copy b,
.customer-chat-user-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-chat-user-copy b { color: #23312f; font-size: 13px; line-height: 1.3; }
.customer-chat-user-copy small { color: #74827f; font-size: 12px; }
.customer-chat-user em { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e65b50; color: #fff; display: grid; place-items: center; font-size: 11px; font-style: normal; box-shadow: 0 3px 7px rgba(230, 91, 80, .2); }
.customer-chat-conversation { min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.customer-chat-head { min-height: 62px; padding: 10px 16px; border-bottom: 1px solid #e6ecea; background: #fff; display: flex; align-items: center; gap: 10px; }
.customer-chat-head-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: #e3f2ef; color: var(--brand); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.customer-chat-head div { display: grid; gap: 3px; }
.customer-chat-head span { color: #74827f; font-size: 13px; }
.customer-chat-head > small { margin-left: auto; color: #758681; font-size: 12px; }
.customer-chat-head > small i { width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #39b589; display: inline-block; box-shadow: 0 0 0 3px #e5f6ef; }
.customer-chat-messages { min-height: 0; padding: 18px 20px; overflow-y: auto; background: #f3f8f7; display: flex; flex-direction: column; gap: 14px; }
.customer-chat-message { max-width: 72%; align-self: flex-start; display: grid; gap: 5px; }
.customer-chat-message > div { padding: 10px 13px; border: 1px solid #dfe7e4; border-radius: 4px 14px 14px; background: #fff; box-shadow: 0 3px 10px rgba(33, 62, 57, .05); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.customer-chat-message small { color: #82908d; font-size: 12px; }
.customer-chat-message.from-admin { align-self: flex-end; text-align: right; }
.customer-chat-message.from-admin > div { border-color: #b4ded7; border-radius: 14px 4px 14px 14px; background: #dff3ef; text-align: left; }
.customer-chat-message > div.has-media { padding: 6px; overflow: hidden; }
.customer-chat-message > div.has-media p { margin: 7px 7px 4px; }
.customer-chat-media-link { display: block; line-height: 0; }
.customer-chat-media-image,
.customer-chat-media-video { width: min(360px, 42vw); max-height: 360px; border-radius: 10px; background: transparent; display: block; object-fit: contain; }
.customer-chat-form { padding: 12px; border-top: 1px solid #dfe7e4; background: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr) 72px; gap: 10px; align-items: end; }
.customer-chat-attachments { height: 42px; display: flex; align-items: center; gap: 6px; }
.customer-chat-attachments label { width: 48px; height: 42px; border: 1px solid #d6e3e0; border-radius: 9px; background: #f5faf8; color: var(--brand); display: grid; place-items: center; font-size: 12px; font-weight: 750; letter-spacing: .04em; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.customer-chat-attachments label:hover { border-color: #87c9bd; background: #eaf6f3; }
.customer-chat-attachments label:active { transform: scale(.97); }
.customer-chat-form textarea { min-height: 62px; max-height: 120px; padding: 11px 13px; border-color: #d7e3e0; border-radius: 10px; background: #f9fbfa; resize: vertical; line-height: 1.55; }
.customer-chat-form textarea:focus { border-color: #7dc8bb; background: #fff; box-shadow: 0 0 0 3px rgba(20, 152, 138, .1); outline: 0; }
.customer-chat-form .primary-btn { width: 72px; min-width: 72px; min-height: 42px; height: 42px; padding: 0 12px; border-radius: 9px; font-size: 14px; }

body.has-customer-chat-modal { overflow: hidden; }
.customer-chat-modal { z-index: 80; }
.customer-chat-modal-backdrop { border: 0; cursor: default; }
.customer-chat-modal-panel { position: relative; width: min(920px, 100%); height: min(720px, calc(100vh - 40px)); min-height: 520px; overflow: hidden; border: 1px solid #d7e5e1; border-radius: 18px; background: #fff; box-shadow: 0 28px 80px rgba(9, 42, 37, .3); }
.customer-chat-modal-panel > .customer-chat-conversation { height: 100%; }
.customer-chat-modal .customer-chat-head { padding-left: 20px; padding-right: 14px; }
.customer-chat-modal .customer-chat-head > small { color: #70817d; }
.customer-chat-modal-refresh,
.customer-chat-modal-close { flex: 0 0 auto; }

@media (max-width: 900px) {
  .customer-chat-page { padding: 14px; }
  .customer-chat-layout { height: auto; min-height: 560px; grid-template-columns: 1fr; grid-template-rows: 190px 480px; }
  .customer-chat-users { max-height: 180px; border-right: 0; border-bottom: 1px solid #dfe7e4; }
  .customer-chat-messages { min-height: 0; }
  .customer-chat-modal { padding: 10px; }
  .customer-chat-modal-panel { height: calc(100vh - 20px); min-height: 0; border-radius: 13px; }
  .customer-chat-modal .customer-chat-head > small,
  .customer-chat-modal-refresh { display: none; }
  .customer-chat-modal .customer-chat-form { grid-template-columns: auto minmax(0, 1fr) 64px; }
  .customer-chat-modal .customer-chat-form .primary-btn { width: 64px; min-width: 64px; }
}

body.has-order-progress-modal { overflow: hidden; }
.order-progress-modal { z-index: 82; padding: 16px; }
.order-progress-modal .modal-backdrop { border: 0; }
.order-progress-modal-panel { position: relative; width: min(1120px, 100%); height: calc(100vh - 32px); overflow: hidden; border: 1px solid #cfe0dc; border-radius: 18px; background: #f3f8f7; box-shadow: 0 28px 80px rgba(9, 42, 37, .32); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.order-progress-modal-head { min-height: 92px; padding: 18px 22px; border-bottom: 1px solid #d8e5e2; background: #fff; display: flex; align-items: center; gap: 20px; }
.order-progress-modal-head > div { flex: 1; min-width: 0; }
.order-progress-modal-head p { margin: 0 0 3px; color: #0f766e; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.order-progress-modal-head h2 { margin: 0; color: #183c37; font-size: 24px; }
.order-progress-modal-head span { display: block; margin-top: 5px; color: #71827e; font-size: 13px; }
.order-progress-modal-body { min-height: 0; padding: 18px; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.order-progress-loading { grid-column: 1 / -1; min-height: 220px; display: grid; place-items: center; color: #71827e; }
.order-progress-card { min-width: 0; padding: 16px; border: 1px solid #d8e5e2; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(31, 72, 64, .05); }
.order-progress-card.current { border-color: #6ab9aa; box-shadow: 0 0 0 2px rgba(15, 118, 110, .08), 0 8px 22px rgba(31, 72, 64, .08); }
.order-progress-card.done { border-color: #b8d8d1; background: #fbfefd; }
.order-progress-card.locked { border-color: #e1e7e5; background: #f7f9f8; box-shadow: none; }
.order-progress-card.locked input,
.order-progress-card.locked select,
.order-progress-card.locked textarea { color: #6f7c79; background: #eef2f1; cursor: not-allowed; }
.order-progress-card-head { display: flex; align-items: center; gap: 10px; }
.order-progress-number { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: #e8f3f1; color: #0f766e; display: grid; place-items: center; font-weight: 850; }
.order-progress-card-head > div { min-width: 0; }
.order-progress-card-head h3 { margin: 0; color: #173c36; font-size: 17px; }
.order-progress-card-head p { margin: 3px 0 0; color: #84918e; font-size: 12px; }
.order-progress-state { margin-left: auto; padding: 5px 9px; border-radius: 999px; background: #edf2f1; color: #7c8986; font-size: 12px; font-weight: 750; }
.order-progress-state.current { background: #dff3ee; color: #0f766e; }
.order-progress-state.done { background: #e8f5e9; color: #287548; }
.order-progress-fields { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.order-progress-fields label { display: grid; gap: 6px; color: #60706c; font-size: 12px; font-weight: 700; }
.order-progress-fields input,
.order-progress-fields select,
.order-progress-fields textarea { width: 100%; border: 1px solid #d8e3e0; border-radius: 9px; background: #f9fbfa; color: #263a36; }
.order-progress-fields input,
.order-progress-fields select { min-height: 38px; padding: 0 10px; }
.order-progress-fields textarea { min-height: 76px; padding: 9px 10px; resize: vertical; line-height: 1.55; }
.order-progress-fields input:focus,
.order-progress-fields select:focus,
.order-progress-fields textarea:focus { border-color: #70bcae; background: #fff; box-shadow: 0 0 0 3px rgba(15, 118, 110, .08); outline: 0; }
.order-progress-photo-area { margin-top: 13px; }
.order-progress-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.order-progress-photo-item { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 9px; background: #edf3f1; }
.order-progress-photo-item a,
.order-progress-photo-item img { width: 100%; height: 100%; display: block; }
.order-progress-photo-item img { object-fit: cover; }
.order-progress-photo-item button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(23, 43, 39, .78); color: #fff; display: grid; place-items: center; cursor: pointer; }
.order-progress-photo-add { aspect-ratio: 4 / 3; border: 1px dashed #8fc8bd; border-radius: 9px; background: #f2faf8; color: #0f766e; display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; }
.order-progress-photo-add span { font-size: 23px; line-height: 1; }
.order-progress-photo-add b { font-size: 12px; }
.order-progress-photo-add small { color: #80918d; font-size: 10px; }
.order-progress-photo-tip { margin: 7px 0 0; color: #8a9693; font-size: 11px; }
.order-progress-card-actions { margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf1f0; display: flex; align-items: center; gap: 12px; }
.order-progress-card-actions small { flex: 1; color: #81908d; font-size: 11px; }
.order-progress-card-actions .primary-btn { flex: 0 0 auto; }

@media (max-width: 820px) {
  .order-progress-modal { padding: 8px; }
  .order-progress-modal-panel { height: calc(100vh - 16px); border-radius: 12px; }
  .order-progress-modal-head { min-height: 78px; padding: 13px 14px; }
  .order-progress-modal-head h2 { font-size: 20px; }
  .order-progress-modal-head span { display: none; }
  .order-progress-modal-body { padding: 10px; grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 520px) {
  .finance-toolbar-actions { grid-template-columns: 1fr; }
  .finance-mobile-card footer { align-items: flex-start; }
  .finance-mobile-card footer .row-actions { flex-wrap: nowrap; }
  .order-progress-fields { grid-template-columns: 1fr; }
  .order-progress-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order-progress-card-actions { align-items: stretch; flex-direction: column; }
  .order-progress-card-actions .primary-btn { width: 100%; }
}