/* PulseWatch — 5 colorful themes + components */
/* Lao script always rendered with Phetsarath OT (installed font, or /static/fonts/phetsarath_ot.ttf) */
@font-face { font-family: "PW Lao"; src: local("Phetsarath OT"), local("PhetsarathOT"), local("Phetsarath_OT"),
  url("/fonts/lao.ttf") format("truetype"); unicode-range: U+0E80-0EFF; font-display: swap; }
@font-face { font-family: "PW Lao"; font-weight: 700; src: local("Phetsarath OT Bold"), local("Phetsarath OT"),
  url("/fonts/lao.ttf") format("truetype"); unicode-range: U+0E80-0EFF; font-display: swap; }
:root, [data-theme="aurora"] {
  --bg: #0a0f1f; --bg-grad: radial-gradient(1200px 600px at 10% -10%, rgba(34,211,238,.13), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(167,139,250,.16), transparent 60%), #0a0f1f;
  --surface: #11182c; --card: rgba(255,255,255,.045); --card-solid: #141c33; --border: rgba(148,163,255,.14);
  --text: #e6ebff; --muted: #8e98bd; --primary: #22d3ee; --primary-ink: #04121a; --accent: #a78bfa; --accent2: #f472b6;
  --grad: linear-gradient(135deg, #22d3ee 0%, #a78bfa 55%, #f472b6 100%);
  --up: #34d399; --down: #f87171; --pending: #fbbf24; --maint: #818cf8; --paused: #64748b; --empty: rgba(148,163,184,.18);
  --input: rgba(255,255,255,.06); --hover: rgba(255,255,255,.06); --shadow: 0 10px 30px rgba(0,0,0,.35);
  --chart-line: #22d3ee; --chart-fill: rgba(34,211,238,.18); --scheme: dark;
}
[data-theme="ocean"] {
  --bg: #eef6ff; --bg-grad: radial-gradient(1000px 500px at 0% 0%, rgba(14,165,233,.16), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(99,102,241,.12), transparent 60%), #eef6ff;
  --surface: #ffffff; --card: #ffffff; --card-solid: #ffffff; --border: #d6e6f7;
  --text: #0b2440; --muted: #5d7895; --primary: #0284c7; --primary-ink: #fff; --accent: #06b6d4; --accent2: #6366f1;
  --grad: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 45%, #6366f1 100%);
  --up: #10b981; --down: #ef4444; --pending: #f59e0b; --maint: #6366f1; --paused: #94a3b8; --empty: #dbe7f3;
  --input: #f5faff; --hover: #eaf4ff; --shadow: 0 8px 24px rgba(2,132,199,.10);
  --chart-line: #0284c7; --chart-fill: rgba(2,132,199,.14); --scheme: light;
}
[data-theme="sunset"] {
  --bg: #fff6f1; --bg-grad: radial-gradient(1000px 500px at 0% 0%, rgba(249,115,22,.16), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(236,72,153,.14), transparent 60%), #fff6f1;
  --surface: #ffffff; --card: #ffffff; --card-solid: #ffffff; --border: #f6dccf;
  --text: #3a1426; --muted: #9a6b78; --primary: #f9731a; --primary-ink: #fff; --accent: #ec4899; --accent2: #8b5cf6;
  --grad: linear-gradient(135deg, #fb923c 0%, #ec4899 55%, #8b5cf6 100%);
  --up: #16a34a; --down: #e11d48; --pending: #f59e0b; --maint: #8b5cf6; --paused: #a8a29e; --empty: #f7e3da;
  --input: #fffaf7; --hover: #fff0e8; --shadow: 0 8px 24px rgba(236,72,153,.10);
  --chart-line: #ec4899; --chart-fill: rgba(236,72,153,.14); --scheme: light;
}
[data-theme="neon"] {
  --bg: #060609; --bg-grad: radial-gradient(900px 500px at 0% 0%, rgba(163,230,53,.10), transparent 60%),
        radial-gradient(900px 500px at 100% 10%, rgba(255,47,209,.12), transparent 60%), #060609;
  --surface: #0e0e16; --card: rgba(18,18,30,.85); --card-solid: #12121e; --border: rgba(163,230,53,.18);
  --text: #f1f5f9; --muted: #8b8fa8; --primary: #a3e635; --primary-ink: #0a0a0a; --accent: #ff2fd1; --accent2: #22d3ee;
  --grad: linear-gradient(135deg, #a3e635 0%, #22d3ee 50%, #ff2fd1 100%);
  --up: #a3e635; --down: #ff3b6b; --pending: #ffd60a; --maint: #22d3ee; --paused: #52525b; --empty: rgba(255,255,255,.08);
  --input: rgba(255,255,255,.05); --hover: rgba(163,230,53,.07); --shadow: 0 0 0 1px rgba(163,230,53,.08), 0 10px 30px rgba(0,0,0,.6);
  --chart-line: #a3e635; --chart-fill: rgba(163,230,53,.15); --scheme: dark;
}
[data-theme="emerald"] {
  --bg: #06180f; --bg-grad: radial-gradient(1000px 500px at 0% 0%, rgba(16,185,129,.16), transparent 60%),
        radial-gradient(800px 500px at 100% 0%, rgba(251,191,36,.10), transparent 60%), #06180f;
  --surface: #0b2419; --card: rgba(16,52,38,.55); --card-solid: #0e2c20; --border: rgba(52,211,153,.18);
  --text: #e8fff4; --muted: #8fbfa8; --primary: #34d399; --primary-ink: #03140c; --accent: #fbbf24; --accent2: #2dd4bf;
  --grad: linear-gradient(135deg, #10b981 0%, #2dd4bf 50%, #fbbf24 100%);
  --up: #4ade80; --down: #fb7185; --pending: #fbbf24; --maint: #60a5fa; --paused: #5b7468; --empty: rgba(255,255,255,.09);
  --input: rgba(255,255,255,.05); --hover: rgba(52,211,153,.08); --shadow: 0 10px 30px rgba(0,0,0,.4);
  --chart-line: #34d399; --chart-fill: rgba(52,211,153,.16); --scheme: dark;
}

* { box-sizing: border-box; }
html { color-scheme: var(--scheme); }
body { margin: 0; min-height: 100vh; background: var(--bg-grad); background-attachment: fixed; color: var(--text);
  font: 14px/1.5 "PW Lao", "Segoe UI", "Phetsarath OT", system-ui, -apple-system, Roboto, Arial, sans-serif; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: "PW Lao", ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; }
h2 { font-size: 20px; } h3 { font-size: 16px; } h4 { font-size: 14px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .right { text-align: right; } .center { text-align: center; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hidden { display: none !important; }

/* ---------- top bar */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; padding: 10px 20px;
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--text); }
.brand:hover { text-decoration: none; }
.logo { width: 32px; height: 32px; border-radius: 10px; background: var(--grad); display: grid; place-items: center;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent); }
.logo svg { width: 20px; height: 20px; }
.brand small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: -3px; }
.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav a { padding: 7px 13px; border-radius: 9px; color: var(--muted); font-weight: 500; }
.nav a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.nav a.active { color: var(--primary-ink); background: var(--grad); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.clock { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; text-align: right; line-height: 1.2; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); display: inline-block; margin-right: 4px;
  box-shadow: 0 0 0 0 var(--up); animation: pulse 2s infinite; }
.live-dot.off { background: var(--down); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 70%, transparent);} 70% { box-shadow: 0 0 0 8px transparent;} 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- layout */
.container { padding: 20px; max-width: 1680px; margin: 0 auto; }
.layout { display: grid; grid-template-columns: 380px 1fr; gap: 18px; align-items: start; }
.sidebar { position: sticky; top: 72px; max-height: calc(100vh - 92px); display: flex; flex-direction: column; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); } .g5 { grid-template-columns: repeat(5, 1fr); } .g6 { grid-template-columns: repeat(6, 1fr); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.spacer { flex: 1; }
@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } .sidebar { position: static; max-height: 60vh; }
  .g4, .g5, .g6 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .g2, .g3, .g4, .g5, .g6 { grid-template-columns: 1fr; } .container { padding: 12px; }
  .topbar { flex-wrap: wrap; } .clock { display: none; } }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px;
  box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.card.flush { padding: 0; overflow: hidden; }
