/* Responsive console, shared by the site controller and Central. */
:root {
  --ink:#edf5f6; --text:#edf5f6; --muted:#a5b9c3;
  --bg:#0d171e; --surface:#172731; --surface-2:#223b48;
  --panel:#172731; --panel2:#203641; --line:#34505e;
  --accent:#77dcd1; --green:#77d7ac; --blue:#91cafa;
  --amber:#f0bc70; --danger:#ff9b95; --red:#ff9b95;
  --console-radius:12px;
  color-scheme:dark;
}
body { background:radial-gradient(ellipse at 0 0,#173640 0,transparent 55%),var(--bg); color:var(--text); font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif; line-height:1.5; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button,a,summary { touch-action:manipulation; }
input,select,textarea { max-width:100%; min-width:0; accent-color:var(--accent); }
input:not([type=checkbox]):not([type=radio]),select,textarea { min-height:46px; border-radius:7px; background:#0e1d26; border-color:var(--line); color:var(--text); }
input:focus,select:focus,textarea:focus { outline:2px solid var(--accent); outline-offset:2px; }
input[data-dirty=true],select[data-dirty=true] { border-color:var(--amber); }
button:disabled { cursor:not-allowed; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.topbar { background:#10222def; border-bottom:1px solid var(--line); box-shadow:0 8px 28px #0002; }
.topbar h1 { font-size:clamp(1.35rem,2vw,1.8rem); font-weight:720; }
.eyebrow,.label { color:#90b2c3; letter-spacing:.12em; }
.panel,.card,.hero-card,.state-card,.metric-card { border-radius:var(--console-radius); border-color:var(--line); background:linear-gradient(135deg,#1d313c,var(--panel)); box-shadow:0 5px 18px #0002; }
.panel,.card { min-width:0; }
.primary,.primary-button { color:#082b2a; background:var(--accent); border:1px solid #99eee3; border-radius:8px; min-height:48px; font-weight:750; }
.primary:hover,.primary-button:hover:not(:disabled) { background:#a5f0e7; }
.secondary-button,.small-button,.ghost-button,.hot-button,.central-return { border-radius:8px; min-height:44px; }
.secondary-button,.small-button { background:#233e4d; border-color:#466675; color:var(--text); }
.ghost-button,.small-button.danger { background:#3b252e; border-color:#ac6572; color:#ffb8b1; }
.hot-button { background:var(--amber); color:#302212; }
.account-pill,.route-pill,.system-pill,.central-return { border-radius:8px; }
.route-pill strong,.account-pill small,.text-button,.open { color:var(--accent); }
.state-card { background:linear-gradient(115deg,#173d3b,#18313e); border-left:4px solid var(--accent); }
.state-card h2 { font-size:1.8rem; }
.metric { font-family:inherit; font-size:2.6rem; font-weight:720; letter-spacing:-.035em; line-height:1.2; }
.temperature { border-top:3px solid var(--amber); }
.temperature .metric { color:var(--amber); }
.weight { border-top:3px solid var(--blue); }
.weight .metric { color:var(--blue); }
.range { flex-wrap:wrap; gap:4px; }
.panel-heading { align-items:center; }
.vessel-wrap { background:#10232d; border-radius:10px; }
.milk-level { background:linear-gradient(#d3e8e4,#8bb9bb); }
.calculation { background:#153b3c; border-radius:10px; }
.progress,.progress span { border-radius:20px; }
.process-step span { border-radius:9px; }
.process-step.active span { background:var(--accent); border-color:var(--accent); }
.process-step strong { color:#bed0d9; }
.process-line { min-width:0; max-width:100%; overflow-x:auto; padding-bottom:12px; scrollbar-width:thin; }
.manual-grid button { min-height:128px; border-radius:12px; background:linear-gradient(135deg,#203a48,#152b36); border-left:3px solid #6ba6be; }
.manual-grid button span { font-weight:700; font-size:1.05rem; }
.manual-grid button.on { background:#184738; border-color:var(--green); }
.settings-page { max-width:1180px; }
.page-title { margin:12px 0 22px; }
.page-title h2 { font-size:clamp(1.4rem,3vw,1.9rem); font-weight:720; letter-spacing:-.02em; }
.page-title p:last-child { max-width:78ch; }
.button-row { align-items:center; }
.button-row button { width:auto; min-width:150px; margin-top:0; padding:12px 16px; }
.operations-strip { border-radius:8px; line-height:1.6; overflow-wrap:anywhere; font-size:.78rem; padding:12px 16px; }
.operations-strip.warning { border-left:3px solid var(--amber); }
.tabs { justify-content:flex-start; overflow-x:auto; scrollbar-width:thin; background:#10222df5; gap:4px; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
.tabs button { flex:0 0 auto; min-width:100px; min-height:44px; border-radius:8px; }
.tabs button.selected { color:var(--accent); background:#25434e; box-shadow:inset 0 -3px var(--accent); }
.io-field { display:grid; gap:5px; min-width:0; font-size:.75rem; color:var(--muted); }
.io-field > span { padding-inline:2px; }
.io-field input,.io-field select { width:100%; }
.relay-row,.input-row { align-items:end; padding-block:12px; border-bottom:1px solid var(--line); }
.relay-row > .io-role,.input-row > .io-role { align-self:center; }
.io-role { white-space:normal; overflow-wrap:anywhere; }
.relay-seconds { display:grid; grid-template-columns:1fr; }
.relay-seconds span { font-size:.75rem; }
.relay-seconds input { width:100%; }
table { line-height:1.5; }
th { background:#10232d; color:#aec9d6; }
td { overflow-wrap:anywhere; }
pre,code { overflow-wrap:anywhere; }
pre { max-width:100%; overflow:auto; white-space:pre-wrap; }
.table-wrap { min-width:0; overflow-x:auto; }
.flow-stage { border-left:4px solid #6ba6be; }
.flow-stage-header { background:#223b48; }
.flow-stage-header,.action-header { grid-template-columns:auto minmax(0,1fr) 150px auto; }
.flow-stage-header label,.action-header label { min-width:0; }
.stage-editor > summary { border-radius:7px; background:#10232d; min-height:48px; align-items:center; }
.nested-action { border-radius:9px; background:#10232d; }
.program-block { border-radius:8px; background:#152d37; }
.stage-actions button,.action-buttons button,.cycle-order button { min-width:44px; min-height:44px; border-radius:6px; }
.output-choice { min-height:44px; }
.output-choice input,.repeat-toggle input,.check-line input { min-height:0!important; }
.output-choice span { min-width:0; overflow-wrap:anywhere; }
.cycle-save-bar { border-radius:10px; background:#172d38f5; }
.stage-number,.action-number { border-radius:7px; }
.pending-changes { background:#25312f; border-radius:12px; bottom:86px; }
#toast { z-index:40; max-width:calc(100vw - 32px); line-height:1.5; }
dialog { border-radius:14px; max-height:calc(100dvh - 32px); overflow-y:auto; }
/* Central shell */
.brand { min-width:0; gap:10px; font-size:1rem; }
.brand span { border-radius:10px; background:var(--accent); border:0; color:#0c2c2c; }
.shell { max-width:1320px; padding-top:36px; }
.hero h1,.heading h1,.narrow h1 { font-family:inherit; font-weight:730; letter-spacing:-.035em; }
.heading h1 { font-size:clamp(1.8rem,4vw,2.9rem); }
.card h2 { font-family:inherit; font-weight:680; letter-spacing:-.02em; }
.feeder-card { position:relative; border-top:3px solid var(--accent); }
.feeder-card:hover { background:#213c49; border-color:var(--accent); }
.feeder-card.test { border-top-color:#b6a6ee; }
.farm-card { border-top:3px solid #6ba6be; }
.card-top { flex-wrap:wrap; }
.connection { margin-left:auto; }
.environment-badge,.connection,.state-pill,.summary { border-radius:8px; }
.grid { grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); }
.thirds { grid-template-columns:repeat(3,minmax(0,1fr)); }
.topbar a[aria-current=page] { color:var(--accent); }
.topbar nav { gap:18px; }
.mobile-nav summary { min-height:44px; padding:10px 14px; border-radius:8px; background:#223b48; }
.mobile-nav div { z-index:30; border-radius:12px; background:#172c38; padding:10px; box-shadow:0 18px 50px #0007; }
.mobile-nav a,.mobile-nav button { border-radius:7px; min-height:48px; }
.mobile-nav a:hover { background:#284753; }
.account-table-wrap { border-radius:12px; }
.pagination { flex-wrap:wrap; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:12px; background:var(--accent); color:#082b2a; transform:translateY(-150%); border-radius:6px; }
.skip-link:focus { transform:none; }
@media (min-width:761px) and (max-width:1100px) {
  .topbar { flex-wrap:wrap; height:auto; gap:14px; padding:16px 24px; }
  .topbar-actions { width:100%; justify-content:flex-start; }
  .flow-stage-header,.action-header { grid-template-columns:auto minmax(0,1fr); }
  .stage-actions,.action-buttons { grid-column:1/-1; justify-content:flex-end; }
  .topbar nav { flex-wrap:wrap; gap:14px; }
}
@media (max-width:760px) {
  body { min-width:320px; }
  main,.shell { padding:20px 16px 44px; }
  .topbar { position:relative; min-height:76px; height:auto; padding:18px 16px; align-items:flex-start; flex-direction:column; gap:14px; }
  .topbar-actions { width:100%; justify-content:flex-start; gap:8px; }
  .topbar-actions .account-pill { display:none; }
  .route-pill { min-width:0; padding:8px 11px; }
  .route-pill small { display:none; }
  .system-pill { padding:8px 11px; min-height:38px; font-size:.75rem; }
  #connectionLabel { display:inline; }
  .node-selector { width:100%; order:-1; }
  .node-selector select { width:100%; min-height:46px; }
  .central-return { order:-2; flex:none; width:auto; padding:9px 12px; }
  .tabs { display:none; }
  .mobile-section-menu { position:sticky; top:0; left:auto; right:auto; bottom:auto; display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:10px 16px; margin:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:#10222df5; backdrop-filter:blur(12px); z-index:15; color:#b8cbd5; font-size:.7rem; letter-spacing:.08em; }
  .mobile-section-menu select { min-height:46px; height:46px; width:100%; background:#233e4b; border-color:#456775; border-radius:8px; color:var(--text); font-size:16px; letter-spacing:0; padding:0 12px; }
  .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .state-card { grid-column:1/-1; min-height:126px; }
  .metric-card { min-height:145px; padding:16px; }
  .metric { font-size:2.1rem; margin-bottom:12px; }
  .metric-card .label { font-size:.65rem; letter-spacing:.06em; }
  .metric-card .range { font-size:.7rem; }
  .workspace,.bottom-grid,.two-column,.camera-layout,.admin-grid,.firmware-grid { grid-template-columns:minmax(0,1fr); }
  .panel,.card,.hero-card { padding:18px; }
  .panel-heading { gap:10px; }
  .panel-heading h2 { font-size:1.15rem; }
  .panel-heading .ghost-button { width:auto; min-width:100px; flex-shrink:0; padding:10px; }
  .process-line { display:flex; overflow-x:auto; gap:8px; margin:24px 0; padding:4px 0 12px; scrollbar-width:thin; }
  .process-line i { min-width:0; flex:0 0 12px; }
  .process-step { min-width:0; flex:0 0 100px; gap:6px; overflow-wrap:anywhere; }
  .process-step strong { font-size:.7rem; }
  .process-step small { font-size:.6rem; }
  .process-step span { width:29px; height:29px; }
  .vessel-wrap { grid-template-columns:76px minmax(0,1fr); gap:18px; padding:16px; justify-items:stretch; }
  .vessel { width:72px; height:98px; border-width:3px; border-radius:6px 6px 28px 28px; }
  .batch-readout { min-width:0; }
  .batch-readout > strong { font-size:1.15rem; overflow-wrap:anywhere; }
  .batch-readout dl { grid-template-columns:1fr; gap:5px; margin-top:12px; }
  .batch-readout dl div { display:flex; justify-content:space-between; gap:8px; }
  .batch-readout dt,.batch-readout dd { font-size:.73rem; }
  .field { grid-template-columns:minmax(0,1fr) 136px; }
  .form-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .form-grid .primary-button { grid-column:1; width:100%; }
  .form-grid label,.camera-form label,.io-field,.firmware-field { font-size:.85rem; }
  input:not([type=checkbox]):not([type=radio]),select,textarea { font-size:16px; }
  .button-row { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
  .button-row button { width:100%; min-width:0; }
  .summary-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .manual-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .manual-grid button { min-width:0; padding:15px; overflow-wrap:anywhere; }
  .manual-grid button span { font-size:.95rem; }
  .manual-grid button b { font-size:.7rem; }
  .schedule-row { grid-template-columns:120px minmax(0,1fr); background:#10232d; border:1px solid var(--line); border-radius:9px; padding:12px; gap:12px; }
  .schedule-row .schedule-toggle { min-height:44px; }
  .schedule-row button { min-height:44px; }
  .io-scroll { overflow:visible; }
  .relay-list { gap:14px; }
  .relay-row,.input-row { min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; border:1px solid var(--line); border-radius:10px; background:#10232d; }
  .relay-row .io-role,.input-row .io-role { grid-column:1/-1; font-size:.8rem; color:var(--accent); }
  .relay-row .io-field:first-of-type,.input-row .io-field:first-of-type { grid-column:1/-1; }
  .relay-row > button,.input-row > button { min-height:46px; align-self:end; }
  .relay-seconds { display:grid; grid-template-columns:1fr; gap:5px; font-size:.85rem; color:var(--muted); }
  .relay-seconds input { min-width:0; }
  .io-field input,.io-field select { height:auto; padding:10px; }
  .flow-stage { padding:0; }
  .flow-stage-header,.action-header { grid-template-columns:auto minmax(0,1fr); padding:14px; gap:12px; }
  .action-header { padding:0; }
  .stage-time,.stage-actions,.action-header > label:nth-of-type(2),.action-buttons { grid-column:1/-1; }
  .stage-actions,.action-buttons { justify-content:flex-end; flex-wrap:wrap; }
  .stage-editor { margin:0 12px 12px; min-width:0; }
  .stage-editor > summary { flex-direction:column; align-items:flex-start; gap:6px; }
  .stage-editor > summary strong { text-align:left; }
  .block-flow,.repeat-settings,.repeat-condition-flow { grid-template-columns:minmax(0,1fr); }
  .block-flow > .sensor-block,.block-flow > .sensor-block + .block-link,.block-flow > .target-block,.repeat-condition-flow { grid-column:auto; }
  .block-link { min-height:24px; transform:rotate(90deg); }
  .repeat-lane { grid-template-columns:minmax(0,1fr); }
  .repeat-line { min-height:24px; justify-content:start; }
  .program-block { padding:14px; }
  .nested-action { padding:12px; min-width:0; }
  .program-block input,.program-block select,.flow-stage-header input,.flow-stage-header select,.action-header input { min-height:46px; }
  .program-block label { font-size:.8rem; }
  .output-choice { grid-template-columns:20px minmax(0,1fr) auto; padding:10px; }
  .output-choice input { width:18px; height:18px; }
  .cycle-targets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .cycle-targets .panel:last-child { grid-column:1/-1; min-height:90px; }
  .cycle-toolbar { align-items:stretch; flex-direction:column; }
  .cycle-toolbar-actions { display:grid; grid-template-columns:minmax(0,1fr); }
  .cycle-warning { grid-template-columns:1fr; gap:8px; }
  .cycle-save-bar { position:static; flex-direction:column; align-items:stretch; }
  .cycle-save-bar button { min-width:0; }
  .recipe-target-summary { grid-template-columns:minmax(0,1fr); }
  .recipe-target-summary p { grid-column:1; }
  .lamb-summary { gap:10px; }
  .lamb-summary .panel { min-height:114px; }
  .lamb-register-panel .panel-heading { flex-wrap:wrap; }
  .compact-search { width:100%; }
  .role-grid { grid-template-columns:1fr; }
  .camera-card { min-width:0; }
  .camera-copy { padding:14px; }
  .camera-actions { flex-wrap:wrap; }
  .camera-actions > * { flex:1; min-height:44px; text-align:center; }
  .firmware-field { flex-wrap:wrap; gap:8px; }
  .firmware-actions { display:grid; grid-template-columns:1fr; }
  .firmware-log-card { grid-column:auto; }
  .inline-admin-form { grid-template-columns:minmax(0,1fr); }
  .admin-wide { grid-column:auto; }
  .pending-changes { position:sticky; bottom:10px; right:auto; left:auto; width:auto; margin:12px 12px max(12px,env(safe-area-inset-bottom)); grid-template-columns:1fr 1fr; z-index:20; box-shadow:0 8px 24px #0006; }
  .pending-changes div { grid-column:1/-1; }
  .pending-changes button { min-width:0; min-height:46px; margin:0; }
  #toast { right:16px; left:16px; bottom:20px; width:auto; }
  body:has(.pending-changes:not([hidden])) #toast { bottom:180px; }
  .dialog-content { padding:20px; }
  /* Tables retain every action, but each record becomes a labelled phone card. */
  .responsive-table { display:block; width:100%; min-width:0!important; }
  .responsive-table thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); }
  .responsive-table tbody { display:grid; gap:12px; padding:12px; }
  .responsive-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; border:1px solid var(--line); border-radius:10px; background:#10232d; min-width:0; }
  .responsive-table td { display:block; min-width:0!important; width:auto; padding:0; border:0; font-size:.85rem; }
  .responsive-table td::before { content:attr(data-label); display:block; color:var(--muted); font-size:.72rem; font-weight:650; margin-bottom:5px; }
  .responsive-table td:first-child { grid-column:1/-1; }
  .responsive-table td[colspan] { grid-column:1/-1; }
  .responsive-table td[colspan]::before { display:none; }
  .responsive-table td button { min-height:44px; max-width:100%; white-space:normal; }
  .responsive-table td select { min-width:0; }
  .responsive-table td form { min-width:0; }
  /* Central */
  .central-console .topbar { flex-direction:row; align-items:center; gap:12px; }
  .brand { font-size:.9rem; }
  .brand span { flex-shrink:0; width:36px; height:36px; }
  .topbar nav { display:none; }
  .mobile-nav { display:block; flex-shrink:0; }
  .mobile-nav div { position:absolute; top:52px; right:0; width:min(290px,calc(100vw - 32px)); max-height:calc(100dvh - 110px); overflow-y:auto; }
  .hero,.admin-grid,.thirds { grid-template-columns:minmax(0,1fr); }
  .hero { min-height:0; gap:22px; }
  .hero h1 { font-size:2.25rem; }
  .hero p { font-size:1rem; }
  .heading { flex-direction:column; align-items:stretch; gap:16px; margin-bottom:20px; }
  .heading h1 { font-size:2rem; }
  .heading p { margin:8px 0 0; }
  .fleet-tools { flex-direction:row; align-items:stretch; gap:12px; }
  .fleet-tools .filter-form { flex:1; min-width:0; }
  .filter-form label { min-width:0; }
  .summary { align-self:end; margin:0; padding:8px 14px; min-height:46px; }
  .summary strong { font-size:1.35rem; }
  .node-picker { padding:16px; }
  .node-picker label { min-width:0; width:100%; }
  .narrow { margin:24px auto; }
  .login-form { max-width:none; }
  .login-form .primary { width:100%; }
  .account-table-wrap { margin-inline:0; padding:0; max-height:none; overflow:visible; }
  .account-table select { min-width:0; }
  .account-table .small-button { white-space:normal; width:100%; }
  .account-table td:first-child strong { font-size:1.05rem; }
  .account-table td details form { min-width:0; }
  .account-search label { min-width:0; }
  .plain-list li { align-items:stretch; flex-direction:column; gap:12px; }
  .feeder-actions { justify-content:flex-start; }
  .delete-feeder form { min-width:0; width:100%; }
  .audit { padding:16px 0; }
  .audit > h2 { padding:0 16px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}

/* Warm workshop finish. Responsive control layouts remain shared. */
:root {
  color-scheme:light;
  --ink:#302e29; --text:#302e29; --muted:#686458;
  --bg:#eee9e0; --surface:#fffdf8; --surface-2:#e8e1d5;
  --panel:#fffdf8; --panel2:#f7f2e9; --line:#d7cdbd;
  --accent:#9b4d31; --blue:#9b4d31; --green:#496a43;
  --amber:#956414; --danger:#a23232; --red:#a23232;
  --console-radius:14px;
}
body { background:var(--bg); }
.topbar { background:#fffdf8; box-shadow:0 2px 8px #23364808; border-bottom:2px solid #9b4d31; }
.eyebrow,.label { color:#75664f; }
.central-console .eyebrow { color:#75664f!important; }
.panel,.card,.hero-card,.state-card,.metric-card { background:#fffdf8; box-shadow:0 2px 5px #23364805; }
.primary,.primary-button { background:#9b4d31; border-color:#9b4d31; color:#fffdf8; }
.primary:hover,.primary-button:hover:not(:disabled) { background:#793a26; border-color:#793a26; }
.secondary-button,.small-button { background:#f4eee4; border-color:#c8bba9; color:#4b4539; }
.secondary-button:hover:not(:disabled),.small-button:hover:not(:disabled) { background:#eae1d2; border-color:#a9977c; }
.ghost-button,.small-button.danger { background:#fff2f1; border-color:#d8a4a3; color:#a32930; }
.hot-button { background:#f2bc61; color:#452c06; border:1px solid #c89945; }
input:not([type=checkbox]):not([type=radio]),select,textarea { background:#fffdf8; color:#302e29; border-color:#c8baa5; }
input::placeholder,textarea::placeholder { color:#7b7367; opacity:1; }
.input-suffix,.stepper { background:#fffdf8; border-color:#c8baa5; }
.input-suffix input { background:transparent; border:0; }
.stepper button { color:#8b452d; }
input[data-dirty=true],select[data-dirty=true] { background:#fffcf1; border-color:#a97012; }
.account-pill,.route-pill,.central-return { background:#f2e9dc; color:#4b4438; }
.system-pill { background:#edf7f0; border-color:#a6ccb4; color:#245a3a; }
.system-pill.offline { background:#fff0ef; color:#9b272c; border-color:#d7a8a4; }
.route-pill strong,.account-pill small,.text-button,.open { color:#9b4d31; }
.state-card { background:#f4eadb; border-left-color:#9b4d31; }
.state-card p:last-child { color:#746550; }
.temperature { border-top-color:#b87918; }
.temperature .metric { color:#8b550b; }
.weight .metric { color:#9b4d31; }
.vessel-wrap { background:#f7f2e8; }
.vessel { border-color:#a39782; }
.milk-level { background:linear-gradient(#eee1c9,#cfb68b); }
.agitator { color:#857455; }
.calculation { background:#f3e8d6; border-color:#d2ba96; }
.calculation span,.field { color:#61543f; }
.progress { background:#e4dac9; }
.progress span { background:#9b4d31; }
.process-step span { background:#f7f2e9; border-color:#cbbda6; color:#75664f; }
.process-step strong { color:#6b604f; }
.process-step.complete span { color:#246341; background:#eef7f0; border-color:#8dbc9d; }
.process-step.active span { color:#fffdf8; background:#9b4d31; border-color:#9b4d31; }
.process-step.active strong,.process-step.complete strong { color:#302e29; }
.manual-grid button { background:#fffdf8; color:#302e29; border-left-color:#ab8f64; }
.manual-grid button.on { background:#e6f4eb; color:#184c2f; border-color:#3f8a5b; }
.maintenance-action { background:#fffdf8; border-top-color:#bd811f; }
.maintenance-check { background:#fff8eb; border-color:#dbc294; color:#654b1a; }
.maintenance-duration { color:#686458; }
.role-grid div,.fleet-list div,.role-badge { background:#f2ecdf; color:#514938; border-color:#d7cdbd; }
.operations-strip { background:#f1ecdf; color:#61553e; border-color:#cdbb9d; }
.operations-strip.warning { background:#fff8e8; color:#72521a; border-color:#dac395; border-left-color:#b47c19; }
.tabs { background:#fffdf8; border-color:#d7cdbd; }
.tabs button.selected { background:#f0e2d2; color:#9b4d31; }
.current-value { color:#686458; }
th,.account-table thead th { background:#eee6d8; color:#6a5b42; }
tbody tr:nth-child(even) { background:#f7f2e9; }
.account-table tbody tr:focus-within { background:#f5ead9; }
.log-kind { background:#f2e4d6; color:#884b30; }
.log-kind.fault { background:#fff0ef; color:#a32930; }
.status-tag { background:#eee7da; color:#6b5f4b; }
.status-tag.online { background:#e9f5ed; color:#23643e; border-color:#92bc9f; }
.flow-stage-header { background:#eee6d8; }
.flow-stage.active,.nested-action.active { background:#f0f8f2; border-color:#3f8a5b; }
.flow-stage-header label,.action-header label,.cycle-fields label,.program-block label { color:#6b5f4b; }
.stage-editor > summary { background:#f6f0e5; color:#9b4d31; }
.stage-editor > summary strong,.stage-summary { color:#686458; }
.nested-action { background:#fbf6ec; border-color:#d7cdbd; }
.program-block { background:#fffdf8; }
.program-block strong,.output-block summary strong { color:#302e29; }
.program-block .block-label { color:#75664f; }
.stage-actions button,.action-buttons button,.cycle-order button { background:#fffdf8; color:#62543d; border-color:#cbbda6; }
.stage-number,.cycle-order > span { background:#f1e2cd; color:#9b4d31; border-color:#c8ab80; }
.action-number { background:#fff4e8; color:#89511b; border-color:#cead88; }
.stage-summary strong { color:#9b4d31; }
.block-key span { background:#fffdf8; color:#6b5f4a; }
.block-key .stage-key,.stage-block { border-color:#d7cdbd; border-top-color:#a57342; }
.action-block { border-top-color:#b97532; }
.output-block { border-top-color:#a9791c; }
.sensor-block { border-top-color:#2e8465; }
.target-block { border-top-color:#8267b2; }
.repeat-block { border-top-color:#bd6658; }
.block-link { color:#96866d; }
.output-choice { background:#f4eee4; border-color:#d7cdbd; color:#61543f; }
.output-choice.selected { background:#fff6df; border-color:#c49a4b; }
.output-block summary { color:#835c17; }
.repeat-line,.action-sequence-link { color:#90502c; }
.cycle-save-bar { background:#faf5ebf5; }
.cycle-targets .panel,.lamb-summary .panel,.cycle-help { border-top-color:#aa8b5a; }
.cycle-targets .powder-target-card { border-top-color:#b87918; }
.recipe-target-summary { background:#d7cdbd; }
.recipe-target-summary div { background:#faf4e9; }
.recipe-target-summary p { background:#eee6d8; }
.pending-changes { background:#fff8e8; border-color:#c49943; }
.pending-changes small,.pending-changes span { color:#77591f; }
#toast { background:#496a43; color:#fffdf8; }
#toast[data-kind=error] { background:#a23232; color:#fffdf8; }
dialog { background:#fffdf8; color:#302e29; }
dialog::backdrop { background:#3a302766; }
.camera-preview,.firmware-log-card pre { background:#eee7da; color:#61543f; }
.firmware-detection { background:#f6f0e5; }
.camera-preview img { background:#302c27; }
.camera-help,.camera-copy p,.camera-form label,.lamb-add-form > label,.dialog-content > label,.compact-search { color:#686458; }
.lamb-notes article { background:#f4ede1; }
.empty-card { background:#fcf8f0; }
.brand span { background:#9b4d31; color:#fffdf8; }
.feeder-card:hover { background:#f9efdf; }
.environment-badge.live { background:#e4f3e9; color:#21623c; }
.environment-badge.test { background:#eee8fa; color:#60448e; }
.summary,.state-pill { background:#fffdf8; }
.connection { background:#f3ecdf; color:#6b5f4b; }
.mobile-nav summary { background:#f3f6fa; color:#62543d; }
.mobile-nav div { background:#fffdf8; box-shadow:0 12px 35px #46361d26; }
.mobile-nav a:hover { background:#f3e8d6; }
.notice { background:#f3e8d6; color:#6e5d42; }
.notice.warn { background:#fff8e8; color:#77591f; border-color:#dac395; }
.identity-code { background:#f6f0e5; color:#1b6343; }
.pairing-code { background:#edf8f0; }
.temporary-credential { background:#fff8e8; }
.temporary-credential code { background:#fffdf8; color:#245e3e; }
.delete-feeder form,.delete-account form { background:#fff5f3; border-color:#d8a4a3; }
.delete-feeder>summary,.delete-account>summary { color:#a32930; }
.skip-link { background:#9b4d31; color:#fffdf8; }
@media(max-width:760px) {
  .mobile-section-menu { background:#f8f3e9f5; color:#6e5e46; }
  .mobile-section-menu select { background:#fffdf8; border-color:#c8baa5; }
  .schedule-row,.relay-row,.input-row,.responsive-table tr { background:#fffdf8; }
  .relay-row .io-role,.input-row .io-role { color:#9b4d31; }
}
/* A quieter, material-led hierarchy for everyday farm use. */
body { font-family:"Segoe UI",system-ui,sans-serif; }
.topbar { background:#faf6ee; border-bottom:1px solid #cbbda8; box-shadow:0 3px 14px #4c38200a; }
.topbar h1 { letter-spacing:-.035em; }
.panel,.card,.hero-card,.state-card,.metric-card { box-shadow:0 4px 16px #4f3a2010; }
.page-title h2,.heading h1,.hero h1,.narrow h1 { font-family:Georgia,"Times New Roman",serif; font-weight:600; letter-spacing:-.035em; }
.page-title h2 { font-size:clamp(1.6rem,3vw,2.1rem); }
.eyebrow,.label,.central-console .eyebrow { font-weight:650; letter-spacing:.075em; }
.primary,.primary-button,.hot-button,.secondary-button,.small-button { border-radius:10px; }
.brand span { border-radius:12px 12px 4px 12px; background:#9b4d31; }
.state-card { background:linear-gradient(110deg,#f3e6d0,#fcf7ed); border-left-color:#a9783d; }
.state-card h2 { font-family:Georgia,"Times New Roman",serif; font-size:2rem; font-weight:600; }
.temperature { border-top-color:#b28443; }
.weight { border-top-color:#7b8863; }
.weight .metric { color:#52683e; }
.calculation { border-radius:12px; background:#f1e6d2; }
.tabs { background:#faf6ee; }
.tabs button.selected { background:#ead9c5; box-shadow:inset 0 -3px #9b4d31; }
.feeder-card { border-top-color:#a7834d; }
.farm-card { border-top-color:#7c8964; }
.mobile-nav summary { border-radius:10px; }
.manual-grid button { border-radius:14px; }
@media(max-width:760px) {
  .mobile-section-menu { background:#f6f0e5f5; }
  .responsive-table tr,.relay-row,.input-row { background:#fffcf5; border-radius:12px; }
}

/* Task-led layouts: control rail, grouped settings and compact process detail. */
.workspace { grid-template-columns:minmax(280px,.8fr) minmax(0,1.65fr); align-items:start; }
.control-panel { position:sticky; top:24px; }
.control-panel .panel-heading { border:0; padding-bottom:0; }
.process-detail { min-width:0; }
.process-detail > summary { cursor:pointer; padding:16px 0; color:#766247; font-weight:650; }
.process-detail[open] > summary { border-bottom:1px solid var(--line); }
.process-detail .process-line { margin:24px 0; }
#recipeForm { padding:0; border:0; box-shadow:none; background:none; gap:20px; align-items:start; }
.recipe-group { min-width:0; margin:0; padding:22px; border:1px solid var(--line); border-radius:14px; background:#fffdf8; display:grid; gap:18px; }
.recipe-group legend { padding:0 8px; margin-left:-8px; font-size:1.05rem; font-weight:700; color:#463d2e; }
.recipe-group > p { margin:0; color:#766b5c; font-size:.85rem; line-height:1.5; }
.recipe-group label { font-size:.86rem; }
#recipeForm > .recipe-target-summary { border-radius:12px; }
.schedule-editor { counter-reset:feed; }
.schedule-row { counter-increment:feed; grid-template-columns:40px 130px minmax(0,1fr) 110px auto; padding:18px; border:1px solid var(--line); border-radius:12px; background:#fffdf8; align-items:end; }
.schedule-row::before { content:counter(feed,decimal-leading-zero); color:#9b4d31; font-size:1.25rem; font-weight:700; align-self:center; }
.schedule-field { display:grid; gap:6px; color:#766b5c; font-size:.8rem; min-width:0; }
.schedule-field input { width:100%; }
.schedule-toggle { min-height:46px; }
.farm-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.farm-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 20px; align-items:start; padding:26px; border-top:0; border-left:4px solid #7c8964; }
.farm-card .card-top,.farm-card > p { grid-column:1; }
.farm-card h2 { grid-column:1; margin:0; }
.farm-card form { grid-column:2; grid-row:2/4; align-self:center; margin:0; }
.farm-card .primary { margin:0; white-space:nowrap; }
.central-console .hero { grid-template-columns:minmax(0,1fr) minmax(280px,.65fr); max-width:1000px; margin-inline:auto; gap:0; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fffdf8; box-shadow:0 12px 40px #49351d0c; }
.central-console .hero > div:first-child { padding:clamp(24px,4vw,48px); }
.central-console .hero-card { border:0; border-left:1px solid #cdbb9d; border-radius:0; min-height:100%; justify-content:center; background:#e9deca; box-shadow:none; padding:32px; }
.central-console .hero h1 { font-size:clamp(2.2rem,5vw,3.6rem); }
@media(min-width:1180px) {
  .feeder-console .tabs { top:0; right:auto; bottom:0; width:214px; display:flex; flex-direction:column; justify-content:flex-start; padding:28px 14px; gap:5px; border:0; border-right:1px solid #cbbda8; overflow-y:auto; background:#e7decd; }
  .feeder-console .tabs::before { content:'FEEDER WORKSPACE'; display:block; color:#6e5b3e; font-size:.7rem; letter-spacing:.1em; font-weight:750; padding:0 12px 24px; }
  .feeder-console .tabs button { flex:0 0 auto; text-align:left; padding:12px; min-height:43px; background:none; color:#61543e; }
  .feeder-console .tabs button.selected { background:#fffaf1; box-shadow:inset 3px 0 #9b4d31; color:#783b28; }
  .feeder-console .topbar { margin-left:214px; padding-inline:32px; }
  .feeder-console main { max-width:none; margin-left:214px; padding:28px 32px 48px; }
  .feeder-console .pending-changes { left:238px; right:24px; bottom:20px; width:auto; }
  .central-console:has(.topbar nav) .topbar nav { position:fixed; top:73px; left:0; bottom:0; width:214px; display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:24px 16px; background:#e7decd; border-right:1px solid #cbbda8; }
  .central-console:has(.topbar nav) .topbar nav a { padding:10px 12px; border-radius:8px; color:#61543e; }
  .central-console:has(.topbar nav) .topbar nav a[aria-current] { background:#fffaf1; color:#783b28; text-decoration:none; box-shadow:inset 3px 0 #9b4d31; }
  .central-console:has(.topbar nav) .topbar nav form { margin-top:auto; padding:10px; }
  .central-console:has(.topbar nav) .shell { max-width:none; margin-left:214px; padding:32px; }
}
@media(max-width:1000px) {
  .schedule-row { grid-template-columns:28px 120px minmax(0,1fr); gap:12px; }
  .schedule-row .schedule-toggle { grid-column:2; }
  .schedule-row > button { grid-column:3; justify-self:end; }
  .farm-grid { grid-template-columns:1fr; }
}
@media(max-width:760px) {
  .workspace { grid-template-columns:minmax(0,1fr); }
  .control-panel { position:static; }
  .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .state-card { min-height:100px; padding-block:14px; }
  .metric-card { min-height:124px; }
  .metric { font-size:1.9rem; margin:8px 0; }
  .control-panel .field { margin-top:16px; }
  .control-panel .calculation { margin-block:16px; }
  .process-detail > summary { font-size:.9rem; }
  #recipeForm { gap:16px; }
  .recipe-group { padding:18px; }
  .recipe-group legend { font-size:1rem; }
  .schedule-row { grid-template-columns:100px minmax(0,1fr); padding:16px; }
  .schedule-row::before { content:'Feed ' counter(feed,decimal-leading-zero); grid-column:1/-1; font-size:.8rem; letter-spacing:.04em; }
  .schedule-row .schedule-toggle { grid-column:1; }
  .schedule-row > button { grid-column:2; }
  .farm-card { grid-template-columns:minmax(0,1fr); padding:22px; }
  .farm-card form { grid-column:1; grid-row:auto; width:100%; margin-top:8px; }
  .farm-card .primary { width:100%; }
  .central-console .hero { grid-template-columns:1fr; margin-top:12px; }
  .central-console .hero-card { border:0; border-top:1px solid #cdbb9d; padding:24px; }
  .central-console .hero > div:first-child { padding:26px; }
  .mobile-section-menu { grid-template-columns:minmax(0,1fr) auto; font-size:0; }
  .mobile-section-menu #stopButton { min-height:46px; padding:0 12px; font-size:.85rem; letter-spacing:0; white-space:nowrap; }
}