:root {
  color-scheme: light;
  --surface-canvas: oklch(0.965 0.006 250);
  --surface-sidebar: oklch(0.225 0.018 250);
  --surface-primary: oklch(0.995 0.002 250);
  --surface-secondary: oklch(0.94 0.008 250);
  --surface-elevated: oklch(1 0 0);
  --surface-terminal: oklch(0.17 0.018 250);
  --text-primary: oklch(0.245 0.018 250);
  --text-secondary: oklch(0.47 0.018 250);
  --text-inverse: oklch(0.94 0.006 250);
  --border-default: oklch(0.86 0.012 250);
  --border-strong: oklch(0.7 0.018 250);
  --accent-primary: oklch(0.61 0.145 142);
  --accent-hover: oklch(0.54 0.14 142);
  --status-success: oklch(0.56 0.14 145);
  --status-warning: oklch(0.67 0.145 75);
  --status-error: oklch(0.56 0.19 28);
  --status-info: oklch(0.58 0.14 250);
  --status-neutral: oklch(0.5 0.018 250);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --shadow-elevated: 0 2px 8px oklch(0.2 0.02 250 / 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-block-size: 100%; }
body { margin: 0; background: var(--surface-canvas); color: var(--text-primary); font-size: 0.9375rem; line-height: 1.55; }
button, input, select { font: inherit; }
button, a, input, select { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: 0.55; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 2px; }
.skip-link { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: 100; padding: var(--space-2) var(--space-3); background: var(--surface-elevated); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.login-shell { min-block-size: 100dvh; display: grid; place-items: center; padding: var(--space-6); background: linear-gradient(135deg, var(--surface-canvas), var(--surface-secondary)); }
.login-panel { inline-size: min(440px, 100%); padding: var(--space-8); background: var(--surface-elevated); border-radius: 8px; box-shadow: var(--shadow-elevated); }
.brand-lockup { display: flex; align-items: center; gap: var(--space-3); font-weight: 650; }
.brand-mark { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 6px; background: var(--accent-primary); color: var(--surface-sidebar); font-weight: 800; }
.brand-lockup-inverse { color: var(--text-inverse); }
.login-copy { margin-block: 48px var(--space-6); }
.login-copy h1, .page-header h1, .detail-header h1 { margin: var(--space-1) 0 var(--space-2); font-size: 1.5rem; line-height: 1.25; letter-spacing: 0; }
.login-copy p, .page-header p { margin: 0; color: var(--text-secondary); }
.context-label { margin: 0; color: var(--accent-hover); font-size: 0.75rem; font-weight: 650; }
.login-form { display: grid; gap: var(--space-2); }
.login-form label, .search-field span, .select-field span, .retry-form label { font-size: 0.8125rem; font-weight: 600; }
input, select { min-block-size: 44px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--surface-primary); color: var(--text-primary); padding: var(--space-2) var(--space-3); }
input:hover, select:hover { border-color: var(--border-strong); }
.field-hint { margin: 0 0 var(--space-3); color: var(--text-secondary); font-size: 0.8125rem; }
.form-error { margin: 0 0 var(--space-2); color: var(--status-error); font-weight: 600; }

.button { min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 0; border-radius: 6px; font-weight: 650; text-decoration: none; transition: background-color 150ms cubic-bezier(0.16, 1, 0.3, 1), color 150ms cubic-bezier(0.16, 1, 0.3, 1), transform 100ms ease-out; }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--accent-primary); color: var(--surface-sidebar); }
.button-primary:hover { background: var(--accent-hover); color: var(--text-inverse); }
.button-secondary { background: var(--surface-secondary); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-default); }
.button-secondary:hover { background: var(--surface-primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.button-danger { background: color-mix(in oklch, var(--status-error) 12%, var(--surface-primary)); color: var(--status-error); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--status-error) 36%, transparent); }
.button-danger:hover { background: var(--status-error); color: var(--surface-primary); }
.button-quiet { background: transparent; color: var(--text-primary); }
.button-small { min-block-size: 36px; padding: var(--space-1) var(--space-3); font-size: 0.8125rem; }

