:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #142132;
  background: #f4f7fb;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg,#eef4fb 0,#f7f9fc 280px); }
button,input { font: inherit; }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 64px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:26px; }
.top-actions { display:flex; align-items:center; gap:10px; }
.top-actions form { margin:0; }
.eyebrow { font-size:12px; font-weight:800; letter-spacing:.18em; color:#4d6b8e; }
h1 { margin:7px 0 5px; font-size:clamp(30px,5vw,48px); letter-spacing:-.04em; }
h2 { margin:0 0 4px; font-size:20px; }
p { color:#617085; margin:0; }
.badge { padding:10px 14px; border-radius:999px; font-size:13px; font-weight:800; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge.ok { background:#dcfce7; color:#166534; }
.badge.bad { background:#fee2e2; color:#991b1b; }
.badge.neutral { background:#e5e7eb; color:#475569; }
.panel { background:#fff; border:1px solid #e3e9f1; border-radius:20px; padding:22px; box-shadow:0 12px 35px rgba(38,58,82,.06); margin-bottom:20px; }
.section-title { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:18px; }
.section-title p { font-size:13px; }
code { background:#f0f4f8; padding:2px 6px; border-radius:6px; }
.device-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end; }
.device-form label,.login-form label { display:grid; gap:7px; font-size:13px; font-weight:750; color:#3c4b5e; }
.device-form .wide { grid-column:span 2; }
.checkbox-label { display:flex !important; flex-direction:row !important; align-items:center; gap:8px !important; min-height:43px; }
.checkbox-label input { width:auto; }
input { width:100%; border:1px solid #d9e1eb; border-radius:11px; padding:12px 13px; outline:none; background:#fbfdff; }
input:focus { border-color:#7694b7; box-shadow:0 0 0 3px rgba(118,148,183,.14); }
button { border:0; border-radius:10px; padding:10px 13px; font-weight:800; cursor:pointer; }
button.primary { background:#142132; color:white; min-height:43px; }
button.ghost { background:#edf2f7; color:#2e4055; }
button.danger { background:#fff0f0; color:#b42318; }
button.small { padding:8px 11px; font-size:12px; }
.hidden { display:none !important; }
.summary-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:20px 0; }
.summary-grid article { background:#fff; border:1px solid #e3e9f1; border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:5px; }
.summary-grid span { color:#718096; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.summary-grid strong { font-size:28px; }
.devices { display:grid; gap:14px; }
.device-card { border:1px solid #e1e7ef; border-radius:16px; padding:18px; background:#fff; }
.device-card[data-status="offline"] { border-color:#fecaca; background:#fffafa; }
.device-head { display:flex; justify-content:space-between; gap:16px; align-items:start; }
.device-title { font-size:18px; font-weight:850; }
.device-topic { margin-top:4px; color:#66778b; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; overflow-wrap:anywhere; }
.status-pill { font-size:11px; font-weight:900; letter-spacing:.06em; padding:7px 9px; border-radius:999px; }
.status-pill.online { color:#166534; background:#dcfce7; }
.status-pill.recovery { color:#1d4ed8; background:#dbeafe; }
.status-pill.offline { color:#991b1b; background:#fee2e2; }
.status-pill.waiting { color:#92400e; background:#fef3c7; }
.status-pill.disabled { color:#475569; background:#e2e8f0; }
.device-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; }
.device-stats div { background:#f7f9fc; border-radius:11px; padding:10px; min-width:0; }
.device-stats span,.last-message>span { display:block; color:#738298; font-size:11px; font-weight:800; text-transform:uppercase; margin-bottom:4px; }
.device-stats strong { font-size:13px; overflow-wrap:anywhere; }
.last-message { border-top:1px solid #edf0f4; padding-top:13px; }
.last-topic { display:block; background:transparent; padding:0; color:#526276; overflow-wrap:anywhere; }
.last-payload { margin:8px 0 0; padding:10px; background:#111827; color:#dbeafe; border-radius:10px; max-height:100px; overflow:auto; font-size:12px; white-space:pre-wrap; }
.device-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
.message { margin-top:10px; font-size:13px; font-weight:700; }
.message.success { color:#166534; }
.message.error { color:#b42318; }
.empty { text-align:center; padding:30px; color:#78879a; }
.events { display:grid; gap:8px; }
.event-row { display:grid; grid-template-columns:110px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid #edf0f4; }
.event-row:last-child { border-bottom:0; }
.event-type { font-size:11px; font-weight:900; text-transform:uppercase; background:#edf2f7; padding:6px 8px; border-radius:8px; text-align:center; }
.event-type.offline,.event-type.script_error { color:#991b1b; background:#fee2e2; }
.event-type.online,.event-type.script_ok { color:#166534; background:#dcfce7; }
.event-main { min-width:0; display:grid; gap:2px; }
.event-main strong { font-size:13px; }
.event-main small { color:#6b7a8d; overflow-wrap:anywhere; }
.event-row time { color:#7b8797; font-size:12px; white-space:nowrap; }
.login-page { display:grid; place-items:center; padding:20px; }
.login-card { width:min(430px,100%); padding:28px; background:#fff; border:1px solid #e3e9f1; border-radius:20px; box-shadow:0 18px 45px rgba(38,58,82,.1); }
.login-card h1 { font-size:36px; }
.login-form { display:grid; gap:14px; margin-top:22px; }
.login-error { margin-top:16px; }
@media (max-width:760px) {
  .topbar,.section-title { flex-direction:column; align-items:stretch; }
  .top-actions { justify-content:space-between; }
  .device-form,.summary-grid,.device-stats { grid-template-columns:1fr 1fr; }
  .device-form .wide { grid-column:span 2; }
  .badge { max-width:100%; }
  .event-row { grid-template-columns:90px 1fr; }
  .event-row time { grid-column:2; }
}
@media (max-width:500px) {
  .wrap { width:min(100% - 20px,1180px); padding-top:25px; }
  .device-form,.summary-grid,.device-stats { grid-template-columns:1fr; }
  .device-form .wide { grid-column:span 1; }
  .device-head { flex-direction:column; }
  .device-actions { justify-content:stretch; }
  .device-actions button { flex:1; }
  .top-actions { align-items:stretch; flex-direction:column; }
}
select { width:100%; border:1px solid #d9e1eb; border-radius:11px; padding:12px 13px; outline:none; background:#fbfdff; font:inherit; }
select:focus { border-color:#7694b7; box-shadow:0 0 0 3px rgba(118,148,183,.14); }
.user-badge { padding:8px 10px; border-radius:9px; background:#eef2f7; color:#43536a; font-size:12px; font-weight:800; }
.customer-form { display:grid; grid-template-columns:1.3fr 1fr 1fr auto; gap:12px; align-items:end; }
.customer-form label { display:grid; gap:7px; font-size:13px; font-weight:750; color:#3c4b5e; }
.customers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.customer-card { border:1px solid #e1e7ef; border-radius:14px; padding:14px; background:#fbfdff; }
.customer-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.customer-head strong { display:block; font-size:15px; }
.customer-head small { color:#738298; }
.customer-users { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.user-chip { display:inline-flex; align-items:center; gap:6px; background:#edf2f7; border-radius:999px; padding:4px 5px 4px 10px; font-size:12px; font-weight:700; }
.user-chip button { border-radius:999px; padding:5px 8px; font-size:10px; background:#fff; color:#42546b; }
@media (max-width:900px){.customer-form{grid-template-columns:1fr 1fr}.customers{grid-template-columns:1fr}}
@media (max-width:500px){.customer-form{grid-template-columns:1fr}}
.device-path { margin-top:4px; color:#36506d; font-size:12px; font-weight:800; }
.end-customer-form { display:grid; grid-template-columns:1fr 1fr auto auto; gap:12px; align-items:end; }
.end-customer-form label { display:grid; gap:7px; font-size:13px; font-weight:750; color:#3c4b5e; }
.end-customers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; }
.end-customer-card { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid #e1e7ef; border-radius:14px; padding:13px; background:#fbfdff; }
.end-customer-card div { min-width:0; display:grid; gap:2px; }
.end-customer-card small { color:#738298; font-size:11px; font-weight:800; text-transform:uppercase; }
.end-customer-card strong { overflow-wrap:anywhere; }
.end-customer-card span { color:#738298; font-size:12px; }
@media (max-width:900px){.end-customers{grid-template-columns:1fr 1fr}.end-customer-form{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.end-customers,.end-customer-form{grid-template-columns:1fr}}

/* Hotfix 4 - monitor-first device dashboard */
.monitor-summary { margin-top: 0; margin-bottom: 16px; }
.monitor-summary article { position: relative; overflow: hidden; }
.monitor-summary article::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -32px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(20,33,50,.035);
}
.monitor-summary span { display:flex; align-items:center; gap:7px; }
.mini-status { width:9px; height:9px; border-radius:50%; display:inline-block; box-shadow:0 0 0 3px rgba(148,163,184,.12); }
.mini-status.online { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.14); }
.mini-status.recovery { background:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.14); }
.mini-status.offline { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.14); }
.mini-status.waiting { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.14); }

.monitor-panel { padding: 22px; }
.monitor-devices { grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px; }
.monitor-card {
  padding:0;
  overflow:hidden;
  border:1px solid #e1e7ef;
  box-shadow:0 7px 24px rgba(38,58,82,.055);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.monitor-card:hover { transform:translateY(-1px); box-shadow:0 12px 30px rgba(38,58,82,.09); }
.monitor-card[data-status="online"] { border-color:#bbf7d0; }
.monitor-card[data-status="recovery"] { border-color:#bfdbfe; background:#fbfdff; }
.monitor-card[data-status="offline"] { border-color:#fecaca; background:#fff; }
.monitor-card[data-status="waiting"] { border-color:#fde68a; }
.monitor-card[data-status="disabled"] { opacity:.72; }

.device-overview { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:18px 18px 14px; }
.status-icon {
  width:50px;
  height:50px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:27px;
  font-weight:900;
  line-height:1;
  border:1px solid transparent;
}
.status-icon.online { color:#15803d; background:#dcfce7; border-color:#bbf7d0; box-shadow:0 0 0 5px rgba(34,197,94,.08); }
.status-icon.recovery { color:#1d4ed8; background:#dbeafe; border-color:#bfdbfe; box-shadow:0 0 0 5px rgba(59,130,246,.08); }
.status-icon.offline { color:#b91c1c; background:#fee2e2; border-color:#fecaca; box-shadow:0 0 0 5px rgba(239,68,68,.08); }
.status-icon.waiting { color:#a16207; background:#fef3c7; border-color:#fde68a; box-shadow:0 0 0 5px rgba(245,158,11,.08); }
.status-icon.disabled { color:#64748b; background:#e2e8f0; border-color:#cbd5e1; }
.status-glyph { transform:translateY(-1px); }

.device-identity { min-width:0; }
.monitor-card .device-title { font-size:17px; font-weight:900; color:#0f1f33; line-height:1.2; }
.monitor-card .device-path { margin-top:4px; color:#2d4e72; font-size:15px; font-weight:850; line-height:1.3; overflow-wrap:anywhere; }
.last-message-age { display:flex; align-items:baseline; gap:7px; margin-top:9px; min-width:0; }
.last-message-age span { color:#7a899c; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.last-message-age strong { color:#334155; font-size:13px; }

.monitor-card .status-pill { align-self:start; margin-top:2px; white-space:nowrap; }

.message-preview { margin:0 18px; border-top:1px solid #edf1f5; padding:12px 0 0; }
.message-preview-head { display:flex; justify-content:space-between; align-items:center; gap:10px; min-width:0; color:#7b8797; font-size:11px; }
.message-preview-head span { white-space:nowrap; }
.message-preview-head code { min-width:0; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:#f4f7fa; color:#526276; }
.monitor-card .last-payload {
  margin:9px 0 0;
  min-height:44px;
  max-height:74px;
  padding:10px 11px;
  border-radius:10px;
  background:#f7f9fc;
  color:#314156;
  border:1px solid #edf1f5;
  font-size:11px;
  line-height:1.45;
  overflow:auto;
  white-space:pre-wrap;
}
.device-meta { display:flex; flex-wrap:wrap; gap:7px 14px; padding:12px 18px 0; color:#748397; font-size:11px; }
.device-meta > span { min-width:0; }
.device-meta strong { color:#45566c; }
.monitor-topic-label { flex:1 1 100%; display:flex; gap:6px; align-items:baseline; min-width:0; }
.monitor-topic-label code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:transparent; padding:0; color:#65758a; }
.monitor-card .device-actions { margin-top:13px; padding:11px 18px 15px; border-top:1px solid #edf1f5; background:#fbfcfe; }
.monitor-card .device-actions button { padding:7px 10px; font-size:11px; }

@media (max-width:900px) {
  .monitor-devices { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .device-overview { grid-template-columns:auto minmax(0,1fr); align-items:start; }
  .monitor-card .status-pill { grid-column:2; justify-self:start; margin-top:0; }
  .message-preview-head { align-items:flex-start; flex-direction:column; }
  .message-preview-head code { max-width:100%; width:100%; }
  .monitor-card .device-actions { justify-content:stretch; }
  .monitor-card .device-actions button { flex:1 1 calc(50% - 8px); }
}

/* Offline history - 2026-09-01 */
.offline-history-panel .section-title { align-items:flex-end; }
.history-filter { display:grid; gap:6px; min-width:260px; color:#64748b; font-size:12px; font-weight:800; }
.history-table-wrap { width:100%; overflow-x:auto; border:1px solid #e6ebf1; border-radius:13px; }
.history-table { width:100%; border-collapse:collapse; min-width:760px; background:#fff; }
.history-table th { text-align:left; padding:11px 13px; background:#f7f9fc; color:#65758a; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid #e6ebf1; }
.history-table td { padding:12px 13px; border-bottom:1px solid #edf1f5; color:#42546b; font-size:12px; vertical-align:middle; }
.history-table tbody tr:last-child td { border-bottom:0; }
.history-table tbody tr:nth-child(even) { background:#fbfcfe; }
.history-table td:first-child strong { display:block; color:#17283c; font-size:13px; }
.history-table td:first-child small { display:block; margin-top:3px; color:#6f8094; font-size:12px; font-weight:700; }
.history-table .history-duration { white-space:nowrap; color:#17283c; font-weight:900; }
.history-active { background:#fff8f8 !important; }
.history-offline-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px; background:#fee2e2; color:#991b1b; font-size:10px; font-weight:900; text-transform:uppercase; white-space:nowrap; }
.history-offline-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:#ef4444; }
.history-note { margin-top:10px; color:#78879a; font-size:11px; }
.history-table td.empty { padding:24px; text-align:center; color:#78879a; }
@media (max-width:760px){.offline-history-panel .section-title{align-items:stretch}.history-filter{min-width:0;width:100%}}

.field-help { color:#7b8797; font-size:11px; font-weight:600; }
.recovery-remaining-wrap strong { color:#1d4ed8; }
.history-recovery-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px; background:#dbeafe; color:#1d4ed8; font-size:10px; font-weight:900; text-transform:uppercase; white-space:nowrap; }
.history-recovery-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:#3b82f6; }
.event-type.recovery,.event-type.recovery_reset { color:#1d4ed8; background:#dbeafe; }
.event-type.online_confirmed,.event-type.online_script_ok,.event-type.online_script_test_ok { color:#166534; background:#dcfce7; }
.event-type.online_script_error,.event-type.online_script_test_error { color:#991b1b; background:#fee2e2; }