.card-title { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 12px; }
.card-title h3 { margin: 0; }

/* stat tiles */
.stat { position: relative; overflow: hidden; }
.stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.stat .value { font-size: 28px; font-weight: 750; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .sub { color: var(--muted); font-size: 12px; }
.stat::after { content: ""; position: absolute; inset: auto -30px -30px auto; width: 90px; height: 90px; border-radius: 50%;
  background: var(--tile, var(--primary)); opacity: .12; }
.stat.up { --tile: var(--up); } .stat.up .value { color: var(--up); }
.stat.down { --tile: var(--down); } .stat.down .value { color: var(--down); }
.stat.pending { --tile: var(--pending); } .stat.pending .value { color: var(--pending); }
.stat.maint { --tile: var(--maint); } .stat.maint .value { color: var(--maint); }
.stat.paused { --tile: var(--paused); } .stat.paused .value { color: var(--paused); }
.stat.hero { background: var(--grad); color: var(--primary-ink); border: none; }
.stat.hero .label, .stat.hero .sub { color: inherit; opacity: .85; }

/* ---------- buttons / inputs */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card-solid); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: .15s; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--grad); color: var(--primary-ink); border: none; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, var(--down) 12%, transparent); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.btn.icon { padding: 7px; }
.btn-group { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.btn-group button { border: none; background: transparent; color: var(--muted); padding: 6px 11px; font: inherit; font-weight: 600; cursor: pointer; }
.btn-group button.active { background: var(--grad); color: var(--primary-ink); }
input, select, textarea { width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--input); color: var(--text); font: inherit; outline: none; transition: .15s; }
select option, select optgroup { background: var(--card-solid); color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
textarea { min-height: 90px; resize: vertical; font-family: "PW Lao", ui-monospace, Consolas, monospace; font-size: 12.5px; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--primary); }
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
label.field > small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 4px; }
label.check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; margin: 4px 14px 8px 0; }
.search { position: relative; }
.search input { padding-left: 34px; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; color: var(--muted); }
fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 4px; margin: 0 0 14px; }
legend { padding: 0 6px; font-weight: 700; font-size: 12px; color: var(--primary); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- badges / chips */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em; background: var(--empty); color: var(--text); }
.badge.up { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); }
.badge.down { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); }
.badge.pending { background: color-mix(in srgb, var(--pending) 20%, transparent); color: var(--pending); }
.badge.maint { background: color-mix(in srgb, var(--maint) 20%, transparent); color: var(--maint); }
.badge.paused, .badge.unknown { background: color-mix(in srgb, var(--paused) 22%, transparent); color: var(--muted); }
.tag { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; margin: 1px 3px 1px 0;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.chip.active { background: var(--grad); color: var(--primary-ink); border-color: transparent; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot.up { background: var(--up); box-shadow: 0 0 8px var(--up); } .dot.down { background: var(--down); box-shadow: 0 0 8px var(--down); }
.dot.pending { background: var(--pending); } .dot.maint { background: var(--maint); } .dot.paused, .dot.unknown { background: var(--paused); }

/* ---------- monitor list */
.mon-list { overflow-y: auto; margin: 10px -6px 0; padding: 0 6px; flex: 1; }
.mon-item { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 11px;
  border-radius: 12px; cursor: pointer; border: 1px solid transparent; margin-bottom: 4px; }
.mon-item:hover { background: var(--hover); }
.mon-item.active { background: var(--hover); border-color: var(--primary); }
.mon-item .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-item .pct { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 54px; text-align: center; padding: 2px 6px; border-radius: 7px; }
.mon-item .beats { grid-column: 1 / -1; }
.mon-item.child { margin-left: 18px; }
.group-hdr { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin: 10px 6px 4px; }

/* beat bar */
.beats { display: flex; gap: 2px; height: 22px; align-items: stretch; }
.beats i { flex: 1; min-width: 3px; max-width: 9px; border-radius: 3px; background: var(--empty); transition: transform .12s; }
.beats i:hover { transform: scaleY(1.25); }
.beats.lg { height: 34px; gap: 3px; } .beats.lg i { max-width: 12px; border-radius: 4px; }
.beats i.s0 { background: var(--down); } .beats i.s1 { background: var(--up); } .beats i.s2 { background: var(--pending); } .beats i.s3 { background: var(--maint); }

/* ---------- tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; white-space: nowrap; }
th.sortable { cursor: pointer; } th.sortable:hover { color: var(--text); }
tbody tr:hover { background: var(--hover); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.uptime-bar { height: 6px; border-radius: 4px; background: var(--empty); overflow: hidden; margin-top: 3px; min-width: 70px; }
.uptime-bar > span { display: block; height: 100%; border-radius: 4px; }

/* ---------- tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; }
.tabs button { background: none; border: none; color: var(--muted); padding: 9px 14px; font: inherit; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- modal */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); z-index: 100; display: flex;
  align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; animation: fade .15s; }
