:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: #070b13;
  color: #f6f8fc;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 82% 0%, #18385a 0%, transparent 35rem), #070b13; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(100%, 650px); margin: 0 auto; padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(2rem + env(safe-area-inset-bottom)); }
.topbar, .section-title, .price-heading, .dialog-header, .field-row, .dialog-actions, .topbar-actions { display: flex; align-items: center; }
.topbar, .section-title, .price-heading, .dialog-header { justify-content: space-between; }
.topbar { margin-bottom: 1.5rem; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 2rem; letter-spacing: -.04em; }
h2 { margin-bottom: .4rem; font-size: 1.2rem; letter-spacing: -.02em; }
.eyebrow { color: #8ca1bd; font-size: .7rem; font-weight: 800; letter-spacing: .09em; margin-bottom: .35rem; }
.muted, .card p { color: #a6b4c8; }
.muted { font-size: .85rem; }
.card, .price-panel { border: 1px solid rgba(173, 204, 237, .15); border-radius: 1.1rem; background: rgba(13, 23, 38, .83); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .15); }
.price-panel { padding: 1.25rem; margin-bottom: 1rem; background: linear-gradient(135deg, #122a44, #101b2b); }
.price-heading { color: #adc8e4; font-size: .85rem; font-weight: 700; }
.price { margin: .65rem 0 .35rem; font-size: clamp(2.5rem, 11vw, 4.2rem); font-weight: 800; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.status-chip { border-radius: 99px; padding: .3rem .55rem; font-size: .7rem; }
.status-online { background: #123c32; color: #87f0c8; }
.status-offline { background: #3e2831; color: #ffc0c6; }
.notification-card, .test-card, .feed-alert-card { display: flex; gap: 1rem; justify-content: space-between; align-items: center; padding: 1.1rem 1.15rem; margin-bottom: 1rem; }
.notification-card h2, .test-card h2, .feed-alert-card h2 { margin-bottom: .25rem; }
.notification-card p, .test-card p, .feed-alert-card p { margin-bottom: 0; font-size: .85rem; line-height: 1.35; }
.feed-alert-card { border-color: #375274; }
.alarm-card { padding: 1.15rem; margin-bottom: 1rem; border-color: #ff636d; background: linear-gradient(135deg, #4a1721, #21111a); animation: pulse 1s ease-in-out infinite alternate; }
.alarm-card h2 { color: #fff1f2; }
@keyframes pulse { to { box-shadow: 0 0 2rem rgba(255, 71, 85, .35); } }
.monitor-card { padding: 1.15rem; margin-bottom: 1rem; }
.monitor-card h2 { margin-bottom: .55rem; }
.monitor-card > p:not(.eyebrow) { margin-bottom: .45rem; }
.monitor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1rem; }
.metric-card { padding: .9rem; min-width: 0; }
.metric-card .eyebrow { margin-bottom: .25rem; }
.metric { margin: 0; color: #f5f9fe; font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; }
.metric-small { font-size: .95rem; line-height: 1.9rem; }
.monitor-note { padding: 0 .2rem; line-height: 1.45; }
.monitor-error { color: #ffc2c7 !important; }
.alerts-section { padding: 1rem 0; }
.section-title { margin: 0 0 .8rem; }
.section-title h2 { margin-bottom: 0; }
.alerts-list { display: grid; gap: .7rem; }
.alert-card { padding: 1rem 1.05rem; }
.alert-main, .alert-actions { display: flex; justify-content: space-between; gap: .75rem; }
.alert-main { align-items: flex-start; }
.alert-card h3 { margin: 0 0 .4rem; font-size: 1rem; }
.rule { color: #dce9fa; margin-bottom: 0; font-size: .92rem; }
.target { font-weight: 800; font-variant-numeric: tabular-nums; }
.alert-actions { margin-top: .9rem; }
.alert-actions button { font-size: .8rem; padding: .42rem .65rem; }
.empty-state { color: #8396ad; border: 1px dashed #2d425a; border-radius: .9rem; margin: 0; padding: 1rem; text-align: center; }
button { border: 0; border-radius: .7rem; padding: .7rem .9rem; color: #fff; font-weight: 750; transition: transform .12s ease, filter .12s ease; }
button:active { transform: scale(.97); }
.primary { background: #22a870; }
.primary:hover { filter: brightness(1.08); }
.secondary { background: #23354c; color: #e2ecfa; }
.danger { background: #d84350; }
.icon-button { background: transparent; color: #cce1fb; font-size: 1.5rem; line-height: 1; padding: .35rem .55rem; }
.icon-button:hover { background: #22344b; }
.topbar-actions { gap: .2rem; }
.status-link { color: #bcd9f5; font-size: .8rem; font-weight: 750; text-decoration: none; border-radius: .65rem; padding: .55rem .6rem; }
.status-link:hover { background: #22344b; }
dialog { width: min(calc(100% - 2rem), 550px); padding: 0; border: 1px solid #35506e; border-radius: 1rem; background: #101a29; color: #f6f8fc; box-shadow: 0 2rem 6rem #000a; }
dialog::backdrop { background: rgba(0, 0, 0, .68); backdrop-filter: blur(3px); }
dialog form { padding: 1.2rem; }
.dialog-header { margin-bottom: 1.1rem; }
.dialog-header h2 { margin-bottom: 0; }
label { display: grid; gap: .45rem; color: #d6e4f4; font-size: .82rem; font-weight: 700; }
input, select { width: 100%; border: 1px solid #3a536f; border-radius: .65rem; background: #09111d; color: #fff; padding: .72rem; outline: none; }
input:focus, select:focus { border-color: #4eafee; box-shadow: 0 0 0 3px #4eafee2e; }
.field-row { align-items: stretch; gap: .8rem; margin-top: 1rem; }
.field-row label { flex: 1; }
.dialog-actions { justify-content: flex-end; gap: .65rem; margin-top: 1.2rem; }
.toast { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 10; width: max-content; max-width: calc(100% - 2rem); transform: translateX(-50%); border: 1px solid #456488; border-radius: .8rem; background: #152a42; color: #f3f8ff; padding: .75rem 1rem; box-shadow: 0 1rem 3rem #0008; }
@media (max-width: 420px) { .notification-card, .test-card, .feed-alert-card { align-items: flex-start; flex-direction: column; } .field-row { flex-direction: column; } }