:root{--ink:#1d1d1b;--muted:#74746c;--line:#deded7;--paper:#f7f7f2;--green:#20b26b;--amber:#e6a11a;--red:#eb5b52;--blue:#2869ff}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:13px Inter,ui-sans-serif,system-ui;background:var(--paper);overflow:hidden}
button{border:1px solid var(--line);background:white;border-radius:7px;padding:6px 10px;cursor:pointer;color:var(--ink);font:12px Inter,ui-sans-serif,system-ui}
button:hover{background:#f1f1ec}
button:disabled{opacity:.5;cursor:default}
.dim{color:var(--muted);font-size:11px}
.bad{color:var(--red)}

.board{position:fixed;inset:0;overflow:hidden;background-color:#f8f8f5;background-image:radial-gradient(#d1d1ca 1px,transparent 1px);background-size:20px 20px}
.board canvas{width:100%;height:100%;display:block}
.arrange{position:absolute;left:16px;bottom:16px;background:white;border:1px solid var(--line);border-radius:8px;box-shadow:0 3px 15px #2221;padding:8px 10px;display:flex;align-items:center;gap:6px;font-size:11px;cursor:pointer;user-select:none}
.zoom{position:absolute;right:16px;bottom:16px;background:white;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center}
.zoom button{border:0}
.zoom span{width:52px;text-align:center;font-size:11px}

.lag{grid-template-columns:1fr auto auto}
.cons{grid-template-columns:1fr auto auto}
.job{grid-template-columns:64px 1fr auto}
.job .reason{grid-column:2/4}
.job button{padding:2px 7px;font-size:11px}
.job.failed .state{color:var(--red)} .job.leased .state{color:var(--blue)} .job.succeeded .state{color:var(--green)} .job.cancelled .state{color:var(--amber)}

.control{position:fixed;inset:0;z-index:100;background:var(--paper);display:grid;grid-template-rows:44px 38px 1fr}
.control[hidden]{display:none}
.control header{display:flex;align-items:center;gap:12px;padding:0 14px;background:white;border-bottom:1px solid var(--line);color:var(--ink)}
.control header span{font-size:13px;font-weight:600}
.control .tabstrip{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;align-self:stretch;align-items:flex-end;padding-top:6px}
.control .tab{display:flex;align-items:center;gap:6px;max-width:220px;min-width:90px;padding:6px 8px;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;background:#f1f1ec;font-size:12px;cursor:pointer;color:var(--muted)}
.control .tab.active{background:white;color:var(--ink)}
.control .tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.control .tab b{font-weight:400;padding:0 3px;border-radius:4px}
.control .tab b:hover{background:#e3e3dc}
.control .addressbar{display:flex;align-items:center;gap:6px;padding:0 14px;background:white;border-bottom:1px solid var(--line)}
.control .addressbar button{width:28px;height:26px;padding:0}
.control .addressbar input{flex:1;height:26px;border:1px solid var(--line);border-radius:13px;padding:0 12px;font:12px Inter,ui-sans-serif,system-ui;color:var(--ink);background:#f7f7f2}
.control header button{width:30px;height:30px;padding:0;font-size:20px;line-height:1}
.screen{min-width:0;min-height:0;overflow:hidden;outline:none}
.screen img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;cursor:default}

.login{position:fixed;inset:0;z-index:200;margin:auto;width:440px;height:fit-content;background:white;border:1px solid var(--line);border-radius:10px;padding:20px;box-shadow:0 10px 40px #2223}
.login[hidden]{display:none}
.login input{width:100%;height:32px;margin:10px 0;padding:0 10px;border:1px solid var(--line);border-radius:6px;font:12px ui-monospace,Menlo,monospace}