:root {
    color-scheme: dark;
    --bg: #07101d;
    --bg-soft: #0a1524;
    --panel: rgba(14, 27, 45, .88);
    --panel-strong: #101d30;
    --panel-hover: #14243a;
    --line: rgba(148, 163, 184, .14);
    --text: #eef4ff;
    --text-soft: #a5b1c4;
    --muted: #526078;
    --blue: #3b82f6;
    --green: #27c36a;
    --red: #ff5459;
    --amber: #f5a524;
    --purple: #9b6cff;
    --cyan: #20c7d9;
    --shadow: 0 22px 70px rgba(0, 0, 0, .28);
    --radius: 17px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.login-body {
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 15%, rgba(42, 105, 220, .24), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(86, 48, 185, .18), transparent 32%),
        #07101d;
}
.login-body::before { content: ""; position: fixed; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.login-shell { position: relative; z-index: 1; width: min(92vw, 460px); text-align: center; }
.login-card { padding: 42px; border: 1px solid rgba(135, 157, 190, .18); border-radius: 24px; background: linear-gradient(145deg, rgba(18, 34, 57, .96), rgba(9, 20, 35, .96)); box-shadow: 0 40px 100px rgba(0, 0, 0, .45); backdrop-filter: blur(20px); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; color: #59a0ff; border: 1px solid rgba(70, 137, 255, .32); border-radius: 12px; background: linear-gradient(145deg, rgba(54, 121, 239, .22), rgba(54, 121, 239, .05)); box-shadow: inset 0 0 22px rgba(59, 130, 246, .08); }
.brand-mark svg { width: 24px; height: 24px; }
.brand-mark-large { width: 58px; height: 58px; margin: 0 auto 24px; border-radius: 17px; }
.brand-mark-large svg { width: 31px; height: 31px; }
.eyebrow, .panel-kicker { margin: 0 0 7px; color: #659be8; font-size: .68rem; font-weight: 800; letter-spacing: .17em; }
.login-card h1 { margin: 0; font-size: clamp(2rem, 6vw, 2.55rem); letter-spacing: -.045em; }
.login-copy { max-width: 320px; margin: 13px auto 28px; color: var(--text-soft); line-height: 1.65; }
.login-form { display: grid; gap: 11px; text-align: left; }
.login-form label { color: #cad5e5; font-size: .82rem; font-weight: 700; }
.password-field { position: relative; }
.password-field input { width: 100%; height: 52px; padding: 0 50px 0 15px; color: var(--text); border: 1px solid rgba(148, 163, 184, .2); border-radius: 12px; outline: none; background: rgba(5, 13, 24, .72); transition: border-color .2s, box-shadow .2s; }
.password-field input:focus { border-color: rgba(59, 130, 246, .85); box-shadow: 0 0 0 4px rgba(59, 130, 246, .12); }
.password-toggle { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 42px; height: 42px; color: #8694a9; border: 0; background: transparent; cursor: pointer; }
.primary-button { height: 52px; margin-top: 7px; color: white; font-weight: 800; border: 0; border-radius: 12px; background: linear-gradient(135deg, #3179ed, #235ec0); box-shadow: 0 13px 28px rgba(36, 103, 220, .26); cursor: pointer; transition: transform .2s, filter .2s; }
.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.login-error { margin: -4px 0 18px; padding: 12px 14px; color: #ffd1d2; font-size: .84rem; line-height: 1.45; text-align: left; border: 1px solid rgba(255, 84, 89, .32); border-radius: 10px; background: rgba(255, 84, 89, .1); }
.login-security { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; color: #718096; font-size: .76rem; }
.login-security span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(39, 195, 106, .8); }
.login-footer { margin: 20px 0 0; color: #526078; font-size: .76rem; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; width: 238px; padding: 24px 14px 18px; border-right: 1px solid var(--line); background: linear-gradient(180deg, #0a1524 0%, #08111e 100%); }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 26px; }
.sidebar-brand strong, .sidebar-brand span { display: block; }
.sidebar-brand strong { font-size: 1rem; }
.sidebar-brand span { margin-top: 1px; color: #77879e; font-size: .76rem; }
.sidebar-nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 13px; height: 45px; padding: 0 13px; color: #98a6ba; font-size: .86rem; font-weight: 650; text-decoration: none; border: 1px solid transparent; border-radius: 10px; transition: .2s; }
.nav-item:hover { color: #dce7f8; background: rgba(255,255,255,.035); }
.nav-item.active { color: #67a6ff; border-color: rgba(64, 131, 240, .16); background: linear-gradient(90deg, rgba(48, 113, 221, .24), rgba(48, 113, 221, .1)); }
.nav-item svg { width: 19px; height: 19px; }
.nav-badge { margin-left: auto; min-width: 21px; height: 21px; padding: 0 6px; color: #ffd8d9; font-size: .68rem; line-height: 21px; text-align: center; border-radius: 99px; background: rgba(255, 84, 89, .16); }
.sidebar-bottom { display: grid; gap: 10px; margin-top: auto; }
.telegram-card { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.telegram-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; color: #61b2ff; border-radius: 50%; background: rgba(53, 157, 255, .15); }
.telegram-icon svg { width: 18px; height: 18px; }
.telegram-card strong, .telegram-card span { display: block; }
.telegram-card strong { font-size: .7rem; }
.telegram-card span { position: relative; margin-top: 5px; padding-left: 11px; color: #7e8ca1; font-size: .64rem; }
.telegram-card span::before { content: ""; position: absolute; left: 0; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.telegram-card span.inactive::before { background: var(--red); }
.logout-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; color: #8190a5; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; }
.logout-button:hover { color: #d4deec; background: rgba(255,255,255,.04); }
.logout-button svg { width: 17px; }

.main-content { min-height: 100vh; margin-left: 238px; padding: 25px 26px 35px; background: radial-gradient(circle at 75% -10%, rgba(35, 86, 173, .13), transparent 34%), var(--bg); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.topbar h1 { margin: 0; font-size: 1.65rem; letter-spacing: -.035em; }
.topbar p:not(.eyebrow) { margin: 5px 0 0; color: var(--text-soft); font-size: .83rem; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.live-pill, .refresh-button { display: flex; align-items: center; height: 39px; color: #a5b3c6; border: 1px solid var(--line); border-radius: 10px; background: rgba(9, 20, 34, .72); }
.live-pill { gap: 8px; padding: 0 13px; font-size: .75rem; }
.live-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(39, 195, 106, .7); animation: pulse 1.8s infinite; }
.refresh-button { gap: 8px; padding: 0 12px; font-size: .74rem; cursor: pointer; }
.refresh-button:hover { color: white; border-color: rgba(84, 134, 211, .42); }
.refresh-button svg { width: 16px; transition: transform .35s; }
.refresh-button.is-loading svg { animation: spin .8s linear infinite; }
.mobile-menu { display: none; }

.loading-banner, .error-banner { margin: 0 0 16px; padding: 11px 14px; font-size: .8rem; border-radius: 9px; }
.loading-banner { color: #a9cfff; border: 1px solid rgba(59, 130, 246, .2); background: rgba(59, 130, 246, .08); }
.loading-banner span { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--blue); animation: pulse 1.2s infinite; }
.error-banner { color: #ffd5d6; border: 1px solid rgba(255, 84, 89, .25); background: rgba(255, 84, 89, .1); }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; margin-bottom: 12px; }
.metric-card { display: flex; align-items: center; gap: 13px; min-height: 112px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18, 34, 56, .93), rgba(12, 24, 40, .93)); box-shadow: 0 13px 35px rgba(0,0,0,.13); }
.metric-icon { display: grid; place-items: center; flex: 0 0 43px; height: 43px; border-radius: 50%; }
.metric-icon svg { width: 21px; }
.metric-card span, .metric-card small { display: block; }
.metric-card > div:last-child > span { color: #b6c0cf; font-size: .74rem; }
.metric-card strong { display: block; margin: 4px 0 3px; font-size: 1.55rem; letter-spacing: -.04em; }
.metric-card strong em { font-size: .68rem; font-style: normal; font-weight: 700; color: #7f8ca0; }
.metric-card small { color: #697990; font-size: .63rem; }
.metric-blue .metric-icon { color: #61a5ff; background: rgba(59,130,246,.16); }
.metric-green .metric-icon { color: #4ce48b; background: rgba(39,195,106,.16); }
.metric-red .metric-icon { color: #ff777b; background: rgba(255,84,89,.16); }
.metric-purple .metric-icon { color: #b28eff; background: rgba(155,108,255,.16); }
.metric-cyan .metric-icon { color: #62dce8; background: rgba(32,199,217,.15); }

section[id] { scroll-margin-top: 18px; }
.speed-monitor-panel { margin-bottom: 12px; }
.speed-monitor-header { align-items: flex-start; padding-bottom: 17px; }
.speed-monitor-header p { margin: 5px 0 0; color: #7f8da2; font-size: .7rem; }
.speed-thresholds { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.speed-thresholds span { display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 9px; color: #8392a7; font-size: .61rem; font-weight: 650; border: 1px solid rgba(148,163,184,.11); border-radius: 99px; background: rgba(5,14,25,.35); }
.speed-thresholds i { width: 7px; height: 7px; border-radius: 50%; }
.speed-thresholds .fast i { background: var(--green); box-shadow: 0 0 8px rgba(39,195,106,.55); }
.speed-thresholds .medium i { background: var(--amber); box-shadow: 0 0 8px rgba(245,165,36,.45); }
.speed-thresholds .slow i { background: var(--red); box-shadow: 0 0 8px rgba(255,84,89,.45); }
.speed-monitor-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 2fr); border-top: 1px solid var(--line); }
.average-speed-card { display: flex; flex-direction: column; justify-content: center; min-height: 355px; padding: 22px; border-right: 1px solid var(--line); background: radial-gradient(circle at 50% 48%, rgba(59,130,246,.09), transparent 52%); }
.speed-card-label { color: #718098; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-align: center; }
.speedometer { position: relative; width: 100%; margin: 0 auto; text-align: center; }
.speedometer-large { max-width: 282px; margin-top: 3px; }
.speedometer-small { max-width: 180px; }
.speedometer svg { display: block; width: 100%; height: auto; overflow: visible; }
.gauge-segment { fill: none; stroke-width: 14; stroke-linecap: round; }
.gauge-fast { stroke: var(--green); }
.gauge-medium { stroke: var(--amber); }
.gauge-slow { stroke: var(--red); }
.gauge-needle { --needle-angle: -90deg; color: #9fb4ce; transform: rotate(var(--needle-angle)); transform-box: view-box; transform-origin: 110px 110px; transition: transform .85s cubic-bezier(.2,.75,.2,1); }
.gauge-needle line { stroke: currentColor; stroke-width: 4; filter: drop-shadow(0 0 4px currentColor); }
.gauge-needle circle { fill: #0e1b2d; stroke: currentColor; stroke-width: 4; }
.speedometer.fast .gauge-needle, .speed-site-card.fast .gauge-needle { color: #55e58f; }
.speedometer.medium .gauge-needle, .speed-site-card.medium .gauge-needle { color: #f8bd58; }
.speedometer.slow .gauge-needle, .speed-site-card.slow .gauge-needle, .speed-site-card.has-issue .gauge-needle { color: #ff777b; }
.speedometer.unknown .gauge-needle, .speed-site-card.unknown .gauge-needle { color: #718096; }
.gauge-scale { fill: #68788f; font: 600 10px Inter, ui-sans-serif, system-ui, sans-serif; }
.speedometer-value { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: -12px; }
.speedometer-value strong { color: #edf4ff; font-size: 1.9rem; letter-spacing: -.05em; }
.speedometer-value small { color: #74849a; font-size: .68rem; font-weight: 750; }
.speedometer-value em { flex-basis: 100%; margin-top: 3px; color: #8291a6; font-size: .64rem; font-style: normal; font-weight: 700; }
.speedometer-large .speedometer-value { flex-wrap: wrap; }
.average-speed-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.average-speed-meta > div { min-width: 0; padding: 11px; border: 1px solid rgba(148,163,184,.1); border-radius: 10px; background: rgba(5,14,25,.3); }
.average-speed-meta span, .average-speed-meta strong, .average-speed-meta small { display: block; }
.average-speed-meta span { color: #65758b; font-size: .56rem; text-transform: uppercase; }
.average-speed-meta strong { margin-top: 4px; color: #cbd7e7; font-size: .72rem; }
.average-speed-meta small { margin-top: 3px; overflow: hidden; color: #6e7e94; font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.site-speed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 10px; align-content: start; padding: 13px; }
.speed-site-card { min-width: 0; padding: 13px 13px 11px; border: 1px solid rgba(148,163,184,.11); border-radius: 13px; background: linear-gradient(145deg, rgba(15,29,48,.82), rgba(7,17,30,.72)); transition: border-color .2s, transform .2s, background .2s; }
.speed-site-card:hover { border-color: rgba(90,145,225,.28); background: linear-gradient(145deg, rgba(18,35,58,.92), rgba(8,19,33,.86)); transform: translateY(-2px); }
.speed-site-card.has-issue { border-color: rgba(255,84,89,.25); }
.speed-site-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.speed-site-head > div { min-width: 0; }
.speed-site-head strong, .speed-site-head span { display: block; }
.speed-site-head strong { overflow: hidden; color: #dae5f4; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.speed-site-head > div > span { margin-top: 3px; overflow: hidden; color: #65758b; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.speed-state { flex: 0 0 auto; padding: 4px 7px; font-size: .54rem; font-weight: 800; border-radius: 6px; }
.speed-state.fast { color: #7ae5a4; background: rgba(39,195,106,.13); }
.speed-state.medium { color: #f8c76b; background: rgba(245,165,36,.13); }
.speed-state.slow { color: #ff999c; background: rgba(255,84,89,.13); }
.speed-state.unknown { color: #a0abbb; background: rgba(120,137,160,.13); }
.speed-site-card .speedometer-value { margin-top: -17px; }
.speed-site-card .speedometer-value strong { font-size: 1.15rem; }
.speed-site-card .speedometer-value small { font-size: .55rem; }
.speed-site-footer { display: grid; grid-template-columns: 7px auto minmax(0,1fr); align-items: center; gap: 6px; margin-top: 9px; padding-top: 9px; color: #627188; border-top: 1px solid rgba(148,163,184,.08); font-size: .54rem; }
.speed-site-footer strong { color: #8997aa; font-size: .56rem; }
.speed-site-footer > span:last-child { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.speed-loading { grid-column: 1 / -1; display: grid; place-items: center; min-height: 220px; color: #718198; font-size: .7rem; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(270px, .75fr); gap: 12px; margin-bottom: 12px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(17, 32, 52, .93), rgba(11, 23, 39, .94)); box-shadow: 0 15px 40px rgba(0,0,0,.13); overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 19px 0; }
.panel-header h2 { margin: 0; font-size: .98rem; letter-spacing: -.015em; }
.chart-panel { min-height: 320px; }
.chart-legend { display: flex; align-items: center; gap: 7px; color: #8391a6; font-size: .69rem; }
.chart-legend span { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.chart-stat { display: flex; align-items: baseline; gap: 8px; margin: 12px 19px -2px; }
.chart-stat strong { color: #68a7ff; font-size: 1.6rem; }
.chart-stat span { color: #6f7d92; font-size: .68rem; }
.canvas-wrap { height: 235px; padding: 7px 12px 12px; }
.canvas-wrap canvas { width: 100%; height: 100%; }
.status-panel { min-height: 320px; }
.donut-layout { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 3vw, 42px); padding: 28px 20px 22px; }
.donut { display: grid; place-items: center; flex: 0 0 145px; height: 145px; border-radius: 50%; background: conic-gradient(var(--muted) 0 360deg); position: relative; }
.donut::after { content: ""; position: absolute; width: 88px; height: 88px; border-radius: 50%; background: #0e1b2d; box-shadow: inset 0 0 20px rgba(0,0,0,.2); }
.donut > div { position: relative; z-index: 1; text-align: center; }
.donut strong, .donut span { display: block; }
.donut strong { font-size: 1.65rem; }
.donut span { color: #77869b; font-size: .65rem; }
.donut-legend { display: grid; gap: 14px; min-width: 125px; }
.donut-legend > div { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; }
.donut-legend p { margin: 0; color: #a8b4c6; font-size: .72rem; }
.donut-legend strong { font-size: .75rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.online { background: var(--green); }.dot.issue { background: var(--red); }.dot.unknown { background: var(--muted); }
.status-footer { display: flex; justify-content: space-between; gap: 10px; margin: 0 18px; padding: 14px 0 17px; color: #748299; font-size: .66rem; border-top: 1px solid var(--line); }
.status-footer strong { color: #9daabd; font-weight: 650; }

.content-grid { display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(280px, .82fr); align-items: start; gap: 12px; }
.service-panel { min-width: 0; }
.service-header { padding-bottom: 14px; }
.service-tools { display: flex; gap: 8px; }
.search-box { display: flex; align-items: center; gap: 8px; width: 210px; height: 36px; padding: 0 10px; color: #63728a; border: 1px solid var(--line); border-radius: 9px; background: rgba(5, 14, 25, .55); }
.search-box svg { flex: 0 0 15px; width: 15px; }
.search-box input { width: 100%; color: #dbe6f6; border: 0; outline: 0; background: transparent; font-size: .7rem; }
.search-box input::placeholder { color: #5f6e84; }
.service-tools select { height: 36px; padding: 0 29px 0 10px; color: #aab6c7; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #0c1829; font-size: .69rem; }
.table-wrap { width: 100%; overflow-x: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; min-width: 820px; }
th { padding: 11px 13px; color: #718198; font-size: .65rem; font-weight: 650; text-align: left; background: rgba(255,255,255,.018); }
td { padding: 12px 13px; font-size: .68rem; border-top: 1px solid rgba(148,163,184,.08); }
tbody tr { transition: background .2s; } tbody tr:hover { background: rgba(255,255,255,.018); }
.service-name { display: flex; align-items: center; gap: 9px; min-width: 155px; }
.service-name strong, .service-name small { display: block; }
.service-name strong { max-width: 190px; overflow: hidden; color: #dce6f5; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.service-name small { max-width: 190px; margin-top: 3px; overflow: hidden; color: #68788f; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.service-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.service-dot.online { background: var(--green); box-shadow: 0 0 9px rgba(39,195,106,.5); }.service-dot.issue { background: var(--red); box-shadow: 0 0 9px rgba(255,84,89,.5); }.service-dot.unknown { background: var(--muted); }
.status-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 59px; height: 23px; padding: 0 8px; font-size: .61rem; font-weight: 750; border-radius: 6px; }
.status-badge.online { color: #80e9a9; background: rgba(39,195,106,.14); }.status-badge.issue { color: #ff999c; background: rgba(255,84,89,.14); }.status-badge.unknown { color: #a7b0be; background: rgba(120,137,160,.14); }
.http-code { color: #aeb9c9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }.http-code.bad { color: #ff8c90; }
.response-cell strong { display: block; color: #aab6c7; font-size: .65rem; }
.response-cell > span { display: block; width: 62px; height: 3px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: rgba(148,163,184,.11); }
.response-cell i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #307ef4, #65a9ff); }
.checked-at { color: #8492a6; white-space: nowrap; }
.detail-copy { display: block; max-width: 185px; overflow: hidden; color: #8290a5; text-overflow: ellipsis; white-space: nowrap; }
.table-empty { padding: 35px; color: #748299; text-align: center; }
.panel-footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; color: #65758c; font-size: .63rem; border-top: 1px solid var(--line); }
.mobile-services { display: none; }
.side-column { display: grid; gap: 12px; }
.count-pill { min-width: 25px; height: 25px; padding: 0 8px; color: #ff9c9f; font-size: .67rem; font-weight: 800; line-height: 25px; text-align: center; border-radius: 99px; background: rgba(255,84,89,.13); }
.alert-list, .event-list { padding: 10px 15px 15px; }
.alert-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: start; padding: 12px 0; border-top: 1px solid rgba(148,163,184,.09); }
.alert-item:first-child, .event-item:first-child { border-top: 0; }
.alert-icon { display: grid; place-items: center; width: 29px; height: 29px; color: #ff7b7f; border-radius: 50%; background: rgba(255,84,89,.14); }
.alert-icon svg { width: 15px; }
.alert-item strong, .alert-item p, .alert-item span { display: block; }
.alert-item strong { color: #dae4f3; font-size: .7rem; }
.alert-item p { margin: 4px 0; color: #8d9bae; font-size: .64rem; line-height: 1.45; }
.alert-item span { color: #66758b; font-size: .58rem; }
.alert-item em { padding: 3px 6px; color: #ff9ca0; font-size: .55rem; font-style: normal; font-weight: 800; border-radius: 5px; background: rgba(255,84,89,.11); }
.healthy-state { display: grid; place-items: center; padding: 28px 10px 20px; text-align: center; }
.healthy-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; color: #71eca2; font-weight: 900; border-radius: 50%; background: rgba(39,195,106,.14); }
.healthy-state strong { font-size: .74rem; }.healthy-state span { max-width: 190px; margin-top: 5px; color: #708097; font-size: .62rem; line-height: 1.5; }
.event-item { display: grid; grid-template-columns: 9px 1fr auto; gap: 9px; align-items: start; padding: 11px 0; border-top: 1px solid rgba(148,163,184,.09); }
.event-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; }.event-dot.success { background: var(--green); }.event-dot.error { background: var(--red); }
.event-item strong, .event-item p, .event-item span { display: block; }
.event-item strong { color: #d6e0ef; font-size: .68rem; }.event-item p { margin: 3px 0; color: #8a98ac; font-size: .62rem; }.event-item span { display: -webkit-box; overflow: hidden; color: #65758b; font-size: .57rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.event-item time { color: #66768c; font-size: .56rem; }
.empty-state { padding: 26px 10px; color: #708097; font-size: .68rem; text-align: center; }
.sidebar-backdrop { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 1260px) {
    .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-speed-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    .content-grid { grid-template-columns: 1fr; }
    .side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 970px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .mobile-menu { display: grid; place-items: center; flex: 0 0 42px; height: 42px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(9,20,34,.8); }
    .mobile-menu span { display: block; width: 19px; height: 2px; margin: 2px 0; border-radius: 9px; background: #a8b5c7; }
    .sidebar-backdrop.show { position: fixed; inset: 0; z-index: 15; display: block; background: rgba(0,0,0,.58); backdrop-filter: blur(3px); }
    body.menu-open { overflow: hidden; }
}

@media (max-width: 760px) {
    .main-content { padding: 18px 14px 28px; }
    .topbar { align-items: flex-start; }
    .topbar > div:nth-child(2) { flex: 1; }
    .topbar h1 { font-size: 1.35rem; }
    .topbar p:not(.eyebrow) { display: none; }
    .live-pill { display: none; }
    .refresh-button span { display: none; }
    .refresh-button { width: 40px; justify-content: center; padding: 0; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-card { min-height: 103px; padding: 14px; }
    .metric-icon { flex-basis: 37px; height: 37px; }
    .metric-card strong { font-size: 1.35rem; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .speed-monitor-header { flex-direction: column; }
    .speed-thresholds { justify-content: flex-start; }
    .speed-monitor-layout { grid-template-columns: 1fr; }
    .average-speed-card { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .site-speed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .side-column { grid-template-columns: 1fr; }
    .service-header { align-items: flex-start; flex-direction: column; }
    .service-tools, .search-box { width: 100%; }
    .service-tools select { flex: 0 0 118px; }
    .table-wrap { display: none; }
    .mobile-services { display: grid; gap: 10px; padding: 0 13px 14px; border-top: 1px solid var(--line); }
    .mobile-service-card { padding: 14px; border: 1px solid rgba(148,163,184,.11); border-radius: 12px; background: rgba(5,14,25,.28); }
    .mobile-service-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .mobile-service-metrics { display: grid; grid-template-columns: .6fr .8fr 1.5fr; gap: 9px; margin: 14px 0 10px; }
    .mobile-service-metrics div { min-width: 0; }
    .mobile-service-metrics span, .mobile-service-metrics strong { display: block; }
    .mobile-service-metrics span { color: #67778e; font-size: .56rem; }
    .mobile-service-metrics strong { margin-top: 3px; overflow: hidden; color: #aeb9c8; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-service-card p { margin: 0; color: #7c8ba0; font-size: .62rem; line-height: 1.45; }
}

@media (max-width: 480px) {
    .login-card { padding: 34px 23px; }
    .metric-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 92px; }
    .site-speed-grid { grid-template-columns: 1fr; }
    .speed-thresholds span { font-size: .56rem; }
    .average-speed-card { padding-inline: 16px; }
    .donut-layout { gap: 20px; padding-inline: 13px; }
    .donut { flex-basis: 125px; height: 125px; }
    .donut::after { width: 77px; height: 77px; }
    .panel-footer { align-items: flex-start; flex-direction: column; gap: 5px; }
}