/* Malina web UI — фирменный стиль «Малины» (палитра в духе microart.ru). */
:root {
  --fg: #333333;
  --muted: #777777;
  --accent: #337ab7;
  --accent-dark: #286090;
  --link: #337ab7;
  --bg: #f9f9f9;
  --panel: #ffffff;
  --border: #ddd;
  --navbar-bg: #f8f8f8;
  --navbar-border: #e7e7e7;
  --danger-bg: #f2dede;
  --danger-fg: #a94442;
  --danger-border: #ebccd1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428;
  color: var(--fg);
  background: var(--bg);
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

/* вход */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.login-card {
  width: 340px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  text-align: center;
}
.corner-logo { position: absolute; top: 16px; left: 16px; height: 40px; }
.login-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: 16px; }
.login-table td { width: 50%; padding: 0 6px; text-align: center; vertical-align: middle; }
.login-table img { display: block; width: 100%; height: 120px; object-fit: contain; }
.login-card h1 { margin: 0 0 16px; font-size: 20px; font-weight: 500; }
.login-card label { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--fg); margin: 12px 0 4px; }
.login-card input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
.login-card input:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 2px rgba(51,122,183,.2); }
.login-card button {
  margin-top: 18px;
  width: 100%;
  padding: 9px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.login-card button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.error {
  background: var(--danger-bg);
  color: var(--danger-fg);
  border: 1px solid var(--danger-border);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  margin-bottom: 8px;
  text-align: left;
}
.lang-login { position: absolute; top: 16px; right: 16px; }

/* каркас: горизонтальное верхнее меню */
.topbar {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--navbar-bg);
  border-bottom: 1px solid var(--navbar-border);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--muted); }
