/* Qinghe 2026-10 visual system: one responsive palette for desktop and mobile. */
:root {
  --ink: #18351f;
  --muted: #748176;
  --forest: #14301a;
  --forest2: #245827;
  --green: #2e6b2e;
  --sage: #edf4e9;
  --cream: #f5f7f3;
  --paper: #fff;
  --line: #e4eae2;
  --amber: #a66a19;
  --red: #c0392b;
  --shadow: 0 5px 18px #18351f0a;
  --design-brand: #14301a;
  --design-brand2: #2e6b2e;
  --design-mint: #2e6b2e;
  --design-bg: #f5f7f3;
  --design-line: #e4eae2;
  --design-text: #18351f;
  --design-muted: #748176;
}

body { background: var(--design-bg); color: var(--design-text); }
.sidebar { background: #14301a; }
.sidebar .brand small { color: #b9ccb4; }
.nav-caption { color: #aac09f; }
.nav-link { color: #d1ddcd; }
.nav-link.active { background: #e6f1df; color: #14301a; }
.nav-link.sub.active { background: #ffffff20; color: #fff; }
.base-nav summary { color: #d1ddcd; border-radius: 9px; padding: 10px 9px; }
.base-nav summary:hover, .base-nav[open] summary { background: #ffffff0b; }
.base-nav summary strong { font-size: 12px; }
.base-nav-caret, .base-settings-link { color: #b9ccb4; }
.base-nav-links { padding: 4px 0 6px 8px; }
.base-nav .base-settings-link { border-radius: 7px; }
.base-nav .base-settings-link:hover { color: #7ed957; background: #ffffff12; }
.topbar { background: #fff; border-bottom-color: #e6ebe4; }
.btn.primary, .topbar .btn.primary { background: #2e6b2e; border-color: #2e6b2e; }
.btn.primary:hover, .topbar .btn.primary:hover { background: #245827; }
.eyebrow { color: #2e6b2e; }
.main { max-width: 1760px; }
.page-heading h1, .qh-page-title h1, .login-form h2 { color: #18351f; }
.panel, .metric, .module-card, .table-panel, .detail-panel, .integration-card,
.chat-panel, .device-panel, .toolbar, .form-panel {
  border-color: #e4eae2;
  box-shadow: 0 4px 18px #18351f08;
  border-radius: 14px;
}
.module-card:hover { border-color: #a9c79b; box-shadow: 0 10px 24px #18351f12; }
.module-card .icon-box, .metric-icon, .empty-illustration { background: #edf4e9; color: #2e6b2e; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #7ed957; outline-color: #e3f5d9; }
.qh-page-title {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin: 0 0 22px;
}
.qh-page-title h1 { font-size: 26px; line-height: 1.25; margin: 3px 0 5px; }
.qh-page-title p { font-size: 12px; color: #748176; margin: 0; }
.qh-updated { font-size: 11px; color: #748176; white-space: nowrap; }
.qh-dashboard, .qh-work-page, .qh-finance-page { max-width: 1480px; margin: 0 auto; }
.qh-section { margin: 0 0 21px; }
.qh-section-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 0 0 12px; color: #18351f;
}
.qh-section-title > b { font-size: 15px; }
.qh-section-title > b > span, .qh-section-title > span { font-size: 11px; color: #879287; font-weight: 400; }
.qh-section-title > a, .qh-workshop-actions a { font-size: 11px; color: #2e6b2e; white-space: nowrap; }
.qh-stock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.qh-stock-card, .qh-panel, .qh-base-card, .qh-work-card {
  border: 1px solid #e4eae2; border-radius: 14px; background: #fff;
  box-shadow: 0 4px 18px #18351f08;
}
.qh-stock-card { padding: 16px 18px; min-width: 0; }
.qh-stock-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid #edf1eb;
  color: #2e6b2e; font-size: 13px; font-weight: 650;
}
.qh-stock-head strong { font-size: 20px; color: #18351f; white-space: nowrap; }
.qh-stock-item {
  display: flex; justify-content: space-between; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid #f0f3ef; font-size: 11px;
}
.qh-stock-item:last-child { border-bottom: 0; }
.qh-stock-item > span { min-width: 0; overflow-wrap: anywhere; }
.qh-stock-item small { display: inline-block; color: #2e6b2e; background: #edf5e9; border-radius: 5px; padding: 1px 5px; font-size: 9px; }
.qh-stock-item > b { white-space: nowrap; color: #18351f; font-size: 11px; }
.qh-base-card { overflow: hidden; margin-bottom: 12px; }
.qh-base-toggle {
  width: 100%; min-height: 70px; display: flex; align-items: center; gap: 14px;
  text-align: left; padding: 14px 20px; background: #fff; color: #18351f;
}
.qh-base-toggle:hover { background: #fbfdf9; }
.qh-chevron { color: #2e6b2e; font-size: 15px; }
.qh-base-mark {
  width: 35px; height: 35px; display: grid; place-items: center; flex: none;
  border-radius: 11px; background: #edf5e9; color: #2e6b2e; font-size: 19px;
}
.qh-base-title { display: grid; gap: 2px; min-width: 0; }
.qh-base-title strong { font-size: 14px; }
.qh-base-title small, .qh-base-title small { font-size: 10px; color: #879287; }
.qh-base-stats { margin-left: auto; display: flex; align-items: center; gap: 5px; color: #879287; font-size: 10px; white-space: nowrap; }
.qh-base-stats b { color: #2e6b2e; margin-left: 7px; }
.qh-base-body { padding: 17px 20px 20px; border-top: 1px solid #edf1eb; }
.qh-base-body[hidden] { display: none; }
.qh-base-body > .qh-section-title { margin-top: 8px; }
.qh-workshop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.qh-workshop { border: 1px solid #e7ece5; border-radius: 12px; background: #fbfcfa; padding: 14px; min-width: 0; }
.qh-workshop.has-alarm, .qh-work-card.has-alarm { border-color: #e8aaa3; background: #fff7f6; }
.qh-workshop-head, .qh-work-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.qh-workshop-head strong, .qh-work-head h2 { font-size: 13px; margin: 0; }
.qh-workshop-head small, .qh-work-head small { display: block; color: #879287; font-size: 10px; margin-top: 2px; }
.qh-device-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #edf1eb; }
.qh-device-name { display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: center; column-gap: 7px; min-width: 0; }
.qh-device-name b { font-size: 11px; overflow-wrap: anywhere; }
.qh-device-name small { grid-column: 2; color: #879287; font-size: 9px; }
.qh-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #adb6ab; display: inline-block; }
.qh-status-dot.online { background: #2e9b46; box-shadow: 0 0 0 3px #2e9b461b; }
.qh-status-dot.offline { background: #c0392b; }
.qh-status-dot.reserved, .qh-status-dot.unknown { background: #b8bfb5; }
.qh-device-values { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.qh-actual-metric, .qh-state-chip { display: inline-flex; gap: 5px; align-items: center; background: #f0f5ed; border-radius: 6px; padding: 4px 7px; font-size: 10px; white-space: nowrap; }
.qh-actual-metric small { color: #748176; font-size: 9px; }
.qh-actual-metric b { color: #18351f; }
.qh-state-chip i { width: 7px; height: 7px; border-radius: 50%; background: #adb6ab; }
.qh-state-chip i.is-on { background: #55b74b; }
.qh-workshop-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 13px; padding-top: 10px; border-top: 1px solid #edf1eb; }
.qh-camera-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.qh-camera { min-height: 110px; border-radius: 10px; border: 1px solid #e6ebe3; background: #f3f6f1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #748176; font-size: 11px; }
.qh-camera > span { color: #879287; }
.qh-camera b { font-size: 11px; color: #18351f; }
.qh-camera small { font-size: 9px; }
.qh-batches { display: grid; gap: 7px; }
.qh-batch-row {
  display: grid; grid-template-columns: minmax(180px, 1.15fr) minmax(100px, .8fr) minmax(140px, 1fr) auto;
  align-items: center; gap: 14px; border: 1px solid #edf1eb; border-radius: 9px;
  padding: 10px 13px; font-size: 10px;
}
.qh-batch-row > div:first-child { display: flex; gap: 12px; align-items: center; min-width: 0; }
.qh-batch-row > div:first-child b, .qh-batch-row > div:first-child strong { color: #18351f; font-size: 11px; white-space: nowrap; }
.qh-batch-row > div:first-child span, .qh-batch-row > small { color: #879287; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-progress { height: 8px; position: relative; background: #edf1eb; border-radius: 7px; overflow: hidden; }
.qh-progress i { display: block; height: 100%; border-radius: 7px; background: #7ed957; }
.qh-progress b { position: absolute; right: 0; top: -19px; color: #2e6b2e; font-size: 10px; }
.qh-batch-stage { color: #2e6b2e; font-size: 10px; font-weight: 650; white-space: nowrap; }
.qh-unassigned-note { padding: 9px 12px; border-radius: 8px; background: #f5f7f3; color: #748176; font-size: 10px; margin: 12px 0; }
.qh-base-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.qh-base-footer .btn { color: #2e6b2e; border-color: #dce7d6; }
.qh-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.qh-panel { padding: 17px; min-width: 0; }
.qh-panel .qh-section-title { margin-bottom: 8px; }
.qh-alert { background: #f1f7ed; color: #2e6b2e; }
.qh-alert.high { background: #fff0ee; color: #c0392b; }
.qh-source { font-size: 10px; color: #879287; }
.qh-work-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.qh-work-summary > div, .qh-finance-metrics article { padding: 15px 17px; border: 1px solid #e4eae2; border-radius: 12px; background: #fff; }
.qh-work-summary small, .qh-finance-metrics small { display: block; font-size: 10px; color: #879287; }
.qh-work-summary b { display: block; margin-top: 5px; font-size: 23px; color: #18351f; }
.qh-work-summary b.red, .qh-finance-metrics b.red { color: #c0392b; }
.qh-work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-bottom: 16px; }
.qh-work-card { padding: 16px; min-width: 0; }
.qh-work-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qh-work-device { border: 1px solid #edf1eb; border-radius: 9px; padding: 10px; min-width: 0; }
.qh-work-device > div { display: flex; align-items: center; gap: 7px; }
.qh-work-device b { font-size: 11px; }
.qh-work-device small, .qh-work-device p { font-size: 9px; color: #879287; margin: 4px 0; }
.qh-work-device > a { display: inline-block; margin-top: 7px; color: #2e6b2e; font-size: 10px; }
.qh-work-batches { margin-top: 12px; padding-top: 10px; border-top: 1px solid #edf1eb; }
.qh-work-batches > b { font-size: 11px; }
.qh-work-batches > .qh-batch-row { grid-template-columns: minmax(100px, 1fr) minmax(110px, 1fr) auto; padding: 8px 0; border: 0; border-bottom: 1px solid #f0f3ef; }
.qh-finance-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.qh-finance-metrics b { display: block; font-size: 24px; color: #18351f; margin: 5px 0; }
.qh-finance-metrics b.green { color: #2e6b2e; }
.qh-finance-metrics span { font-size: 9px; color: #879287; }
.qh-finance-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; }
.qh-finance-chart { height: 215px; display: flex; align-items: stretch; justify-content: space-around; gap: 8px; padding: 12px 8px 0; border-bottom: 1px solid #e8ede6; }
.qh-finance-month { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.qh-finance-bars { height: 175px; display: flex; align-items: flex-end; gap: 5px; }
.qh-finance-bars i { display: block; width: 15px; max-height: 150px; min-height: 3px; border-radius: 5px 5px 0 0; background: #7ed957; }
.qh-finance-bars i.expense { background: #c0392b; }
.qh-finance-month > small { font-size: 9px; white-space: nowrap; }
.qh-chart-legend { display: flex; gap: 15px; margin-top: 9px; color: #748176; font-size: 10px; }
.qh-chart-legend span { display: flex; align-items: center; gap: 5px; }
.qh-chart-legend i { width: 9px; height: 9px; border-radius: 2px; background: #7ed957; }
.qh-chart-legend i.expense { background: #c0392b; }
.qh-finance-table { overflow-x: auto; }
.qh-finance-row { display: grid; grid-template-columns: minmax(100px, 1.3fr) repeat(3, minmax(70px, 1fr)); gap: 9px; padding: 10px 8px; border-bottom: 1px solid #edf1eb; font-size: 11px; }
.qh-finance-row.header { background: #f5f8f3; color: #748176; font-size: 10px; }
.qh-finance-row b { color: #18351f; }
.qh-finance-row.total { font-weight: 700; background: #f8faf6; }
.qh-finance-note { font-size: 10px; color: #748176; line-height: 1.7; margin-top: 10px; }
.nav-link.active { background: #e6f1df; color: #14301a; }
.nav-link.sub.active { background: #ffffff20; color: #fff; }
.btn, .icon-btn, .module-card, .qh-stock-card, .qh-workshop, .qh-work-card, .qh-base-card { transition: background-color .16s, border-color .16s, box-shadow .16s, transform .16s; }
.qh-base-toggle:focus-visible, .mobile-tabbar a:focus-visible { outline: 3px solid #7ed957; outline-offset: -3px; }
.mobile-tabbar { display: none; }

@media (max-width: 900px) {
  .main { padding: 22px 22px 34px; }
  .topbar { padding: 0 18px; }
  .sidebar { width: min(290px, 84vw); }
  .qh-dashboard, .qh-work-page, .qh-finance-page { max-width: none; }
  .qh-stock-grid { gap: 11px; }
  .qh-base-body { padding: 14px; }
  .qh-work-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qh-finance-grid { grid-template-columns: 1fr; }
  .qh-finance-chart { height: 205px; }
}
@media (max-width: 650px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .topbar { height: 60px; padding: 0 10px; }
  .topbar .breadcrumb { max-width: calc(100vw - 175px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .row { gap: 5px; }
  .top-actions { gap: 3px; }
  .top-actions > .icon-btn { width: 32px; height: 32px; }
  .top-actions .user-button { margin-left: 3px; }
  .mobile-assistant { display: inline-flex; min-height: 31px; padding: 5px 9px; background: #edf5e9; color: #2e6b2e; border-color: #dce9d4; }
  .main { padding: 17px 12px 22px; }
  .qh-page-title { align-items: flex-start; margin-bottom: 15px; }
  .qh-page-title h1 { font-size: 21px; }
  .qh-page-title p { font-size: 10px; line-height: 1.5; }
  .qh-page-title .qh-updated { font-size: 9px; padding-top: 5px; }
  .qh-section { margin-bottom: 16px; }
  .qh-section-title { align-items: flex-start; margin-bottom: 9px; }
  .qh-section-title > b { font-size: 13px; }
  .qh-section-title > b > span, .qh-section-title > span { font-size: 9px; }
  .qh-stock-grid { grid-template-columns: 1fr; gap: 8px; }
  .qh-stock-card { padding: 12px 14px; border-radius: 11px; }
  .qh-stock-head { padding-bottom: 7px; font-size: 12px; }
  .qh-stock-head strong { font-size: 17px; }
  .qh-stock-item { padding: 6px 0; font-size: 10px; }
  .qh-base-toggle { min-height: 63px; gap: 8px; padding: 10px; }
  .qh-base-mark { width: 29px; height: 29px; font-size: 16px; }
  .qh-base-title strong { font-size: 12px; }
  .qh-base-title small { font-size: 9px; }
  .qh-base-stats { gap: 2px; font-size: 8px; }
  .qh-base-stats b { margin-left: 3px; }
  .qh-base-body { padding: 11px; }
  .qh-workshop-grid { grid-template-columns: 1fr; gap: 8px; }
  .qh-workshop { padding: 11px; }
  .qh-device-row { gap: 6px; }
  .qh-device-values { gap: 4px; }
  .qh-actual-metric, .qh-state-chip { font-size: 9px; padding: 3px 5px; }
  .qh-camera-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .qh-camera { min-height: 84px; }
  .qh-batch-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 9px; }
  .qh-batch-row > div:first-child { gap: 7px; flex-wrap: wrap; }
  .qh-batch-row > small { grid-column: 1 / -1; grid-row: 2; }
  .qh-batch-row > .qh-progress { grid-column: 1 / -1; grid-row: 3; margin-top: 7px; }
  .qh-batch-row > .qh-batch-stage { grid-column: 2; grid-row: 1; }
  .qh-bottom-grid { grid-template-columns: 1fr; gap: 9px; }
  .qh-panel { padding: 13px; }
  .qh-work-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .qh-work-summary > div { padding: 11px; }
  .qh-work-summary b { font-size: 19px; }
  .qh-work-grid { grid-template-columns: 1fr; gap: 9px; }
  .qh-work-card { padding: 12px; }
  .qh-work-metrics { grid-template-columns: 1fr; }
  .qh-work-batches > .qh-batch-row { grid-template-columns: minmax(0, 1fr) auto; }
  .qh-finance-metrics { grid-template-columns: 1fr; gap: 7px; }
  .qh-finance-metrics article { padding: 11px 13px; }
  .qh-finance-metrics b { font-size: 20px; }
  .qh-finance-row { grid-template-columns: minmax(76px, 1.2fr) repeat(3, minmax(60px, .9fr)); gap: 5px; padding: 9px 5px; font-size: 9px; }
  .qh-finance-chart { height: 180px; }
  .qh-finance-bars { height: 145px; }
  .qh-finance-bars i { width: 10px; }
  .qh-finance-month > small { font-size: 8px; }
  .qh-source { text-align: left; line-height: 1.6; }
  .mobile-tabbar {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid;
    grid-template-columns: repeat(4, 1fr); min-height: calc(58px + env(safe-area-inset-bottom));
    padding: 4px 5px calc(4px + env(safe-area-inset-bottom)); background: #fff;
    border-top: 1px solid #e4eae2; box-shadow: 0 -4px 18px #18351f0c;
  }
  .mobile-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #788278; font-size: 9px; }
  .mobile-tabbar a svg { width: 19px; height: 19px; }
  .mobile-tabbar a.active { color: #2e6b2e; font-weight: 700; }
  .mobile-tabbar a.active svg { stroke-width: 2.4; }
  .toast { bottom: calc(75px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
  dialog { max-width: calc(100vw - 20px); }
}