:root {
  color-scheme: light;
  --radius: .625rem; --background: #f7f7f8; --foreground: #111113;
  --sidebar: #f1f1f3; --sidebar-foreground: #3f3f46; --card: #fff; --card-foreground: #111113;
  --popover: #fff; --primary: #18181b; --primary-foreground: #fafafa;
  --secondary: #ededf0; --secondary-foreground: #18181b; --muted: #f1f1f3; --muted-foreground: #62626b;
  --accent: #eaeaee; --accent-foreground: #18181b; --destructive: #d42a2a;
  --border: #e3e3e8; --input: #d9d9df; --ring: #5b63f5; --brand: #5b5bf0; --brand-foreground: #fff;
  --status-healthy: #0ca30c; --status-healthy-fg: #0a7414; --status-degraded: #fab219; --status-degraded-fg: #8a5a00;
  --status-down: #d03b3b; --status-down-fg: #b3261e; --status-unknown: #898781; --status-unknown-fg: #5c5b57;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .04); --shadow-lg: 0 16px 40px rgb(0 0 0 / .14);
  font-family: Geist, "Geist Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.dark {
  color-scheme: dark; --background: #0b0b0d; --foreground: #ededef;
  --sidebar: #0e0e11; --sidebar-foreground: #b4b4bc; --card: #141417; --card-foreground: #ededef;
  --popover: #18181b; --primary: #ededef; --primary-foreground: #111113;
  --secondary: #1f1f23; --secondary-foreground: #ededef; --muted: #1b1b1f; --muted-foreground: #9b9ba4;
  --accent: #222227; --accent-foreground: #ededef; --destructive: #e5484d;
  --border: rgb(255 255 255 / .08); --input: rgb(255 255 255 / .11); --ring: #7c83ff; --brand: #7c83ff; --brand-foreground: #0b0b0d;
  --status-healthy: #0ca30c; --status-healthy-fg: #3fcb5a; --status-degraded: #fab219; --status-degraded-fg: #fbbf3c;
  --status-down: #d03b3b; --status-down-fg: #f47575; --status-unknown: #898781; --status-unknown-fg: #aeada6;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--background); color: var(--foreground); font-size: 14px; }
button, input, select { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.logo-mark { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: var(--brand); color: var(--brand-foreground); box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 24%, transparent); }
.logo-mark.small { width: 28px; height: 28px; border-radius: 8px; box-shadow: none; }
.logo-mark svg { width: 62%; height: 62%; }
.login-shell { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 48px 16px; overflow: hidden; background: radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%); }
.login-shell::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center,black 20%,transparent 70%); }
.login-card { position: relative; z-index: 1; width: min(384px, 100%); }
.login-brand { margin-bottom: 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.login-brand h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 650; letter-spacing: -.02em; }
.login-brand p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 14px; }
.login-panel { padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: 0 20px 50px rgb(0 0 0 / .07); }
.login-panel h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.lede { margin: 0 0 20px; color: var(--muted-foreground); font-size: 13px; line-height: 1.55; }
.trust-line { margin: 24px 0 0; color: var(--muted-foreground); text-align: center; font-size: 12px; }
.login-theme { position: absolute; z-index: 2; top: 16px; right: 16px; }

