:root {
  color-scheme: light;
  --ui-canvas: #f6f7fb;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f1f3f8;
  --ui-surface-strong: #e9edf5;
  --ui-text: #202430;
  --ui-text-secondary: #616a7b;
  --ui-text-tertiary: #8c95a6;
  --ui-border: #dfe3eb;
  --ui-border-strong: #c9cfdb;
  --ui-accent: #4f46e5;
  --ui-accent-hover: #4338ca;
  --ui-accent-soft: #eeedff;
  --ui-accent-border: #aaa6f4;
  --ui-success: #177f62;
  --ui-success-soft: #e8f7f1;
  --ui-warning: #a15c08;
  --ui-warning-soft: #fff4e1;
  --ui-danger: #bf3c57;
  --ui-danger-soft: #fff0f3;
  --ui-danger-border: #e7b8c2;
  --ui-info: #2368b8;
  --ui-info-soft: #eaf4ff;
  --ui-shadow-float: 0 16px 40px rgb(16 24 40 / 14%);
  --ui-shadow-dialog: 0 26px 76px rgb(16 24 40 / 24%);
  --ui-radius-xs: 4px;
  --ui-radius-sm: 6px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 12px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-space-12: 48px;
  --ui-motion-fast: 140ms;
  --ui-motion-base: 220ms;
  --ui-motion-slow: 360ms;
  --ui-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ui-ease-emphasized: cubic-bezier(.16, 1, .3, 1);
  --ui-focus: 0 0 0 3px rgb(79 70 229 / 22%);
  --bg: var(--ui-canvas);
  --bg-elevated: var(--ui-surface);
  --panel: var(--ui-surface);
  --panel2: var(--ui-surface-muted);
  --panel3: var(--ui-surface-strong);
  --text: var(--ui-text);
  --soft: var(--ui-text-secondary);
  --muted: var(--ui-text-tertiary);
  --line: var(--ui-border);
  --line-strong: var(--ui-border-strong);
  --accent: var(--ui-accent);
  --accent-strong: var(--ui-accent-hover);
  --accent-soft: var(--ui-accent-soft);
  --cyan: var(--ui-accent);
  --success: var(--ui-success);
  --warning: var(--ui-warning);
  --danger: var(--ui-danger);
  --danger-soft: var(--ui-danger-soft);
  --radius: var(--ui-radius-md);
  --radius-sm: var(--ui-radius-sm);
  --shadow: var(--ui-shadow-float);
  --focus: var(--ui-focus);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-canvas: #11131a;
  --ui-surface: #191c25;
  --ui-surface-muted: #20242e;
  --ui-surface-strong: #272c38;
  --ui-text: #f4f6fb;
  --ui-text-secondary: #aeb6c5;
  --ui-text-tertiary: #737d90;
  --ui-border: #303644;
  --ui-border-strong: #4a5365;
  --ui-accent: #8b84ff;
  --ui-accent-hover: #a9a5ff;
  --ui-accent-soft: #28264c;
  --ui-accent-border: #5f5aa8;
  --ui-success: #5ad6ad;
  --ui-success-soft: #143d32;
  --ui-warning: #f0bf6a;
  --ui-warning-soft: #493716;
  --ui-danger: #ff879e;
  --ui-danger-soft: #4c202b;
  --ui-danger-border: #955263;
  --ui-info: #7ab8ff;
  --ui-info-soft: #162f4b;
  --ui-shadow-float: 0 18px 42px rgb(0 0 0 / 34%);
  --ui-shadow-dialog: 0 28px 86px rgb(0 0 0 / 52%);
  --ui-focus: 0 0 0 3px rgb(139 132 255 / 28%);
}

* { box-sizing: border-box; }

html { background: var(--ui-canvas); }

body {
  min-width: 320px;
  background: var(--ui-canvas);
  color: var(--ui-text);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

button,
input,
textarea,
select { font: inherit; }

button,
a,
input,
textarea,
select,
summary { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus);
}

h1,
h2,
h3,
h4,
p { color: inherit; }

h1 { font-size: 28px; font-weight: 720; letter-spacing: 0; line-height: 1.2; }
h2 { font-size: 18px; font-weight: 680; letter-spacing: 0; line-height: 1.35; }
h3 { font-size: 15px; font-weight: 680; letter-spacing: 0; line-height: 1.4; }

