:root {
    color-scheme: dark;
    --bg: #0b0d12;
    --panel: #15181f;
    --panel-2: #1c2029;
    --fg: #eef1f6;
    --muted: #9aa3b2;
    --line: #262b35;
    --red: #e23b3b;
    --amber: #f0a92b;
    --green: #3fb37f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 calc(1rem + env(safe-area-inset-right)) 0 calc(1rem + env(safe-area-inset-left)); }

/* masthead — sticky; pad the top by the iOS safe-area inset (black-translucent
   status bar draws the page under the notch/clock). */
.masthead { padding: calc(1.5rem + env(safe-area-inset-top)) 0 1rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(11,13,18,.92); backdrop-filter: blur(8px); z-index: 5; }
.masthead h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.02em; }
.masthead h1 span { color: var(--muted); font-weight: 500; }
.lede { margin: .35rem 0 .75rem; color: var(--muted); }

.pill { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; border-radius: 999px; padding: .2rem .75rem; font-size: .9rem; }
.pill--up { color: var(--green); background: rgba(63,179,127,.12); border: 1px solid rgba(63,179,127,.35); }
.pill--down { color: #ff8484; background: rgba(226,59,59,.12); border: 1px solid rgba(226,59,59,.4); }

.meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
#updated { margin-right: auto; }

.btn {
    appearance: none; border: 1px solid var(--line); background: var(--panel-2);
    color: var(--fg); border-radius: 999px; padding: .4rem .85rem; font-size: .85rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
}
.btn:hover { border-color: #3a4150; }
.btn:disabled { opacity: .5; cursor: default; }
.btn--bell-on { border-color: var(--green); color: var(--green); }

.spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* service list */
main { padding: 1rem 0 3rem; }
.services { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }

.svc {
    background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted);
    border-radius: 12px; padding: .85rem 1rem;
}
.svc--up      { border-left-color: var(--green); }
.svc--down    { border-left-color: var(--red); }
.svc--unknown { border-left-color: var(--line); }

.svc__row { display: flex; align-items: baseline; gap: .55rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; align-self: center; }
.dot--up   { background: var(--green); box-shadow: 0 0 6px rgba(63,179,127,.7); }
.dot--down { background: var(--red); box-shadow: 0 0 6px rgba(226,59,59,.7); }

.svc__name { font-weight: 600; color: var(--fg); text-decoration: none; }
.svc__name:hover { text-decoration: underline; }
.svc__detail { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc--down .svc__detail { color: #ff8484; }
.svc__state { margin-left: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.svc--up .svc__state { color: var(--green); }
.svc--down .svc__state { color: #ff8484; font-weight: 600; }

/* 90-day uptime strip: flexed <i> cells so it fills the card at any width */
.bars { display: flex; gap: 2px; margin-top: .6rem; height: 26px; }
.bar { flex: 1 1 0; border-radius: 2px; background: var(--panel-2); min-width: 0; }
.bar--up       { background: var(--green); }
.bar--degraded { background: var(--amber); }
.bar--down     { background: var(--red); }
.bar--nodata   { background: var(--panel-2); }

.svc__foot { display: flex; justify-content: space-between; margin-top: .35rem; font-size: .72rem; color: var(--muted); }
.svc__uptime { color: var(--fg); }

/* container snapshot */
.containers { margin-top: 2rem; }
.containers h2 { font-size: 1.05rem; margin: 0 0 .6rem; display: flex; align-items: baseline; gap: .6rem; }
.containers__meta { font-size: .75rem; font-weight: 400; color: var(--muted); }
.containers ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ctr { display: flex; align-items: center; gap: .55rem; padding: .5rem .85rem; background: var(--panel); border-top: 1px solid var(--line); font-size: .85rem; }
.ctr:first-child { border-top: 0; }
.ctr--bad { background: rgba(226,59,59,.08); }
.ctr__name { font-weight: 600; }
.ctr__status { margin-left: auto; color: var(--muted); font-size: .78rem; white-space: nowrap; }

/* empty / error */
.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.empty .hint { font-size: .85rem; }
.empty a, .foot a { color: var(--fg); }

/* skeleton */
.skeleton .svc--skel { height: 96px; border-left-color: var(--line); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .4; } 50% { opacity: .75; } }

/* footer */
.foot { color: var(--muted); font-size: .8rem; padding: 1.5rem 1rem 2.5rem; text-align: center; }