@import url("data:text/css,");

:root {
  --bg: #0d0f12;
  --bg-soft: #15181d;
  --card: rgba(24, 27, 33, 0.88);
  --card-strong: rgba(31, 35, 42, 0.95);
  --line: rgba(255,255,255,0.08);
  --text: #f5f6f7;
  --muted: #979da8;
  --yellow: #f4c430;
  --yellow-soft: rgba(244,196,48,0.16);
  --green: #52d273;
  --green-soft: rgba(82,210,115,0.14);
  --orange: #ff9f43;
  --orange-soft: rgba(255,159,67,0.15);
  --red: #ff5d65;
  --red-soft: rgba(255,93,101,0.15);
  --blue: #63a6ff;
  --radius: 22px;
  --shadow: 0 22px 60px rgba(0,0,0,0.28);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(244,196,48,.07), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(99,166,255,.07), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ambient {
  position: fixed;
  width: 340px;
  height: 340px;
  filter: blur(90px);
  opacity: .13;
  pointer-events: none;
  border-radius: 50%;
}

.ambient-one { background: var(--yellow); top: -180px; left: -110px; }
.ambient-two { background: var(--blue); right: -150px; top: 260px; }

.shell {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 64px;
  position: relative;
  z-index: 1;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.brand { display: flex; align-items: center; gap: 13px; }

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--yellow);
  color: #171717;
  font-weight: 900;
  font-size: 23px;
  box-shadow: 0 10px 35px rgba(244,196,48,.18);
}

.brand-name { font-weight: 850; letter-spacing: .04em; }
.brand-subtitle { color: var(--muted); font-size: 13px; margin-top: 3px; }

.health {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 13px;
}

.health.online { color: var(--green); }

.pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(255,159,67,.5);
  animation: pulse 1.8s infinite;
}

.health.online .pulse { background: var(--green); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, .8fr);
  gap: 18px;
}

.card {
  background: linear-gradient(180deg, rgba(31,35,42,.94), rgba(23,26,31,.88));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.card-primary {
  min-height: 310px;
  position: relative;
  overflow: hidden;
}

.card-primary::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  right: -120px;
  top: -120px;
  background: rgba(244,196,48,.08);
}

.eyebrow {
  color: var(--yellow);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
  margin-bottom: 9px;
}

h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(30px, 4vw, 50px); line-height: 1.06; margin-bottom: 14px; max-width: 850px; }
h2 { font-size: 22px; margin-bottom: 14px; }

.human, .current-description, .owner-card p, .explanation-card p {
  color: var(--muted);
  line-height: 1.6;
}

.current-row {
  margin: 30px 0 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.current-title { font-size: 23px; font-weight: 800; margin-bottom: 8px; }
.current-description { max-width: 650px; }

.progress-ring {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle closest-side, #20242a 74%, transparent 75% 100%),
    conic-gradient(var(--yellow) var(--progress, 0%), rgba(255,255,255,.08) 0);
  font-weight: 900;
  color: var(--yellow);
}

.meta-line {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.meta-line span { color: var(--muted); }
.meta-line strong { font-weight: 650; }

.owner-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-height: 310px;
  background: linear-gradient(180deg, rgba(34,47,38,.95), rgba(21,31,24,.9));
  border-color: rgba(82,210,115,.23);
}

.owner-card.required {
  background: linear-gradient(180deg, rgba(57,29,32,.96), rgba(34,20,22,.93));
  border-color: rgba(255,93,101,.3);
}

.owner-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: #112116;
  background: var(--green);
  font-size: 34px;
  font-weight: 900;
  box-shadow: 0 14px 40px rgba(82,210,115,.16);
}

