:root {
  font: 15px/1.55 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #213b30;
  background: #f4f5ee;
  color-scheme: light;
  --text: #213b30;
  --muted: #5c6c61;
  --line: #e0e6db;
  --surface: #fffefb;
  --accent: #286144;
  --accent-hover: #1e5036;
  --soft: #edf4e9;
  --radius: 24px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 280px; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #53805a; outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }
.shell { width: min(100% - 56px, 1160px); margin-inline: auto; }
.topbar { background: #fafbf5; border-bottom: 1px solid #e6e9df; }
.topbar-inner { min-height: 70px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 680; white-space: nowrap; }
.brand-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: white; background: var(--accent); }
.brand-icon .icon { width: 21px; height: 21px; }
nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); color: var(--muted); }
nav a { white-space: nowrap; font-size: 14px; }
nav a:hover, .nav-current { color: var(--accent); }
.button {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px;
  padding: 9px 16px; border: 1px solid transparent; border-radius: 12px; background: transparent;
  color: inherit; cursor: pointer; white-space: nowrap; font-weight: 650;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.button:disabled { opacity: .58; cursor: default; }
.button .icon { width: 18px; height: 18px; }
.button-primary { color: #fff; background: var(--accent); }
.button-primary:hover:not(:disabled) { background: var(--accent-hover); }
.button-secondary { border-color: #d9e3d5; color: var(--accent); background: #f9fbf5; }
.button-secondary:hover:not(:disabled), .button-quiet:hover:not(:disabled) { background: var(--soft); }
.button-quiet { color: var(--text); padding-inline: 12px; }
.login {
  display: grid; grid-template-columns: 1.27fr 1fr; min-height: 540px; margin: clamp(28px, 6vw, 72px) auto;
  overflow: hidden; border-radius: 32px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 24px 75px #334a3110;
}
.login-photo {
  background: #789071 url("./balcony.jpg") 34% center / cover no-repeat;
}
.login-content { display: grid; place-items: center; padding: clamp(28px, 5vw, 62px); }
.login-form-wrap { width: min(100%, 340px); }
.login h1 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.22; letter-spacing: -.025em; }
.login .muted { margin-top: 11px; }
.login form { margin-top: 28px; display: grid; gap: 9px; }
.login label, .amount-label label, legend, .pan-label label { font-weight: 650; }
.login input {
  width: 100%; min-height: 50px; padding: 11px 14px; border: 1px solid #d0ddcf;
  color: var(--text); background: #fafbf7; border-radius: 12px;
}
.login input::placeholder { color: #68786d; }
.login .button { margin-top: 9px; min-height: 50px; }
.notice { color: #8a3f2d; overflow-wrap: anywhere; }
.notice:empty { display: none; }
.login .notice, .dialog-content .notice { margin-top: 12px; }
.overview-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 32px 0 22px; }
.overview-heading h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.2; letter-spacing: -.04em; }
.overview-heading .muted { margin-top: 6px; }
.connection {
  display: inline-flex; align-items: center; gap: 8px; flex: none; border: 1px solid var(--line);
  padding: 7px 12px; border-radius: 100px; background: var(--surface); font-size: 13px;
}
.connection strong { font-weight: 620; }
.connection-dot { width: 8px; height: 8px; border-radius: 50%; background: #9f7045; }
.connection[data-state="online"] .connection-dot { background: #438350; }
.connection[data-state="offline"] .connection-dot { background: #7c8579; }
.dashboard-notice { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #fbede4; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr); gap: 18px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; padding: clamp(16px, 2.3vw, 24px); box-shadow: 0 8px 28px #334a3107; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.card-heading h2 { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 680; }
.card-heading h2 .icon { color: var(--accent); }
.mode-label, .camera-state { color: var(--muted); font-size: 12px; white-space: nowrap; }
.preview {
  position: relative; isolation: isolate; display: grid; align-items: end; overflow: hidden;
  width: 100%; min-width: 0; min-height: 204px; aspect-ratio: 1.91; border-radius: 16px; color: white;
  background: #2b4836 url("./balcony.jpg") 43% 44% / cover no-repeat;
}
.preview::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #20372816 10%, #162c20d4 100%); }
.preview:has(video:not([hidden])) { background: #20382d; }
.preview-content { position: relative; padding: clamp(14px, 2.7vw, 24px); }
.preview-content p { margin-bottom: 10px; font-weight: 580; text-shadow: 0 1px 8px #17271c; }
.button-watch, .button-stop-video { color: var(--text); background: #fbfdf6; }
.button-watch:hover:not(:disabled), .button-stop-video:hover:not(:disabled) { background: #e9f3e3; }
.button-watch:disabled { opacity: .84; }
.button-stop-video { position: absolute; right: 11px; bottom: 11px; font-size: 13px; min-height: 40px; }
.preview video { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: contain; background: #18261e; }
.pan-form { margin-top: 13px; display: flex; align-items: end; gap: 12px; }
.pan-field { min-width: 0; flex: 1; }
.pan-label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.pan-label output { color: var(--muted); font-variant-numeric: tabular-nums; }
.pan-field input { display: block; width: 100%; margin: 5px 0 4px; min-height: 22px; accent-color: var(--accent); }
.watering-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { margin-bottom: 9px; padding: 0; }
.zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zone { position: relative; display: block; cursor: pointer; --zone-color: #e8f1dd; --zone-ink: #406746; }
.zone-2 { --zone-color: #f4e9dc; --zone-ink: #83583d; }
.zone-3 { --zone-color: #f3e7e6; --zone-ink: #8a525c; }
.zone-4 { --zone-color: #e5eee8; --zone-ink: #386552; }
.zone input { position: absolute; opacity: 0; }
.zone-face {
  display: flex; align-items: center; gap: 8px; min-height: 53px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 12px; font-weight: 600;
}
.zone:hover .zone-face { border-color: #a9c0a7; }
.zone input:checked + .zone-face { background: #f0f6e9; border-color: #65936b; box-shadow: inset 0 0 0 1px #65936b; }
.zone input:focus-visible + .zone-face { outline: 2px solid #53805a; outline-offset: 2px; }
.zone-icon { flex: none; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; background: var(--zone-color); color: var(--zone-ink); }
.zone-icon .icon { width: 18px; height: 18px; }
.amount-field { margin-top: 15px; }
.amount-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.amount-label span { color: var(--muted); font-size: 12px; }
.amount-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.amount-input { display: flex; align-items: center; min-height: 43px; border: 1px solid #d9e3d5; border-radius: 10px; padding-right: 10px; background: #fafbf7; }
.amount-input input { width: 61px; padding: 7px 2px 7px 10px; border: 0; background: transparent; color: var(--text); font-weight: 650; }
.amount-input span { color: var(--muted); font-size: 13px; }
.presets { display: flex; gap: 5px; }
.preset { min-width: 42px; min-height: 43px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.preset[aria-pressed="true"], .preset:hover { background: var(--soft); border-color: #afc6ae; }
.water-actions { display: flex; gap: 8px; margin-top: 13px; }
.water-actions .button-primary { flex: 1; min-width: 0; }
.button-stop { color: #923d30; border-color: #efd4cc; background: #fff4ef; }
.button-stop:hover:not(:disabled) { background: #fbe5dc; }
.water-status { min-height: 1.55em; margin-top: 7px; font-size: 12px; color: var(--muted); }
.records-card { margin: 18px 0 32px; scroll-margin-top: 16px; }
.records-card .card-heading { margin-bottom: 8px; }
.history { list-style: none; padding: 0; margin: 0; }
.history-item { display: grid; grid-template-columns: 39px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ecf0e7; }
.history-item:last-child { border-bottom: 0; }
.history-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: var(--soft); color: var(--accent); }
.history-icon .icon { width: 16px; height: 16px; }
.history-title, .history-time { display: block; }
.history-time, .history-empty { color: var(--muted); font-size: 13px; }
.history-time { overflow-wrap: anywhere; }
.history-empty { padding: 12px 0 6px; }
.task-state { padding: 3px 9px; border-radius: 80px; background: #eef2ec; color: #526352; font-size: 12px; white-space: nowrap; }
.task-state[data-state="completed"], .task-state[data-state="started"] { color: #276344; background: #e8f3e6; }
.task-state[data-state="interrupted"], .task-state[data-state="rejected"] { color: #874534; background: #faece3; }
dialog { width: min(100% - 36px, 420px); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 24px 72px #18352136; }
dialog::backdrop { background: #1a35298a; }
.dialog-content { padding: 22px; }
.dialog-content .card-heading { margin-bottom: 6px; }
.dialog-content > .button { margin-top: 16px; }
.icon-button { min-width: 42px; padding: 0; }
.pair-result { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--soft); }
.pair-result output { display: block; color: var(--accent); font: 650 20px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }
.pair-result .muted { font-size: 13px; }
@media (max-width: 820px) {
  .shell { width: min(100% - 32px, 650px); }
  .workspace { grid-template-columns: 1fr; gap: 14px; }
  .login { min-height: unset; grid-template-columns: 1fr; }
  .login-photo { min-height: clamp(185px, 52vw, 315px); background-position: center 45%; }
  .login-content { padding: 26px 24px 32px; }
  .login form { margin-top: 20px; }
  .overview-heading { padding-top: 22px; }
}
@media (max-width: 460px) {
  .topbar-inner { min-height: 58px; }
  nav { gap: 4px; }
  nav a { display: none; }
  .brand { font-size: 17px; }
  .brand-icon { width: 34px; height: 34px; }
  .overview-heading .muted { font-size: 13px; }
  .connection { font-size: 12px; padding: 6px 9px; }
  .card { border-radius: 19px; }
  .preview { min-height: 180px; }
  .zone-face { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}