:root { color-scheme:light; --bg:#f2f3f0; --surface:#fff; --soft:#f7f8f5; --text:#202a28; --muted:#65716d; --line:#dde3dd; --accent:#8b561a; --accent-bg:#f6ecdc; --ok:#246847; --bad:#b33330; --warn:#946017; --shadow:0 4px 20px #182a2206; }
@media(prefers-color-scheme:dark) { :root:not([data-theme=light]) { color-scheme:dark; --bg:#101514; --surface:#191f1d; --soft:#202825; --text:#e9ede7; --muted:#a0ada4; --line:#303b35; --accent:#e3bb7c; --accent-bg:#332c21; --ok:#8cc3a4; --bad:#f19a91; --warn:#e5bd7a; --shadow:none; } }
:root[data-theme=dark] { color-scheme:dark; --bg:#101514; --surface:#191f1d; --soft:#202825; --text:#e9ede7; --muted:#a0ada4; --line:#303b35; --accent:#e3bb7c; --accent-bg:#332c21; --ok:#8cc3a4; --bad:#f19a91; --warn:#e5bd7a; --shadow:none; }
* { box-sizing:border-box; } [hidden] { display:none!important; } body { margin:0; background:var(--bg); color:var(--text); font:14px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif; -webkit-text-size-adjust:100%; padding-bottom:env(safe-area-inset-bottom); }
a { color:var(--accent); text-underline-offset:3px; } h1,h2,p { margin:0; } h1 { font-size:28px; letter-spacing:-1px; line-height:1.3; } h2 { font-size:16px; letter-spacing:-.3px; } p+p { margin-top:8px; } button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; } button,select,input,textarea { border:1px solid var(--line); background:var(--surface); border-radius:8px; min-height:44px; padding:9px 13px; } button { cursor:pointer; font-weight:550; } button:hover:not(:disabled) { border-color:var(--accent); background:var(--accent-bg); } button:disabled { opacity:.45; cursor:not-allowed; } button.primary { background:var(--accent); border-color:var(--accent); color:var(--bg); } button.danger { color:var(--bad); border-color:var(--bad); } button.quiet { background:transparent; border-color:transparent; color:var(--muted); } button.quiet:hover { color:var(--accent); } button.link { padding:0; min-height:32px; border:0; background:none; color:var(--accent); text-align:left; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; } input,textarea { width:100%; min-width:0; } input[type=search] { appearance:none; } label { display:block; font-size:13px; color:var(--muted); } label input,label select,label textarea { margin-top:5px; color:var(--text); } select { max-width:100%; } code { font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--soft); padding:2px 6px; border-radius:4px; overflow-wrap:anywhere; }
.bar { min-height:80px; padding:16px max(24px,env(safe-area-inset-right)); padding-top:max(16px,env(safe-area-inset-top)); display:flex; justify-content:space-between; align-items:center; gap:16px; background:var(--surface); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:16px; color:var(--text); text-decoration:none; font-weight:700; font-size:16px; flex-shrink:0; } .brand-mark { font:800 24px/1 Georgia,serif; letter-spacing:-3px; padding-right:3px; } .brand-mark>span { color:var(--accent); } .brand small { display:block; font-size:9px; font-weight:500; letter-spacing:1.8px; color:var(--muted); margin-top:1px; } .header-tools,#who { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } #user { font-size:12px; color:var(--muted); }
.tabs { display:flex; gap:6px; padding:8px max(24px,calc((100vw - 1180px)/2)); background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; } .tabs button { background:none; border-color:transparent; color:var(--muted); white-space:nowrap; font-size:13px; } .tabs button[aria-selected=true] { color:var(--accent); background:var(--accent-bg); }
main#content { max-width:1180px; margin:auto; padding:30px 24px; outline:0; } .page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; } .page-head h1 { margin:4px 0 7px; } .eyebrow { color:var(--accent); font-size:10px; letter-spacing:2px; font-weight:700; } .muted,.fine { color:var(--muted); } .fine { font-size:12px; } .page-tools { display:flex; align-items:center; gap:12px; flex-shrink:0; } .pill,.counter { border-radius:6px; padding:4px 8px; font-size:11px; line-height:1.5; font-weight:600; background:var(--soft); color:var(--muted); white-space:nowrap; } .pill.ok { color:var(--ok); } .pill.warn,.counter { color:var(--warn); background:var(--accent-bg); } .pill.bad { color:var(--bad); } .counter { margin-left:3px; }
.service-strip { padding:14px 18px; border:1px solid var(--line); border-radius:10px; background:var(--surface); display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; } .service-strip>div { display:flex; align-items:center; flex-wrap:wrap; gap:10px; } .live-dot { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--ok); } .metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; } .metric { text-align:left; padding:19px 20px; box-shadow:var(--shadow); min-width:0; } .metric>span,.metric small { display:block; color:var(--muted); font-size:12px; font-weight:400; } .metric strong { display:block; font-size:36px; font-weight:600; letter-spacing:-1px; line-height:1.4; margin:8px 0; font-variant-numeric:tabular-nums; } .metric small { font-size:11px; }
.columns { display:grid; grid-template-columns:1.2fr 1fr; gap:18px; } .panel { border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:20px; margin-bottom:18px; box-shadow:var(--shadow); min-width:0; } .panel-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; } .panel-head h2+p { margin-top:4px; } .panel-head button.quiet { padding-right:0; min-height:30px; } .list-item { padding:14px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; } .list-item:first-child { padding-top:0; } .list-item:last-child { padding-bottom:0; border:0; } .list-item .actions { margin-top:10px; } .actions { display:flex; flex-wrap:wrap; gap:8px; } .empty { padding:30px 12px; text-align:center; color:var(--muted); } .empty strong { display:block; font-size:14px; font-weight:500; color:var(--text); margin-bottom:4px; } .empty.compact { padding:15px 8px; } .architecture-note { padding:4px 2px; color:var(--muted); font-size:12px; }
.meter { height:7px; display:flex; width:100%; background:var(--soft); overflow:hidden; border-radius:10px; margin:12px 0; } progress { accent-color:var(--accent); width:100%; height:7px; display:block; margin:12px 0; border:0; border-radius:10px; overflow:hidden; background:var(--soft); } progress::-webkit-progress-bar { background:var(--soft); } progress::-webkit-progress-value { background:var(--accent); } progress::-moz-progress-bar { background:var(--accent); } .meter-label { display:flex; justify-content:space-between; gap:10px; align-items:baseline; } .meter-label strong { font-size:24px; letter-spacing:-.5px; } .facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:22px; } .fact small { display:block; color:var(--muted); font-size:12px; } .fact strong { display:block; font-size:17px; font-weight:550; margin-top:4px; }
.toolbar { display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin-bottom:18px; } .toolbar .grow { flex:1 1 220px; } .toolbar input,.toolbar select { margin-top:0; } .toolbar input[type=file] { margin-top:5px; width:100%; } label.grow { min-width:0; } .scroll { overflow-x:auto; max-width:100%; } .table-panel { padding:0; } table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; } th { font-size:11px; color:var(--muted); font-weight:500; background:var(--soft); } th,td { padding:13px 16px; border-bottom:1px solid var(--line); } td { font-size:13px; } tbody tr:last-child td { border:0; } .pagination { display:flex; gap:12px; justify-content:flex-end; align-items:center; margin:14px 16px; color:var(--muted); font-size:12px; } .pagination button { min-height:38px; }
.record { padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:9px; margin-bottom:10px; } .record-top,.record-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .record-title { display:flex; align-items:center; gap:10px; } .record-title strong { font-size:16px; } .record-id { letter-spacing:.6px; } .record-names { margin:12px 0 14px; color:var(--muted); font-size:13px; overflow-wrap:anywhere; } .record-bottom { padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; } .record-bottom button { min-height:34px; padding:5px 10px; } .record-list:empty { display:none; }
details>summary { cursor:pointer; font-weight:600; min-height:30px; } summary .fine { margin-left:8px; font-weight:400; } details[open]>summary { margin-bottom:18px; } .help-list { padding-left:20px; color:var(--muted); font-size:13px; } .help-list li+li { margin-top:10px; } .info { margin:0; display:grid; grid-template-columns:130px minmax(0,1fr); } .info dt,.info dd { padding:12px 0; border-bottom:1px solid var(--line); margin:0; overflow-wrap:anywhere; } .info dt { color:var(--muted); } .log { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--soft); font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; padding:16px; max-height:55vh; overflow:auto; border-radius:6px; margin:0; }
.notice { padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--surface); border-bottom:1px solid var(--line); } .error { color:var(--bad); } .toast { position:fixed; z-index:30; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); color:var(--bg); background:var(--text); border-radius:8px; padding:12px 20px; box-shadow:0 4px 20px #0003; max-width:calc(100% - 28px); width:max-content; font-size:13px; } .loading { font-size:12px; color:var(--muted); margin-bottom:10px; } .callout { padding:12px; border-left:3px solid var(--warn); background:var(--accent-bg); font-size:13px; }
.login-shell { width:calc(100% - 40px); max-width:390px; margin:10vh auto; } .login-shell h1 { margin:12px 0; } .stack { margin:28px 0 14px; } .stack>label { margin:14px 0; } .stack button { width:100%; margin-top:10px; } .check { display:flex; align-items:center; gap:6px; } .check input { width:18px; height:18px; min-height:18px; margin:0; } dialog { width:calc(100% - 32px); max-width:640px; max-height:85dvh; overflow:auto; background:var(--surface); color:var(--text); border:1px solid var(--line); padding:24px; border-radius:12px; } #confirm { max-width:460px; } dialog::backdrop { background:#07100eb3; } .dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; } dialog .actions { margin-top:24px; justify-content:flex-end; } dialog label { margin-top:18px; } #confirm-text { margin-top:12px; white-space:pre-line; } footer { border-top:1px solid var(--line); margin-top:34px; padding-top:18px; color:var(--muted); font-size:11px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .skip { position:absolute; top:-100px; padding:12px; z-index:50; background:var(--surface); } .skip:focus { top:0; }
@media(max-width:760px) { .bar { padding:12px 16px; min-height:74px; } .brand { gap:10px; } .brand small { font-size:8px; letter-spacing:1px; } .header-tools { gap:4px; justify-content:flex-end; } #user { display:none; } #connection { display:none; } .header-tools button { padding:7px 8px; font-size:12px; } .tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:8px 12px; gap:4px; } .tabs button { padding:7px 4px; min-height:40px; font-size:12px; } main#content { padding:22px 16px; } h1 { font-size:24px; } .page-head { align-items:flex-start; gap:12px; } .page-head .muted { font-size:12px; } .page-tools { flex-direction:column-reverse; align-items:flex-end; gap:4px; } .page-tools .fine { font-size:10px; white-space:nowrap; } .page-tools button { min-height:38px; font-size:12px; padding:7px 10px; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .metric { padding:14px; } .metric strong { font-size:30px; margin:5px 0; } .metric small { font-size:10px; } .columns { grid-template-columns:1fr; gap:0; } .panel { padding:16px; } .table-panel { padding:0; } .service-strip { padding:12px; } #service-uptime { display:none; } .facts { grid-template-columns:repeat(2,minmax(0,1fr)); } .info { grid-template-columns:100px minmax(0,1fr); font-size:12px; } .record { padding:14px; } .record-bottom { gap:8px; } .record-title strong { font-size:15px; } th,td { padding:12px; } .toolbar { gap:8px; } .toolbar .grow { flex-basis:100%; } .notice { padding:12px 16px; font-size:13px; } dialog { padding:18px; } footer { margin-top:24px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }