.task-center-shell { display: grid; gap: 1rem; color: var(--text); }
.task-center-hero, .task-export-station, .task-list-card, .task-center-empty {
  border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); padding: 1rem;
}
.task-center-hero { display: grid; gap: 1rem; background: linear-gradient(145deg, color-mix(in srgb, #153b50 9%, var(--surface)), var(--surface)); }
.task-center-hero h2, .task-section-title h3, .task-center-empty h2 { margin: .2rem 0; letter-spacing: -.02em; }
.task-center-hero p, .task-section-title p, .task-center-empty p { margin: 0; color: var(--muted); max-width: 68ch; }
.task-kicker { color: #267b8e; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.task-health-mark { border-left: .25rem solid #e09f3e; padding: .6rem .8rem; display: grid; align-content: center; min-width: 10rem; }
.task-health-mark span, .task-health-mark small { color: var(--muted); font-size: .78rem; }
.task-health-mark strong { font-size: 1.7rem; line-height: 1; }
.task-notice, .task-alert { padding: .8rem 1rem; border-radius: .65rem; border: 1px solid; }
.task-notice { background: #ecf8f2; color: #17603f; border-color: #9dd8bd; }
.task-alert { background: #fff0ed; color: #8a2f27; border-color: #efb2aa; }
.task-section-title { display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1rem; }
.task-section-title [data-task-refresh] { min-height: 2.75rem; min-width: 2.75rem; }
.task-export-filters { display: grid; gap: .75rem; }
.task-export-filters label { display: grid; gap: .35rem; color: var(--muted); font-size: .82rem; font-weight: 700; }
.task-export-filters input { min-height: 2.75rem; width: 100%; border: 1px solid var(--line); border-radius: .55rem; background: var(--panel); color: var(--text); padding: .6rem .7rem; font: inherit; }
.task-export-actions { display: grid; grid-template-columns: 1fr; gap: .65rem; margin-top: 1rem; }
.task-export-button { min-height: 3.6rem; text-align: left; border: 1px solid var(--line); border-radius: .7rem; background: color-mix(in srgb, #153b50 4%, var(--panel)); color: var(--text); padding: .65rem .8rem; cursor: pointer; }
.task-export-button span, .task-export-button small { display: block; }
.task-export-button span { font-weight: 800; }.task-export-button small { margin-top: .2rem; color: var(--muted); }
.task-export-button:hover:not(:disabled), .task-export-button:focus-visible { border-color: #267b8e; box-shadow: 0 0 0 3px color-mix(in srgb, #267b8e 18%, transparent); }
.task-export-button:disabled { opacity: .45; cursor: not-allowed; }
.task-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: .75rem; }
.task-table { width: 100%; min-width: 58rem; border-collapse: collapse; font-size: .86rem; }
.task-table th, .task-table td { padding: .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.task-table th { color: var(--muted); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.task-link { border: 0; background: none; color: #267b8e; font-weight: 800; padding: 0; cursor: pointer; text-align: left; }
.task-source, .task-error-code { display: block; margin-top: .18rem; color: var(--muted); font-size: .75rem; }
.task-error-code { color: #a64435; }
.task-status { display: inline-flex; align-items: center; min-height: 1.65rem; padding: .2rem .48rem; border-radius: 999px; font-size: .75rem; font-weight: 800; white-space: nowrap; background: #e6edf0; color: #29404a; }
.task-status-running { background: #e5f4f6; color: #176276; }.task-status-completed { background: #e5f5ec; color: #17603f; }
.task-status-completed_with_exceptions { background: #fff3dd; color: #865514; }.task-status-failed { background: #fde9e5; color: #922f25; }
.task-status-cancelled { background: #ece9ef; color: #62556c; }
.task-row-actions { display: flex; gap: .4rem; }.task-mini-action { min-width: 2.9rem; min-height: 2.75rem; border: 1px solid var(--line); background: var(--panel); border-radius: .5rem; color: var(--text); cursor: pointer; }
.task-empty-row { text-align: center !important; color: var(--muted); padding: 2rem !important; }
.task-drawer-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(10, 25, 32, .36); }
.task-drawer { position: fixed; inset: 0 0 0 auto; z-index: 81; width: min(100%, 34rem); background: var(--panel); box-shadow: -1rem 0 3rem rgba(10, 25, 32, .2); padding: 1rem; overflow-y: auto; }
.task-drawer-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.task-drawer-head h2 { font-size: 1rem; overflow-wrap: anywhere; }.task-close { min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--panel); color: var(--text); font-size: 1.4rem; }
.task-detail-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; margin: 1rem 0; }
.task-detail-grid div { padding: .75rem; background: color-mix(in srgb, #153b50 4%, var(--surface)); border-radius: .55rem; }.task-detail-grid dt { color: var(--muted); font-size: .75rem; }.task-detail-grid dd { margin: .3rem 0 0; font-weight: 700; overflow-wrap: anywhere; }
.task-artifact-card { display: grid; gap: .55rem; padding: 1rem; border: 1px solid #9dd8bd; border-radius: .7rem; background: #f2fbf7; color: #153b33; }.task-artifact-card .action-button { justify-self: start; min-height: 2.75rem; }
.task-event-list { margin-top: 1.25rem; }.task-event { display: grid; grid-template-columns: 1fr auto; gap: .2rem .7rem; border-left: 2px solid #267b8e; padding: .55rem .75rem; margin-bottom: .5rem; }.task-event span, .task-event small { color: var(--muted); font-size: .75rem; }.task-event small { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .task-center-hero { grid-template-columns: minmax(0, 1fr) auto; padding: 1.25rem; }
  .task-section-title { flex-direction: row; align-items: end; justify-content: space-between; }
  .task-export-filters { grid-template-columns: 1fr 1fr 2fr; }
  .task-export-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-detail-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) { .task-export-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); } }