.muted { color: var(--ui-text-tertiary); }

.eyebrow {
  color: var(--ui-text-tertiary);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
}

input,
textarea,
select {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  color: var(--ui-text);
  min-height: 38px;
  padding: 8px 10px;
}

input:hover,
textarea:hover,
select:hover { border-color: var(--ui-border-strong); }

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ui-accent);
  background: var(--ui-surface);
}

input::placeholder,
textarea::placeholder { color: var(--ui-text-tertiary); opacity: 1; }

label { color: var(--ui-text-secondary); font-size: 12px; font-weight: 600; }

.primary,
.secondary,
.danger-link,
.ui-button,
.ui-icon-button {
  min-height: 36px;
  border-radius: var(--ui-radius-sm);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.primary,
.ui-button--primary {
  border: 1px solid var(--ui-accent);
  background: var(--ui-accent);
  color: #fff;
  box-shadow: none;
}

.primary:hover:not(:disabled),
.ui-button--primary:hover:not(:disabled) { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); }

.secondary,
.ui-button--secondary {
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-secondary);
}

.secondary:hover:not(:disabled),
.ui-button--secondary:hover:not(:disabled) {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-muted);
  color: var(--ui-text);
}

.danger-link,
.ui-button--danger {
  border: 1px solid var(--ui-danger-border);
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

.danger-link:hover:not(:disabled),
.ui-button--danger:hover:not(:disabled) { border-color: var(--ui-danger); background: var(--ui-danger-soft); }

.primary:disabled,
.secondary:disabled,
.danger-link:disabled,
.ui-button:disabled,
.ui-icon-button:disabled {
  cursor: not-allowed;
  opacity: .46;
  transform: none;
}

.ui-icon-button {
  display: inline-grid;
  width: 36px;
  min-width: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-secondary);
}

.ui-icon-button:hover { background: var(--ui-surface-muted); color: var(--ui-text); }

.ui-status,
.status,
.production-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  min-height: 24px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--ui-surface-muted);
  color: var(--ui-text-secondary);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

.ui-status::before,
.status::before,
.production-status-tag::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.succeeded,
.success,
.ok,
.active .status,
.production-status-tag { color: var(--ui-success); }
.failed,
.error { color: var(--ui-danger); }
.queued,
.waiting,
.warning { color: var(--ui-warning); }
.running,
.info { color: var(--ui-info); }

.message {
  border-radius: var(--ui-radius-sm);
  font-size: 13px;
  line-height: 1.5;
}

.message.ok { color: var(--ui-success); }
.message.error { color: var(--ui-danger); }

.ui-empty-state,
.works-empty,
.v5-empty,
.workflow-empty,
.production-collab-empty {
  display: grid;
  min-height: 148px;
  place-items: center;
  padding: var(--ui-space-6);
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-md);
  background: transparent;
  color: var(--ui-text-tertiary);
  text-align: center;
}

.ui-loading-state,
.works-loading {
  color: var(--ui-text-tertiary);
}

.ui-toast-region {
  position: fixed;
  z-index: 2200;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: min(380px, calc(100vw - 32px));
  gap: 8px;
  pointer-events: none;
}

.ui-toast {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-float);
  color: var(--ui-text);
  pointer-events: auto;
  animation: ui-toast-in var(--ui-motion-slow) var(--ui-ease-emphasized) both;
}

.ui-toast::before { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--ui-info); content: ""; }
.ui-toast--ok::before { background: var(--ui-success); }
.ui-toast--error::before { background: var(--ui-danger); }
.ui-toast--warning::before { background: var(--ui-warning); }
.ui-toast p { margin: 0; font-size: 13px; line-height: 1.45; }
.ui-toast button { min-height: 24px; border: 0; background: transparent; color: var(--ui-text-tertiary); }
.ui-toast.ui-toast--leaving { animation: ui-toast-out var(--ui-motion-base) var(--ui-ease-standard) both; }

@keyframes ui-toast-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes ui-toast-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 6px, 0) scale(.98); }
}

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

@media (max-width: 767px) {
  h1 { font-size: 24px; }
  h2 { font-size: 17px; }
  .ui-toast-region { right: 16px; bottom: 16px; }
}