:root{
  --bg:#08101d;--panel:#0f1a2b;--panel2:#121f33;--line:#20304a;--text:#eef5ff;--muted:#8fa2bb;
  --cyan:#64d2ff;--green:#7ef0a8;--yellow:#ffd36a;--red:#ff7d8d;--blue:#8bb8ff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{padding:max(14px,env(safe-area-inset-top)) 14px max(22px,env(safe-area-inset-bottom))}
button{font:inherit}
.topbar{max-width:920px;margin:0 auto 14px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--cyan);font-weight:800}
h1{font-size:24px;margin:2px 0 0;letter-spacing:-.03em}
.refresh{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px 14px;border-radius:12px;font-weight:700}
.refresh:active{transform:translateY(1px)}
main{max-width:920px;margin:0 auto}
.system-card{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);background:linear-gradient(145deg,#101d31,#0d1728);border-radius:16px;padding:13px 14px}
.system-left{display:flex;align-items:center;gap:10px}
.health-dot{width:10px;height:10px;border-radius:999px;background:var(--green);box-shadow:0 0 14px currentColor}
.health-dot.warn{background:var(--yellow)}
.health-dot.bad{background:var(--red)}
.system-title{font-weight:800}
.system-sub{font-size:12px;color:var(--muted);margin-top:2px}
.system-metrics{text-align:right;font-size:12px;color:var(--muted)}
.meta-row{display:flex;justify-content:space-between;gap:12px;margin:8px 2px 14px;color:var(--muted);font-size:12px}
.connection{font-weight:700;color:var(--green)}
.connection.bad{color:var(--red)}
.projects{display:grid;gap:10px}
.project-card{border:1px solid var(--line);background:var(--panel);border-radius:18px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.16)}
.project-summary{width:100%;border:0;background:transparent;color:inherit;padding:15px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;text-align:left}
.project-summary h2{margin:0;font-size:17px;letter-spacing:-.01em}
.project-branch{margin-top:5px;color:var(--muted);font-size:11px;max-width:66vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-chip{flex:0 0 auto;border:1px solid currentColor;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900;letter-spacing:.03em;color:var(--muted)}
.state-RUNNING,.state-WORKING{color:var(--yellow)}
.state-ACTIVE,.state-CONTROL{color:var(--cyan)}
.state-WAITING_TASK{color:var(--yellow)}
.state-INTERRUPTED{color:var(--red)}
.state-TASK_DONE,.state-DONE,.state-IDLE{color:var(--green)}
.state-TASK_FAILED,.state-FAILED,.state-STALE,.state-CONFLICT{color:var(--red)}
.project-body{display:none;border-top:1px solid var(--line);padding:14px 15px 16px;background:var(--panel2)}
.project-card.open .project-body{display:block}
.project-card.open .project-summary{background:rgba(255,255,255,.012)}
.progress-wrap{margin:0 0 14px}
.progress-wrap.hidden{display:none}
.progress-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:6px;color:var(--muted)}
.progress-value{color:var(--text)}
.progress-track{height:7px;border-radius:999px;background:#0a1321;overflow:hidden;border:1px solid #1b2a40}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .35s ease}
.details{display:grid;grid-template-columns:108px 1fr;gap:8px 10px;margin:0;font-size:13px}
.details dt{color:var(--muted)}
.details dd{margin:0;min-width:0;overflow-wrap:anywhere}
.details .important{font-weight:750}
.auth-error{margin-top:30px;padding:22px;border:1px solid #5c2732;background:#2b1118;border-radius:16px}
.auth-error h2{margin:0 0 6px}
.hidden{display:none!important}
.skeleton{opacity:.75}
@media(min-width:700px){
  body{padding-left:24px;padding-right:24px}
  .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-card.open{grid-column:span 2}
  .project-branch{max-width:330px}
}


/* Structlane Watch desktop/shared layout */
.badges{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.activity-badge{border:1px solid currentColor;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:900;letter-spacing:.04em;white-space:nowrap}
.activity-deploy{color:#7cc7ff}
.activity-test{color:#7ef0a8}
.activity-build{color:#c4a7ff}
.activity-render{color:#ffb86b}
.activity-git{color:#8bb8ff}
.activity-analysis{color:#6ee7d8}
.activity-write{color:#ffd36a}
.activity-process{color:#ffb86b}
.activity-read{color:#64d2ff}
.activity-chat{color:#c4a7ff}

.project-group{margin:0 0 18px}
.group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 9px}
.group-title{font-size:12px;letter-spacing:.14em;margin:0;font-weight:900}
.group-active .group-title{color:var(--cyan)}
.group-other .group-title{color:var(--muted)}
.group-hint{font-size:11px;color:var(--muted)}
.project-grid{display:grid;gap:10px}
.project-card.is-active{border-color:#31577c;box-shadow:0 10px 34px rgba(0,0,0,.22)}
.project-card.is-active .project-summary{background:linear-gradient(145deg,rgba(100,210,255,.055),rgba(126,240,168,.02))}

@media(min-width:1000px){
  body{padding:24px 28px 34px}
  .topbar,main{max-width:1560px}
  h1{font-size:29px}
  .system-card{padding:16px 18px}
  .meta-row{margin-bottom:18px}
  .group-title{font-size:13px}
  .project-grid,
  .group-other .project-grid,
  .group-active .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .project-card{min-height:100%;display:flex;flex-direction:column}
  .project-card.open{grid-column:auto}
  .project-summary{padding:17px 18px;min-height:82px;cursor:default}
  .project-summary h2{font-size:18px}
  .project-branch{max-width:560px;font-size:12px}
  .project-body,
  .project-card.open .project-body{display:block;flex:1;padding:15px 18px 18px}
  .project-summary + .project-body{display:block}
  .details{grid-template-columns:122px 1fr;font-size:13px}
  .status-chip{font-size:11px}
}

@media(min-width:1450px){
  .project-grid,
  .group-other .project-grid,
  .group-active .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}