:root {
  --bg: #07111b;
  --panel: #0d1c29;
  --panel-2: #112534;
  --line: rgba(151, 190, 209, .15);
  --text: #edf8fb;
  --muted: #8da8b6;
  --cyan: #35c9da;
  --green: #49d49d;
  --amber: #ffbf5f;
  --red: #ff667a;
  --blue: #5fa8ff;
  --shadow: 0 22px 60px rgba(0,0,0,.28);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% -10%, rgba(53,201,218,.13), transparent 32%), var(--bg); color: var(--text); font-family: "Segoe UI", Arial, sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px clamp(18px,4vw,54px); border-bottom: 1px solid var(--line); background: rgba(7,17,27,.86); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand h1 { font-size: 20px; margin: 0; letter-spacing: .02em; }
.brand p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 10px; background: linear-gradient(145deg,#163d4d,#0d2634); border: 1px solid rgba(83,214,228,.28); box-shadow: inset 0 0 18px rgba(53,201,218,.08); }
.brand-mark span { width: 5px; border-radius: 4px; background: var(--cyan); box-shadow: 0 0 10px rgba(53,201,218,.45); }
.brand-mark span:nth-child(1) { height: 10px; }.brand-mark span:nth-child(2) { height: 20px; }.brand-mark span:nth-child(3) { height: 15px; }
.top-actions { display: flex; gap: 10px; }
.button { border: 0; border-radius: 11px; padding: 10px 15px; cursor: pointer; font-weight: 650; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }.button:active { transform: translateY(0); }.button:disabled { opacity: .5; cursor: wait; transform: none; }
.button.primary { background: var(--cyan); color: #041319; box-shadow: 0 8px 24px rgba(53,201,218,.18); }
.button.secondary { background: #183444; border: 1px solid rgba(141,190,211,.18); }
.button.ghost { background: transparent; border: 1px solid var(--line); color: #c5d9e2; }
.telegram-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
main { width: min(1480px, calc(100% - 36px)); margin: 28px auto 70px; }
.connection-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(110deg, rgba(17,37,52,.86), rgba(11,28,41,.75)); box-shadow: var(--shadow); }
.connection-copy { display: flex; align-items: center; gap: 12px; }.connection-copy div { display: grid; gap: 3px; }.connection-copy span:not(.status-dot), .last-update span { color: var(--muted); font-size: 13px; }
.status-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 6px rgba(141,168,182,.08); }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 6px rgba(73,212,157,.09), 0 0 16px rgba(73,212,157,.45); }.status-dot.error { background: var(--red); }.status-dot.connecting,.status-dot.starting { background: var(--amber); animation: pulse 1.3s infinite; }
.last-update { text-align: left; display: grid; gap: 3px; }.last-update strong { font-variant-numeric: tabular-nums; }
.setup-banner { margin-top: 16px; padding: 18px 20px; border: 1px solid rgba(255,191,95,.28); border-radius: var(--radius); background: rgba(255,191,95,.07); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.setup-banner p { margin: 4px 0 0; color: #cdbb9e; font-size: 14px; }
.summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 18px 0 34px; }
.summary-card { min-height: 104px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(13,28,41,.86); display: flex; align-items: center; gap: 15px; }
.summary-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 20px; background: rgba(95,168,255,.11); color: var(--blue); }.summary-card.normal .summary-icon { color: var(--green); background: rgba(73,212,157,.1); }.summary-card.defrost .summary-icon { color: var(--cyan); background: rgba(53,201,218,.1); }.summary-card.alert .summary-icon { color: var(--red); background: rgba(255,102,122,.1); }
.summary-card div { display: grid; gap: 3px; }.summary-card strong { font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }.summary-card div span { color: var(--muted); font-size: 13px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }.section-heading h2 { margin: 0; font-size: 19px; }.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }.section-heading.compact { margin-bottom: 14px; }
.display-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }.search-box { width: min(320px,100%); display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); background: rgba(13,28,41,.82); border-radius: 11px; color: var(--muted); }.search-box input { width: 100%; height: 42px; border: 0; outline: 0; background: transparent; color: var(--text); }
.device-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 15px; min-height: 180px; }
.device-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg,rgba(17,37,52,.96),rgba(11,27,39,.96)); padding: 18px; min-height: 226px; box-shadow: 0 13px 35px rgba(0,0,0,.16); transition: transform .18s ease,border-color .18s ease; }
.device-card:hover { transform: translateY(-2px); border-color: rgba(141,190,211,.3); }.device-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background: var(--muted); opacity:.65; }.device-card.state-normal::before { background:var(--green); }.device-card.state-defrost::before,.device-card.state-recovery::before { background:var(--cyan); }.device-card.state-alert::before,.device-card.state-offline::before { background:var(--red); }.device-card.state-high_pending::before,.device-card.state-offline_pending::before { background:var(--amber); }
.device-card.is-hidden { opacity:.58; border-style:dashed; }.hidden-indicator { display:block; margin-top:4px; color:var(--amber); font-size:10px; }
.device-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.device-card h3 { margin:0; font-size:17px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.device-address { color:var(--muted); font-size:12px; margin-top:4px; }.state-badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 9px; background:rgba(141,168,182,.09); color:#b7cad3; font-size:11px; white-space:nowrap; }.state-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }.state-normal .state-badge { color:var(--green); background:rgba(73,212,157,.09); }.state-defrost .state-badge,.state-recovery .state-badge { color:var(--cyan); background:rgba(53,201,218,.09); }.state-alert .state-badge,.state-offline .state-badge { color:var(--red); background:rgba(255,102,122,.09); }.state-high_pending .state-badge,.state-offline_pending .state-badge { color:var(--amber); background:rgba(255,191,95,.09); }
.temperature-area { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin:21px 0 17px; min-height:52px; }.temperature-row { display:flex; align-items:baseline; gap:5px; direction:ltr; flex:0 0 auto; }.temperature { font-size:48px; line-height:1; letter-spacing:-.04em; font-weight:720; font-variant-numeric:tabular-nums; }.temperature-unit { color:var(--muted); font-size:17px; }.compact-readings { display:grid; gap:4px; min-width:105px; max-width:145px; }.compact-reading { display:flex; align-items:center; justify-content:space-between; gap:7px; padding:3px 6px; border:1px solid var(--line); border-radius:6px; background:rgba(3,13,21,.3); color:var(--muted); font-size:9px; line-height:1.15; }.compact-reading span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.compact-reading strong { color:#b8cbd4; direction:ltr; font-size:10px; font-variant-numeric:tabular-nums; white-space:nowrap; }.compact-reading.selected { border-color:rgba(53,201,218,.35); background:rgba(53,201,218,.07); }.compact-reading.selected strong { color:var(--cyan); }.device-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.meta-item { padding:9px 10px; border-radius:10px; background:rgba(3,13,21,.34); }.meta-item span { display:block; color:var(--muted); font-size:10px; }.meta-item strong { display:block; font-size:12px; margin-top:3px; }.device-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }.monitor-indicator { font-size:12px; color:var(--muted); }.monitor-indicator.enabled { color:var(--green); }.card-actions { display:flex; align-items:center; gap:7px; }.order-actions { display:flex; direction:ltr; gap:3px; }.order-actions button { width:27px; height:27px; padding:0; border:1px solid var(--line); border-radius:7px; background:rgba(141,168,182,.07); color:#bfd1da; cursor:pointer; }.order-actions button:hover { border-color:rgba(53,201,218,.45); color:var(--cyan); }.order-actions button:disabled { opacity:.45; cursor:wait; }.card-settings { border:0; background:transparent; color:var(--cyan); cursor:pointer; padding:5px; font-weight:650; }
  .hourly-temperatures { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin:0 0 12px; direction:ltr; }.hourly-reading { display:grid; justify-items:center; gap:2px; padding:5px 2px; border:1px solid var(--line); border-radius:7px; background:rgba(3,13,21,.3); color:inherit; font-family:inherit; font-variant-numeric:tabular-nums; cursor:pointer; }.hourly-reading:hover { border-color:rgba(53,201,218,.45); }.hourly-reading:disabled { cursor:default; opacity:.6; }.hourly-reading span { color:var(--muted); font-size:8px; }.hourly-reading strong { color:#c9dce4; font-size:10px; }.hourly-reading.high { border-color:rgba(255,102,122,.55); background:rgba(255,102,122,.12); }.hourly-reading.high span,.hourly-reading.high strong { color:var(--red); }.hourly-temperatures.empty { display:grid; place-items:center; min-height:54px; color:var(--muted); font-size:10px; }.hourly-temperatures.detailed { grid-template-columns:repeat(6,1fr); gap:7px; margin-bottom:16px; }.hourly-temperatures.detailed .hourly-reading { padding:9px 5px; }.hourly-temperatures.detailed .hourly-reading span { font-size:10px; }.hourly-temperatures.detailed .hourly-reading strong { font-size:13px; color:var(--cyan); }.hourly-temperatures.detailed .hourly-reading.high span,.hourly-temperatures.detailed .hourly-reading.high strong { color:var(--red); }.history-heading { margin:14px 0 8px; font-size:12px; }
.empty-state { grid-column:1/-1; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); border:1px dashed var(--line); border-radius:var(--radius); }.empty-state strong { color:#c8d9e1; }.loader { width:28px; height:28px; border:3px solid rgba(53,201,218,.16); border-top-color:var(--cyan); border-radius:50%; animation:spin .8s linear infinite; margin-bottom:5px; }
.events-section { margin-top:38px; }.event-list { border:1px solid var(--line); border-radius:var(--radius); background:rgba(13,28,41,.7); overflow:hidden; }.event-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--line); }.event-row:last-child { border-bottom:0; }.event-symbol { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(95,168,255,.1); color:var(--blue); }.event-row.alert .event-symbol { background:rgba(255,102,122,.1); color:var(--red); }.event-row.recovery .event-symbol { background:rgba(73,212,157,.1); color:var(--green); }.event-copy strong { display:block; font-size:13px; }.event-copy span { display:block; color:var(--muted); font-size:12px; margin-top:3px; }.event-time { color:var(--muted); font-size:11px; direction:ltr; }.event-empty { padding:28px; text-align:center; color:var(--muted); }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,6,10,.7); backdrop-filter:blur(5px); z-index:40; }.modal { position:fixed; z-index:50; width:min(690px,calc(100% - 28px)); max-height:calc(100vh - 34px); overflow:auto; inset:50% auto auto 50%; transform:translate(-50%,-50%); background:#0d1c29; border:1px solid rgba(141,190,211,.2); border-radius:22px; box-shadow:0 32px 90px rgba(0,0,0,.58); padding:22px; }.modal.small { width:min(590px,calc(100% - 28px)); }.modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }.modal-header h2 { margin:0; font-size:20px; }.modal-header p { margin:5px 0 0; color:var(--muted); font-size:13px; }.icon-button { width:34px; height:34px; border:1px solid var(--line); border-radius:10px; background:transparent; cursor:pointer; font-size:22px; color:var(--muted); }.form-section { padding:16px 0; border-top:1px solid var(--line); }.form-section h3 { margin:0 0 13px; font-size:14px; }.form-grid { display:grid; gap:12px; }.form-grid.two { grid-template-columns:1fr 1fr; }.form-grid.three { grid-template-columns:1.5fr .7fr 1fr; }.modal label { display:grid; gap:6px; margin-bottom:12px; }.modal label>span:first-child { color:#bfd1da; font-size:12px; }.modal input:not([type=checkbox]) { width:100%; height:42px; border:1px solid var(--line); border-radius:10px; background:#081722; color:var(--text); padding:0 11px; outline:0; }.modal input:focus { border-color:rgba(53,201,218,.58); box-shadow:0 0 0 3px rgba(53,201,218,.08); }.modal small { color:var(--muted); font-size:10px; }.section-toggle { display:flex; justify-content:space-between; align-items:center; gap:16px; }.section-toggle h3 { margin-bottom:4px; }.section-toggle p { color:var(--muted); margin:0; font-size:12px; }.switch { display:block!important; margin:0!important; }.switch input { position:absolute; opacity:0; pointer-events:none; }.switch span { display:block; width:44px; height:24px; border-radius:999px; background:#243a47; position:relative; cursor:pointer; transition:.18s ease; }.switch span::after { content:""; position:absolute; width:18px; height:18px; top:3px; right:3px; border-radius:50%; background:#9fb3bd; transition:.18s ease; }.switch input:checked+span { background:rgba(53,201,218,.35); }.switch input:checked+span::after { right:23px; background:var(--cyan); }.monitor-toggle { border:1px solid var(--line); border-radius:13px; padding:13px; margin-bottom:15px; background:rgba(5,16,24,.32); }.monitor-toggle strong { font-size:13px; }.logic-note { margin-top:4px; padding:13px 14px; border:1px solid rgba(53,201,218,.17); border-radius:12px; background:rgba(53,201,218,.05); }.logic-note strong { font-size:12px; color:var(--cyan); }.logic-note p { color:#aac1cc; font-size:12px; line-height:1.65; margin:5px 0 0; }.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }.form-error { padding:10px 12px; color:#ffd2d8; background:rgba(255,102,122,.09); border:1px solid rgba(255,102,122,.2); border-radius:10px; font-size:12px; }.toast { position:fixed; z-index:80; bottom:24px; left:24px; max-width:min(420px,calc(100% - 40px)); padding:13px 16px; color:#eafff7; background:#164333; border:1px solid rgba(73,212,157,.3); border-radius:12px; box-shadow:var(--shadow); }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes pulse { 50% { opacity:.45; } }
@media (max-width:900px) { .summary-grid { grid-template-columns:1fr 1fr; }.top-actions .ghost { display:none; } }
@media (max-width:620px) { .topbar { padding:13px 16px; min-height:72px; }.brand p { display:none; }.button { padding:9px 11px; font-size:12px; } main { width:min(100% - 24px,1480px); margin-top:16px; }.connection-panel { align-items:flex-start; }.last-update { min-width:92px; }.summary-grid { gap:9px; margin:12px 0 28px; }.summary-card { min-height:82px; padding:13px; }.summary-icon { width:35px; height:35px; }.summary-card strong { font-size:22px; }.summary-card div span { font-size:11px; }.section-heading:not(.compact) { align-items:stretch; flex-direction:column; }.display-tools,.search-box { width:100%; }.display-tools { justify-content:stretch; }.display-tools .button { width:100%; }.device-grid { grid-template-columns:1fr; }.device-card { min-height:218px; }.setup-banner { align-items:flex-start; flex-direction:column; }.form-grid.two,.form-grid.three { grid-template-columns:1fr; gap:0; }.modal { padding:18px; max-height:calc(100vh - 16px); width:calc(100% - 16px); border-radius:18px; }.event-row { grid-template-columns:auto 1fr; }.event-time { grid-column:2; }.temperature { font-size:44px; }.temperature-area { justify-content:space-between; }.compact-readings { min-width:100px; } }

.modal select { width:100%; height:42px; border:1px solid var(--line); border-radius:10px; background:#081722; color:var(--text); padding:0 11px; outline:0; }
.modal select:focus { border-color:rgba(53,201,218,.58); box-shadow:0 0 0 3px rgba(53,201,218,.08); }
.modal select option:disabled { color:#526b77; }
.sensor-readings { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin:-3px 0 15px; }
.sensor-reading { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:rgba(5,16,24,.32); color:inherit; text-align:inherit; cursor:pointer; }
.sensor-reading span { display:block; color:var(--muted); font-size:10px; }
.sensor-reading strong { display:block; margin-top:3px; direction:ltr; text-align:right; font-size:13px; }
.sensor-reading.missing { opacity:.45; }
.sensor-reading.selected { border-color:rgba(53,201,218,.55); background:rgba(53,201,218,.09); }
.controller-actions { margin:5px 0 15px; padding:13px; border:1px solid var(--line); border-radius:12px; background:rgba(3,13,21,.25); }.controller-actions h3 { margin:0 0 11px; font-size:13px; }.setpoint-control { display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end; }.setpoint-control label { margin:0!important; }.defrost-actions { display:flex; gap:9px; margin:11px 0 7px; }.defrost-actions .button { flex:1; }.button.danger { background:rgba(255,102,122,.12); border:1px solid rgba(255,102,122,.32); color:#ff9aaa; }
.meta-item.wide { grid-column:1/-1; }