.button { height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; padding: 0 14px; cursor: pointer; font-weight: 550; font-size: 13px; transition: background .15s,border-color .15s,box-shadow .15s; }
.button:focus-visible,.icon-button:focus-visible,.theme-toggle:focus-visible,.tiny-button:focus-visible,input:focus-visible,select:focus-visible { outline: 2px solid color-mix(in srgb,var(--ring) 60%,transparent); outline-offset: 2px; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { background: var(--primary); color: var(--primary-foreground); }
.button.primary:hover:not(:disabled) { opacity: .9; }
.button.ghost { background: transparent; border-color: var(--border); }
.button.ghost:hover { background: var(--accent); }
.button.wide { width: 100%; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 240px; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--sidebar); }
.brand { height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.brand strong,.brand small { display: block; }
.brand strong { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.brand small { margin-top: 1px; color: var(--muted-foreground); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
nav { padding: 16px 10px; }
.nav-label { margin: 16px 10px 6px; color: var(--muted-foreground); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.nav-label:first-child { margin-top: 0; }
.nav-item { position: relative; width: 100%; height: 32px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; border: 0; border-radius: 6px; padding: 0 10px; background: transparent; color: var(--sidebar-foreground); text-align: left; cursor: pointer; font-size: 13px; font-weight: 500; }
.nav-item span { color: var(--muted-foreground); font-size: 12px; }
.nav-item em { color: var(--muted-foreground); font-size: 9px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.nav-item.active { background: var(--accent); color: var(--accent-foreground); box-shadow: inset 2px 0 var(--brand); }
.nav-item:disabled { cursor: default; opacity: .56; }
.sidebar-foot { margin-top: auto; padding: 16px 20px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 11px; }
.sidebar-foot p { margin: 7px 0 0; }
.status-chip { display: flex; align-items: center; gap: 7px; color: var(--sidebar-foreground); }
.status-chip i,.global-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--status-healthy); }
main { min-width: 0; margin-left: 240px; }
.topbar { position: sticky; top: 0; z-index: 10; height: 56px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: color-mix(in srgb,var(--background) 88%,transparent); backdrop-filter: blur(12px); }
.global-status { display: flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 12px; }
.global-status small { padding-left: 8px; border-left: 1px solid var(--border); color: var(--status-healthy-fg); }
.identity { display: flex; align-items: center; gap: 9px; }
.identity-copy { text-align: right; }
.identity-copy strong,.identity-copy small { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-copy strong { font-size: 12px; font-weight: 600; }
.identity-copy small { margin-top: 2px; color: var(--muted-foreground); font-size: 10px; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--accent); color: var(--foreground); font-size: 10px; font-weight: 650; }
.icon-button,.theme-toggle { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: transparent; cursor: pointer; color: var(--muted-foreground); }
.icon-button:hover,.theme-toggle:hover { background: var(--accent); color: var(--foreground); }
.content { width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 32px 64px; }
.page-head { margin-bottom: 24px; display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.page-head h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 650; letter-spacing: -.02em; }
.page-head p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 14px; }
.summary-grid { margin-bottom: 24px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.metric { padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: var(--shadow-xs); }
.metric span,.metric small { display: block; color: var(--muted-foreground); }
.metric span { font-size: 12px; font-weight: 500; }
.metric strong { display: block; margin: 8px 0 4px; font-size: 26px; line-height: 30px; font-weight: 650; letter-spacing: -.03em; }
.metric small { font-size: 11px; }
.metric.accent strong { color: var(--status-degraded-fg); }
.panel { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-xs); }
.panel-head { min-height: 72px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); }
.panel-head h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.panel-head p { margin: 0; color: var(--muted-foreground); font-size: 12px; }
.panel-actions { display: flex; gap: 8px; }
.search { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--input); border-radius: 6px; background: var(--background); }
.search span { color: var(--muted-foreground); }
.search input { width: 190px; border: 0; outline: 0; background: transparent; color: var(--foreground); font-size: 12px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th { height: 38px; padding: 0 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb,var(--muted) 54%,transparent); color: var(--muted-foreground); text-align: left; font-size: 11px; font-weight: 550; }
td { height: 56px; padding: 8px 16px; border-bottom: 1px solid var(--border); color: var(--card-foreground); font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb,var(--accent) 55%,transparent); }
.machine-name { font-weight: 600; }
.machine-identity { display: flex; align-items: center; gap: 10px; }
.machine-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 7px; background: var(--accent); color: var(--brand); font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.mono-value { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 11px; }
.owner-value { font-weight: 550; }
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.data-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--muted); color: var(--muted-foreground); font-size: 10px; font-weight: 550; }
.data-chip.environment-chip { border-color: color-mix(in srgb,var(--brand) 25%,var(--border)); background: color-mix(in srgb,var(--brand) 9%,transparent); color: var(--brand); }
.subtle { margin-top: 3px; color: var(--muted-foreground); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; }
.state { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; text-transform: capitalize; }
.state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--status-degraded); }
.state.managed::before,.state.reachable::before { background: var(--status-healthy); }
.state.blocked::before,.state.quarantined::before { background: var(--status-down); }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.tiny-button { height: 28px; padding: 0 9px; border: 1px solid var(--border); border-radius: 5px; background: transparent; cursor: pointer; font-size: 11px; }
.tiny-button:hover:not(:disabled) { background: var(--accent); border-color: var(--input); }
.tiny-button:disabled { opacity: .45; cursor: not-allowed; }
.empty-state { padding: 64px 16px; text-align: center; color: var(--muted-foreground); }
.empty-state h4 { margin: 10px 0 5px; color: var(--foreground); font-size: 14px; }
.empty-state p { margin: 0; font-size: 12px; }
.empty-glyph { color: var(--brand); font-size: 24px; }
.permission-note { padding: 10px 18px; border-bottom: 1px solid color-mix(in srgb,var(--status-degraded) 25%,transparent); background: color-mix(in srgb,var(--status-degraded) 8%,transparent); color: var(--status-degraded-fg); font-size: 12px; }
dialog { width: min(720px,calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--popover); color: var(--foreground); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgb(0 0 0 / .58); backdrop-filter: blur(3px); }
.dialog-head { padding: 20px 22px 8px; display: flex; align-items: start; justify-content: space-between; }
.dialog-head .eyebrow { margin: 0 0 4px; color: var(--brand); font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.dialog-head h3 { margin: 0; font-size: 18px; font-weight: 650; }
.dialog-intro { margin: 0; padding: 4px 22px 16px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); font-size: 12px; }
.form-grid { padding: 20px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label { display: grid; gap: 6px; }
.form-grid label > span { font-size: 12px; font-weight: 550; }
.form-grid input,.form-grid select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--input); border-radius: 6px; outline: 0; background: var(--background); color: var(--foreground); font-size: 12px; }
.input-action { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.form-grid label > small { color: var(--muted-foreground); font-size: 10px; line-height: 1.45; }
.form-grid label > small.scan-success { color: var(--status-healthy-fg); }
.form-grid label > small.scan-error { color: var(--status-down-fg); }
.form-grid .confirmation { display: flex; align-items: center; gap: 9px; }
.form-grid .confirmation input { width: 16px; height: 16px; flex: 0 0 auto; padding: 0; }
.form-grid .confirmation > span { color: var(--foreground); font-weight: 500; }
.span-2 { grid-column: span 2; }
.dialog-actions { padding: 14px 22px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); }
.inline-error { margin: 12px 0 0; padding: 9px 10px; border: 1px solid color-mix(in srgb,var(--destructive) 30%,transparent); border-radius: 6px; background: color-mix(in srgb,var(--destructive) 8%,transparent); color: var(--destructive); font-size: 12px; }
.form-grid + .inline-error { margin: 0 22px 12px; }
.toast { position: fixed; z-index: 50; right: 20px; bottom: 20px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--popover); box-shadow: var(--shadow-lg); font-size: 12px; }

