/* LZDS 4.0 presentation layer. Existing routes, forms and controllers stay unchanged. */
:root {
  --app-bg: #fdfdfd;
  --app-panel: #f8fafc;
  --app-card: #ffffff;
  --app-ink: #172b4b;
  --app-muted: #475569;
  --app-line: #e2e8e0;
  --app-control-border: #7d8aa0;
  --app-accent: #2563eb;
  --app-accent-strong: #1d4ed8;
  --app-accent-soft: #eff6ff;
  --app-steel: #172b4b;
  --app-shadow: none;
  --app-radius: 12px;
  --app-radius-sm: 8px;
  --app-font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --app-font-display: var(--app-font-body);
}

body {
  color: var(--app-ink);
  background: var(--app-bg);
  font-family: var(--app-font-body);
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--app-ink); }
a:hover { color: #1e40af; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

/* The same links and permission checks are used in both responsive layouts. */
.app-header {
  background: var(--app-card);
  border-color: var(--app-line);
  box-shadow: none;
  backdrop-filter: none;
}

.app-header__inner { gap: 16px; }
.app-brand {
  color: var(--app-ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.app-brand:hover { color: var(--app-accent-strong); }
.app-nav { gap: 4px; }
.app-nav__link {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--app-ink);
  display: flex;
  font-size: 16px;
  gap: 12px;
  letter-spacing: 0;
  line-height: 24px;
  min-height: 40px;
  overflow-wrap: anywhere;
  padding: 8px 12px 8px 9px;
}
.app-nav__link:hover { background: #f8fafc; color: var(--app-accent-strong); }
.app-nav__link.is-active {
  background: var(--app-accent-soft);
  border-color: var(--app-accent);
  color: var(--app-accent-strong);
  font-weight: 700;
}
.app-nav__icon, .app-navigation-menu__toggle svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-navigation-menu { display: none; }
.app-user { color: var(--app-muted); font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.app-logout.btn { border-radius: 8px; font-size: 14px; min-height: 40px; }

@media (min-width: 1024px) {
  .app-brand, .app-user form { flex-shrink: 0; }
  .app-nav--desktop { flex: 0 0 auto; gap: 0; }
  .app-nav--desktop .app-nav__icon { display: none; }
  .app-nav--desktop .app-nav__link { font-size: 14px; padding: 8px 6px; white-space: nowrap; }
  .app-user .app-logout { white-space: nowrap; }
}

@media (max-width: 1023px) {
  .app-header { position: sticky; top: 0; z-index: 60; }
  .app-header__inner { align-items: center; flex-direction: row; flex-wrap: wrap; min-height: 60px; padding: 8px 16px; }
  .app-nav--desktop { display: none; }
  .app-navigation-menu { display: block; order: -1; }
  .app-navigation-menu__toggle {
    align-items: center;
    border: 1px solid var(--app-control-border);
    border-radius: 8px;
    color: var(--app-ink);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    gap: 8px;
    list-style: none;
    min-height: 44px;
    padding: 8px 12px;
  }
  .app-navigation-menu__toggle::-webkit-details-marker { display: none; }
  .app-navigation-menu[open] .app-navigation-menu__toggle { background: var(--app-accent-soft); color: var(--app-accent-strong); }
  .app-nav--mobile {
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: 0 0 12px 0;
    display: grid;
    left: 0;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    padding: 12px;
    position: absolute;
    top: 100%;
    width: min(300px, calc(100vw - 48px));
    z-index: 70;
  }
  .app-nav--mobile .app-nav__link { min-height: 44px; }
  .app-user { justify-content: flex-end; margin-left: auto; width: auto; }
}

@media (max-width: 520px) {
  .app-header__inner { gap: 8px; }
  .app-brand { font-size: 18px; }
  .app-user { flex: 1 1 100%; justify-content: space-between; }
}

/* Shared page structure and typography. */
.app-main { padding: 24px 0 40px; }
.app-container { padding: 0 24px; }
.app-workspace { gap: 16px; }
.app-workspace-card, .app-card, .app-card--soft, .app-card--highlight, .app-card--conversation,
.project-index-summary, .app-empty, .app-message, .project-settings__item {
  background: var(--app-card);
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  box-shadow: none;
  color: var(--app-ink);
}
.app-card, .app-workspace-card { padding: 16px; }
.app-card--highlight, .app-card--conversation { background: var(--app-card); }
.app-page, .app-card--animated, .workspace-recent-card { animation: none; }
.page-title { color: var(--app-ink); font-size: 24px; font-weight: 700; letter-spacing: 0; line-height: 32px; }
.page-subtitle { color: var(--app-muted); font-size: 16px; line-height: 24px; }
.app-kicker { color: var(--app-muted); font-size: 14px; letter-spacing: 0; line-height: 20px; }
.app-card__title, .app-workspace-card__title, .workspace-recent-card .app-workspace-card__title {
  color: var(--app-ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 28px;
}
.app-meta, .app-workspace-card__subtitle, .workspace-recent-card__hint,
.app-summary-meta, .app-summary-time, .project-settings__title, .issue-detail__label,
.issue-side-summary__label, .issue-side-meta__hint, .app-message__meta {
  color: var(--app-muted);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
}
.app-workspace-meta > div { background: var(--app-panel); border-color: var(--app-line); }
.app-workspace-meta dt { color: var(--app-muted); font-size: 14px; letter-spacing: 0; }
.app-workspace-meta dd { color: var(--app-ink); font-size: 14px; }
.app-workspace-nav__link, .app-list a { background: var(--app-card); border-color: var(--app-line); color: var(--app-ink); }
.app-workspace-nav__link:hover, .app-list a:hover { background: var(--app-accent-soft); border-color: var(--app-line); color: var(--app-accent-strong); }
.app-workspace-nav__link.is-active { background: var(--app-accent-soft); border-color: var(--app-accent); color: var(--app-accent-strong); }
.workspace-recent-card { box-shadow: none; }
.workspace-recent-card__badge { background: #f1f5f9; border-color: var(--app-line); color: var(--app-muted); font-size: 14px; }
.workspace-recent-card__list a, .workspace-recent-card__list a:hover {
  background: var(--app-panel);
  border-color: var(--app-line);
  box-shadow: none;
  transform: none;
}
.workspace-recent-card__list a::before,
.workspace-recent-card--projects .workspace-recent-card__list a::before,
.workspace-recent-card--issues .workspace-recent-card__list a::before,
.workspace-recent-card--line .workspace-recent-card__list a::before {
  background: transparent;
  border-bottom: 1px solid var(--app-accent);
  border-left: 2px solid var(--app-accent);
  border-radius: 9px 0 0 9px;
  border-top: 1px solid var(--app-accent);
  bottom: 0;
  /* 讓線條沿圓角收細，並柔和淡出上下端點。 */
  clip-path: polygon(0 0, 100% 0, 2px 9px, 2px calc(100% - 9px), 100% 100%, 0 100%);
  height: auto;
  -webkit-mask-image: linear-gradient(to right, #000 4px, transparent 10px);
  mask-image: linear-gradient(to right, #000 4px, transparent 10px);
  pointer-events: none;
  top: 0;
  width: 10px;
}
.workspace-recent-card__list a:focus-visible { border-color: var(--app-accent); box-shadow: none; outline: 2px solid var(--app-accent); outline-offset: 2px; }
.app-workspace-recent-link__title, .app-workspace-recent-link__meta {
  color: var(--app-ink);
  font-size: 14px;
  line-height: 20px;
  max-height: none;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.app-workspace-recent-link__meta { color: var(--app-muted); }
.issue-detail__summary-value, .issue-side-summary__title, .issue-side-summary__description,
.app-summary-title, .project-index-summary__compact strong { color: var(--app-ink); }
.app-inline-list li, .app-tag { background: #f1f5f9; color: var(--app-muted); font-size: 14px; }
.app-summary-item { background: var(--app-panel); }
.app-code-block { background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 8px; color: var(--app-ink); overflow-wrap: anywhere; padding: 12px; white-space: pre-wrap; }

@media (min-width: 1024px) and (max-width: 1600px) {
  body.app-shell--signed-in:not(.app-shell--engineering):not(.app-shell--issue-show) .app-workspace {
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  }
  body.app-shell--signed-in:not(.app-shell--engineering):not(.app-shell--issue-show) .app-workspace__side--right {
    grid-column: 2;
    position: static;
  }
  body.app-shell--signed-in:not(.app-shell--engineering):not(.app-shell--issue-show):is(.app-shell--projects-index, .app-shell--issues-index, .app-shell--list) .app-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  body.app-shell--signed-in:is(.app-shell--projects-index, .app-shell--issues-index, .app-shell--list) .app-workspace__main { grid-row: 1; }
  body.app-shell--signed-in:is(.app-shell--projects-index, .app-shell--issues-index, .app-shell--list) .app-workspace__side--left {
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: static;
  }
  body.app-shell--signed-in:not(.app-shell--engineering):not(.app-shell--issue-show):is(.app-shell--projects-index, .app-shell--issues-index, .app-shell--list) .app-workspace__side--right {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 1023px) {
  .app-workspace { display: flex; flex-direction: column; }
  .app-workspace__main, .app-workspace__side { width: 100%; }
  .app-workspace__main { order: 1; }
  .app-workspace__side--left { order: 2; position: static; }
  .app-workspace__side--right { order: 3; position: static; }
  body.app-shell--issue-show { height: auto; overflow: auto; }
  body.app-shell--issue-show .app-main, body.app-shell--issue-show .app-container { overflow: visible; }
  body.app-shell--issue-show .app-container, body.app-shell--issue-show .app-workspace,
  body.app-shell--issue-show .issue-page { height: auto; }
  .issue-ai-workbench { height: auto; }
  .ai-draft-conversation { min-height: 280px; }
  .issue-spec-discussion__messages { min-height: 180px; }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  body.app-shell--issue-show { height: auto; overflow: auto; }
  body.app-shell--issue-show .app-main, body.app-shell--issue-show .app-container { overflow: visible; }
  body.app-shell--issue-show .app-container, body.app-shell--issue-show .app-workspace,
  body.app-shell--issue-show .issue-page { height: auto; }
  body.app-shell--issue-show .app-workspace { display: flex; flex-direction: column; }
  body.app-shell--issue-show .app-workspace__main { order: 1; width: 100%; }
  body.app-shell--issue-show .app-workspace__side--left { order: 2; width: 100%; }
  body.app-shell--issue-show .app-workspace__side--right { order: 3; width: 100%; }
  body.app-shell--issue-show .issue-ai-workbench { height: auto; }
  body.app-shell--issue-show .ai-draft-conversation { min-height: 280px; }
  body.app-shell--issue-show .issue-spec-discussion__messages { min-height: 180px; }
}

@media (max-width: 767px) {
  .app-container { padding: 0 16px; }
  .app-main { padding: 16px 0 24px; }
}

/* Buttons, fields and tables share the same visible sizes and contrast. */
.form-label, label { color: var(--app-muted); font-size: 14px; font-weight: 500; }
.form-control, .form-select, textarea.form-control,
.line-messages-query .form-control, .codex-chat-composer .form-control,
.codex-chat-composer .form-select, .codex-chat-context .form-select,
body.app-shell--project-docs .project-docs__search .form-control,
body.app-shell--project-docs .project-docs__form .form-control,
.ew-page .form-control, .ew-page .form-select {
  background-color: var(--app-card);
  border: 1px solid var(--app-control-border);
  border-radius: 8px;
  color: var(--app-ink);
  font-size: 16px;
  line-height: 24px;
  min-height: 40px;
  padding: 7px 12px;
}
.form-select { padding-right: 36px; }
.form-control::placeholder, .ew-page .form-control::placeholder { color: #5f6c80; opacity: 1; }
.form-control:focus, .form-select:focus, textarea.form-control:focus,
.ai-draft-composer .form-control:focus, .ai-draft-composer .form-select:focus,
.ai-draft-composer textarea.form-control:focus,
.issue-spec-discussion__composer .form-control:focus,
.codex-chat-composer .form-control:focus, .codex-chat-composer .form-select:focus,
.codex-chat-composer textarea.form-control:focus,
.ew-page .form-control:focus, .ew-page .form-select:focus {
  background-color: var(--app-card);
  border-color: var(--app-accent);
  box-shadow: none;
  color: var(--app-ink);
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background: #f1f5f9; color: var(--app-muted); }
.btn, .btn-sm, .project-index-table__actions .btn, .ew-list-actions .btn {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-size: 16px;
  font-weight: 500;
  justify-content: center;
  letter-spacing: 0;
  line-height: 24px;
  min-height: 40px;
  padding: 7px 16px;
  text-decoration: none;
  white-space: normal;
}
.btn-primary, .btn-primary:focus { background: var(--app-accent); border-color: var(--app-accent); box-shadow: none; color: #fff; }
.btn-primary:hover, .btn-primary:active { background: var(--app-accent-strong); border-color: var(--app-accent-strong); color: #fff; transform: none; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-light {
  background: var(--app-card);
  border-color: var(--app-control-border);
  color: var(--app-ink);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-light:hover {
  background: var(--app-accent-soft);
  border-color: var(--app-accent);
  color: var(--app-accent-strong);
}
.btn-outline-danger { border-color: #b91c1c; color: #b91c1c; }
.btn:disabled, .btn.disabled { background: #f1f5f9; border-color: var(--app-line); color: #5f6c80; opacity: 1; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.table {
  --bs-table-bg: #fff;
  --bs-table-color: var(--app-ink);
  --bs-table-border-color: var(--app-line);
  --bs-table-hover-bg: #f8fafc;
  --bs-table-hover-color: var(--app-ink);
  color: var(--app-ink);
  font-size: 14px;
}
.table thead th, .project-index-table thead th {
  background: var(--app-panel);
  border-color: var(--app-line);
  color: var(--app-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 20px;
  padding: 12px 16px;
  text-transform: none;
}
.table tbody td { border-color: var(--app-line); color: var(--app-ink); min-height: 44px; padding: 10px 16px; vertical-align: middle; }
.table-responsive { max-width: 100%; overflow-x: auto; }
.project-index-summary__compact { color: var(--app-muted); font-size: 14px; }
.project-index-table__name-link, .project-index-table__identifier, .project-index-table__branch,
.project-index-table__commit-message {
  color: var(--app-ink);
  max-width: none;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.project-index-table__name-link { color: var(--app-ink); font-weight: 700; }
.project-index-table__identifier, .project-index-table__branch { background: #f1f5f9; border-color: var(--app-line); font-size: 14px; }
.project-index-table__commit-meta { color: var(--app-muted); font-size: 14px; }
.project-index-table { min-width: 900px; }
.project-index-table td:nth-child(2) { min-width: 150px; }
.project-index-table td:nth-child(3) { min-width: 120px; }
.issue-status--open { background-color: #eff6ff; border-color: #2563eb; color: #1d4ed8; }
.issue-status--pending { background-color: #fffbeb; border-color: #92400e; color: #92400e; }
.issue-status--solved { background-color: #f0fdf4; border-color: #166534; color: #166534; }
.issue-status--archived { background-color: #f1f5f9; border-color: #7d8aa0; color: #475569; }
.issue-status-badge {
  --status-background: #f1f5f9;
  --status-border: #7d8aa0;
  align-items: center;
  background: transparent;
  border: 0;
  display: inline-flex;
  isolation: isolate;
  position: relative;
}
.issue-status-badge.issue-status--open { --status-background: #eff6ff; --status-border: #2563eb; color: #1d4ed8; }
.issue-status-badge.issue-status--pending { --status-background: #fffbeb; --status-border: #92400e; color: #92400e; }
.issue-status-badge.issue-status--solved { --status-background: #f0fdf4; --status-border: #166534; color: #166534; }
.issue-status-badge.issue-status--archived { --status-background: #f1f5f9; --status-border: #7d8aa0; color: #475569; }
.issue-status-badge::before {
  background: var(--status-background);
  border: 1px solid var(--status-border);
  border-radius: 999px;
  content: "";
  height: 28px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}
.issue-status-badge::after {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 10px;
  pointer-events: none;
  position: absolute;
  width: 7px;
  z-index: 2;
}
.issue-status-badge .issue-status-select {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 7px;
  border: 0;
  border-radius: 999px;
  color: inherit;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 20px;
  min-height: 40px;
  min-width: 0;
  padding: 8px 26px 8px 23px;
  position: relative;
  width: auto;
  z-index: 1;
}
.issue-side-meta .issue-status-form { width: auto; }
.issue-status-select:focus { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.app-alert--notice { background: #f0fdf4; border-color: #166534; color: #166534; }
.app-alert--danger { background: #fef2f2; border-color: #b91c1c; color: #b91c1c; }

@media (pointer: coarse), (max-width: 767px) {
  .btn, .btn-sm, .project-index-table__actions .btn, .ew-list-actions .btn,
  .form-control, .form-select, .issue-status-select, .issue-status-badge .issue-status-select { min-height: 44px; }
}
@media (max-width: 767px) {
  .issue-form__actions .btn { padding-left: 7px; padding-right: 7px; }
}

.app-form--rows, .project-settings-form, .project-settings-basic-fields { container-type: inline-size; }
.app-form--rows .app-form__grid, .project-settings-form .app-form__grid { grid-template-columns: minmax(0, 1fr); }
.app-form--rows > div:has(> label),
.app-form--rows .app-form__grid > div:has(> label),
.project-settings-form .app-form__grid > div:has(> label.form-label),
.project-settings-form .mcp-settings-stage > div.mt-3:has(> label.form-label) {
  align-items: start;
  border-bottom: 1px solid var(--app-line);
  column-gap: 16px;
  display: grid;
  grid-template-columns: minmax(96px, 168px) minmax(0, 1fr);
  padding: 4px 0 8px;
}
.app-form--rows > div > label, .app-form--rows .app-form__grid > div > label,
.project-settings-form .app-form__grid > div > label.form-label,
.project-settings-form .mcp-settings-stage > div.mt-3 > label.form-label { margin: 8px 0 0; }
.app-form--rows > div > :is(p, .form-text), .app-form--rows .app-form__grid > div > :is(p, .form-text),
.project-settings-form .app-form__grid > div:has(> label.form-label) > :not(label):not(input):not(select):not(textarea),
.project-settings-form .mcp-settings-stage > div.mt-3:has(> label.form-label) > :not(label):not(input):not(select):not(textarea) { grid-column: 2; margin-top: 4px; }

.mcp-settings-stage, .mcp-settings-stage--search {
  background: var(--app-panel);
  border-color: var(--app-line);
  border-left-color: var(--app-accent);
}
.mcp-settings-stage__step, .mcp-settings-stage--search .mcp-settings-stage__step {
  color: var(--app-accent-strong);
  font-size: 14px;
  letter-spacing: 0;
}
.mcp-settings-stage__title { color: var(--app-ink); letter-spacing: 0; }
.project-settings-savebar { box-shadow: none; }

@container (max-width: 559px) {
  .app-form--rows > div:has(> label), .app-form--rows .app-form__grid > div:has(> label),
  .project-settings-form .app-form__grid > div:has(> label.form-label),
  .project-settings-form .mcp-settings-stage > div.mt-3:has(> label.form-label) { border-bottom: 0; gap: 4px; grid-template-columns: minmax(0, 1fr); }
  .app-form--rows > div > label, .app-form--rows .app-form__grid > div > label,
  .project-settings-form .app-form__grid > div > label.form-label,
  .project-settings-form .mcp-settings-stage > div.mt-3 > label.form-label { margin-top: 0; }
  .app-form--rows > div > :is(p, .form-text), .app-form--rows .app-form__grid > div > :is(p, .form-text),
  .project-settings-form .app-form__grid > div:has(> label.form-label) > :not(label):not(input):not(select):not(textarea),
  .project-settings-form .mcp-settings-stage > div.mt-3:has(> label.form-label) > :not(label):not(input):not(select):not(textarea) { grid-column: 1; }
}
@media (max-width: 767px) {
  .app-form--rows > div:has(> label), .app-form--rows .app-form__grid > div:has(> label),
  .project-settings-form .app-form__grid > div:has(> label.form-label),
  .project-settings-form .mcp-settings-stage > div.mt-3:has(> label.form-label) { border-bottom: 0; gap: 4px; grid-template-columns: minmax(0, 1fr); }
  .app-form--rows > div > label, .app-form--rows .app-form__grid > div > label,
  .project-settings-form .app-form__grid > div > label.form-label,
  .project-settings-form .mcp-settings-stage > div.mt-3 > label.form-label { margin-top: 0; }
  .app-form--rows > div > :is(p, .form-text), .app-form--rows .app-form__grid > div > :is(p, .form-text),
  .project-settings-form .app-form__grid > div:has(> label.form-label) > :not(label):not(input):not(select):not(textarea),
  .project-settings-form .mcp-settings-stage > div.mt-3:has(> label.form-label) > :not(label):not(input):not(select):not(textarea) { grid-column: 1; }
}
.app-form--rows > .mt-4 { margin-top: 0 !important; }
.app-form--rows > div:has(> input[type="checkbox"]) { align-items: center; display: flex; gap: 8px; }
.app-form--rows > div:has(> input[type="checkbox"]) > label { margin: 0; }
.app-form--rows > div > input[type="checkbox"] { flex: 0 0 auto; height: 18px; width: 18px; }

/* Mobile cards retain the original table rows, controls and sorting headers. */
@media (max-width: 767px) {
  .app-table--cards, .app-table--cards thead, .app-table--cards tbody,
  .app-table--cards tr, .app-table--cards th, .app-table--cards td { display: block; width: 100%; }
  .app-table--cards { min-width: 0; }
  .app-table--cards thead { display: none !important; }
  .project-index-table thead { display: block !important; }
  .project-index-table thead::before { color: var(--app-muted); content: "排序欄位"; display: block; font-size: 14px; font-weight: 700; padding: 8px 8px 0; }
  .project-index-table thead tr { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
  .project-index-table thead th { flex: 0 1 auto; width: auto; padding: 6px 8px; }
  .app-table--cards tbody { display: grid; gap: 12px; }
  .app-table--cards tbody tr { border: 1px solid var(--app-line); border-radius: 8px; overflow: hidden; }
  .app-table--cards tbody td {
    align-items: start;
    border: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(76px, 96px) minmax(0, 1fr);
    max-width: none;
    min-height: 0;
    min-width: 0 !important;
    overflow-wrap: anywhere;
    padding: 8px 12px;
  }
  .app-table--cards tbody td + td { border-top: 1px solid var(--app-line); }
  .app-table--cards tbody td::before { color: var(--app-muted); content: attr(data-label); font-size: 14px; font-weight: 500; }
  .app-table--cards .project-index-table__actions { min-width: 0; }
  .app-table--cards .project-index-table__commit-message,
  .app-table--cards .project-index-table__commit-meta { grid-column: 2; }
  .app-table--cards .project-index-table__commit-message { grid-row: 1; }
}

/* Issue conversation and discussion. */
.issue-ai-workbench, .ai-draft-conversation, .issue-spec-discussion__messages, .issue-spec-handoff {
  background: var(--app-card);
  border-color: var(--app-line);
  box-shadow: none;
  color: var(--app-ink);
}
.issue-ai-workbench__title, .issue-spec-discussion__title, .issue-spec-handoffs__title,
.ai-draft__content, .issue-spec-message__content, .issue-spec-handoff__content { color: var(--app-ink); }
.issue-ai-workbench__meta, .ai-draft__meta, .ai-draft__bubble-label, .ai-draft-composer__template-label,
.issue-spec-discussion__hint, .issue-spec-message__meta, .issue-spec-handoff__meta { color: var(--app-muted); font-size: 14px; }
.ai-draft-composer__template-label { white-space: nowrap; }
.issue-workbench__tab { background: var(--app-card); border-color: var(--app-control-border); border-radius: 8px; color: var(--app-ink); font-size: 14px; min-height: 40px; }
.issue-workbench__tab.is-active { background: var(--app-accent-soft); border-color: var(--app-accent); color: var(--app-accent-strong); }
.ai-draft__bubble--user, .issue-spec-message--user .issue-spec-message__content { background: #eff6ff; border-color: #bfdbfe; }
.ai-draft__bubble--ai, .issue-spec-message--assistant .issue-spec-message__content { background: #f8fafc; border-color: var(--app-line); }
.issue-spec-message--system .issue-spec-message__content { background: #f1f5f9; border-color: var(--app-line); }
.ai-draft__status { background: #f1f5f9; border-color: var(--app-line); color: var(--app-muted); font-size: 14px; }
.ai-draft__status--succeeded { background: #f0fdf4; border-color: #166534; color: #166534; }
.ai-draft__status--queued { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; }
.ai-draft__status--failed { background: #fef2f2; border-color: #b91c1c; color: #b91c1c; }

/* Project document viewer and LINE conversation. */
body.app-shell--project-docs .project-docs__sidebar,
body.app-shell--project-docs .project-docs__content,
body.app-shell--project-docs .project-docs__context,
.line-messages-query, .line-messages-panel {
  background: var(--app-card);
  border-color: var(--app-line);
  box-shadow: none;
  color: var(--app-ink);
}
body.app-shell--project-docs .project-docs__section-title,
body.app-shell--project-docs .project-docs__file,
body.app-shell--project-docs .project-docs__empty-title,
body.app-shell--project-docs .docs-tree__summary,
.line-messages-panel__title, .line-messages-conversation-item__name, .line-messages-item__name { color: var(--app-ink); }
body.app-shell--project-docs .project-docs__tree-title,
body.app-shell--project-docs .project-docs__updated,
body.app-shell--project-docs .project-docs__empty,
body.app-shell--project-docs .app-meta,
body.app-shell--project-docs .docs-tree__meta,
.line-messages-query label, .line-messages-query__hint, .line-messages-panel__meta,
.line-messages-empty, .line-messages-conversation-item__time, .line-messages-conversation-item__preview,
.line-messages-feedback, .line-messages-item__meta, .line-messages-item__placeholder { color: var(--app-muted); font-size: 14px; }
body.app-shell--project-docs .docs-tree__dir { background: var(--app-panel); border-color: var(--app-line); }
body.app-shell--project-docs .project-docs__search-row .form-control { min-width: 0; }
body.app-shell--project-docs .project-docs__search-button { flex-shrink: 0; white-space: nowrap; }
body.app-shell--project-docs .project-docs__badge { background: #f1f5f9; color: var(--app-muted); }
body.app-shell--project-docs .project-docs__badge--warn,
body.app-shell--project-docs .project-docs__empty--warn { background: #fef2f2; border-color: #b91c1c; color: #b91c1c; }
body.app-shell--project-docs .docs-tree__link { color: var(--app-ink); }
body.app-shell--project-docs .docs-tree__link:hover,
body.app-shell--project-docs .docs-tree__link--active { background: var(--app-accent-soft); color: var(--app-accent-strong); }
body.app-shell--project-docs .project-docs__preview,
.line-messages-message-panel, .line-messages-message-panel__scroll { background: var(--app-panel); border-color: var(--app-line); color: var(--app-ink); }
@media (max-width: 1080px) {
  body.app-shell--project-docs .project-docs__context { grid-column: auto; max-height: none; }
  body.app-shell--project-docs .project-docs__sidebar { height: auto; max-height: none; }
  body.app-shell--project-docs .project-docs__layout > * { min-width: 0; }
  .line-messages-panel--context { grid-column: auto; max-height: none; }
  .line-messages-workspace > * { min-width: 0; }
}
.line-messages-conversation-item { background: var(--app-card); border-color: var(--app-line); }
.line-messages-conversation-item:hover, .line-messages-conversation-item.is-active { background: var(--app-accent-soft); border-color: var(--app-accent); }
.line-messages-conversation-item__name, .line-messages-conversation-item__preview { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.line-messages-conversation-item__avatar--fallback, .line-messages-item__avatar--fallback { background: #e2e8f0; color: var(--app-ink); }
.line-messages-item__bubble { background: var(--app-card); border-color: var(--app-line); color: var(--app-ink); font-size: 16px; }
.line-messages-item__badge { background: #f0fdf4; border-color: #166534; color: #166534; font-size: 14px; }
.line-messages-item__file-link { color: var(--app-accent-strong); }
.line-messages-feedback--error { color: #b91c1c; }

/* Engineering workspace and development chat retain their existing controls. */
.ew-page { --ew-muted: #475569; --ew-border: #e2e8e0; color: var(--app-ink); }
.ew-page .form-label { font-size: 14px; }
.ew-page h1 { font-size: 24px; line-height: 32px; }
.ew-page h2 { font-size: 20px; line-height: 28px; }
.ew-page a:not(.btn) { color: var(--app-ink); }
.ew-page a:not(.btn):hover, .ew-page code, .ew-code { color: var(--app-accent-strong); }
.ew-eyebrow, .ew-note, .ew-description, .ew-meta, .ew-id, .ew-list-table small { color: var(--app-muted); font-size: 14px; }
.ew-panel, .ew-metrics, .ew-workspace, .ew-list-table { background: var(--app-card); border-color: var(--app-line); box-shadow: none; }
.ew-panel { padding: 16px; }
.ew-metrics > div { border-color: var(--app-line); }
.ew-list-table { color: var(--app-ink); font-size: 14px; }
.ew-list-table th { background: var(--app-panel); color: var(--app-muted); font-size: 14px; font-weight: 700; }
.ew-list-table tr:hover td { background: var(--app-panel); }
.ew-task-title { color: var(--app-ink) !important; }
.ew-task-title:hover { color: var(--app-accent-strong) !important; }
.ew-task-title, .ew-list-identity > span, .ew-list-identity .ew-id, .ew-list-owner > span { max-width: none; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.ew-list-identity { color: var(--app-muted); font-size: 14px; flex-wrap: wrap; }
.ew-badge { font-size: 14px; white-space: normal; }
.ew-badge--success { background: #f0fdf4; border-color: #166534; color: #166534; }
.ew-badge--warning { background: #fffbeb; border-color: #92400e; color: #92400e; }
.ew-badge--danger { background: #fef2f2; border-color: #b91c1c; color: #b91c1c; }
.ew-badge--neutral { background: #f1f5f9; border-color: #7d8aa0; color: #475569; }
.ew-notice { background: #fffbeb; border-color: #92400e; color: #92400e; }
.ew-disclosure summary, .ew-step { color: var(--app-accent-strong); }
.ew-storage-breakdown > div { background: var(--app-panel); border-color: var(--app-line); }
.ew-table { --bs-table-color: var(--app-ink); --bs-table-border-color: var(--app-line); }
.ew-tabs a[aria-selected="true"] { background: var(--app-accent-soft); border-color: var(--app-accent); color: var(--app-accent-strong); }
.ew-tabs a:focus-visible { outline-color: var(--app-accent); }
.ew-operation-error { color: #b91c1c; }
.issue-status:not(select), .ai-draft__status, .line-messages-item__badge, .ew-badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
  line-height: 20px;
  padding: 2px 8px;
}
.issue-status:not(select)::before, .ai-draft__status::before, .line-messages-item__badge::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  flex: 0 0 7px;
  height: 7px;
  width: 7px;
}
@media (min-width: 601px) and (max-width: 767px) {
  .ew-list-table, .ew-list-table tbody { display: block; }
  .ew-list-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ew-list-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 10px; border-top: 1px solid var(--ew-border); }
  .ew-list-table tr:first-child { border-top: 0; }
  .ew-list-table td { display: block; min-width: 0; border: 0; padding: 5px; }
  .ew-list-table .ew-list-task { grid-column: 1 / -1; }
  .ew-list-table .ew-list-state, .ew-list-table .ew-list-actions { text-align: right; }
  .ew-list-table .ew-list-actions { align-self: center; }
}
.codex-chat-sidebar, .codex-chat-main, .codex-chat-context, .codex-chat-messages,
.codex-chat-nav-item, .codex-chat-context__details > div {
  background: var(--app-card);
  border-color: var(--app-line);
  box-shadow: none;
  color: var(--app-ink);
}
.codex-chat-section__title { color: var(--app-ink); font-size: 20px; letter-spacing: 0; }
.codex-chat-project, .codex-chat-filters { background: var(--app-panel); border-color: var(--app-line); color: var(--app-ink); }
.codex-chat-filters__item { color: var(--app-muted); font-size: 14px; }
.codex-chat-project, .codex-chat-nav-item, .codex-chat-nav-action { color: var(--app-ink); }
.codex-chat-project:hover, .codex-chat-nav-item:hover { background: var(--app-accent-soft); border-color: var(--app-accent); color: var(--app-accent-strong); }
.codex-chat-project.is-active, .codex-chat-nav-item.is-active { background: var(--app-accent-soft); border-color: var(--app-accent); color: var(--app-accent-strong); }
.codex-chat-main__title, .codex-chat-context__title, .codex-chat-context__details dd,
.codex-chat-message, .codex-chat-pending-request__option { color: var(--app-ink); }
.codex-chat-main__meta, .codex-chat-context__details dt, .codex-chat-nav-item__meta,
.codex-chat-nav-item__path, .codex-chat-message__meta, .codex-chat-composer__hint,
.codex-chat-main .codex-chat-empty-main, .codex-chat-main .codex-chat-empty { color: var(--app-muted); font-size: 14px; }
.codex-chat-message--user { background: #eff6ff; }
.codex-chat-message--assistant, .codex-chat-message--system { background: var(--app-panel); }
.codex-chat-message__mode, .codex-chat-nav-item__source { border-color: var(--app-control-border); color: var(--app-muted); font-size: 14px; letter-spacing: 0; }
.codex-chat-nav-item__source--shared { background: #f0fdf4; border-color: #166534; color: #166534; }
.codex-chat-nav-item__source--web { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; }
.codex-chat-nav-item__path { max-width: none; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.codex-chat-pending-request { background: #fffbeb; border-color: #92400e; }
.codex-chat-pending-request__title, .codex-chat-pending-request__summary { color: #92400e; }
.codex-chat-composer .form-label, .codex-chat-context .form-label { color: var(--app-muted); }
.codex-chat-context__details > div { background: var(--app-panel); }

/* The terminal's rendered text keeps its existing high-contrast dark surface. */
body.app-shell--dev-terminal { background: var(--app-bg); }
.dev-terminal__card { background: var(--app-card); border-color: var(--app-line); }
.dev-terminal__controls, .dev-terminal__tmux-panel { background: var(--app-panel); border-color: var(--app-line); }
.dev-terminal__button { background: var(--app-card); border-color: var(--app-control-border); color: var(--app-ink); }
.dev-terminal__button--modifier.is-active { background: var(--app-accent-soft); border-color: var(--app-accent); color: var(--app-accent-strong); }
.dev-terminal__tmux-title { color: var(--app-muted); font-size: 14px; }
@media (max-width: 767px) {
  .dev-terminal__toolbar { overflow-x: auto; }
  .dev-terminal__toolbar-row, .dev-terminal__toolbar-row--arrows {
    grid-template-columns: repeat(10, minmax(44px, 1fr));
    min-width: 476px;
  }
  .dev-terminal__button { height: 44px; min-height: 44px; padding: 4px 2px; letter-spacing: 0; }
}

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