:root { font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; color:#24352e; background:#f5f6f2; font-size:14px; line-height:1.6; color-scheme:light}
* { box-sizing:border-box}
body { margin:0}
button,input { font:inherit}
button { background:#25614d; color:white; border:1px solid #25614d; border-radius:8px; padding:9px 16px; cursor:pointer; font-weight:600}
button:hover { filter:brightness(.94)}
button:disabled { opacity:.45; cursor:not-allowed}
button.quiet { background:white; color:#385548; border-color:#d8e1d9}
a { color:inherit; text-decoration:none}
[hidden] { display:none!important}
.topbar { height:76px; padding:0 max(24px,calc((100vw - 1160px)/2)); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #e1e7df}
.brand { display:flex; align-items:center; gap:12px; font-weight:750; font-size:20px; letter-spacing:-.5px}
.mark { display:grid; place-items:center; background:#25614d; color:white; border-radius:9px; width:34px; height:34px; font-family:Georgia,serif}
.tag { font-size:12px; letter-spacing:0; font-weight:500; color:#738176; margin-left:8px; padding-left:16px; border-left:1px solid #dce3dc}
main { max-width:1160px; margin:0 auto; padding:34px 24px 48px}
.panel { background:white; border:1px solid #e0e6dd; border-radius:12px}
.login { max-width:440px; margin:9vh auto; padding:36px}
.eyebrow { color:#648470; font-size:11px; font-weight:700; letter-spacing:1.8px}
h1 { font-size:28px; line-height:1.3; margin:10px 0 12px; letter-spacing:-.7px}
h2 { font-size:18px; letter-spacing:-.3px; margin:0}
h3 { font-size:14px; font-weight:600; margin:0}
p { color:#6a786d; margin:8px 0 16px}
.login form { display:grid; gap:12px; margin-top:28px}
label { font-weight:600}
input { border:1px solid #cfdacf; border-radius:8px; padding:12px; width:100%; background:#fcfdfb; color:#24352e}
input:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid #94b5a5; outline-offset:3px}
.note { font-size:12px; color:#7d897f}
.login .note { margin-top:20px}
.page-title { display:flex; justify-content:space-between; align-items:center; gap:20px}
.page-title p { margin-bottom:0}
nav { display:flex; gap:26px; border-bottom:1px solid #dce3d9; margin-top:30px; padding-bottom:12px; color:#6d7c70}
nav a:first-child { color:#25614d; font-weight:650}
nav a:hover { color:#25614d}
.statusline { display:flex; justify-content:space-between; gap:12px; color:#7a877d; font-size:12px; margin:20px 0}
#connection-status { color:#397158}
#connection-status::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:8px}
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:20px 0 32px}
.metric { display:flex; flex-direction:column; padding:20px 24px}
.metric>span { color:#7a867d; font-size:12px}
.metric strong { font-size:32px; font-weight:650; letter-spacing:-1px; line-height:1.3; margin:12px 0; color:#254e3c}
#gateway-state { font-size:23px; line-height:1.8}
.metric small { font-size:11px; color:#8b958c}
.section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px}
.section-title>span { font-size:12px; color:#8b958c}
.workers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:28px}
.worker { padding:20px; min-width:0}
.worker-head { display:flex; align-items:center; gap:10px; margin-bottom:16px}
.worker-head h3 { flex:1; overflow-wrap:anywhere; font-size:16px}
.badge { font-size:11px; border-radius:20px; background:#edf5ee; color:#397158; padding:3px 10px; white-space:nowrap}
.badge.busy,.badge.cancelling,.badge.restarting { background:#fcf1dc; color:#896525}
.worker dl { display:grid; grid-template-columns:94px minmax(0,1fr); gap:8px; font-size:12px; margin:0}
.worker dt { color:#8b958c}
.worker dd { margin:0; overflow-wrap:anywhere; color:#526457}
.worker .timings-title { margin:18px 0 12px}
.worker .restart-hint { font-size:11px; color:#929a92; margin:14px 0 0}
.empty { border:1px dashed #d6dfd4; border-radius:10px; color:#859083; padding:24px; grid-column:1/-1; text-align:center}
.section-panel { padding:24px; margin-bottom:24px}
.table-wrap { overflow-x:auto}
table { border-collapse:collapse; width:100%; font-size:12px; text-align:left}
th { color:#8a968b; font-size:11px; font-weight:500; background:#f9faf6}
td,th { padding:14px 12px; border-bottom:1px solid #edf0e9; overflow-wrap:anywhere}
td { min-width:100px}
td:first-child { font-weight:650; color:#365a45}
code,pre { font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
code { font-size:12px; color:#3c6650; background:#eff4ed; padding:3px 5px; border-radius:4px}
.example { border:1px solid #e1e7dc; border-radius:9px; margin-top:16px; overflow:hidden}
.example>div { display:flex; justify-content:space-between; align-items:center; background:#f9faf7; padding:10px 16px; border-bottom:1px solid #e7ece2}
.copy { font-size:11px; padding:4px 10px}
pre { white-space:pre-wrap; word-break:break-word; margin:0; padding:18px; font-size:12px; color:#486150; line-height:1.8}
.notes { padding-left:20px; color:#7b887d; font-size:12px; line-height:2}
.error { color:#a44039; font-size:13px}
.error:empty,.notice:empty { display:none}
.notice,#operations p { padding:12px 16px; border:1px solid #d7e5d9; background:#eef5ee; border-radius:8px; color:#47674f; font-size:13px}
footer { color:#909a8d; font-size:11px; text-align:center; padding:8px 0 12px; line-height:1.9}
section { scroll-margin-top:20px}
.api-definition { border-top:1px solid #e1e7dc; padding:22px 0 4px; margin-top:16px}
.api-definition h3 { overflow-wrap:anywhere; margin-bottom:10px}
.api-definition details { margin:12px 0; color:#648470}
.api-definition summary { cursor:pointer; font-size:12px}
.api-definition th:first-child,.api-definition td:first-child { min-width:160px}
@media(max-width:700px) { main { padding:24px 16px}
.topbar { height:64px; padding:0 16px}
.tag { margin-left:0; padding-left:10px}
.metrics { grid-template-columns:repeat(2,1fr); gap:10px}
.metric { padding:16px}
.workers { grid-template-columns:1fr}
.page-title { align-items:flex-start}
.page-title h1 { font-size:23px}
.page-title button { font-size:11px; white-space:nowrap; padding:8px 10px}
.section-panel { padding:18px}
.section-title { align-items:flex-start}
.section-title>span { font-size:10px}
.statusline { flex-wrap:wrap}
.login { margin:6vh auto; padding:26px}
nav { gap:24px}
.worker-head button { padding:6px 12px; font-size:12px}
}