.modal { background: var(--card-solid); border: 1px solid var(--border); border-radius: 18px; width: 100%; max-width: 760px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: pop .18s; }
.modal.wide { max-width: 1180px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; }
.modal-body { padding: 18px 20px; }
.modal-foot { position: sticky; bottom: 0; background: var(--card-solid); border-radius: 0 0 18px 18px; z-index: 2; display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--border); }
@keyframes fade { from { opacity: 0; } } @keyframes pop { from { transform: translateY(12px) scale(.98); opacity: 0; } }

/* toast */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { min-width: 260px; max-width: 420px; padding: 11px 14px; border-radius: 12px; background: var(--card-solid); border: 1px solid var(--border);
  box-shadow: var(--shadow); border-left: 4px solid var(--primary); animation: pop .2s; }
.toast.err { border-left-color: var(--down); } .toast.ok { border-left-color: var(--up); } .toast.warn { border-left-color: var(--pending); }

/* theme picker */
.theme-pop { position: absolute; right: 0; top: 44px; width: 300px; background: var(--card-solid); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); padding: 10px; z-index: 60; }
.theme-opt { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.theme-opt:hover, .theme-opt.active { background: var(--hover); }
.theme-opt.active { outline: 2px solid var(--primary); }
.swatch { width: 46px; height: 30px; border-radius: 8px; flex: none; border: 1px solid rgba(255,255,255,.2); }
.theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.theme-card { border-radius: 14px; overflow: hidden; cursor: pointer; border: 2px solid var(--border); }
.theme-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.theme-card .prev { height: 86px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.theme-card .prev b { height: 10px; border-radius: 5px; display: block; }
.theme-card .info { padding: 8px 10px; background: var(--card-solid); }

/* chart */
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; display: block; overflow: visible; }
.chart .tip { position: absolute; pointer-events: none; background: var(--card-solid); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 9px; font-size: 12px; box-shadow: var(--shadow); white-space: nowrap; transform: translate(-50%, -110%); }
.chart text { fill: var(--muted); font-size: 11px; }
.chart .grid line { stroke: var(--border); }

/* heatmap */
.heat { display: grid; gap: 2px; font-size: 11px; }
.heat .cell { height: 18px; border-radius: 3px; background: var(--empty); }
.heat .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; font-weight: 600; line-height: 18px; }

