:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0b1018; color: #e7edf5; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(1400px, calc(100% - 32px)); margin: 40px auto; }
header, .project-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: 2rem; } h2, h3 { margin-bottom: 6px; }
.eyebrow { color: #8da2bd; font-size: .72rem; letter-spacing: .14em; margin-bottom: 5px; }
#version, small, .section-heading > p, .notes { color: #91a0b5; font-size: .82rem; }
.tabs { display: flex; gap: 4px; margin: 32px 0; padding-bottom: 10px; border-bottom: 1px solid #253146; }
.tab { color: #aab7c8; background: transparent; border-color: transparent; }
.tab:hover, .tab.active { color: white; background: #1b2a3e; border-color: #35445c; }
.view[hidden] { display: none; }
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0; }
.summary article, .project-card { border: 1px solid #253146; background: #111927; border-radius: 8px; }
.summary article { padding: 18px; } .summary strong { display: block; font-size: 1.7rem; } .summary span { color: #91a0b5; font-size: .8rem; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.project-card { padding: 20px; } .project-card > p { color: #c4cfdd; }
.status { display: inline-block; white-space: nowrap; border-radius: 999px; padding: 4px 9px; font-size: .7rem; font-weight: 700; text-transform: uppercase; background: #273246; }
.status-active, .status-deployed { background: #143f31; color: #7ee2b8; }
.status-development, .status-work_in_progress, .status-configured { background: #143e66; color: #8dccff; }
.status-unknown, .status-paused, .status-archived { color: #c5ceda; }
dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 7px 14px; font-size: .84rem; margin-bottom: 0; } dt { color: #8190a4; } dd { margin: 0; overflow-wrap: anywhere; }
a { color: #86c7ff; text-underline-offset: 3px; } .unknown { color: #7e8b9d; }
.table-wrap { overflow-x: auto; margin-top: 24px; border: 1px solid #253146; border-radius: 8px; }
table { width: 100%; min-width: 1200px; border-collapse: collapse; background: #111927; font-size: .8rem; }
th { position: sticky; top: 0; color: #91a0b5; background: #151f2f; text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
th, td { padding: 12px; border-right: 1px solid #253146; border-bottom: 1px solid #253146; vertical-align: top; }
th:last-child, td:last-child { border-right: 0; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: #162132; }
.cost { white-space: nowrap; } .notes-cell { min-width: 230px; color: #9eabba; }
.error { padding: 14px; background: #542529; border-radius: 6px; }
.login { width: min(460px, 100%); margin: 70px auto; padding: 28px; border: 1px solid #253146; background: #111927; border-radius: 8px; }
form, label { display: grid; gap: 10px; } form { margin-top: 18px; } input, button { font: inherit; padding: 11px; border-radius: 6px; border: 1px solid #35445c; } input { color: #e7edf5; background: #0b1018; } button { color: white; background: #245c98; cursor: pointer; }
@media (max-width: 800px) { main { margin-top: 24px; } header, .section-heading { align-items: flex-start; } .summary, .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .summary, .project-grid { grid-template-columns: 1fr; } .tabs { overflow-x: auto; } }