.owner-card.required .owner-icon { background: var(--red); color: #fff; }

.section { margin-top: 34px; margin-bottom: 34px; }

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-heading.compact { align-items: center; }

.ghost-button {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
}

.roadmap {
  display: grid;
  gap: 10px;
  position: relative;
}

.roadmap-stage {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 14px;
  align-items: start;
  background: rgba(255,255,255,.028);
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 16px;
}

.roadmap-stage.current {
  border-color: rgba(244,196,48,.38);
  background: var(--yellow-soft);
  box-shadow: inset 4px 0 0 var(--yellow);
}

.roadmap-stage.done { opacity: .82; }
.stage-marker {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-weight: 800;
}

.done .stage-marker { background: var(--green-soft); color: var(--green); }
.current .stage-marker { background: rgba(244,196,48,.18); color: var(--yellow); }

.stage-title { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.stage-description { color: var(--muted); line-height: 1.55; font-size: 14px; }
.stage-status { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.stage-details {
  grid-column: 2 / -1;
  display: none;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--muted);
  line-height: 1.55;
}
.roadmap-stage.expanded .stage-details { display: block; }

.events {
  display: grid;
  gap: 14px;
  max-height: 720px;
  overflow: auto;
  padding-right: 4px;
}

.event {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.event:last-child { border-bottom: 0; }

.event-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.05);
}

.event.success .event-icon { color: var(--green); background: var(--green-soft); }
.event.warning .event-icon { color: var(--orange); background: var(--orange-soft); }
.event.error .event-icon { color: var(--red); background: var(--red-soft); }
.event.working .event-icon { color: var(--yellow); background: var(--yellow-soft); }

.event-time { color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.event-title { font-weight: 800; margin-bottom: 5px; }
.event-message { color: var(--muted); line-height: 1.5; font-size: 14px; }
.event details { margin-top: 7px; color: var(--muted); }
.event pre { white-space: pre-wrap; }

.actors { display: grid; gap: 10px; }

.actor {
  display: grid;
  grid-template-columns: 11px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 13px;
  border-radius: 14px;
  background: rgba(255,255,255,.028);
}

.actor-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.actor.active .actor-dot { background: var(--green); box-shadow: 0 0 18px rgba(82,210,115,.6); }
.actor.waiting .actor-dot { background: var(--yellow); }
.actor-name { font-weight: 750; }
.actor-action { color: var(--muted); font-size: 13px; margin-top: 3px; }
.actor-state { font-size: 12px; color: var(--muted); }

.divider { border-top: 1px solid var(--line); margin: 22px 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.stat {
  background: rgba(255,255,255,.028);
  border-radius: 14px;
  padding: 15px;
}

.stat-value { font-size: 23px; font-weight: 900; color: var(--yellow); }
.stat-label { color: var(--muted); font-size: 12px; margin-top: 4px; }

.explanation-card {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(260px,.75fr) minmax(0,1.3fr);
  gap: 28px;
  align-items: start;
}

details { color: var(--muted); }
summary { cursor: pointer; color: var(--text); }
pre {
  padding: 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
}

.small-note { color: var(--muted); font-size: 12px; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 12px;
  padding-top: 30px;
}

.empty { color: var(--muted); padding: 20px 0; }

@media (max-width: 820px) {
  .shell { width: min(100% - 20px, 720px); padding-top: 16px; }
  .grid-two, .explanation-card { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; }
  .brand-subtitle { display: none; }
  .card { padding: 19px; border-radius: 19px; }
  .card-primary, .owner-card { min-height: auto; }
  .current-row { align-items: flex-start; }
  .progress-ring { width: 72px; height: 72px; flex-basis: 72px; }
  .meta-line { grid-template-columns: 1fr; gap: 4px; }
  .roadmap-stage { grid-template-columns: 38px 1fr; }
  .stage-status { grid-column: 2; }
  .stage-details { grid-column: 2; }
  .section-heading { align-items: center; }
  h1 { font-size: 34px; }
}

@media (max-width: 480px) {
  .health span:last-child { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .current-title { font-size: 20px; }
}


.brand-logo {
  width: 108px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.18));
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  padding: 6px 10px;
}

.brand { align-items: center; flex-wrap: wrap; }

.topbar { gap: 14px; }

.stage-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.stage-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  border: 1px solid var(--line);
}
.current .stage-time { background: rgba(244,196,48,.13); color: var(--yellow); border-color: rgba(244,196,48,.24);}
.done .stage-time { background: rgba(82,210,115,.11); color: var(--green); border-color: rgba(82,210,115,.2);}

.meta-line strong.live-time {
  color: var(--yellow);
}

@media (max-width: 820px) {
  .brand-logo { width: 88px; padding: 5px 8px; }
  .topbar { align-items: center; }
  .section-heading { flex-direction: column; align-items: stretch; }
  .section-heading .ghost-button { width: 100%; }
}

@media (max-width: 480px) {
  .brand {
    width: 100%;
    align-items: flex-start;
  }
  .brand-logo { width: 82px; }
  .health { padding: 8px 10px; }
  .stage-status-wrap {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}


.roadmap-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.summary-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.028);
  border-radius: 14px;
}

