:root {
  color-scheme: light;
  --bg: var(--tg-theme-secondary-bg-color, #f2f4f3);
  --surface: var(--tg-theme-bg-color, #fff);
  --ink: var(--tg-theme-text-color, #172723);
  --muted: var(--tg-theme-subtitle-text-color, #586760);
  --line: color-mix(in srgb, var(--ink) 13%, transparent);
  --accent: var(--tg-theme-button-color, #21634c);
  --accent-ink: var(--tg-theme-button-text-color, #fff);
  --tint: color-mix(in srgb, var(--accent) 8%, var(--surface));
  --danger: #ac3430;
  --warning: #77530c;
  --warning-bg: #fff5db;
  --good: #276d52;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}
:root[data-theme="dark"] {color-scheme: dark; --bg: var(--tg-theme-secondary-bg-color, #141c19); --surface: var(--tg-theme-bg-color, #1c2722); --ink: var(--tg-theme-text-color, #e6eee9); --muted: var(--tg-theme-subtitle-text-color, #b1beb6); --accent: var(--tg-theme-button-color, #b5d7c0); --accent-ink: var(--tg-theme-button-text-color, #163326); --danger: #ffaaa1; --warning: #eacc89; --warning-bg: #322c1d; --good: #a3d7b8;}
* {box-sizing: border-box;}
body {margin: 0; background: var(--bg); color: var(--ink); min-width: 280px;}
[hidden] {display: none !important;}
a {color: var(--ink);}
button, a {touch-action: manipulation; -webkit-tap-highlight-color: transparent;}
button {font: inherit; font-size: .875rem; font-weight: 650; border: 1px solid var(--line); border-radius: 10px; min-height: 46px; min-width: 46px; padding: 10px 16px; color: var(--ink); background: var(--surface); cursor: pointer;}
button:hover:not(:disabled) {background: var(--tint);}
button:disabled {cursor: not-allowed; opacity: .48;}
button.primary {background: var(--accent); color: var(--accent-ink); border-color: transparent;}
button.primary:hover:not(:disabled) {filter: brightness(.94); background: var(--accent);}
button.danger {color: var(--danger);}
button.danger.primary {background: var(--danger); color: var(--surface);}
:focus-visible {outline: 3px solid var(--accent); outline-offset: 3px;}
h1,h2,h3,p {margin: 0;}
h1 {font-size: 1.5rem; line-height: 1.1; letter-spacing: -.045em;}
h2 {font-size: 1.125rem; line-height: 1.35; letter-spacing: -.025em; font-weight: 700;}
h3 {font-size: 1rem; line-height: 1.4;}
.shell {max-width: 1100px; margin: auto; padding: calc(22px + var(--safe-top)) max(18px, var(--safe-right)) calc(28px + var(--safe-bottom)) max(18px, var(--safe-left));}
.topbar {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 22px;}
.brand {display:flex; gap:11px; align-items:center;}
.brand-mark {background:var(--ink); color:var(--surface); display:grid; place-items:center; width:42px; height:42px; border-radius:12px; font-weight:700; font-size:30px; line-height:1; padding-bottom:5px;}
.brand p {color: var(--muted); font-size: .8125rem; margin-top: 4px;}
.access-label {font-size: .75rem; color: var(--muted); text-align: right;}
.skip-link {position:absolute; left:16px; top:-70px; z-index:20; padding:12px; background:var(--surface); border:1px solid var(--accent); border-radius:8px;}
.skip-link:focus {top:10px;}
.auth-panel {margin: 30px auto; padding: 28px; max-width: 540px; border: 1px solid var(--line); background: var(--surface); border-radius: 16px;}
.auth-panel h2 {margin:10px 0; font-size:1.5rem;}
.auth-panel p:last-child {color:var(--muted); line-height:1.65;}
.eyebrow {font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 750; margin-bottom: 5px;}
.connection-panel {background: var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px;}
.connection-line {display:flex; gap:8px; justify-content:space-between; align-items:center; flex-wrap:wrap; font-size:.8125rem;}
.status-pill {display:inline-flex; align-items:center; gap:7px; font-weight:700; color:var(--good);}
.status-pill::before {content:''; width:7px; height:7px; background:currentColor; border-radius:50%; flex:none;}
.status-pill[data-status="warning"] {color:var(--warning);}
#freshness {color:var(--muted);}
#connection-detail {color:var(--muted); font-size:.8125rem; margin-top:6px;}
.section-nav {display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--line); margin:12px 0 24px;}
.section-nav a {padding:12px 10px; min-height:48px; font-size:.875rem; text-decoration:none; font-weight:650; border-radius:8px 8px 0 0;}
.section-nav a:first-child {color:var(--accent); box-shadow:inset 0 -2px var(--accent);}
.section-nav a:hover {background:var(--tint);}
#nav-count {margin-left:3px; color:var(--muted);}
.workspace {display:grid; gap:30px;}
.monitor-column, .operate-column {min-width:0; display:flex; flex-direction:column; gap:28px;}
.section-heading {display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:9px;}
.section-caption {font-size:.8125rem; color:var(--muted); margin-bottom:16px; line-height:1.55;}
.read-only {font-size:.75rem; font-weight:600; color:var(--muted); white-space:nowrap;}
.metrics {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
.metric {background:var(--surface); border:1px solid var(--line); padding:16px; border-radius:12px; min-width:0;}
.metric-head {display:flex; justify-content:space-between; align-items:center; gap:8px;}
.metric h3 {color:var(--muted); font-size:.8125rem; font-weight:600;}
.metric-value {font-size:1.875rem; font-weight:650; letter-spacing:-.05em; margin-top:6px; line-height:1.2; white-space:nowrap;}
.metric-value small {font-size:.875rem; font-weight:500; margin-left:3px; letter-spacing:0; color:var(--muted);}
.metric-detail {font-size:.75rem; color:var(--muted); margin-top:5px; overflow-wrap:anywhere;}
.sparkline {display:block; width:100%; height:44px; overflow:visible; color:var(--accent); margin-top:14px;}
.sparkline polyline {fill:none; stroke:currentColor; stroke-width:1.8; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round;}
.chart-empty {min-height:44px; display:flex; align-items:center; margin-top:14px; font-size:.75rem; color:var(--muted);}
.metric.disk {grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:0 20px; align-items:center;}
.metric.disk .sparkline {margin-top:0;}
.secondary-metrics {grid-column:1/-1; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:2px 16px;}
.resource-row {display:grid; grid-template-columns:1fr auto; align-items:baseline; padding:12px 0; gap:4px 12px;}
.resource-row+.resource-row {border-top:1px solid var(--line);}
.resource-row h3 {font-size:.8125rem; font-weight:500; color:var(--muted);}
.resource-row strong {font-size:.875rem; font-weight:650;}
.resource-row p {grid-column:1/-1; color:var(--muted); font-size:.75rem;}
.chart-note {font-size:.75rem; color:var(--muted); margin-top:9px;}
.services-panel,.history-panel {border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden;}
.service-row {padding:13px 16px; display:flex; gap:10px; justify-content:space-between; align-items:center; font-size:.875rem;}
.service-row+.service-row {border-top:1px solid var(--line);}
.service-row span:first-child {overflow-wrap:anywhere; min-width:0;}
.service-state {font-size:.75rem; text-align:right; color:var(--muted);}
.service-state.good {color:var(--good);}
.count {display:inline-grid; place-items:center; margin-left:5px; min-width:25px; height:25px; border-radius:7px; background:var(--surface); border:1px solid var(--line); font-size:.875rem;}
.warnings {font-size:.8125rem; color:var(--warning); background:var(--warning-bg); border:1px solid color-mix(in srgb, var(--warning) 18%, transparent); border-radius:10px; padding:12px 14px; line-height:1.6; margin:0 0 14px;}
.warnings p+p {margin-top:6px;}
.task-list {display:flex; flex-direction:column; gap:12px;}
.task-card {border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:16px;}
.task-top {display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.task-top h3 {overflow-wrap:anywhere; min-width:0; letter-spacing:-.02em;}
.task-kind {font-size:.75rem; border:1px solid var(--line); padding:3px 7px; border-radius:5px; color:var(--muted); white-space:nowrap;}
.task-meta {font-size:.75rem; color:var(--muted); margin-top:6px; overflow-wrap:anywhere;}
.task-state {font-size:.75rem; margin-top:13px; color:var(--good);}
.task-reason {color:var(--muted); font-size:.75rem; margin-top:3px; overflow-wrap:anywhere;}
.task-bottom {display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; margin-top:14px; border-top:1px solid var(--line);}
.remaining {font-size:1.125rem; font-weight:650; letter-spacing:-.03em;}
.remaining-label {font-size:.75rem; color:var(--muted); display:block; font-weight:400; letter-spacing:0;}
.task-bottom button {background:var(--tint); border-color:transparent; color:var(--accent);}
.full-width {width:100%; margin-top:12px;}
.subtle {background:transparent;}
.empty {padding:20px 16px; color:var(--muted); font-size:.875rem; line-height:1.6;}
.audit-row {padding:13px 16px; display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; font-size:.8125rem; overflow-wrap:anywhere;}
.audit-task {display:block; font-size:.875rem; margin-bottom:4px;}
.audit-details {margin-top:4px;}
.history-panel .audit-details {border-top:0;}
.audit-details summary {padding:10px 4px;}
.audit-details dl {margin:0 0 8px; font-size:.75rem;}
.audit-details dt {color:var(--muted); margin-top:7px;}
.audit-details dd {margin:0; overflow-wrap:anywhere;}
#open-journal {flex-shrink:0; padding:8px 12px;}
#journal-dialog {max-width:760px; overflow:hidden;}
#journal-dialog[open] {display:flex; flex-direction:column;}
#journal-dialog .dialog-heading, #journal-dialog .section-caption {flex:none;}
#journal-dialog h2 {font-size:1.125rem;}
#journal-entries {min-height:0; overflow-y:auto; overscroll-behavior:contain;}
#close-journal {flex-shrink:0;}
.audit-row+.audit-row {border-top:1px solid var(--line);}
.audit-row time {color:var(--muted); font-size:.75rem; padding-top:2px;}
.audit-row small {display:block; color:var(--muted); font-size:.75rem; margin-top:3px; overflow-wrap:anywhere;}
.history-panel details {border-top:1px solid var(--line);}
summary {cursor:pointer; min-height:46px; padding:12px 16px; font-size:.8125rem; color:var(--muted);}
footer {border-top:1px solid var(--line); margin-top:30px; padding-top:18px; font-size:.75rem; line-height:1.7; color:var(--muted);}
footer p+p {margin-top:7px;}
.notice, .ticket-panel {padding:16px; border-radius:12px; margin-bottom:20px; background:var(--surface); border:1px solid var(--line); font-size:.875rem;}
.notice[data-error="true"] {color:var(--danger);}
.ticket-panel {background:var(--warning-bg); color:var(--warning);}
.ticket-panel h2 {font-size:.9375rem; margin-bottom:6px;}
.ticket-panel button {margin-top:12px; width:100%;}
.mono {font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.75rem; overflow-wrap:anywhere; margin-top:9px;}
dialog {color:var(--ink); background:var(--surface); width:calc(100% - 28px); max-width:460px; max-height:calc(var(--tg-viewport-stable-height,100dvh) - 36px - var(--safe-top) - var(--safe-bottom)); padding:22px; border:1px solid var(--line); border-radius:18px; margin:auto; overflow-y:auto; box-shadow:0 22px 80px #0004;}
dialog::backdrop {background:#08161188;}
.dialog-heading {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
.dialog-heading .eyebrow {margin:0;}
.icon-button {padding:0; border:0; font-weight:400; font-size:1.5rem; background:transparent; margin:-9px -8px 0 0;}
dialog h2 {font-size:1.375rem; overflow-wrap:anywhere;}
#dialog-description {font-size:.875rem; color:var(--muted); margin-top:10px; line-height:1.6;}
.dialog-task-info {background:var(--bg); padding:14px; border-radius:10px; font-size:.8125rem; margin:18px 0; line-height:1.7; overflow-wrap:anywhere;}
.dialog-task-info .mono {margin-top:5px;}
.extend-label {font-size:.875rem; margin-bottom:10px; font-weight:600;}
.extend-options {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
.extend-options button {padding:10px 5px; font-size:.875rem;}
.extend-options button[aria-pressed="true"] {background:var(--accent); color:var(--accent-ink); border-color:transparent;}
.dialog-footer {display:flex; gap:10px; margin-top:22px; align-items:stretch;}
.dialog-footer button {flex:1; padding:11px 12px;}
.dialog-error {margin-top:14px; color:var(--danger); font-size:.875rem;}
.confirm-targets {padding:0; list-style:none;}
.confirm-targets li {padding:12px 0; border-bottom:1px solid var(--line); font-size:.875rem; overflow-wrap:anywhere;}
.confirm-targets code {display:block; font-size:.75rem; color:var(--muted); margin-top:5px;}
@media(min-width:760px) {.shell{padding:32px 30px 40px;} .topbar{padding-bottom:28px;} .access-label{font-size:.8125rem;} .workspace{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:36px;} .connection-panel{padding:15px 18px;} .section-nav{margin-bottom:28px;} .metric{padding:20px;} .metric-value{font-size:2.25rem;} .task-card{padding:20px;} .section-heading h2{font-size:1.25rem;} footer{max-width:620px;} }
@media(max-width:340px) {.shell{padding-left:14px;padding-right:14px;} .metric{padding:12px;} .metric-value{font-size:1.625rem;} .read-only{font-size:.75rem;} dialog{padding:18px;} .access-label{max-width:76px;} }
@media(prefers-reduced-motion:no-preference) {button{transition:background-color .15s,opacity .15s;} }