:root {
  color-scheme:light;
  --ink:#192833;
  --muted:#526571;
  --line:#d8e1e6;
  --canvas:#f3f6f7;
  --paper:#fff;
  --accent:#155f57;
  --good:#176147;
  --pending:#895315;
  --danger:#a02e3a;
  --radius:12px
}

.main-nav {
  display:flex;
  gap:8px;
  max-width:1328px;
  margin:auto;
  padding:12px 24px 0
}
.main-nav a {
  padding:8px 14px;
  min-height:44px;
  border-bottom:2px solid var(--line);
  text-decoration:none;
  font-weight:600
}
.task-page,.task-page .panel,.task-page .content-grid>* {
  min-width:0
}
.task-page h1,.wrap-text,.preserve-text {
  overflow-wrap:anywhere
}
.preserve-text {
  white-space:pre-wrap
}
.task-filters {
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:20px
}
.task-filters label:first-child {
  flex:1;
  min-width:220px
}
.task-form {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
.stack-form {
  display:grid;
  gap:16px
}
.task-form label,.stack-form label,.task-filters label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:600
}
.task-page input:not([type=hidden]),.task-page select,.task-page textarea {
  width:100%;
  min-width:0;
  min-height:44px;
  border:1px solid #aebec7;
  border-radius:8px;
  padding:10px 12px;
  font:inherit;
  color:var(--ink);
  background:var(--paper)
}
.task-page textarea {
  resize:vertical
}
.full-width {
  grid-column:1/-1
}
.field-help {
  font-size:14px;
  margin:0 0 12px
}
.task-form .field-help {
  align-self:end
}
.table-scroll {
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper)
}
.task-table {
  width:100%;
  min-width:1105px;
  border-collapse:collapse;
  table-layout:fixed
}
.col-task { width:auto }
.col-state { width:110px }
.col-owner { width:140px }
.col-priority { width:85px }
.col-time { width:250px }
.col-action { width:140px }
.task-table th,.task-table td {
  padding:16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line)
}
.task-table th {
  font-size:14px;
  color:var(--muted);
  background:#edf3f2
}
.task-table tr:last-child td { border-bottom:0 }
.task-table tbody tr:hover { background:#f6faf9 }
.task-title,.owner-text {
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
  font-weight:650
}
.owner-text { color:var(--ink); font-weight:400 }
.task-id {
  display:block;
  font-size:13px;
  color:var(--muted);
  overflow-wrap:anywhere;
  margin:4px 0;
  font-variant-numeric:tabular-nums
}
.task-time span { display:block; font-variant-numeric:tabular-nums }
.badge {
  display:inline-block;
  border-radius:5px;
  padding:2px 8px;
  font-size:14px;
  background:#eaf0f3;
  color:#354e5d;
  white-space:nowrap
}
.state-running,.state-blocked { background:#fbefd9; color:#77430b }
.state-succeeded { background:#e3f2e9; color:var(--good) }
.state-failed { background:#fbeef0; color:var(--danger) }
.pagination {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  padding:20px 0
}
.task-summary { margin-bottom:24px }
.task-summary .details {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:32px;
  margin-bottom:24px
}
.task-summary .details dt { flex-shrink:0 }
.task-actions,.task-edit,.task-history { margin-top:24px }
.task-edit summary { cursor:pointer; padding:6px 0; min-height:44px; font-weight:650 }
.task-edit .task-form { margin-top:20px }
.task-page h3 { font-size:16px; margin:8px 0 }
.history-list { padding-left:24px }
.history-list>li { padding:12px 0 20px 8px; border-bottom:1px solid var(--line) }
.event-fields { margin:8px 0 }
.event-fields>div { display:grid; grid-template-columns:70px minmax(0,1fr); gap:12px; padding:6px 0 }
.event-fields dt { color:var(--muted) }
.event-fields dd { margin:0 }
.event-fields p { margin:0 0 6px }
.run-entry { border-top:1px solid var(--line); padding:16px 0 }
@media(max-width:700px) {
  .topbar { flex-wrap:wrap }
  .main-nav { padding-left:18px; padding-right:18px }
  .task-form,.task-summary .details { grid-template-columns:1fr }
  .task-page .heading { flex-direction:column }
  .task-page input:not([type=hidden]),.task-page select,.task-page textarea { font-size:16px }
  .task-filters label { flex:1; min-width:140px }
  .task-form .field-help { grid-column:1/-1 }
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:system-ui,"Microsoft YaHei",sans-serif;
  font-size:15px;
  line-height:1.65
}

a {
  color:var(--accent)
}

button,input,.button {
  font:inherit
}

button,.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  font-weight:600
}

button:hover,.button:hover {
  border-color:var(--accent);
  background:#f0f6f4
}

:focus-visible {
  outline:3px solid #247bb0;
  outline-offset:3px
}

.primary {
  background:var(--accent);
  border-color:var(--accent);
  color:white
}

.primary:hover {
  background:#0f4a44;
  color:white
}

.muted,.footnote {
  color:var(--muted)
}

.eyebrow {
  font-size:13px;
  font-weight:650;
  letter-spacing:.08em;
  color:var(--accent);
  margin:0 0 7px
}

h1 {
  font-size:28px;
  line-height:1.3;
  margin:0 0 12px;
  letter-spacing:-.03em
}

h2 {
  font-size:17px;
  margin:0 0 20px
}

.brand-mark {
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  font-weight:750;
  letter-spacing:.04em
}

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

.phase {
  font-size:12px;
  letter-spacing:.08em;
  color:var(--accent);
  background:#e6f0ed;
  border-radius:5px;
  padding:2px 7px
}

.topbar {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:16px max(24px,calc((100vw - 1280px)/2))
}

.topbar form {
  display:flex;
  gap:16px;
  align-items:center
}

.account {
  color:var(--muted);
  max-width:180px;
  overflow-wrap:anywhere
}

.dashboard {
  max-width:1328px;
  margin:0 auto;
  padding:40px 24px
}

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

.heading p {
  margin:5px 0
}

.heading .button {
  flex-shrink:0
}

.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  margin-bottom:28px
}

.metrics>div {
  padding:24px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:8px
}

.metrics>div:last-child {
  border-right:0
}

.metrics strong {
  font-size:26px;
  line-height:1.35;
  font-variant-numeric:tabular-nums
}

.label {
  color:var(--muted);
  font-size:14px
}

.metrics .muted {
  font-size:13px
}

.good {
  color:var(--good)
}

.pending {
  color:var(--pending)
}

.content-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}

.panel {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px
}

.details {
  margin:0
}

.details>div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid #e9eef1
}

