* { box-sizing: border-box; }
:root { color-scheme: dark; --bg:#0b1119; --panel:#121c28; --panel-2:#172333; --line:#26384c; --text:#e8f0f7; --muted:#91a4b7; --accent:#4fc3f7; --good:#54d39a; --warn:#f2b84b; --bad:#f07178; --shadow:0 14px 34px rgba(0,0,0,.18); }
body { margin:0; min-width:320px; background:linear-gradient(135deg,#0a111a,#0e1722 48%,#0b121b); color:var(--text); font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
h1,h2,h3,p { margin:0; } h1 { font-size:clamp(1.4rem,2vw,2rem); letter-spacing:-.03em; } h2 { font-size:1.08rem; letter-spacing:-.01em; } h3 { font-size:.98rem; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; } .login-card { width:min(410px,100%); padding:32px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:var(--shadow); }
.eyebrow { color:var(--accent); font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } .muted,.hint { color:var(--muted); } .hint { font-size:.75rem; font-weight:400; }
.stack { display:grid; gap:16px; margin-top:24px; } label { display:grid; gap:6px; color:#c6d4df; font-size:.82rem; font-weight:650; } input,textarea,select { width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 11px; background:#0d1723; color:var(--text); outline:none; } input:focus,textarea:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(79,195,247,.15); }
button { border:1px solid var(--line); border-radius:8px; padding:9px 13px; color:var(--text); background:var(--panel-2); } button:hover { border-color:#4b6884; } button.primary { border-color:#2d9ecf; background:#127baa; color:white; font-weight:750; } button.ghost { background:transparent; } button.small { padding:5px 9px; font-size:.78rem; }
.error { color:#ffd4d5; background:rgba(240,113,120,.11); border:1px solid rgba(240,113,120,.4); border-radius:8px; padding:9px 11px; } .banner { margin:0 28px 18px; } [hidden] { display:none !important; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 30px 18px; border-bottom:1px solid var(--line); background:rgba(11,17,25,.75); } .topbar-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .connection-pill { border:1px solid var(--line); border-radius:999px; padding:5px 9px; color:var(--muted); font-size:.75rem; white-space:nowrap; } .connection-pill.live { color:var(--good); border-color:rgba(84,211,154,.45); } .connection-pill.reconnecting { color:var(--warn); border-color:rgba(242,184,75,.45); } .connection-pill.offline { color:var(--bad); border-color:rgba(240,113,120,.45); }
.tabs { display:flex; gap:5px; padding:12px 30px 0; border-bottom:1px solid var(--line); } .tab { border:0; border-bottom:2px solid transparent; border-radius:0; padding:10px 14px; background:transparent; color:var(--muted); } .tab.active { border-color:var(--accent); color:var(--text); }
.view { padding:24px 30px 48px; max-width:1600px; margin:auto; }.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:28px; }.summary-card,.panel,.engineer-card { border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,var(--panel),#101923); box-shadow:var(--shadow); }.summary-card { padding:17px; display:grid; gap:6px; }.summary-card span { color:var(--muted); font-size:.67rem; font-weight:800; letter-spacing:.12em; }.summary-card strong { font-size:1.9rem; letter-spacing:-.04em; }.summary-card small { color:var(--muted); }.summary-card.attention strong { color:var(--warn); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:16px 0 12px; }.engineer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:14px; margin-bottom:26px; }.engineer-card { padding:18px; }.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.state { font-size:.7rem; font-weight:850; letter-spacing:.07em; white-space:nowrap; }.state.live { color:var(--good); }.state.active { color:var(--accent); }.state.idle { color:var(--warn); }.state.offline { color:var(--bad); }.current-block { display:grid; gap:4px; margin:20px 0; padding:13px; border-left:3px solid var(--accent); background:rgba(79,195,247,.06); }.current-block strong { font-size:1.03rem; }.current-block p { color:#c4d3de; }.card-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; }.tag { display:inline-flex; align-items:center; border:1px solid #365066; border-radius:999px; padding:3px 7px; color:#c7d8e5; font-size:.71rem; white-space:nowrap; }.tag.good { color:var(--good); border-color:rgba(84,211,154,.4); }.tag.warn { color:var(--warn); border-color:rgba(242,184,75,.4); }.tag.bad { color:var(--bad); border-color:rgba(240,113,120,.4); }.mini-list { list-style:none; margin:7px 0 0; padding:0; display:grid; gap:4px; }.mini-list li { display:flex; justify-content:space-between; gap:5px; font-size:.77rem; }.mini-list span { color:var(--muted); white-space:nowrap; }
.content-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr); gap:16px; }.panel { padding:18px; }.filters { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }.filters label { font-size:.72rem; }.filters select { padding:8px; }.timeline { display:grid; gap:0; }.timeline-item { display:grid; grid-template-columns:48px 15px 1fr; gap:8px; min-height:66px; }.timeline-item > time { color:var(--muted); font-variant-numeric:tabular-nums; font-size:.76rem; padding-top:3px; text-align:right; }.timeline-dot { width:9px; height:9px; margin:5px 0 0 3px; border:2px solid var(--accent); border-radius:50%; position:relative; }.timeline-item:not(:last-child) .timeline-dot::after { content:""; position:absolute; top:7px; left:2px; width:1px; height:58px; background:var(--line); }.timeline-content { display:flex; align-items:center; flex-wrap:wrap; align-content:flex-start; gap:6px; padding-bottom:12px; }.timeline-content strong { width:100%; font-weight:650; }.timeline-content small { font-size:.73rem; }.repeat { color:var(--accent); font-weight:800; }.project-cards { display:grid; gap:10px; }.project-card { width:100%; text-align:left; display:grid; gap:10px; padding:14px; background:var(--panel-2); }.project-card h3 { margin-bottom:2px; }.code { color:var(--accent); font:600 .72rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }.project-stat { display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:8px; font-size:.77rem; }.project-stat span { color:var(--muted); }.project-stat strong { text-align:right; font-size:.78rem; }
.detail-panel { margin-top:18px; }.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.detail-grid > div { display:grid; gap:4px; padding:11px; background:rgba(255,255,255,.025); border-radius:8px; }.detail-grid strong { word-break:break-word; }.detail-grid small { color:var(--muted); }.detail-toolbar { display:flex; align-items:center; gap:12px; justify-content:space-between; border-top:1px solid var(--line); margin-top:18px; padding-top:14px; }.detail-filters { display:flex; gap:8px; } .detail-toolbar select { width:auto; min-width:160px; }.compact { margin-top:16px; }.privacy-panel { margin-top:18px; }.privacy-panel summary { cursor:pointer; font-weight:750; }.privacy-icon { display:inline-grid; place-items:center; width:20px; height:20px; margin-right:6px; color:var(--good); border:1px solid rgba(84,211,154,.5); border-radius:50%; }.privacy-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:15px; }.privacy-grid h3 { color:#cbdbe7; margin-bottom:4px; }.privacy-grid p,.pilot-note { color:var(--muted); }.pilot-note { margin-top:15px; font-size:.8rem; }
.table-wrap { overflow:auto; }.table-wrap table { width:100%; min-width:840px; border-collapse:collapse; }.table-wrap th,.table-wrap td { text-align:left; padding:11px 9px; border-bottom:1px solid var(--line); vertical-align:top; }.table-wrap th { color:var(--muted); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }.table-wrap td { color:#d3e0e8; }.form-panel { margin-bottom:18px; }.project-form { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }.project-form .wide { grid-column:span 2; }.project-form .check { display:flex; align-items:center; gap:8px; align-self:end; }.project-form .check input { width:auto; }.form-actions { display:flex; gap:8px; align-items:end; justify-content:flex-end; }.empty { color:var(--muted); border:1px dashed var(--line); border-radius:9px; padding:20px; text-align:center; }
@media (max-width:1000px) { .topbar { align-items:flex-start; flex-direction:column; }.topbar-actions { justify-content:flex-start; }.summary-grid { grid-template-columns:repeat(2,1fr); }.content-grid { grid-template-columns:1fr; }.detail-grid { grid-template-columns:repeat(2,1fr); }.project-form { grid-template-columns:repeat(2,1fr); }.project-form .wide { grid-column:span 2; } }
@media (max-width:600px) { .topbar,.tabs,.view { padding-left:15px; padding-right:15px; }.banner { margin-left:15px; margin-right:15px; }.summary-grid { grid-template-columns:1fr 1fr; gap:8px; }.summary-card { padding:12px; }.summary-card strong { font-size:1.45rem; }.engineer-grid { grid-template-columns:1fr; }.card-row,.filters,.privacy-grid,.detail-grid,.project-form { grid-template-columns:1fr; }.project-form .wide { grid-column:span 1; }.timeline-item { grid-template-columns:40px 12px 1fr; }.timeline-content .tag { font-size:.65rem; }.detail-toolbar { align-items:flex-start; flex-direction:column; }.detail-toolbar select { width:100%; }.login-card { padding:24px; } }

.button-link { display:inline-flex; align-items:center; text-decoration:none; border:1px solid var(--line); border-radius:8px; padding:9px 13px; color:var(--text); background:var(--panel-2); font-weight:650; }
.button-link.primary { border-color:#2d9ecf; background:#127baa; color:white; }
.download-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.enrollment-result { display:grid; gap:12px; margin-top:18px; padding:16px; border:1px solid rgba(242,184,75,.55); border-radius:10px; background:rgba(242,184,75,.07); }
.enrollment-code { color:var(--warn); font:700 1rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; user-select:all; }
.enrollment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.enrollment-grid > div { display:grid; gap:3px; }
.enrollment-result pre { margin:0; padding:11px; border-radius:7px; background:#0a1119; overflow:auto; white-space:pre-wrap; user-select:all; }
#agents-table td small { display:block; margin-top:4px; }