:root {
  --ink: #17342d;
  --ink-soft: #60746e;
  --forest: #174b3b;
  --forest-2: #23634f;
  --mint: #dcefe2;
  --mint-2: #edf7f0;
  --cream: #f5f4ee;
  --paper: #fffefa;
  --line: #e6e8e1;
  --coral: #e56f55;
  --coral-soft: #fff0eb;
  --amber: #d89b3d;
  --amber-soft: #fff5df;
  --shadow: 0 8px 28px rgba(34, 61, 51, .07);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--cream);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  -webkit-font-smoothing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20;
  width: 244px; padding: 26px 18px 20px;
  background: var(--forest); color: #fff;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; padding: 0 10px 28px; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: #d8efca; color: var(--forest); }
.brand-mark svg { width: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand strong { display: block; font-size: 22px; letter-spacing: .18em; }
.brand small { display: block; margin-top: 2px; font-size: 9px; letter-spacing: .28em; opacity: .62; }
.nav-list { display: flex; flex-direction: column; gap: 6px; }
.nav-item { min-height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 12px; border-radius: 12px; color: rgba(255,255,255,.7); text-decoration: none; font-size: 14px; transition: .2s ease; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); }
.nav-item.active { background: #fff; color: var(--forest); box-shadow: 0 8px 20px rgba(4, 35, 26, .18); font-weight: 700; }
.nav-icon { width: 24px; height: 24px; display: grid; place-items: center; font-size: 18px; }
.nav-item em { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-style: normal; color: inherit; background: rgba(255,255,255,.12); }
.nav-item.active em { background: var(--mint); }
.nav-item .alert-count { background: var(--coral); color: #fff; }
.sidebar-foot { margin-top: auto; padding-top: 24px; }
.device-state { margin: 0 4px 18px; padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 4px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.06); }
.device-state .pulse-dot { margin-top: 5px; }
.device-state strong, .device-state small { display: block; }
.device-state strong { font-size: 12px; }
.device-state small { margin-top: 4px; color: rgba(255,255,255,.55); font-size: 10px; }
.device-state b { grid-column: 2; color: #cbe9bb; font-size: 15px; }
.pulse-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #8fd178; box-shadow: 0 0 0 5px rgba(143,209,120,.13); }
.user-card { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; margin-top: 16px; padding: 16px 8px 0; border-top: 1px solid rgba(255,255,255,.1); }
.avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #d8efca; color: var(--forest); font-weight: 800; }
.user-card strong, .user-card small { display: block; }
.user-card strong { font-size: 13px; }.user-card small { margin-top: 3px; font-size: 10px; color: rgba(255,255,255,.55); }
.icon-button { border: 0; background: transparent; cursor: pointer; padding: 8px; border-radius: 9px; }
.user-card .icon-button { color: rgba(255,255,255,.55); }

.main-content { margin-left: 244px; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 12; height: 76px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(26,60,50,.08); background: rgba(245,244,238,.88); backdrop-filter: blur(18px); }
.farm-selector { display: flex; align-items: center; gap: 10px; }
.farm-selector small, .farm-selector strong { display: block; }
.farm-selector small { color: var(--ink-soft); font-size: 10px; }
.farm-selector strong { margin-top: 2px; font-size: 14px; }
.farm-pin { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--mint); color: var(--forest); font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.sync-state { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 12px; }
.notify-button { position: relative; width: 38px; height: 38px; border: 1px solid var(--line); background: var(--paper); }
.notify-button i { position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border: 2px solid var(--paper); border-radius: 50%; background: var(--coral); }
.top-actions time { min-width: 72px; color: var(--ink-soft); font: 500 12px ui-monospace, monospace; }
.mobile-menu { display: none; }

/* 宽屏下充分利用主内容区，减少监测面板两侧的无效留白。 */
.dashboard { max-width: 2100px; margin: 0 auto; padding: 28px 36px 24px; }
.welcome-row { display: grid; grid-template-columns: 1fr 470px; gap: 26px; align-items: center; margin-bottom: 24px; }
.eyebrow, .section-kicker { margin: 0 0 7px; color: var(--forest-2); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 7px; color: #15392f; font-family: inherit; font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.welcome-row > div > p:last-child { margin: 0; color: var(--ink-soft); font-size: 13px; }
.text-link { padding: 0; border: 0; color: var(--coral); background: none; font-weight: 700; cursor: pointer; }
.weather-card { position: relative; min-height: 132px; padding: 20px 20px 42px; display: grid; grid-template-columns: 58px 110px 1fr; align-items: center; gap: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 20px; background: linear-gradient(120deg, #e8f2dd, #d9ebe3); box-shadow: var(--shadow); }
.weather-card::after { content:""; position:absolute; width:130px; height:130px; right:-35px; top:-65px; border: 24px solid rgba(255,255,255,.28); border-radius:50%; }
.weather-icon { position: relative; width: 50px; height: 50px; }
.weather-icon::before { content:""; position:absolute; width:28px; height:28px; left:2px; top:2px; border-radius:50%; background:#f5bd58; box-shadow: 0 0 0 7px rgba(245,189,88,.16); }
.weather-icon span { position:absolute; width:39px; height:19px; left:10px; bottom:6px; border-radius: 16px; background:#fff; box-shadow: -11px -3px 0 -3px #fff; }
.weather-main small { display:block; color:var(--ink-soft); font-size:10px; white-space:nowrap; }
.weather-main strong { display:block; margin-top:3px; font: 700 33px Georgia, serif; }
.weather-main sup { font:600 14px system-ui; }
.weather-meta { padding-left: 14px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-left:1px solid rgba(23,75,59,.14); }
.weather-meta span { display:flex; flex-direction:column; color:var(--ink-soft); font-size:10px; }
.weather-meta b { margin-top:5px; color:var(--ink); font-size:12px; }
.comfort-tag { position:absolute; top:10px; right:12px; display:flex; gap:6px; align-items:center; color:var(--forest-2); font-size:9px; font-weight:700; }
.comfort-tag i { width:6px; height:6px; border-radius:50%; background:#6dad62; }
.weather-history-button { position:absolute; right:14px; bottom:10px; padding:4px 7px; border:0; border-radius:7px; color:var(--forest-2); background:rgba(255,255,255,.48); font-size:10px; font-weight:800; cursor:pointer; }.weather-history-button:hover { background:rgba(255,255,255,.84); }.weather-history-button span { margin-left:4px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.kpi-card { position: relative; min-height: 152px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 4px 18px rgba(34,61,51,.045); }
.kpi-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--tone); }
.kpi-card.green { --tone: var(--forest-2); }.kpi-card.mint { --tone:#77aa72; }.kpi-card.amber { --tone:var(--amber); }.kpi-card.coral { --tone:var(--coral); }
.kpi-head { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; }
.kpi-head > span:nth-child(2) { font-size: 12px; font-weight: 700; }
.kpi-head small { color: var(--ink-soft); font-size: 9px; }
.metric-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:var(--tone); background:color-mix(in srgb, var(--tone) 12%, white); font-weight:800; }
.kpi-value { margin-top: 15px; font: 700 34px Georgia, serif; letter-spacing:-.04em; }
.kpi-value small { font: 500 11px system-ui; color:var(--ink-soft); }
.progress { height:5px; margin-top:15px; overflow:hidden; border-radius:5px; background:#edf0ea; }.progress i { display:block; height:100%; border-radius:inherit; background:var(--tone); }
.mini-bars { position:absolute; right:18px; bottom:20px; width:76px; height:42px; display:flex; align-items:flex-end; gap:5px; }
.mini-bars i { flex:1; border-radius:4px 4px 1px 1px; background:var(--mint); }.mini-bars i:nth-last-child(-n+2){background:#7baa70;}
.kpi-foot { margin-top:14px; display:flex; gap:10px; color:var(--ink-soft); font-size:9px; }.kpi-foot span { padding:5px 7px; border-radius:6px; background:#f5f5f0; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(330px, .8fr); gap: 16px; margin-bottom: 28px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.trend-panel { padding: 22px 24px 18px; overflow:hidden; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.panel-head h2, .section-heading h2 { margin:0 0 4px; font-family:inherit; font-size:20px; font-weight:800; letter-spacing:-.01em; }
.panel-head p, .section-heading p { margin:0; color:var(--ink-soft); font-size:11px; }
.segmented, .status-filters { padding:3px; display:flex; gap:2px; border-radius:10px; background:#f0f1ec; }
.segmented button, .status-filters button, .alert-tabs button { border:0; background:none; cursor:pointer; color:var(--ink-soft); font-size:10px; border-radius:8px; }
.segmented button { padding:7px 11px; }.segmented button.active, .status-filters button.active { color:var(--forest); background:#fff; box-shadow:0 2px 7px rgba(20,55,44,.08); font-weight:700; }
.trend-summary { margin-top:19px; display:flex; justify-content:space-between; align-items:flex-end; }
.trend-summary > div:first-child { display:flex; align-items:baseline; gap:10px; }.trend-summary span { color:var(--ink-soft); font-size:10px; }.trend-summary strong { font:700 30px Georgia,serif; }.trend-summary b { color:#68a260; font-size:10px; }
.legend { display:flex; gap:18px; }.legend span { display:flex; align-items:center; gap:6px; }.legend i { width:16px; height:3px; display:inline-block; border-radius:3px; }.legend-health{background:var(--forest-2)}.legend-baseline{border-top:2px dashed #c5ccc5;}
.chart-wrap { height:205px; margin: 4px 0 10px; }
#healthChart { width:100%; height:100%; overflow:visible; text-rendering:geometricPrecision; }
.chart-grid { stroke:#e8eae4; stroke-width:1; }.chart-label { fill:#94a09b; font: 10px system-ui; }.health-area { fill:url(#areaGradient); }.health-line { fill:none; stroke:#286c56; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 5px 5px rgba(40,108,86,.15)); }.baseline-line { fill:none; stroke:#bdc7c0; stroke-width:1.2; stroke-dasharray:5 5; }.health-point-wrap { cursor:pointer; }.health-point-hit { fill:transparent; pointer-events:all; }.health-point { fill:#fff; stroke:#286c56; stroke-width:3; transition:r .14s ease; }.health-point-wrap:focus { outline:none; }.health-point-wrap:focus .health-point { stroke:#154d3b; stroke-width:4; }.chart-tooltip { fill:var(--forest); }.tooltip-text { fill:#fff; font:700 10px system-ui; pointer-events:none; }
.chart-label,.tooltip-text { font-family:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif; font-synthesis:none; }
.fusion-strip { padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-radius:13px; background:#f5f7f2; }
.fusion-strip > span { color:var(--ink-soft); font-size:9px; }.fusion-strip > div { display:grid; grid-template-columns:28px auto; column-gap:7px; align-items:center; }.fusion-strip b,.fusion-strip small { display:block; }.fusion-strip b { font-size:10px; }.fusion-strip small { color:var(--ink-soft); font-size:8px; }.fusion-strip em { color:#b9c2bc; font-style:normal; }.fusion-strip > strong { padding:7px 9px; border-radius:8px; color:var(--forest-2); background:#e5f2e6; font-size:9px; white-space:nowrap; }
.fusion-icon { grid-row:1/3; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; font-size:12px; font-style:normal; }.behavior{background:#e4f0e8;color:#35745d}.physiology{background:#eee8f7;color:#71599a}.feeding{background:#fff0db;color:#b47a2f}.environment{background:#e7f2f5;color:#467e89}

.trend-insights { margin-top:16px; padding:15px; border:1px solid #e5ebe2; border-radius:14px; background:linear-gradient(135deg,#fafcf8,#f3f8f1); }
.trend-insights-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.trend-insights-head span,.trend-insights-head strong { display:block; }.trend-insights-head > div > span { color:var(--forest-2); font-size:10px; font-weight:800; letter-spacing:.12em; }.trend-insights-head > div > strong { margin-top:3px; font-size:14px; }
.insight-state { display:flex!important; align-items:center; gap:6px; padding:6px 9px; border-radius:999px; color:#54815a; background:#e8f4e7; font-size:10px; font-weight:700; white-space:nowrap; }.insight-state i { width:6px; height:6px; border-radius:50%; background:#70ad67; }
.trend-insight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.trend-insight-card { width:100%; min-height:82px; padding:11px; display:grid; grid-template-columns:28px 1fr; gap:9px; border:1px solid rgba(223,231,220,.9); border-radius:11px; color:var(--ink); background:rgba(255,255,255,.78); text-align:left; cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.trend-insight-card:hover { border-color:#9dbda1; box-shadow:0 6px 16px rgba(40,91,65,.09); transform:translateY(-2px); }.trend-insight-card:focus-visible { outline:3px solid rgba(71,132,90,.28); outline-offset:2px; }
.insight-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; font-size:13px; font-weight:800; }.positive .insight-icon { color:#43835b; background:#e5f3e5; }.feeding-insight .insight-icon { color:#a8752d; background:#fff2de; }.attention .insight-icon { color:#c0644d; background:#ffebe5; }
.trend-insight-copy,.trend-insight-card small,.trend-insight-card strong,.trend-insight-description { display:block; }.trend-insight-card small { color:var(--ink-soft); font-size:9px; }.trend-insight-card strong { margin-top:3px; color:var(--ink); font-size:12px; }.trend-insight-description { margin-top:4px; color:var(--ink-soft); font-size:9px; line-height:1.5; }
.trend-action { margin:11px 0 0; padding:9px 11px; border-left:3px solid #76a66e; border-radius:0 8px 8px 0; color:#587068; background:rgba(231,242,228,.66); font-size:10px; line-height:1.55; }.trend-action span { margin-right:7px; color:var(--forest-2); font-weight:800; }

.insight-dialog { width:min(620px,calc(100% - 32px)); padding:0; border:1px solid #dfe7dd; border-radius:18px; color:var(--ink); background:var(--paper); box-shadow:0 26px 75px rgba(14,49,37,.25); }.insight-dialog::backdrop { background:rgba(12,38,29,.44); backdrop-filter:blur(3px); }
.insight-dialog-content { padding:24px; }.insight-dialog-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }.insight-dialog-head span { color:var(--forest-2); font-size:12px; font-weight:800; letter-spacing:.12em; }.insight-dialog-head h3 { margin:5px 0 0; font-size:26px; font-weight:800; letter-spacing:-.02em; }.dialog-close { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:10px; color:var(--ink-soft); background:#f0f4ee; font-size:24px; line-height:1; cursor:pointer; }.dialog-close:hover { color:var(--forest); background:var(--mint); }
.insight-dialog-summary { margin:16px 0; color:var(--ink-soft); font-size:15px; line-height:1.65; }.insight-metric-list { display:grid; gap:11px; }.insight-metric { padding:12px 13px; border:1px solid #e6ece3; border-radius:12px; background:#fafcf8; }.insight-metric-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }.insight-metric-head span { font-size:14px; font-weight:700; }.insight-metric-head strong { color:var(--forest-2); font-size:18px; }.insight-progress { height:8px; margin-top:9px; overflow:hidden; border-radius:99px; background:#e4ece2; }.insight-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#78ad73,#2f785a); }.insight-metric.attention-metric .insight-progress i { background:linear-gradient(90deg,#eeb36c,#d87856); }
.insight-dialog-note { margin:15px 0; color:#71827b; font-size:12px; line-height:1.6; }.insight-dialog-confirm { width:100%; min-height:44px; border:0; border-radius:11px; color:#fff; background:var(--forest); font-size:15px; font-weight:800; cursor:pointer; }.insight-dialog-confirm:hover { background:#0f3f30; }

.weather-history-dialog { width:min(720px,calc(100% - 32px)); padding:0; border:1px solid #dfe7dd; border-radius:18px; color:var(--ink); background:var(--paper); box-shadow:0 26px 75px rgba(14,49,37,.25); }.weather-history-dialog::backdrop { background:rgba(12,38,29,.44); backdrop-filter:blur(3px); }.weather-history-content { padding:24px; }.weather-history-summary { margin:15px 0; color:var(--ink-soft); font-size:14px; line-height:1.6; }.weather-history-picker { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e2eae0; border-radius:11px; background:#f6faf4; font-size:13px; font-weight:700; }.weather-history-picker input { min-width:0; flex:1; border:0; outline:0; color:var(--ink); background:transparent; font:inherit; cursor:pointer; }.weather-history-list { margin-top:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.weather-history-item { padding:12px; border:1px solid #e3eae1; border-radius:12px; color:var(--ink); background:#fff; text-align:left; cursor:pointer; }.weather-history-item:hover,.weather-history-item.active { border-color:#92b99a; background:#f1f8ee; }.weather-history-item time,.weather-history-item span,.weather-history-item strong { display:block; }.weather-history-item time { color:var(--ink-soft); font-size:11px; }.weather-history-item strong { margin:4px 0; font-size:18px; }.weather-history-item span { color:#5c756d; font-size:12px; }

.alerts-panel { padding:22px 20px 18px; }
.panel-head.compact { align-items:center; }.coral-text { color:var(--coral); }
.alert-tabs { margin:16px 0 10px; padding-bottom:10px; display:flex; gap:18px; border-bottom:1px solid var(--line); }.alert-tabs button { padding:4px 0; border-radius:0; position:relative; }.alert-tabs button.active { color:var(--ink); font-weight:700; }.alert-tabs button.active::after { content:""; position:absolute; height:2px; inset:auto 0 -11px; background:var(--coral); }
.alert-list { min-height:275px; }
.alert-item { padding:13px 0; display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:start; border-bottom:1px solid #eeefe9; animation:fadeIn .25s ease; }
.alert-symbol { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; font-weight:900; }.alert-item.urgent .alert-symbol { color:var(--coral); background:var(--coral-soft); }.alert-item.watch .alert-symbol { color:var(--amber); background:var(--amber-soft); }
.alert-item strong { display:block; font-size:11px; }.alert-item p { margin:4px 0 0; color:var(--ink-soft); font-size:9px; line-height:1.5; }.alert-item time { color:#9aa49f; font-size:9px; white-space:nowrap; }
.alert-item .resolve-alert { grid-column:2/4; justify-self:start; padding:0; border:0; background:none; color:var(--forest-2); font-size:9px; font-weight:700; cursor:pointer; opacity:0; transition:.2s; }.alert-item:hover .resolve-alert { opacity:1; }
.outline-button { width:100%; margin-top:14px; padding:10px 14px; display:flex; justify-content:center; gap:9px; border:1px solid #dce1da; border-radius:10px; background:transparent; color:var(--forest); font-size:10px; font-weight:700; cursor:pointer; }.outline-button:hover { background:var(--mint-2); }

.calves-section { scroll-margin-top:90px; }
.section-heading { margin-bottom:14px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.table-tools { display:flex; align-items:center; gap:8px; }
.history-date-picker { height:36px; padding:0 10px; display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:10px; color:var(--ink-soft); background:var(--paper); font-size:10px; white-space:nowrap; }.history-date-picker span { font-weight:700; }.history-date-picker input { min-width:118px; border:0; outline:0; color:var(--ink); background:transparent; font:inherit; cursor:pointer; }.history-today-button { height:36px; padding:0 11px; border:1px solid #bcd8bf; border-radius:10px; color:var(--forest-2); background:#edf7ee; font-size:10px; font-weight:800; cursor:pointer; white-space:nowrap; }.history-today-button:hover { background:#dff0e1; }
.search-box { height:36px; min-width:210px; padding:0 11px; display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.search-box span { color:#8e9b96; }.search-box input { width:100%; outline:0; border:0; background:none; color:var(--ink); font-size:10px; }.search-box input::placeholder{color:#a0aaa5;}
.status-filters button { padding:7px 10px; }
.refresh-button { height:36px; padding:0 12px; border:0; border-radius:10px; color:#fff; background:var(--forest); font-size:10px; cursor:pointer; }.refresh-button span { display:inline-block; }.refresh-button.loading span { animation:spin .7s linear infinite; }
.calf-workspace { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(330px,.65fr); gap:16px; align-items:start; }
.table-panel { overflow:hidden; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; white-space:nowrap; }
th { padding:13px 16px; text-align:left; color:#82908b; background:#f5f6f2; font-size:9px; font-weight:600; }
td { padding:13px 16px; border-bottom:1px solid #eeefe9; font-size:10px; }
tbody tr { cursor:pointer; transition:.18s; } tbody tr:hover, tbody tr.selected { background:#f3f8f3; } tbody tr.selected { box-shadow:inset 3px 0 var(--forest-2); }
.calf-cell { display:flex; align-items:center; gap:9px; }.calf-thumb { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--forest); background:#e8f0e3; font:700 11px Georgia,serif; }.calf-cell strong,.calf-cell small { display:block; }.calf-cell strong{font-size:11px}.calf-cell small{margin-top:3px;color:#93a09b;font-size:8px;}
.temp-high { color:var(--coral); font-weight:700; }
.status-badge { padding:5px 8px; display:inline-flex; align-items:center; gap:5px; border-radius:8px; font-size:9px; font-weight:700; }.status-badge i { width:5px;height:5px;border-radius:50%;background:currentColor; }.status-badge.healthy{color:#4c8c55;background:#eaf4e8}.status-badge.watch{color:#a87321;background:#fff3dc}.status-badge.urgent{color:#c95642;background:#ffebe6}
.row-arrow { color:#aab3af; font-size:15px; }
.table-footer { min-height:44px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; color:#8a9792; font-size:9px; }.table-footer b{color:var(--forest-2);font-weight:600;}
.empty-state { padding:52px 20px!important; text-align:center; color:var(--ink-soft); }

.profile-panel { padding:20px; position:sticky; top:92px; }
.profile-top { display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; padding-bottom:17px; border-bottom:1px solid var(--line); }
.profile-cow { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(145deg,#d9ebd1,#eef4e9); font:800 14px Georgia,serif; }
.profile-top h3 { margin:0 0 5px; font:700 18px Georgia,"Songti SC",serif; }.profile-top p{margin:0;color:var(--ink-soft);font-size:9px;}
.profile-close { display:none; }
.info-grid { padding:15px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.info-grid span{color:var(--ink-soft);font-size:8px}.info-grid strong{display:block;margin-top:4px;font-size:10px;}
.profile-section { padding-top:14px; border-top:1px solid var(--line); }.profile-section + .profile-section { margin-top:14px; }.profile-title { margin-bottom:11px; display:flex; justify-content:space-between; align-items:center; }.profile-title strong { font-size:11px; }.profile-title small{color:var(--ink-soft);font-size:8px;}
.vitals { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.vital-card { padding:11px; border-radius:11px; background:#f4f6f1; }.vital-card span{color:var(--ink-soft);font-size:8px}.vital-card strong{display:block;margin-top:4px;font:700 17px Georgia,serif}.vital-card small{margin-left:3px;color:var(--ink-soft);font:500 8px system-ui}.vital-card.abnormal{background:var(--coral-soft)}.vital-card.abnormal strong{color:var(--coral)}
.behavior-row { margin:9px 0; display:grid; grid-template-columns:72px 1fr 58px; gap:9px; align-items:center; font-size:9px; }.behavior-row > span:last-child{text-align:right;font-weight:700}.behavior-bar{height:6px;border-radius:6px;background:#edf0ea;overflow:hidden}.behavior-bar i{display:block;height:100%;border-radius:inherit;background:#75a777}.behavior-bar.amber i{background:#e0a452}.behavior-bar.blue i{background:#6f9daa}
.profile-note { margin-top:14px; padding:11px; border-radius:11px; color:#80562d; background:#fff4e3; font-size:9px; line-height:1.6; }.profile-note strong{display:block;margin-bottom:2px;color:#6e4720;font-size:10px;}
.page-footer { padding:28px 4px 4px; display:flex; justify-content:space-between; color:#96a19d; font-size:9px; }.page-footer span{display:flex;align-items:center;gap:8px}.page-footer .pulse-dot{width:6px;height:6px;box-shadow:none;}
.toast { position:fixed; z-index:50; left:50%; bottom:28px; padding:11px 17px; border-radius:10px; color:#fff; background:#173f34; box-shadow:0 10px 30px rgba(20,55,44,.25); font-size:11px; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:.25s ease; }.toast.show{transform:translate(-50%,0);opacity:1;}
.mobile-backdrop { display:none; }

@keyframes fadeIn { from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none} }
@keyframes spin { to{transform:rotate(360deg)} }

@media (max-width: 1180px) {
  .welcome-row { grid-template-columns:1fr 410px; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .content-grid,.calf-workspace { grid-template-columns:1fr; }
  .profile-panel { position:static; }
  .table-tools { flex-wrap:wrap; justify-content:flex-end; }
}
@media (max-width: 900px) {
  .sidebar { transform:translateX(-100%); transition:.25s ease; box-shadow:14px 0 40px rgba(18,53,43,.2); }.sidebar.open{transform:none;}
  .main-content { margin-left:0; }
  .mobile-menu{display:block}.topbar{padding:0 20px}.dashboard{padding:24px 20px}.welcome-row{grid-template-columns:1fr}.mobile-backdrop{position:fixed;z-index:15;inset:0;background:rgba(12,31,25,.35)}.mobile-backdrop.show{display:block}
}
@media (max-width: 640px) {
  .topbar{height:66px}.farm-selector .farm-pin,.farm-selector small,.farm-selector .icon-button,.sync-state,.top-actions time{display:none}.dashboard{padding:20px 14px}.weather-card{grid-template-columns:48px 95px 1fr;padding:18px 14px}.weather-meta{gap:4px;padding-left:8px}.weather-meta span:last-child{display:none}.kpi-grid{grid-template-columns:1fr 1fr;gap:10px}.kpi-card{min-height:135px;padding:16px}.kpi-head{grid-template-columns:28px 1fr}.kpi-head small{display:none}.kpi-value{font-size:28px}.content-grid{grid-template-columns:minmax(0,1fr)}.trend-panel,.alerts-panel{padding:18px 14px}.panel-head{flex-direction:column}.trend-panel .panel-head{gap:12px}.trend-summary{align-items:flex-start}.legend{display:none}.chart-wrap{height:175px}.fusion-strip{overflow-x:auto;justify-content:flex-start}.fusion-strip>span,.fusion-strip>em,.fusion-strip>strong{display:none}.fusion-strip>div{min-width:110px}.section-heading{align-items:flex-start;flex-direction:column}.table-tools{width:100%;justify-content:flex-start}.search-box{min-width:100%}.status-filters{flex:1}.status-filters button{flex:1}.refresh-button{width:100%}.page-footer{gap:10px;flex-direction:column}.calf-workspace{grid-template-columns:minmax(0,1fr)}.profile-panel{padding:16px}.info-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 420px) {
  .weather-card{grid-template-columns:45px 1fr}.weather-meta{display:none}.kpi-grid{grid-template-columns:1fr}.kpi-card{min-height:125px}.calves-section .section-kicker{margin-top:6px}.alert-item .resolve-alert{opacity:1}
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

/* 提升长时间监测场景中的文字可读性 */
.brand small { font-size: 11px; }
.nav-item { font-size: 15px; }
.device-state strong { font-size: 13px; }
.device-state small, .user-card small { font-size: 11px; }
.user-card strong { font-size: 14px; }
.farm-selector small { font-size: 11px; }
.farm-selector strong { font-size: 15px; }
.sync-state, .top-actions time { font-size: 13px; }
.eyebrow, .section-kicker { font-size: 11px; }
.welcome-row > div > p:last-child { font-size: 15px; }
.weather-main small, .weather-meta span { font-size: 12px; }
.weather-meta b { font-size: 14px; }
.comfort-tag { font-size: 11px; }
.kpi-head > span:nth-child(2) { font-size: 14px; }
.kpi-head small, .kpi-value small, .kpi-foot { font-size: 11px; }
.panel-head h2, .section-heading h2 { font-size: 22px; }
.panel-head p, .section-heading p { font-size: 13px; }
.segmented button, .status-filters button, .alert-tabs button,
.search-box input, .refresh-button, .outline-button { font-size: 12px; }
.trend-summary span, .trend-summary b { font-size: 12px; }
.chart-label { font-size: 11px; }
.fusion-strip > span, .fusion-strip > strong { font-size: 11px; }
.fusion-strip b { font-size: 12px; }
.fusion-strip small { font-size: 10px; }
.alert-item strong { font-size: 13px; }
.alert-item p, .alert-item time, .alert-item .resolve-alert { font-size: 11px; }
th { font-size: 11px; }
td { font-size: 12px; }
.calf-cell strong { font-size: 13px; }
.calf-cell small { font-size: 10px; }
.status-badge, .table-footer { font-size: 11px; }
.profile-top p { font-size: 11px; }
.info-grid span, .profile-title small, .vital-card span { font-size: 10px; }
.info-grid strong, .profile-title strong { font-size: 12px; }
.behavior-row { grid-template-columns: 80px 1fr 66px; font-size: 11px; }
.profile-note { font-size: 11px; }
.profile-note strong { font-size: 12px; }
.page-footer { font-size: 11px; }
.toast { font-size: 13px; }

/* 大字号监测模式：适合办公显示器、会议屏和远距离查看 */
.nav-item { font-size: 17px; }
.device-state strong, .user-card strong { font-size: 15px; }
.device-state small, .user-card small { font-size: 13px; }
.farm-selector small { font-size: 13px; }
.farm-selector strong { font-size: 17px; }
.sync-state, .top-actions time { font-size: 14px; }
.eyebrow, .section-kicker { font-size: 13px; }
.welcome-row > div > p:last-child { font-size: 16px; }
.weather-main small, .weather-meta span { font-size: 14px; }
.weather-meta b { font-size: 16px; }
.comfort-tag { font-size: 12px; }
.kpi-head > span:nth-child(2) { font-size: 16px; }
.kpi-head small, .kpi-value small, .kpi-foot { font-size: 13px; }
.panel-head h2, .section-heading h2 { font-size: 25px; }
.panel-head p, .section-heading p { font-size: 15px; }
.segmented button, .status-filters button, .alert-tabs button,
.search-box input, .refresh-button, .outline-button { font-size: 14px; }
.trend-summary span, .trend-summary b { font-size: 14px; }
.chart-label { font-size: 13px; }
.fusion-strip > span, .fusion-strip > strong { font-size: 12px; }
.fusion-strip b { font-size: 14px; }
.fusion-strip small { font-size: 12px; }
.alert-item strong { font-size: 15px; }
.alert-item p { font-size: 13px; }
.alert-item time, .alert-item .resolve-alert { font-size: 12px; }
th { padding-top: 15px; padding-bottom: 15px; font-size: 13px; }
td { padding-top: 15px; padding-bottom: 15px; font-size: 14px; }
.calf-cell strong { font-size: 15px; }
.calf-cell small { font-size: 12px; }
.status-badge { font-size: 13px; }
.table-footer { font-size: 13px; }
.profile-top p { font-size: 13px; }
.info-grid span, .profile-title small, .vital-card span { font-size: 12px; }
.info-grid strong, .profile-title strong { font-size: 14px; }
.behavior-row { grid-template-columns: 88px 1fr 74px; font-size: 13px; }
.profile-note { font-size: 13px; }
.profile-note strong { font-size: 14px; }
.page-footer { font-size: 12px; }

/* 进一步放大关键监测信息，便于在值班室和会议屏远距离查看。 */
@media (min-width: 561px) {
  h1 { font-size: clamp(36px, 3.35vw, 48px); }
  .kpi-value { font-size: 40px; }
  .panel-head h2, .section-heading h2 { font-size: 27px; }
  .nav-item { min-height: 52px; font-size: 18px; }
  .welcome-row > div > p:last-child { font-size: 17px; }
  .weather-main strong { font-size: 37px; }
  .weather-meta b { font-size: 17px; }
}

/* 超宽屏远距离查看：再次提升主要信息层级，并为文字预留足够空间。 */
@media (min-width: 641px) {
  .brand strong { font-size: 24px; }
  .nav-item { min-height: 56px; font-size: 20px; }
  .device-state strong, .user-card strong { font-size: 17px; }
  .device-state small, .user-card small { font-size: 14px; }
  .farm-selector small { font-size: 14px; }
  .farm-selector strong { font-size: 19px; }
  .sync-state, .top-actions time { font-size: 16px; }
  .eyebrow, .section-kicker { font-size: 14px; }
  h1 { font-size: clamp(42px, 3.7vw, 56px); }
  .welcome-row > div > p:last-child { font-size: 19px; }
  .weather-main small, .weather-meta span { font-size: 16px; }
  .weather-main strong { font-size: 42px; }
  .weather-meta b { font-size: 19px; }
  .comfort-tag { font-size: 14px; }
  .kpi-card { min-height: 172px; }
  .kpi-head > span:nth-child(2) { font-size: 18px; }
  .kpi-head small, .kpi-value small, .kpi-foot { font-size: 14px; }
  .kpi-value { font-size: 46px; }
  .panel-head h2, .section-heading h2 { font-size: 30px; }
  .panel-head p, .section-heading p { font-size: 17px; }
  .segmented button, .status-filters button, .alert-tabs button,
  .search-box input, .refresh-button, .outline-button { font-size: 16px; }
  .trend-summary span, .trend-summary b { font-size: 16px; }
  .trend-summary strong { font-size: 36px; }
  .chart-label { font-size: 14px; }
  .fusion-strip > span, .fusion-strip > strong { font-size: 14px; }
  .fusion-strip b { font-size: 16px; }
  .fusion-strip small { font-size: 13px; }
  .alert-item strong { font-size: 17px; }
  .alert-item p { font-size: 15px; }
  .alert-item time, .alert-item .resolve-alert { font-size: 14px; }
  th { font-size: 14px; }
  td { font-size: 16px; }
  .calf-cell strong { font-size: 17px; }
  .calf-cell small { font-size: 14px; }
  .status-badge, .table-footer { font-size: 14px; }
  .profile-top p { font-size: 14px; }
  .info-grid span, .profile-title small, .vital-card span { font-size: 13px; }
  .info-grid strong, .profile-title strong { font-size: 15px; }
  .behavior-row { grid-template-columns: 96px 1fr 82px; font-size: 14px; }
  .profile-note { font-size: 14px; }
  .profile-note strong { font-size: 15px; }
  .page-footer { font-size: 14px; }
  .trend-insights-head > div > span { font-size: 12px; }
  .trend-insights-head > div > strong { font-size: 17px; }
  .insight-state { font-size: 12px; }
  .trend-insight-card { min-height:100px; padding:13px; grid-template-columns:32px 1fr; }
  .insight-icon { width:32px; height:32px; font-size:15px; }
  .trend-insight-card small { font-size: 11px; }
  .trend-insight-card strong { font-size: 15px; }
  .trend-insight-description, .trend-action { font-size: 12px; }
}

@media (max-width: 640px) {
  .trend-insights { padding:13px; }
  .trend-insights-head { align-items:flex-start; }
  .trend-insight-grid { grid-template-columns:1fr; }
  .weather-card { min-height:142px; padding-bottom:42px; }
  .history-date-picker { flex:1; justify-content:space-between; }
  .history-today-button { flex:none; }
  .weather-history-list { grid-template-columns:1fr; }
}

@media (min-width: 641px) {
  .weather-history-button { font-size:12px; }
  .history-date-picker,.history-today-button { font-size:14px; }
  .weather-history-summary { font-size:16px; }
  .weather-history-picker { font-size:15px; }
  .weather-history-item time { font-size:13px; }
  .weather-history-item strong { font-size:20px; }
  .weather-history-item span { font-size:14px; }
}