/* empty state */
.empty { text-align: center; padding: 40px 10px; color: var(--muted); }
.empty .big { font-size: 40px; margin-bottom: 6px; }

/* template editor */
.tpl-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .tpl-layout { grid-template-columns: 1fr; } }
.tg-preview { background: linear-gradient(180deg, #8fb3d9, #b7cfe8); border-radius: 12px; padding: 16px; min-height: 160px; }
.tg-bubble { background: #fff; color: #111; border-radius: 12px 12px 12px 4px; padding: 9px 12px; max-width: 92%; white-space: pre-wrap;
  font: 14px/1.4 "PW Lao", "Segoe UI", "Phetsarath OT", Arial; box-shadow: 0 1px 2px rgba(0,0,0,.15); word-break: break-word; }
.tg-bubble code { background: #eef2f7; padding: 0 3px; border-radius: 3px; color: #c2185b; }
.tg-bubble blockquote { border-left: 3px solid #3390ec; margin: 4px 0; padding-left: 8px; }
.tg-bubble .meta { text-align: right; font-size: 11px; color: #8a9aa9; margin-top: 4px; }
.email-preview { background: #fff; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
.email-preview .subj { padding: 10px 14px; background: #f3f5f9; color: #222; font-weight: 600; border-bottom: 1px solid #e3e7ef; }
.email-preview iframe { width: 100%; height: 380px; border: 0; background: #fff; }
.var-list { display: flex; flex-wrap: wrap; gap: 5px; max-height: 150px; overflow-y: auto; }
.var-list button { font: 11.5px "PW Lao", ui-monospace, Consolas, monospace; padding: 3px 7px; border-radius: 6px; border: 1px dashed var(--border);
  background: transparent; color: var(--accent); cursor: pointer; }
.var-list button:hover { background: var(--hover); }

/* channel cards */
.ch-card { display: flex; gap: 14px; align-items: flex-start; }
.ch-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 22px; }
.ch-icon.telegram { background: linear-gradient(135deg, #2aabee, #229ed9); }
.ch-icon.email { background: linear-gradient(135deg, #f97316, #ec4899); }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 400px; }
.login-card .logo { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 12px; }
.login-card .logo svg { width: 32px; height: 32px; }

/* status page */
.sp-hero { text-align: center; padding: 40px 10px 20px; }
.sp-banner { border-radius: 16px; padding: 18px 22px; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.sp-banner.ok { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); }
.sp-banner.bad { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); }
.sp-banner.warn { background: color-mix(in srgb, var(--pending) 18%, transparent); color: var(--pending); }

/* misc */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-all; }
.pill-sep { width: 1px; height: 22px; background: var(--border); }
.loading { opacity: .55; pointer-events: none; }
.spin { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.multi { position: relative; min-width: 0; }
.ms-btn { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 5px 8px 5px 11px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--input); color: var(--text); transition: .15s; user-select: none; }
.ms-btn:hover, .ms-btn.open, .ms-btn:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.ms-btn.has { background: color-mix(in srgb, var(--primary) 8%, var(--input)); }
.ms-lbl { flex: 1; min-width: 0; display: flex; gap: 5px; align-items: center; overflow: hidden; white-space: nowrap; }
.ms-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--text); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ms-chip i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.ms-more { font-size: 12px; font-weight: 700; color: var(--primary); }
.ms-x { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; font-size: 11px; color: var(--muted); }
.ms-x:hover { background: var(--hover); color: var(--down); }
.ms-caret { color: var(--muted); font-size: 12px; }
.ms-pop { position: fixed; z-index: 10000; display: flex; flex-direction: column; background: var(--card-solid); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent); overflow: hidden; animation: pop .14s; }
.ms-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ms-search input { border: none; background: transparent; padding: 4px 0; box-shadow: none !important; }
.ms-tools { display: flex; align-items: center; gap: 4px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.ms-tools button { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 7px; padding: 3px 9px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ms-tools button:hover { background: var(--hover); }
.ms-tools .ms-count { margin-left: auto; }
.ms-items { overflow-y: auto; padding: 6px; flex: 1; min-height: 60px; }
.ms-sec { display: flex; align-items: center; gap: 7px; padding: 8px 8px 4px; font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); cursor: pointer; position: sticky; top: -6px; background: var(--card-solid); z-index: 1; }
.ms-sec i { width: 9px; height: 9px; border-radius: 3px; }
.ms-sec .muted { margin-left: auto; font-weight: 600; }
.ms-opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; cursor: pointer; }
.ms-opt:hover { background: var(--hover); }
.ms-opt.on { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.ms-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ms-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-hint { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ms-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-top: 1px solid var(--border); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }

/* print (reports) */
@media print {
  body { background: #fff !important; color: #111 !important; }
  .topbar, .no-print, #toasts { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; background: #fff !important; break-inside: avoid; }
  .container { max-width: none; padding: 0; }
  .print-only { display: block !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.print-only { display: none; }
@media print {
  html[data-theme] { --text: #111; --muted: #555; --border: #ddd; --card: #fff; --card-solid: #fff; --surface: #fff;
    --empty: #e5e7eb; --hover: transparent; --up: #16a34a; --down: #dc2626; --pending: #d97706; --maint: #6366f1; --scheme: light; }
}

/* group headers in monitor list */
.grp-hdr { display: flex; align-items: center; gap: 7px; padding: 8px 10px; margin: 10px 0 4px; border-radius: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--gc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 30%, transparent); user-select: none; }
.grp-hdr:first-child { margin-top: 0; }
.grp-hdr .gdot { width: 10px; height: 10px; border-radius: 3px; background: var(--gc); }
.grp-hdr .caret { width: 10px; color: var(--muted); font-size: 11px; }

/* systems quick-launch */
.sys-pop { position: fixed; z-index: 10000; width: 370px; max-height: 70vh; display: flex; flex-direction: column; background: var(--card-solid);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; animation: pop .14s; }
.sys-head, .sys-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.sys-foot { border-top: 1px solid var(--border); border-bottom: none; }
.sys-body { overflow-y: auto; padding: 6px; }
.sys-cat { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 8px 4px; }
.sys-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--text); }
.sys-item:hover { background: var(--hover); text-decoration: none; }
.sys-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.sys-tx { flex: 1; min-width: 0; } .sys-tx b { display: block; } .sys-tx small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.sys-tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--border);
  color: var(--text); overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; box-shadow: var(--shadow); }
.sys-tile:hover { transform: translateY(-3px); border-color: var(--tc); text-decoration: none; box-shadow: 0 14px 34px color-mix(in srgb, var(--tc) 30%, transparent); }
.sys-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tc); }
.sys-tile::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: var(--tc); opacity: .1; }
.sys-tile .big-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 26px; background: var(--tc); }
.sys-tile b { font-size: 16px; } .sys-tile .d { color: var(--muted); font-size: 13px; min-height: 18px; }
.sys-tile .meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: auto; }
/* recipient picker */
.rcp-box { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 40px; padding: 5px 8px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--input); cursor: text; }
.rcp-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.rcp-chips { display: contents; }
.rcp-in { flex: 1; min-width: 160px; border: none !important; background: transparent !important; box-shadow: none !important; padding: 4px 2px !important; }
.rcp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, var(--primary) 16%, transparent); }
.rcp-chip.list { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.rcp-chip.raw { background: var(--hover); }
.rcp-chip.bad { background: color-mix(in srgb, var(--down) 20%, transparent); color: var(--down); }
.rcp-chip.off { opacity: .55; text-decoration: line-through; }
.rcp-chip small { font-weight: 700; opacity: .75; }
.rcp-chip b { cursor: pointer; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; font-size: 10px; opacity: .7; }
.rcp-chip b:hover { background: color-mix(in srgb, var(--down) 25%, transparent); opacity: 1; }
.rcp-pop { position: fixed; z-index: 10001; max-height: 300px; overflow-y: auto; background: var(--card-solid); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.45); padding: 5px; }
.rcp-opt { padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.rcp-opt small { display: block; color: var(--muted); font-size: 11.5px; }
.rcp-opt.on, .rcp-opt:hover { background: var(--hover); }

/* license banner */
.lic-banner { padding: 8px 20px; font-size: 13px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--pending) 16%, var(--card-solid)); color: var(--text); }
.lic-banner.down { background: color-mix(in srgb, var(--down) 18%, var(--card-solid)); }
.lic-banner a { color: var(--primary); margin-left: 6px; }
#tabs { flex-wrap: wrap; row-gap: 2px; }
/* ---------- server (Linux SSH) visualisations — shared desktop / mobile */
.hv-gauge { display: inline-flex; flex-direction: column; align-items: center; }
.hv-gl { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: -10px; text-transform: uppercase; letter-spacing: .05em; }
.hv-tip { position: absolute; top: 6px; transform: translateX(-50%); display: none; pointer-events: none; z-index: 3; padding: 7px 10px; border-radius: 10px;
  background: var(--card-solid); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 12px; white-space: nowrap; }
.hv-tip i, .hv-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.hv-leg { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.hv-empty { padding: 30px; text-align: center; color: var(--muted); }
.hv-grid { display: grid; gap: 2px; font-size: 10px; color: var(--muted); }
.hv-grid .hv-c { height: 20px; border-radius: 3px; cursor: pointer; }
.hv-grid.cmp .hv-c { height: auto; aspect-ratio: 1; min-height: 8px; }
.hv-grid.wk .hv-c { aspect-ratio: auto; height: 18px; }
.hv-grid .hv-c:hover, .hv-grid .hv-c.sel { outline: 2px solid var(--text); outline-offset: -1px; }
.hv-grid .hv-h { text-align: center; font-weight: 700; }
.hv-grid .hv-l { display: flex; align-items: center; font-weight: 700; white-space: nowrap; overflow: hidden; }
.hv-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 12px; }
.hv-months div { padding: 8px 10px; border-radius: 10px; background: var(--input); font-size: 12px; display: flex; flex-direction: column; gap: 1px; }
.hv-months div > b { font-size: 13px; }
.hv-bar { height: 8px; border-radius: 5px; background: var(--empty); overflow: hidden; }
.hv-bar i { display: block; height: 100%; border-radius: 5px; }