:root { color: #edf2f7; background: #11151b; font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #11151b; }
.background { position: fixed; inset: 0; z-index: -1; background: #11151b; }
.topbar { min-height: 68px; border-bottom: 1px solid #303841; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 10px max(24px, calc((100vw - 1180px)/2)); background: #151a21; }
.brand { color: #fff; text-decoration: none; display: flex; gap: 10px; align-items: center; font-weight: 750; letter-spacing: 0; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: #42d3a5; color: #07111f; }
.primary-nav { display:flex; align-items:center; gap:4px; }.primary-nav a { color:#aeb9c5; text-decoration:none; padding:8px 12px; border-radius:6px; font-size:.86rem; }.primary-nav a:hover,.primary-nav a.active { color:#f5fbff; background:#27313a; }.primary-nav a.active { box-shadow:inset 0 -2px #42d3a5; }
.account { display: flex; align-items: center; justify-content:flex-end; gap: 15px; color: #b8c4cc; font-size: .9rem; min-width:0; }.account form { margin: 0; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 72px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }.page-heading h1,.login-card h1 { margin: 3px 0 0; font-size: 2.4rem; }.compact-heading h1 { font-size:2rem; }.eyebrow { color: #62dbb5; letter-spacing: 0; font-size: .72rem; font-weight: 700; margin: 0; }.muted,.hint,.empty { color: #a9b3bd; line-height: 1.7; }.hint { font-size: .8rem; margin-top: 26px; }
.status-pill,.badge { border: 1px solid #355277; color: #a9d9ff; padding: 6px 10px; border-radius: 999px; font-size: .76rem; white-space: nowrap; }.badge-on { color: #65e9b0; border-color: #1d7354; }.badge-off { color: #f6b2b2; border-color: #87414a; }
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }.stats article,.panel,.login-card { border: 1px solid #303944; background: #181e25; box-shadow: 0 12px 28px rgba(0,0,0,.16); border-radius: 8px; }.stats article { padding: 18px; }.stats span { color: #a9b3bd; font-size: .82rem; display: block; }.stats strong { font-size: 1.8rem; margin-top: 7px; display: block; }
.grid { display: grid; gap: 18px; margin-bottom: 18px; }.two-columns { grid-template-columns: 1fr 1fr; }.panel { padding: 20px; overflow: hidden; }.panel-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 12px; }.panel-heading h2 { margin: 0; font-size: 1rem; }.panel-heading span { color: #91a2c3; font-size: .75rem; }
.module-row { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 15px 0; border-top: 1px solid #273450; }.module-row:first-of-type { border-top: 0; }.module-row strong { font-size: .95rem; }.module-row p { color: #9babc9; font-size: .78rem; margin: 5px 0 0; line-height: 1.45; }.module-copy { flex: 1; min-width: 0; }.module-action { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }.module-row form { margin: 0; flex: 0 0 auto; }
.chat-copy strong { display: block; overflow-wrap: anywhere; }.chat-id { display: block; margin-top: 5px; color: #7282a2; font: 500 .68rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.button { cursor: pointer; border: 1px solid #43515f; border-radius: 6px; background: #26313a; color: #eaf2f7; padding: 8px 12px; font: inherit; line-height: 1.2; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }.button:hover { background: #33414c; }.button-primary { background:#176c58; border-color:#2aa985; }.button-primary:hover { background:#1f8069; }.button-large { padding: 13px 20px; font-weight: 650; }.button-quiet { min-width: 52px; font-size: .78rem; padding: 6px 10px; }
.login-card { width: min(510px, 100%); padding: 42px; margin: 9vh auto 0; }.login-card .muted { margin: 17px 0 25px; }.flash { padding: 12px 15px; border-radius: 10px; margin: 0 0 16px; border: 1px solid #5c4a21; background:#392e15; color:#f9d878; }.flash-success { border-color:#1d7256; background:#13392d; color:#8cf1c0; }.flash-error { border-color:#844551; background:#401e28; color:#ffb8c2; }
.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; font-size: .82rem; }th,td { text-align: left; padding: 12px 10px; border-top: 1px solid #303944; vertical-align: top; }th { color:#aeb8c2; font-weight:600; }td { color:#e0e7ed; max-width: 320px; }td:nth-child(5) { white-space: pre-wrap; }code { color:#76d8bd; }
.detail-list dl { margin: 0; }.detail-list dl > div { display:grid; grid-template-columns: 100px 1fr; gap:12px; padding:10px 0; border-top:1px solid #293653; }.detail-list dl > div:first-child { border-top:0; }.detail-list dt { color:#9aaccc; }.detail-list dd { margin:0; color:#e0e8fa; overflow-wrap:anywhere; }.detail-list a, td a { color:#74d3ff; }.commit-message { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.65; color:#e0e8fa; }.tag-list { display:flex; flex-wrap:wrap; gap:8px; min-height:27px; }.tag { border:1px solid #365a7a; border-radius:999px; color:#9bd9ff; padding:4px 9px; font-size:.78rem; }.tag-form { display:flex; gap:9px; margin-top:18px; }.tag-form input { min-width:0; flex:1; border:1px solid #3b5681; border-radius:8px; padding:8px 10px; background:#0d172b; color:#edf2ff; font:inherit; }.path-list { list-style:none; margin:0; padding:0; max-height:460px; overflow:auto; }.path-list li { padding:9px 0; border-top:1px solid #293653; overflow-wrap:anywhere; }
.access-form { display:grid; gap:12px; }.access-form label { color:#a9b6d0; font-size:.85rem; }.access-form select,.module-row select { border:1px solid #3b5681; border-radius:8px; padding:8px 10px; background:#0d172b; color:#edf2ff; font:inherit; }.access-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }.access-actions form { margin:0; }
.status-band { min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 16px; margin-bottom:18px; border:1px solid #385065; border-left:4px solid #64b5d8; border-radius:6px; background:#18232b; }.status-band div { min-width:0; }.status-band strong,.status-band span { display:block; }.status-band span { margin-top:4px; color:#aab6bf; font-size:.78rem; overflow-wrap:anywhere; }.status-degraded { border-left-color:#ef6c67; }.status-ok { border-left-color:#42d3a5; }
.panel-heading a { color:#76d8bd; font-size:.78rem; }.table-panel { padding:0; }.table-panel > .table-wrap { padding:0 18px 18px; }.table-panel > .empty { padding:18px; }
.filter-bar { display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin-bottom:16px; padding:14px; border:1px solid #303944; background:#181e25; border-radius:8px; }.filter-bar label { display:grid; gap:5px; color:#aeb8c2; font-size:.72rem; }.filter-bar select,.filter-bar input { min-height:36px; border:1px solid #43515f; border-radius:6px; padding:7px 9px; background:#11171d; color:#edf2f7; font:inherit; }.search-field { flex:1; min-width:190px; }
.refresh-toggle { display:flex; align-items:center; gap:8px; color:#b8c4cc; font-size:.82rem; }.refresh-toggle input { accent-color:#42d3a5; }
.pagination { display:flex; justify-content:flex-end; margin-top:14px; }
.severity,.state { display:inline-flex; min-width:64px; justify-content:center; border:1px solid #53616d; border-radius:4px; padding:3px 6px; font-size:.68rem; font-weight:700; }.severity-info { color:#a9d8f0; border-color:#39708b; }.severity-warning,.severity-warn { color:#ffd27a; border-color:#836827; }.severity-error,.severity-critical { color:#ffaaa6; border-color:#914a47; }.state-open { color:#ffd27a; border-color:#836827; }.state-resolved { color:#82e0bd; border-color:#2d795e; }
.table-note { color:#9eabb5; font-size:.74rem; line-height:1.5; margin:5px 0 0; }.log-message { white-space:pre-wrap; overflow-wrap:anywhere; min-width:220px; }.structured-data { max-width:520px; max-height:260px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; margin:8px 0 0; padding:10px; border:1px solid #303944; border-radius:4px; background:#0e1318; color:#d9e1e8; font:500 .72rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }details summary { cursor:pointer; color:#76d8bd; }
@media (max-width: 900px) { .topbar { grid-template-columns:1fr auto; }.primary-nav { grid-column:1 / -1; grid-row:2; justify-content:center; border-top:1px solid #303841; padding-top:8px; }.stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 760px) { .topbar { padding: 10px 20px; gap:12px; }.account > span { display:none; }.container { width: min(100% - 28px,1180px); padding-top:28px; }.two-columns { grid-template-columns: 1fr; }.page-heading { align-items: start; flex-direction: column; }.page-heading h1,.compact-heading h1 { font-size:2rem; }.module-row { align-items: stretch; flex-direction: column; }.module-action,.module-row > form { align-self: flex-end; }.login-card { padding: 28px; margin-top: 5vh; }.status-band { align-items:flex-start; flex-direction:column; }.filter-bar > * { width:100%; }.filter-bar select,.filter-bar input,.filter-bar .button { width:100%; } }