:root {
  color-scheme: light;
  --ui-bg: #f1f7fe;
  --ui-bg-elevated: #fafcff;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f4f9fe;
  --ui-ink: #0e1d32;
  --ui-muted: #4b596d;
  --ui-subtle: #798494;
  --ui-line: #d2dce7;
  --ui-line-strong: #b9c6d3;
  --ui-primary: #0159ba;
  --ui-primary-hover: #0043a3;
  --ui-primary-soft: #e0f0ff;
  --ui-success: #006933;
  --ui-success-soft: #defae6;
  --ui-success-border: #94cda7;
  --ui-danger: #ba2c25;
  --ui-danger-hover: #970a0d;
  --ui-danger-soft: #ffeae5;
  --ui-danger-border: #f9aea4;
  --ui-warning: #a76700;
  --ui-warning-soft: #fff0d4;
  --ui-radius: 8px;
  --ui-shadow: 0 2px 8px rgba(19, 32, 50, 0.06);
  --ui-shadow-hover: 0 4px 12px rgba(19, 32, 50, 0.08);
  --ui-dialog-shadow: 0 8px 24px rgba(19, 32, 50, 0.14);
  --ui-backdrop: rgba(14, 27, 45, 0.42);
  --ui-focus: 0 0 0 3px rgba(1, 89, 186, 0.18);
  --ui-font: "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ui-z-floating-control: 40;
}

@supports (color: oklch(100% 0 0)) {
  :root {
    --ui-bg: oklch(97.4% 0.012 250);
    --ui-bg-elevated: oklch(99.1% 0.004 250);
    --ui-surface: oklch(100% 0 0);
    --ui-surface-muted: oklch(98% 0.008 250);
    --ui-ink: oklch(23% 0.045 257);
    --ui-muted: oklch(46% 0.038 257);
    --ui-subtle: oklch(61% 0.028 257);
    --ui-line: oklch(89% 0.018 250);
    --ui-line-strong: oklch(82% 0.024 250);
    --ui-primary: oklch(48% 0.17 257);
    --ui-primary-hover: oklch(41% 0.17 257);
    --ui-primary-soft: oklch(95% 0.035 257);
    --ui-success: oklch(45% 0.13 155);
    --ui-success-soft: oklch(96% 0.04 155);
    --ui-success-border: oklch(80% 0.08 155);
    --ui-danger: oklch(52% 0.18 28);
    --ui-danger-hover: oklch(43% 0.17 28);
    --ui-danger-soft: oklch(96% 0.035 28);
    --ui-danger-border: oklch(82% 0.09 28);
    --ui-warning: oklch(57% 0.13 70);
    --ui-warning-soft: oklch(96% 0.04 82);
    --ui-shadow: 0 2px 8px oklch(24% 0.04 257 / 0.06);
    --ui-shadow-hover: 0 4px 12px oklch(24% 0.04 257 / 0.08);
    --ui-dialog-shadow: 0 8px 24px oklch(24% 0.04 257 / 0.14);
    --ui-backdrop: oklch(22% 0.04 257 / 0.42);
    --ui-focus: 0 0 0 3px oklch(48% 0.17 257 / 0.18);
  }
}

* {
  box-sizing: border-box;
}

body.app-ui {
  min-height: 100vh;
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

body.app-ui main {
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  padding: 40px 0 64px;
}

body.app-ui h1,
body.app-ui h2,
body.app-ui h3,
body.app-ui p {
  letter-spacing: 0;
}

body.app-ui h1 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.22;
  font-weight: 800;
}

body.app-ui h2 {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
}

