:root {
  --farm-ink: #26362d;
  --farm-muted: #748176;
  --farm-line: #e4e9e1;
  --farm-paper: #f5f7f3;
  --farm-sage: #edf3e9;
  --farm-leaf: #477b55;
  --farm-leaf-deep: #294d37;
  scrollbar-color: #c7d2c5 var(--farm-paper);
  scrollbar-width: thin;
}

::selection { background: #d6e5d1; color: #243a2b; }
body { color: var(--farm-ink); background: var(--farm-paper); }
.sidebar { width: 252px; background: #244532; color: #eff5ec; box-shadow: 1px 0 0 #1a3828; }
.brand { padding: 22px 19px 20px; }
.brand img { border-radius: 11px; }
.brand small { color: #c1d2c2; }
.side-nav { display: grid; align-content: start; gap: 18px; padding: 4px 13px 18px; overflow: auto; }
.nav-group { display: grid; gap: 3px; }
.nav-group-label { padding: 0 12px 7px; color: #a9c0ac; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.side-nav button { min-height: 42px; padding: 9px 12px; border-radius: 8px; color: #d9e6da; font-size: 13px; transition: background-color .16s ease, color .16s ease; }
.side-nav button:hover { background: #ffffff10; color: #fff; }
.side-nav button.active { color: #f9fff4; background: #3b6248; box-shadow: inset 3px 0 #c4d89a; }
.side-nav .line-icon { width: 17px; height: 17px; color: #c5d7bd; }
.side-account { padding: 14px 17px; border-color: #ffffff1c; color: #d7e4d8; }
.side-account button { padding: 7px 9px; border-radius: 7px; color: #d7e4d8; }
.side-account button:hover { background: #ffffff12; color: #fff; }
.main { margin-left: 252px; }
.topbar { z-index: 10; height: 64px; padding: 0 30px; border-color: var(--farm-line); background: #fbfcfa; }
.topbar h1 { font-size: 17px; letter-spacing: 0; }
.farm-label { display: flex; align-items: center; gap: 8px; color: #55675a; font-size: 12px; }
.farm-label:before { width: 7px; height: 7px; border-radius: 50%; background: #6c9b66; content: ""; }
.content { max-width: 1500px; padding: 25px 30px 48px; }
.overview-heading { align-items: center; margin: 0 0 18px; }
.overview-heading p { margin-top: 5px; color: var(--farm-muted); font-size: 12px; }
.section-title { font-size: 17px; letter-spacing: 0; }
.small-button, .secondary { border-color: #dce5d9; border-radius: 8px; color: #3d6347; background: #fff; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.small-button:hover, .secondary:hover { border-color: #bbcfb7; background: #f6faf4; }
.primary { border-radius: 8px; background: var(--farm-leaf); }
.primary:hover { background: #396c48; }
.stats-grid { gap: 12px; margin-bottom: 16px; }
.stat { position: relative; min-height: 108px; padding: 15px 17px; border: 1px solid #e6ebe4; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px #243c2b08; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.stat:hover { transform: translateY(-2px); border-color: #d0ddcc; box-shadow: 0 7px 18px #243c2b0d; }
.stat-label { color: #68776b; font-size: 12px; }
.stat-value { margin-top: 8px; color: #2e4d37; font-size: 26px; letter-spacing: 0; }
.stat-foot { margin-top: 3px; color: #929c92; font-size: 10px; }
.overview-grid { gap: 14px; margin-bottom: 14px; }
.panel { padding: 17px; border: 1px solid #e6ebe4; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px #243c2b08; }
.panel-head { margin-bottom: 13px; }
.panel-head h2 { color: #304235; font-size: 14px; }
.panel-head span { color: #859087; font-size: 11px; }
.sensor-list { gap: 7px; }
.sensor-reading { padding: 10px 11px; border: 1px solid #edf1eb; border-radius: 8px; background: #f8faf7; }
.sensor-reading span { color: #66756a; font-size: 10px; }
.sensor-reading b { margin-top: 5px; color: #2e4d37; font-size: 18px; }
.realtime-panel, .realtime-chart-panel { margin-bottom: 16px; }
.realtime-device { padding: 15px 0; border-bottom: 1px solid #edf0eb; }
.realtime-device:last-child { border-bottom: 0; padding-bottom: 0; }
.realtime-device-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.realtime-device-head h3 { margin: 0; color: #34483a; font-size: 14px; }
.realtime-device-head p { margin: 5px 0 0; color: #758177; font-size: 11px; }
.realtime-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.realtime-empty { margin-top: 12px; padding: 14px; border-radius: 8px; color: #7c897f; background: #f6f8f4; font-size: 12px; }
.realtime-device footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 10px; color: #879188; font-size: 10px; }
.chart { height: 248px; }
.chart-tabs { display:flex; flex-wrap:wrap; gap:5px; margin:-3px 0 4px; }
.chart-tab { padding:5px 9px; border:1px solid transparent; border-radius:7px; background:transparent; color:#788579; font-size:11px; transition:background-color .16s ease,color .16s ease,border-color .16s ease; }
.chart-tab:hover { color:#355e3e; background:#f4f7f1; }
.chart-tab.active { border-color:#dbe8d7; color:#326b40; background:#edf4e9; font-weight:700; }
.chart-empty,.chart-empty-inline { display:grid; min-height:180px; place-items:center; color:#879287; font-size:12px; }
.chart-empty { min-height:248px; }
.chart-empty-inline { display:inline-flex; min-height:0; }
.camera-grid { gap: 10px; }
.camera-card { border: 1px solid #e7ece5; border-radius: 9px; background: #f7f9f6; }
.camera-name { padding: 8px 10px; color: #4d5d50; font-size: 11px; }
.table-wrap { border: 1px solid #e6ebe4; border-radius: 9px; box-shadow: none; }
.admin-table th, .admin-table td { padding: 11px 13px; border-color: #edf0eb; }
.admin-table th { color: #647267; background: #f6f8f5; font-size: 11px; font-weight: 700; }
.admin-table td { color: #39483d; font-size: 12px; }
.admin-table tbody tr:hover { background: #f8faf7; }
.thumb { border-radius: 8px; }
.tabs { gap: 4px; border-color: #e4e9e1; }
.tabs button { padding: 9px 12px; color: #748176; font-size: 12px; }
.tabs button.active { color: #3f744a; }
.tabs button.active:after { right: 8px; left: 8px; height: 2px; border-radius: 2px; background: #5c8d5e; }
.device-card { padding: 16px 0; border-color: #edf0eb; }
.device-badge { width: 32px; height: 32px; border-radius: 8px; background: #edf3e9; color: #4a7952; }
.device-status, .pill { padding: 3px 8px; border-radius: 6px; background: #f0f2ef; color: #67736a; font-size: 10px; }
.device-status.is-on, .pill-on { background: #edf5e8; color: #477849; }
.camera-form { padding: 14px; border: 1px solid #e8ede6; border-radius: 9px; background: #fafbf9; }
.device-form input, .device-form select, .device-form textarea, .camera-form input, .camera-form select { border-color: #dfe6dc; border-radius: 7px; }
.settings-panel { padding: 20px; border: 1px solid #e6ebe4; border-radius: 10px; box-shadow: 0 2px 8px #243c2b08; }
.modal { width: min(92vw, 760px); max-width: 760px; max-height: 90dvh; margin: auto; padding: 0; overflow: hidden; border: 1px solid #dfe7dc; border-radius: 12px; background: #fbfcfa; box-shadow: 0 24px 80px #10251845; }
.modal::backdrop { background: #12251a8c; backdrop-filter: blur(2px); }
.modal-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; max-height: 90dvh; overflow: hidden; padding: 0; }
.modal-card > form { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; }
.modal-card h2 { position: relative; margin: 0; padding: 20px 56px 16px 24px; border-bottom: 1px solid #e7ece4; color: #304235; font-size: 17px; }
.modal-card #modalBody { min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 8px 24px 18px; overscroll-behavior: contain; scrollbar-color: #c7d2c5 #f5f7f3; scrollbar-width: thin; }
.modal-card .modal-actions { position: relative; z-index: 1; justify-content: flex-end; margin: 0; padding: 13px 24px; border-top: 1px solid #e4e9e1; background: #fbfcfa; }
.modal-card .modal-actions button { min-width: 88px; min-height: 40px; }
.modal[data-saving] .modal-close, .modal[data-saving] .modal-actions .secondary { opacity: .5; pointer-events: none; }
.modal-card .modal-close { position: absolute; z-index: 2; top: 12px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: #617066; font-size: 24px; }
.modal-card .modal-close:hover { background: #edf3e9; color: #294d37; }
.modal-card #modalBody > .modal-close { position: sticky; top: 0; z-index: 4; margin: -8px -14px -36px auto; }
.modal.modal-compact { width: min(92vw, 390px); }
.modal.modal-compact .modal-card #modalBody { padding-top: 12px; }
.confirm-dialog { width: min(calc(100vw - 32px), 430px); }
.confirm-card { display: block; padding: 24px; }
.confirm-card .confirm-mark { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 10px; color: #8a5a1c; background: #fbf0d9; font-size: 20px; font-weight: 750; }
.confirm-card h2 { margin: 0 0 8px; padding: 0; border: 0; }
.confirm-card p { margin: 0; color: #68766b; font-size: 13px; line-height: 1.65; }
.confirm-card .modal-actions { margin-top: 22px; padding: 12px 0 0; border-top: 1px solid var(--farm-line); }
.danger-button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 8px; color: #fff; background: #a94e43; font-weight: 700; }
.danger-button:hover { background: #913d34; }
.error-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #6a483f; }
.field-label { display: block; margin-bottom: 6px; color: #536259; font-size: 13px; font-weight: 650; }
.field:disabled { color: #758278; background: #f3f5f1; cursor: not-allowed; }
.label { display:grid; align-content:start; gap:6px; min-width:0; margin:0; line-height:1.4; }
.label > .field-label { min-width:0; margin:0; line-height:1.4; }
.label > .field { display:block; width:100%; min-width:0; margin:0; box-sizing:border-box; line-height:1.4; }
.form-grid { row-gap:14px; }
.device-form { row-gap:14px; column-gap:12px; }
.device-form label, .camera-form label { display:grid; align-content:start; gap:6px; min-width:0; line-height:1.4; }
.device-form label > .field-label, .camera-form label > .field-label { display:block; margin:0; line-height:1.4; }
.device-form input, .device-form select, .device-form textarea, .camera-form input, .camera-form select { margin:0; min-width:0; box-sizing:border-box; line-height:1.35; }
.upload-field .upload-note, .upload-field .upload-preview { min-width:0; }
.toast { border-radius: 8px; background: #294d37; }
.modal-feedback { position: absolute; z-index: 5; right: 16px; bottom: 76px; left: 16px; display: none; padding: 11px 14px; border: 1px solid #e8c6be; border-radius: 8px; color: #7e342c; background: #fff8f6; box-shadow: 0 8px 24px #24140f26; font-size: 12px; line-height: 1.45; text-align: center; }
.modal-feedback.show { display: block; animation: errorIn .18s ease-out both; }
.page-enter { animation: enter .18s ease-out both; }
@keyframes enter { from { opacity: .72; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .sidebar { width: 272px; }
  .main { margin-left: 0; }
  .topbar { height: 58px; padding: 0 15px; }
  .content { padding: 18px 14px 36px; }
  .overview-heading { align-items: flex-start; }
  .stat { min-height: 98px; padding: 13px; }
  .panel { padding: 14px; }
  .chart { height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.list-page .overview-heading { gap: 18px; }
.list-summary { margin: 5px 0 0; color: var(--farm-muted); font-size: 12px; }
.list-summary strong { color: var(--farm-leaf-deep); font-variant-numeric: tabular-nums; }
.list-search-wrap { position: relative; display: flex; align-items: center; width: min(300px, 100%); min-width: 0; }
.list-search-wrap input { width: 100%; height: 36px; padding: 0 34px 0 34px; border: 1px solid #dfe7dc; border-radius: 8px; color: var(--farm-ink); background: #fff; font-size: 12px; outline: 0; transition: border-color .16s ease, box-shadow .16s ease; }
.list-search-wrap input::placeholder { color: #a0aaa2; }
.list-search-wrap input:focus { border-color: #87ad83; box-shadow: 0 0 0 3px #dbe9d8; }
.list-search-icon { position: absolute; left: 11px; width: 15px; height: 15px; color: #8c9a8d; pointer-events: none; }
.list-search-wrap button { position: absolute; right: 7px; width: 23px; height: 23px; border: 0; border-radius: 6px; color: #718176; background: transparent; font-size: 18px; line-height: 1; }
.list-search-wrap button:hover { background: var(--farm-sage); color: var(--farm-leaf-deep); }
.list-table-shell { position: relative; }
.list-table-shell .table-wrap { min-height: 94px; }
.list-table-shell .admin-table { table-layout: auto; }
.list-table-shell .admin-table th:first-child { min-width: 155px; }
.list-table-shell .admin-table td { vertical-align: middle; }
.row-primary { display: block; color: #33483a; font-size: 12px; font-weight: 700; }
.row-code { color: #596d5d; font-size: 12px; font-variant-numeric: tabular-nums; }
.row-primary + small { display: block; margin-top: 3px; color: #859188; font-size: 10px; }
.list-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 6px; color: #5a6b5d; background: #f1f4ef; font-size: 11px; white-space: nowrap; }
.list-badge.is-active { color: #477849; background: #edf5e8; }
.list-badge.event-badge { color: #536b59; background: #eff5ec; }
.list-badge.stage-0, .list-badge.stage-1 { color: #886634; background: #fbf3df; }
.list-badge.stage-2, .list-badge.stage-3 { color: #4e7551; background: #edf5e8; }
.list-badge.stage-4, .list-badge.stage-5 { color: #47748b; background: #eaf3f5; }
.crop-row-cell { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.list-thumb { position: relative; display: inline-grid; flex: none; place-items: center; width: 48px; height: 48px; overflow: hidden; border: 1px solid #e1e9df; border-radius: 9px; background: #f3f7f0; }
.list-thumb:after { position: absolute; inset: auto 0 5px; color: #9aaa9b; content: "暂无"; font-size: 9px; text-align: center; }
.list-thumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #f7faf5; }
.list-thumb.crop-art { width: 54px; height: 54px; border-radius: 11px; }
.list-thumb.record-art { width: 46px; height: 46px; }
.list-thumb:not(.is-missing):after { display: none; }
.record-time { color: #66766a; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.record-description { max-width: 360px; overflow: hidden; color: #55645a; text-overflow: ellipsis; white-space: nowrap; }
.record-image-cell { display: flex; align-items: center; gap: 6px; }
.record-image-cell small { color: #748176; font-size: 10px; }
.no-image { color: #a0aaa2; font-size: 11px; }
.list-no-match { padding: 24px; color: #7a897c; font-size: 12px; text-align: center; }
.list-no-match[hidden] { display: none; }
.admin-table tbody tr[hidden] { display: none; }
.list-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 13px 2px 0; color: #718176; font-size: 11px; }
.list-pagination select { min-width: 54px; height: 29px; margin: 0 4px; padding: 0 7px; border: 1px solid #dfe7dc; border-radius: 6px; color: #425548; background: #fff; }
.pagination-actions { display: flex; gap: 6px; }
.pagination-actions button { min-height: 30px; padding: 0 10px; border: 1px solid #dfe7dc; border-radius: 6px; color: #47614b; background: #fff; font-size: 11px; transition: background-color .15s ease, border-color .15s ease; }
.pagination-actions button:hover:not(:disabled) { border-color: #bfd1ba; background: #f3f8f1; }
.pagination-actions button:disabled { color: #a5aea6; background: #f5f6f4; cursor: not-allowed; }
.list-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: nowrap; min-width: 0; }
.list-toolbar #addUser { flex: none; white-space: nowrap; }
.list-toolbar .primary { flex: 0 0 auto; white-space: nowrap; }
.row-actions { min-width: max-content; white-space: nowrap; }
.table-actions { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; margin: 0 5px 0 0; padding: 0 9px; border: 1px solid #dce5da; border-radius: 7px; color: #3f7049; background: #fff; font-size: 11px; font-weight: 650; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease; }
.table-actions:hover { border-color: #b9ceb5; color: #285d37; background: #f2f7ef; transform: translateY(-1px); }
.table-actions:focus-visible { outline: 2px solid #6fa477; outline-offset: 2px; }
.table-actions.danger { border-color: #ecd5d1; color: #9b493e; background: #fffafa; }
.table-actions.danger:hover { border-color: #d9aaa3; color: #84382f; background: #fcf0ee; }
.table-actions.state-action { border-color: #e5e1c9; color: #806d37; background: #fffdf5; }
.table-actions.state-action:hover { border-color: #d7cb9e; color: #68551f; background: #faf6e7; }
.table-actions:disabled { opacity: .55; cursor: wait; transform: none; }
@media (max-width: 760px) { .row-actions .table-actions { min-height: 29px; margin-right: 4px; padding: 0 8px; } }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid > .label { min-width: 0; }
.form-span-2 { grid-column: 1 / -1; }
.form-grid textarea.field { min-height: 80px; height: auto; padding: 10px 11px; line-height: 1.5; resize: vertical; }
.upload-field input[type="file"] { height: auto; padding: 9px 10px; cursor: pointer; }
.upload-note { display: block; margin-top: 2px; color: #859188; font-size: 10px; font-weight: 400; line-height: 1.45; }
.upload-preview, .current-upload-images { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.upload-preview img, .current-upload-images img, .current-upload > img { width: 58px; height: 58px; object-fit: contain; padding: 3px; border: 1px solid #e1e9df; border-radius: 8px; background: #f6faf4; }
.upload-preview.crop-image-preview { display: grid; width: 142px; height: 142px; place-items: center; overflow: hidden; border: 1px solid #dfe8dc; border-radius: 12px; background-color: #fbfcf9; background-image: linear-gradient(45deg, #edf2ea 25%, transparent 25%), linear-gradient(-45deg, #edf2ea 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #edf2ea 75%), linear-gradient(-45deg, transparent 75%, #edf2ea 75%); background-position: 0 0, 0 7px, 7px -7px, -7px 0; background-size: 14px 14px; }
.upload-preview.crop-image-preview img { width: 124px; height: 124px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.current-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: #7b897e; font-size: 10px; }
.current-upload-images { width: 100%; margin-top: 0; }
  .modal { width: calc(100vw - 24px); max-height: 92dvh; border-radius: 11px; }
  .modal-card { max-height: 92dvh; }
  .modal-card h2 { padding: 17px 52px 14px 18px; }
  .modal-card #modalBody { padding: 6px 18px 15px; }
  .modal-card .modal-actions { gap: 8px; padding: 11px 18px max(11px, env(safe-area-inset-bottom)); }
  .modal-card .modal-actions button { min-width: 0; flex: 1; }
  .modal-card .modal-close { top: 8px; right: 9px; }
  .modal-feedback { right: 10px; bottom: 68px; left: 10px; }
  .modal.modal-compact { width: min(calc(100vw - 24px), 390px); }

@media (max-width: 760px) {
  .list-page .overview-heading { gap: 12px; }
  .list-search-wrap { width: auto; flex: 1 1 auto; }
  .list-table-shell .table-wrap { margin: 0 -2px; }
  .list-table-shell .admin-table th, .list-table-shell .admin-table td { padding: 10px 11px; }
  .record-description { max-width: 190px; }
  .list-toolbar { width: 100%; align-items: center; }
  .list-toolbar .primary { width: auto; }
  .list-pagination { justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .pagination-actions { margin-left: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .form-span-2 { grid-column: auto; }
}