:root {
  color-scheme: dark;
  --bg: #0f1216;
  --surface: #171b22;
  --surface-2: #1d2330;
  --line: #2a3342;
  --text: #e6edf3;
  --muted: #9aa7b5;
  --accent: #3fb8a5;
  --accent-2: #7aa2f7;
  --danger: #e06c75;
  --danger-bg: #2a1b1f;
  --input-bg: #121821;
}
*,
*::before,
*::after { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 18px; background: var(--bg); color: var(--text); }
h3 { margin: 8px 0 10px; }
.grid { display: grid; grid-template-columns: 420px 1fr; gap: 18px; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
td { font-size: 13px; }
th { color: var(--muted); font-weight: 400; font-size: 12px; }
.muted { color: var(--muted); font-size: 12px; }
.err { color: var(--danger); margin: 10px 0; }
.btn { padding: 6px 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 8px; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn-danger { border-color: #5a2a33; background: var(--danger-bg); color: #f2c1c6; }
.icon-btn { display: inline-flex; padding: 0; border: 0; background: transparent; color: #6f7b8a; cursor: pointer; font-size: 13px; }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.icon-btn:hover { color: #f08b94; }
input[type=text] { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg); color: var(--text); }
input[type=text]::placeholder { color: #6f7b8a; }
.row { display:flex; gap:10px; }
.row > div { flex: 1; }
.chart { height: 260px; border:1px solid var(--line); border-radius: 10px; padding: 10px; background: #11161e; }
.chart canvas { width: 100% !important; height: 100% !important; display: block; }
.bar { height: 12px; margin: 2px 0; border-radius: 4px; }
.bar.up { background: #2ecc71; }
.bar.down { background: #e06c75; }
a { color: var(--accent-2); text-decoration:none; }
a:hover { text-decoration:underline; }
.status-icon { font-size: 10px; }
.status-default { color:#5f6b7a; }
.status-ok { color:#2ecc71; }
.status-warning { color:#f2c94c; }
.status-error { color:#e06c75; }
.ssl-icon { font-size: 13px; }
.ssl-ok { color: #2ecc71; }
.ssl-warning { color: #f2c94c; }
.ssl-error { color: #e06c75; }
.history-table { margin-top: 12px; font-size: 12px; }
.history-table td { font-size: 12px; }
.history-table .row-warning { background: rgba(242, 201, 76, 0.08); }
.history-table .row-error { background: rgba(224, 108, 117, 0.12); }
.history-table .row-ok { background: rgba(46, 204, 113, 0.08); }
.status-table .day-separator td { padding: 10px 8px; color: var(--muted); background: rgba(17, 22, 30, 0.8); font-weight: 600; }