.app-shell { block-size: 100dvh; display: grid; grid-template-columns: 232px minmax(0, 1fr); overflow: hidden; }
.sidebar { min-block-size: 0; display: flex; flex-direction: column; padding: var(--space-5) var(--space-4); background: var(--surface-sidebar); color: var(--text-inverse); }
.primary-nav { margin-block-start: 40px; }
.nav-item { min-block-size: 44px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: 6px; background: color-mix(in oklch, var(--accent-primary) 16%, transparent); color: var(--text-inverse); text-decoration: none; font-weight: 600; }
.sidebar-footer { margin-block-start: auto; display: grid; gap: var(--space-3); }
.service-state { display: flex; align-items: center; gap: var(--space-2); color: color-mix(in oklch, var(--text-inverse) 76%, transparent); font-size: 0.8125rem; }
.service-state .state-dot { background: var(--status-success); }
.service-state-error .state-dot { background: var(--status-error); }
.mobile-service-state { display: none; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: 0.75rem; }
.mobile-service-state .state-dot { background: var(--status-success); }
.mobile-service-state.service-state-error .state-dot { background: var(--status-error); }
.button-sidebar { inline-size: 100%; background: color-mix(in oklch, var(--text-inverse) 8%, transparent); color: var(--text-inverse); }
.button-sidebar:hover { background: color-mix(in oklch, var(--text-inverse) 14%, transparent); }
.mobile-header { display: none; }
.route-content { min-block-size: 0; overflow: auto; padding: var(--space-8); }
.tasks-page, .detail-page { max-inline-size: 1440px; margin-inline: auto; }

.page-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); margin-block-end: var(--space-6); }
.header-count { min-inline-size: 104px; display: grid; justify-items: end; }
.header-count strong { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.header-count span, .result-count { color: var(--text-secondary); font-size: 0.8125rem; }
.task-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 180px auto auto; align-items: end; gap: var(--space-3); margin-block-end: var(--space-4); padding: var(--space-4); background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 8px; }
.search-field, .select-field { display: grid; gap: var(--space-1); }
.result-count { align-self: center; justify-self: end; white-space: nowrap; }
.task-list { overflow: hidden; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 8px; }
.task-row { position: relative; display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 0.8fr) 140px auto; align-items: center; gap: var(--space-5); min-block-size: 112px; padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--border-default); transition: background-color 150ms cubic-bezier(0.16, 1, 0.3, 1); }
.task-row:last-child { border-block-end: 0; }
.task-row:hover, .task-row:focus-within { background: var(--surface-secondary); }
.task-row-link { position: absolute; inset: 0; }
.task-row-link:focus-visible { outline-offset: -3px; }
.task-identity, .task-meta, .task-state, .task-actions { position: relative; z-index: 1; pointer-events: none; min-inline-size: 0; }
.task-actions button { pointer-events: auto; }
.task-title-line { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
.task-title-line h2 { margin: 0; font-size: 1rem; line-height: 1.4; }
.task-type { color: var(--accent-hover); font: 600 0.75rem/1.35 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.task-target, .task-error { margin: var(--space-1) 0 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: 0.8125rem; }
.task-error { color: var(--status-error); font-weight: 600; }
.task-meta { display: grid; gap: var(--space-1); color: var(--text-secondary); font-size: 0.8125rem; }
.task-state { display: grid; gap: var(--space-2); justify-items: start; }
.task-state code { color: var(--text-secondary); font-size: 0.75rem; }
.task-actions { display: flex; justify-content: end; flex-wrap: wrap; gap: var(--space-2); }
.status-badge { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 28px; padding-inline: var(--space-3); border-radius: 999px; background: var(--surface-secondary); color: var(--text-primary); font-size: 0.75rem; font-weight: 650; white-space: nowrap; }
.status-dot, .state-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.status-success { color: var(--status-success); }.status-warning { color: var(--status-warning); }.status-error { color: var(--status-error); }.status-info { color: var(--status-info); }.status-neutral { color: var(--status-neutral); }
.empty-state, .page-loading { min-block-size: 240px; display: grid; place-content: center; justify-items: center; gap: var(--space-2); padding: var(--space-8); color: var(--text-secondary); text-align: center; }
.empty-state strong { color: var(--text-primary); font-size: 1.125rem; }

.detail-page { display: grid; grid-template-rows: auto auto auto minmax(420px, 1fr); gap: var(--space-4); min-block-size: calc(100dvh - 64px); }
.detail-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; }
.back-link { grid-column: 1 / -1; inline-size: fit-content; color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.back-link:hover { color: var(--accent-hover); }
.detail-title-row { display: flex; align-items: center; gap: var(--space-4); }
.detail-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-2); }
.metadata-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 8px; }
.metadata-item { min-inline-size: 0; padding: var(--space-4); border-inline-end: 1px solid var(--border-default); border-block-end: 1px solid var(--border-default); }
.metadata-item:nth-child(3n) { border-inline-end: 0; }
.metadata-item:nth-last-child(-n + 3) { border-block-end: 0; }
.metadata-item dt { color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; }
.metadata-item dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.8125rem; }
.feedback-banner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); border-radius: 8px; background: var(--surface-primary); }
.feedback-error { color: var(--status-error); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--status-error) 28%, transparent); }
.feedback-banner span { color: var(--text-primary); overflow-wrap: anywhere; }
.feedback-banner .button { margin-inline-start: auto; }
.retry-form { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: 8px; }
.inline-form { display: flex; gap: var(--space-2); }
.inline-form input { flex: 1; min-inline-size: 0; }

