:root { color-scheme: light dark; }
body { font-family: system-ui, -apple-system, Segoe UI, sans-serif; margin: 0; padding: 2rem;
       background: #14161a; color: #e6e8eb; }
main { max-width: 48rem; margin: 0 auto; }
h1 { font-size: 1.25rem; margin: 0 0 1.5rem; }
h2 { font-size: 1rem; margin: 2rem 0 .5rem; }
label { display: block; margin: 1rem 0 .25rem; font-size: .875rem; color: #a5adba; }
input { width: 100%; padding: .6rem; border-radius: .375rem; border: 1px solid #2c313a;
        background: #1c1f26; color: inherit; box-sizing: border-box; font-size: 1rem; }
button { margin-top: 1.5rem; padding: .6rem 1.1rem; border-radius: .375rem; border: 0;
         background: #4c7ef3; color: #fff; font-size: .9375rem; cursor: pointer; }
.error { margin-top: 1rem; padding: .6rem .75rem; border-radius: .375rem;
         background: #3b1d22; color: #ffb4b4; font-size: .875rem; }
.secret { display: block; padding: .75rem; margin: .5rem 0; border-radius: .375rem;
          background: #1c1f26; font-family: ui-monospace, monospace; word-break: break-all;
          font-size: .8125rem; }
.muted { color: #8b93a1; font-size: .8125rem; line-height: 1.5; }
.notice { margin-top: 1rem; padding: .6rem .75rem; border-radius: .375rem;
          background: #16301f; color: #a6e6bd; font-size: .875rem; }
.nav { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 1.5rem;
       padding-bottom: .75rem; border-bottom: 1px solid #2c313a; }
.nav a { color: #7aa2f7; text-decoration: none; font-size: .875rem; }
.nav .muted { margin-left: auto; }
select { width: 100%; padding: .6rem; border-radius: .375rem; border: 1px solid #2c313a;
         background: #1c1f26; color: inherit; box-sizing: border-box; font-size: 1rem; }
table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
td, th { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid #2c313a; font-size: .875rem; }
.ranges { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.ranges a { padding: .3rem .7rem; border-radius: .375rem; background: #1c1f26; color: #a5adba;
            text-decoration: none; font-size: .8125rem; }
.ranges a.active { background: #4c7ef3; color: #fff; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.tile { background: #1c1f26; border: 1px solid #2c313a; border-radius: .5rem; padding: .75rem .9rem;
        display: flex; flex-direction: column; gap: .15rem; }
.tile-label { font-size: .75rem; color: #8b93a1; text-transform: uppercase; letter-spacing: .04em; }
.tile-value { font-size: 1.5rem; font-weight: 600; }
.tile-hint { font-size: .75rem; color: #8b93a1; }
.chart { background: #1c1f26; border: 1px solid #2c313a; border-radius: .5rem; padding: .75rem;
         overflow-x: auto; }