:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --text: #e6e8ee;
  --muted: #7d8496;
  --faint: #4a5063;
  --track: #1d2230;
  --rule: #1f2533;
  --lane: #131722;
  --tick: #2a3142;
  --green: #3fb950;
  --amber: #d29922;
  --red: #f85149;
  --now: #58a6ff;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
[hidden] { display: none !important }

html { font-size: 1.2vw }
body { background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, sans-serif; line-height: 1.3 }

#wall { min-height: 100vh; padding: 1.2rem 1.6rem; display: flex; flex-direction: column; gap: .6rem }
.muted, .caption, .meta, .detail, .label { color: var(--muted) }
.caption { font-size: .9rem; letter-spacing: .1em }
.big { font-size: 2rem; font-weight: 700 }
.huge { font-size: 3.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1 }
time, [data-countdown], [data-ago], .pct { font-variant-numeric: tabular-nums }

.strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem }
.clock { text-align: center }
.clock time { display: block; font-size: 2.4rem; font-weight: 700 }
.next-reset { text-align: right }

.banner { color: var(--amber); background: #2b2110; border: 1px solid var(--amber); border-radius: .4rem; padding: .4rem .8rem; font-weight: 600 }
.no-data { color: var(--muted); font-size: 2.4rem; text-align: center; padding: 4rem 0 }

.groups { display: flex; flex-direction: column; gap: .4rem }
.grp, .provider-head { color: var(--muted); font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--rule); padding-bottom: .15rem }
.provider-head { display: flex; align-items: baseline; gap: 1.2rem }
.provider-head .updated, .status-detail { letter-spacing: 0; text-transform: none; font-weight: 400 }
.provider-head.amber .updated { color: var(--amber) }
.provider-head.grey .title, .provider-head.grey .updated { color: var(--faint) }
.status-detail { color: var(--amber) }

.account { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: start; padding: .25rem 0 }
.account.stale { opacity: .4 }
.name, .meta, .label, .detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.name { font-weight: 600 }
.meta { font-size: .8rem }
.limits { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem 1.6rem }
.limit-head { display: flex; align-items: baseline; gap: .6rem }
.label, .detail { flex: 0 1 auto; min-width: 0 }
.detail { font-size: .85rem }
.pct { flex: none; margin-left: auto; font-weight: 700 }
.pct.dash { color: var(--muted) }
.pct.green { color: var(--green) }
.pct.amber { color: var(--amber) }
.pct.red { color: var(--red) }
.warning .health { color: var(--red); align-self: center }
.health-kind { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-right: .8rem }

.bar { position: relative; height: .6rem; margin: .2rem 0; background: var(--track); border-radius: .3rem }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: .3rem }
.bar .pace { position: absolute; top: -.2rem; bottom: -.2rem; width: 2px; background: #fff; opacity: .8 }
.fill.green, .segment.green, .dot.green { background: var(--green) }
.fill.amber, .segment.amber, .dot.amber { background: var(--amber) }
.fill.red, .segment.red, .dot.red { background: var(--red) }

.timelines { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: .4rem }
.tl-row { display: grid; grid-template-columns: 7rem 1fr; gap: .6rem; align-items: center; margin-top: .35rem }
.lane-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem }
.tl { position: relative; height: 1.1rem; background: var(--lane); border-radius: .25rem }
.segment { position: absolute; top: .2rem; bottom: .2rem; border-radius: .15rem }
.now { position: absolute; left: 0; top: -.25rem; bottom: -.25rem; width: 2px; background: var(--now) }
.week .tl { margin-top: 1.1rem }
.dot { position: absolute; top: 0; width: 1.1rem; height: 1.1rem; margin-left: -.55rem; border-radius: 50% }
.dot-name { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: .7rem; white-space: nowrap }
.monthly { margin-top: .6rem }

footer { margin-top: auto; font-size: .85rem }

.offline #wall { opacity: .35; filter: grayscale(1) }
.offline [data-countdown] { visibility: hidden }
.offline-notice { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); color: var(--red); background: #2d1214; border: 1px solid var(--red); border-radius: .4rem; padding: .5rem 1.2rem; font-size: 1.6rem; font-weight: 700 }

.login-page { font-size: max(16px, 1.2vw) }
.login { max-width: 22em; margin: 18vh auto 0; padding: 0 1em; display: flex; flex-direction: column; gap: 1em }
.login form { display: flex; flex-direction: column; gap: .6em }
.login input, .login button { font: inherit; padding: .5em .7em; border-radius: .3em; border: 1px solid var(--tick); background: var(--lane); color: var(--text) }
.login button { background: var(--tick); cursor: pointer }
.login .error { color: var(--red) }