.count-badge { min-width: 26px; height: 24px; display: grid; place-items: center; padding: 0 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 11px; }
.execution-layout { display: grid; grid-template-columns: minmax(280px,340px) minmax(0,1fr); gap: 16px; align-items: start; }
.execution-list-panel { max-height: calc(100vh - 145px); position: sticky; top: 72px; }
.execution-list { max-height: calc(100vh - 218px); overflow-y: auto; }
.execution-item { width: 100%; padding: 14px 16px; display: block; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
.execution-item:last-child { border-bottom: 0; }
.execution-item:hover { background: color-mix(in srgb,var(--accent) 55%,transparent); }
.execution-item.selected { background: var(--accent); box-shadow: inset 3px 0 var(--brand); }
.execution-item-top,.execution-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.execution-item-top strong { font-size: 12px; font-weight: 600; }
.execution-machine { margin-top: 6px; color: var(--muted-foreground); font-size: 11px; }
.execution-item-meta { margin-top: 10px; color: var(--muted-foreground); font-size: 10px; }
.run-status { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 3px 7px; color: var(--status-unknown-fg); font-size: 9px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.run-status.large { padding: 5px 9px; font-size: 10px; }
.run-status.running,.run-status.queued,.run-status.verifying { border-color: color-mix(in srgb,var(--status-degraded) 30%,transparent); background: color-mix(in srgb,var(--status-degraded) 8%,transparent); color: var(--status-degraded-fg); }
.run-status.succeeded { border-color: color-mix(in srgb,var(--status-healthy) 30%,transparent); background: color-mix(in srgb,var(--status-healthy) 8%,transparent); color: var(--status-healthy-fg); }
.run-status.failed,.run-status.interrupted { border-color: color-mix(in srgb,var(--status-down) 30%,transparent); background: color-mix(in srgb,var(--status-down) 8%,transparent); color: var(--status-down-fg); }
.execution-detail { min-height: 480px; }
.execution-detail-head { padding: 20px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); }
.execution-detail-head h3 { margin: 2px 0 4px; font-size: 17px; font-weight: 650; }
.execution-detail-head p { margin: 0; color: var(--muted-foreground); font-size: 12px; }
.detail-kicker { color: var(--brand); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; font-weight: 650; letter-spacing: .08em; }
.execution-meta-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--border); }
.execution-meta-grid > div { min-width: 0; padding: 13px 16px; border-right: 1px solid var(--border); }
.execution-meta-grid > div:last-child { border-right: 0; }
.execution-meta-grid span,.execution-meta-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.execution-meta-grid span { margin-bottom: 4px; color: var(--muted-foreground); font-size: 9px; font-weight: 550; text-transform: uppercase; letter-spacing: .06em; }
.execution-meta-grid strong { font-size: 10px; font-weight: 550; }
.execution-summary { margin: 16px 22px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--muted); font-size: 11px; }
.execution-summary.succeeded { border-color: color-mix(in srgb,var(--status-healthy) 25%,var(--border)); color: var(--status-healthy-fg); }
.execution-summary.failed { border-color: color-mix(in srgb,var(--status-down) 25%,var(--border)); color: var(--status-down-fg); }
.execution-detail-body { padding: 20px 22px 24px; display: grid; gap: 22px; }
.detail-section h4 { margin: 0 0 10px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.checklist { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; }
.check-row { min-height: 54px; padding: 9px 12px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.check-row:last-child { border-bottom: 0; }
.check-icon { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--muted); color: var(--status-unknown-fg); font-size: 11px; }
.check-row.running .check-icon { background: color-mix(in srgb,var(--status-degraded) 12%,transparent); color: var(--status-degraded-fg); }
.check-row.succeeded .check-icon { background: color-mix(in srgb,var(--status-healthy) 12%,transparent); color: var(--status-healthy-fg); }
.check-row.failed .check-icon { background: color-mix(in srgb,var(--status-down) 12%,transparent); color: var(--status-down-fg); }
.check-row strong { display: block; font-size: 11px; font-weight: 600; text-transform: capitalize; }
.check-row p { margin: 3px 0 0; color: var(--muted-foreground); font-size: 10px; }
.check-row time { color: var(--muted-foreground); font-size: 9px; }
.quiet { padding: 14px; margin: 0; color: var(--muted-foreground); font-size: 11px; }
.evidence-card { padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb,var(--muted) 45%,transparent); }
.evidence-card strong { font-size: 11px; text-transform: capitalize; }
.evidence-card p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 10px; }
.console-head { display: flex; align-items: center; justify-content: space-between; }
.live-indicator { color: var(--status-healthy-fg); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.run-console { height: 290px; margin: 0; overflow: auto; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: #08080a; color: #c8c8d0; font: 10px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 900px) {
  .sidebar { width: 68px; }
  .brand { justify-content: center; padding: 0; }
  .brand > div,.nav-label,.nav-item em,.sidebar-foot { display: none; }
  nav { padding-inline: 8px; }
  .nav-item { grid-template-columns: 1fr; padding: 0; text-align: center; }
  .nav-item span { font-size: 13px; }
  main { margin-left: 68px; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .execution-layout { grid-template-columns: 1fr; }
  .execution-list-panel { position: static; max-height: none; }
  .execution-list { max-height: 320px; }
  .execution-meta-grid { grid-template-columns: 1fr 1fr; }
  .execution-meta-grid > div:nth-child(2) { border-right: 0; }
  .execution-meta-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 620px) {
  .sidebar { display: none; }
  main { margin-left: 0; }
  .topbar { padding: 0 14px; }
  .global-status span,.global-status small,.identity-copy { display: none; }
  .content { padding: 24px 14px 48px; }
  .page-head { align-items: stretch; flex-direction: column; gap: 14px; }
  .page-head .button { align-self: flex-start; }
  .summary-grid { gap: 8px; }
  .metric { padding: 14px; }
  .metric strong { font-size: 22px; }
  .panel-head { align-items: stretch; flex-direction: column; }
  .search input { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
}

/* OKDR interaction system: jobs index -> dedicated job detail -> full log workspace */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--foreground) 18%,transparent) transparent; }
::selection { background: color-mix(in srgb,var(--brand) 35%,transparent); }
.button,.icon-button,.theme-toggle,.tiny-button,.nav-item,.job-row,.job-link,.log-button { transition: color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease,transform .16s ease; }
.button:active:not(:disabled),.tiny-button:active:not(:disabled),.log-button:active:not(:disabled) { transform: translateY(1px); }
.nav-item:hover:not(:disabled) { background: var(--accent); color: var(--foreground); }
.view-enter { animation: okdr-page-in .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes okdr-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes okdr-spin { to { transform: rotate(360deg); } }
@keyframes okdr-pulse { 0%,100% { opacity: 1; } 50% { opacity: .42; } }
@keyframes okdr-ping { 75%,100% { transform: scale(2.4); opacity: 0; } }

.jobs-toolbar { min-height: 36px; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; }
.activity-copy { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-size: 12px; font-weight: 550; }
.activity-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: okdr-pulse 1.7s ease-in-out infinite; }
.quiet-count,.table-footnote { color: var(--muted-foreground); font-size: 12px; }
.table-footnote { margin: 12px 0 0; }
.jobs-panel { overflow: hidden; }
.jobs-table { min-width: 1040px; }
.jobs-table th:first-child { width: 116px; }
.jobs-table th:nth-child(6) { text-align: right; }
.jobs-table th:last-child { width: 27%; }
.job-row { cursor: pointer; }
.job-row:hover { background: color-mix(in srgb,var(--muted) 45%,transparent); }
.job-row td { height: 54px; }
.job-row td:nth-child(6) { text-align: right; font-variant-numeric: tabular-nums; }
.job-link { display: inline-flex; align-items: baseline; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.job-link:hover .job-name,.job-link:focus-visible .job-name { text-decoration: underline; text-underline-offset: 2px; }
.job-id { color: var(--muted-foreground); font-size: 10px; }
.job-name { font-size: 12px; font-weight: 600; }
.machine-link { color: var(--muted-foreground); }
.actor-cell { font-size: 10px; }
.duration-cell { font-variant-numeric: tabular-nums; }
.job-summary { display: block; max-width: 310px; overflow: hidden; color: var(--muted-foreground); text-overflow: ellipsis; white-space: nowrap; }
.job-summary.failed { color: var(--status-down-fg); }
.run-status { height: 20px; gap: 5px; padding: 0 8px; border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--status-unknown) 25%,transparent); font-size: 11px; font-weight: 550; letter-spacing: 0; text-transform: capitalize; }
.run-status.large { height: 24px; padding: 0 10px; font-size: 12px; }
.run-status.running { background: color-mix(in srgb,var(--brand) 12%,transparent); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--brand) 30%,transparent); }
.run-status.queued { background: color-mix(in srgb,var(--status-unknown) 12%,transparent); color: var(--status-unknown-fg); }
.run-status.succeeded { background: color-mix(in srgb,var(--status-healthy) 12%,transparent); color: var(--status-healthy-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--status-healthy) 25%,transparent); }
.run-status.failed { background: color-mix(in srgb,var(--status-down) 12%,transparent); color: var(--status-down-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--status-down) 30%,transparent); }
.run-status.running .status-symbol { display: inline-block; animation: okdr-spin .9s linear infinite; }

