:root { color-scheme: dark; font-family: system-ui, sans-serif; }
[hidden] { display: none !important; }
body { align-items: center; background: #0b1220; color: #e5eefb; display: flex; margin: 0; min-height: 100vh; }
main { margin: auto; max-width: 54rem; padding: 2rem; }
@media (min-width: 54rem) { body.wide-dashboard main { box-sizing: border-box; max-width: none; width: 100%; } }
h1 { color: #70d6ff; font-size: clamp(2rem, 7vw, 4rem); margin: 0 0 .75rem; }
h2 { color: #d8f2ff; margin: 0; }
h3 { color: #d8f2ff; margin: 1.5rem 0 0; }
p { color: #b7c8df; font-size: 1.05rem; line-height: 1.6; }
.panel { background: #121d30; border: 1px solid #2b405f; border-radius: .75rem; margin-top: 2rem; padding: 1.5rem; }
label { display: block; font-weight: 700; margin: 1rem 0 .4rem; }
input, select, textarea { background: #08101d; border: 1px solid #58749e; border-radius: .35rem; box-sizing: border-box; color: #e5eefb; font: inherit; padding: .7rem; width: 100%; }
.secret-token { -webkit-text-security: disc; }
input[type="checkbox"] { accent-color: #70d6ff; height: 1.1rem; margin: .1rem .55rem 0 0; padding: 0; width: 1.1rem; }
button, a.button { background: #70d6ff; border: 0; border-radius: .35rem; color: #07101b; cursor: pointer; font: inherit; font-weight: 700; padding: .7rem 1rem; }
a.button { text-decoration: none; }
button:disabled { cursor: wait; opacity: .65; }
button.secondary { background: transparent; border: 1px solid #58749e; color: #d8f2ff; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
#menu-actions { display: grid; grid-template-columns: 1fr; }
.menu-card { background: #0d192a; border: 1px solid #2b405f; border-radius: .5rem; color: #d8f2ff; display: grid; gap: 0 .9rem; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 4.5rem; padding: .75rem 1rem .75rem .75rem; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.menu-card:hover { background: #14263e; border-color: #70d6ff; transform: translateY(-1px); }
.menu-card:focus-visible { outline: 2px solid #70d6ff; outline-offset: 3px; }
.menu-card::before { background: center / contain no-repeat; content: ""; grid-row: 1 / span 2; height: 4.5rem; width: 4.5rem; }
.menu-card[href="/metrics.html"]::before { background-image: url("/assets/icons/metrics.png"); }
.menu-card[href="/graph.html"]::before { background-image: url("/assets/icons/graph.png"); }
.menu-card[href="/raw-data.html"]::before { background-image: url("/assets/icons/raw-data.png"); }
.menu-card[href^="/war-dashboard.html"]::before { background-image: url("/assets/icons/war-dashboard.png"); }
.menu-card[href="/war-contribution.html"]::before { background-image: url("/assets/icons/war-contribution.png"); }
.menu-card[href^="/chain.html"]::before { background-image: url("/assets/icons/chain-watch.png"); }
.menu-card[href="/inactivity.html"]::before { background-image: url("/assets/icons/inactivity-notices.png"); }
.menu-card[href="/member-follow-up.html"]::before { background-image: url("/assets/icons/member-follow-up.png"); }
.menu-card[href="/key-pool.html"]::before { background-image: url("/assets/icons/api-key-pool.png"); }
.menu-card-title { align-self: end; color: #70d6ff; display: block; font-weight: 700; }
.menu-card-description { color: #b7c8df; display: block; font-size: .9rem; line-height: 1.45; margin-top: .25rem; }
.menu-card-secondary { background: transparent; }
@media (min-width: 40rem) { #menu-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 24rem) { .menu-card { gap: 0 .65rem; grid-template-columns: 3.5rem minmax(0, 1fr); } .menu-card::before { height: 3.5rem; width: 3.5rem; } }
.help { font-size: .9rem; margin: .4rem 0 0; }
.result { min-height: 1.6rem; }
.result.error { color: #ffaaa5; }
.result.success { color: #8ce99a; }
.checkbox-label { align-items: flex-start; color: #d8f2ff; display: flex; font-weight: 400; line-height: 1.4; }
.table-wrap { margin-top: 1rem; overflow-x: auto; }
#member-metrics-table table { width: max-content; }
body.wide-dashboard #member-metrics-panel { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 100%; width: fit-content; }
.expired-notices { margin-top: 1.5rem; }
.expired-notices summary { color: #70d6ff; cursor: pointer; font-weight: 700; }
.notice-date { white-space: nowrap; }
@media (min-width: 70rem) {
  body.inactivity-page .inactivity-list-panel {
    left: 50%;
    max-width: calc(100vw - 4rem);
    position: relative;
    transform: translateX(-50%);
    width: 76rem;
  }
}
.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.snapshot-time { color: #b7c8df; font-size: .9rem; margin: 0 0 .5rem; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid #2b405f; padding: .75rem; text-align: left; }
th { color: #70d6ff; }
.sort-button { background: transparent; border: 0; border-radius: 0; color: inherit; padding: 0; text-align: left; }
.sort-button:hover { color: #d8f2ff; text-decoration: underline; }
.sort-button:focus-visible { outline: 2px solid #70d6ff; outline-offset: 3px; }
.threshold-row th, .threshold-row td { background: #0d192a; }
.threshold-row input { min-width: 0; padding: .4rem; }
td.below-threshold { background: #6b2528; color: #ffe4e2; font-weight: 700; }
.page-header { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.metrics-graph { background: #08101d; border: 1px solid #2b405f; border-radius: .5rem; margin-top: 1rem; overflow: hidden; }
.metrics-graph svg { cursor: grab; display: block; height: auto; min-height: 20rem; touch-action: none; user-select: none; width: 100%; }
.metrics-graph svg.graph-dragging { cursor: grabbing; }
.graph-difference-option { align-items: center; display: inline-flex; gap: .35rem; }
.graph-axis { stroke: #58749e; stroke-width: 1; }
.graph-grid { stroke: #2b405f; stroke-width: 1; }
.graph-axis-label { fill: #b7c8df; font-size: 12px; }
.graph-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.graph-line-tentative { stroke-dasharray: 12 3.5; }
.graph-point { cursor: crosshair; stroke: #08101d; stroke-width: 1.5; }
.graph-tooltip { fill: #121d30; stroke: #70d6ff; }
.graph-tooltip-text { fill: #e5eefb; font-size: 12px; }
.graph-applied { margin-top: 1rem; }
.graph-series { align-items: center; display: flex; gap: .6rem; margin: .45rem 0; }
.graph-swatch { border-radius: 50%; height: .75rem; width: .75rem; }
.graph-series button { margin-left: auto; padding: .2rem .55rem; }
.graph-series-color-0 .graph-swatch { background: #70d6ff; } .graph-series-color-0 .graph-series-label { color: #70d6ff; }
.graph-series-color-1 .graph-swatch { background: #ff8fa3; } .graph-series-color-1 .graph-series-label { color: #ff8fa3; }
.graph-series-color-2 .graph-swatch { background: #8ce99a; } .graph-series-color-2 .graph-series-label { color: #8ce99a; }
.graph-series-color-3 .graph-swatch { background: #ffd166; } .graph-series-color-3 .graph-series-label { color: #ffd166; }
.graph-series-color-4 .graph-swatch { background: #c77dff; } .graph-series-color-4 .graph-series-label { color: #c77dff; }
.graph-series-color-5 .graph-swatch { background: #f4a261; } .graph-series-color-5 .graph-series-label { color: #f4a261; }
.graph-series-color-6 .graph-swatch { background: #4dd4ac; } .graph-series-color-6 .graph-series-label { color: #4dd4ac; }
.average-option { color: #70d6ff; font-weight: 700; }
.criteria-group { border: 1px solid #2b405f; border-radius: .5rem; margin: 1rem 0 0; padding: 1rem; }
.criteria-group legend { color: #70d6ff; font-weight: 700; padding: 0 .35rem; }
.criteria-list { display: grid; }
.criterion { border: 0; border-bottom: 1px solid #2b405f; margin: 0; padding: 0 0 .75rem; }
.criterion:last-child { border-bottom: 0; padding-bottom: 0; }
.criterion-fields { align-items: end; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) auto; }
.criterion-inputs { align-items: center; column-gap: .5rem; display: flex; flex-wrap: wrap; row-gap: .5rem; }
.criterion-inputs > select, .criterion-inputs > span > select { max-width: 100%; width: auto; }
.criterion-inputs [data-control="target"] input { width: 10rem; }
.criterion-fields label { margin: 0; }
.criterion-fields [hidden] { display: none !important; }
.criterion-days { white-space: nowrap; }
.criterion-days input { display: inline-block; margin: 0 .25rem; width: 4.5rem; }
.criterion-join { align-items: center; display: flex; height: 1.9rem; justify-content: center; margin: -.8rem 0; position: relative; z-index: 1; }
.criterion-join[hidden] { display: none !important; }
.criterion-join select { color: #e5eefb; font-size: .85rem; height: 1.9rem; padding: .1rem .45rem; width: 4.75rem; }
.criterion:not(:first-child) .criterion-fields { padding-top: .5rem; }
.criterion-actions { align-self: end; }
.remove-criterion { align-self: end; background: #b83f4b; color: #fff; font-size: 1.35rem; line-height: 1; padding: .62rem .9rem; }
.follow-up-saved { align-items: end; display: flex; gap: .75rem; margin-top: .75rem; }
.follow-up-saved > :first-child { flex: 1; }
.member-detail-editor { display: grid; gap: 1rem; grid-template-columns: 22rem repeat(2, minmax(0, 1fr)); }
.member-detail-editor > label, .follow-up-message label { margin: 0; }
.follow-up-message { min-width: 0; }
.follow-up-message button { margin-top: .75rem; }
@media (max-width: 80rem) { .member-detail-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); } .follow-up-detail-fields { grid-column: 1 / -1; } }
.follow-up-detail-fields { display: grid; gap: .75rem; }
.follow-up-detail-fields label { margin: 0; }
.follow-up-date-action { align-items: end; display: flex; gap: .5rem; }
.follow-up-date-action label { flex: 1; }
.follow-up-date-action button { flex: 0 0 auto; }
#selected-member { color: #70d6ff; font-size: 1.3rem; font-weight: 700; }
.follow-up-member-row { cursor: pointer; }
.follow-up-member-row:hover, .follow-up-member-row.selected { background: #1c304d; }
.follow-up-notes { min-width: 22rem; white-space: pre-wrap; }
body.member-follow-up-page main { box-sizing: border-box; max-width: 112rem; width: 100%; }
#follow-up-criteria-panel { box-sizing: border-box; max-width: 78rem; margin-inline: auto; }
@media (min-width: 82rem) { body.member-follow-up-page main.follow-up-needs-width .follow-up-notes { min-width: 30rem; } }
@media (max-width: 35rem) { .follow-up-saved { align-items: stretch; flex-direction: column; } .member-detail-editor, .criterion-fields { grid-template-columns: 1fr; } .criterion-actions { justify-self: end; } }

.menu-card[href="/target-lists.html"]::before { background-image: url("/assets/icons/target-lists.png"); }