:root { --bg:#f5f6f8; --card:#fff; --text:#1d2330; --muted:#6b7385; --line:#e2e5eb; --primary:#1f5eff; --primary-d:#1648c7;
  --ok:#1a7f4b; --okbg:#e3f5ea; --warn:#8a5a00; --warnbg:#fff3d6; --bad:#b42318; --badbg:#fde7e4; --internal:#fff8e1; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--primary); text-decoration:none; } a:hover { text-decoration:underline; }
.topbar { display:flex; align-items:center; gap:24px; padding:0 20px; height:52px; background:#111a2e; color:#fff; flex-wrap:wrap; }
.topbar a { color:#cdd6ea; } .topbar a.active, .topbar a:hover { color:#fff; }
.brand { font-weight:700; color:#fff !important; font-size:16px; }
.topbar nav { display:flex; gap:16px; flex:1; flex-wrap:wrap; }
.me { display:flex; gap:12px; align-items:center; }
main { max-width:1280px; margin:24px auto; padding:0 16px; } main.narrow { max-width:440px; margin-top:8vh; }
h1 { font-size:22px; margin:0 0 16px; } h2 { font-size:17px; margin:0 0 12px; } h3 { font-size:15px; margin:0 0 10px; }
.pagehead { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; } .pagehead h1 { margin:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin-bottom:16px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:16px; align-items:start; }
label { display:block; margin-bottom:12px; font-weight:500; }
label.check { display:flex; gap:8px; align-items:flex-start; font-weight:400; } label.check input { margin-top:3px; }
input:not([type=checkbox]):not([type=radio]), select, textarea { display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid #c9ced8; border-radius:6px; font:inherit; background:#fff; }
textarea { resize:vertical; }
fieldset { border:1px solid var(--line); border-radius:8px; padding:14px; margin:0 0 14px; } legend { font-weight:600; padding:0 6px; }
.row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.btn { display:inline-block; padding:8px 14px; border:1px solid #c9ced8; border-radius:6px; background:#fff; color:var(--text); font:inherit; cursor:pointer; text-decoration:none !important; }
.btn:hover { background:#f0f2f6; } .btn.primary { background:var(--primary); border-color:var(--primary); color:#fff; } .btn.primary:hover { background:var(--primary-d); }
.btn.danger { color:var(--bad); border-color:#f0b4ad; } .btn.block { display:block; width:100%; text-align:center; margin-bottom:8px; } .btn.small { padding:4px 10px; font-size:13px; }
button.link { background:none; border:0; color:inherit; cursor:pointer; padding:0; font:inherit; text-decoration:underline; }
.topbar button.link { color:#cdd6ea; }
form.inline { display:inline; } .actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.inline-form { display:flex; gap:8px; align-items:center; } .inline-form input { margin:0 !important; width:280px !important; }
.flash { padding:10px 14px; border-radius:8px; background:var(--okbg); color:var(--ok); margin-bottom:16px; border:1px solid #bfe5cd; }
.flash.err { background:var(--badbg); color:var(--bad); border-color:#f3c1ba; }
.muted { color:var(--muted); } .small { font-size:12.5px; } .center { text-align:center; }
table.list { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:20px; }
table.list th, table.list td { padding:9px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
table.list th { background:#fafbfc; font-weight:600; font-size:13px; color:var(--muted); }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .filters input, .filters select { width:auto; margin:0; }
.filters input[type=search] { min-width:260px; }
.badge { display:inline-block; padding:1px 8px; border-radius:20px; font-size:12px; background:#eef0f4; color:#3b4256; white-space:nowrap; }
.badge.ok { background:var(--okbg); color:var(--ok); } .badge.warn { background:var(--warnbg); color:var(--warn); } .badge.bad { background:var(--badbg); color:var(--bad); }
.pr-urgent { background:#b42318; color:#fff; } .pr-high { background:var(--badbg); color:var(--bad); } .pr-low { background:#f0f0f0; color:#777; }
.kind-internal { background:var(--warnbg); color:var(--warn); } .kind-inbound { background:#e3ecff; color:#1f4fd1; }
.ticket { display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }
@media (max-width: 900px) { .ticket { grid-template-columns:1fr; } }
.msg { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:12px; }
.msg.internal { background:var(--internal); border-color:#f1dea0; }
.msg header { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; } .msg header time { margin-left:auto; color:var(--muted); font-size:12.5px; }
.msg pre.body { white-space:pre-wrap; word-wrap:break-word; font:inherit; margin:0; }
.atts { list-style:none; padding:0; margin:10px 0 0; } .atts li { display:inline-block; margin-right:14px; }
.tabs { display:flex; gap:20px; margin-bottom:10px; flex-wrap:wrap; }
dl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0 0 12px; } dt { color:var(--muted); } dd { margin:0; word-break:break-all; }
ul.codes { columns:2; list-style:none; padding:0; font-size:16px; } ul.codes li { padding:4px 0; }
ul.history { list-style:none; padding:0; margin:0; } ul.history li { padding:4px 0; border-bottom:1px solid var(--line); } ul.history time { color:var(--muted); }
.pager { display:flex; gap:16px; justify-content:center; }
code { background:#f0f2f6; padding:1px 5px; border-radius:4px; font-size:12.5px; }
[hidden] { display:none !important; }
.settings-layout { display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:start; }
.settings-nav { position:sticky; top:16px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px; }
.settings-nav a { display:block; padding:8px 12px; border-radius:6px; color:var(--text); }
.settings-nav a:hover { background:#f0f2f6; text-decoration:none; }
.settings-nav a.active { background:#e3ecff; color:var(--primary); font-weight:600; }
.settings-title { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:6px 12px; }
.settings-body { min-width:0; }
.checklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:2px 16px; margin-bottom:12px; }
@media (max-width: 800px) { .settings-layout { grid-template-columns:1fr; } .settings-nav { position:static; } }
.settings-nav a.parent { font-weight:600; }
.settings-nav a.sub { padding-left:26px; font-size:13.5px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:20px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; color:var(--muted); text-decoration:none !important; }
.kpi .n { display:block; font-size:28px; font-weight:700; color:var(--text); } .kpi.hot .n { color:var(--bad); }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.tile { background:#fff; border:1px solid var(--line); border-top:4px solid var(--tc,#1f5eff); border-radius:10px; padding:14px 16px; }
.tile.wide { grid-row:span 2; }
.tile-head { display:flex; justify-content:space-between; gap:8px; } .tile-title { font-weight:600; color:var(--text); } .tile-edit { color:var(--muted); }
.tile-count { display:block; font-size:34px; font-weight:700; color:var(--tc,#1f5eff); text-decoration:none !important; }
.tile-groups { list-style:none; padding:0; margin:8px 0 0; } .tile-groups a { display:flex; justify-content:space-between; gap:8px; padding:4px 0; border-bottom:1px solid var(--line); color:var(--text); }
.c-blue { --tc:#1f5eff; } .c-green { --tc:#1a7f4b; } .c-orange { --tc:#c26a00; } .c-red { --tc:#b42318; } .c-purple { --tc:#6b3fd1; } .c-gray { --tc:#5b6274; }
.scroll-x { overflow-x:auto; } td.num, th.num { text-align:right; }
.filters label { margin:0; font-size:12.5px; }
.tabnav { display:flex; gap:2px; border-bottom:2px solid var(--line); margin:14px 0 18px; flex-wrap:wrap; }
.tabnav a { padding:8px 14px; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-2px; text-decoration:none !important; }
.tabnav a.active { color:var(--primary); border-color:var(--primary); font-weight:600; }
.tabnav .count { background:#eef0f4; border-radius:10px; padding:0 7px; font-size:11.5px; color:var(--muted); }
.map { width:100%; height:300px; border:0; border-radius:8px; }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.gallery.large { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); margin-bottom:16px; }
.gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:#f0f2f6; }
.gallery figure { margin:0; } .gallery figcaption { font-size:12.5px; color:var(--muted); padding:4px 2px; }
.mono, pre.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; }
details.doc summary { cursor:pointer; } details.doc pre { margin-top:10px; }
h3.doc-cat { margin:18px 0 8px; color:var(--muted); text-transform:uppercase; font-size:12px; letter-spacing:.05em; }
.nowrap { white-space:nowrap; } .text-bad { color:var(--bad); } .text-ok { color:var(--ok) !important; } .text-warn { color:var(--warn) !important; }
.secret-notes { white-space:pre-wrap; font-family:ui-monospace,monospace; margin-top:4px; }
.hosts { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.host-row { border-bottom:1px solid var(--line); padding-bottom:10px; }
.host-main { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.host-main .checks { display:flex; gap:4px; flex-wrap:wrap; flex:1; }
.uptime-pct { font-weight:600; min-width:60px; text-align:right; }
.dot { display:inline-block; width:11px; height:11px; border-radius:50%; background:#b7bcc8; flex:none; }
.dot.big { width:16px; height:16px; vertical-align:middle; }
.dot.up { background:#1a9e5c; } .dot.degraded { background:#e3a008; } .dot.down { background:#d92d20; }
.chk { font-size:11.5px; padding:1px 7px; border-radius:10px; background:#eef0f4; color:#555; white-space:nowrap; }
.chk.up { background:var(--okbg); color:var(--ok); } .chk.down { background:var(--badbg); color:var(--bad); } .chk.degraded { background:var(--warnbg); color:var(--warn); }
.uptime-bars { width:100%; height:28px; display:block; }
.ub.ok { fill:#1a9e5c; } .ub.minor { fill:#e3c008; } .ub.major { fill:#ef8a17; } .ub.bad { fill:#d92d20; } .ub.nodata { fill:#dfe2e8; }
.latency-chart { width:100%; height:auto; display:block; }
.lc-line { fill:none; stroke:#1f5eff; stroke-width:1.6; } .lc-axis { stroke:#c9ced8; } .lc-label { font-size:10px; fill:#6b7385; } .lc-down { fill:#d92d20; opacity:.25; }
.credits { display:flex; gap:18px; align-items:center; }
.credits-logo { width:72px; height:72px; border-radius:14px; background:#111a2e; color:#fff; font-weight:800; font-size:20px; letter-spacing:1px; display:flex; align-items:center; justify-content:center; flex:none; }
.badge.info { background:#e3ecff; color:#1f4fd1; }
ul.changes { margin:0 0 14px; padding-left:20px; } ul.changes li { margin-bottom:6px; }
.app-footer { max-width:1280px; margin:0 auto 24px; padding:0 16px; color:var(--muted); font-size:12.5px; }