.job-breadcrumb { margin-bottom: 8px; display: flex; align-items: center; gap: 5px; color: var(--muted-foreground); font-size: 12px; }
.breadcrumb-link { padding: 0; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.breadcrumb-link:hover { color: var(--foreground); }
.job-page-head { margin-bottom: 24px; }
.job-title-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.job-title-wrap h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.job-title-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--muted); color: var(--brand); font-size: 12px; }
.job-description { margin: 8px 0 0 48px; color: var(--muted-foreground); font-size: 13px; }
.job-alert { margin-bottom: 24px; padding: 14px 16px; display: grid; grid-template-columns: 20px 1fr; gap: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.job-alert .alert-icon { margin-top: 1px; font-weight: 700; }
.job-alert strong { display: block; font-size: 13px; }
.job-alert p { margin: 4px 0 0; color: color-mix(in srgb,var(--foreground) 80%,transparent); font-size: 12px; }
.job-alert.succeeded { border-color: color-mix(in srgb,var(--status-healthy) 30%,transparent); background: color-mix(in srgb,var(--status-healthy) 6%,transparent); }
.job-alert.succeeded .alert-icon { color: var(--status-healthy-fg); }
.job-alert.failed { border-color: color-mix(in srgb,var(--status-down) 30%,transparent); background: color-mix(in srgb,var(--status-down) 6%,transparent); }
.job-alert.failed .alert-icon { color: var(--status-down-fg); }
.job-alert.running,.job-alert.queued { border-color: color-mix(in srgb,var(--brand) 28%,transparent); background: color-mix(in srgb,var(--brand) 6%,transparent); }
.job-alert.running .alert-icon { color: var(--brand); animation: okdr-spin .9s linear infinite; }

.job-steps { margin: 0 0 24px; padding: 16px; display: grid; grid-auto-columns: minmax(0,1fr); grid-auto-flow: column; gap: 12px; list-style: none; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-xs); }
.job-step { min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.job-step > div { min-width: 0; }
.job-step .check-icon { margin-top: 2px; flex: 0 0 auto; background: transparent; font-size: 14px; }
.job-step.running .check-icon { color: var(--brand); animation: okdr-spin .9s linear infinite; }
.job-step.succeeded .check-icon { color: var(--status-healthy-fg); }
.job-step.failed .check-icon { color: var(--status-down-fg); }
.job-step .step-label { display: block; color: var(--muted-foreground); font-size: 10px; font-weight: 550; letter-spacing: .05em; text-transform: uppercase; }
.job-step strong { display: block; margin-top: 2px; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.job-step p { display: block; max-width: 100%; margin: 3px 0 0; overflow: hidden; color: var(--muted-foreground); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.job-detail-grid { display: grid; grid-template-columns: minmax(220px,1fr) minmax(0,2fr); gap: 16px; align-items: start; }
.job-side { display: grid; gap: 16px; }
.job-card { padding: 20px; }
.job-card h3 { margin: 0 0 16px; font-size: 13px; font-weight: 650; }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline-item { position: relative; padding: 0 0 20px 30px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::after { content: ""; position: absolute; top: 20px; bottom: 0; left: 9px; width: 1px; background: var(--border); }
.timeline-item:last-child::after { display: none; }
.timeline-icon { position: absolute; top: 1px; left: 0; width: 19px; height: 19px; display: grid; place-items: center; color: var(--muted-foreground); font-size: 12px; }
.timeline-item.succeeded .timeline-icon { color: var(--status-healthy-fg); }
.timeline-item.failed .timeline-icon { color: var(--status-down-fg); }
.timeline-item.running .timeline-icon { color: var(--brand); animation: okdr-spin .9s linear infinite; }
.timeline-item strong,.timeline-item time { display: block; }
.timeline-item strong { font-size: 12px; }
.timeline-item time { margin-top: 3px; color: var(--muted-foreground); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; }
.timeline-item p { margin: 3px 0 0; color: var(--muted-foreground); font-size: 10px; }
.parameter-list { margin: 0 -20px -20px; border-top: 1px solid var(--border); }
.parameter-list > div { padding: 9px 20px; display: grid; grid-template-columns: minmax(76px,38%) 1fr; gap: 10px; border-bottom: 1px solid var(--border); }
.parameter-list > div:last-child { border-bottom: 0; }
.parameter-list dt { color: var(--muted-foreground); font-size: 11px; }
.parameter-list dd { margin: 0; overflow-wrap: anywhere; font-size: 10px; }

.log-panel { min-width: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / .1); border-radius: 12px; background: #0c0c0f; color: #d4d4d8; box-shadow: var(--shadow-xs); }
.log-head { min-height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgb(255 255 255 / .1); }
.log-head strong { color: #fff; font-size: 12px; font-weight: 550; }
.terminal-icon { color: #a1a1aa; }
.log-state { display: flex; align-items: center; gap: 6px; color: #a1a1aa; font-size: 11px; }
.stream-dot,.complete-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #3fcb5a; }
.stream-dot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #3fcb5a; animation: okdr-ping 1.4s cubic-bezier(0,0,.2,1) infinite; }
.complete-dot { background: #71717a; }
.log-tools { margin-left: auto; display: flex; gap: 4px; }
.log-button { height: 27px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: #a1a1aa; cursor: pointer; font-size: 10px; }
.log-button:hover:not(:disabled),.log-button.active { background: rgb(255 255 255 / .1); color: #fff; }
.log-button:disabled { opacity: .35; cursor: default; }
.run-console { height: max(520px,calc(100vh - 330px)); max-height: 720px; overflow: auto; padding: 8px 0; outline: 0; font: 11.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
.run-console:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb,#7c83ff 60%,transparent); }
.log-table { width: 100%; min-width: 0; border-collapse: collapse; }
.log-table tr:hover { background: rgb(255 255 255 / .03); }
.log-table td { height: auto; padding: 0 16px 0 0; border: 0; color: #d4d4d8; font-size: inherit; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; }
.log-table .log-number { width: 58px; padding: 0 12px; color: #52525b; text-align: right; user-select: none; font-variant-numeric: tabular-nums; }
.log-table .log-error { color: #f47575; }
.log-table .log-warning { color: #fbbf3c; }
.log-table .log-ok { color: #3fcb5a; }
.log-table .log-skip { color: #7dd3fc; }
.log-table .log-heading { color: #fff; font-weight: 650; }
.log-waiting { padding: 4px 16px; margin: 0; color: #71717a; animation: okdr-pulse 1.2s ease-in-out infinite; }
.toast:not(.hidden) { animation: okdr-toast-in .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes okdr-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
dialog[open] { animation: okdr-dialog-in .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes okdr-dialog-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 1050px) {
  .job-detail-grid { grid-template-columns: 1fr; }
  .job-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .job-side > :first-child { grid-row: span 2; }
  .run-console { height: 520px; }
}
@media (max-width: 700px) {
  .jobs-toolbar { flex-wrap: wrap; }
  .activity-copy { width: 100%; margin-left: 0; }
  .job-description { margin-left: 0; }
  .job-steps { grid-auto-flow: row; }
  .job-side { grid-template-columns: 1fr; }
  .log-head { flex-wrap: wrap; padding-block: 8px; }
  .log-tools { width: 100%; margin-left: 0; }
  .run-console { height: 440px; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Overview, machine detail, observations, and audit use the same OKDR primitives. */
.overview-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 16px; align-items: start; }
.overview-list { display: grid; }
.overview-item { width: 100%; min-height: 62px; padding: 10px 16px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--foreground); text-align: left; cursor: pointer; transition: background-color .16s ease; }
.overview-item:last-child { border-bottom: 0; }
.overview-item:hover { background: color-mix(in srgb,var(--muted) 45%,transparent); }
.overview-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--muted); color: var(--status-unknown-fg); font-size: 11px; }
.overview-icon.running { color: var(--brand); animation: okdr-spin .9s linear infinite; }
.overview-icon.succeeded { color: var(--status-healthy-fg); }
.overview-icon.failed { color: var(--status-down-fg); }
.overview-copy { min-width: 0; }
.overview-copy strong,.overview-copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-copy strong { display: block; font-size: 12px; font-weight: 600; }
.overview-copy p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 10px; }
.healthy-empty { padding: 30px 18px; color: var(--status-healthy-fg); text-align: center; font-size: 12px; }
.machine-row { cursor: pointer; transition: background-color .16s ease; }

.machine-detail-head { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.machine-detail-title { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }
.machine-detail-title h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.machine-detail-head > div > p { margin: 8px 0 0 47px; color: var(--muted-foreground); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 11px; }
.machine-title-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--muted); color: var(--brand); font-size: 10px; font-weight: 700; }
.machine-detail-actions { display: flex; gap: 8px; }
.machine-detail-grid { margin-bottom: 16px; display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: 16px; align-items: stretch; }
.detail-card { padding: 20px; }
.detail-card h3 { margin: 0 0 16px; font-size: 13px; font-weight: 650; }
.detail-list { margin: 0 -20px -20px; border-top: 1px solid var(--border); }
.detail-list > div { min-height: 39px; padding: 8px 20px; display: grid; grid-template-columns: minmax(100px,32%) 1fr; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--muted-foreground); font-size: 10px; }
.detail-list dd { min-width: 0; margin: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fact-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.fact-grid > div { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb,var(--muted) 38%,transparent); }
.fact-grid span,.fact-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-grid span { color: var(--muted-foreground); font-size: 9px; font-weight: 550; letter-spacing: .05em; text-transform: uppercase; }
.fact-grid strong { margin-top: 6px; font-size: 11px; font-weight: 600; }
.inline-empty { min-height: 210px; display: grid; place-content: center; text-align: center; }
.inline-empty strong { font-size: 12px; }
.inline-empty p { margin: 5px 0 0; color: var(--muted-foreground); font-size: 11px; }
.machine-history { overflow: hidden; }

.audit-table { min-width: 1040px; }
.audit-table th:first-child { width: 165px; }
.audit-table th:nth-child(2) { width: 210px; }
.audit-table th:nth-child(3) { width: 170px; }
.audit-table th:nth-child(5) { width: 95px; }
.audit-action { font-weight: 600; }
.audit-target { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-details { display: block; max-width: 330px; overflow: hidden; color: var(--muted-foreground); text-overflow: ellipsis; white-space: nowrap; }
.data-chip.result-success { color: var(--status-healthy-fg); }
.data-chip.result-failure { color: var(--status-down-fg); }

.profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.profile-card { padding: 20px; }
.profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.profile-head h3 { margin: 5px 0 0; font-size: 15px; font-weight: 650; }
.profile-description { min-height: 40px; margin: 14px 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.55; }
.profile-components { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-footer { margin: 18px -20px -20px; padding: 11px 20px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 10px; }
.desired-card { margin-bottom: 16px; overflow: hidden; }
.desired-head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); }
.desired-head h3 { margin: 0; font-size: 13px; font-weight: 650; }
.desired-head p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 11px; }
.assignment-form { padding: 14px 20px; display: grid; grid-template-columns: minmax(180px,1fr) minmax(150px,.55fr) auto; align-items: end; gap: 12px; border-bottom: 1px solid var(--border); }
.assignment-form label { display: grid; gap: 6px; }
.assignment-form label > span { font-size: 10px; font-weight: 550; }
.assignment-form select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--input); border-radius: 6px; background: var(--background); color: var(--foreground); font-size: 11px; }
.onboarding-steps { margin: 0; padding: 18px 20px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; list-style: none; border-bottom: 1px solid var(--border); }
.onboarding-step { min-width: 0; display: flex; gap: 9px; }
.plan-step-icon { width: 19px; height: 19px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); font-size: 10px; }
.onboarding-step.complete .plan-step-icon { background: color-mix(in srgb,var(--status-healthy) 12%,transparent); color: var(--status-healthy-fg); }
.onboarding-step.ready .plan-step-icon { background: color-mix(in srgb,var(--brand) 12%,transparent); color: var(--brand); }
.onboarding-step .step-label,.onboarding-step strong,.onboarding-step small { display: block; }
.onboarding-step .step-label { color: var(--muted-foreground); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.onboarding-step strong { margin-top: 3px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-step small { margin-top: 3px; color: var(--muted-foreground); font-size: 9px; }
.plan-gates { margin: 14px 20px; padding: 12px 14px; border: 1px solid color-mix(in srgb,var(--status-degraded) 30%,transparent); border-radius: 8px; background: color-mix(in srgb,var(--status-degraded) 7%,transparent); color: var(--status-degraded-fg); font-size: 11px; }
.plan-gates strong { font-size: 11px; }
.plan-gates ul { margin: 6px 0 0; padding-left: 18px; }
.plan-ready { margin: 14px 20px; padding: 12px 14px; border: 1px solid color-mix(in srgb,var(--status-healthy) 30%,transparent); border-radius: 8px; background: color-mix(in srgb,var(--status-healthy) 7%,transparent); color: var(--status-healthy-fg); font-size: 11px; }
.approval-actions { padding: 0 20px 16px; display: flex; justify-content: flex-end; }
.compliance-summary { border-bottom: 1px solid var(--border); }
.compliance-head { padding: 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.compliance-head strong,.compliance-head span { display: block; }
.compliance-head strong { font-size: 11px; }
.compliance-head > div > span { margin-top: 3px; color: var(--muted-foreground); font-size: 9px; }
.compliance-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.compliance-count { padding: 3px 7px; border-radius: 999px; background: var(--muted); font-size: 9px; font-weight: 650; }
.compliance-count.pass { color: var(--status-healthy-fg); }
.compliance-count.fail { color: var(--status-down-fg); }
.compliance-count.warning { color: var(--status-degraded-fg); }
.compliance-count.review { color: var(--brand); }
.finding-list { border-top: 1px solid var(--border); }
.finding-item { min-height: 42px; padding: 8px 20px; display: grid; grid-template-columns: 65px 80px minmax(0,1fr); align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.finding-item:last-child { border-bottom: 0; }
.finding-item strong { font-size: 10px; }
.finding-item p { margin: 0; overflow: hidden; color: var(--muted-foreground); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.data-chip.finding-fail { color: var(--status-down-fg); }
.data-chip.finding-warning { color: var(--status-degraded-fg); }
.data-chip.finding-review { color: var(--brand); }

.drift-table { min-width: 900px; }
.drift-table th:first-child { width: 110px; }
.drift-table th:nth-child(2),.drift-table th:nth-child(3) { width: 210px; }
.drift-table th:nth-child(5) { width: 130px; }
.drift-table th:nth-child(6) { width: 110px; }
.drift-table td strong,.drift-table td .subtle { display: block; }
.drift-table td .subtle { margin-top: 3px; }
.drift-counts { display: flex; flex-wrap: wrap; gap: 5px; }
.data-chip.drift-sync,.data-chip.drift-in_sync,.state.drift-in_sync { color: var(--status-healthy-fg); }
.data-chip.drift-drifted,.state.drift-drifted { color: var(--status-down-fg); }
.data-chip.drift-review,.state.drift-review { color: var(--status-degraded-fg); }
.data-chip.drift-unknown,.state.drift-unknown { color: var(--muted-foreground); }
.drift-summary { border-bottom: 1px solid var(--border); }
.drift-summary-head { padding: 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border); }
.drift-summary-head strong,.drift-summary-head span { display: block; }
.drift-summary-head strong { font-size: 11px; }
.drift-summary-head div > span { margin-top: 3px; color: var(--muted-foreground); font-size: 9px; }
.drift-item-list { border-top: 1px solid var(--border); }
.drift-item { min-height: 42px; padding: 8px 20px; display: grid; grid-template-columns: 70px 130px 180px minmax(0,1fr); align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.drift-item:last-child { border-bottom: 0; }
.drift-item strong,.drift-item span,.drift-item p { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.drift-item span,.drift-item p { color: var(--muted-foreground); }
.drift-item p { margin: 0; }

@media (max-width: 1000px) {
  .overview-grid,.machine-detail-grid { grid-template-columns: 1fr; }
  .onboarding-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .machine-detail-head { align-items: stretch; flex-direction: column; }
  .machine-detail-head > div > p { margin-left: 0; }
  .machine-detail-actions { flex-wrap: wrap; }
  .fact-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .assignment-form { grid-template-columns: 1fr; }
  .onboarding-steps { grid-template-columns: 1fr; }
  .drift-item { grid-template-columns: 70px 1fr; }
  .drift-item span,.drift-item p { grid-column: 2; }
}