:root {
  --ink: #142c3a;
  --muted: #6b7d87;
  --line: #d8e2e7;
  --canvas: #edf3f6;
  --surface: #fff;
  --soft: #f5f8fa;
  --blue: #0879be;
  --blue-dark: #075f95;
  --blue-soft: #e3f3fc;
  --green: #087c61;
  --green-soft: #e1f4ed;
  --orange: #a96300;
  --orange-soft: #fff0d2;
  --red: #b23932;
  --red-soft: #fdebea;
  font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); font-size: 14px; }
button, input, select { font: inherit; }
a { color: inherit; }

.site-header {
  min-height: 72px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px 3px 12px 3px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 900; }
.brand-copy { display: grid; line-height: 1.15; }
.brand-copy strong { font-size: 16px; }
.brand-copy small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.site-header nav { display: flex; align-items: center; gap: 22px; }
.site-header nav a { color: #435b67; font-size: 12px; font-weight: 800; text-decoration: none; }
.site-header nav a:hover { color: var(--blue); }

.shell { max-width: 1600px; margin: 0 auto; padding: 30px clamp(16px, 3vw, 42px) 48px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.eyebrow { margin: 0 0 6px; color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1; letter-spacing: -.04em; }
.page-head p:not(.eyebrow) { margin: 10px 0 0; color: var(--muted); }
.head-actions { display: flex; align-items: center; gap: 12px; }
.connection { min-height: 32px; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 800; }
.connection i { width: 8px; height: 8px; border-radius: 50%; background: #a8b5ba; }
.connection.ok i { background: #20a676; box-shadow: 0 0 0 4px var(--green-soft); }
.connection.error { color: var(--red); }
.connection.error i { background: var(--red); }
.button { min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 800; cursor: pointer; }
.button svg { width: 16px; stroke: currentColor; stroke-width: 1.8; }
.button-primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.button-primary:hover { background: var(--blue-dark); }
.button:disabled { opacity: .55; cursor: wait; }

.error-box { margin-top: 16px; padding: 11px 14px; border: 1px solid #eab9b5; border-radius: 8px; background: var(--red-soft); color: var(--red); font-weight: 700; }
.notice-box { margin-top: 16px; padding: 11px 14px; border: 1px solid #e4be79; border-radius: 8px; background: var(--orange-soft); color: #744700; font-size: 11px; font-weight: 750; line-height: 1.45; }
.summary { margin-top: 24px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.stat { min-height: 102px; padding: 18px 20px; border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: background .15s, box-shadow .15s; }
.stat:last-child { border-right: 0; }
.stat:hover { background: #f2f9fc; }
.stat.active { position: relative; z-index: 1; background: var(--blue-soft); box-shadow: inset 0 -4px 0 var(--blue); }
.stat:focus-visible { outline: 3px solid rgb(8 121 190 / 28%); outline-offset: -3px; }
.stat span { display: block; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.stat strong { display: block; margin: 4px 0 3px; font-size: 27px; letter-spacing: -.04em; }
.stat small { color: var(--muted); font-size: 10px; }
.stat.online strong { color: var(--green); }
.stat.offline strong { color: #687982; }
.stat.unassigned strong { color: #8c6b37; }
.stat.danger strong { color: var(--red); }

.cop-overview { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 38px rgb(27 65 85 / 7%); overflow: hidden; }
.cop-overview > summary { min-height: 72px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; }
.cop-overview > summary::-webkit-details-marker { display: none; }
.cop-overview > summary::after { content: "⌄"; width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--blue-soft); color: var(--blue); font-size: 18px; font-weight: 900; transition: transform .16s; }
.cop-overview[open] > summary::after { transform: rotate(180deg); }
.cop-overview > summary > span { min-width: 0; display: grid; gap: 4px; }
.cop-overview > summary strong { font-size: 14px; }
.cop-overview > summary small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.cop-overview > summary em { margin-left: auto; color: var(--blue-dark); font-size: 10px; font-style: normal; font-weight: 850; white-space: nowrap; }
.cop-overview-body { border-top: 1px solid var(--line); }
.cop-placeholder, .cop-error { min-height: 130px; padding: 28px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); text-align: center; }
.cop-placeholder strong, .cop-error strong { color: var(--ink); font-size: 12px; }
.cop-placeholder span, .cop-error span { font-size: 10px; }
.cop-error { background: var(--red-soft); color: var(--red); }
.cop-error .button { margin-top: 8px; }
.cop-overview-toolbar { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: #fbfcfd; }
.cop-overview-toolbar h3 { margin: 0; font-size: 13px; }
.cop-overview-toolbar p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.cop-stats { padding: 12px 18px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; border-bottom: 1px solid var(--line); }
.cop-stats > div { min-width: 0; padding: 9px 11px; border-radius: 8px; background: var(--soft); }
.cop-stats span { display: block; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.cop-stats strong { display: block; margin-top: 3px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cop-stats .invalid { background: var(--red-soft); }
.cop-stats .invalid strong { color: var(--red); }
.cop-stats .calculated { background: var(--green-soft); }
.cop-stats .calculated strong { color: var(--green); }
.cop-finding { margin: 12px 18px; padding: 10px 12px; display: grid; gap: 3px; border: 1px solid #c9dce5; border-radius: 8px; background: #f3f8fa; }
.cop-finding.warning { border-color: #e5bd72; background: var(--orange-soft); color: #744700; }
.cop-finding.ok { border-color: #a9d8c8; background: var(--green-soft); color: var(--green); }
.cop-finding strong { font-size: 10px; }
.cop-finding span { font-size: 9px; line-height: 1.45; }
.cop-calculation-note { margin: 0 18px 12px; padding: 9px 11px; border-left: 3px solid var(--blue); background: var(--blue-soft); color: var(--blue-dark); font-size: 9px; line-height: 1.5; }
.cop-read-errors { margin: 0 18px 12px; padding: 8px 10px; border-radius: 7px; background: var(--red-soft); color: var(--red); font-size: 9px; font-weight: 800; }
.cop-table-section { margin-top: 12px; border-top: 1px solid var(--line); }
.cop-table-section + .cop-table-section { margin-top: 18px; }
.cop-table-section > header { padding: 11px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #fbfcfd; }
.cop-table-section > header h4 { margin: 0; font-size: 11px; }
.cop-table-section > header p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.cop-table-section > header > strong { color: var(--blue-dark); font-size: 9px; white-space: nowrap; }
.cop-table-wrap { max-height: 68vh; border-top: 1px solid var(--line); overflow: auto; }
.cop-table { min-width: 2340px; }
.cop-table.atom-table { min-width: 820px; }
.cop-table th { text-align: center; white-space: nowrap; }
.cop-table thead tr:first-child th { top: 0; height: 32px; background: #dfeef5; color: var(--blue-dark); }
.cop-table thead tr:nth-child(2) th { top: 32px; }
.cop-table th[rowspan] { vertical-align: middle; }
.cop-table td { padding: 8px 7px; text-align: center; white-space: nowrap; }
.cop-table tbody tr { cursor: default; }
.cop-table .cop-system { position: sticky; left: 0; z-index: 1; min-width: 190px; max-width: 240px; background: var(--surface); text-align: left; }
.cop-table tbody tr:hover .cop-system { background: #edf7fc; }
.cop-system strong, .cop-system span { display: block; overflow: hidden; text-overflow: ellipsis; }
.cop-system strong { font-size: 10px; }
.cop-system span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.cop-product, .cop-system-status { padding: 4px 7px; display: inline-flex; border-radius: 99px; font-size: 8px; font-weight: 900; }
.cop-product.atom_t { background: var(--blue-soft); color: var(--blue-dark); }
.cop-product.hygge { background: #efeaf9; color: #61458f; }
.cop-system-status.valid { background: var(--green-soft); color: var(--green); }
.cop-system-status.invalid { background: var(--red-soft); color: var(--red); }
.cop-system-status.unavailable { background: #e9eff1; color: #637780; }
.cop-row-error { max-width: 130px; margin-top: 4px; display: block; overflow: hidden; color: var(--red); font-size: 7px; text-overflow: ellipsis; }
.cop-value { min-width: 98px; font-family: Consolas, "Courier New", monospace; font-size: 10px; font-weight: 800; }
.cop-reading { min-width: 82px; padding: 3px 5px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 4px; border-radius: 5px; }
.cop-reading + .cop-reading { margin-top: 3px; }
.cop-reading small { font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif; font-size: 6px; font-weight: 900; letter-spacing: .03em; text-align: left; text-transform: uppercase; }
.cop-reading strong { font-size: 9px; text-align: right; }
.cop-reading.valid { background: var(--green-soft); color: var(--green); }
.cop-reading.invalid { background: var(--red-soft); color: var(--red); }
.cop-reading.zero { background: #eef2f4; color: #7a8990; }
.cop-reading.missing { color: #a2afb5; }
.cop-reading.calculated { border: 1px dashed currentColor; }
.cop-unsupported span { padding: 5px 7px; display: inline-block; border-radius: 5px; background: #eef2f4; color: #7a8990; font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif; font-size: 7px; font-weight: 850; }

.workspace { margin-top: 16px; display: grid; grid-template-columns: minmax(700px, 1fr) 450px; gap: 16px; align-items: start; }
.list-panel, .detail-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 38px rgb(27 65 85 / 7%); overflow: hidden; }
.toolbar { min-height: 75px; padding: 12px 14px; display: flex; align-items: end; gap: 10px; border-bottom: 1px solid var(--line); background: #fbfcfd; }
label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 850; }
.search-field { flex: 1; min-width: 250px; }
.search-field > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; border: 1px solid #bfcdd3; border-radius: 7px; background: #fff; }
.search-field svg { width: 17px; margin-left: 10px; stroke: var(--blue); stroke-width: 1.8; }
input, select { height: 36px; border: 1px solid #bfcdd3; border-radius: 7px; padding: 0 10px; outline: 0; background: #fff; color: var(--ink); }
.search-field input { width: 100%; border: 0; }
input:focus, select:focus, .search-field > div:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(8 121 190 / 13%); }
.result-count { margin-left: auto; min-width: 74px; padding-bottom: 9px; color: var(--muted); font-size: 11px; font-weight: 750; text-align: right; }
.table-wrap { max-height: calc(100vh - 340px); overflow: auto; }
table { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; }
th, td { padding: 11px 12px; border-bottom: 1px solid #e5ecef; text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 2; background: #edf4f7; color: #536b76; font-size: 10px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.sort-button { width: 100%; padding: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; letter-spacing: inherit; text-align: left; text-transform: inherit; cursor: pointer; }
.sort-button i { min-width: 11px; color: var(--blue); font-size: 13px; font-style: normal; }
.sort-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr.active { background: #edf7fc; }
tbody tr:last-child td { border-bottom: 0; }
.status-pill { min-height: 23px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; font-size: 10px; font-weight: 850; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.online { color: var(--green); background: var(--green-soft); }
.status-pill.offline { color: #637780; background: #e9eff1; }
.status-pill.unassigned { color: #81622f; background: #f4eddf; }
.status-pill.fault { color: var(--red); background: var(--red-soft); }
.system-kind { padding: 4px 7px; display: inline-flex; border-radius: 6px; background: #e8eff2; color: #516975; font-size: 9px; font-weight: 850; white-space: nowrap; }
.system-kind.heatingSystem { background: var(--blue-soft); color: var(--blue-dark); }
.system-kind.vrf { background: #efeaf9; color: #61458f; }
.project-name { display: grid; gap: 2px; max-width: 280px; }
.project-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.project-name small, .muted { color: var(--muted); font-size: 10px; }
.missing-project-code strong { color: var(--orange); }
.mono { font-family: Consolas, "Courier New", monospace; }
.count-cell { font-weight: 800; text-align: center; }
.details-button { min-height: 29px; border: 1px solid #b9d9eb; border-radius: 6px; padding: 0 9px; background: #f3faff; color: var(--blue); font-size: 10px; font-weight: 850; cursor: pointer; }
.empty-row td { padding: 38px; color: var(--muted); text-align: center; cursor: default; }

.detail-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.detail-empty { min-height: 480px; padding: 45px 35px; display: grid; place-items: center; align-content: center; text-align: center; }
.empty-icon { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 17px; background: var(--blue-soft); color: var(--blue); font-size: 17px; font-weight: 900; }
.detail-empty h2 { margin: 17px 0 6px; font-size: 18px; }
.detail-empty p { max-width: 290px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.detail-loading { min-height: 480px; display: grid; place-items: center; color: var(--muted); font-weight: 800; }
.detail-head { padding: 18px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #eff9fe, #f9fcfd); }
.detail-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.detail-head h2 { margin: 7px 0 3px; font-size: 18px; letter-spacing: -.02em; }
.detail-head p { margin: 0; color: var(--muted); font-size: 10px; }
.detail-meta { margin-top: 13px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.detail-meta div { padding: 8px; border: 1px solid #dcecf3; border-radius: 7px; background: rgb(255 255 255 / 70%); }
.detail-meta span { display: block; color: var(--muted); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.detail-meta strong { display: block; margin-top: 2px; font-size: 11px; }
.compact-section { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.compact-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.compact-system-grid > div { min-width: 0; padding: 11px; border: 1px solid #dce8ed; border-radius: 8px; background: #f7fbfd; }
.compact-system-grid strong { display: block; color: var(--blue-dark); font-size: 21px; }
.compact-system-grid span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 750; }
.compact-status-line { margin: 9px 0 0; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 9px; font-weight: 750; }
.hydraulic-status-list { display: grid; gap: 8px; }
.hydraulic-status-card { padding: 12px; border: 1px solid #dce8ed; border-radius: 9px; background: #f8fbfc; }
.hydraulic-status-card > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 8px; }
.hydraulic-status-card > div:first-child strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.hydraulic-status-card > div:first-child small { grid-column: 2; color: var(--muted); font-size: 9px; }
.hydraulic-status-card dl { margin: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hydraulic-status-card dl > div { min-width: 0; padding: 7px; border-radius: 6px; background: #fff; }
.hydraulic-status-card dt { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.hydraulic-status-card dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 9px; font-weight: 750; }
.compact-error { margin-top: 8px; padding: 5px 7px; display: inline-flex; border-radius: 5px; background: var(--red-soft); color: var(--red); font-size: 9px; font-weight: 850; }
.compact-empty, .software-loading, .software-error { margin: 0; padding: 18px 10px; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }
.software-error { border-radius: 7px; background: var(--red-soft); color: var(--red); }
.software-list { display: grid; gap: 6px; }
.software-list article { min-width: 0; padding: 9px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid #dfe8ec; border-radius: 7px; background: #fbfdfe; }
.software-list article span { display: block; color: var(--blue); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.software-list article strong { display: block; margin-top: 2px; overflow-wrap: anywhere; font-size: 10px; }
.software-list article p { margin: 0; color: var(--ink); font-family: Consolas, monospace; font-size: 12px; font-weight: 800; text-align: right; }
.software-list article small { display: block; margin-top: 2px; color: var(--muted); font-family: inherit; font-size: 8px; font-weight: 700; }
.software-warning { margin: 8px 0 0; color: var(--orange); font-size: 9px; font-weight: 750; }
.compact-action { padding: 16px 18px 18px; }
.open-project-detail { width: 100%; }
.compact-action p { margin: 8px 6px 0; color: var(--muted); font-size: 9px; line-height: 1.45; text-align: center; }
.detail-section { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.detail-section:last-child { border-bottom: 0; }
.section-title { margin-bottom: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-title h3 { margin: 0; font-size: 13px; }
.section-title small { color: var(--muted); font-size: 9px; }
.section-title > .section-title-actions { display: flex; align-items: center; gap: 8px; }
.device-tabs { display: grid; gap: 6px; }
.device-tab { width: 100%; padding: 9px 10px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid #dbe5e9; border-radius: 8px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.device-tab:hover, .device-tab.active { border-color: #75bce2; background: #eff9fe; }
.device-kind { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 6px; background: var(--blue-soft); color: var(--blue); font-size: 9px; font-weight: 900; }
.device-tab strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.device-tab small { display: block; color: var(--muted); font-size: 9px; }
.device-dot { width: 7px; height: 7px; border-radius: 50%; background: #aebbc0; }
.device-dot.online { background: #20a676; }
.device-dot.fault { background: var(--red); }
.realtime-head { margin-bottom: 12px; }
.realtime-head h3 { margin: 0 0 3px; font-size: 14px; }
.realtime-head p { margin: 0; color: var(--muted); font-size: 9px; }
.hydraulic-note { margin: 0 0 11px; padding: 9px 10px; border: 1px solid #b9d9eb; border-radius: 7px; background: var(--blue-soft); color: var(--blue-dark); font-size: 9px; font-weight: 750; line-height: 1.45; }
.metric-search { width: 100%; margin-bottom: 11px; }
.metric-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.metric-highlight { min-width: 0; padding: 10px; border: 1px solid #dbe9ef; border-radius: 8px; background: #f7fbfd; }
.metric-highlight span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; }
.metric-highlight strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: var(--blue-dark); font-size: 16px; }
.metric-groups { margin-top: 12px; display: grid; gap: 8px; }
.metric-group { border: 1px solid #dde6ea; border-radius: 8px; overflow: hidden; }
.metric-group summary { min-height: 38px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; list-style: none; background: #f6f9fa; font-size: 11px; font-weight: 850; cursor: pointer; }
.metric-group summary::-webkit-details-marker { display: none; }
.metric-group summary em { color: var(--muted); font-size: 9px; font-style: normal; }
.metric-list { padding: 0 10px; }
.metric-row { min-height: 42px; padding: 7px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid #e9eef0; }
.metric-row:last-child { border-bottom: 0; }
.metric-row span { display: block; overflow-wrap: anywhere; font-size: 10px; font-weight: 700; }
.metric-row small { display: block; margin-top: 2px; color: var(--muted); font-family: Consolas, monospace; font-size: 8px; }
.metric-row strong { max-width: 155px; color: var(--ink); font-size: 11px; text-align: right; overflow-wrap: anywhere; }
.fault-history-value { display: grid; justify-items: end; gap: 2px; }
.fault-history-value strong { color: var(--red); }
.fault-history-value time { color: var(--muted); font-size: 8px; font-weight: 750; white-space: nowrap; }
.fault-history-row { align-items: start; }
.fault-service-card { grid-column: 1 / -1; overflow: hidden; border: 1px solid #b9d9eb; border-left: 4px solid var(--blue); border-radius: 8px; background: #f7fbfd; }
.fault-service-card.unmatched { border-color: #efcf99; border-left-color: var(--orange); background: #fffaf1; }
.fault-service-card > summary { min-height: 42px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.fault-service-card > summary::-webkit-details-marker { display: none; }
.fault-service-card > summary > span { min-width: 0; }
.fault-service-card > summary em, .fault-service-card > summary strong { display: block; }
.fault-service-card > summary em { color: var(--blue-dark); font-size: 8px; font-style: normal; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.fault-service-card.unmatched > summary em { color: #8a5200; }
.fault-service-card > summary strong { margin-top: 2px; max-width: none; color: var(--ink); font-size: 10px; text-align: left; }
.fault-service-card > summary i { flex: none; padding: 3px 6px; border-radius: 99px; background: var(--blue-soft); color: var(--blue-dark); font-size: 7px; font-style: normal; font-weight: 850; }
.fault-service-card.unmatched > summary i { background: var(--orange-soft); color: #8a5200; }
.fault-service-body { padding: 10px; display: grid; gap: 8px; border-top: 1px solid #dbe9ef; background: #fff; }
.fault-service-body p { margin: 0; color: var(--ink); font-size: 9px; line-height: 1.5; }
.fault-service-body ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: 9px; line-height: 1.5; }
.fault-service-safety { padding: 7px 8px; border-radius: 6px; background: var(--red-soft); color: var(--red) !important; font-family: inherit !important; font-size: 8px !important; font-weight: 750; line-height: 1.45; }
.fault-service-body footer { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.fault-service-body footer > span { min-width: 0; }
.fault-service-body footer small { display: block; margin: 2px 0 0; color: var(--muted); font-family: inherit; font-size: 7px; }
.fault-api-code { display: inline-block !important; width: fit-content; padding: 2px 5px; border-radius: 99px; background: #eef3f5; color: var(--muted); font-family: Consolas, monospace; font-size: 7px !important; font-weight: 800 !important; }
.fault-service-body footer a { flex: none; min-height: 28px; padding: 0 9px; display: inline-flex; align-items: center; border: 1px solid var(--blue); border-radius: 6px; color: var(--blue-dark); font-size: 8px; font-weight: 850; text-decoration: none; }
.fault-service-body footer a:hover { background: var(--blue-soft); }
.realtime-error { padding: 12px; border-radius: 8px; background: var(--red-soft); color: var(--red); font-size: 11px; font-weight: 700; }
.realtime-placeholder { padding: 25px 10px; color: var(--muted); font-size: 11px; text-align: center; }

.section-title > div { display: grid; gap: 3px; }
.write-badge { padding: 4px 8px; border-radius: 99px; background: #e9eff1; color: var(--muted); font-size: 9px; font-weight: 850; }
.write-badge.enabled { background: var(--orange-soft); color: var(--orange); }
.control-write-status { margin: 0 0 10px; padding: 10px 11px; display: grid; gap: 2px; border: 1px solid #b9d9eb; border-left: 4px solid var(--blue); border-radius: 8px; background: var(--blue-soft); color: var(--blue-dark); }
.control-write-status strong { font-size: 10px; }
.control-write-status span { font-size: 9px; line-height: 1.45; }
.control-write-status.awaiting, .control-write-status.checking, .control-write-status.sending { border-color: #efcf99; border-left-color: var(--orange); background: #fff8ea; color: #704400; }
.control-write-status.success { border-color: #a8d8c6; border-left-color: var(--green); background: #eefaf5; color: #216448; }
.control-write-status.warning { border-color: #efcf99; border-left-color: var(--orange); background: #fff8ea; color: #704400; }
.control-write-status.error { border-color: #efb8b1; border-left-color: var(--red); background: var(--red-soft); color: var(--red); }
.control-form-feedback { grid-column: 1 / -1; padding: 8px 9px; border-radius: 7px; background: #edf6fa; color: var(--blue-dark); font-size: 9px; font-weight: 750; line-height: 1.4; }
.control-form-feedback.success { background: var(--green-soft); color: var(--green); }
.control-form-feedback.error { background: var(--red-soft); color: var(--red); }
.parameter-refresh { margin: 0 0 10px; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #b9d9eb; border-radius: 8px; background: var(--blue-soft); color: var(--blue-dark); }
.parameter-refresh > div { min-width: 0; display: grid; gap: 2px; }
.parameter-refresh strong { font-size: 10px; }
.parameter-refresh span { font-size: 9px; line-height: 1.45; }
.parameter-refresh.loading { border-color: #efcf99; background: #fff8ea; color: #704400; }
.parameter-refresh.success { border-color: #a8d8c6; background: #eefaf5; color: #216448; }
.parameter-refresh.error { border-color: #efb8b1; background: var(--red-soft); color: var(--red); }
.parameter-refresh-button { flex: none; min-height: 32px; border-color: currentColor; background: #fff; font-size: 9px; }
.control-categories { display: grid; gap: 9px; }
.control-category { border: 1px solid #dbe6eb; border-left: 4px solid var(--blue); border-radius: 10px; overflow: hidden; background: #fbfdfe; }
.control-category.risk-elevated { border-left-color: var(--orange); }
.control-category.risk-critical { border-left-color: var(--red); }
.control-category > summary, .control-action-card > summary { padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.control-category > summary::-webkit-details-marker, .control-action-card > summary::-webkit-details-marker { display: none; }
.control-category > summary { background: #f5fafc; }
.control-category.risk-elevated > summary { background: #fff9ed; }
.control-category.risk-critical > summary { background: #fff2f0; }
.control-category > summary span, .control-action-card > summary span { min-width: 0; }
.control-category > summary strong, .control-action-card > summary strong { display: block; font-size: 11px; }
.control-category > summary small, .control-action-card > summary small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.control-category > summary em, .control-action-card > summary em { flex: none; color: var(--muted); font-size: 8px; font-style: normal; font-weight: 850; }
.control-category-body { padding: 9px; display: grid; gap: 8px; border-top: 1px solid #e3eaed; }
.control-category-empty { margin: 0; padding: 12px; color: var(--muted); font-size: 9px; line-height: 1.45; text-align: center; }
.control-actions { display: grid; gap: 9px; }
.control-action-card { border: 1px solid #dbe6eb; border-radius: 8px; overflow: hidden; background: #fff; }
.control-action-card > summary { padding: 9px 10px; background: #f9fbfc; }
.control-action { padding: 11px; display: grid; gap: 10px; border-top: 1px solid #e6ecef; background: #fff; }
.control-action h4 { margin: 0; font-size: 12px; }
.control-action p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.control-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.control-field { min-width: 0; }
.control-field[hidden] { display: none; }
.control-field > span { display: block; min-height: 16px; font-size: 9px; font-weight: 750; }
.control-field > small { display: block; margin: 1px 0 4px; overflow: hidden; color: var(--muted); font-family: Consolas, monospace; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.control-field > .control-current { margin: 0 0 5px; font-family: inherit; font-size: 8px; font-weight: 750; }
.control-field > .control-current.available { color: #25734f; }
.control-field > .control-current.missing { color: #a45c00; }
.control-field > .control-limit { margin-top: -2px; color: var(--blue-dark); font-family: inherit; font-size: 8px; font-weight: 750; }
.control-field.current-missing { padding: 7px; border: 1px solid #f0d4a5; border-radius: 7px; background: #fffaf1; }
.control-field select, .control-field input { width: 100%; height: 34px; font-size: 11px; }
.control-field-filter { width: 100%; height: 34px; font-size: 10px; }
.control-submit { justify-self: end; min-height: 34px; border-color: #e3ad55; background: #fff9ed; color: #8a5200; }
.control-submit:hover { background: var(--orange-soft); }
.control-note { margin: 11px 0 0; padding: 9px; border-radius: 7px; background: #f5f7f8; color: var(--muted); font-size: 9px; line-height: 1.45; }
.control-current-warning { display: grid; gap: 3px; margin: 0 0 10px; padding: 10px 11px; border: 1px solid #efcf99; border-radius: 8px; background: #fff8ea; color: #704400; font-size: 9px; line-height: 1.45; }
.control-current-warning strong { font-size: 10px; }
.control-current-warning em { font-size: 8px; font-style: normal; font-weight: 800; }

.timer-action { gap: 14px; background: #f7fafb; }
.timer-section { overflow: hidden; border: 1px solid #dce7ec; border-radius: 9px; background: #fff; }
.timer-section > header { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e4ecef; background: #edf6fa; }
.timer-section > header strong, .timer-section > header small { display: block; }
.timer-section > header strong { font-size: 11px; }
.timer-section > header small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.timer-section > header em { flex: none; color: var(--muted); font-size: 8px; font-style: normal; font-weight: 850; }
.timer-list { display: grid; }
.timer-section-empty { margin: 0; padding: 14px; color: var(--muted); font-size: 9px; text-align: center; }
.timer-form + .timer-form { border-top: 1px solid #e6edef; }
.timer-card { background: #fff; }
.timer-card.enabled { box-shadow: inset 4px 0 0 var(--green); }
.timer-card.timer-dirty { box-shadow: inset 4px 0 0 var(--orange); }
.timer-card > summary { min-height: 64px; padding: 9px 11px; display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 210px); align-items: center; gap: 10px; list-style: none; cursor: pointer; }
.timer-card > summary::-webkit-details-marker { display: none; }
.timer-card > summary > span:first-child strong, .timer-card > summary > span:first-child small { display: block; }
.timer-card > summary > span:first-child strong { font-size: 10px; }
.timer-card > summary > span:first-child small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.timer-range { color: var(--ink); font-weight: 850; }
.timer-duration { color: var(--blue-dark); font-weight: 750; }
.timer-status { padding: 4px 7px; border-radius: 99px; background: #edf1f3; color: #647a84; font-size: 8px; font-weight: 850; }
.timer-status.active { background: var(--green-soft); color: var(--green); }
.timer-toggle { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 1px 8px; align-items: center; cursor: default; }
.timer-toggle span { font-size: 8px; font-weight: 800; }
.timer-toggle small { overflow: hidden; color: var(--muted); font-family: Consolas, monospace; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.timer-toggle select { height: 30px; grid-column: 2; grid-row: 1 / span 2; font-size: 10px; }
.timer-card-body { padding: 11px; border-top: 1px solid #e8eef0; background: #fbfcfd; }
.timer-schedule-builder { display: grid; grid-template-columns: minmax(150px, 1.15fr) minmax(135px, .9fr) minmax(135px, .9fr) minmax(150px, 1fr); gap: 9px; align-items: end; }
.timer-time-field { min-width: 0; display: block; }
.timer-time-field > span { display: block; min-height: 16px; font-size: 9px; font-weight: 750; }
.timer-time-field > small { display: block; margin: 1px 0 4px; overflow: hidden; color: var(--muted); font-family: Consolas, monospace; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.timer-time-field input { width: 100%; height: 34px; font-size: 12px; font-weight: 800; }
.timer-time-error { margin: 9px 0 0; padding: 7px 9px; border: 1px solid #efc1b9; border-radius: 6px; background: #fff4f2; color: #a33b2d; font-size: 9px; font-weight: 750; }
.timer-extra-fields { padding: 11px; border: 1px solid #dce7ec; border-radius: 9px; background: #fff; }
.timer-extra-fields > strong { display: block; margin-bottom: 9px; font-size: 10px; }
.timer-extra-fields { display: grid; gap: 9px; }
.timer-inactive-note { display: none; margin: 0 0 9px; color: var(--muted); font-size: 9px; }
.timer-card:not(.enabled) .timer-parameters { display: none; }
.timer-card:not(.enabled) .timer-inactive-note { display: block; }
.timer-submit { margin-top: 10px; margin-left: auto; display: flex; }
.timer-card:not(.enabled):not(.timer-dirty) .timer-submit { display: none; }
.day-timeline { padding: 14px 13px 12px; border-bottom: 1px solid #e4ecef; background: #fbfdfe; }
.day-timeline-track { height: 38px; position: relative; margin: 0 11px 10px; }
.day-timeline-axis { height: 10px; position: absolute; top: 10px; right: 0; left: 0; border-radius: 99px; background: #dfe8ec; box-shadow: inset 0 0 0 1px #d3dfe4; }
.day-timeline-segment { height: 10px; position: absolute; top: 10px; z-index: 1; min-width: 2px; background: linear-gradient(90deg, #239561, #53bb84); box-shadow: inset 0 0 0 1px rgb(17 111 70 / 28%); }
.day-timeline-tick { position: absolute; top: 25px; color: var(--muted); font-size: 7px; font-weight: 750; transform: translateX(-50%); }
.day-timeline-tick::before { width: 1px; height: 6px; position: absolute; top: -15px; left: 50%; z-index: 2; background: #9fb0b8; content: ""; }
.day-timeline-tick.tick-0 { left: 0; transform: none; }
.day-timeline-tick.tick-6 { left: 25%; }
.day-timeline-tick.tick-12 { left: 50%; }
.day-timeline-tick.tick-18 { left: 75%; }
.day-timeline-tick.tick-24 { right: 0; transform: none; }
.day-block-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 7px; }
.day-block { padding: 9px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 9px; border: 1px solid #cfe4d9; border-left: 4px solid var(--green); border-radius: 7px; background: #f3fbf7; }
.day-block strong { color: var(--green); font-size: 11px; }
.day-block span { overflow: hidden; font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.day-block small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }
.day-point-list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.day-point { padding: 3px 6px; border-radius: 99px; background: var(--green-soft); color: var(--green); font-size: 8px; }
.day-point.off { background: #edf1f3; color: #60747d; }
.day-point strong { margin-right: 4px; }
.day-timeline-empty { margin: 0; padding: 8px; border-radius: 6px; background: #f3f6f7; color: var(--muted); font-size: 9px; text-align: center; }
.day-point-editor > summary { padding: 9px 12px; background: #f7fafb; color: var(--blue-dark); font-size: 9px; font-weight: 850; cursor: pointer; }
.day-point-editor > .timer-list { border-top: 1px solid #e4ecef; }
.timer-schedule-builder.day-point-builder { grid-template-columns: minmax(150px, 1.15fr) minmax(135px, .9fr) minmax(150px, 1fr); }
.day-point-temperature { min-width: 0; }
.day-point-temperature > .control-field { display: block; }
.day-point-form.day-point-off .day-point-temperature { display: none; }
.disinfection-action { background: #f7fafb; }
.disinfection-schedule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-items: end; }
.disinfection-note { margin: 0; padding: 8px 10px; border-radius: 7px; background: #edf6fa; color: #45606b; font-size: 9px; line-height: 1.45; }

.comfort-window > header { padding: 9px 11px; border-bottom: 1px solid #e4ecef; background: #edf6fa; }
.comfort-window > header strong, .comfort-window > header small { display: block; }
.comfort-window > header strong { font-size: 10px; }
.comfort-window > header small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.weekly-program-hub { overflow: hidden; border: 1px solid #cfe1e9; border-radius: 10px; background: #f7fafb; }
.weekly-program-hub > header { padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #dce7ec; background: #eaf5fa; }
.weekly-program-hub > header strong, .weekly-program-hub > header small { display: block; }
.weekly-program-hub > header strong { font-size: 12px; }
.weekly-program-hub > header small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.weekly-program-hub > header em { color: var(--blue-dark); font-size: 8px; font-style: normal; font-weight: 850; }
.weekly-program-areas { padding: 10px; display: grid; gap: 8px; }
.weekly-scope-card { overflow: hidden; border: 1px solid #d7e4e9; border-radius: 8px; background: #fff; }
.weekly-scope-card > summary { padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; background: #f8fbfc; cursor: pointer; }
.weekly-scope-card[open] > summary { border-bottom: 1px solid #dfe9ed; background: #eff8fc; }
.weekly-scope-card > summary::-webkit-details-marker { display: none; }
.weekly-scope-card > summary strong, .weekly-scope-card > summary small { display: block; }
.weekly-scope-card > summary strong { font-size: 11px; }
.weekly-scope-card > summary small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.weekly-scope-card > summary em { color: var(--muted); font-size: 8px; font-style: normal; font-weight: 850; }
.weekly-scope-body { padding: 9px; display: grid; gap: 8px; background: #f7fafb; }
.weekly-program-item { overflow: hidden; border: 1px solid #dde7eb; border-left: 4px solid #aebdc3; border-radius: 8px; background: #fff; }
.weekly-program-item.active { border-left-color: var(--green); }
.weekly-program-switch-row { padding: 9px 10px; display: grid; grid-template-columns: minmax(150px, .7fr) minmax(360px, 1.5fr); align-items: end; gap: 12px; }
.weekly-program-copy strong, .weekly-program-copy small { display: block; }
.weekly-program-copy strong { font-size: 10px; }
.weekly-program-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.weekly-program-item.active .weekly-program-copy small { color: var(--green); font-weight: 800; }
.weekly-status-form { display: grid; grid-template-columns: minmax(190px, 1fr) auto; align-items: end; gap: 9px; }
.weekly-status-control span, .weekly-status-control small { display: block; }
.weekly-status-control span { font-size: 9px; font-weight: 800; }
.weekly-status-control small { margin: 1px 0 4px; overflow: hidden; color: var(--muted); font-family: Consolas, monospace; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.weekly-status-control select { width: 100%; height: 34px; font-size: 10px; }
.weekly-status-form .control-submit { white-space: nowrap; }
.weekly-program-editor { border-top: 1px solid #e2eaed; background: #f7fafb; }
.weekly-program-editor[hidden] { display: none; }
.weekly-timer-action > .timer-action { border-top: 0; }
.weekly-program-unavailable { margin: 0; padding: 10px; color: var(--muted); font-size: 8px; text-align: center; }
.installer-parameter-groups { display: grid; gap: 8px; }
.installer-parameter-group { overflow: hidden; border: 1px solid #dce6ea; border-radius: 8px; background: #fff; }
.installer-parameter-group > summary { padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; background: #f5f9fb; cursor: pointer; }
.installer-parameter-group > summary::-webkit-details-marker { display: none; }
.installer-parameter-group > summary strong, .installer-parameter-group > summary small { display: block; }
.installer-parameter-group > summary strong { font-size: 10px; }
.installer-parameter-group > summary small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.installer-parameter-group > summary em { color: var(--muted); font-size: 8px; font-style: normal; font-weight: 850; }
.installer-parameter-group > .control-fields { padding: 10px; border-top: 1px solid #e4ecef; }
.heating-curve9-editor { grid-column: 1 / -1; overflow: hidden; border: 1px solid #b9d9e8; border-radius: 11px; background: linear-gradient(145deg, #f3faff, #fff); box-shadow: 0 8px 22px rgb(24 86 116 / 8%); }
.heating-curve9-head { padding: 13px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #d8e8ef; background: rgb(235 247 253 / 78%); }
.heating-curve9-head > div { min-width: 0; }
.heating-curve9-head h4 { display: inline; margin: 0 0 0 7px; color: var(--blue-dark); font-size: 13px; }
.heating-curve9-head p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.heating-curve9-badge { display: inline-flex; padding: 3px 7px; border-radius: 99px; background: var(--blue); color: #fff; font-size: 8px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.heating-curve9-reset { flex: none; min-height: 30px; border-color: #b8d7e5; background: #fff; color: var(--blue-dark); font-size: 8px; }
.heating-curve9-layout { padding: 14px; display: grid; grid-template-columns: minmax(390px, 1.55fr) minmax(270px, .9fr); align-items: start; gap: 14px; }
.heating-curve9-chart { min-width: 0; padding: 9px 9px 7px; border: 1px solid #dce9ee; border-radius: 9px; background: #fff; }
.heating-curve9-chart canvas { width: 100%; display: block; border-radius: 6px; cursor: grab; touch-action: none; user-select: none; }
.heating-curve9-chart canvas.is-dragging { cursor: grabbing; }
.heating-curve9-chart > small { display: block; margin: 4px 6px 0; color: var(--muted); font-size: 8px; line-height: 1.4; text-align: center; }
.heating-curve9-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.heating-curve9-field { padding: 9px; border: 1px solid #d7e5eb; border-radius: 8px; background: #fff; }
.heating-curve9-field > span { min-height: 28px; color: #294c5b; line-height: 1.35; }
.heating-curve9-field > input { border-color: #b7d3df; background: #fbfdfe; font-weight: 800; }
.heating-curve9-field > input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgb(0 126 188 / 13%); }
.heating-curve9-footer { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #dce9ee; background: #f8fbfc; }
.heating-curve9-footer span { font-size: 8px; line-height: 1.45; }
.heating-curve9-summary { color: var(--blue-dark); font-weight: 800; }
.heating-curve9-rule { color: var(--muted); text-align: right; }
.heating-curve9-warning { margin: 0; padding: 9px 14px; border-top: 1px solid #efb8b1; background: var(--red-soft); color: var(--red); font-size: 9px; font-weight: 800; line-height: 1.45; }
.heating-curve9-warning[hidden] { display: none; }
.weekday-form { border: 1px solid #dce7ec; border-radius: 9px; background: #fff; }
.weekday-selector { padding: 11px; display: grid; grid-template-columns: minmax(160px, 1fr) auto auto; align-items: center; gap: 12px; }
.weekday-selector strong, .weekday-selector small { display: block; }
.weekday-selector strong { font-size: 10px; }
.weekday-selector small { margin-top: 2px; color: var(--muted); font-family: Consolas, monospace; font-size: 7px; }
.weekday-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.weekday-chips label { cursor: pointer; }
.weekday-chips input { width: 1px; height: 1px; position: absolute; opacity: 0; pointer-events: none; }
.weekday-chips span { min-width: 31px; padding: 7px 8px; display: block; border: 1px solid #cedce2; border-radius: 99px; background: #f7fafb; color: #58707b; font-size: 9px; font-weight: 850; text-align: center; }
.weekday-chips input:checked + span { border-color: #70b995; background: var(--green-soft); color: var(--green); }
.weekday-chips input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.weekday-chips input:disabled + span { cursor: not-allowed; opacity: .55; }
.comfort-form { gap: 12px; background: #f7fafb; }
.comfort-config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 9px; align-items: end; }
.comfort-config-head { padding: 10px; border: 1px solid #dce7ec; border-radius: 9px; background: #fff; }
.comfort-window-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.comfort-window { overflow: hidden; border: 1px solid #dce7ec; border-radius: 9px; background: #fff; }
.comfort-window > .comfort-config-grid { padding: 10px; }
.comfort-time-field, .comfort-date-field { min-width: 0; display: block; }
.comfort-date-field > span { display: block; min-height: 16px; font-size: 9px; font-weight: 750; }
.comfort-date-field > small { display: block; margin: 1px 0 4px; overflow: hidden; color: var(--muted); font-family: Consolas, monospace; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.comfort-date-field > input[type="date"] { width: 100%; height: 34px; font-size: 11px; font-weight: 750; }
.holiday-home-form { padding: 11px; border: 1px solid #dce7ec; border-radius: 9px; background: #fff; }

.virtual-display-section { border-top: 1px solid var(--line); }
.virtual-display-title h3 { display: flex; align-items: center; gap: 8px; }
.virtual-display-title h3 span, .virtual-display-beta-note > span { padding: 3px 7px; border-radius: 99px; background: #f5d36a; color: #574300; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.virtual-display-title > em { color: var(--green); font-size: 9px; font-style: normal; font-weight: 850; }
.virtual-display-profile-notice { margin: 0 0 14px; padding: 11px 13px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; border: 1px solid #dfb750; border-radius: 9px; background: #fff8df; color: #614d16; }
.virtual-display-profile-notice strong { font-size: 10px; }
.virtual-display-profile-notice span { font-size: 9px; font-weight: 750; }
.virtual-display-profile-notice p { grid-column: 1 / -1; margin: 0; font-size: 9px; line-height: 1.45; }
.virtual-display-beta { display: grid; grid-template-columns: minmax(520px, 720px) minmax(230px, 1fr); gap: 20px; align-items: start; }
.virtual-display-hardware { max-width: 680px; padding: 26px 28px 18px; border: 4px solid #272323; border-radius: 13px; background: #fff; box-shadow: 0 15px 35px rgb(23 34 41 / 14%); }
.virtual-display-hardware.is-reference-pending { position: relative; border-style: dashed; border-color: #667780; }
.virtual-display-hardware.is-reference-pending::before { content: "FUNKTIONSPROTOTYP"; padding: 3px 8px; position: absolute; z-index: 1; top: -10px; left: 18px; border-radius: 99px; background: #667780; color: #fff; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.virtual-display-screen { overflow: hidden; border: 3px solid #272323; border-radius: 11px; background: #fff; color: #262222; outline: none; }
.virtual-display-screen:focus-visible { box-shadow: 0 0 0 3px rgb(35 35 35 / 24%); }
.virtual-display-viewport { height: 350px; padding: 13px 15px; overflow: auto; scrollbar-color: #393535 transparent; scrollbar-width: thin; }
.controller-home-page { min-height: 320px; position: relative; }
.controller-home-status { height: 36px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.controller-outdoor strong { font-size: 17px; font-weight: 500; }
.controller-status-icons { font-size: 16px; letter-spacing: 3px; }
.controller-house { width: min(430px, 84%); height: 245px; position: relative; margin: -2px auto 0; }
.controller-house svg { width: 100%; height: 100%; display: block; }
.controller-zone { position: absolute; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.controller-zone strong { font-size: 23px; font-weight: 500; }
.controller-zone span { font-size: 17px; }
.controller-zone small { position: absolute; top: -15px; left: 0; font-size: 9px; }
.controller-zone-two { top: 106px; left: 145px; }
.controller-zone-one { top: 177px; left: 135px; }
.controller-zone-water { top: 111px; right: 34px; }
.controller-mode { position: absolute; right: 54px; bottom: 13px; font-size: 9px; }
.controller-home-hint { margin: 2px 0 0; color: #4e4949; font-size: 8px; text-align: center; }
.virtual-display-profile-pending { min-height: 315px; padding: 34px 30px 20px; display: flex; flex-direction: column; align-items: center; color: #2f3d43; text-align: center; }
.virtual-display-profile-pending > span { padding: 4px 9px; border-radius: 99px; background: #e7edf0; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.virtual-display-profile-pending > strong { margin-top: 11px; font-size: 20px; }
.virtual-display-profile-pending > p { max-width: 430px; margin: 7px 0 15px; font-size: 10px; line-height: 1.45; }
.virtual-display-profile-pending dl { width: min(430px, 100%); margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #9ba9af; border-radius: 7px; overflow: hidden; }
.virtual-display-profile-pending dl > div { padding: 9px; background: #f5f7f8; }
.virtual-display-profile-pending dl > div:nth-child(even) { border-left: 1px solid #9ba9af; }
.virtual-display-profile-pending dl > div:nth-child(n + 3) { border-top: 1px solid #9ba9af; }
.virtual-display-profile-pending dt, .virtual-display-profile-pending dd { margin: 0; }
.virtual-display-profile-pending dt { color: #65747b; font-size: 7px; text-transform: uppercase; }
.virtual-display-profile-pending dd { margin-top: 2px; font-size: 12px; font-weight: 800; }
.virtual-display-profile-pending > small { margin-top: 12px; color: #5d6b71; font-family: Consolas, monospace; font-size: 7px; }
.virtual-display-profile-pending > em { margin-top: auto; color: #526168; font-size: 8px; font-style: normal; }
.controller-icon-page h4, .controller-faq-page h4 { margin: 0 0 13px; font-size: 20px; font-weight: 500; text-align: center; }
.controller-icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 25px; padding: 10px 18px; }
.controller-icon-button { min-width: 0; padding: 0; display: grid; justify-items: center; gap: 5px; border: 0; background: transparent; color: #272323; cursor: pointer; }
.controller-icon-button small { max-width: 100%; min-height: 24px; overflow: hidden; font-size: 8px; line-height: 1.25; text-align: center; }
.controller-manual-icon { width: 69px; height: 69px; position: relative; display: block; border: 2px solid #272323; border-radius: 8px; background: #fff; }
.controller-icon-button.is-focused .controller-manual-icon, .controller-icon-button:focus-visible .controller-manual-icon { outline: 5px solid #272323; outline-offset: -2px; }
.controller-manual-icon::before, .controller-manual-icon::after { position: absolute; inset: 0; display: grid; place-items: center; font-size: 35px; line-height: 1; }
.icon-sun .controller-manual-icon::before { content: "☀"; }
.icon-clock .controller-manual-icon::before { content: "◷"; font-size: 43px; }
.icon-curve .controller-manual-icon::before { content: "⌁"; font-size: 44px; transform: rotate(-18deg); }
.icon-curve .controller-manual-icon::after { content: "°"; inset: auto 8px 7px auto; font-size: 22px; }
.icon-tank .controller-manual-icon::before { content: "▯"; font-size: 45px; }
.icon-tank .controller-manual-icon::after { content: "≈"; inset: auto 17px 12px auto; font-size: 23px; }
.icon-tiles .controller-manual-icon::before { content: "▦"; font-size: 42px; }
.icon-status .controller-manual-icon::before { content: "▣"; font-size: 42px; }
.icon-warning .controller-manual-icon::before { content: "△"; font-size: 47px; }
.icon-warning .controller-manual-icon::after { content: "!"; font-size: 25px; }
.icon-help .controller-manual-icon::before { content: "?"; font-size: 38px; }
.virtual-display-menu, .virtual-display-setting-list { display: grid; gap: 0; }
.virtual-display-menu-item, .virtual-display-setting { width: 100%; min-height: 55px; padding: 8px 7px; display: grid; align-items: center; gap: 8px; border: 0; border-bottom: 2px solid #343030; border-radius: 0; background: #fff; color: #272323; text-align: left; cursor: pointer; }
.virtual-display-menu-item { grid-template-columns: minmax(0, 1fr) auto; }
.virtual-display-setting { grid-template-columns: minmax(0, 1fr) minmax(90px, auto) auto; }
.virtual-display-menu-item:hover, .virtual-display-menu-item:focus-visible, .virtual-display-menu-item.is-focused, .virtual-display-setting:hover, .virtual-display-setting:focus-visible, .virtual-display-setting.is-focused { outline: none; box-shadow: inset -5px 0 0 #272323; }
.virtual-display-menu-icon { display: none; }
.virtual-display-menu-item strong, .virtual-display-menu-item small, .virtual-display-setting strong, .virtual-display-setting small { display: block; }
.virtual-display-menu-item strong, .virtual-display-setting strong { font-size: 13px; font-weight: 500; }
.virtual-display-menu-item small, .virtual-display-setting small { margin-top: 2px; overflow: hidden; color: #5c5757; font-family: inherit; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.virtual-display-menu-item > i, .virtual-display-setting > i { color: #272323; font-size: 21px; font-style: normal; }
.virtual-display-setting > em { color: #272323; font-size: 12px; font-style: normal; font-weight: 600; text-align: right; }
.virtual-display-setting > em.missing { color: #777; }
.virtual-display-page-head { margin-bottom: 6px; padding: 0 6px 9px; border: 0; border-radius: 0; background: #fff; text-align: center; }
.virtual-display-page-head span, .virtual-display-page-head strong { display: block; }
.virtual-display-page-head span { color: #5b5656; font-size: 8px; }
.virtual-display-page-head strong { margin-top: 2px; font-size: 18px; font-weight: 500; }
.virtual-display-empty { margin: 18px 0; padding: 14px; border: 1px dashed #4c4747; border-radius: 6px; color: #4e4949; font-size: 10px; text-align: center; }
.virtual-display-current-card { padding: 10px; border: 2px solid #312d2d; border-radius: 7px; background: #fff; text-align: center; }
.virtual-display-current-card span, .virtual-display-current-card strong, .virtual-display-current-card small { display: block; }
.virtual-display-current-card span { color: #5c5757; font-size: 8px; }
.virtual-display-current-card strong { margin: 3px 0; color: #272323; font-size: 20px; font-weight: 500; }
.virtual-display-current-card small { color: #625d5d; font-family: Consolas, monospace; font-size: 7px; }
.virtual-display-edit-form { display: grid; gap: 10px; }
.virtual-display-edit-form > .control-field { padding: 9px; border: 2px solid #312d2d; border-radius: 7px; background: #fff; }
.virtual-display-edit-form > .control-field > span { font-size: 10px; }
.virtual-display-edit-form > .control-field select, .virtual-display-edit-form > .control-field input { height: 39px; border-color: #4a4545; background: #fff; font-size: 12px; font-weight: 700; }
.virtual-display-write-note { padding: 7px 8px; display: grid; gap: 2px; border: 1px solid #5b5656; border-radius: 5px; background: #f3f3f3; color: #383333; font-size: 8px; line-height: 1.35; }
.virtual-display-write-note.elevated, .virtual-display-write-note.critical { background: #e8e8e8; color: #272323; }
.virtual-display-write-note strong { font-size: 9px; }
.virtual-display-edit-form .control-submit { justify-self: stretch; border-color: #272323; background: #272323; color: #fff; }
.virtual-display-device-info { margin-bottom: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.virtual-display-device-info > div { padding: 8px; border: 1px solid #4e4949; border-radius: 5px; background: #fff; }
.virtual-display-device-info span, .virtual-display-device-info strong { display: block; }
.virtual-display-device-info span { color: #5e5959; font-size: 7px; }
.virtual-display-device-info strong { margin-top: 2px; font-size: 9px; }
.virtual-display-info-list { display: grid; gap: 0; border: 1px solid #4e4949; border-radius: 5px; overflow: hidden; }
.virtual-display-info-list > div { padding: 7px 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #fff; }
.virtual-display-info-list > div + div { border-top: 1px solid #4e4949; }
.virtual-display-info-list span, .virtual-display-info-list small { display: block; }
.virtual-display-info-list span { font-size: 8px; font-weight: 750; }
.virtual-display-info-list small { margin-top: 1px; color: #615c5c; font-family: Consolas, monospace; font-size: 6px; }
.virtual-display-info-list strong { font-size: 9px; text-align: right; }
.controller-keys { height: 180px; position: relative; }
.controller-keys button { position: absolute; padding: 0; border: 0; background: transparent; color: #272323; cursor: pointer; }
.controller-keys button:focus-visible { outline: 2px solid #272323; outline-offset: 4px; }
.controller-menu-key { width: 54px; height: 54px; top: 71px; left: 6%; font-size: 31px; }
.controller-power-key { width: 54px; height: 54px; top: 71px; right: 6%; font-size: 31px; }
.controller-dpad { width: 250px; height: 160px; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); }
.controller-dpad button { width: 55px; height: 55px; font-size: 35px; line-height: 1; }
.controller-dpad .key-up { top: 0; left: 98px; }
.controller-dpad .key-left { top: 54px; left: 28px; }
.controller-dpad .key-ok { top: 57px; left: 100px; }
.controller-dpad .key-right { top: 54px; right: 28px; }
.controller-dpad .key-down { bottom: 0; left: 98px; }
.controller-dpad .key-ok span { width: 29px; height: 29px; display: block; border: 3px solid #272323; border-radius: 50%; }
.controller-faq-page { min-height: 310px; display: grid; align-content: center; justify-items: center; text-align: center; }
.controller-faq-code { width: 82px; display: grid; grid-template-columns: repeat(3, 22px); gap: 7px; }
.controller-faq-code i { width: 22px; height: 22px; border: 7px solid #272323; border-radius: 3px; }
.controller-faq-code i:nth-child(2n) { border-width: 4px; }
.controller-faq-page p { max-width: 340px; margin: 18px 0 4px; font-size: 11px; }
.controller-faq-page small { color: #625d5d; font-size: 8px; }
.virtual-display-beta-note { padding: 16px; border: 1px solid #d7e1e5; border-radius: 12px; background: #f7fafb; }
.virtual-display-beta-note h4 { margin: 10px 0 7px; font-size: 13px; }
.virtual-display-beta-note p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.virtual-display-beta-note ul { margin: 11px 0 0; padding-left: 17px; color: #46606b; font-size: 9px; line-height: 1.7; }

.telemetry-section { overflow: hidden; }
.telemetry-title { align-items: end; }
.telemetry-title > div:first-child h3 { font-size: 16px; }
.telemetry-title > div:first-child small { display: block; margin-top: 4px; }
.telemetry-title .section-title-actions { align-items: end; }
.telemetry-window-label { gap: 3px; }
.telemetry-window-label span { font-size: 8px; text-transform: uppercase; }
.telemetry-window-label select { min-width: 166px; height: 34px; }
.telemetry-refresh { height: 34px; border-color: #b9d9eb; background: #f3faff; color: var(--blue-dark); font-size: 9px; font-weight: 850; }
.telemetry-note { margin-bottom: 12px; padding: 8px 10px; border-left: 3px solid var(--blue); background: var(--blue-soft); color: var(--blue-dark); font-size: 9px; line-height: 1.45; }
.telemetry-sample-warning { margin: -4px 0 12px; padding: 8px 10px; border-radius: 7px; background: var(--orange-soft); color: #774900; font-size: 9px; font-weight: 750; }
.telemetry-sample-warning strong, .telemetry-sample-warning span { display: block; }
.telemetry-sample-warning span { margin-top: 2px; font-weight: 600; line-height: 1.45; }
.telemetry-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; align-items: start; }
.telemetry-picker, .telemetry-chart-card { min-width: 0; border: 1px solid #dbe5e9; border-radius: 10px; background: #fff; overflow: hidden; }
.telemetry-chart-card { position: relative; }
.telemetry-picker { position: sticky; top: 0; }
.telemetry-picker > header { min-height: 52px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #e4ebee; background: #f6f9fa; }
.telemetry-picker > header strong, .telemetry-picker > header small { display: block; }
.telemetry-picker > header strong { font-size: 10px; }
.telemetry-picker > header small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.telemetry-picker > header > div:last-child { display: flex; gap: 4px; }
.telemetry-picker > header button { padding: 4px 6px; border: 1px solid #c9d7dd; border-radius: 5px; background: #fff; color: var(--blue-dark); font-size: 8px; font-weight: 800; cursor: pointer; }
.telemetry-series-search { width: calc(100% - 16px); height: 32px; margin: 8px; font-size: 9px; }
.telemetry-series-list { max-height: 570px; padding: 0 8px 9px; overflow: auto; }
.telemetry-series-list > p { margin: 0; padding: 22px 8px; color: var(--muted); font-size: 9px; line-height: 1.5; text-align: center; }
.telemetry-series-group { margin: 0; padding: 0; border: 0; }
.telemetry-series-group + .telemetry-series-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e4ebee; }
.telemetry-series-group legend { width: 100%; padding: 4px 3px; display: flex; justify-content: space-between; color: #526c78; font-size: 8px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.telemetry-series-group legend em { color: var(--muted); font-style: normal; }
.telemetry-series-option { min-height: 43px; padding: 5px 3px; display: grid; grid-template-columns: auto 13px minmax(0, 1fr); align-items: center; gap: 7px; border-radius: 6px; color: var(--ink); cursor: pointer; }
.telemetry-series-option:hover { background: #f2f8fb; }
.telemetry-series-option input { width: 15px; height: 15px; margin: 0; padding: 0; accent-color: var(--series-color); }
.telemetry-series-option > i { width: 12px; height: 3px; border-radius: 99px; background: var(--series-color); }
.telemetry-series-option strong, .telemetry-series-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-series-option strong { color: var(--ink); font-size: 9px; }
.telemetry-series-option small { margin-top: 2px; color: var(--muted); font-family: Consolas, monospace; font-size: 7px; }
.telemetry-chart-summary { min-height: 52px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e4ebee; background: #f6f9fa; }
.telemetry-chart-summary span { font-size: 10px; font-weight: 850; }
.telemetry-chart-summary small { color: var(--muted); font-size: 8px; text-align: right; }
.telemetry-canvas-wrap { min-height: 440px; position: relative; overflow-x: auto; background: #fff; }
.telemetry-canvas { width: 100%; min-width: 520px; display: block; touch-action: pan-y; cursor: crosshair; }
.telemetry-chart-empty { min-height: 440px; position: absolute; inset: 53px 0 0; display: grid; place-items: center; background: rgb(255 255 255 / 90%); color: var(--muted); font-size: 10px; font-weight: 750; text-align: center; pointer-events: none; }
.telemetry-chart-empty[hidden] { display: none; }
.telemetry-tooltip { width: min(260px, calc(100% - 16px)); max-height: 330px; padding: 9px 10px; position: absolute; z-index: 3; border: 1px solid #b9cbd3; border-radius: 8px; background: rgb(255 255 255 / 96%); box-shadow: 0 10px 30px rgb(20 44 58 / 18%); overflow: auto; pointer-events: none; }
.telemetry-tooltip > strong { display: block; margin-bottom: 6px; font-size: 9px; }
.telemetry-tooltip > span { min-height: 24px; display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 6px; border-top: 1px solid #edf1f3; }
.telemetry-tooltip > span i { width: 8px; height: 3px; border-radius: 99px; background: var(--series-color); }
.telemetry-tooltip > span em { overflow: hidden; color: #4f6873; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-tooltip > span b { font-size: 8px; white-space: nowrap; }
.telemetry-tooltip > small { display: block; margin-top: 6px; color: var(--muted); font-size: 7px; }

.history-list { display: grid; gap: 8px; }
.history-entry { padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; border: 1px solid #dfe7ea; border-left: 4px solid #9baab0; border-radius: 7px; background: #fbfcfd; }
.history-entry.accepted { border-left-color: var(--green); }
.history-entry.failed { border-left-color: var(--red); }
.history-entry.pending { border-left-color: var(--orange); }
.history-entry strong { display: block; font-size: 10px; }
.history-entry small { color: var(--muted); font-size: 8px; }
.history-entry > span { color: var(--muted); font-size: 9px; font-weight: 800; }
.history-entry ul { grid-column: 1 / -1; margin: 3px 0 0; padding-left: 17px; color: #475f6a; font-size: 9px; line-height: 1.5; }

.project-detail-dialog { width: min(1540px, calc(100vw - 24px)); height: calc(100vh - 24px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 100px rgb(13 42 57 / 40%); overflow: hidden; }
.project-detail-dialog::backdrop { background: rgb(13 35 47 / 58%); backdrop-filter: blur(2px); }
.project-detail-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.project-detail-header { min-height: 88px; padding: 17px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #eaf7fd, #fbfdfe); }
.project-detail-header > div { min-width: 0; display: flex; align-items: flex-start; gap: 13px; }
.project-detail-header h2 { margin: 3px 0; overflow: hidden; color: var(--ink); font-size: 23px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.project-detail-header small { display: block; color: var(--muted); font-size: 10px; }
.project-detail-close { width: 38px; height: 38px; flex: none; border: 0; border-radius: 8px; background: #dfeaf0; color: var(--muted); font-size: 25px; line-height: 1; cursor: pointer; }
.project-detail-close:hover { background: #d2e2e9; color: var(--ink); }
.project-detail-layout { min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); }
.project-device-sidebar { min-height: 0; padding: 16px; border-right: 1px solid var(--line); background: #f8fafb; overflow: auto; }
.project-sidebar-title { margin-bottom: 11px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.project-sidebar-title span { font-size: 12px; font-weight: 850; }
.project-sidebar-title small { color: var(--muted); font-size: 9px; }
.project-detail-content { min-height: 0; padding: 0 24px 40px; overflow: auto; }
.project-detail-content .detail-section { padding: 22px 0; }
.project-detail-content .realtime-head h3 { font-size: 19px; }
.project-detail-content .realtime-head p { font-size: 10px; }
.project-detail-content .metric-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.project-detail-content .metric-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
.project-detail-content .metric-highlight { padding: 13px; }
.project-detail-content .metric-highlight strong { font-size: 18px; }
.project-detail-content .metric-row strong { max-width: 280px; }
.project-detail-content .control-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.project-detail-content .control-category-body { padding: 13px; }
.project-detail-content .history-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.control-dialog { width: min(560px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 13px; color: var(--ink); box-shadow: 0 30px 90px rgb(13 42 57 / 35%); }
.control-dialog::backdrop { background: rgb(13 35 47 / 58%); backdrop-filter: blur(2px); }
.dialog-card { margin: 0; }
.dialog-card > header { padding: 18px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: #f5fafc; }
.dialog-card h2 { margin: 2px 0 0; font-size: 19px; }
.dialog-close { width: 32px; height: 32px; border: 0; border-radius: 7px; background: #e7eef1; color: var(--muted); font-size: 22px; cursor: pointer; }
.dialog-body { padding: 20px; }
.dialog-body > p { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.confirmation-summary { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.confirmation-summary div { padding: 9px 11px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; background: #f8fafb; }
.confirmation-summary span { color: var(--muted); font-size: 10px; }
.confirmation-summary strong { overflow-wrap: anywhere; font-size: 11px; text-align: right; }
.dialog-warning { margin-top: 14px; padding: 11px; border-radius: 8px; background: var(--orange-soft); color: #7d4c00; font-size: 11px; font-weight: 750; }
.dialog-warning.critical { background: var(--red-soft); color: var(--red); }
.control-execution-progress { margin-top: 14px; padding: 12px; display: grid; gap: 3px; border: 1px solid #efcf99; border-radius: 8px; background: #fff8ea; color: #704400; }
.control-execution-progress strong { font-size: 11px; }
.control-execution-progress span { font-size: 10px; line-height: 1.45; }
.control-verification-list { margin: 12px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.control-verification-list li { padding: 9px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafb; }
.control-verification-list strong, .control-verification-list span { display: block; }
.control-verification-list strong { font-family: Consolas, monospace; font-size: 9px; }
.control-verification-list span { grid-column: 1; color: var(--muted); font-size: 9px; }
.control-verification-list em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 9px; font-style: normal; font-weight: 850; }
.control-verification-list em.confirmed { color: var(--green); }
.control-verification-list em.pending { color: var(--orange); }
.confirmation-phrase { margin-top: 15px; color: var(--ink); font-size: 11px; }
.confirmation-phrase input { margin-top: 4px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dialog-footer { padding: 14px 20px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); background: #fafcfd; }
.button-danger { border-color: var(--red); background: var(--red); color: #fff; }
.button-danger:hover { background: #942f29; }
.dialog-success { padding: 15px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 800; }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 1fr; }
  .detail-panel { position: static; max-height: none; }
  .detail-empty { min-height: 260px; }
  .table-wrap { max-height: 550px; }
  .project-detail-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .project-detail-content .metric-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-detail-content .control-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telemetry-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .timer-schedule-builder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekly-program-switch-row { grid-template-columns: 1fr; }
  .weekday-selector { grid-template-columns: 1fr; }
  .weekday-selector .control-submit { justify-self: start; }
  .heating-curve9-layout { grid-template-columns: 1fr; }
  .virtual-display-beta { grid-template-columns: 1fr; }
  .virtual-display-hardware { max-width: 760px; }
}

@media (max-width: 760px) {
  .site-header { min-height: 66px; padding: 10px 16px; }
  .brand-copy small { display: none; }
  .site-header nav { gap: 12px; }
  .site-header nav a { font-size: 11px; }
  .shell { padding-top: 22px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .head-actions { width: 100%; justify-content: space-between; }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .cop-overview > summary { align-items: flex-start; }
  .cop-overview > summary em { display: none; }
  .cop-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cop-overview-toolbar { align-items: stretch; flex-direction: column; }
  .cop-overview-toolbar .button { width: 100%; }
  .stat { border-bottom: 1px solid var(--line); }
  .stat:nth-child(even) { border-right: 0; }
  .stat:nth-last-child(-n + 2) { border-bottom: 0; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .result-count { margin-left: 0; padding: 0; text-align: left; }
  .table-wrap { max-height: 500px; }
  .detail-meta { grid-template-columns: 1fr; }
  .control-fields { grid-template-columns: 1fr; }
  .disinfection-schedule { grid-template-columns: 1fr; }
  .timer-card > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .timer-toggle { grid-column: 1 / -1; }
  .timer-schedule-builder { grid-template-columns: 1fr; }
  .comfort-window-list { grid-template-columns: 1fr; }
  .weekly-status-form { grid-template-columns: 1fr; }
  .weekly-status-form .control-submit { justify-self: start; }
  .weekday-chips { justify-content: space-between; }
  .weekday-chips span { min-width: 34px; }
  .heating-curve9-head, .heating-curve9-footer { align-items: stretch; flex-direction: column; }
  .heating-curve9-reset { width: 100%; }
  .heating-curve9-layout { padding: 9px; }
  .heating-curve9-values { grid-template-columns: 1fr; }
  .heating-curve9-rule { text-align: left; }
  .virtual-display-hardware { padding: 10px 11px 4px; border-width: 2px; border-radius: 9px; }
  .virtual-display-viewport { height: 305px; padding: 8px; }
  .controller-home-page { min-height: 285px; }
  .controller-house { width: 98%; height: 220px; }
  .controller-zone strong { font-size: 18px; }
  .controller-zone-two { top: 98px; left: 34%; }
  .controller-zone-one { top: 162px; left: 32%; }
  .controller-zone-water { top: 101px; right: 5%; }
  .controller-icon-grid { gap: 17px 10px; padding: 8px 3px; }
  .controller-manual-icon { width: 53px; height: 53px; }
  .controller-manual-icon::before, .controller-manual-icon::after { font-size: 29px; }
  .controller-keys { height: 145px; transform: scale(.86); transform-origin: top center; }
  .virtual-display-beta-note { padding: 12px; }
  .parameter-refresh { align-items: stretch; flex-direction: column; }
  .parameter-refresh-button { width: 100%; }
  .fault-service-body footer { align-items: stretch; flex-direction: column; }
  .fault-service-body footer a { justify-content: center; }
  .confirmation-summary div { grid-template-columns: 1fr; gap: 3px; }
  .confirmation-summary strong { text-align: left; }
  .project-detail-dialog { width: 100vw; height: 100vh; border-radius: 0; }
  .project-detail-header { min-height: 78px; padding: 13px 14px; }
  .project-detail-header h2 { font-size: 18px; }
  .project-detail-layout { display: block; overflow: auto; }
  .project-device-sidebar { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
  .project-detail-content { overflow: visible; padding: 0 14px 30px; }
  .project-detail-content .metric-highlights, .project-detail-content .metric-groups, .project-detail-content .history-list { grid-template-columns: 1fr; }
  .project-detail-content .control-fields { grid-template-columns: 1fr; }
  .telemetry-title, .telemetry-title .section-title-actions, .telemetry-chart-summary { align-items: stretch; flex-direction: column; }
  .telemetry-title .section-title-actions { width: 100%; }
  .telemetry-window-label select, .telemetry-refresh { width: 100%; }
  .telemetry-layout { grid-template-columns: 1fr; }
  .telemetry-picker { position: static; }
  .telemetry-series-list { max-height: 300px; }
  .telemetry-chart-summary small { text-align: left; }
}