.brand img { height: 28px; }
.mainnav { display: flex; align-items: center; gap: 4px; }
.navform { margin: 0; }
.navlink {
  display: inline-block;
  padding: 8px 12px;
  color: var(--link);
  border: 0;
  background: transparent;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.navlink:hover { background: #ececec; color: var(--accent-dark); text-decoration: none; }
.navitem.active > .navlink { background: var(--accent); color: #fff; }
.dropdown { position: relative; }
.dropdown .caret { font-size: 10px; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  padding: 4px;
  z-index: 20;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block;
  padding: 8px 12px;
  color: var(--link);
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
}
.dropdown-menu a:hover { background: #f0f0f0; text-decoration: none; }
.dropdown-menu a.active { background: var(--accent); color: #fff; }
.topbar .lang { margin-left: auto; }
.lang select {
  background: #fff;
  color: var(--fg);
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
}
.content { padding: 24px; }
.content h1 { margin-top: 0; font-size: 22px; font-weight: 500; }
.muted { color: var(--muted); }

/* информация о системе */
.sysinfo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.page-head h1 { margin: 0; }
.powerbar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  white-space: nowrap;
}
.powerbar .pk { font-weight: 600; color: var(--muted); }
.powerbar .pv { color: var(--fg); }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
}
.card h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}
.card h3 { margin: 12px 0 6px; font-size: 14px; font-weight: 600; color: #555; }
.srow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px dashed #f0f0f0;
  font-size: 13px;
}
.srow:last-child { border-bottom: 0; }
.sk { color: var(--muted); }
.sv { color: var(--fg); text-align: right; word-break: break-word; }
.bar { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; margin: 4px 0 8px; }
.bar span { display: block; height: 100%; background: var(--accent); }
.iface { border-top: 1px solid #f0f0f0; margin-top: 8px; padding-top: 4px; }

/* градусники */
.gauges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-around;
  margin: 4px 0 12px;
}
.gauge { text-align: center; min-width: 120px; }
.gauge svg { display: block; margin: 0 auto; }
.gauge .gv { font-size: 18px; font-weight: 600; margin-top: -14px; }
.gauge .gl { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* формы параметров системы */
.flash { padding: 10px 12px; border-radius: 4px; margin-bottom: 14px; font-size: 14px; }
.flash.ok { background: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; }
.flash.err { background: #f2dede; color: #a94442; border: 1px solid #ebccd1; }
.sysforms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.card form label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.card form input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
.card form input:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 2px rgba(51,122,183,.2); }
.card form button {
  margin-top: 12px;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.card form button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* логи */
.logs-card .log-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.logbtn {
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
}
.logbtn:hover { background: var(--accent); color: #fff; text-decoration: none; }
.logs-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.logs-bar select { padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; }
.logview {
  background: #111;
  color: #e6e6e6;
  padding: 12px;
  border-radius: 4px;
  height: 70vh;
  overflow: auto;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

/* network settings page */
.tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.tabs .tab { padding: 8px 14px; cursor: pointer; border: 1px solid var(--border); border-bottom: none; border-radius: 4px 4px 0 0; background: #f2f2f2; margin-bottom: -1px; }
.tabs .tab input { display: none; }
.tabs .tab:has(input:checked) { background: #fff; font-weight: 600; }
.pane { margin-bottom: 16px; }
.nettable { width: auto; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 4px; }
.nettable td { padding: 6px 12px; border-bottom: 1px solid #eee; vertical-align: middle; }
.nettable td:first-child { color: var(--muted); white-space: nowrap; }
.nettable tr.group td { background: #f8f8f8; font-weight: 600; color: var(--fg); }
.nettable input, .nettable select { width: 280px; box-sizing: border-box; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
.nettable input.invalid { border-color: #d9534f; background: #fde8e8; }
.val-inline { display: flex; gap: 6px; align-items: center; }
.head-actions { display: flex; gap: 8px; align-items: center; }
.head-actions button { padding: 8px 14px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; cursor: pointer; }
.head-actions button#restorebtn { background: #fff; color: var(--accent); }
.val-inline button { padding: 6px 12px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.err { color: #a94442; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal[hidden] { display: none; }
.modal-box { background: #fff; border-radius: 6px; width: 420px; max-width: 92vw; max-height: 70vh; display: flex; flex-direction: column; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.modal-head button { border: 0; background: transparent; font-size: 16px; cursor: pointer; }
.scanlist { padding: 8px; overflow: auto; }
.scanitem { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 4px; color: var(--link); text-decoration: none; }
.scanitem:hover { background: #f0f0f0; }

.page-head-left { justify-content: flex-start; }

/* password eye / static rows */
.pw { display: flex; gap: 6px; align-items: center; }
.pw input { flex: 1; }
.pw .eye { padding: 4px 8px; border: 1px solid #ccc; background: #fff; border-radius: 4px; cursor: pointer; }

/* services page */
.svc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.btn-danger { padding: 8px 14px; border: 1px solid #d9534f; background: #d9534f; color: #fff; border-radius: 4px; cursor: pointer; }
.btn-danger:hover { background: #c9302c; border-color: #c9302c; }
.svc-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.svc-table th, .svc-table td { padding: 9px 12px; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; font-size: 14px; }
.svc-table th { background: #f8f8f8; color: var(--muted); font-weight: 600; }
.svc-table tr:last-child td { border-bottom: 0; }
.svc-name code { background: #f4f4f4; border: 1px solid #e6e6e6; border-radius: 3px; padding: 1px 5px; font-size: 13px; }
.svc-desc { color: #555; }
.svc-actions-col { width: 210px; }
.svc-actions { white-space: nowrap; }
.svc-actions button { padding: 6px 12px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; cursor: pointer; font-size: 13px; }
.svc-actions button:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.svc-actions button.btn-ghost { background: #fff; color: var(--accent); }
.svc-actions button:disabled { opacity: .45; cursor: default; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.badge.ok { background: #dff0d8; color: #3c763d; }
.badge.err { background: #f2dede; color: #a94442; }
.badge.warn { background: #fcf8e3; color: #8a6d3b; }
.badge.muted { background: #eee; color: #666; }
.flash.warn { background: #fcf8e3; color: #8a6d3b; border: 1px solid #faebcc; }

/* reboot waiting page */
.reboot-card { max-width: 520px; margin: 12vh auto 0; text-align: center; padding: 28px 26px; }
.reboot-logo img { height: 84px; }
.reboot-title { margin: 10px 0 0; font-size: 20px; }
.rebar { height: 18px; margin: 20px 0 8px; background: #eee; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.rebar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #5cb85c, #f0ad4e, #d9534f); transition: width .1s linear; }
.rebar-pct { font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.reboot-err { margin-top: 6px; }

/* services: comment column */
.svc-note-col { width: 340px; }
.svc-note { color: #777; font-size: 13px; line-height: 1.35; }
.svc-note.crit { color: #a94442; font-weight: 600; }

/* === Тема в стиле microart.ru: тёмно-зелёный #0d5637 + жёлтый #fec678 === */
:root {
  --fg: #1a1a1a;
  --muted: #6b6b6b;
  --accent: #0d5637;
  --accent-dark: #0a4129;
  --accent2: #fec678;
  --link: #0d5637;
  --bg: #f5f6f5;
  --panel: #ffffff;
  --border: #d5ddd8;
  --navbar-bg: #0d5637;
  --navbar-border: #0d5637;
}

body { font-family: "Open Sans", "Segoe UI", Roboto, Arial, sans-serif; color: var(--fg); }
h1, h2, h3 { font-family: "Open Sans Condensed", "Open Sans", "Segoe UI", Arial, sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #0d5637; }
a:hover { color: var(--accent-dark); }

/* шапка */
.topbar { background: #0d5637; border-bottom: 2px solid rgba(254,198,120,.25); }
.brand { color: #fff; }
.navlink {
  color: #fff; border-radius: 0; position: relative;
  text-transform: uppercase; font-family: "Open Sans Condensed","Open Sans",sans-serif;
  font-weight: 700; letter-spacing: .5px;
}
.navlink:hover, .navitem.active > .navlink { background: transparent; color: #fec678; }
.navlink:hover::after, .navitem.active > .navlink::after {
  content: ''; display: block; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 3px; background: #fec678;
}
.dropdown-menu { background: #0d5637; border: 1px solid #0a4129; border-radius: 0; }
.dropdown-menu a { color: #fff; }
.dropdown-menu a:hover, .dropdown-menu a.active { background: #0a4129; color: #fec678; }
.lang select { border-color: #fec678; }

/* кнопки */
button, .card form button, .login-card button, .svc-actions button, .btn-danger {
  text-transform: uppercase; font-family: "Open Sans Condensed","Open Sans",sans-serif; font-weight: 700; letter-spacing: .5px; border-radius: 0;
}
.card form button, .login-card button, .svc-actions button { background: #0d5637; border: 1px solid #0d5637; color: #fff; }
.card form button:hover, .login-card button:hover, .svc-actions button:hover:not(:disabled) { background: #0d5637; color: #fec678; border-color: #0d5637; }
.btn-danger { background: #8a2b2b; border-color: #8a2b2b; }
.btn-danger:hover { background: #7a2424; border-color: #7a2424; }
.svc-actions button.btn-ghost { background: #fff; color: #0d5637; border-color: #0d5637; }

/* карточки */
.card, .login-card { border: 2px solid #0d5637; border-radius: 0; box-shadow: none; }
.login-card input:focus { border-color: #0d5637; box-shadow: 0 0 0 2px rgba(13,86,55,.15); }

/* таблицы */
.svc-table { border: 2px solid #0d5637; }
.svc-table th { background: #0d5637; color: #fff; text-transform: uppercase; font-family: "Open Sans Condensed","Open Sans",sans-serif; letter-spacing: .5px; }
.svc-table th, .svc-table td { border-bottom: 1px solid #e2e8e4; }
.svc-name code { background: #eef3f0; border-color: #d5ddd8; color: #0d5637; }

/* бейджи и сообщения */
.badge.ok { background: #0d5637; color: #fff; }
.flash.ok { background: #e3efe8; color: #0d5637; border-color: #bcd8c9; }
.flash.warn { background: #fdf3e3; color: #8a6d3b; border-color: #f3dcb4; }
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/OpenSans-400-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/OpenSans-400-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/OpenSans-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/OpenSans-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Open Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/OpenSansCondensed-700-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Open Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/OpenSansCondensed-700-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Open Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/OpenSansCondensed-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Open Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/OpenSansCondensed-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* === Полировка темы === */
.card h2 { border-bottom: 2px solid #fec678; padding-bottom: 6px; }
.nettable tr.group td { background: #0d5637; color: #fff; }
.nettable input:focus, .nettable select:focus, input:focus, select:focus, textarea:focus { border-color: #0d5637; box-shadow: 0 0 0 2px rgba(13,86,55,.15); }
.svc-table tbody tr:hover { background: #f2f7f4; }
.modal-head { border-bottom: 2px solid #fec678; }
.scanitem:hover { background: #eef3f0; color: #0d5637; }
.logs-card .log-buttons button { border-color: #0d5637; color: #0d5637; background: #fff; }
.logs-card .log-buttons button.active, .logs-card .log-buttons button:hover { background: #0d5637; color: #fff; }
.head-actions button#restorebtn { background: #fff; color: #0d5637; border-color: #0d5637; }
select, input[type=text], input[type=password] { border-color: #c9d3cd; }
.lang select { border-color: #fec678; background: #0a4129; color: #fff; }

/* === CJK-фолбэки (китайский отрисуется системным CJK-шрифтом) === */
body { font-family: "Open Sans", "Segoe UI", Roboto, "Noto Sans", "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif; }
h1, h2, h3 { font-family: "Open Sans Condensed", "Open Sans", "Noto Sans", "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; }
.navlink, button, .card form button, .login-card button, .svc-actions button, .btn-danger, .svc-table th {
  font-family: "Open Sans Condensed", "Open Sans", "Noto Sans", "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

/* === Мобильная адаптация === */
@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
  .brand { width: 100%; }
  .mainnav { flex-wrap: wrap; width: 100%; }
  .topbar .lang { margin-left: auto; }
  .content { padding: 12px; }
  .sysforms { grid-template-columns: 1fr; }
  .login-card { width: 92vw; max-width: 360px; }
  .logs-bar { flex-wrap: wrap; }
  /* широкие таблицы — горизонтальная прокрутка вместо поломки вёрстки */
  .svc-table, .nettable { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .svc-table th, .svc-table td { white-space: nowrap; }
  .svc-note, .svc-note-col { white-space: normal; min-width: 200px; }
  .nettable input, .nettable select { width: 100%; max-width: 340px; }
  .svc-actions-col, .svc-actions { white-space: nowrap; }
}
@media (max-width: 520px) {
  .content { padding: 8px; }
  .content h1 { font-size: 19px; }
  .svc-table th, .svc-table td { padding: 7px 8px; font-size: 13px; }
  .svc-actions button { padding: 5px 9px; font-size: 12px; }
  .logview { height: 60vh; font-size: 11px; }
}

@media (max-width: 820px) {
  .page-head { flex-wrap: wrap; }
  .powerbar { flex-wrap: wrap; white-space: normal; width: 100%; }
}

/* Сервисы: карточки на узких экранах (вместо горизонтального скролла) */
@media (max-width: 820px) {
  .svc-table { display: block; width: 100%; overflow: visible; border: 0; }
  .svc-table thead { display: none; }
  .svc-table tbody { display: block; }
  .svc-table tr { display: block; border: 2px solid var(--accent); border-radius: 4px; margin-bottom: 10px; padding: 10px 12px; background: #fff; }
  .svc-table tr:hover { background: #fff; }
  .svc-table td { display: block; width: auto; padding: 2px 0; border: 0; white-space: normal; }
  .svc-table td::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 600; }
  .svc-table td.svc-name::before, .svc-table td.svc-actions::before { content: ""; }
  .svc-table td.svc-name { margin-bottom: 3px; }
  .svc-table td.svc-actions { margin-top: 8px; }
}
/* Настройка сети: стопкой (метка над полем) на узких экранах */
@media (max-width: 820px) {
  .nettable, .nettable tbody, .nettable tr, .nettable td { display: block; width: auto; }
  .nettable tr { margin-bottom: 12px; }
  .nettable td { border: 0; padding: 3px 0; white-space: normal; }
  .nettable td:first-child { color: var(--muted); }
  .nettable input, .nettable select { width: 100%; max-width: 100%; }
}

/* Защита от горизонтального переполнения и узких карточек на мобиле */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .sysinfo { grid-template-columns: 1fr; }
  .gauge { min-width: 0; flex: 1 1 30%; }
  .srow { flex-wrap: wrap; }
  .sv { text-align: left; }
}

/* вкладки «Сервисы» */
.svc-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.svc-tab { padding: 8px 16px; border: 2px solid var(--accent); background: #fff; color: var(--accent); border-radius: 0; cursor: pointer;
  text-transform: uppercase; font-family: "Open Sans Condensed","Open Sans",sans-serif; font-weight: 700; letter-spacing: .5px; }
.svc-tab.active { background: var(--accent); color: #fff; }
.svc-table-ro .svc-state { width: 140px; }

/* Информация: автообновление, процессы, подключённые устройства */
.page-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.autoref { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.autoref input { width: auto; }
.procsort { float: right; font-size: 12px; padding: 2px 6px; text-transform: none; border: 1px solid var(--accent); color: var(--accent); background: #fff; }
.procs-table, .conn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.procs-table th, .conn-table th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1px solid #e2e8e4; padding: 4px 6px; }
.procs-table td, .conn-table td { padding: 4px 6px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.procs-table td.pcmd { word-break: break-all; }
.conn-table td.mac, .conn-table code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

@media (max-width: 820px) {
  .procs-table, .conn-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .procs-table th, .procs-table td, .conn-table th, .conn-table td { white-space: nowrap; }
  .procs-table td.pcmd { white-space: normal; }
}

/* Ошибки внешних команд на странице информации */
.card-err { border-color: #b23b3b; }
.card-err h2 { color: #b23b3b; border-bottom-color: #b23b3b; }
.card-err .sv { color: #b23b3b; }

/* Таблицы процессов/устройств: не вылезают за карточку */
.card { overflow: hidden; }
.procs-table, .conn-table { table-layout: fixed; width: 100%; }
.procs-table th, .procs-table td,
.conn-table th, .conn-table td { overflow: hidden; text-overflow: ellipsis; }
.procs-table td, .conn-table td { white-space: nowrap; }
.procs-table th:nth-child(1), .procs-table td:nth-child(1) { width: 58px; }
.procs-table th:nth-child(2), .procs-table td:nth-child(2) { width: 104px; }
.procs-table th:nth-child(3), .procs-table td:nth-child(3) { width: 58px; }
.procs-table th:nth-child(4), .procs-table td:nth-child(4) { width: 68px; }
.procs-table th:nth-child(5), .procs-table td:nth-child(5) { width: 80px; }
.procs-table td.pcmd { white-space: nowrap; }
.conn-table td.mac { overflow: hidden; text-overflow: ellipsis; }

/* ширины колонок процессов — в процентах (вписываются в карточку) */
.procs-table { table-layout: fixed; width: 100%; }
.procs-table th:nth-child(1), .procs-table td:nth-child(1) { width: 9%; }
.procs-table th:nth-child(2), .procs-table td:nth-child(2) { width: 18%; }
.procs-table th:nth-child(3), .procs-table td:nth-child(3) { width: 10%; }
.procs-table th:nth-child(4), .procs-table td:nth-child(4) { width: 12%; }
.procs-table th:nth-child(5), .procs-table td:nth-child(5) { width: 15%; }
.procs-table th, .procs-table td { overflow: hidden; text-overflow: ellipsis; }
.procs-table th { font-size: 12px; }
.conn-table { table-layout: fixed; width: 100%; }
.conn-table td, .conn-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-table th:nth-child(1), .conn-table td:nth-child(1) { width: 22%; }
.conn-table th:nth-child(2), .conn-table td:nth-child(2) { width: 20%; }
.conn-table th:nth-child(3), .conn-table td:nth-child(3) { width: 30%; }
.conn-table th:nth-child(4), .conn-table td:nth-child(4) { width: 14%; }

/* Карточки во всю ширину (процессы, устройства) */
.card-wide { grid-column: 1 / -1; }
.procs-table th:nth-child(1), .procs-table td:nth-child(1) { width: 64px; }
.procs-table th:nth-child(2), .procs-table td:nth-child(2) { width: 120px; }
.procs-table th:nth-child(3), .procs-table td:nth-child(3) { width: 72px; }
.procs-table th:nth-child(4), .procs-table td:nth-child(4) { width: 80px; }
.procs-table th:nth-child(5), .procs-table td:nth-child(5) { width: 88px; }
.procs-table th { white-space: nowrap; }

/* Подзаголовки секций внутри карточек — с жёлтой линией как у заголовков */
.card h3 { border-bottom: 2px solid #fec678; padding-bottom: 6px; margin: 14px 0 6px; }

/* Радио сортировки процессов в заголовке карточки */
.card h2 .radios { float: right; font-weight: 400; text-transform: none; font-family: "Open Sans","Segoe UI",Roboto,Arial,sans-serif; font-size: 13px; }
.card h2 .rad { margin-left: 10px; color: var(--muted); cursor: pointer; }
.card h2 .rad input { width: auto; }

/* Управление списком процессов: радио + «Обновить» справа */
.card h2 .procctl { float: right; font-weight: 400; text-transform: none; font-family: "Open Sans","Segoe UI",Roboto,Arial,sans-serif; font-size: 13px; }
.procrefresh { margin-left: 10px; padding: 4px 10px; border: 1px solid var(--accent); background: #fff; color: var(--accent); cursor: pointer; }

/* Сбойные юниты — компактный бокс справа вверху */
.failedbox { border: 2px solid var(--accent); padding: 4px 10px; font-size: 13px; color: var(--accent); white-space: nowrap; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
.failedbox.err { border-color: #b23b3b; color: #b23b3b; }
.failedbox .fbl { color: var(--muted); }

/* Процессы: радио слева, «Обновить» справа, вертикальная центровка */
.card h2 .procctl { float: right; display: inline-flex; align-items: center; gap: 12px; }
.card h2 .procctl .radios { float: none; display: inline-flex; align-items: center; gap: 12px; }
.card h2 .procctl .procrefresh { margin-left: 0; display: inline-flex; align-items: center; }

/* Заголовок карточки — флекс: заголовок слева, управление справа, по центру */
.card h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card h2 .procctl { float: none; margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }

/* Меню: Мониторинг/Статистика по центру, Система/Выход/язык — справа */
.topbar { display: flex; align-items: center; gap: 16px; }
.mainnav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.topbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar-right .dropdown-menu { left: auto; right: 0; }
.topbar-right .lang { margin-left: 6px; }
@media (max-width: 820px) {
  .mainnav { flex: 1 1 100%; justify-content: flex-start; }
  .topbar-right { margin-left: 0; }
}

/* Выбор режима: подпись и индикаторы вкладок (✓ активна / ⛔ неактивна) */
.msel { margin: 4px 0 8px; color: var(--muted); font-weight: 600; }
.tabs .tab::after { margin-left: 8px; font-size: 18px; vertical-align: middle; line-height: 1; }
.tabs .tab { content: ""; }
.tabs .tab::after { content: "⛔"; }
.tabs .tab:has(input:checked)::after { content: "✓"; color: #2e7d32; font-weight: 700; font-size: 24px; }

/* Мониторинг МАП: подпункты динамического меню и страница МАП */
/* Пункты меню 2/3 уровня — тем же шрифтом, что и 1 уровень, без переноса. */
.dropdown-menu { width: max-content; min-width: 220px; }
.dropdown-menu a {
  font-family: "Open Sans Condensed", "Open Sans", sans-serif;
  font-weight: 700; letter-spacing: .5px; white-space: nowrap;
}
.dropdown-label {
  display: block; padding: 8px 12px 2px; opacity: .85;
  font-family: "Open Sans Condensed", "Open Sans", sans-serif;
  font-weight: 700; letter-spacing: .5px; text-transform: none;
}
a.dropdown-sub { padding-left: 22px; }
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.map-title { margin: 0; text-transform: none; }
.map-pause { font-weight: 600; white-space: nowrap; user-select: none; }
.map-headctl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.map-hidedebug { font-weight: 600; white-space: nowrap; user-select: none; color: #c0392b; }
.map-hidedebug input { accent-color: #c0392b; }
.map-json {
  background: #0e1b12; color: #d7e8db; border: 1px solid #0a4129; border-radius: 6px;
  padding: 12px; overflow: auto; max-height: 70vh; font-size: 12.5px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-all;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Панель мониторинга МАП (в стиле старой Малины) */
.mappanel { border: 2px solid #0d5637; margin: 0 0 12px; background: #f7faf8; }
.mp-head { background: linear-gradient(#3f86c0, #2f6ea3); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; }
.mp-head-status { background: #fbf7d8; color: #1c2a22; font-weight: 700; padding: 4px 16px; border: 1px solid #c9c07a; }
.mp-head-right { display: flex; align-items: center; gap: 18px; font-family: "Open Sans Condensed","Open Sans",sans-serif; }
.mp-head-time { font-size: 22px; font-weight: 700; letter-spacing: .5px; }
.mp-head-id { font-size: 15px; font-weight: 700; }
.mp-cols { display: flex; gap: 10px; padding: 10px; flex-wrap: wrap; }
.mp-block { flex: 1 1 320px; background: #fff; border: 1px solid #cfe0d5; padding: 8px 10px; }
.mp-ac { border-top: 3px solid #2e9e57; }
.mp-bat { border-top: 3px solid #2f6ea3; }
.mp-bal { flex: 0 1 200px; border-top: 3px solid #7aa66a; background: #eef6ec; display: flex; flex-direction: column; justify-content: center; }
.mp-block-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: #4a5a52; }
.mp-ico { font-size: 15px; }
.mp-freq { font-weight: 700; color: #2f6ea3; }
.mp-cos { color: #6b7a72; }
.mp-bar { position: relative; height: 26px; background: #e6ebe8; margin: 7px 0; overflow: hidden; border-radius: 3px; }
.mp-bar-fill { height: 100%; transition: width .4s; }
.mp-bar-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #17281f; text-shadow: 0 0 3px #fff; }
.mp-block-bot { display: flex; gap: 14px; font-size: 12.5px; color: #4a5a52; }
.mp-block-bot b { color: #0d5637; }
.mp-bal-num { font-size: 34px; font-weight: 700; color: #2e5d1f; text-align: center; line-height: 1; }
.mp-bal-lbl { text-align: center; font-size: 12px; color: #4a5a52; margin-top: 4px; }
.mp-gauges { display: flex; justify-content: space-between; gap: 6px; padding: 2px 10px 10px; flex-wrap: wrap; }
.mp-gauge { flex: 1 1 130px; text-align: center; }
.mp-gauge svg { display: block; margin: 0 auto; }
.mp-gauge-val { font-weight: 700; font-size: 18px; margin-top: -16px; }
.mp-unit { font-weight: 400; font-size: 11px; color: #6b7a72; margin-left: 2px; }
.mp-gauge-lbl { font-size: 12px; color: #4a5a52; margin-top: 3px; }
.mp-foot { display: flex; justify-content: space-between; gap: 12px; background: #cfe6f5; border-top: 1px solid #9cc3dd; padding: 5px 12px; font-size: 13px; color: #173a52; }
.mp-foot b { color: #0d3b56; }
.mp-foot-err b { color: #c0392b; }


/* Двуполярная полоса мощности (0 в центре) */
.mp-bar { position: relative; height: 26px; background: #e6ebe8; margin: 7px 0; overflow: hidden; border-radius: 3px; }
.mp-fill { position: absolute; top: 0; height: 100%; }
.mp-fill.left { right: 50%; }
.mp-fill.right { left: 50%; }
.mp-zero { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; background: #7d8b83; }

/* Значение внутри гейджа */
.mp-gtv { font: 700 15px "Open Sans","Segoe UI",Arial,sans-serif; fill: #17281f; }
.mp-gtu { font-size: 10px; fill: #6b7a72; }

/* Плашки значений */
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 0 10px 10px; }
.mp-tile { background: #fff; border: 1px solid #cfe0d5; border-left: 4px solid #0d5637; padding: 5px 8px; }
.mp-tile-v { font-size: 16px; font-weight: 700; color: #0d5637; }
.mp-tile-l { font-size: 11.5px; color: #5a6a62; }

/* Панель не растягиваем на всю ширину */
.mappanel { max-width: 1020px; margin-left: auto; margin-right: auto; }

/* Палитра панели — в стиле сайта */
.mp-head { background: linear-gradient(#0f6b45, #0d5637); }
.mp-head-status { background: #fec678; color: #173a2a; border-color: #d9a94b; }
.mp-foot { background: #e3efe8; border-top: 1px solid #bcd8c9; color: #0d5637; }
.mp-foot b { color: #0d5637; }
.mp-block-top .mp-freq { color: #0d5637; }
.mp-ac { border-top-color: #0d5637; }
.mp-bat { border-top-color: #7aa66a; }
.mp-bal { border-top-color: #d9a94b; background: #fbf6e6; }
.mp-bal-num { color: #0d5637; }
.mp-bar { background: #e3efe8; }
.mp-zero { background: #7d8b83; }
.mp-tile { border-left-color: #0d5637; }
.mp-foot-err b { color: #8a2b2b; }

/* Блок КЭС (MPPT) */
.mp-mppt { border-top: 3px solid #d9a94b; background: #fbf6e6; flex: 0 1 220px; }
.mp-mppt-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; color: #4a5a52; }
.mp-mppt-row b { color: #0d5637; }

/* --- Закладки страницы /map --- */
.map-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line, #d6d6d6); margin: 12px 0 16px; }
.map-tab { appearance: none; background: transparent; border: 1px solid transparent; border-bottom: none;
  padding: 8px 16px; cursor: pointer; font: inherit; color: inherit; border-radius: 6px 6px 0 0; }
.map-tab.active { background: var(--panel, #fff); border-color: var(--line, #d6d6d6); font-weight: 600; }
.map-sec { font-size: 18px; margin: 20px 0 8px; }

/* --- Изолированные области панелей 2 и 3: ограничение ширины --- */
.map-isolated { max-width: 1100px; margin: 0 auto; }
.legacy-frame { width: 100%; max-width: 1100px; height: 300px; border: 1px solid var(--line, #d6d6d6);
  border-radius: 6px; background: #fff; display: block; margin: 0 auto; }
/* Меню «МАСТЕР-УЗЕЛ»: двустрочный пункт (вторая строка — мелким курсивом). */
.navlink.navlink-2l { text-align: center; line-height: 1.05; }
.navlink.navlink-2l .nav-sub { display: block; font-size: 8px; font-weight: normal; opacity: .7; }
/* Мастер-Узел: один общий iframe на страницу «Отобразить». */
.master-frame { width: 100%; max-width: 1400px; height: calc(100vh - 170px); min-height: 400px;
  border: 1px solid var(--line, #d6d6d6); border-radius: 6px; background: #eef1f4; display: block; margin: 0 auto; }
/* Мастер-Узел: форма «Настройка». */
.mn-tbl { width: 100%; max-width: 900px; margin: 12px auto; border-collapse: collapse; }
.mn-tbl th, .mn-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--line, #e3e3e3); text-align: left; }
.mn-tbl input, .mn-tbl select { width: 100%; box-sizing: border-box; }
.mn-tbl input[name="port"] { width: 90px; }
.mn-actions { max-width: 900px; margin: 0 auto; display: flex; gap: 8px; }
.mn-del { cursor: pointer; }
/* E-Mail: форма настроек, инструкция, аутбокс. */
.email-form, .email-test, .email-instr { max-width: 760px; margin: 12px auto; }
.email-form .form-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.email-form .form-row label { flex: 0 0 220px; color: var(--muted, #666); }
.email-form .form-row input, .email-form .form-row select { flex: 1 1 auto; box-sizing: border-box; padding: 4px 6px; }
.email-test { display: flex; justify-content: flex-end; }
.email-instr { border: 1px solid var(--line, #e3e3e3); border-radius: 6px; padding: 10px 12px; background: #fafbfc; }
.email-instr h3 { margin: 0 0 6px; }
.email-instr .instr { white-space: pre-line; }
.email-err { color: #b00; max-width: 320px; word-break: break-word; }
/* Менеджер событий: таблица правил. */
.ev-wrap { width: 100%; margin: 12px auto; overflow-x: auto; }
.ev-tbl { border-collapse: collapse; width: auto; }
.ev-tbl th, .ev-tbl td { padding: 3px 6px; border-bottom: 1px solid var(--line, #e3e3e3); text-align: left; vertical-align: middle; white-space: nowrap; }
.ev-tbl select, .ev-tbl input { box-sizing: border-box; }
.ev-tbl input[name="source_serial"], .ev-tbl input[name="target_serial"] { width: 72px; }
.ev-tbl input[name="value"] { width: 80px; }
.ev-tbl input[name="cooldown"] { width: 60px; }
.ev-tbl input[name="recipient"] { width: 170px; }
.ev-tbl input[name="trap_host"] { width: 120px; }
.ev-del { cursor: pointer; color: #b00; }

/* Менеджер событий: оформление и кнопки. */
.ev-tbl th { background: #eef3f8; border-bottom: 2px solid #cfd8e0; font-weight: 600; }
.ev-tbl tbody tr:nth-child(even) { background: #f8fbfe; }
.ev-tbl tbody tr:hover { background: #eef6ff; }
.ev-tbl input, .ev-tbl select { padding: 5px 6px; border: 1px solid #cfd8e0; border-radius: 6px; background: #fff; }
.ev-tbl input:focus, .ev-tbl select:focus { outline: none; border-color: #2c6db5; box-shadow: 0 0 0 2px rgba(44,109,181,.15); }
.ev-actions { display: flex; gap: 10px; margin: 14px auto 0; max-width: 100%; }
.btn { border: 0; border-radius: 7px; padding: 8px 18px; font-weight: 600; font-size: 14px; color: #fff; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: filter .15s; }
.btn:hover:not([disabled]) { filter: brightness(1.06); }
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn-add { background: #2c6db5; }
.btn-save { background: #2e9e5b; }
.btn-cancel { background: #7a8699; }
.btn-clear { background: #c0392b; }
.btn[disabled] { background: #c4ccd6; cursor: not-allowed; box-shadow: none; opacity: .8; }

/* Комбобокс серийников. */
.ev-combo { position: relative; display: inline-block; }
.ev-combo input { width: 78px; }
.ev-combo-btn { margin-left: 3px; padding: 5px 8px; border: 1px solid #cfd8e0; border-radius: 6px; background: #fff; cursor: pointer; }
.ev-combo-btn:hover { background: #eef6ff; }
.ev-combo-list { position: absolute; z-index: 60; left: 0; top: 100%; min-width: 96px; max-height: 220px; overflow: auto; background: #fff; border: 1px solid #cfd8e0; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.ev-combo-opt { padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.ev-combo-opt:hover { background: #eef6ff; }
@media (max-width: 640px) {
  .email-form .form-row { flex-wrap: wrap; }
  .email-form .form-row label { flex: 1 1 100%; }
  .mn-tbl { display: block; overflow-x: auto; }
}
#panel2 { border: 1px dashed #bbb; border-radius: 6px; padding: 24px; color: #888; }

/* Термометры панели 1 (SVG) */
.mp-thermo { flex: 0 0 60px; text-align: center; }
.mp-thermo-v { font-weight: 700; font-size: 15px; color: #0d5637; margin-top: -8px; }

/* ==== Панель 1 (целевая): свой лейаут p1-* ==== */
.p1 { border: 2px solid #0d5637; background: #f7faf8; }
.p1-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(#0f6b45, #0d5637); color: #fff; padding: 7px 12px; }
.p1-mode { background: #fec678; color: #173a2a; font-weight: 700; padding: 4px 16px; border: 1px solid #d9a94b; }
.p1-right { display: flex; align-items: center; gap: 18px; }
.p1-time { font-size: 22px; font-weight: 700; letter-spacing: .5px; }
.p1-maptime { font-size: 20px; font-weight: 700; color: #fec678; }
.p1-id { font-size: 15px; font-weight: 700; }
.p1-idline { font-size: 12px; font-weight: 400; color: #4a5a52; margin: 0 0 6px; padding: 5px 12px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px;
  background: #eef5f0; border: 1px solid #cfe0d5; border-radius: 4px; }
.p1-idp { white-space: nowrap; }
.p1-idl { color: #8a988f; margin-right: 4px; }
.p1-idl::after { content: ":"; }

.p1-main { width: 100%; border-collapse: collapse; }
.p1-main td { border: 1px solid #cfe0d5; vertical-align: top; padding: 8px; }
.p1-row1 { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.p1-freq { font-weight: 700; color: #0d5637; }
.p1-freq.right { color: #4a5a52; }
.p1-cos { color: #6b7a72; }
.p1-phase { font-weight: 700; font-size: 13px; }
.p1-sun { font-size: 18px; }
.p1-link { color: #0d5637; font-weight: 700; text-decoration: none; }

/* Градиентная полоса + скользящее значение */
.p1-bar { position: relative; height: 28px; margin-top: 8px;
  background: linear-gradient(to left, #5f9e73 0%, #a7c57f 22%, #ecd98a 40%, #ecd98a 60%, #d59a63 80%, #ad5f4a 100%);
  border: 1px solid #b7c9bd; border-radius: 3px; }
.p1-slider { position: absolute; top: -3px; transform: translateX(-50%); white-space: nowrap;
  background: #fff; border: 1px solid #20242b; border-radius: 3px; padding: 3px 8px;
  font-weight: 700; font-size: 13px; color: #173a2a; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: left .4s; }
.p1-slider.neg { background: #f2dede; color: #8a2b2b; border-color: #8a2b2b; }

.p1-ico { font-size: 15px; }
.p1-gauges { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; padding: 5px 10px; }
.p1-gauge, .p1-thermo { text-align: center; flex: 0 0 auto; }
.p1-gv { font: 700 22px "Open Sans", "Segoe UI", Arial, sans-serif; fill: #173a2a; }
.p1-glbl { font-size: 12.5px; color: #4a5a52; margin-top: -10px; }
.p1-tv { font-weight: 700; font-size: 15px; color: #0d5637; margin-top: -8px; }

.p1-foot { display: flex; justify-content: space-between; align-items: center; background: #e3efe8;
  border-top: 1px solid #bcd8c9; padding: 5px 12px; color: #0d5637; font-size: 13.5px; }
.p1-foot b { margin: 0 2px; }
.p1-badge { background: #0d5637; color: #fff; border-radius: 10px; padding: 0 8px; }

.p1-details { margin: 8px 10px; border: 1px solid #cfe0d5; }
.p1-details > summary { cursor: pointer; font-weight: 700; color: #0d5637; padding: 5px 8px; background: #eef6ec; }
.p1-scroll { overflow-x: auto; }
.p1-tbl { border-collapse: collapse; }
.p1-tbl th { padding: 3px 8px; border: 1px solid #0d5637; color: #fff; font-size: 11.5px; }
.p1-tbl td { padding: 4px 8px; border: 1px solid #bcd8c9; text-align: center; font-size: 11.5px; }
.p1-tbl.mppt td { border-color: #5CB85C; }

.p1-phases { margin-top: 6px; font-weight: 700; font-size: 13px; color: #173a2a; }

/* Индикаторы панели 1: входы 220В, вентилятор, реле */
.p1-ind { display: flex; align-items: center; gap: 8px; }
.p1-inp, .p1-fan { color: #9aa4a0; display: inline-flex; }
.p1-inp.on { color: #2e9e57; }
.p1-inp.act { color: #f5c518; transform: scale(1.18); }
.p1-fan.on { color: #f5c518; animation: p1spin .8s linear infinite; transform-origin: 50% 50%; }
@keyframes p1spin { to { transform: rotate(360deg); } }
.p1-fan.err { color: #c0392b; animation: p1blink 1s step-start infinite; }
@keyframes p1blink { 50% { opacity: 0; } }
.p1-relays { display: flex; gap: 3px; margin-left: 4px; }
.p1-relay { font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: #7d8b83; color: #fff; }
.p1-relay.on { background: #f5c518; color: #3a2a00; }

/* Невидимая однострочная таблица значений (строка info панели 1) */
.p1-main td.p1-infwrap { padding: 0; }
.p1-inf { width: 100%; border-collapse: collapse; }
.p1-inf td { text-align: center; padding: 0; border: none; white-space: nowrap; }
.p1-inf-l { font-size: 11px; color: #6b7a72; margin-right: 6px; }
.p1-inf-v { font-weight: 700; color: #173a2a; font-size: 14px; }

/* --- Вкладка «Информация»: подзакладки «Основные»/«Системные» --- */
.mi-subtabs { display: flex; gap: 4px; margin: 4px 0 12px; }
.mi-subtab { appearance: none; background: #eef6ec; border: 1px solid #cfe0d5; border-radius: 5px;
  padding: 6px 14px; cursor: pointer; font: inherit; color: inherit; }
.mi-subtab.active { background: #0d5637; border-color: #0d5637; color: #fff; font-weight: 600; }
.mi-pane { max-width: 1020px; }
.mi-group { font-size: 16px; color: #0d5637; margin: 18px 0 6px; padding-bottom: 3px;
  border-bottom: 2px solid #cfe0d5; }
.mi-scroll { overflow-x: auto; margin: 0 0 6px; }
.mi-main { width: 100%; max-width: 1020px; border-collapse: collapse; }
.mi-main td { border: 1px solid #cfe0d5; padding: 6px 10px; vertical-align: top; }
.mi-main tr:nth-child(odd) td { background: #f7faf8; }
.mi-main-l { width: 45%; color: #4a5a52; }
.mi-main-v { font-weight: 700; color: #173a2a; }
.mi-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mi-tbl th { background: #0d5637; color: #fff; text-align: left; padding: 4px 8px;
  border: 1px solid #0d5637; font-weight: 600; position: sticky; top: 0; }
.mi-tbl td { border: 1px solid #dbe7e0; padding: 3px 8px; vertical-align: top; }
.mi-tbl tbody tr:nth-child(odd) td { background: #f7faf8; }
.mi-tbl tr.mi-subhdr td { background: #eef6ec; font-weight: 700; color: #0d5637; border-top: 2px solid #cfe0d5; }
.mi-name { font-family: "Open Sans", "Segoe UI", sans-serif; color: #173a2a; }
.mi-addr { font-family: "SFMono-Regular", Consolas, monospace; color: #8a988f; white-space: nowrap; }
.mi-val { font-weight: 700; color: #173a2a; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.mi-val.mi-na { color: #b9c2bd; font-weight: 400; }
.mi-unit { color: #4a5a52; white-space: nowrap; }
.mi-desc { color: #5a6a62; }

/* Глазик пароля: компактный, не наследует крупные стили кнопок формы/логина. */
.pw input { flex: 1 1 auto; min-width: 0; width: auto; }
.pw .eye {
  flex: 0 0 auto; width: auto; min-width: 0; height: auto;
  padding: 6px 8px; margin: 0;
  font-size: 16px; line-height: 1;
  background: #fff; color: #0d5637;
  border: 1px solid #0d5637; border-radius: 4px;
  cursor: pointer;
}
.pw .eye:hover { background: #f2f7f4; color: #0d5637; }

/* --- Мобильная адаптация страницы МАП (панель 1). Десктоп не затрагивается. --- */
@media (max-width: 640px) {
  .map-head { gap: 8px; }
  .map-title { font-size: 18px; }
  .map-headctl { gap: 10px; font-size: 13px; }
  .map-tabs { overflow-x: auto; }
  .map-tab { white-space: nowrap; }
  .mappanel { max-width: 100%; }
  .map-sec { font-size: 16px; }

  /* Колонки панели 1 — одна под другой */
  .p1-head { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  .p1-right { gap: 10px; flex-wrap: wrap; }
  .p1-time { font-size: 18px; }
  .p1-maptime { font-size: 16px; }
  .p1-id { font-size: 13px; }
  .p1-main, .p1-main tbody, .p1-main tr, .p1-main td { display: block; width: auto !important; }
  .p1-main td { padding: 8px; }

  /* Гейджи — по центру, чуть меньше */
  .p1-gauges { justify-content: center; gap: 2px 6px; padding: 6px; }
  .p1-gauge svg { width: 104px; height: auto; }

  /* Строка инфо-значений — переносим по 3 в ряд */
  .p1-inf tbody, .p1-inf, .p1-inf tr, .p1-inf td { display: block; width: auto; white-space: normal; }
  .p1-inf tr { display: flex; flex-wrap: wrap; }
  .p1-inf td { flex: 1 1 33%; padding: 4px 2px; }

  .p1-foot { flex-wrap: wrap; gap: 4px 10px; padding: 6px 8px; }
  .p1-phases { font-size: 12px; }

  .mi-pane { max-width: 100%; }
}
@media (max-width: 420px) {
  .p1-gauge svg { width: 92px; }
  .p1-inf td { flex: 1 1 50%; }
}

/* Мобильные уточнения: гейджи страницы «Информация» и переносы в таблицах настроек */
@media (max-width: 640px) {
  .gauges { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .gauge { flex: 1 1 40%; min-width: 0; }
  .gauge svg { width: 100%; height: auto; max-width: 140px; }
  .nettable td, .nettable td.muted, .nettable td[colspan] { white-space: normal; overflow-wrap: anywhere; }
}

/* Чекбоксы в таблицах настроек — не растягивать (иначе шире ячейки) */
.nettable input[type="checkbox"] { width: auto; max-width: none; }

/* Мобильное меню: выпадающие списки не выходят за пределы экрана */
@media (max-width: 820px) {
  .topbar { position: relative; }
  .dropdown { position: static; }
  .dropdown-menu,
  .topbar-right .dropdown-menu {
    position: absolute; left: 8px; right: 8px; top: auto;
    width: auto; min-width: 0; max-width: none;
  }
  .dropdown-menu a { white-space: normal; }
}

/* Вкладка «Управление» (control) */
.ctl-head { display: flex; gap: 8px; margin: 8px 0 12px; }
.ctl-btn { padding: 6px 12px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; cursor: pointer; font-size: 13px; }
.ctl-btn.ghost { background: #fff; color: #333; border-color: #bbb; }
.ctl-btn.sm { padding: 3px 8px; font-size: 12px; }
.ctl-btn.danger { background: #d9534f; border-color: #d9534f; }
.ctl-btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.ctl-cmds { margin-bottom: 12px; }
.ctl-cmdrow { display: flex; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.ctl-toggle { padding: 6px 14px; border: 1px solid #1a6533; background: #1f7a3d; color: #fff; border-radius: 4px; cursor: pointer; font-size: 13px; }
.ctl-toggle.on { background: #1f7a3d; border-color: #1a6533; }
.ctl-toggle.act-off { background: #d9534f; border-color: #c9302c; color: #fff; }
#ctlRelays { display: inline-flex; gap: 8px; }
.ctl-tbl { width: 100%; border-collapse: collapse; margin: 4px 0 16px; }
.ctl-tbl th, .ctl-tbl td { border-bottom: 1px solid #e2e2e2; padding: 5px 8px; text-align: left; font-size: 13px; vertical-align: middle; }
.ctl-tbl th { color: #666; font-weight: 600; }
.ctl-name { width: 40%; }
.ctl-cur { width: 12%; white-space: nowrap; }
.ctl-edit { width: 22%; }
.ctl-unit { width: 8%; color: #666; }
.ctl-q, .ctl-q2 { width: 28px; text-align: center; }
.ctl-act { width: 18%; white-space: nowrap; }
.ctl-help { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; vertical-align: middle; line-height: 1; }
.ctl-help:hover { background: var(--accent-dark, #2a6496); }
.ctl-input { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px; }
.ctl-edit.ctl-invalid .ctl-input { border-color: #d9534f; background: #fdeaea; }
tr.ctl-changed { background: #fff8e1; }
.ctl-pop { position: fixed; z-index: 9999; max-width: 440px; white-space: pre-line; background: #222; color: #fff; padding: 8px 10px; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.35); font-size: 13px; line-height: 1.35; }

/* Вкладка «Управление» — мобильная раскладка (таблица → карточки) */
@media (max-width: 700px) {
  .ctl-head { flex-direction: column; }
  .ctl-head .ctl-btn { width: 100%; }
  .ctl-cmdrow { flex-direction: column; }
  .ctl-cmdrow .ctl-toggle, .ctl-cmdrow .ctl-btn, #ctlRelays { width: 100%; }
  #ctlRelays { display: flex; flex-direction: column; gap: 8px; }
  .ctl-tbl thead { display: none; }
  .ctl-tbl, .ctl-tbl tbody, .ctl-tbl tr, .ctl-tbl td { display: block; width: auto; }
  .ctl-tbl tr { border: 1px solid #e2e2e2; border-radius: 8px; padding: 8px 10px; margin: 8px 0; background: #fff; }
  .ctl-tbl tr.ctl-changed { background: #fff8e1; }
  .ctl-tbl td { border: none; padding: 2px 0; }
  .ctl-tbl td.ctl-name { font-weight: 600; padding-bottom: 6px; }
  .ctl-tbl td.ctl-q, .ctl-tbl td.ctl-q2 { width: auto; text-align: left; margin-left: 4px; }
  .ctl-tbl td[data-l]:not([data-l=""]):not(:empty)::before { content: attr(data-l) ": "; color: #666; }
  .ctl-tbl td.ctl-cur:empty, .ctl-tbl td.ctl-unit:empty { display: none; }
  .ctl-input { font-size: 16px; } /* без зума при фокусе на iOS */
  .ctl-act .ctl-btn { width: 100%; margin-top: 4px; }
  .ctl-pop { max-width: 92vw; }
}