.log-console { min-block-size: 420px; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: 8px; background: var(--surface-terminal); color: var(--text-inverse); }
.log-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-block-end: 1px solid color-mix(in oklch, var(--text-inverse) 14%, transparent); }
.log-toolbar h2 { margin: 0; font-size: 1rem; }
.stream-state { color: color-mix(in oklch, var(--text-inverse) 65%, transparent); font-size: 0.75rem; }
.log-actions { display: flex; align-items: center; gap: var(--space-3); }
.toggle { min-block-size: 44px; display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; }
.toggle input { min-block-size: auto; accent-color: var(--accent-primary); }
.button-console { background: color-mix(in oklch, var(--text-inverse) 10%, transparent); color: var(--text-inverse); }
.button-console:hover { background: color-mix(in oklch, var(--text-inverse) 16%, transparent); }
.log-body { min-block-size: 0; overflow: auto; overscroll-behavior: contain; padding: var(--space-3) 0; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.8125rem; line-height: 1.6; }
.log-entry { display: grid; grid-template-columns: 72px 64px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-1) var(--space-4); }
.log-entry:hover { background: color-mix(in oklch, var(--text-inverse) 5%, transparent); }
.log-entry time { color: color-mix(in oklch, var(--text-inverse) 52%, transparent); font-variant-numeric: tabular-nums; }
.log-level { color: var(--accent-primary); text-transform: lowercase; }
.log-error .log-level, .log-stderr .log-level { color: color-mix(in oklch, var(--status-error) 78%, var(--text-inverse)); }
.log-entry pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.log-empty { display: grid; place-items: center; min-block-size: 100%; color: color-mix(in oklch, var(--text-inverse) 55%, transparent); }

@media (max-width: 1040px) {
  .task-row { grid-template-columns: minmax(220px, 1fr) 140px auto; }
  .task-meta { display: none; }
  .metadata-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metadata-item:nth-child(3n) { border-inline-end: 1px solid var(--border-default); }
  .metadata-item:nth-child(2n) { border-inline-end: 0; }
  .metadata-item:nth-last-child(-n + 3) { border-block-end: 1px solid var(--border-default); }
  .metadata-item:nth-last-child(-n + 2) { border-block-end: 0; }
}

@media (max-width: 800px) {
  .app-shell { block-size: auto; min-block-size: 100dvh; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); overflow: visible; }
  .sidebar { display: none; }
  .mobile-header { position: sticky; inset-block-start: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-block-size: 64px; padding-inline: var(--space-4); background: var(--surface-primary); border-block-end: 1px solid var(--border-default); }
  .mobile-service-state { display: flex; margin-inline-start: auto; margin-inline-end: var(--space-2); }
  .route-content { overflow: visible; padding: var(--space-5) var(--space-4); }
  .task-toolbar { grid-template-columns: 1fr 1fr; }
  .toolbar-refresh { inline-size: 100%; }
  .result-count { justify-self: start; }
  .task-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); }
  .task-state { justify-items: end; }
  .task-actions { grid-column: 1 / -1; justify-content: start; }
  .button-small { min-block-size: 44px; }
  .detail-page { min-block-size: auto; grid-template-rows: auto; }
  .log-console { block-size: min(62dvh, 640px); }
}

@media (max-width: 560px) {
  .login-shell { padding: var(--space-4); }
  .login-panel { padding: var(--space-6); }
  .login-copy { margin-block: var(--space-8) var(--space-6); }
  .page-header { align-items: start; }
  .header-count { min-inline-size: auto; }
  .task-toolbar { grid-template-columns: 1fr; }
  .result-count { order: 4; }
  .task-row { grid-template-columns: 1fr; padding: var(--space-4); }
  .task-state { grid-row: 1; justify-items: start; }
  .task-actions { grid-column: 1; }
  .detail-header { grid-template-columns: 1fr; align-items: start; }
  .detail-actions { justify-content: start; }
  .detail-actions .button { flex: 1 1 auto; min-inline-size: 132px; }
  .detail-title-row { justify-content: space-between; }
  .metadata-grid { grid-template-columns: 1fr; }
  .metadata-item, .metadata-item:nth-child(2n), .metadata-item:nth-child(3n) { border-inline-end: 0; border-block-end: 1px solid var(--border-default); }
  .metadata-item:last-child { border-block-end: 0; }
  .inline-form { display: grid; }
  .log-toolbar { align-items: start; flex-direction: column; }
  .log-actions { inline-size: 100%; justify-content: space-between; }
  .log-entry { grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-2); }
  .log-level { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}