.details>div:last-child {
  border:0
}

.details dt {
  color:var(--muted)
}

.details dd {
  margin:0;
  text-align:right;
  overflow-wrap:anywhere
}

.dot {
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:8px;
  border-radius:50%
}

.good-dot {
  background:var(--good)
}

.checklist {
  padding-left:24px;
  margin:0
}

.checklist li {
  padding:7px 0 7px 5px
}

.notice {
  padding:14px 16px;
  background:#f0f5f4;
  border-radius:8px;
  font-size:14px;
  color:#36534d;
  margin:22px 0 0
}

.error {
  color:var(--danger);
  background:#fbeef0
}

.page-footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:var(--muted);
  font-size:13px;
  margin-top:28px
}

.login-body {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px
}

.login-panel {
  width:100%;
  max-width:430px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:36px
}

.login-panel .brand-mark {
  margin-bottom:24px
}

.login-panel h1 {
  font-size:25px
}

.login-panel form {
  display:flex;
  flex-direction:column;
  margin-top:26px;
  gap:8px
}

.login-panel label {
  font-size:14px;
  font-weight:600
}

.login-panel input:not([type=hidden]) {
  width:100%;
  height:48px;
  border:1px solid #aebec7;
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:12px;
  background:white;
  color:var(--ink)
}

.login-panel button {
  margin-top:8px
}

.footnote {
  font-size:13px;
  margin:24px 0 0
}

@media(max-width:1000px) {
  .metrics {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.metrics>div:nth-child(2) {
  border-right:0
}

.metrics>div:nth-child(-n+2) {
  border-bottom:1px solid var(--line)
}

}

@media(max-width:700px) {
  .topbar {
  padding:14px 18px
}

.brand {
  gap:8px
}

.account {
  display:none
}

.dashboard {
  padding:28px 18px
}

.heading {
  align-items:flex-start;
  gap:16px
}

.heading h1 {
  font-size:24px
}

.heading .button {
  padding:8px 12px
}

.content-grid {
  grid-template-columns:1fr
}

.panel {
  padding:22px
}

.metrics>div {
  padding:18px 16px
}

.metrics strong {
  font-size:23px
}

.page-footer {
  flex-direction:column;
  gap:4px
}

.login-panel {
  padding:28px
}

.login-panel input {
  font-size:16px
}

}

@media(max-width:380px) {
  .brand strong {
  font-size:14px
}

.topbar {
  padding:12px
}

.heading {
  flex-direction:column
}

.metrics {
  grid-template-columns:1fr
}

.metrics>div {
  border-right:0;
  border-bottom:1px solid var(--line)
}

.metrics>div:last-child {
  border-bottom:0
}

}