body.app-ui .eyebrow {
  margin: 0 0 8px;
  color: var(--ui-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

body.app-ui .subtitle,
body.app-ui .muted,
body.app-ui .status,
body.app-ui .picker-title {
  color: var(--ui-muted);
}

body.app-ui a {
  color: var(--ui-primary);
  text-decoration: none;
  font-weight: 700;
}

body.app-ui a:hover {
  color: var(--ui-primary-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

body.app-ui header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

body.app-ui .toolbar,
body.app-ui .action-row,
body.app-ui .dialog-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.app-ui .panel,
body.app-ui .section,
body.app-ui .result-card,
body.app-ui .card,
body.app-ui .metric {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  backdrop-filter: none;
}

body.app-ui .panel,
body.app-ui .result-card {
  padding: 18px;
  margin-bottom: 16px;
}

body.app-ui .section {
  margin-top: 18px;
  overflow: hidden;
}

body.app-ui .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-surface-muted);
}

body.app-ui .grid,
body.app-ui .summary,
body.app-ui .material-info-grid {
  gap: 14px;
}

body.app-ui .card {
  padding: 18px;
  min-height: auto;
  color: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

body.app-ui a.card:hover {
  border-color: var(--ui-primary);
  box-shadow: var(--ui-shadow-hover);
  transform: translateY(-1px);
  text-decoration: none;
}

body.app-ui input,
body.app-ui select,
body.app-ui textarea,
body.app-ui button,
body.app-ui .button,
body.app-ui .back-link,
body.app-ui .chip {
  font: inherit;
  letter-spacing: 0;
}

body.app-ui input,
body.app-ui select,
body.app-ui textarea {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

body.app-ui textarea {
  min-height: 96px;
  padding-top: 10px;
}

body.app-ui label {
  display: grid;
  gap: 6px;
  color: var(--ui-muted);
  font-size: 13px;
}

body.app-ui button,
body.app-ui .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius);
  background: var(--ui-primary);
  color: white;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

body.app-ui button:hover,
body.app-ui .button:hover {
  background: var(--ui-primary-hover);
  color: white;
  text-decoration: none;
}

body.app-ui button:active,
body.app-ui .button:active {
  transform: translateY(1px);
}

body.app-ui button:disabled,
body.app-ui .button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

body.app-ui .secondary,
body.app-ui a.button,
body.app-ui .back-link {
  border-color: var(--ui-line);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

body.app-ui .secondary:hover,
body.app-ui a.button:hover,
body.app-ui .back-link:hover {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface-muted);
  color: var(--ui-ink);
}

body.app-ui .back-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10;
  min-height: 38px;
  padding: 0 12px;
  box-shadow: var(--ui-shadow);
  font-size: 14px;
}

body.app-ui .table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}

body.app-ui table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ui-surface);
}

body.app-ui th,
body.app-ui td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--ui-line);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

body.app-ui th {
  color: var(--ui-muted);
  background: var(--ui-surface-muted);
  font-size: 13px;
  font-weight: 800;
}

body.app-ui tr:last-child td {
  border-bottom: 0;
}

body.app-ui th:first-child,
body.app-ui td:first-child {
  background: inherit;
}

body.app-ui .field {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-muted);
}

body.app-ui .empty {
  padding: 28px;
  border: 1px dashed var(--ui-line-strong);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-muted);
  text-align: center;
}

body.app-ui .count,
body.app-ui .status-active {
  color: var(--ui-success);
  font-weight: 800;
}

body.app-ui .status-disabled,
body.app-ui .status.error,
body.app-ui .result.error {
  color: var(--ui-danger);
  font-weight: 800;
}

body.app-ui .result.success {
  color: var(--ui-success);
  font-weight: 800;
}

body.app-ui .approved-badge,
body.app-ui .test-result.success {
  border: 1px solid var(--ui-success-border);
  background: var(--ui-success-soft);
  color: var(--ui-success);
}

body.app-ui .test-result,
body.app-ui .status-box {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
  font-weight: 700;
}

body.app-ui .test-result.error {
  border-color: var(--ui-danger-border);
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

body.app-ui dialog {
  width: min(440px, calc(100% - 32px));
  padding: 20px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-dialog-shadow);
}

body.app-ui dialog::backdrop {
  background: var(--ui-backdrop);
}

body.app-ui .chip {
  min-height: 34px;
  border-color: var(--ui-line);
  border-radius: 999px;
  background: var(--ui-surface);
}

body.app-ui .chip:hover {
  border-color: var(--ui-primary);
}

body.app-ui .orientation-control {
  position: fixed;
  top: calc(72px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  z-index: var(--ui-z-floating-control);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--ui-shadow-hover);
}

body.app-ui .orientation-control button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ui-primary);
  box-shadow: none;
}

body.app-ui .orientation-control button:hover {
  background: var(--ui-primary-soft);
  color: var(--ui-primary-hover);
}

body.app-ui .orientation-control button:active {
  transform: none;
}

body.app-ui .orientation-control button:disabled {
  background: transparent;
  opacity: 0.5;
}

body.app-ui .orientation-control svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

body.app-ui .orientation-control-status {
  position: fixed;
  top: calc(120px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  z-index: var(--ui-z-floating-control);
  max-width: min(280px, calc(100vw - 32px));
  padding: 9px 12px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-muted);
  box-shadow: var(--ui-shadow-hover);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease;
}

body.app-ui .orientation-control-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.app-ui .orientation-control-status.is-error {
  border-color: var(--ui-danger-border);
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

@media (max-width: 860px) {
  body.app-ui main {
    width: min(100% - 24px, 1320px);
    padding-top: 56px;
  }

  body.app-ui header {
    display: block;
  }

  body.app-ui .form,
  body.app-ui form {
    grid-template-columns: 1fr;
  }

  body.app-ui th,
  body.app-ui td {
    padding: 10px;
  }

  body.app-ui .orientation-control {
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
  }

  body.app-ui .orientation-control-status {
    top: calc(58px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
  }
}

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