:root {
    --bg: #f5f8fc;
    --bg-soft: #eef3f9;
    --panel: #ffffff;
    --line: #e2e8f0;
    --line-soft: #eef2f7;
    --text: #0f172a;
    --muted: #64748b;
    --muted-2: #8a99ad;
    --sidebar: #0b1626;
    --sidebar2: #13233a;
    --sidebar-card: rgba(255, 255, 255, .08);
    --green: #22c55e;
    --green-bg: #dcfce7;
    --blue: #2563eb;
    --blue-bg: #dbeafe;
    --red: #ef4444;
    --red-bg: #fee2e2;
    --orange: #f97316;
    --orange-bg: #ffedd5;
    --yellow: #eab308;
    --yellow-bg: #fef9c3;
    --shadow: 0 18px 48px rgba(15, 23, 42, .07);
    --shadow-soft: 0 10px 26px rgba(15, 23, 42, .05);
    --radius: 18px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 34% 0%, rgba(37, 99, 235, .06), transparent 30%),
        linear-gradient(180deg, #fbfdff 0, var(--bg) 260px);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { appearance: none; }
.layout { display: flex; min-height: 100vh; }
.sidebar {
    width: 276px;
    min-width: 276px;
    background:
        radial-gradient(circle at 12% 0%, rgba(34, 197, 94, .18), transparent 24%),
        linear-gradient(180deg, #172942 0, var(--sidebar) 48%, #07101c 100%);
    color: white;
    padding: 28px 18px 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid rgba(255, 255, 255, .06);
}
.brand {
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 62px;
    padding: 2px 10px 34px;
}
.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(34, 197, 94, .12);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .22), 0 14px 32px rgba(34, 197, 94, .10);
}
.brand-mark span {
    width: 18px;
    height: 12px;
    display: block;
    border-radius: 2px;
    background: linear-gradient(135deg, transparent 0 24%, #34f39a 25% 36%, transparent 37% 50%, #34f39a 51% 62%, transparent 63%);
    transform: rotate(18deg);
}
.brand-name { font-weight: 700; font-size: 24px; letter-spacing: -.025em; line-height: 1; }
.brand-version { color: #a9b8cf; margin-top: 7px; font-size: 14px; font-weight: 600; }
.nav { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 126px); }
.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 14px 16px;
    border-radius: 14px;
    color: #dce6f5;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-item.active {
    background: rgba(255, 255, 255, .13);
    color: #31ef94;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.nav-icon {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    color: currentColor;
    opacity: .95;
    position: relative;
}
.nav-icon:before, .nav-icon:after { content: ""; display: block; position: absolute; }
.nav-icon-pulse:before {
    width: 18px;
    height: 12px;
    background: linear-gradient(135deg, transparent 0 25%, currentColor 26% 36%, transparent 37% 50%, currentColor 51% 61%, transparent 62%);
    transform: rotate(16deg);
}
.nav-icon-target:before { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; }
.nav-icon-target:after { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.nav-icon-backup:before { width: 15px; height: 14px; border: 2px solid currentColor; border-radius: 3px; }
.nav-icon-backup:after { width: 9px; height: 2px; background: currentColor; box-shadow: 0 4px 0 currentColor; }
.nav-icon-settings:before { width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; }
.nav-icon-settings:after { width: 5px; height: 5px; background: currentColor; border-radius: 50%; box-shadow: 0 -10px 0 -1px currentColor, 0 10px 0 -1px currentColor, 10px 0 0 -1px currentColor, -10px 0 0 -1px currentColor; }
.nav-icon-logout:before { width: 14px; height: 14px; border: 2px solid currentColor; border-right: 0; border-radius: 4px 0 0 4px; opacity: .9; }
.nav-icon-logout:after { width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); right: 2px; }
.settings-link { margin-top: auto; }
.logout-form { margin: 0; }
.logout-button {
    width: 100%;
    border: 0;
    cursor: pointer;
    text-align: left;
    background: rgba(255, 255, 255, .06);
    color: #dce6f5;
}
.logout-button:hover { background: rgba(255, 255, 255, .11); color: #fff; }
.main {
    flex: 1;
    min-width: 0;
    padding-bottom: 40px;
}
.page-header {
    min-height: 96px;
    padding: 0 40px;
    background: rgba(255, 255, 255, .82);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(14px);
}
.page-header.simple { justify-content: flex-start; }
h1 { margin: 0; font-size: 32px; line-height: 1.05; letter-spacing: -.025em; font-weight: 700; }
p { margin: 0; color: var(--muted); }
.page-header p { margin-top: 8px; font-size: 15px; }
.stats-grid, .dashboard-grid, .content-grid, .form-grid, .settings-grid, .schedule-card { margin: 28px 40px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.stat-card, .card {
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}
.stat-card {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 24px;
    min-height: 112px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: #d6e1ee; }
.stat-card strong { display: block; font-size: 30px; line-height: 1; letter-spacing: -.025em; margin: 6px 0 8px; }
.stat-card span, .muted, .small-muted { color: var(--muted); }
.small-muted { font-size: 13px; margin-top: 5px; }
.icon, .round {
    width: 48px; height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: 0 0 auto;
}
.round { border-radius: 14px; }
.icon.ok, .round.ok { color: #16a34a; background: var(--green-bg); }
.icon.warning, .icon.warn, .round.warn { color: var(--orange); background: var(--orange-bg); }
.icon.alarm, .round.alarm { color: var(--red); background: var(--red-bg); }
.icon.info, .round.info { color: var(--blue); background: var(--blue-bg); }
.icon.unknown, .round.muted-round { color: var(--muted); background: #eef2f7; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .8fr); gap: 26px; align-items: start; }
.side-column { display: flex; flex-direction: column; gap: 22px; }
.card { padding: 0; overflow: hidden; }
.card-title { font-weight: 600; font-size: 20px; line-height: 1.1; letter-spacing: -.025em; padding: 24px 24px 22px; }
.card-heading { display: flex; align-items: center; gap: 16px; padding: 22px 24px 6px; }
.card-heading .card-title { padding: 0; }
table { width: 100%; border-collapse: collapse; }
th {
    color: #53657e;
    font-weight: 600;
    text-align: left;
    font-size: 13px;
    padding: 14px 24px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background: #fbfdff;
}
td { padding: 17px 24px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: #fbfdff; }
tr:last-child td { border-bottom: none; }
.strong-link { font-weight: 600; letter-spacing: -.02em; }
.strong-link:hover { color: #1d4ed8; }
.actions { color: #39506f; font-size: 20px; text-align: right; }
.actions a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #38557a; }
.actions a:hover { background: #eef4fb; color: #0f172a; }
.empty { color: var(--muted); text-align: center; padding: 28px 24px; }
.card-link { display: inline-block; padding: 18px 24px 22px; color: #1d3b63; font-weight: 600; }
.card-link:hover { color: #1d4ed8; }
.compact th, .compact td { padding: 12px 20px; }
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 9px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
}
.badge.ok, .badge.success { color: #15803d; background: var(--green-bg); }
.badge.warning, .badge.warn, .badge.running { color: #1d4ed8; background: var(--blue-bg); }
.badge.alarm, .badge.failed { color: #dc2626; background: var(--red-bg); }
.badge.unknown { color: var(--muted); background: #eef2f7; }
.badge.critical, .badge.high { color: #dc2626; background: var(--red-bg); }
.badge.medium { color: #ea580c; background: var(--orange-bg); }
.badge.low { color: #1d4ed8; background: var(--blue-bg); }
.list { padding: 0 24px 16px; }
.list-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line-soft); }
.list-row p { margin-top: 4px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--muted); box-shadow: 0 0 0 4px rgba(100, 116, 139, .12); }
.dot.danger { background: var(--red); box-shadow-color: rgba(239, 68, 68, .14); }
.dot.orange { background: var(--orange); box-shadow-color: rgba(249, 115, 22, .14); }
.dot.warn { background: var(--yellow); box-shadow-color: rgba(234, 179, 8, .16); }
.dot.blue { background: var(--blue); box-shadow-color: rgba(37, 99, 235, .14); }
.dot.ok { background: var(--green); box-shadow-color: rgba(34, 197, 94, .14); }
.btn {
    border: 1px solid var(--line);
    border-radius: 12px;
    min-height: 44px;
    padding: 11px 18px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: white;
    color: #172033;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15, 23, 42, .08); }
.btn.primary { background: var(--blue); color: white; border-color: var(--blue); box-shadow: 0 10px 22px rgba(37,99,235,.2); }
.btn.primary.dark { background: #0d1b2f; border-color: #0d1b2f; box-shadow: 0 14px 28px rgba(15, 27, 45, .18); }
.btn.secondary { background: white; color: #172033; }
.btn.danger { background: var(--red-bg); color: var(--red); border-color: #fecaca; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.button-row { display: flex; gap: 10px; align-items: center; }
.toolbar { margin: 28px 40px; padding: 0 18px; min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.card.flat { box-shadow: var(--shadow-soft); }
.tabs { display: flex; min-height: 80px; align-items: center; gap: 18px; }
.tab { min-height: 80px; display: flex; align-items: center; padding: 0 8px; color: #49617f; font-weight: 600; border-bottom: 3px solid transparent; }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.search-form input { width: 320px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.summary-card { padding-bottom: 18px; }
.summary-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line-soft); }
.summary-row .round { width: 34px; height: 34px; }
.summary-row strong { font-size: 24px; letter-spacing: -.02em; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 28px; align-items: start; }
.form-card, .hint-card, .settings-card { padding: 26px; }
label { display: flex; flex-direction: column; gap: 10px; font-weight: 600; margin-bottom: 20px; color: #27364d; }
label span { color: var(--muted); font-weight: 500; }
input, select {
    width: 100%;
    border: 1px solid #d8e1ed;
    border-radius: 12px;
    background: white;
    padding: 13px 14px;
    outline: none;
    color: #26364d;
    transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,235,.09); }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; font-weight: 700; padding: 6px 0 28px; }
.switch input { display: none; }
.switch { margin: 0; }
.switch span { display: block; width: 56px; height: 30px; border-radius: 100px; background: #cbd5e1; position: relative; transition: .2s; }
.switch span:before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: white; position: absolute; left: 3px; top: 3px; transition: .2s; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span:before { transform: translateX(26px); }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--line); margin: 6px -26px -26px; padding: 22px 26px; }
.hint-card .card-title { padding: 0 0 12px; }
.hint-row { display: flex; gap: 16px; align-items: center; padding: 14px 0; }
.hint-row .round { width: 44px; height: 44px; }
.hint-row p { margin-top: 3px; }
.info-box { margin-top: 18px; background: var(--blue-bg); color: #1e40af; padding: 16px; border-radius: 12px; }
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: stretch; }
.settings-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-card.wide, .settings-wide { grid-column: 1 / -1; }
.settings-card .btn { width: 100%; }
.settings-panel { display: flex; flex-direction: column; min-height: 100%; padding: 0; overflow: hidden; }
.settings-card-head { display: flex; align-items: flex-start; gap: 16px; padding: 24px 24px 18px; border-bottom: 1px solid var(--line-soft); }
.settings-card-head .card-title { padding: 0; margin: 0 0 4px; font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.settings-card-head p { max-width: 420px; line-height: 1.45; }
.settings-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    position: relative;
    color: var(--blue);
    background: linear-gradient(135deg, #dbeafe, #eef5ff);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .06);
}
.settings-icon:before, .settings-icon:after { content: ""; position: absolute; display: block; box-sizing: border-box; }
.settings-icon-telegram:before {
    width: 22px;
    height: 18px;
    clip-path: polygon(0 44%, 100% 0, 74% 100%, 49% 62%, 25% 82%);
    background: currentColor;
    opacity: .92;
}
.settings-icon-telegram:after {
    width: 10px;
    height: 2px;
    background: #dbeafe;
    transform: rotate(-31deg);
    left: 17px;
    top: 22px;
    border-radius: 99px;
}
.settings-icon-backup:before {
    width: 22px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 5px;
    top: 15px;
}
.settings-icon-backup:after {
    width: 10px;
    height: 2px;
    background: currentColor;
    border-radius: 99px;
    top: 22px;
    box-shadow: 0 5px 0 currentColor;
}
.settings-icon-general:before {
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 -2px 0 3px #dbeafe inset;
}
.settings-icon-general:after {
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: #dbeafe;
}
.settings-fields { padding: 22px 24px 4px; }
.settings-fields label { margin-bottom: 18px; font-weight: 620; color: #243247; }
.settings-fields input { margin-top: 1px; }
.interval-row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.settings-card-footer, .settings-save-row { margin-top: auto; padding: 18px 24px 24px; }
.settings-card-footer { border-top: 1px solid var(--line-soft); }
.settings-test-btn { width: 100%; }
.settings-common-grid { max-width: 880px; }
.settings-save-row { display: flex; justify-content: flex-end; border-top: 1px solid var(--line-soft); }
.settings-save-row .btn { min-width: 210px; }
.notice { margin: 20px 40px 0; padding: 14px 18px; border-radius: 12px; font-weight: 600; }
.notice.ok { color: #166534; background: var(--green-bg); }
.notice.error { color: #991b1b; background: var(--red-bg); }
.schedule-card { padding-bottom: 20px; }
.schedule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 24px 24px; }
.schedule-grid > div { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 20px; }
.schedule-grid strong { display: block; margin-top: 4px; font-size: 18px; }
.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 0, rgba(37, 99, 235, .09), transparent 34%),
        #f4f7fb;
}
.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.auth-card {
    width: min(420px, 100%);
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(20, 36, 64, 0.12);
    padding: 28px;
}
.auth-brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
}
.auth-form { display: grid; gap: 16px; }
.auth-form label {
    display: grid;
    gap: 8px;
    color: #4b5870;
    font-size: 14px;
    margin: 0;
}
.auth-form input {
    width: 100%;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    padding: 12px 14px;
    font: inherit;
    background: #fbfdff;
}
.auth-error {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff1f1;
    color: #a33030;
    font-size: 14px;
}
.auth-form .btn { width: 100%; }
@media (max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid, .content-grid, .form-grid, .settings-grid { grid-template-columns: 1fr; }
    .summary-card { order: -1; }
}
@media (max-width: 800px) {
    .layout { display: block; }
    .sidebar { width: 100%; min-width: 0; height: auto; position: static; padding: 22px 18px; }
    .brand { padding-bottom: 20px; }
    .nav { height: auto; }
    .settings-link { margin-top: 0; }
    .page-header { min-height: 0; padding: 24px; gap: 16px; align-items: flex-start; flex-direction: column; }
    .stats-grid, .dashboard-grid, .content-grid, .form-grid, .settings-grid, .toolbar, .schedule-card { margin: 20px; }
    .notice { margin-left: 20px; margin-right: 20px; }
    .stats-grid { grid-template-columns: 1fr; }
    .two-cols, .schedule-grid, .settings-common-grid { grid-template-columns: 1fr; }
    .settings-card-head { padding: 22px 20px 16px; }
    .settings-fields, .settings-intervals, .settings-card-footer, .settings-save-row { padding-left: 20px; padding-right: 20px; }
    .settings-save-row .btn { width: 100%; }
    .toolbar { align-items: stretch; flex-direction: column; padding: 16px; }
    .tabs { min-height: 0; height: auto; gap: 8px; flex-wrap: wrap; }
    .tab { min-height: 40px; }
    .search-form input { width: 100%; }
    table { display: block; overflow-x: auto; }
}

.icon { position: relative; }
.icon:before, .icon:after { content: ""; position: absolute; display: block; box-sizing: border-box; }
.icon.ok:before {
    width: 12px;
    height: 20px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(40deg) translate(-1px, -2px);
}
.icon.alarm:before {
    width: 4px;
    height: 18px;
    border-radius: 99px;
    background: currentColor;
    top: 12px;
}
.icon.alarm:after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    bottom: 11px;
}
.icon.warning:before, .icon.warn:before {
    width: 4px;
    height: 17px;
    border-radius: 99px;
    background: currentColor;
    top: 12px;
}
.icon.warning:after, .icon.warn:after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    bottom: 11px;
}
.icon.unknown:before {
    content: "?";
    position: static;
    font-weight: 700;
}
.icon-response:before {
    width: 21px;
    height: 21px;
    border: 2px solid currentColor;
    border-radius: 50%;
}
.icon-response:after {
    width: 9px;
    height: 2px;
    background: currentColor;
    transform-origin: left center;
    transform: rotate(-35deg);
    left: 24px;
    top: 22px;
}
.icon-ssl:before {
    width: 20px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 4px;
    bottom: 12px;
}
.icon-ssl:after {
    width: 14px;
    height: 13px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    top: 10px;
}
.icon-domain:before {
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 50%;
}
.icon-domain:after {
    width: 22px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -7px 0 -1px currentColor, 0 7px 0 -1px currentColor;
}
.site-stats-grid { margin-bottom: 20px; }
.site-summary-card { margin: 0 40px 28px; }
.site-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}
.site-summary-grid > div {
    min-width: 0;
    padding: 20px 24px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
.site-summary-grid > div:nth-child(3n) { border-right: 0; }
.site-summary-grid > div:nth-last-child(-n+3) { border-bottom: 0; }
.site-summary-grid span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}
.site-summary-grid strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.site-summary-grid strong .badge { display: inline-flex; margin-bottom: 0; }
.table-wrap { overflow-x: auto; }
.message-cell {
    max-width: 420px;
    white-space: normal;
    overflow-wrap: anywhere;
    color: #4b5f7b;
}
.form-notice { margin: 0 0 20px; }

@media (max-width: 1200px) {
    .site-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-summary-grid > div:nth-child(3n) { border-right: 1px solid var(--line-soft); }
    .site-summary-grid > div:nth-child(2n) { border-right: 0; }
    .site-summary-grid > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
    .site-summary-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 800px) {
    .site-summary-card { margin: 0 20px 20px; }
    .site-summary-grid { grid-template-columns: 1fr; }
    .site-summary-grid > div,
    .site-summary-grid > div:nth-child(2n),
    .site-summary-grid > div:nth-child(3n),
    .site-summary-grid > div:nth-last-child(-n+2),
    .site-summary-grid > div:nth-last-child(-n+3) { border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .site-summary-grid > div:last-child { border-bottom: 0; }
    .button-row { flex-wrap: wrap; width: 100%; }
    .button-row .btn, .button-row form { width: 100%; }
}

.action-edit:before {
    content: "";
    width: 15px;
    height: 15px;
    display: block;
    background: currentColor;
    clip-path: polygon(10% 72%, 70% 12%, 88% 30%, 28% 90%, 6% 94%);
}
.round.warning { color: var(--orange); background: var(--orange-bg); }
.compact-switch-row {
    border-top: 1px solid var(--line-soft);
    padding-top: 18px;
}
.switch-row small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-weight: 500;
}
.auth-form input[name="_csrf_token"],
.logout-form input[name="_csrf_token"],
form > input[name="_csrf_token"] {
    display: none;
}

/* Clean CSS icons. Text glyphs are intentionally not used inside icon containers,
   because browser font fallback makes them look different on Windows/Linux/macOS. */
.icon {
    position: relative;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}
.icon:before,
.icon:after {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
}
.icon.ok:before {
    width: 11px;
    height: 19px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) rotate(42deg);
}
.icon.warn:before,
.icon.warning:before,
.icon.alarm:before {
    width: 4px;
    height: 17px;
    border-radius: 99px;
    background: currentColor;
    left: 50%;
    top: 11px;
    transform: translateX(-50%);
}
.icon.warn:after,
.icon.warning:after,
.icon.alarm:after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    left: 50%;
    bottom: 11px;
    transform: translateX(-50%);
}
.icon.info:not(.icon-response):not(.icon-ssl):not(.icon-domain):not(.icon-backup):not(.icon-clock):not(.icon-sites):before {
    width: 18px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 4px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.icon.info:not(.icon-response):not(.icon-ssl):not(.icon-domain):not(.icon-backup):not(.icon-clock):not(.icon-sites):after {
    width: 8px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.icon-sites:before {
    width: 20px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 5px;
    left: 50%;
    top: 51%;
    transform: translate(-50%, -50%);
}
.icon-sites:after {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    left: 16px;
    top: 18px;
    box-shadow: 7px 0 0 currentColor, 14px 0 0 currentColor;
}
.icon-backup:before {
    width: 20px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 5px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
}
.icon-backup:after {
    width: 10px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 5px 0 currentColor;
}
.icon-clock:before {
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.icon-clock:after {
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    left: 50%;
    top: 50%;
    transform: translate(-1px, -7px);
}
.icon-response:before {
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.icon-response:after {
    width: 9px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    left: 25px;
    top: 24px;
    transform-origin: left center;
    transform: rotate(-35deg);
}
.icon-ssl:before {
    width: 20px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 4px;
    left: 50%;
    bottom: 11px;
    transform: translateX(-50%);
    background: transparent;
}
.icon-ssl:after {
    width: 14px;
    height: 13px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    background: transparent;
}
.icon-domain:before {
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
}
.icon-domain:after {
    width: 22px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 -7px 0 -1px currentColor, 0 7px 0 -1px currentColor;
}

.round.round-check,
.round.round-alert,
.round.round-sites,
.round.round-http,
.round.round-ssl,
.round.round-domain,
.round.round-html,
.round.round-calendar,
.round.round-retention,
.round.round-storage {
    position: relative;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}
.round.round-check:before,
.round.round-alert:before,
.round.round-alert:after,
.round.round-sites:before,
.round.round-sites:after,
.round.round-http:before,
.round.round-ssl:before,
.round.round-ssl:after,
.round.round-domain:before,
.round.round-domain:after,
.round.round-html:before,
.round.round-html:after,
.round.round-calendar:before,
.round.round-calendar:after,
.round.round-retention:before,
.round.round-retention:after,
.round.round-storage:before,
.round.round-storage:after {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
}
.round-check:before {
    width: 9px;
    height: 16px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) rotate(42deg);
}
.round-alert:before {
    width: 4px;
    height: 15px;
    border-radius: 99px;
    background: currentColor;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
}
.round-alert:after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
}
.round-sites:before,
.round-domain:before {
    width: 19px;
    height: 19px;
    border: 2px solid currentColor;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.round-sites:after,
.round-domain:after {
    width: 19px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 -6px 0 -1px currentColor, 0 6px 0 -1px currentColor;
}
.round-http:before {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.round-ssl:before {
    width: 18px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 4px;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
}
.round-ssl:after {
    width: 13px;
    height: 12px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    left: 50%;
    top: 9px;
    transform: translateX(-50%);
}
.round-html:before {
    width: 17px;
    height: 17px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    left: 15px;
    top: 15px;
    transform: rotate(45deg);
}
.round-html:after {
    width: 17px;
    height: 17px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    right: 15px;
    top: 15px;
    transform: rotate(45deg);
}
.round-calendar:before {
    width: 20px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 5px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
}
.round-calendar:after {
    width: 12px;
    height: 2px;
    background: currentColor;
    left: 50%;
    top: 17px;
    transform: translateX(-50%);
    box-shadow: -5px -3px 0 -1px currentColor, 5px -3px 0 -1px currentColor;
}
.round-retention:before {
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(35deg);
}
.round-retention:after {
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    right: 13px;
    top: 12px;
    transform: rotate(18deg);
}
.round-storage:before {
    width: 20px;
    height: 17px;
    border: 2px solid currentColor;
    border-radius: 5px;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
}
.round-storage:after {
    width: 10px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 5px 0 currentColor;
}