.summary-chip strong {
  font-size: 22px;
  color: var(--green);
}

.summary-chip.current strong { color: var(--yellow); }
.summary-chip span { color: var(--muted); font-size: 12px; }

.stage-count {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}

.stage-children {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.roadmap-child {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) minmax(145px, auto);
  gap: 11px;
  align-items: start;
  padding: 12px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.15);
}

.roadmap-child.current {
  border-color: rgba(244,196,48,.3);
  background: rgba(244,196,48,.07);
}

.roadmap-child.done { opacity: .85; }

.child-marker {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.roadmap-child.done .child-marker {
  color: var(--green);
  background: var(--green-soft);
}

.roadmap-child.current .child-marker {
  color: var(--yellow);
  background: var(--yellow-soft);
}

.child-title { font-weight: 760; font-size: 14px; margin-bottom: 4px; }
.child-description { color: var(--muted); font-size: 13px; line-height: 1.45; }

.child-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.child-status {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.child-time {
  font-size: 11px;
  color: var(--text);
  text-align: right;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
}

.roadmap-child.current .child-time { color: var(--yellow); }

@media (max-width: 820px) {
  .roadmap-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .roadmap-child { grid-template-columns: 30px minmax(0,1fr); }
  .child-meta {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .roadmap-summary { gap: 7px; }
  .summary-chip { padding: 10px; }
  .summary-chip strong { font-size: 19px; }
  .roadmap-stage { padding: 13px; }
  .roadmap-child { padding: 10px; }
  .child-description { font-size: 12px; }
}

/* v0.4 compact dashboard */
.topbar{margin-bottom:16px}.topbar-actions{display:flex;align-items:center;gap:10px}.logout-button{min-height:42px;padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:var(--muted);cursor:pointer;font:inherit}.owner-alert{display:flex;align-items:center;gap:16px;padding:15px 18px;margin-bottom:16px;text-align:left;background:linear-gradient(180deg,rgba(31,45,35,.96),rgba(22,31,25,.92));border-color:rgba(82,210,115,.24)}.owner-alert.required{background:linear-gradient(180deg,rgba(57,29,32,.96),rgba(34,20,22,.93));border-color:rgba(255,93,101,.34)}.owner-alert .owner-icon{width:44px;height:44px;flex:0 0 44px;margin:0;border-radius:14px;font-size:23px}.owner-alert h2{margin:0 0 3px;font-size:18px}.owner-alert p{margin:0;color:var(--muted)}.status-main{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:24px;align-items:center}.status-main h1{font-size:clamp(25px,3vw,38px);margin-bottom:9px}.status-metrics{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(130px,.65fr) minmax(150px,.8fr) minmax(280px,1.8fr);margin-top:19px;border-top:1px solid var(--line)}.metric{padding:13px 16px 4px 0}.metric+.metric{padding-left:16px;border-left:1px solid var(--line)}.metric span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}.metric strong{font-size:14px}.technical-inline{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.ghost-button{min-height:48px;touch-action:manipulation}.roadmap-stage{touch-action:manipulation}.login-body{min-height:100svh;display:grid;place-items:center;padding:20px}.login-shell{width:min(440px,100%)}.login-card{padding:28px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(31,35,42,.97),rgba(23,26,31,.94));box-shadow:var(--shadow)}.login-logo{width:116px;padding:7px 10px;margin-bottom:20px;border-radius:14px;background:#fff}.login-form{display:grid;gap:15px;margin-top:22px}.login-form label>span{display:block;margin-bottom:7px;color:var(--muted);font-size:13px}.login-form input[type=text],.login-form input[type=password]{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(0,0,0,.23);color:var(--text);font:inherit}.remember-row{display:flex;align-items:center;gap:10px}.remember-row input{width:20px;height:20px;accent-color:var(--yellow)}.remember-row span{margin:0!important;color:var(--text)!important}.login-button{min-height:52px;border:0;border-radius:14px;background:var(--yellow);color:#161616;font-weight:850}.login-error{margin-top:16px;padding:12px;border:1px solid rgba(255,93,101,.3);border-radius:12px;background:var(--red-soft);color:#ffb3b7}.login-security{margin-top:18px;color:var(--muted);font-size:11px;text-align:center}@media(max-width:900px){.status-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:820px){.brand-logo{width:76px}.logout-button{font-size:0;min-width:44px}.logout-button:after{content:'↪';font-size:20px}.owner-alert{padding:13px 14px}.status-main{grid-template-columns:minmax(0,1fr) 72px}.roadmap-section .section-heading{display:grid}.roadmap-section .ghost-button{width:100%}}@media(max-width:560px){.shell{width:min(100% - 16px,720px)}.health #healthText{display:none}.status-main{grid-template-columns:1fr}.progress-ring{position:absolute;right:18px;top:18px;width:64px;height:64px}.status-card{position:relative}.status-main>div:first-child{padding-right:68px}.status-metrics{grid-template-columns:1fr}.metric,.metric+.metric{padding:11px 0;border-left:0;border-top:1px solid var(--line)}}

/* v0.5 real-run observability */
.health.warning .pulse{background:var(--orange)}.health.stale .pulse{background:var(--red)}.health.idle .pulse{background:var(--muted);animation:none}.health.fresh .pulse{background:var(--green)}.health.warning{color:var(--orange)}.health.stale{color:var(--red)}.health.idle{color:var(--muted)}.workers-card{margin-top:18px}.workers-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.run-state-badge{padding:8px 11px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--muted)}.run-state-badge.fresh{color:var(--green);background:var(--green-soft);border-color:rgba(82,210,115,.25)}.run-state-badge.warning{color:var(--orange);background:var(--orange-soft)}.run-state-badge.stale{color:var(--red);background:var(--red-soft)}.active-run{margin:8px 0 14px}.run-title{font-size:21px;font-weight:850;margin-bottom:5px}.run-stage{color:var(--muted);margin-bottom:13px}.run-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.run-grid>div,.contact-card{padding:12px;border:1px solid var(--line);background:rgba(255,255,255,.026);border-radius:13px}.run-grid span,.contact-card span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}.run-grid strong,.contact-card strong{font-size:14px}.no-run{padding:14px;border-radius:13px;background:rgba(255,255,255,.025);color:var(--muted);line-height:1.5}.contact-card{margin:12px 0;border-color:rgba(244,196,48,.2)}.contact-card strong{color:var(--yellow)}.compact-actors{grid-template-columns:repeat(2,minmax(0,1fr));display:grid;gap:9px}.stage-head{display:flex;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px}.stage-head-title{font-size:20px;font-weight:850}.stage-head-time{text-align:right}.stage-head-time span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}.stage-head-time strong{color:var(--yellow)}@media(max-width:820px){.run-grid{grid-template-columns:1fr}.compact-actors{grid-template-columns:1fr}.stage-head{flex-direction:column}.stage-head-time{text-align:left}.workers-heading{align-items:center}.run-state-badge{max-width:48%;text-align:center}.status-main{align-items:flex-start}.progress-ring{flex:0 0 76px;width:76px;height:76px}.owner-alert{margin-top:12px}.workers-card{margin-top:12px}}@media(max-width:480px){.run-title{font-size:18px}.workers-card,.status-card{padding:16px}.stage-head-title{font-size:18px}.status-main h1{font-size:30px}.owner-alert{padding:16px}.owner-alert h2{font-size:24px}.run-state-badge{font-size:10px}.topbar-actions{gap:7px}}