:root {
  color-scheme: light;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-soft: #f7f9fb;
  --surface-muted: #e7edf3;
  --surface-hover: #eef4fa;
  --field-bg: #ffffff;
  --button-bg: #ffffff;
  --line: #cbd5df;
  --line-soft: #dde5ee;
  --text: #1f2937;
  --muted: #64748b;
  --blue: #2f6f9f;
  --green: #16805a;
  --red: #c2413b;
  --primary: #2f6f9f;
  --primary-soft: #e1eff8;
  --accent: #c56a1a;
  --accent-soft: #ffedd5;
  --accent-strong: #ea580c;
  --ink: #172033;
  --warn: #d97706;
  --panel: #ffffff;
  --panel-soft: #f7f9fb;
  --warning-bg: #ffedd5;
  --warning-text: #9a3412;
  --info-bg: #e1eff8;
  --info-text: #245f89;
  --success-bg: #e2f5ec;
  --success-text: #126346;
  --danger-bg: #fee2e2;
  --danger-text: #b91c1c;
  --shadow: 0 10px 24px rgba(31, 41, 55, 0.09);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", Meiryo, sans-serif;
}

.codex-answer-feedback-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.codex-answer-feedback-grid label {
  display: grid;
  gap: 5px;
  font-weight: 700;
}

.codex-answer-feedback-grid select,
.codex-answer-feedback-grid textarea {
  width: 100%;
}

.line-form-settings-form {
  gap: 14px;
}

.line-form-source-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
}

.line-form-source-panel > div {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.line-form-source-panel strong {
  color: var(--text);
  font-size: 13px;
}

.line-form-source-panel span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.line-form-source-actions {
  min-width: 140px;
}

.settings-folder-list {
  display: grid;
  gap: 10px;
}

.settings-folder {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  overflow: hidden;
}

.settings-folder > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  background: #f8fbff;
}

.settings-folder > summary::-webkit-details-marker {
  display: none;
}

.settings-folder > summary::before {
  content: ">";
  color: var(--muted);
  font-weight: 900;
  transform: rotate(0deg);
  transition: transform 0.15s ease;
}

.settings-folder[open] > summary::before {
  transform: rotate(90deg);
}

.settings-folder-title {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.settings-folder-meta {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
}

.settings-folder-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line-soft);
  padding: 10px;
}

.settings-folder.is-add-folder {
  border-style: dashed;
  background: #f8fafc;
}

.line-form-folder-editor {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 254, 250, 0.72);
  padding: 10px;
}

.line-product-parent-folder > .settings-folder-body {
  background: rgba(232, 238, 235, 0.34);
}

.line-product-child-folder-list {
  margin-left: 14px;
}

.line-product-child-folder {
  background: var(--surface);
}

.line-form-setting-row,
.line-form-faq-row {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.line-form-setting-row {
  grid-template-columns: minmax(180px, 1.1fr) minmax(180px, 1fr) auto;
  align-items: end;
}

.line-form-setting-row.is-product-row {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.line-form-setting-row.is-new-product-row {
  grid-template-columns: minmax(160px, 0.9fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
}

.line-form-faq-fields {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(180px, 1fr);
  gap: 10px;
}

.line-form-solution-field {
  width: 100%;
}

.line-form-media-editor {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 9px;
}

.line-form-media-editor > strong {
  color: var(--text);
  font-size: 13px;
}

.line-form-media-list {
  display: grid;
  gap: 6px;
}

.line-form-media-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface);
  padding: 6px 8px;
}

.line-form-media-item a,
.line-form-media-item > span {
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.line-form-media-upload {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.line-form-setting-row input,
.line-form-faq-row input,
.line-form-faq-row textarea {
  width: 100%;
}

.line-form-faq-row textarea {
  resize: vertical;
}

.line-form-delete-check,
.line-form-template-note {
  align-self: center;
  justify-self: start;
}

.line-form-settings-table input,
.line-form-settings-table textarea {
  width: 100%;
  min-width: 180px;
}

.line-form-settings-table textarea {
  resize: vertical;
}

.line-form-row-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: -4px;
}

.line-form-definition-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.line-form-definition-preview section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
}

.line-form-definition-preview h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.line-form-definition-preview ul {
  margin: 0;
  padding-left: 18px;
}

.line-form-definition-preview li + li {
  margin-top: 8px;
}

.line-form-definition-preview small {
  display: block;
  color: var(--muted);
}

.line-form-preview-grid {
  display: grid;
  grid-template-columns: minmax(300px, 440px) minmax(260px, 1fr);
  gap: 18px;
  align-items: start;
}

.line-form-preview-standalone {
  min-height: 100vh;
  margin: 0;
  background: #e7f0ee;
}

.line-form-preview-standalone,
.line-form-preview-standalone * {
  box-sizing: border-box;
}

.line-form-preview-standalone-main {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 18px;
}

.line-form-preview-page.customer-only {
  width: min(100%, 460px);
  max-width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.line-form-preview-page.customer-only .panel-head,
.line-form-preview-page.customer-only .setting-help {
  padding: 0 4px;
}

.line-form-preview-page.customer-only .line-form-preview-grid {
  display: block;
}

.line-form-preview-page.customer-only .line-form-preview-phone {
  border: 0;
  box-shadow: none;
  padding: 0;
}

.line-form-preview-page.customer-only .line-form-preview-screen {
  min-height: 620px;
  border-radius: 18px;
}

.line-form-preview-phone {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #e7f0ee;
  padding: 18px;
  box-shadow: var(--shadow);
}

.line-form-preview-screen {
  width: 100%;
  min-height: 560px;
  border-radius: 14px;
  background: #8ba9cf;
  padding: 18px;
  display: flex;
  align-items: flex-start;
  overflow-x: hidden;
}

.line-form-preview-bubble {
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  background: #fff;
  color: #17212b;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(20, 35, 50, 0.12);
  overflow-wrap: anywhere;
}

.line-form-preview-step {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef5ff;
  color: #2f6fda;
  font-size: 12px;
  font-weight: 700;
}

.line-form-preview-bubble h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.line-form-preview-bubble p {
  margin: 0 0 12px;
  color: #4b5563;
  font-size: 13px;
}

.line-form-preview-options {
  display: grid;
  gap: 8px;
}

.line-form-option-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  background: #f8fbff;
  color: #17212b;
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}

.line-form-option-button.primary {
  background: #26c755;
  border-color: #26c755;
  color: #fff;
  text-align: center;
}

.line-form-option-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.line-form-preview-input,
.line-form-preview-textarea {
  width: 100%;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  background: #fff;
  color: #17212b;
  padding: 10px 12px;
  font: inherit;
}

.line-form-preview-textarea {
  resize: vertical;
}

.line-form-solution-list {
  margin: 0;
  padding-left: 18px;
  color: #17212b;
}

.line-form-solution-source,
.line-form-solution-note {
  border-radius: 8px;
  background: #f1f7fb;
  color: #335067;
  padding: 9px 10px;
  font-size: 13px;
}

.line-form-solution-list li + li {
  margin-top: 6px;
}

.line-form-preview-summary {
  border-radius: 8px;
  background: #f3fbf6;
  color: #1d6b45;
  padding: 12px;
}

.line-form-preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.line-form-answer-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 16px;
}

.line-form-answer-preview h2 {
  margin-top: 0;
}

.line-form-answer-preview dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px 12px;
  margin: 0;
}

.line-form-answer-preview dt {
  color: var(--muted);
  font-weight: 700;
}

.line-form-answer-preview dd {
  margin: 0;
  word-break: break-word;
}

@media (max-width: 900px) {
  .line-form-preview-grid {
    grid-template-columns: 1fr;
  }

  .line-form-preview-screen {
    min-height: 420px;
  }

  .line-form-answer-preview dl {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .line-form-preview-standalone-main {
    padding: 10px;
  }

  .line-form-preview-page.customer-only .panel-head {
    display: grid;
    gap: 8px;
  }

  .line-form-preview-page.customer-only .line-form-preview-screen {
    min-height: 560px;
    padding: 14px;
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111827;
  --surface: #1f2937;
  --surface-soft: #263244;
  --surface-muted: #334155;
  --surface-hover: #314058;
  --field-bg: #111827;
  --button-bg: #263244;
  --line: #4b5d73;
  --line-soft: #3b4d63;
  --text: #f8fafc;
  --muted: #cbd5e1;
  --blue: #60a5fa;
  --green: #4ade80;
  --red: #f87171;
  --primary: #60a5fa;
  --primary-soft: #1e3a5f;
  --accent: #fb923c;
  --accent-soft: #4a2a16;
  --accent-strong: #fdba74;
  --ink: #f8fafc;
  --warn: #fbbf24;
  --panel: #1f2937;
  --panel-soft: #263244;
  --warning-bg: #4a2a16;
  --warning-text: #fdba74;
  --info-bg: #1e3a5f;
  --info-text: #bfdbfe;
  --success-bg: #16351f;
  --success-text: #bbf7d0;
  --danger-bg: #4c1d1d;
  --danger-text: #fecaca;
  --shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

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

button, .primary {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--text);
  padding: 0 12px;
  cursor: pointer;
}

button:disabled { opacity: .45; cursor: not-allowed; }

.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fffefa;
  font-weight: 700;
}

.line-form-option-button,
.line-form-option-button.primary {
  min-height: 44px;
  border-radius: 8px;
  padding: 10px 12px;
}

.demo-login {
  display: inline-flex;
  align-items: center;
}

.full { width: 100%; }

.plain {
  display: grid;
  place-items: center;
  padding: 32px;
}

.setup-box, .auth-card {
  width: min(560px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 28px;
}

.setup-box code {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 5px;
}

.demo-note {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--info-bg);
  color: var(--info-text);
  padding: 10px 12px;
}

.demo-note code {
  color: inherit;
  font-weight: 800;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topbar {
  min-width: 0;
  min-height: 56px;
  display: grid;
  grid-template-columns: 240px minmax(220px, 1fr) minmax(0, auto);
  gap: 12px;
  align-items: center;
  background: #2563eb;
  border-bottom: 1px solid #1d4ed8;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
  padding: 8px 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  color: #f8fbfc;
}

.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 12px;
}

.search-form {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-form input {
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: #14212b;
  padding: 0 12px;
}

.search-detail-button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}

.topnav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: rgba(248, 251, 252, 0.86);
}

.topnav > a,
.topnav > form,
.theme-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

.topnav .nav-secondary {
  color: rgba(248, 251, 252, 0.74);
}

.topnav .nav-alert {
  color: #ffe1e1;
  font-weight: 800;
}

.theme-toggle {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-color: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.theme-toggle-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.23);
}

.demo-switch-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--info-bg);
}

.demo-switch-form label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--info-text);
  font-weight: 700;
}

.demo-switch-form select {
  height: 30px;
  min-width: 130px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--field-bg);
}

.demo-switch-form button {
  height: 30px;
  padding: 0 10px;
}

.nav-with-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-badge {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 0 6px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: #16324a;
  font-weight: 800;
}

.main {
  min-width: 1100px;
  padding: 16px;
}

.reply-window-page .app-shell {
  grid-template-rows: 1fr;
}

.reply-window-page .topbar {
  display: none;
}

.reply-window-page .main {
  min-width: 0;
  padding: 16px;
}

.flash {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 10px 12px;
}

.flash.success {
  border-color: var(--line);
  background: var(--success-bg);
  color: var(--success-text);
}

.flash.error {
  border-color: var(--line);
  background: #fff1f2;
  color: var(--red);
}

.flash.info {
  border-color: var(--line);
  background: var(--info-bg);
  color: var(--info-text);
}

.layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 16px;
}

.sidebar {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  min-height: calc(100vh - 88px);
  box-shadow: var(--shadow);
}

.sidebar h3 {
  margin: 18px 0 8px;
  color: #1f5fbf;
  font-size: 13px;
  letter-spacing: 0;
}

.side-link, .side-muted {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--text);
  font-weight: 700;
}

.side-link { justify-content: flex-start; }
.side-link > .side-count { margin-left: auto; }
.side-link:hover { background: var(--surface-hover); }

.assignee-product-sidebar {
  display: grid;
  align-content: start;
  gap: 8px;
}

.sidebar-folder-list {
  display: grid;
  gap: 8px;
}

.sidebar-folder {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.sidebar-folder summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  cursor: pointer;
  color: #18324a;
  font-weight: 800;
  list-style: none;
}

.sidebar-folder summary::-webkit-details-marker {
  display: none;
}

.sidebar-folder summary::before {
  content: "›";
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: transform .15s ease;
}

.sidebar-folder[open] summary::before {
  transform: rotate(90deg);
}

.sidebar-folder-name,
.sidebar-product-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-children {
  display: grid;
  gap: 4px;
  padding: 2px 8px 10px 24px;
}

.sidebar-quick-link,
.sidebar-product-link {
  min-height: 28px;
  padding: 0 7px;
  font-size: 12px;
}

.sidebar-quick-link {
  font-weight: 800;
}

.sidebar-test-sync {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
}

.sidebar-test-sync strong {
  color: var(--text);
  font-size: 13px;
}

.sidebar-test-sync form {
  margin: 0;
}

.sidebar-mini-settings {
  display: grid;
  gap: 8px;
}

.sidebar-mini-settings summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sidebar-mini-settings form,
.sidebar-mini-settings label {
  display: grid;
  gap: 6px;
}

.sidebar-mini-settings input[type="text"],
.sidebar-mini-settings input:not([type]) {
  width: 100%;
  min-width: 0;
}

.saved-view-link::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  flex: 0 0 auto;
}

.sidebar-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  padding: 0 8px 4px;
}

.side-count {
  min-width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #1e4f9a;
  font-weight: 800;
  font-size: 12px;
}

.side-muted { color: var(--muted); }

.label-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--label-color);
}

.content-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 220px;
  padding: 16px;
  overflow-x: auto;
  box-shadow: var(--shadow);
}

.content-panel.narrow { max-width: 1200px; }

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

h1 { margin: 0 0 12px; font-size: 22px; }
h2 { margin: 20px 0 10px; font-size: 16px; }

.tabs { display: inline-flex; gap: 8px; }

.tabs a {
  height: 32px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 800;
}

.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px;
  margin-bottom: 12px;
}

.filter-summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 8px 10px;
  margin: -2px 0 12px;
}

.filter-summary strong {
  color: var(--text);
  margin-right: 2px;
}

.filter-summary span,
.filter-summary a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
}

.filter-summary a {
  color: var(--blue);
}

.dashboard-controls,
.bulk-details {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  margin-bottom: 12px;
  overflow: hidden;
}

.dashboard-controls summary,
.bulk-details summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
  padding: 0 12px;
}

.dashboard-controls[open] summary,
.bulk-details[open] summary {
  border-bottom: 1px solid var(--line-soft);
}

.dashboard-controls .filter-bar {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dashboard-controls .saved-view-save {
  margin: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}

.saved-view-save {
  display: grid;
  grid-template-columns: minmax(220px, 360px) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  margin: -2px 0 14px;
}

.bulk-update-form {
  display: grid;
  gap: 10px;
}

.bulk-toolbar {
  border: 1px solid var(--line-soft);
  border-width: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(116px, 1fr)) auto;
  gap: 8px;
  align-items: end;
}

.bulk-toolbar strong {
  align-self: center;
  white-space: nowrap;
}

.empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 34px;
  color: var(--muted);
  text-align: center;
}

.empty.compact { padding: 18px; }

.ticket-table { width: 100%; border-collapse: collapse; }

.ticket-table th, .ticket-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 11px 9px;
  text-align: left;
  white-space: nowrap;
}

.ticket-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ticket-table tbody tr { cursor: pointer; }
.ticket-table tbody tr:hover { background: #f8fafc; }
.ticket-table tbody tr.row-mine {
  background: color-mix(in srgb, var(--success-bg) 44%, transparent);
}
.ticket-table tbody tr.row-unassigned {
  background: color-mix(in srgb, var(--warning-bg) 34%, transparent);
}
.ticket-table tbody tr.row-approval {
  box-shadow: inset 4px 0 0 #f97316;
}
.ticket-table tbody tr.row-notice {
  box-shadow: inset 4px 0 0 #ef4444;
}
.ticket-table tbody tr.row-approval.row-notice {
  box-shadow: inset 4px 0 0 #f97316, inset 8px 0 0 #ef4444;
}
.ticket-table tbody tr.row-reply-delay {
  box-shadow: inset 4px 0 0 #dc2626;
}
.ticket-table tbody tr.row-approval.row-reply-delay {
  box-shadow: inset 4px 0 0 #dc2626, inset 8px 0 0 #f97316;
}
.ticket-table tbody tr.row-notice.row-reply-delay {
  box-shadow: inset 4px 0 0 #dc2626, inset 8px 0 0 #ef4444;
}
.ticket-table .subject-cell,
.ticket-table .routing-cell,
.ticket-table .product-cell {
  white-space: normal;
  line-height: 1.45;
}

.ticket-table .subject-cell { min-width: 260px; }
.ticket-table .product-cell {
  min-width: 150px;
  max-width: 220px;
}
.ticket-table .routing-cell {
  min-width: 180px;
  max-width: 280px;
}

.ticket-table-standard th,
.ticket-table-standard td {
  padding-top: 9px;
  padding-bottom: 9px;
}

.ticket-table-standard .subject-cell {
  min-width: 320px;
  max-width: 520px;
}

.ticket-table-standard .product-cell {
  min-width: 130px;
  max-width: 190px;
}

.ticket-table-standard .from-cell {
  min-width: 190px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-name-only {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-table tbody tr { cursor: default; }
.audit-table .audit-detail-cell {
  min-width: 300px;
  max-width: 520px;
  white-space: normal;
  color: #334155;
  line-height: 1.55;
}

.audit-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

.audit-mini-list {
  display: grid;
  gap: 8px;
}

.audit-mini-item {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #f8fafc;
  padding: 9px;
}

.audit-mini-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.audit-mini-item strong {
  display: block;
  margin-top: 3px;
}

.audit-mini-item p {
  margin: 4px 0 0;
  color: #334155;
  line-height: 1.5;
}

.audit-focus-panel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px;
  margin: 10px 0 12px;
}

.audit-focus-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.audit-focus-heading strong,
.audit-focus-note strong {
  color: var(--text);
}

.audit-focus-heading span,
.audit-focus-note p {
  color: var(--muted);
  font-size: 13px;
}

.audit-focus-note p {
  margin: 5px 0 0;
  line-height: 1.6;
}

.audit-timeline {
  display: grid;
  gap: 8px;
}

.audit-timeline-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 9px 10px;
}

.audit-timeline-item strong {
  display: block;
  color: var(--text);
  line-height: 1.45;
}

.audit-timeline-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.assignee-history-panel {
  border-top: 1px solid var(--line-soft);
  margin-top: 16px;
  padding-top: 14px;
}

.assignee-history-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px;
  margin: 8px 0 10px;
}

.assignee-history-status span {
  color: var(--muted);
  font-size: 12px;
}

.assignee-history-status strong {
  color: var(--text);
  font-size: 16px;
}

.assignee-history-status em {
  grid-row: 1 / span 2;
  grid-column: 2;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 4px 8px;
  white-space: nowrap;
}

.assignee-history-list {
  display: grid;
  gap: 8px;
}

.assignee-history-item {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-soft);
  padding: 9px 10px;
}

.assignee-history-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.assignee-history-route span {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--text);
  font-weight: 800;
}

.assignee-history-route em,
.assignee-history-meta span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.assignee-history-route strong {
  color: var(--muted);
  line-height: 1;
}

.assignee-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  margin-top: 8px;
}

.assignee-history-meta em {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  padding: 2px 7px;
}

.notification-list {
  display: grid;
  gap: 10px;
}

.notification-policy-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.notification-policy-panel > div {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 11px 12px;
}

.notification-policy-panel strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
}

.notification-policy-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.notification-policy-table-wrap {
  overflow-x: auto;
  margin: 0 0 12px;
}

.notification-policy-table {
  min-width: 720px;
}

.notification-policy-table th,
.notification-policy-table td {
  vertical-align: top;
}

.notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.notification-item.unread {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.notification-title {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.notification-title span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  padding: 0 8px;
}

.notification-item p {
  margin: 6px 0;
  color: #334155;
}

.notification-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.report-panel { overflow-x: hidden; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.metric-box {
  min-height: 88px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #f8fafc;
  padding: 13px;
}

.metric-box span, .response-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.metric-box strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  line-height: 1;
}

.response-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  padding: 12px;
  margin-bottom: 18px;
}

.response-summary strong {
  display: block;
  margin-top: 6px;
  color: #1e3a8a;
  font-size: 18px;
}

.report-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.report-section {
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
  margin-top: 8px;
}

.compact-head {
  margin-bottom: 8px;
}

.report-filter-bar {
  grid-template-columns: repeat(3, minmax(150px, 220px)) auto;
  justify-content: start;
}

.report-export-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: min(100%, 280px);
}

.report-product-manual-board {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 90%, #fffbeb);
}

.report-product-manual-board-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.report-product-manual-board-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.report-product-manual-board-head strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.report-product-manual-board-head span:not(.soft-tag) {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.report-product-manual-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.report-product-manual-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 7px;
}

.report-product-manual-summary span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.report-product-manual-summary strong {
  color: var(--warn);
  font-size: 1.14rem;
  line-height: 1;
}

.report-product-manual-handoff {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, #e0f2fe);
}

.report-product-manual-handoff > div {
  display: grid;
  gap: 4px;
}

.report-product-manual-handoff strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.report-product-manual-handoff small,
.report-product-manual-handoff p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.report-product-manual-handoff ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-product-manual-handoff li {
  min-width: 0;
}

.report-product-manual-handoff a {
  display: grid;
  gap: 3px;
  min-height: 100%;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.report-product-manual-handoff a:hover {
  border-color: var(--accent);
}

.report-product-manual-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.report-product-manual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.report-product-manual-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.report-product-manual-card-head {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.report-product-manual-card-head > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.report-product-manual-card-head > div:first-child {
  display: grid;
  gap: 3px;
}

.report-product-manual-card-head strong {
  color: var(--ink);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.report-product-manual-card-head span:not(.soft-tag) {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.report-product-manual-task-list {
  display: grid;
  gap: 6px;
}

.report-product-manual-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #f8fafc);
  color: var(--text);
  text-decoration: none;
}

.report-product-manual-task:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
}

.report-product-manual-task strong {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.report-product-manual-task small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: right;
}

.report-product-manual-task small.report-product-manual-after-check {
  grid-column: 2 / -1;
  padding: 6px 7px;
  border: 1px solid rgba(59, 130, 246, 0.14);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, #eff6ff);
  line-height: 1.4;
  text-align: left;
}

.report-product-manual-task-links {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.report-product-manual-task-links a {
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
}

.report-product-manual-task-links a:hover {
  text-decoration: underline;
}

.report-product-manual-more {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.report-product-manual-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.report-product-manual-card-links a {
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 900;
  text-decoration: none;
}

.report-product-manual-card-links a:hover {
  text-decoration: underline;
}

.compact-help {
  margin: 6px 0 12px;
}

.product-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 180px;
}

.product-report-readiness-cell {
  min-width: 190px;
}

.product-report-missing-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.product-report-missing-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 800;
  text-decoration: none;
}

.product-report-missing-links a:hover {
  border-color: var(--primary);
}

.product-report-missing-links small {
  color: var(--muted);
  font-weight: 700;
}

.product-report-unfixed-faq-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  max-width: 360px;
}

.product-report-unfixed-faq-list > span,
.product-report-unfixed-faq-list > em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.8;
}

.product-report-unfixed-faq-list a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, #fffbeb);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.product-report-unfixed-faq-list a:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
}

.product-report-unfixed-faq-list small {
  flex: 0 0 auto;
  color: var(--warn);
  font-size: 0.68rem;
  font-weight: 900;
}

.report-subhead {
  margin: 18px 0 8px;
  color: #334155;
  font-size: 14px;
}

.report-bars {
  display: grid;
  gap: 8px;
}

.bar-row {
  display: grid;
  grid-template-columns: 130px minmax(180px, 1fr) 132px;
  gap: 10px;
  align-items: center;
  min-height: 34px;
}

.bar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155;
  font-weight: 800;
}

.bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2563eb;
}

.bar-count {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.bar-count strong { font-size: 16px; }
.bar-count span { color: var(--muted); font-size: 12px; }

.status, .label, .channel, .notice-dot, .approval-dot, .comment-count {
  display: inline-flex;
  align-items: center;
  height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  font-weight: 800;
  font-size: 12px;
}

.status.new { background: #fff7ed; color: #c2410c; }
.status.hold { background: #eff6ff; color: #1d4ed8; }
.status.done { background: #ecfdf5; color: #047857; }

.label {
  background: #eff6ff;
  color: var(--label-color);
  border: 1px solid var(--label-color);
}

.channel {
  margin-right: 8px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.channel.line { background: #ecfdf5; color: #047857; border-color: #86efac; }
.channel.bot { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

.notice-dot {
  margin-right: 8px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.approval-dot {
  margin-right: 8px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.reply-delay-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #fef2f2;
  color: #b91c1c;
  padding: 0 9px;
  margin-right: 8px;
  font-size: 12px;
  font-weight: 900;
}

.comment-count {
  margin-left: 8px;
  min-width: 24px;
  justify-content: center;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.personal-flag-chips {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-right: 8px;
  vertical-align: middle;
}

.personal-flag-chip {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--personal-flag-color) 52%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--personal-flag-color) 13%, #ffffff);
  color: #263244;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
}

.personal-flag-chip > span,
.personal-flag-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--personal-flag-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--personal-flag-color) 18%, transparent);
}

.approval-cell {
  min-width: 118px;
}

.approval-cell strong,
.approval-cell .meta {
  display: block;
}

.assignee-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 118px;
}

.assignee-chip {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
}

.assignee-chip.mine {
  border-color: #99f6e4;
  background: var(--success-bg);
  color: var(--success-text);
}

.assignee-chip.unassigned {
  border-color: #fde68a;
  background: var(--warning-bg);
  color: var(--warning-text);
}

.routing-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  border: 1px solid #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
}

.routing-reason,
.routing-time {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ticket-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) fit-content(360px);
  gap: 10px;
  align-items: start;
}

.detail-main, .detail-side {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.back-link, .meta { color: var(--muted); }

.detail-command-stack {
  min-width: 0;
  position: static;
  top: auto;
  z-index: auto;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 96%, var(--panel));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  margin: -4px -4px 14px;
  padding: 12px;
}

.detail-title-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.product-summary {
  display: grid;
  gap: 2px;
}

.product-summary strong {
  color: var(--text);
  font-size: 12px;
}

.product-summary span {
  color: var(--muted);
  font-size: 12px;
}

.product-summary .line-account-brief {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 3px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.line-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.line-meta-bar span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 88%, white);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
}

.line-meta-bar strong {
  color: var(--muted);
  font-size: 11px;
}

.line-meta-bar .line-ai-off {
  border-color: #f4b6a6;
  background: #fff4ee;
}

[data-theme="dark"] .line-meta-bar .line-ai-off {
  background: rgba(244, 182, 166, 0.12);
}

.line-meta-bar .line-ai-on {
  border-color: #a7d8bd;
  background: #eefaf2;
}

[data-theme="dark"] .line-meta-bar .line-ai-on {
  background: rgba(167, 216, 189, 0.12);
}

.line-selection-side {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px;
  margin: 0;
}

.line-selection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.line-selection-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.35;
}

.line-selection-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.line-selection-current {
  margin-top: 10px;
}

.line-selection-side .line-selection-current {
  display: grid;
  grid-template-columns: minmax(94px, max-content) minmax(0, 1fr);
  gap: 7px 9px;
}

.line-selection-current dt {
  min-width: 0;
  white-space: normal;
  line-height: 1.45;
}

.line-selection-current dd {
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: normal;
}

.line-selection-history {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 10px;
}

.line-selection-history h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.line-selection-history-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.line-selection-history-list article {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface);
  padding: 8px;
}

.line-selection-history-list time,
.line-selection-history-list span,
.line-selection-history-list p {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: normal;
}

.line-selection-history-list strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  margin: 3px 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.line-selection-history-list p {
  margin: 5px 0 0;
}

.detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-actions form {
  margin: 0;
}

.reply-header-button {
  min-width: 78px;
}

.detail-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px;
  margin: 0;
}

.detail-toolbar > label {
  min-width: 0;
}

.detail-toolbar label.check.compact {
  align-items: center;
  min-width: 0;
  white-space: normal;
}

.detail-toolbar label.check.compact.detail-toolbar-notification {
  grid-column: span 2;
  min-height: 38px;
  white-space: nowrap;
  overflow-wrap: normal;
}

.detail-toolbar .detail-toolbar-submit {
  width: 100%;
  min-height: 38px;
}

.detail-toolbar > button {
  min-width: 64px;
}

.toolbar-help {
  grid-column: 1 / -1;
}

.toolbar-help-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.toolbar-help-row .subtle-button {
  flex: 0 0 auto;
  background: var(--surface);
}

.lock-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 10px 12px;
  margin: 14px 0;
}

.lock-banner.active {
  border-color: #99f6e4;
  background: #ecfeff;
  color: #0f766e;
}

.lock-banner.warning {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.lock-banner form {
  display: inline-flex;
  margin: 0;
}

.message {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 14px 0;
  overflow: hidden;
}

.message header {
  display: flex;
  justify-content: space-between;
  background: #f8fafc;
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 12px;
  color: #334155;
}

.message.outbound header { background: #eff6ff; }

.message-body { padding: 12px; }

.message-view-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.email-text-panel {
  min-height: 44px;
  background: var(--surface);
  color: var(--text);
  line-height: 1.65;
}

.email-html-panel[hidden],
.email-text-panel[hidden] {
  display: none;
}

.subtle-button {
  min-height: 28px;
  padding: 0 9px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.subtle-button.warn-button {
  border-color: rgba(245, 158, 11, 0.42);
  background: color-mix(in srgb, var(--surface) 82%, #fef3c7);
  color: #8a5a00;
}

.message-body iframe {
  width: 100%;
  height: min(58vh, 520px);
  min-height: 260px;
  border: 0;
  border-radius: 6px;
  background: #fff;
}

.message-body pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: inherit;
}

.quoted-message {
  margin-top: 10px;
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
  color: #475569;
}

.quoted-message summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.quoted-message pre {
  margin-top: 8px;
  color: #64748b;
}

.attachments {
  border-top: 1px solid var(--line-soft);
  padding: 10px 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachments a,
.attachments > span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #f8fafc;
  padding: 5px 9px;
  color: #334155;
}

.attachments a {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
  font-weight: 700;
}

.attachments a span,
.attachments > span span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.knowledge-attachment-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.knowledge-attachment-visibility-form {
  align-items: center;
  gap: 8px;
  margin: 0;
}

.knowledge-attachment-visibility-form label {
  margin: 0;
}

.knowledge-proposal-import textarea {
  min-height: 140px;
}

.form-grid .full-span {
  grid-column: 1 / -1;
}

.line-form-solution-media {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.line-form-solution-media a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 5px 9px;
  font-size: 13px;
  font-weight: 800;
}

.line-form-solution-media a span {
  color: #64748b;
  font-size: 12px;
}

.line-thread {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 12px;
  min-height: 160px;
  max-height: min(58vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #e2edf8;
  padding: 16px;
  margin: 14px 0;
}

.line-message {
  display: grid;
  grid-template-columns: 42px minmax(0, 620px);
  gap: 8px;
  align-items: end;
}

.line-message.outbound {
  grid-template-columns: minmax(0, 620px) 42px;
  justify-content: end;
}

.line-message.outbound .line-avatar { grid-column: 2; }
.line-message.outbound .line-bubble { grid-column: 1; grid-row: 1; justify-self: end; }

.line-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
  font-size: 12px;
  font-weight: 800;
}

.line-bubble {
  max-width: 100%;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  padding: 11px 12px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.line-message.outbound .line-bubble {
  background: #dcfce7;
  border-color: #86efac;
}

.line-bubble pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.7;
}

.line-bubble time {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  text-align: right;
}

.line-bubble .attachments {
  margin: 10px -12px 0;
  padding-bottom: 0;
}

.reply-box {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 4px;
}

.reply-popup-launch {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 14px;
}

.reply-popup-launch strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.reply-popup-launch p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.reply-popup-launch form {
  flex: 0 0 auto;
}

.reply-popup-context {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px 12px;
  margin-bottom: 12px;
}

.reply-popup-context > div {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.reply-popup-context strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply-popup-context > span {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.ticket-detail.reply-window {
  display: block;
  max-width: 1180px;
  margin: 0 auto;
}

.ticket-detail.reply-window .detail-main {
  border: 0;
  background: transparent;
  padding: 0;
}

.ticket-detail.reply-window .detail-main > :not(.reply-box),
.ticket-detail.reply-window .detail-side {
  display: none;
}

.ticket-detail.reply-window .reply-box {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.ticket-detail.reply-window .reply-box-head {
  position: sticky;
  top: 0;
  z-index: 6;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  padding: 12px 0;
}

.ticket-detail.reply-window .reply-popup-context {
  margin-top: 10px;
}

.ticket-detail.reply-window .reply-prep-panel {
  grid-template-columns: minmax(200px, .8fr) minmax(0, 1.3fr);
}

.ticket-detail.reply-window .reply-workspace-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
}

.ticket-detail.reply-window .reply-compose-panel {
  min-height: calc(100vh - 280px);
}

.ticket-detail.reply-window .reply-editor-content,
.ticket-detail.reply-window .reply-plain-editor {
  min-height: min(54vh, 520px);
}

.reply-box-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.reply-box-head h2 {
  margin-bottom: 6px;
}

.reply-state-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.reply-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 460px;
}

.reply-box-head-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.reply-compose-cancel-open {
  min-height: 34px;
}

.reply-cancel-dialog {
  width: min(560px, calc(100vw - 32px));
}

.reply-cancel-dialog-body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.reply-cancel-choice-copy {
  display: grid;
  gap: 5px;
}

.reply-cancel-choice-copy p {
  margin: 0;
  color: var(--muted);
}

.reply-cancel-attachment-warning {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--warning-text) 38%, var(--line));
  border-radius: 8px;
  background: var(--warning-bg);
  color: var(--warning-text);
  padding: 11px 12px;
}

.reply-cancel-attachment-warning[hidden] {
  display: none;
}

.reply-cancel-attachment-warning span {
  font-size: 12px;
  line-height: 1.5;
}

.reply-cancel-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reply-cancelled-panel {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: min(18vh, 160px);
}

.reply-start-action-form {
  justify-self: end;
}

.reply-start-action {
  min-width: 132px;
  min-height: 36px;
}

.reply-flow-step {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 7px 9px;
  white-space: nowrap;
}

.reply-flow-step.is-done {
  background: var(--success-bg);
  color: var(--success-text);
}

.reply-flow-step.is-active {
  background: var(--info-bg);
  color: var(--info-text);
}

.reply-body-label {
  margin-top: 10px;
}

.reply-confirm-panel {
  max-width: 980px;
}

.confirm-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.confirm-nav-actions form {
  margin: 0;
}

.confirm-safety-check {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
  margin-top: 14px;
}

.line-final-guard {
  display: grid;
  gap: 10px;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
  padding: 12px;
  margin-top: 14px;
}

.line-final-guard > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.line-final-guard strong {
  color: inherit;
  font-size: 14px;
}

.line-final-guard ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
  color: inherit;
  font-size: 13px;
  line-height: 1.55;
}

.confirm-safety-check .panel-head {
  margin-bottom: 10px;
}

.confirm-safety-check h2 {
  margin: 0;
  font-size: 16px;
}

.confirm-check-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.confirm-check-item {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--field-bg);
  padding: 10px;
}

.confirm-check-item strong {
  display: block;
  margin: 7px 0 4px;
  font-size: 13px;
}

.confirm-check-item p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.confirm-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  margin-top: 14px;
}

.confirm-summary {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
  margin: 0;
}

.confirm-summary dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-top: 10px;
}

.confirm-summary dt:first-child { margin-top: 0; }

.confirm-summary dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.confirm-body {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.confirm-body h2 { margin-top: 0; }

.confirm-body pre,
.confirm-body .mail-preview {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #fff;
  padding: 12px;
  min-height: 180px;
  white-space: pre-wrap;
}

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  position: sticky;
  bottom: 0;
  z-index: 8;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  padding: 12px 0;
}

.confirm-actions form {
  margin: 0;
}

.confirm-send-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.confirm-final-ack {
  align-self: center;
  min-height: auto;
  max-width: 560px;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
  padding: 8px 10px;
}

.draft-note {
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 11px;
}

.template-picker {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}

.template-picker label {
  min-width: 0;
}

.reply-workspace {
  display: grid;
  gap: 12px;
}

.reply-prep-panel {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(0, 1.4fr);
  gap: 12px;
  align-items: stretch;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
}

.reply-prep-panel > div,
.reply-prep-panel dl {
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.reply-prep-panel strong {
  display: block;
  margin: 4px 0;
  color: var(--text);
  font-size: 16px;
}

.reply-prep-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.reply-prep-panel dl {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 7px 10px;
  align-content: start;
}

.reply-prep-panel dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reply-prep-panel dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.reply-envelope-fields {
  display: grid;
  gap: 9px;
  align-content: start;
}

.reply-envelope-fixed,
.reply-envelope-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.reply-envelope-fixed > span,
.reply-envelope-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reply-envelope-fixed strong {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.reply-envelope-row {
  margin: 0;
}

.reply-envelope-row input {
  width: 100%;
  min-width: 0;
}

.reply-copy-fields {
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}

.reply-copy-fields > summary {
  cursor: pointer;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.reply-copy-fields > div {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.prep-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--info-text);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 8px;
}

.reply-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 14px;
  align-items: start;
}

.reply-compose-panel,
.reply-assist-panel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px;
}

.reply-compose-panel {
  display: grid;
  gap: 12px;
}

.reply-compose-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.reply-compose-head h3,
.reply-assist-panel h3 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 15px;
}

.reply-compose-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.reply-autosave-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4f91;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
}

.line-send-guard {
  display: grid;
  gap: 4px;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
  font-size: 13px;
  line-height: 1.55;
  padding: 10px 11px;
}

.line-send-guard strong {
  color: inherit;
  font-size: 13px;
}

.line-send-guard span {
  color: inherit;
}

.reply-autosave-status[data-state="pending"],
.reply-autosave-status[data-state="saving"] {
  border-color: #f6c66c;
  background: #fff7e6;
  color: #8a4b12;
}

.reply-autosave-status[data-state="error"] {
  border-color: #fca5a5;
  background: #fff1f2;
  color: #991b1b;
}

.reply-compose-panel textarea {
  min-height: 230px;
}

.reply-assist-panel {
  display: grid;
  gap: 12px;
}

.reply-assist-panel section {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 11px;
}

.reply-assist-panel .template-picker {
  grid-template-columns: 1fr;
}

.reply-assist-section-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.reply-assist-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.reply-template-shelf .template-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.template-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.template-action-row button {
  min-width: 0;
}

.template-preview {
  max-height: 170px;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
  padding: 10px;
}

.template-preview.is-empty {
  color: var(--muted);
}

.template-attachment-preview {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 9px 10px;
}

.template-attachment-preview[hidden] {
  display: none;
}

.template-attachment-preview strong {
  font-size: 12px;
}

.template-attachment-preview ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.selected-template-attachments {
  border-color: var(--primary);
  box-shadow: inset 3px 0 0 var(--primary);
}

.quick-template-save {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.quick-template-save > summary {
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  padding: 10px 11px;
}

.quick-template-save-grid {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  padding: 10px;
}

.reply-checklist {
  display: grid;
  gap: 6px;
}

.reply-checklist span {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--field-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 8px;
}

.reply-attachment-selection {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
  padding: 9px;
}

.reply-attachment-selection[hidden] {
  display: none;
}

.reply-attachment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  justify-content: space-between;
}

.reply-attachment-summary strong {
  color: var(--text);
  font-size: 12px;
}

.reply-attachment-summary span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.reply-attachment-selection ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reply-attachment-selection li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  padding-top: 6px;
}

.reply-attachment-selection li > span {
  display: flex;
  min-width: 0;
  gap: 4px 10px;
  align-items: baseline;
  justify-content: space-between;
}

.reply-attachment-selection li strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12px;
}

.reply-attachment-selection li small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.reply-attachment-remove {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  color: #991b1b;
  font-size: 18px;
  line-height: 1;
}

.reply-start-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
}

.reply-start-preview > strong {
  grid-column: 1 / -1;
  color: var(--text);
  font-size: 14px;
}

.reply-start-preview div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.reply-start-preview span:first-child {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.reply-start-preview span:last-child {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.reply-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.approval-request-list {
  display: grid;
  gap: 12px;
}

.approval-admin-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.approval-request-item {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 10px;
  background: #ffffff;
}

.approval-request-item header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.approval-request-item dl {
  grid-template-columns: 76px 1fr;
  font-size: 12px;
  margin-bottom: 8px;
}

.approval-admin-item {
  padding: 14px;
}

.approval-admin-item header {
  margin-bottom: 12px;
}

.approval-admin-item header strong {
  flex: 1 1 260px;
  min-width: 0;
}

.approval-admin-grid {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(0, 1.5fr);
  gap: 14px;
  align-items: start;
}

.approval-admin-grid dl {
  grid-template-columns: 90px 1fr;
  margin: 0;
}

.approval-admin-editor {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  margin-top: 10px;
  padding: 0;
}

.approval-admin-editor summary {
  cursor: pointer;
  font-weight: 800;
  padding: 10px 12px;
}

.approval-admin-editor .approval-action-form {
  padding: 0 12px 12px;
}

.approval-status-tabs {
  margin-top: 10px;
}

.approval-status {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 8px;
}

.approval-status.pending { background: #fff7ed; color: #c2410c; }
.approval-status.approved { background: #ecfdf5; color: #047857; }
.approval-status.sent { background: #eff6ff; color: #1d4ed8; }
.approval-status.rejected { background: #fef2f2; color: #b91c1c; }
.approval-status.cancelled { background: #f1f5f9; color: #475569; }

.approval-body-preview {
  border-left: 3px solid var(--line-soft);
  color: #334155;
  font-size: 12px;
  margin: 8px 0;
  padding-left: 8px;
}

.approval-note {
  background: #f8fafc;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: #334155;
  font-size: 12px;
  margin: 8px 0;
  padding: 8px;
}

.approval-action-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.approval-cancel-form {
  margin-top: 8px;
}

button.danger {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

.reply-disabled {
  display: grid;
  gap: 10px;
}

.knowledge-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.knowledge-results {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.knowledge-result {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
}

.knowledge-result summary {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  cursor: pointer;
}

.knowledge-result summary span,
.knowledge-question {
  color: var(--muted);
  font-size: 12px;
}

.knowledge-question,
.knowledge-answer {
  margin: 0;
  padding: 0 10px 10px;
}

.knowledge-answer {
  color: #334155;
  font-size: 13px;
  line-height: 1.7;
}

.form-grid { display: grid; gap: 12px; }

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-form {
  display: grid;
  gap: 14px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
}

.warn-check {
  color: var(--muted);
}

.microsoft-graph-ops {
  border-top: 1px solid var(--line-soft);
  margin-top: 18px;
  padding-top: 16px;
}

.outlook-operation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.outlook-operation-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.outlook-operation-card h3 {
  margin: 0;
  font-size: 15px;
}

.outlook-operation-actions,
.outlook-operation-card > form:not(.form-grid) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.operation-scope-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}

.operation-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 8px;
}

.operation-card-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.operation-scope {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  padding: 4px 8px;
}

.line-form-source-panel .operation-scope {
  color: inherit;
  font-size: 11px;
  line-height: 1.2;
}

.operation-scope.is-preview {
  background: var(--info-bg);
  border-color: #9cc7e5;
  color: var(--info-text);
}

.operation-scope.is-test {
  background: var(--success-bg);
  border-color: #8fd3b5;
  color: var(--success-text);
}

.operation-scope.is-draft {
  background: #eef2f7;
  border-color: #cbd5df;
  color: #475569;
}

.operation-scope.is-production {
  background: var(--warning-bg);
  border-color: #f0b46d;
  color: var(--warning-text);
}

.production-action-button {
  border-color: #f0b46d;
  background: var(--warning-bg);
  color: var(--warning-text);
}

.production-action-button:hover,
.production-action-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.setting-editor {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 8px;
  padding: 0;
}

.setting-editor.is-inactive {
  background: #f8fafc;
  color: var(--muted);
}

.setting-editor summary {
  min-height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  cursor: pointer;
}

.setting-editor summary > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.setting-editor em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 0 8px;
}

.soft-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  padding: 0 8px;
}

.warning-tag {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.setting-edit-form {
  border-top: 1px solid var(--line-soft);
  background: #f8fafc;
  padding: 10px;
}

.weekday-fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px;
}

.weekday-fieldset legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 0 6px;
}

.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.check-group legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 0 6px;
}

.routing-condition-block {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.routing-condition-block legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 0 6px;
}

.setting-editor > .inline-form {
  border-top: 1px solid var(--line-soft);
  padding: 10px;
}

.user-training-cell {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.training-history-link {
  align-self: start;
}

.user-availability-editor {
  display: inline-block;
  position: relative;
}

.user-availability-editor summary {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 0 10px;
  cursor: pointer;
}

.availability-form {
  min-width: min(520px, calc(100vw - 80px));
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
  margin-top: 8px;
}

.user-availability-editor:not([open]) .availability-form {
  display: none;
}

.availability-form .check,
.availability-form .weekday-fieldset {
  grid-column: 1 / -1;
}

.form-grid.columns {
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
  align-items: end;
}

.routing-form {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: end;
}

.routing-form label:first-of-type {
  grid-column: span 2;
}

.routing-rerun-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  padding: 12px;
  margin-bottom: 12px;
}

.routing-rerun-box p {
  margin: 4px 0 0;
  color: #475569;
}

.routing-rerun-box form {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  white-space: nowrap;
}

.routing-row-editor {
  min-width: 280px;
  margin-bottom: 8px;
}

.routing-row-editor summary {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 0 10px;
  cursor: pointer;
}

.routing-row-editor .routing-form {
  min-width: min(820px, calc(100vw - 120px));
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
  margin-top: 8px;
}

.routing-rule-folder-list {
  margin-top: 12px;
}

.routing-rule-folder-body {
  gap: 8px;
}

.routing-rule-card {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.routing-rule-card.is-inactive {
  background: #f8fafc;
}

.routing-rule-card > summary {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.routing-rule-card > summary::-webkit-details-marker {
  display: none;
}

.routing-rule-summary-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.routing-rule-summary-main strong,
.routing-rule-summary-main .meta {
  overflow-wrap: anywhere;
}

.routing-rule-summary-side {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.routing-rule-summary-side span {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
}

.routing-rule-card-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line-soft);
  padding: 10px 12px 12px;
}

.routing-rule-facts {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr);
  gap: 8px;
  margin: 0;
}

.routing-rule-facts div {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 8px;
}

.routing-rule-facts dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 4px;
}

.routing-rule-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.routing-rule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.routing-extra-conditions {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.routing-schedule-fieldset {
  grid-column: 1 / -1;
  align-items: end;
}

.routing-assignment-fieldset {
  grid-column: 1 / -1;
  align-items: end;
}

.routing-schedule-fieldset label:not(.check),
.routing-assignment-fieldset label:not(.check) {
  min-width: 120px;
}

.routing-extra-conditions > strong {
  color: #334155;
  font-size: 13px;
}

.routing-condition-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(120px, .8fr) minmax(180px, 1.4fr);
  gap: 10px;
}

.routing-preview {
  display: grid;
  gap: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  padding: 12px;
  margin-top: 14px;
}

.preview-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.preview-summary > div {
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.preview-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
}

.preview-summary strong {
  color: #1e3a8a;
}

.preview-table {
  background: #fff;
}

.preview-match-cell {
  min-width: 240px;
  max-width: 360px;
}

.preview-match-detail summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 800;
  line-height: 1.45;
}

.preview-match-groups {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.preview-match-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 8px;
}

.preview-match-group strong {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.preview-match-group p,
.preview-match-group ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: var(--muted);
  font-size: 12px;
}

.preview-match-group li + li {
  margin-top: 3px;
}

.preview-match-group.is-match strong,
.preview-match-group li.is-match {
  color: #166534;
}

.preview-match-group.is-miss strong,
.preview-match-group li.is-miss {
  color: #991b1b;
}

label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

label.compact {
  min-height: 36px;
  align-self: end;
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 8px 10px;
}

label.check input {
  width: auto;
  flex: 0 0 auto;
}

textarea { resize: vertical; }

.comment {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  background: #f8fafc;
}

.comment p { margin: 6px 0 0; color: #334155; }

.side-summary dl {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 8px 10px;
  margin: 0;
}

.side-summary dt {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.side-summary dd {
  min-width: 0;
  margin: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: normal;
  font-variant-numeric: tabular-nums;
}

.break-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.compact-form {
  margin-top: 12px;
  gap: 10px;
}

.customer-profile-meta {
  margin-bottom: 10px;
}

.customer-history {
  border-top: 1px solid var(--line-soft);
  margin-top: 16px;
  padding-top: 14px;
}

.history-list {
  display: grid;
  gap: 10px;
}

.history-item {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #f8fafc;
  color: inherit;
  padding: 10px;
  text-decoration: none;
}

.history-item:hover {
  border-color: #93c5fd;
  background: #eff6ff;
}

.history-item strong {
  color: #0f172a;
  line-height: 1.45;
}

.history-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-grid .wide { grid-column: 1 / -1; }

.settings-hub-panel {
  background: var(--panel);
}

.settings-hub-panel-quiet {
  max-width: 1100px;
  margin: 0 auto;
}

.settings-hub-panel-quiet > h1 {
  margin-bottom: 6px;
}

.settings-hub-panel-quiet .quiet-help {
  margin: 0 0 14px;
}

.settings-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.settings-hub-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-flow-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
}

.settings-flow-strip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 7px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.settings-flow-strip strong {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fffefa;
  font-size: 11px;
}

.settings-screen-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.settings-screen-map div {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
}

.settings-screen-map strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 5px;
}

.settings-screen-map span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.settings-tree {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.settings-tree + h2 {
  margin-top: 18px;
}

.settings-tree-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.settings-tree-group > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  background: var(--surface-soft);
}

.settings-tree-group > summary::-webkit-details-marker {
  display: none;
}

.settings-tree-group > summary::after {
  content: "開く";
  justify-self: end;
  grid-column: 3;
  grid-row: 1;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
}

.settings-tree-group[open] > summary::after {
  content: "閉じる";
}

.settings-tree-group > summary > div {
  grid-column: 2;
  min-width: 0;
}

.settings-tree-icon {
  grid-column: 1;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.settings-tree-group summary strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-right: 0;
  overflow-wrap: anywhere;
}

.settings-tree-group summary span:not(.settings-tree-icon) {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  margin-top: 2px;
  margin-right: 0;
  overflow-wrap: anywhere;
}

.settings-tree-children {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  background: var(--panel);
}

.settings-tree-subgroup {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 8px;
}

.settings-tree-subgroup h3 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
}

.settings-tree-card {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  color: var(--text);
  text-decoration: none;
}

.settings-tree-card:hover,
.settings-tree-card:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(47, 111, 159, .13);
}

.settings-tree-card strong {
  color: var(--text);
  font-size: 13px;
}

.settings-tree-card span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.settings-tree-card.is-system {
  background: var(--surface-soft);
}

.settings-admin-heading {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 8px;
}

.settings-hub-card {
  display: flex;
  min-height: 104px;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px;
  color: var(--text);
  text-decoration: none;
}

.settings-hub-card:hover,
.settings-hub-card:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-soft);
}

.settings-hub-card.is-system {
  background: var(--surface-soft);
}

.settings-hub-card strong {
  font-size: 15px;
  color: var(--text);
}

.settings-hub-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.settings-detail-nav {
  background: var(--panel);
}

.settings-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.settings-detail-links a {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.settings-detail-links a:hover,
.settings-detail-links a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.setting-row {
  min-height: 36px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
}

.setting-row-with-meta {
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 7px 0;
}

.setting-row-with-meta strong {
  color: #0f172a;
}

.setting-row-with-meta .meta {
  margin-left: auto;
  text-align: right;
}

.setting-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.compact-status-grid {
  margin-top: 10px;
}

.setting-status {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #f8fafc;
  padding: 11px;
}

.setting-status strong {
  display: block;
  margin-bottom: 5px;
  color: #334155;
}

.setting-status span.ok { color: #047857; font-weight: 800; }
.setting-status span.warn { color: var(--warning-text); font-weight: 800; }

.product-page-section {
  margin: 10px 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.product-page-workbench {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.product-page-workbench a {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.product-page-workbench a:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
}

.product-page-workbench strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.product-page-workbench span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-page-workbench .operation-scope,
.settings-detail-nav .operation-scope,
.workflow-quick-panel .operation-scope,
.system-quick-panel .operation-scope {
  font-size: 11px;
  line-height: 1.2;
}

.product-page-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 46px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  background: color-mix(in srgb, var(--surface) 86%, #eaf2fb);
}

.product-page-section > summary::-webkit-details-marker {
  display: none;
}

.product-page-section > summary span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-page-section > summary strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.product-page-section > summary small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-page-section > summary em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
  font-size: 0;
}

.product-page-section > summary em::after {
  content: "開く";
  font-size: 0.76rem;
}

.product-page-section[open] > summary em {
  color: var(--muted);
}

.product-page-section[open] > summary em::after {
  content: "閉じる";
}

.product-page-status-grid,
.product-page-collapsed-content,
.product-page-collapsed-stack {
  margin: 0;
  padding: 12px;
}

.product-page-collapsed-stack {
  display: grid;
  gap: 12px;
}

.product-page-section .product-progress-split {
  margin: 0;
}

.product-page-section .product-status-report-panel {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.product-detail-section {
  margin-top: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.product-detail-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  background: var(--surface-soft);
}

.product-detail-section > summary::-webkit-details-marker {
  display: none;
}

.product-detail-section > summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.product-detail-section > summary strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.product-detail-section > summary small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
}

.product-detail-section > summary em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  font-size: 0;
}

.product-detail-section > summary em::after {
  content: "開く";
  font-size: 0.72rem;
}

.product-detail-section[open] > summary em::after {
  content: "閉じる";
}

.product-detail-section > .setting-edit-form,
.product-detail-section > .inline-form,
.product-detail-section > .product-next-steps,
.product-detail-section > .product-line-intake-preview,
.product-detail-section > .product-line-public-overview,
.product-detail-section > .product-knowledge-overview,
.product-detail-section > .setting-help,
.product-detail-section > .product-connection-actions,
.product-detail-section > .knowledge-line-link-box,
.product-detail-section > .knowledge-copy-box,
.product-detail-section > .knowledge-attachments,
.product-detail-section > .knowledge-answer-danger-actions {
  margin: 10px;
}

.product-detail-section > .setting-edit-form {
  margin-bottom: 8px;
}

.routing-form-section {
  grid-column: 1 / -1;
}

.routing-form-section-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
}

.routing-form-section-body-stack {
  grid-template-columns: 1fr;
}

.routing-form-section-body .routing-extra-conditions,
.routing-form-section-body .routing-condition-block,
.routing-form-section-body .routing-schedule-fieldset,
.routing-form-section-body .routing-assignment-fieldset {
  grid-column: 1 / -1;
}

.routing-form-section-body > .check {
  align-self: end;
}

.product-active-form {
  justify-content: flex-end;
}

.knowledge-answer-danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.product-progress-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 12px 0 0;
}

.product-progress-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-progress-card.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, var(--surface) 91%, #dcfce7);
}

.product-progress-card.is-warn {
  border-color: rgba(245, 158, 11, 0.3);
  background: color-mix(in srgb, var(--surface) 89%, #fef3c7);
}

.product-progress-card.is-muted,
.product-progress-card.is-manual {
  background: color-mix(in srgb, var(--surface) 93%, #e0f2fe);
}

.product-progress-card > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.product-progress-card > strong {
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1.05;
}

.product-progress-card > small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-progress-mini-list,
.product-progress-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.product-progress-next-list {
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.product-progress-next-list > span {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 900;
}

.product-progress-next-list a {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 91%, #e0f2fe);
  color: var(--ink);
  text-decoration: none;
}

.product-progress-next-list a:hover {
  border-color: rgba(14, 165, 233, 0.46);
  background: color-mix(in srgb, var(--surface) 84%, #e0f2fe);
}

.product-progress-next-list strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.35;
}

.product-progress-next-list small {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.4;
}

.product-progress-mini-list em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.product-progress-mini-list em.is-ok {
  border-color: rgba(34, 197, 94, 0.26);
  color: #047857;
}

.product-progress-mini-list em.is-warn {
  border-color: rgba(245, 158, 11, 0.3);
  color: #92400e;
}

.product-status-report-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, #eef6f2);
}

.product-status-report-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.product-status-report-head > div {
  display: grid;
  gap: 3px;
}

.product-status-report-head strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.product-status-report-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.product-status-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.product-status-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.product-status-report-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-status-report-card.is-ok {
  border-color: rgba(34, 197, 94, 0.24);
  background: color-mix(in srgb, var(--surface) 91%, #dcfce7);
}

.product-status-report-card.is-warn {
  border-color: rgba(245, 158, 11, 0.3);
  background: color-mix(in srgb, var(--surface) 89%, #fef3c7);
}

.product-status-report-card.is-muted,
.product-status-report-card.is-manual {
  background: color-mix(in srgb, var(--surface) 93%, #dbeafe);
}

.product-status-report-card span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
}

.product-status-report-card strong {
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.05;
}

.product-status-report-card small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
}

.product-status-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.product-status-decision-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-status-decision-card.is-ok {
  border-color: rgba(34, 197, 94, 0.24);
  background: color-mix(in srgb, var(--surface) 91%, #dcfce7);
}

.product-status-decision-card.is-manual {
  border-color: rgba(245, 158, 11, 0.3);
  background: color-mix(in srgb, var(--surface) 89%, #fef3c7);
}

.product-status-decision-card.is-muted {
  background: color-mix(in srgb, var(--surface) 93%, #dbeafe);
}

.product-status-decision-card span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
}

.product-status-decision-card strong {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.25;
}

.product-status-decision-card small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-manual-operation-guide {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 91%, #e0f2fe);
}

.product-manual-operation-guide-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.product-manual-operation-guide-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-manual-operation-guide-head strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.product-manual-operation-guide-head span {
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-manual-operation-guide ol {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-manual-operation-guide li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-manual-operation-guide li > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.product-manual-operation-guide li > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-manual-operation-guide li strong {
  color: var(--ink);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.product-manual-operation-guide li small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-manual-operation-stop-rules {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, #fffbeb);
}

.product-manual-operation-stop-rules strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.product-manual-operation-stop-rules ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.product-manual-operation-stop-rules li {
  display: list-item;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-manual-effect-map {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 91%, #dcfce7);
}

.product-manual-effect-map-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.product-manual-effect-map-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-manual-effect-map-head strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.product-manual-effect-map-head span {
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-manual-effect-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 9px;
}

.product-manual-effect-card {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-manual-effect-card.is-manual {
  border-color: rgba(245, 158, 11, 0.28);
}

.product-manual-effect-card.is-ok {
  border-color: rgba(16, 185, 129, 0.28);
}

.product-manual-effect-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.product-manual-effect-card-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-manual-effect-card-head span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.product-manual-effect-card-head strong {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.3;
}

.product-manual-effect-card-head em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  font-size: 0.73rem;
  font-style: normal;
  font-weight: 900;
}

.product-manual-effect-card p {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.5;
}

.product-manual-effect-destinations {
  display: grid;
  gap: 6px;
}

.product-manual-effect-destinations a {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  color: var(--ink);
  text-decoration: none;
}

.product-manual-effect-destinations a:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line-soft));
}

.product-manual-effect-destinations strong {
  font-size: 0.78rem;
  line-height: 1.3;
}

.product-manual-effect-destinations small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-manual-effect-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding-top: 2px;
}

.product-manual-effect-card-foot small {
  flex: 1 1 180px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-production-approval-guard {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, #fffbeb);
}

.product-production-approval-guard-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.product-production-approval-guard-main > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-production-approval-guard-main strong {
  color: var(--ink);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.product-production-approval-guard-main small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-production-approval-guard-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.product-production-approval-guard-lists > div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-production-approval-guard-lists strong {
  color: var(--text);
  font-size: 0.82rem;
}

.product-production-approval-guard-lists span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-production-approval-guard-checks {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 90%, #fff7ed);
}

.product-production-approval-guard-checks-head {
  display: grid;
  gap: 3px;
}

.product-production-approval-guard-checks-head strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.product-production-approval-guard-checks-head span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-production-approval-guard-checks ol {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-production-approval-guard-checks li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-production-approval-guard-checks li > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.product-production-approval-guard-checks li > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-production-approval-guard-checks li strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.product-production-approval-guard-checks li small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-production-approval-guard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.product-goal-audit-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #f0f9ff);
}

.product-goal-audit-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.product-goal-audit-head > div {
  display: grid;
  gap: 3px;
}

.product-goal-audit-head strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.product-goal-audit-head span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.product-goal-audit-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.product-goal-audit-list {
  display: grid;
  gap: 7px;
}

.product-goal-audit-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-goal-audit-item.is-ok {
  border-color: rgba(34, 197, 94, 0.22);
}

.product-goal-audit-item.is-warn {
  border-color: rgba(245, 158, 11, 0.3);
  background: color-mix(in srgb, var(--surface) 94%, #fef3c7);
}

.product-goal-audit-item.is-manual,
.product-goal-audit-item.is-muted {
  background: color-mix(in srgb, var(--surface) 94%, #dbeafe);
}

.product-goal-audit-item > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-goal-audit-item strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.product-goal-audit-item span,
.product-goal-audit-item small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-post-manual-verification {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #eff6ff);
}

.product-post-manual-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.product-post-manual-head > div {
  display: grid;
  gap: 3px;
}

.product-post-manual-head strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.product-post-manual-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}

.product-post-manual-head span:not(.soft-tag) {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-post-manual-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.product-post-manual-steps {
  display: grid;
  gap: 7px;
}

.product-post-manual-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-post-manual-step > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.product-post-manual-step > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-post-manual-step strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.product-post-manual-step small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-post-manual-step em {
  color: var(--ink);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.product-post-manual-step.is-manual {
  border-color: rgba(245, 158, 11, 0.28);
  background: color-mix(in srgb, var(--surface) 94%, #fef3c7);
}

.product-post-manual-step.is-warn {
  border-color: rgba(245, 158, 11, 0.32);
}

.product-post-manual-step.is-muted {
  background: color-mix(in srgb, var(--surface) 95%, #dbeafe);
}

.product-post-manual-step.is-ok {
  border-color: rgba(34, 197, 94, 0.22);
}

.product-after-manual-gate {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 90%, #ecfdf5);
}

.product-after-manual-gate.is-manual {
  border-color: rgba(245, 158, 11, 0.26);
  background: color-mix(in srgb, var(--surface-soft) 90%, #fef3c7);
}

.product-after-manual-gate.is-warn {
  border-color: rgba(239, 68, 68, 0.2);
  background: color-mix(in srgb, var(--surface-soft) 92%, #fee2e2);
}

.product-after-manual-gate.is-muted {
  border-color: rgba(100, 116, 139, 0.22);
  background: color-mix(in srgb, var(--surface-soft) 92%, #e2e8f0);
}

.product-after-manual-gate-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.product-after-manual-gate-head > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.product-after-manual-gate-head > div:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.product-after-manual-gate-head strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.product-after-manual-gate-head span:not(.soft-tag) {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-after-manual-gate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.product-after-manual-gate-card {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 148px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-after-manual-gate-card > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.product-after-manual-gate-card strong {
  color: var(--ink);
  font-size: 1rem;
}

.product-after-manual-gate-card small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-after-manual-gate-card .subtle-button {
  justify-self: start;
  margin-top: auto;
}

.product-after-manual-gate-card.is-manual {
  border-color: rgba(245, 158, 11, 0.26);
  background: color-mix(in srgb, var(--surface) 94%, #fef3c7);
}

.product-after-manual-gate-card.is-warn {
  border-color: rgba(239, 68, 68, 0.2);
}

.product-after-manual-gate-card.is-ok {
  border-color: rgba(34, 197, 94, 0.22);
}

.product-completion-conditions {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #eef2ff);
}

.product-completion-conditions-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.product-completion-conditions-head strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.product-completion-conditions-head span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.product-completion-conditions-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.product-completion-conditions-list article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-completion-conditions-list article.is-ok {
  border-color: rgba(34, 197, 94, 0.22);
}

.product-completion-conditions-list article.is-warn {
  border-color: rgba(245, 158, 11, 0.28);
  background: color-mix(in srgb, var(--surface) 94%, #fef3c7);
}

.product-completion-conditions-list span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.product-completion-conditions-list strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.product-completion-conditions-list small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
}

.product-completion-conditions-list .subtle-button {
  justify-self: start;
}

.product-pre-production-checklist {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #ecfdf5);
}

.product-pre-production-checklist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.product-pre-production-checklist-head strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.product-pre-production-checklist-head span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-pre-production-checklist-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.product-pre-production-checklist-list article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-pre-production-checklist-list article.is-ok {
  border-color: rgba(34, 197, 94, 0.22);
}

.product-pre-production-checklist-list article.is-manual {
  border-color: rgba(245, 158, 11, 0.28);
  background: color-mix(in srgb, var(--surface) 94%, #fef3c7);
}

.product-pre-production-checklist-list article.is-warn {
  border-color: rgba(239, 68, 68, 0.2);
  background: color-mix(in srgb, var(--surface) 95%, #fee2e2);
}

.product-pre-production-checklist-list article.is-muted {
  border-color: rgba(100, 116, 139, 0.18);
  background: color-mix(in srgb, var(--surface) 96%, #e2e8f0);
}

.product-pre-production-checklist-list span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.product-pre-production-checklist-list strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.product-pre-production-checklist-list small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
}

.product-pre-production-checklist-list .subtle-button {
  justify-self: start;
}

.product-after-manual-shortcuts {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(59, 130, 246, 0.16);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #eff6ff);
}

.product-after-manual-shortcuts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.product-after-manual-shortcuts-head strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.product-after-manual-shortcuts-head span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-after-manual-shortcuts-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.product-after-manual-shortcuts-list article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-after-manual-shortcuts-list article.is-ok {
  border-color: rgba(34, 197, 94, 0.22);
}

.product-after-manual-shortcuts-list article.is-manual {
  border-color: rgba(245, 158, 11, 0.28);
  background: color-mix(in srgb, var(--surface) 94%, #fef3c7);
}

.product-after-manual-shortcuts-list strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.product-after-manual-shortcuts-list small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
}

.product-after-manual-shortcuts-list .subtle-button {
  justify-self: start;
}

.product-manual-checklist-board {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 88%, #ecfeff);
}

.product-manual-checklist-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.product-manual-checklist-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-manual-checklist-head strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.product-manual-checklist-head span:not(.soft-tag) {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-manual-checklist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}

.product-manual-checklist-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 7px;
}

.product-manual-checklist-summary span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.product-manual-checklist-summary strong {
  color: var(--primary);
  font-size: 1.15rem;
  line-height: 1;
}

.product-manual-checklist-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.product-manual-checklist-rail article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-manual-checklist-rail article.is-warn {
  border-color: rgba(245, 158, 11, 0.28);
  background: color-mix(in srgb, var(--surface) 94%, #fef3c7);
}

.product-manual-checklist-rail article.is-muted {
  border-color: rgba(100, 116, 139, 0.22);
  background: color-mix(in srgb, var(--surface) 94%, #e2e8f0);
}

.product-manual-checklist-rail article.is-ok {
  border-color: rgba(34, 197, 94, 0.22);
}

.product-manual-checklist-rail article > div {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
}

.product-manual-checklist-rail strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.product-manual-checklist-rail span {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 900;
}

.product-manual-checklist-rail small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.42;
}

.product-manual-checklist-rail .subtle-button {
  justify-self: start;
}

.product-manual-checklist-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.product-manual-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.product-manual-checklist-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-manual-checklist-card-head {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.product-manual-checklist-card-head > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.product-manual-checklist-card-head > div:first-child {
  display: grid;
  gap: 3px;
}

.product-manual-checklist-card-head strong {
  color: var(--ink);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.product-manual-checklist-card-head span:not(.soft-tag) {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.product-manual-checklist-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-manual-checklist-card-links a {
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 900;
  text-decoration: none;
}

.product-manual-checklist-card-links a:hover {
  text-decoration: underline;
}

.product-manual-checklist-task-list {
  display: grid;
  gap: 7px;
}

.product-manual-checklist-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #f8fafc);
}

.product-manual-checklist-task > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.product-manual-checklist-task strong {
  color: var(--ink);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.product-manual-checklist-task small,
.product-manual-checklist-task em {
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.product-manual-checklist-task-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.product-manual-checklist-after-check {
  display: grid;
  gap: 4px;
  margin-top: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(59, 130, 246, 0.16);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, #eff6ff);
}

.product-manual-checklist-after-check strong {
  color: var(--primary);
  font-size: 0.72rem;
}

.product-manual-checklist-after-check small {
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.4;
}

.product-manual-checklist-after-check > span {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.product-manual-checklist-task-links a {
  color: var(--primary);
  font-size: 0.73rem;
  font-weight: 900;
  text-decoration: none;
}

.product-manual-checklist-task-links a:hover {
  text-decoration: underline;
}

.product-next-action-strip {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, #e0f2fe);
}

.product-next-action-strip.is-warn {
  border-color: rgba(245, 158, 11, 0.28);
  background: color-mix(in srgb, var(--surface) 86%, #fef3c7);
}

.product-next-action-strip.is-ok {
  border-color: rgba(16, 185, 129, 0.24);
  background: color-mix(in srgb, var(--surface) 88%, #d1fae5);
}

.product-next-action-strip > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-next-action-strip strong {
  color: var(--ink);
}

.product-next-action-strip span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-next-action-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.product-next-action-strip > .subtle-button {
  white-space: nowrap;
}

.product-management-flow,
.product-connection-tags,
.product-connection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.product-management-flow {
  margin: 12px 0 14px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
}

.product-management-flow a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 8px 5px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.product-management-flow a:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--surface-hover);
}

.product-management-flow strong {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
}

.product-setup-matrix {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 88%, #e0f2fe);
}

.product-setup-matrix-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.product-setup-matrix-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.product-setup-matrix-head strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.product-setup-matrix-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-setup-matrix-wrap {
  border-radius: 8px;
}

.product-setup-matrix-table {
  min-width: 980px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
}

.product-setup-matrix-table th,
.product-setup-matrix-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  vertical-align: top;
}

.product-setup-matrix-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.product-setup-matrix-table td {
  color: var(--text);
  font-weight: 700;
}

.product-setup-matrix-table td:first-child {
  min-width: 170px;
}

.product-setup-matrix-table td:nth-child(2) {
  min-width: 150px;
}

.product-setup-matrix-table strong,
.product-setup-matrix-table span,
.product-setup-matrix-table small {
  overflow-wrap: anywhere;
}

.product-setup-matrix-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.product-setup-matrix-link {
  display: grid;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}

.product-setup-matrix-link:hover {
  color: var(--primary);
}

.product-setup-matrix-faq-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.product-setup-matrix-faq-list span,
.product-setup-matrix-faq-list em,
.product-setup-matrix-faq-list a {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  max-width: 100%;
}

.product-setup-matrix-faq-list em,
.product-setup-matrix-faq-list a {
  border-color: rgba(245, 158, 11, 0.28);
  background: color-mix(in srgb, var(--surface) 86%, #fef3c7);
  color: #92400e;
  text-decoration: none;
}

.product-setup-matrix-faq-list a:hover {
  border-color: rgba(245, 158, 11, 0.58);
  color: #78350f;
}

.product-setup-matrix-next {
  white-space: nowrap;
}

.product-setup-matrix-next.is-warn {
  border-color: rgba(245, 158, 11, 0.34);
  background: color-mix(in srgb, var(--surface) 86%, #fef3c7);
  color: #92400e;
}

.product-setup-matrix-next.is-ok {
  border-color: rgba(16, 185, 129, 0.28);
  background: color-mix(in srgb, var(--surface) 90%, #d1fae5);
  color: #047857;
}

.product-category-folder-map {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 88%, #ccfbf1);
}

.product-category-folder-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.product-category-folder-map-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.product-category-folder-map-head strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.product-category-folder-map-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-category-folder-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.product-category-folder-map-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-category-folder-map-card.is-warn {
  border-color: rgba(245, 158, 11, 0.34);
  background: color-mix(in srgb, var(--surface) 92%, #fef3c7);
}

.product-category-folder-map-card.is-ok {
  border-color: rgba(20, 184, 166, 0.26);
}

.product-category-folder-map-card-head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-category-folder-map-card-head strong {
  color: var(--ink);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.product-category-folder-map-card-head span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.product-category-folder-map-folders,
.product-category-folder-map-status {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.product-category-folder-map-folders span,
.product-category-folder-map-folders em {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 2px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.product-category-folder-map-folders em {
  background: color-mix(in srgb, var(--surface) 88%, #ccfbf1);
  color: #0f766e;
}

.product-category-folder-map-folders em.is-warn {
  border-color: rgba(245, 158, 11, 0.34);
  background: color-mix(in srgb, var(--surface) 86%, #fef3c7);
  color: #92400e;
}

.product-category-folder-map-products {
  display: grid;
  gap: 5px;
}

.product-category-folder-map-products a {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #f8fafc);
  color: inherit;
  text-decoration: none;
}

.product-category-folder-map-products a:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
}

.product-category-folder-map-products strong {
  color: var(--ink);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.product-category-folder-map-products small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.product-connection-map {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 88%, #ecfeff);
}

.product-connection-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.product-connection-map-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.product-connection-map-head strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.product-connection-map-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-connection-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.product-connection-map-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 132px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.product-connection-map-card:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
}

.product-connection-map-card.is-warn {
  border-color: rgba(245, 158, 11, 0.34);
  background: color-mix(in srgb, var(--surface) 90%, #fef3c7);
}

.product-connection-map-card.is-ok {
  border-color: rgba(16, 185, 129, 0.24);
}

.product-connection-map-card > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.product-connection-map-card strong {
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.product-connection-map-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-connection-map-card em {
  align-self: end;
  color: var(--primary);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.product-connection-map-flow {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft));
}

.product-connection-map-flow-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.product-connection-map-flow-head strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.product-connection-map-flow-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.4;
}

.product-connection-map-flow-rows {
  display: grid;
  gap: 6px;
}

.product-connection-map-flow-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) auto minmax(220px, 1.5fr) auto auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.product-connection-map-flow-row:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
}

.product-connection-map-flow-row.is-warn {
  border-color: rgba(245, 158, 11, 0.32);
  background: color-mix(in srgb, var(--surface) 91%, #fef3c7);
}

.product-connection-map-flow-row.is-ok {
  border-color: rgba(16, 185, 129, 0.22);
}

.product-connection-map-flow-source,
.product-connection-map-flow-destination,
.product-connection-map-flow-row em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-connection-map-flow-source {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.product-connection-map-flow-arrow {
  color: var(--muted);
  font-weight: 900;
}

.product-connection-map-flow-destination {
  display: grid;
  gap: 2px;
}

.product-connection-map-flow-destination strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.product-connection-map-flow-destination small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
}

.product-connection-map-flow-row em {
  color: var(--primary);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.product-connection-map-unfixed {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 91%, #fffbeb);
}

.product-connection-map-unfixed-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.product-connection-map-unfixed-head strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.product-connection-map-unfixed-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.4;
}

.product-connection-map-unfixed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 8px;
}

.product-connection-map-unfixed-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-connection-map-unfixed-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.product-connection-map-unfixed-title strong {
  color: var(--ink);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.product-connection-map-unfixed-card > small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.product-connection-map-unfixed-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-connection-map-unfixed-list a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.product-connection-map-unfixed-list a:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
}

.product-connection-map-unfixed-list em {
  flex: 0 0 auto;
  color: var(--warn);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.product-line-account-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -2px 0 14px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--field-bg);
}

.product-line-account-note .subtle-button {
  margin-left: auto;
}

.product-line-harness-reflection {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 88%, #e0f2fe);
}

.product-line-harness-reflection-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.product-line-harness-reflection-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-line-harness-reflection-head strong {
  color: var(--ink);
}

.product-line-harness-reflection-head span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-line-harness-reflection-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.product-line-harness-endpoints {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 93%, #e0f2fe);
}

.product-line-harness-endpoints-head {
  display: grid;
  gap: 3px;
}

.product-line-harness-endpoints-head strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.product-line-harness-endpoints-head span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-line-harness-endpoints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.product-line-harness-endpoint-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.product-line-harness-endpoint-card:hover,
.product-line-harness-endpoint-card:focus-visible {
  border-color: rgba(14, 165, 233, 0.42);
  background: color-mix(in srgb, var(--surface) 91%, #e0f2fe);
}

.product-line-harness-endpoint-card span {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(14, 165, 233, 0.24);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 88%, #e0f2fe);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 900;
}

.product-line-harness-endpoint-card strong {
  color: var(--ink);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.product-line-harness-endpoint-card small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.product-line-harness-endpoint-card code {
  display: block;
  max-width: 100%;
  padding: 5px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.product-line-harness-reflection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.product-line-harness-reflection-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-line-harness-reflection-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.product-line-harness-reflection-card strong {
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.1;
}

.product-line-harness-reflection-card small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.product-line-harness-rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.product-line-harness-rule-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-line-harness-rule-card.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, var(--surface) 92%, #dcfce7);
}

.product-line-harness-rule-card.is-warn {
  border-color: rgba(245, 158, 11, 0.34);
  background: color-mix(in srgb, var(--surface) 90%, #fef3c7);
}

.product-line-harness-rule-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.product-line-harness-rule-card strong {
  color: var(--ink);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.product-line-harness-rule-card small {
  color: var(--muted);
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.product-line-harness-test-plan {
  display: grid;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(14, 165, 233, 0.24);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 90%, #f0f9ff);
}

.product-line-harness-test-plan-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.product-line-harness-test-plan-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-line-harness-test-plan-head strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.product-line-harness-test-plan-head span:not(.soft-tag) {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-line-harness-test-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}

.product-line-harness-device-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.product-line-harness-device-guide > div {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 95%, #e0f2fe);
}

.product-line-harness-device-guide strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.product-line-harness-device-guide span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-line-harness-test-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.product-line-harness-test-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-line-harness-test-card-head {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.product-line-harness-test-card-head > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.product-line-harness-test-card-head > div:first-child {
  display: grid;
  gap: 3px;
}

.product-line-harness-test-card-head strong {
  color: var(--ink);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.product-line-harness-test-card-head span:not(.soft-tag) {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.product-line-harness-test-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-line-harness-test-steps li {
  display: grid;
  grid-template-columns: 24px minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 7px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #f8fafc);
}

.product-line-harness-test-steps strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75rem;
}

.product-line-harness-test-steps span {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
}

.product-line-harness-test-steps small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.product-line-harness-test-note {
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, #fffbeb);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-line-harness-test-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.product-line-harness-status-check {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed rgba(14, 165, 233, 0.34);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 91%, #e0f2fe);
}

.product-line-harness-status-head {
  display: grid;
  gap: 3px;
}

.product-line-harness-status-head strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.product-line-harness-status-head span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-line-harness-status-head code {
  display: inline-block;
  max-width: 100%;
  padding: 1px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.product-line-harness-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.product-line-harness-status-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-line-harness-status-item.is-match {
  border-color: rgba(34, 197, 94, 0.36);
  background: color-mix(in srgb, var(--surface) 90%, #dcfce7);
}

.product-line-harness-status-item.is-mismatch {
  border-color: rgba(239, 68, 68, 0.36);
  background: color-mix(in srgb, var(--surface) 90%, #fee2e2);
}

.product-line-harness-status-item.is-missing {
  border-color: rgba(245, 158, 11, 0.38);
  background: color-mix(in srgb, var(--surface) 90%, #fef3c7);
}

.product-line-harness-status-item span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.product-line-harness-status-item strong {
  color: var(--ink);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.product-line-harness-status-item small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.product-line-harness-status-mismatch {
  padding: 6px 7px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 88%, #fef3c7);
  color: var(--text) !important;
  font-weight: 800;
}

.product-line-harness-status-action {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.product-line-harness-status-action:hover {
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--accent));
}

.product-line-harness-status-actual {
  padding-top: 3px;
  border-top: 1px solid var(--line-soft);
  font-weight: 900;
}

.product-line-harness-troubleshoot {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #e0f2fe);
}

.product-line-harness-troubleshoot-head {
  display: grid;
  gap: 3px;
}

.product-line-harness-troubleshoot-head strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.product-line-harness-troubleshoot-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-line-harness-troubleshoot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.product-line-harness-troubleshoot-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.product-line-harness-troubleshoot-card:hover {
  border-color: rgba(14, 165, 233, 0.4);
  background: color-mix(in srgb, var(--surface) 91%, #e0f2fe);
}

.product-line-harness-troubleshoot-card span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.product-line-harness-troubleshoot-card strong {
  color: var(--ink);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.product-line-harness-troubleshoot-card small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.product-line-harness-troubleshoot-card em {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid rgba(14, 165, 233, 0.24);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 88%, #e0f2fe);
  color: var(--accent);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.product-line-harness-status-compare {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #e0f2fe);
}

.product-line-harness-status-compare label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
}

.product-line-harness-status-compare textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  line-height: 1.45;
}

.product-line-harness-status-compare-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-line-harness-status-compare-actions .subtle-button:disabled {
  opacity: 0.62;
  cursor: wait;
}

.product-line-harness-status-result {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.product-line-harness-status-result.is-loading {
  border-color: rgba(14, 165, 233, 0.34);
  background: color-mix(in srgb, var(--surface) 88%, #e0f2fe);
  color: var(--accent);
}

.product-line-harness-status-result.is-ok {
  border-color: rgba(34, 197, 94, 0.36);
  background: color-mix(in srgb, var(--surface) 88%, #dcfce7);
  color: #047857;
}

.product-line-harness-status-result.is-warn {
  border-color: rgba(245, 158, 11, 0.38);
  background: color-mix(in srgb, var(--surface) 88%, #fef3c7);
  color: #92400e;
}

.product-line-harness-reflection-issues {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 9px 10px 9px 27px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, #fef3c7);
  color: var(--text);
  font-weight: 700;
  line-height: 1.45;
}

.product-operation-gate {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 88%, #e0f2fe);
}

.product-operation-gate-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.product-operation-gate-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-operation-gate-head strong {
  color: var(--ink);
  font-size: 1rem;
}

.product-operation-gate-head span:not(.soft-tag) {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-operation-gate-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.product-operation-gate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.product-operation-decision-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.product-operation-decision-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.product-operation-decision-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.product-operation-decision-card.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, var(--surface) 91%, #dcfce7);
}

.product-operation-decision-card.is-warn {
  border-color: rgba(245, 158, 11, 0.36);
  background: color-mix(in srgb, var(--surface) 89%, #fef3c7);
}

.product-operation-decision-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.product-operation-decision-card strong {
  color: var(--ink);
  font-size: 1.15rem;
}

.product-operation-decision-card small {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-operation-decision-card em {
  color: var(--primary);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.product-operation-scope-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.product-operation-scope-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-operation-scope-card.is-ok {
  border-color: rgba(34, 197, 94, 0.26);
  background: color-mix(in srgb, var(--surface) 92%, #dcfce7);
}

.product-operation-scope-card.is-warn {
  border-color: rgba(245, 158, 11, 0.34);
  background: color-mix(in srgb, var(--surface) 90%, #fff7ed);
}

.product-operation-scope-card strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.product-operation-scope-card ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.product-operation-scope-card li {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-operation-final-checklist {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 91%, #f0f9ff);
}

.product-operation-final-checklist-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.product-operation-final-checklist-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-operation-final-checklist-head strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.product-operation-final-checklist-head span:not(.soft-tag) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
}

.product-operation-final-checklist-grid {
  display: grid;
  gap: 7px;
}

.product-operation-final-check {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.product-operation-final-check:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.product-operation-final-check > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
}

.product-operation-final-check > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-operation-final-check strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.product-operation-final-check small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-operation-final-check em,
.product-operation-final-check b {
  font-size: 0.78rem;
  white-space: nowrap;
}

.product-operation-final-check em {
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
}

.product-operation-final-check b {
  color: var(--primary);
}

.product-operation-final-check.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, var(--surface) 92%, #dcfce7);
}

.product-operation-final-check.is-warn {
  border-color: rgba(245, 158, 11, 0.34);
  background: color-mix(in srgb, var(--surface) 90%, #fff7ed);
}

.product-operation-final-check.is-muted {
  border-color: rgba(100, 116, 139, 0.24);
  background: color-mix(in srgb, var(--surface) 94%, #e2e8f0);
}

.product-operation-gate-card {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.product-operation-gate-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.product-operation-gate-card.is-warn {
  border-color: rgba(245, 158, 11, 0.36);
  background: color-mix(in srgb, var(--surface) 88%, #fef3c7);
}

.product-operation-gate-card.is-muted {
  border-color: rgba(100, 116, 139, 0.24);
  background: color-mix(in srgb, var(--surface) 90%, #e2e8f0);
}

.product-operation-gate-card.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, var(--surface) 90%, #dcfce7);
}

.product-operation-blockers {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, #fef3c7);
}

.product-operation-blockers-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.product-operation-blockers-head strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.product-operation-blockers-head span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.product-operation-blocker-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.product-operation-blocker {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.product-operation-blocker:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.product-operation-blocker > span {
  grid-row: span 3;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.product-operation-blocker strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.product-operation-blocker small {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-operation-blocker em {
  color: var(--primary);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.product-operation-blocker.is-muted {
  border-color: rgba(100, 116, 139, 0.24);
  background: color-mix(in srgb, var(--surface) 92%, #e2e8f0);
}

.product-operation-blocker.is-muted > span {
  background: #64748b;
}

.product-operation-gate-card strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.product-operation-gate-card small {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-operation-gate-card em {
  color: var(--primary);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.product-line-account-overview {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 88%, #eff6ff);
}

.product-line-account-overview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.product-line-account-overview-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-line-account-overview-head strong {
  color: var(--ink);
}

.product-line-account-overview-head span,
.product-line-account-overview-summary .meta {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-line-account-overview-summary,
.product-line-account-overview-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.product-line-account-policy-guide,
.line-account-safety-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.product-line-account-policy-guide > div,
.line-account-safety-guide > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 90%, #dbeafe);
}

.line-account-safety-guide > div {
  border-color: rgba(14, 116, 144, 0.16);
  background: color-mix(in srgb, var(--surface) 90%, #ccfbf1);
}

.product-line-account-policy-guide strong,
.line-account-safety-guide strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.product-line-account-policy-guide span,
.line-account-safety-guide span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-line-account-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}

.product-line-account-overview-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-line-account-overview-card.is-muted {
  opacity: 0.72;
}

.product-line-account-overview-card > div:first-child {
  display: grid;
  gap: 2px;
}

.product-line-account-overview-card strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.product-line-account-overview-card span,
.product-line-account-overview-card small,
.product-line-account-overview-card p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-line-account-overview-card p {
  margin: 0;
}

.product-line-account-rule-note {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--accent-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft) 18%);
}

.product-line-account-rule-note strong {
  color: var(--accent-strong);
  font-size: 0.78rem;
}

.product-line-account-rule-note span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.product-line-account-overview-actions {
  display: grid;
  gap: 7px;
  padding-top: 2px;
}

.product-line-account-overview-actions > .inline-form {
  justify-content: flex-start;
}

.product-line-account-overview-actions button {
  min-height: 32px;
}

.compact-profile-switch {
  gap: 5px;
  padding-top: 0;
}

.compact-profile-switch button {
  padding: 5px 8px;
  font-size: 0.76rem;
}

.product-bulk-defaults-box {
  margin-bottom: 12px;
}

.product-assignee-decision-list {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, #dbeafe 14%);
  padding: 12px;
  margin: 12px 0;
}

.product-assignee-decision-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-assignee-decision-head > div {
  display: grid;
  gap: 3px;
}

.product-assignee-decision-head strong {
  color: var(--text);
}

.product-assignee-decision-head span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.product-assignee-next-guide {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, #e0f2fe);
}

.product-assignee-next-guide strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.product-assignee-next-guide span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-assignee-quick-apply {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(190px, 260px) auto;
  align-items: end;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(14, 165, 233, 0.24);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, #e0f2fe);
}

.product-assignee-quick-apply > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-assignee-quick-apply strong {
  color: var(--ink);
}

.product-assignee-quick-apply span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-assignee-quick-apply label {
  margin: 0;
}

.product-assignee-quick-apply select {
  width: 100%;
}

.product-assignee-quick-apply button {
  white-space: nowrap;
}

.product-assignee-decision-grid {
  display: grid;
  gap: 8px;
}

.product-assignee-decision-card {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(190px, .9fr) auto;
  align-items: end;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 254, 250, 0.86);
  padding: 10px;
}

.product-assignee-decision-card > div {
  display: grid;
  gap: 3px;
}

.product-assignee-decision-card strong {
  color: var(--text);
}

.product-assignee-decision-card span,
.product-assignee-decision-card small {
  color: var(--muted);
  font-weight: 700;
}

.product-assignee-decision-card label {
  margin: 0;
}

.product-assignee-decision-card select {
  width: 100%;
}

.product-assignee-decision-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-assignee-decision-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.product-assignee-decision-links a:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--surface) 78%, var(--primary));
}

.product-assignee-decision-card button {
  white-space: nowrap;
}

.product-setting-effect-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, #e0f2fe);
}

.product-setting-effect-note strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.product-setting-effect-note span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, #e0f2fe);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 800;
}

.product-setting-effect-note small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.product-answer-review-list {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, #fef3c7);
}

.product-answer-review-head,
.product-answer-review-product {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.product-answer-review-head > div:first-child,
.product-answer-review-product > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-answer-review-head strong,
.product-answer-review-product strong {
  color: var(--ink);
}

.product-answer-review-head span,
.product-answer-review-product span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-answer-review-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.product-answer-review-focus {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, #fff7ed);
}

.product-answer-review-focus > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-answer-review-focus strong {
  color: var(--ink);
}

.product-answer-review-focus span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-answer-review-focus-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.product-answer-review-focus > .subtle-button {
  white-space: nowrap;
}

.product-answer-review-global-action {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(14, 165, 233, 0.24);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, #e0f2fe);
}

.product-answer-review-global-action > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-answer-review-global-action strong {
  color: var(--ink);
}

.product-answer-review-global-action span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-answer-review-global-action button {
  white-space: nowrap;
}

.product-answer-review-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.product-answer-review-guide > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, #fff7ed);
}

.product-answer-review-guide strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.product-answer-review-guide span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-answer-review-effect-note {
  display: grid;
  grid-template-columns: minmax(200px, auto) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, #dcfce7);
}

.product-answer-review-effect-note strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.product-answer-review-effect-note > span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-answer-review-effect-note > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.product-answer-review-queue {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, #fff7ed);
}

.product-answer-review-queue-head {
  display: grid;
  gap: 3px;
}

.product-answer-review-queue-head strong {
  color: var(--ink);
}

.product-answer-review-queue-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-answer-review-queue-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 7px;
}

.product-answer-review-queue-item {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.product-answer-review-queue-item.is-review {
  border-color: rgba(245, 158, 11, 0.36);
  background: color-mix(in srgb, var(--surface) 88%, #fef3c7);
}

.product-answer-review-queue-item strong {
  color: var(--ink);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.product-answer-review-queue-item small {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-answer-review-queue-item em {
  color: var(--primary);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.product-answer-review-queue-tags,
.product-answer-review-queue-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.product-answer-review-queue-actions {
  padding-top: 2px;
}

.product-answer-review-queue-actions .inline-form {
  justify-content: flex-start;
}

.product-answer-review-queue-actions button,
.product-answer-review-queue-actions .subtle-button {
  min-height: 30px;
}

.product-answer-review-product-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.product-answer-review-product-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}

.product-answer-review-inline-action {
  margin: 0;
}

.product-answer-review-inline-action button {
  min-height: 30px;
}

.product-answer-review-groups {
  display: grid;
  gap: 10px;
}

.product-answer-review-group {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-answer-review-items {
  display: grid;
  gap: 7px;
}

.product-answer-review-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #eef2f7);
}

.product-answer-review-item.is-fixed {
  background: color-mix(in srgb, var(--surface) 92%, #dcfce7);
}

.product-answer-review-item.is-ready,
.product-answer-review-item.is-review {
  background: color-mix(in srgb, var(--surface) 90%, #fef3c7);
}

.product-answer-review-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
}

.product-answer-review-main strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.product-answer-review-main small {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-answer-review-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.product-answer-review-excerpt {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, #f8fafc);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.product-answer-review-excerpt > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-answer-review-excerpt strong {
  color: var(--ink);
  font-size: 0.75rem;
}

.product-answer-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.product-answer-review-actions .inline-form {
  justify-content: flex-end;
}

.product-answer-draft-editor {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 90%, #e0f2fe);
}

.product-answer-draft-editor-head,
.product-answer-draft-summary,
.product-answer-draft-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.product-answer-draft-editor-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-answer-draft-editor-head strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.product-answer-draft-editor-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-answer-draft-form,
.product-answer-draft-rows {
  display: grid;
  gap: 8px;
}

.product-answer-draft-row {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-answer-draft-row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.product-answer-draft-row summary > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.product-answer-draft-row summary strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.product-answer-draft-row summary small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.product-answer-draft-row-tags {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}

.product-answer-draft-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.product-answer-draft-meta a {
  color: var(--primary);
  font-weight: 800;
}

.product-answer-draft-row label {
  margin: 0;
}

.product-answer-draft-row textarea {
  min-height: 118px;
  resize: vertical;
}

.product-answer-draft-actions button {
  min-height: 34px;
}

.product-bulk-defaults-form {
  display: grid;
  gap: 10px;
}

.product-bulk-defaults-table-wrap {
  overflow-x: auto;
}

.product-bulk-defaults-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.product-bulk-defaults-table th,
.product-bulk-defaults-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 8px;
  text-align: left;
  vertical-align: middle;
}

.product-bulk-defaults-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  background: var(--surface-soft);
}

.product-bulk-defaults-table td:first-child {
  min-width: 190px;
}

.product-bulk-defaults-table td:nth-child(2) {
  min-width: 170px;
  color: var(--muted);
  font-weight: 700;
}

.product-bulk-defaults-table select {
  min-width: 180px;
}

.product-bulk-defaults-table .is-muted-row {
  opacity: .68;
}

.compact-check {
  margin: 0;
  white-space: nowrap;
}

.product-bulk-defaults-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.product-bulk-routing-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.product-bulk-folder-create-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  flex: 1 1 100%;
}

.product-bulk-folder-create-row label {
  margin: 0;
}

.product-bulk-folder-create-row select {
  width: 100%;
}

.support-product-inline-folder-create {
  padding: 9px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.support-product-inline-folder-create summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
}

.support-product-inline-folder-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.product-connection-panel {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
}

.product-connection-actions {
  margin-top: 8px;
}

.product-next-steps {
  display: grid;
  gap: 6px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  padding: 10px 12px;
  margin: 8px 0;
}

.product-next-steps.is-complete {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.product-next-steps strong {
  color: var(--text);
}

.product-next-steps ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}

.product-next-steps p {
  margin: 0;
  color: var(--muted);
}

.product-line-intake-preview {
  display: grid;
  gap: 8px;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  background: rgba(240, 249, 255, 0.78);
  padding: 10px 12px;
  margin: 8px 0;
}

.product-line-intake-head,
.product-line-intake-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.product-line-intake-head > div {
  display: grid;
  gap: 2px;
}

.product-line-intake-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.product-line-intake-flow {
  display: grid;
  gap: 6px;
}

.product-line-intake-row {
  display: grid;
  grid-template-columns: 28px minmax(180px, 1fr) minmax(220px, 1.1fr) auto;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px;
}

.product-line-intake-row:hover {
  border-color: #7dd3fc;
  background: rgba(255, 255, 255, 0.92);
}

.product-line-intake-row.is-warn {
  border-color: #fed7aa;
}

.product-line-intake-row.is-ok .product-line-intake-step {
  background: #dcfce7;
  color: #166534;
}

.product-line-intake-row.is-warn .product-line-intake-step {
  background: #ffedd5;
  color: #9a3412;
}

.product-line-intake-row.is-muted .product-line-intake-step {
  background: #eef2f7;
  color: var(--muted);
}

.product-line-intake-step {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
}

.product-line-intake-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.product-line-intake-main small,
.product-line-intake-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.product-line-intake-row em {
  color: var(--accent);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .product-line-intake-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .product-line-intake-note,
  .product-line-intake-row em {
    grid-column: 2;
  }
}

.product-faq-status-list {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 254, 250, 0.72);
  padding: 10px 12px;
  margin: 8px 0;
}

.product-line-public-status-list {
  display: grid;
  gap: 8px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: rgba(239, 246, 255, 0.72);
  padding: 10px 12px;
  margin: 8px 0;
}

.product-line-public-status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.product-line-public-status-tags,
.product-line-public-faq-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-line-public-missing {
  margin: 0;
  padding-left: 18px;
  color: var(--warning-text);
  font-weight: 700;
}

.product-line-public-faq-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
}

.product-line-public-faq-item small {
  color: var(--muted);
  font-weight: 700;
}

.product-line-public-faq-preview {
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
  border-left: 1px solid var(--line-soft);
  padding-left: 6px;
}

.product-line-public-faq-preview:hover {
  text-decoration: underline;
}

.product-readiness-board {
  border-color: rgba(14, 116, 144, 0.22);
  background: color-mix(in srgb, var(--surface-soft) 84%, #ecfeff);
}

.product-readiness-list {
  display: grid;
  gap: 10px;
}

.product-readiness-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.product-readiness-summary-card {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-readiness-summary-card strong {
  color: var(--ink);
  font-size: 1.14rem;
  line-height: 1;
}

.product-readiness-summary-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.product-readiness-summary-card.is-warn {
  border-color: rgba(245, 158, 11, 0.38);
  background: color-mix(in srgb, var(--surface) 82%, #fef3c7);
}

.product-readiness-summary-card.is-muted {
  border-color: rgba(100, 116, 139, 0.26);
  background: color-mix(in srgb, var(--surface) 84%, #e2e8f0);
}

.product-readiness-summary-card.is-ok {
  border-color: rgba(34, 197, 94, 0.3);
  background: color-mix(in srgb, var(--surface) 84%, #dcfce7);
}

.product-decision-focus {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 88%, #ecfeff);
}

.product-decision-focus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.product-decision-focus-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-decision-focus-head strong {
  color: var(--ink);
  font-size: 1rem;
}

.product-decision-focus-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.product-human-decision-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.product-human-decision-card {
  display: grid;
  gap: 5px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.product-human-decision-card:hover {
  border-color: var(--primary);
}

.product-human-decision-card strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.product-human-decision-card span {
  color: var(--primary);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.product-human-decision-card small {
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.product-human-decision-card.is-total {
  border-color: rgba(14, 116, 144, 0.28);
  background: color-mix(in srgb, var(--surface) 88%, #ccfbf1);
}

.product-human-decision-card.is-warn {
  border-color: rgba(245, 158, 11, 0.36);
  background: color-mix(in srgb, var(--surface) 88%, #fef3c7);
}

.product-human-decision-card.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, var(--surface) 90%, #dcfce7);
}

.product-human-decision-card.is-muted {
  border-color: rgba(100, 116, 139, 0.24);
  background: color-mix(in srgb, var(--surface) 90%, #e2e8f0);
}

.product-human-setup-queue {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, #ecfeff);
}

.product-human-setup-queue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.product-human-setup-queue-head strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.product-human-setup-queue-head span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.product-human-setup-queue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.product-human-setup-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.product-human-setup-step:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.product-human-setup-step > span {
  grid-row: span 3;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  font-size: 0.82rem;
}

.product-human-setup-step strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.product-human-setup-step em {
  justify-self: end;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 80%, #dbeafe);
  color: var(--primary);
  font-style: normal;
  font-weight: 900;
  font-size: 0.74rem;
}

.product-human-setup-step small {
  grid-column: 2 / -1;
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.product-human-setup-step b {
  grid-column: 2 / -1;
  color: var(--primary);
  font-size: 0.76rem;
}

.product-human-setup-step.is-warn {
  border-color: rgba(245, 158, 11, 0.36);
  background: color-mix(in srgb, var(--surface) 88%, #fef3c7);
}

.product-human-setup-step.is-muted {
  border-color: rgba(100, 116, 139, 0.24);
  background: color-mix(in srgb, var(--surface) 90%, #e2e8f0);
}

.product-human-setup-step.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, var(--surface) 90%, #dcfce7);
}

.product-decision-completion-preview {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(59, 130, 246, 0.16);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, #eff6ff);
}

.product-decision-completion-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.product-decision-completion-head strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.product-decision-completion-head span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.product-decision-completion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.product-decision-completion-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-decision-completion-card.is-warn {
  border-color: rgba(245, 158, 11, 0.34);
  background: color-mix(in srgb, var(--surface) 89%, #fef3c7);
}

.product-decision-completion-card.is-muted {
  border-color: rgba(100, 116, 139, 0.24);
  background: color-mix(in srgb, var(--surface) 91%, #e2e8f0);
}

.product-decision-completion-card.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, var(--surface) 90%, #dcfce7);
}

.product-decision-completion-card strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.product-decision-completion-card span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
}

.product-decision-completion-card em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.product-decision-completion-card small {
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.product-decision-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.product-decision-focus-card {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.product-decision-focus-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.product-decision-focus-card.is-warn {
  border-color: rgba(245, 158, 11, 0.36);
  background: color-mix(in srgb, var(--surface) 88%, #fef3c7);
}

.product-decision-focus-card.is-muted {
  border-color: rgba(100, 116, 139, 0.24);
  background: color-mix(in srgb, var(--surface) 90%, #e2e8f0);
}

.product-decision-focus-card.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, var(--surface) 90%, #dcfce7);
}

.product-decision-focus-card > strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.product-decision-focus-card small {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-decision-focus-card em {
  color: var(--primary);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.product-decision-next-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.product-decision-next-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, #e0f2fe);
  color: var(--text);
  text-decoration: none;
}

.product-decision-next-step:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.product-decision-next-step > span {
  grid-row: span 3;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  font-size: 0.82rem;
}

.product-decision-next-step > strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.product-decision-next-step small {
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.product-decision-next-step em {
  color: var(--primary);
  font-style: normal;
  font-weight: 800;
  font-size: 0.78rem;
}

.product-decision-next-step.is-warn {
  border-color: rgba(245, 158, 11, 0.38);
  background: color-mix(in srgb, var(--surface) 87%, #fef3c7);
}

.product-decision-next-step.is-muted {
  border-color: rgba(100, 116, 139, 0.22);
  background: color-mix(in srgb, var(--surface) 90%, #e2e8f0);
}

.product-decision-next-step.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, var(--surface) 90%, #dcfce7);
}

.product-pending-setup-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 90%, #f1f5f9);
}

.product-pending-setup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.product-pending-setup-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-pending-setup-head strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.product-pending-setup-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.product-pending-setup-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-pending-setup-empty {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, #dcfce7);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.product-pending-setup-type-counts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-pending-setup-type-counts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, #eef2f7);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.product-pending-setup-type-counts strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.product-pending-decision-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}

.product-pending-decision-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.product-pending-decision-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.product-pending-decision-card.is-warn {
  border-color: rgba(245, 158, 11, 0.36);
  background: color-mix(in srgb, var(--surface) 88%, #fef3c7);
}

.product-pending-decision-card.is-muted {
  border-color: rgba(100, 116, 139, 0.24);
  background: color-mix(in srgb, var(--surface) 90%, #e2e8f0);
}

.product-pending-decision-card.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, var(--surface) 90%, #dcfce7);
}

.product-pending-decision-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.product-pending-decision-card strong {
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.1;
}

.product-pending-decision-card small {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-pending-decision-card em {
  color: var(--primary);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.product-pending-setup-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}

.product-pending-setup-item {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.product-pending-setup-item:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.product-pending-setup-item.is-warn {
  border-color: rgba(245, 158, 11, 0.34);
  background: color-mix(in srgb, var(--surface) 90%, #fef3c7);
}

.product-pending-setup-item.is-muted {
  border-color: rgba(100, 116, 139, 0.2);
  background: color-mix(in srgb, var(--surface) 93%, #e2e8f0);
}

.product-pending-setup-item strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.product-pending-setup-item small {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-pending-setup-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}

.product-pending-setup-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.product-pending-setup-links a:first-child {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--surface) 86%, var(--primary));
}

.product-pending-setup-links a:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--surface) 78%, var(--primary));
}

.product-pending-decision-note {
  margin-top: 2px;
  padding: 7px;
  border: 1px dashed rgba(100, 116, 139, 0.25);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, #eef2f7);
}

.product-pending-decision-note summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.product-pending-decision-note summary span {
  color: var(--ink);
}

.product-pending-decision-note summary small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
}

.product-pending-decision-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
}

.product-pending-decision-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.product-pending-decision-form label.is-wide {
  grid-column: 1 / -1;
}

.product-pending-decision-form select,
.product-pending-decision-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}

.product-pending-decision-form select {
  min-height: 32px;
  padding: 5px 8px;
}

.product-pending-decision-form textarea {
  min-height: 54px;
  padding: 7px 8px;
  resize: vertical;
}

.product-pending-decision-form .check {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: normal;
}

.product-pending-decision-form button {
  align-self: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 82%, var(--primary));
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.product-pending-decision-form button:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--surface) 72%, var(--primary));
}

.product-pending-setup-more-details {
  padding: 8px 10px;
  border: 1px dashed rgba(100, 116, 139, 0.3);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #e2e8f0);
}

.product-pending-setup-more-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.product-pending-setup-more-details summary span {
  color: var(--ink);
}

.product-pending-setup-more-details summary small {
  color: var(--muted);
  font-size: 0.78rem;
}

.product-pending-setup-list.is-hidden-list {
  margin-top: 8px;
}

.product-setup-action-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.product-setup-action-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.product-setup-action-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.product-setup-action-card span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.product-setup-action-card strong {
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
}

.product-setup-action-card small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.product-setup-action-card.is-warn {
  border-color: rgba(245, 158, 11, 0.36);
  background: color-mix(in srgb, var(--surface) 86%, #fef3c7);
}

.product-setup-action-card.is-muted {
  border-color: rgba(100, 116, 139, 0.24);
  background: color-mix(in srgb, var(--surface) 88%, #e2e8f0);
}

.product-setup-action-card.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, var(--surface) 88%, #dcfce7);
}

.product-readiness-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.product-readiness-item.is-warn {
  border-color: rgba(245, 158, 11, 0.36);
}

.product-readiness-item.is-ok {
  border-color: rgba(34, 197, 94, 0.3);
}

.product-readiness-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-readiness-head strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.product-readiness-head .subtle-button {
  margin-left: auto;
}

.product-readiness-next {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px dashed rgba(245, 158, 11, 0.45);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 86%, #fef3c7);
}

.product-readiness-next > strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.product-readiness-next > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-readiness-next a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.product-readiness-next a:hover {
  border-color: var(--primary);
}

.product-readiness-next small {
  color: var(--muted);
  font-weight: 700;
}

.product-readiness-complete {
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 82%, #dcfce7);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.product-readiness-impact {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, #fff7ed);
}

.product-readiness-impact > strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.product-readiness-impact > div {
  display: grid;
  gap: 6px;
}

.product-readiness-impact-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(220px, 1.4fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.product-readiness-impact-row:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
}

.product-readiness-impact-row.is-warn {
  border-color: rgba(245, 158, 11, 0.34);
}

.product-readiness-impact-row.is-muted {
  border-color: rgba(100, 116, 139, 0.22);
}

.product-readiness-impact-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.product-readiness-impact-row em {
  color: var(--ink);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.product-readiness-impact-row small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.product-readiness-impact-row b {
  color: var(--primary);
  font-size: 0.76rem;
  white-space: nowrap;
}

.product-readiness-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
}

.product-readiness-check {
  display: grid;
  gap: 3px;
  min-height: 74px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  color: inherit;
  text-decoration: none;
}

.product-readiness-check span {
  justify-self: start;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 700;
}

.product-readiness-check.is-ready span {
  background: #dcfce7;
  color: #166534;
}

.product-readiness-check.is-missing span {
  background: #fef3c7;
  color: #92400e;
}

.product-readiness-check strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.product-readiness-check small {
  color: var(--muted);
  line-height: 1.35;
}

.product-faq-status-list > strong {
  color: var(--text);
}

.product-faq-status-items {
  display: grid;
  gap: 6px;
}

.product-faq-status-item {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) auto minmax(260px, 1.4fr);
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  padding-top: 6px;
}

.product-faq-status-item small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.product-faq-link-control {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.product-faq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-faq-link-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 6px;
}

.product-faq-link-form select {
  min-width: 0;
}

.product-routing-status-list {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.78);
  padding: 10px 12px;
  margin: 8px 0;
}

.product-routing-status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.product-routing-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.product-routing-default-create {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}

.product-routing-status-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-routing-status-items {
  display: grid;
  gap: 6px;
}

.product-routing-status-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(0, 1.1fr) auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  padding-top: 6px;
}

.product-routing-title {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-weight: 800;
}

.product-routing-title small {
  color: var(--muted);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.product-knowledge-status-list {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.78);
  padding: 10px 12px;
  margin: 8px 0;
}

.product-knowledge-status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.product-knowledge-status-tags,
.product-knowledge-status-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-knowledge-status-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1.15fr) minmax(180px, 1.15fr) auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  border-top: 1px solid var(--line-soft);
  padding-top: 6px;
}

.product-knowledge-state-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.product-knowledge-line-state {
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.product-knowledge-line-state small {
  display: block;
  overflow-wrap: anywhere;
}

.product-knowledge-inline-form {
  justify-content: flex-start;
  gap: 6px;
}

.product-knowledge-inline-form button {
  min-height: 30px;
  white-space: nowrap;
}

.product-knowledge-fix-box {
  display: grid;
  gap: 6px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
  padding: 10px;
}

.product-knowledge-draft-box {
  display: grid;
  gap: 6px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
  padding: 10px;
}

.product-knowledge-fix-form {
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.product-knowledge-fix-form span {
  overflow-wrap: anywhere;
}

.product-knowledge-title {
  display: grid;
  gap: 2px;
  overflow-wrap: anywhere;
}

.product-knowledge-title small {
  color: var(--muted);
}

.line-account-management {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
}

.line-account-list {
  gap: 8px;
}

.line-account-policy-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.line-account-policy-box > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.line-account-policy-box strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.line-account-policy-box span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.line-account-policy-box code {
  font-size: 0.78rem;
}

.line-account-ai-readiness {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.line-account-ai-readiness > div {
  display: grid;
  gap: 3px;
}

.line-account-ai-readiness strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.line-account-ai-readiness span,
.line-account-ai-readiness p,
.line-account-ai-readiness li {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.line-account-ai-readiness ul {
  margin: 0;
  padding-left: 18px;
}

.line-account-ai-readiness p {
  margin: 0;
}

.line-account-ai-readiness.is-warn {
  border-color: #fde68a;
  background: #fffbeb;
}

.line-account-ai-readiness.is-ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.line-account-bulk-actions {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.line-account-bulk-actions > div:first-child {
  display: grid;
  gap: 3px;
}

.line-account-bulk-actions strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.line-account-bulk-actions span,
.line-account-bulk-actions small {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.line-account-bulk-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.line-account-bulk-action-buttons .inline-form {
  margin: 0;
}

.line-account-bulk-action-buttons button {
  min-height: 32px;
  padding: 6px 12px;
}

.line-account-item .settings-folder-title,
.line-account-add-folder .settings-folder-title {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.line-account-profile-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.line-account-profile-switch > span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  margin-right: 2px;
}

.line-account-profile-switch .inline-form {
  margin: 0;
}

.line-account-profile-switch button {
  min-height: 30px;
  padding: 5px 10px;
}

.line-account-profile-switch button.active,
.line-account-profile-switch button:disabled {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  cursor: default;
  opacity: 1;
}

.line-account-rule-summary {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.line-account-rule-summary strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.line-account-rule-summary span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.line-account-rule-summary.is-note {
  border-color: var(--accent-soft);
  background: color-mix(in srgb, var(--surface) 78%, var(--accent-soft) 22%);
}

.line-account-preset-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.line-account-preset-actions > span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  margin-right: 2px;
}

.line-account-preset-actions .inline-form {
  margin: 0;
}

.line-account-preset-actions button {
  min-height: 30px;
  padding: 5px 10px;
}

.line-account-operation-note {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
}

.line-account-operation-note strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.line-account-operation-note span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.line-account-operation-note.is-ai-on {
  border-color: #fde68a;
  background: #fffbeb;
}

.line-account-operation-note.is-ai-off {
  border-color: #cbd5e1;
  background: color-mix(in srgb, var(--surface-soft) 82%, #e2e8f0 18%);
}

.setting-help.warn-help {
  padding: 8px 10px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
}

.soft-tag.warn {
  background: #fef3c7;
  color: #92400e;
}

.soft-tag.muted {
  background: #e2e8f0;
  color: #475569;
}

.knowledge-line-link-box {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
  margin: 10px 0;
}

.knowledge-line-link-box > strong {
  color: var(--text);
}

.knowledge-quick-approve-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, #dbeafe 18%);
  padding: 12px;
  margin: 10px 0;
}

.knowledge-quick-approve-form.compact {
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--surface-soft) 86%, #dbeafe 14%);
}

.knowledge-quick-approve-form strong {
  color: var(--text);
}

.knowledge-quick-approve-form .setting-help {
  margin: 4px 0 0;
}

.knowledge-quick-approve-form button {
  min-width: 220px;
}

.product-knowledge-folder-list {
  margin-top: 12px;
}

.product-knowledge-folder {
  background: var(--surface);
}

.product-knowledge-folder-body {
  background: rgba(232, 238, 235, 0.28);
}

.product-knowledge-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 254, 250, 0.78);
  padding: 10px 12px;
}

.product-knowledge-meta strong {
  color: var(--text);
}

.product-knowledge-actions {
  margin: 0 0 0 auto;
  justify-content: flex-end;
}

.knowledge-line-readiness {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 254, 250, 0.78);
  padding: 10px 12px;
}

.knowledge-line-readiness-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.knowledge-line-readiness-head strong {
  color: var(--text);
}

.line-readiness-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.compact-link-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}

.compact-link-list li + li {
  margin-top: 4px;
}

.knowledge-link-suggestion-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.knowledge-link-suggestion-list .inline-form {
  margin: 0;
}

.knowledge-product-group-row {
  display: contents;
}

.support-product-group-row {
  display: contents;
}

.support-product-group-custom.is-hidden {
  display: none;
}

.knowledge-product-name-row {
  display: contents;
}

.knowledge-product-name-custom.is-hidden {
  display: none;
}

.knowledge-answer-list {
  display: grid;
  gap: 8px;
}

.product-knowledge-bulk-editor {
  border-color: var(--line);
  background: var(--field-bg);
  margin-bottom: 2px;
}

.product-knowledge-bulk-editor summary {
  background: var(--surface);
}

.product-knowledge-bulk-editor.is-direct {
  border-color: var(--warning-text);
  background: var(--warning-bg);
}

.product-knowledge-bulk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}

.product-knowledge-bulk-head strong {
  color: var(--warning-text);
}

.product-knowledge-bulk-editor.is-direct .setting-edit-form {
  background: var(--field-bg);
}

.product-knowledge-delete-form {
  border-top: 1px solid var(--line-soft);
  padding: 10px;
  margin: 0;
}

.knowledge-copy-box {
  border-color: var(--line-soft);
  background: rgba(255, 254, 250, 0.7);
  margin: 8px 0;
}

.knowledge-copy-box summary {
  background: rgba(232, 238, 235, 0.34);
}

.knowledge-answer-example {
  margin-bottom: 0;
}

.setting-editor:target,
.settings-folder:target,
.knowledge-answer-example:target,
.is-hash-target {
  border-color: var(--warning-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning-text) 18%, transparent);
}

.setting-editor:target > summary,
.settings-folder:target > summary,
.knowledge-answer-example:target > summary,
.is-hash-target > summary {
  background: color-mix(in srgb, var(--warning-bg) 72%, var(--surface));
}

.knowledge-answer-create-folder,
.knowledge-new-product-folder {
  margin-top: 10px;
}
.setting-status span.muted { color: var(--muted); font-weight: 800; }

.setting-status .meta {
  display: block;
  margin-top: 6px;
  text-align: left;
}

.setting-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
}

.setting-check {
  min-height: 82px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.setting-check strong,
.setting-check span,
.setting-check small {
  display: block;
}

.setting-check strong {
  margin-bottom: 6px;
  color: #334155;
  font-size: 12px;
}

.setting-check span {
  font-weight: 800;
}

.setting-check span.ok { color: #047857; }
.setting-check span.warn { color: var(--warning-text); }
.setting-check span.muted { color: var(--muted); }

.setting-check small {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
}

.setting-help {
  color: var(--muted);
  line-height: 1.7;
}

.preview-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  margin-top: 12px;
  padding: 14px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.summary-grid span {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  padding: 9px;
}

.summary-grid strong {
  display: block;
  color: var(--text);
  font-size: 20px;
}

.muted-text {
  color: var(--muted);
  font-size: 12px;
}

.permission-group-row td {
  background: var(--surface-muted);
  color: var(--text);
  font-weight: 800;
}

.permission-status {
  display: inline-flex;
  min-width: 70px;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
}

.permission-status.allow {
  background: var(--success-bg);
  color: var(--success-text);
}

.permission-status.limited {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.permission-status.deny {
  background: var(--surface-muted);
  color: var(--muted);
}

.permission-extension-panel {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 14px;
}

.permission-extension-table td {
  vertical-align: top;
}

.coverage-status {
  display: inline-flex;
  min-width: 76px;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
}

.coverage-status.implemented {
  background: var(--success-bg);
  color: var(--success-text);
}

.coverage-status.partial {
  background: var(--info-bg);
  color: var(--info-text);
}

.coverage-status.later {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.coverage-status.hold {
  background: var(--surface-muted);
  color: var(--muted);
}

.coverage-status.missing,
.coverage-mini-status.missing {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.feature-review-summary {
  margin: 8px 0 10px;
}

.feature-review-summary a {
  color: inherit;
  text-decoration: none;
}

.coverage-table-wrap {
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.coverage-table-wrap .coverage-table {
  min-width: 1660px;
  margin: 0;
}

.feature-review-status {
  display: inline-flex;
  min-width: 70px;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
}

.feature-review-status.ok {
  background: var(--success-bg);
  color: var(--success-text);
}

.feature-review-status.warn {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.feature-review-status.later {
  background: var(--info-bg);
  color: var(--info-text);
}

.feature-review-status.hold,
.feature-review-status.muted {
  background: var(--surface-muted);
  color: var(--muted);
}

.feature-review-current {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.feature-review-current small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.feature-review-current p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.feature-review-edit {
  min-width: 260px;
}

.feature-review-form {
  display: grid;
  gap: 6px;
}

.feature-review-form select,
.feature-review-form textarea {
  width: 100%;
  min-width: 0;
}

.feature-review-form textarea {
  min-height: 54px;
  resize: vertical;
}

.feature-review-form button {
  justify-self: start;
  min-height: 30px;
  padding: 6px 10px;
}

.coverage-id {
  display: inline-flex;
  justify-content: center;
  min-width: 58px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 7px;
  white-space: nowrap;
}

.coverage-id-link {
  color: var(--blue);
  text-decoration: none;
}

.coverage-id-link:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.coverage-requirements {
  display: inline-flex;
  max-width: 180px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  white-space: normal;
}

.coverage-priority {
  display: inline-flex;
  justify-content: center;
  min-width: 58px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  padding: 3px 8px;
  white-space: nowrap;
}

.coverage-priority.must {
  background: #fee2e2;
  color: #991b1b;
}

html[data-theme="dark"] .coverage-priority.must {
  background: #442021;
  color: #fecaca;
}

.coverage-priority.should {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.coverage-priority.could {
  background: var(--info-bg);
  color: var(--info-text);
}

.coverage-priority.hold {
  background: var(--surface-muted);
  color: var(--muted);
}

.coverage-area {
  display: inline-flex;
  justify-content: center;
  min-width: 88px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  padding: 3px 7px;
  white-space: nowrap;
}

.coverage-area-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.coverage-area-summary-title {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.coverage-area-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  min-height: 40px;
  padding: 7px 9px;
  text-decoration: none;
}

.coverage-area-card:hover,
.coverage-area-card.active {
  border-color: var(--blue);
  background: var(--info-bg);
}

.coverage-area-card strong {
  color: var(--blue);
  font-size: 18px;
}

.coverage-area-card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.coverage-area-card-breakdown {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.coverage-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  margin: 10px 0 12px;
  padding: 10px;
}

.coverage-focus-title,
.coverage-focus-card {
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 8px 10px;
}

.coverage-focus-title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 8px;
}

.coverage-focus-title span,
.coverage-focus-title small,
.coverage-focus-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.coverage-focus-title strong,
.coverage-focus-card strong {
  color: var(--blue);
  font-size: 22px;
  line-height: 1;
}

.coverage-focus-title small {
  grid-column: 1 / -1;
}

.coverage-focus-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.coverage-focus-card:hover {
  border-color: var(--blue);
  background: var(--info-bg);
}

.readiness-coverage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 170px;
}

.readiness-coverage .coverage-id {
  text-decoration: none;
}

.readiness-coverage .coverage-id:hover {
  border-color: var(--blue);
  background: var(--info-bg);
}

.readiness-coverage .coverage-requirements {
  width: 100%;
}

.outlook-checklist-table,
.line-checklist-table,
.bot-checklist-table,
.teams-checklist-table {
  margin-bottom: 14px;
}

.outlook-checklist-table .audit-detail-cell,
.line-checklist-table .audit-detail-cell,
.bot-checklist-table .audit-detail-cell,
.teams-checklist-table .audit-detail-cell {
  min-width: 150px;
}

.outlook-checklist-table td:nth-child(4),
.outlook-checklist-table td:nth-child(5),
.line-checklist-table td:nth-child(4),
.line-checklist-table td:nth-child(5),
.bot-checklist-table td:nth-child(4),
.bot-checklist-table td:nth-child(5),
.teams-checklist-table td:nth-child(4),
.teams-checklist-table td:nth-child(5) {
  line-height: 1.55;
}

.integration-spec-grid,
.integration-code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}

.integration-spec-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px 12px;
}

.integration-spec-card strong {
  color: var(--text);
}

.integration-spec-card span {
  color: var(--blue);
  font-weight: 800;
}

.integration-spec-card small {
  color: var(--muted);
}

.integration-spec-table {
  margin-bottom: 12px;
}

.integration-code-grid h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 14px;
}

.integration-code {
  min-height: 180px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
  padding: 12px;
  white-space: pre-wrap;
}

.coverage-mini-status {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  padding: 3px 6px;
  white-space: nowrap;
}

.coverage-mini-status.implemented {
  background: var(--success-bg);
  color: var(--success-text);
}

.coverage-mini-status.partial {
  background: var(--info-bg);
  color: var(--info-text);
}

.coverage-mini-status.later {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.coverage-mini-status.hold {
  background: var(--surface-muted);
  color: var(--muted);
}

.coverage-work-queue,
.mvp-next-path-panel,
.handoff-package-panel,
.goal-completion-panel,
.goal-evidence-check-panel,
.external-confirmation-impact-panel,
.coverage-boundary-panel,
.goal-next-action-panel,
.priority-implementation-panel,
.maildealer-cancellation-readiness-panel,
.maildealer-export-execution-panel,
.production-execution-precheck-panel,
.development-task-panel,
.feature-evidence-panel,
.implementation-map-panel,
.coverage-decision-panel,
.adoption-criteria-panel,
.requirement-trace-panel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px;
  margin: 10px 0 12px;
}

.coverage-work-queue h2,
.mvp-next-path-panel h2,
.handoff-package-panel h2,
.goal-completion-panel h2,
.goal-evidence-check-panel h2,
.external-confirmation-impact-panel h2,
.coverage-boundary-panel h2,
.goal-next-action-panel h2,
.priority-implementation-panel h2,
.maildealer-cancellation-readiness-panel h2,
.maildealer-export-execution-panel h3,
.production-execution-precheck-panel h2,
.development-task-panel h2,
.feature-evidence-panel h2,
.implementation-map-panel h2,
.coverage-decision-panel h2,
.adoption-criteria-panel h2,
.requirement-trace-panel h2 {
  margin: 0;
}

.mvp-next-path-summary {
  margin: 8px 0 10px;
}

.goal-next-action-summary {
  margin: 8px 0 10px;
}

.goal-blocking-focus-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  margin: 10px 0;
}

.goal-blocking-focus-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.goal-blocking-focus-head h3 {
  margin: 0;
  font-size: 14px;
}

.goal-blocking-focus-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.goal-blocking-focus-summary {
  margin: 8px 0;
}

.goal-blocking-focus-list {
  display: grid;
  gap: 8px;
}

.goal-blocking-focus-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 9px;
}

.goal-blocking-focus-item p,
.goal-blocking-focus-item small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.goal-blocking-focus-item small {
  margin-top: 3px;
}

.goal-evidence-check-summary {
  margin: 8px 0 10px;
}

.external-confirmation-impact-summary {
  margin: 8px 0 10px;
}

.maildealer-cancellation-readiness-summary {
  margin: 8px 0 10px;
}

.cancellation-blocking-steps {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  margin: 10px 0;
}

.cancellation-blocking-steps h3 {
  margin: 0;
}

.cancellation-blocking-step-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.cancellation-blocking-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 8px;
}

.cancellation-blocking-step p,
.cancellation-blocking-step small {
  display: block;
  margin: 3px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.coverage-boundary-summary {
  margin: 8px 0 10px;
}

.external-confirmation-impact-table .audit-detail-cell {
  min-width: 170px;
}

.maildealer-cancellation-readiness-table-wrap {
  overflow-x: auto;
}

.maildealer-cancellation-readiness-table .audit-detail-cell {
  min-width: 170px;
}

.maildealer-cancellation-readiness-table .audit-detail-cell small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.5;
}

.coverage-boundary-table .audit-detail-cell {
  min-width: 170px;
}

.priority-implementation-summary {
  margin: 8px 0 10px;
}

.maildealer-export-execution-summary {
  margin: 8px 0 10px;
}

.maildealer-export-execution-table-wrap {
  overflow-x: auto;
}

.maildealer-export-execution-table .audit-detail-cell {
  min-width: 170px;
}

.maildealer-export-execution-table .audit-detail-cell strong,
.maildealer-export-execution-table .audit-detail-cell small,
.maildealer-export-execution-table .audit-detail-cell p {
  display: block;
}

.maildealer-export-execution-table .audit-detail-cell p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.production-execution-precheck-summary {
  margin: 8px 0 10px;
}

.production-execution-precheck-table .audit-detail-cell {
  min-width: 180px;
}

.evidence-guidance-cell p {
  margin: 0 0 8px;
}

.evidence-instruction-list {
  display: grid;
  gap: 6px;
  margin: 0;
}

.evidence-instruction-list div {
  border-top: 1px solid var(--line-soft);
  padding-top: 6px;
}

.evidence-instruction-list dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 2px;
}

.evidence-instruction-list dd {
  margin: 0;
}

.priority-implementation-list {
  display: grid;
  gap: 8px;
}

.priority-implementation-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 9px;
}

.priority-implementation-order {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.priority-implementation-main {
  min-width: 0;
}

.priority-implementation-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 5px;
}

.priority-implementation-title strong {
  color: var(--text);
}

.priority-implementation-main p {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.priority-implementation-main small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.goal-source-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 6px;
}

.goal-source-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
}

.goal-source-filter strong {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 11px;
  padding: 0 6px;
}

.goal-source-filter.active {
  border-color: var(--blue);
  background: var(--info-bg);
  color: var(--info-text);
}

.goal-source-filter.active strong {
  background: var(--blue);
  color: #fffefa;
}

.goal-next-action-filter-note {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.handoff-package-summary {
  margin: 8px 0 10px;
}

.handoff-package-list {
  display: grid;
  gap: 8px;
}

.handoff-package-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.handoff-package-order {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.handoff-package-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.handoff-package-title strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.handoff-package-item p,
.handoff-package-item small,
.handoff-package-item code {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.handoff-package-item small,
.handoff-package-item code {
  margin-top: 3px;
}

.handoff-package-item code {
  color: var(--text);
  overflow-wrap: anywhere;
}

.goal-next-action-list {
  display: grid;
  gap: 8px;
}

.goal-next-action-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.goal-next-action-order {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.goal-next-action-main {
  min-width: 0;
}

.goal-next-action-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.goal-next-action-title strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.goal-next-action-main p,
.goal-next-action-main small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.goal-next-action-main small {
  margin-top: 3px;
}

.mvp-safe-next-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
  margin: 10px 0;
}

.mvp-safe-next-action strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 4px;
}

.mvp-safe-next-action p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.mvp-safe-next-action form {
  margin: 0;
}

.mvp-safe-next-action button {
  min-height: 36px;
  white-space: nowrap;
}

.mvp-safe-step-list {
  margin: 0 0 10px 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.outlook-test-mail-card {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  margin: 10px 0;
}

.outlook-test-mail-card > strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 8px;
}

.outlook-test-mail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.outlook-test-mail-grid span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  padding: 8px;
}

.outlook-test-mail-grid b {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.outlook-test-mail-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.outlook-preview-criteria {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  margin: 10px 0;
}

.outlook-preview-criteria > strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 8px;
}

.outlook-preview-criteria-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.outlook-preview-criteria section {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 9px;
}

.outlook-preview-criteria h4 {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  margin: 0 0 6px;
}

.outlook-preview-criteria ul {
  margin: 0 0 0 18px;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.outlook-preview-latest {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  margin: 10px 0;
}

.outlook-preview-latest h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.outlook-preview-latest-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(92px, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.outlook-preview-latest-grid span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  padding: 8px;
}

.outlook-preview-latest-grid strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
}

.table-subhead {
  margin: 12px 0 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 900px) {
  .mvp-safe-next-action {
    grid-template-columns: 1fr;
  }

  .mvp-safe-next-action button {
    width: 100%;
  }

  .outlook-preview-latest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .outlook-test-mail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .outlook-preview-criteria-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .outlook-test-mail-grid {
    grid-template-columns: 1fr;
  }
}

.mvp-next-table,
.mvp-deferred-table {
  margin-top: 6px;
}

.development-task-summary {
  margin: 8px 0 10px;
}

.development-task-progress-summary {
  margin: 0 0 10px;
}

.development-task-filter-bar {
  margin: 8px 0 10px;
}

.development-task-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.development-task-table {
  min-width: 2220px;
  margin: 0;
}

.development-task-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-muted);
}

.development-task-table .audit-detail-cell {
  min-width: 180px;
}

.development-task-table small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.development-task-phase {
  display: inline-flex;
  justify-content: center;
  min-width: 104px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  padding: 3px 8px;
  white-space: nowrap;
}

.development-task-phase.production {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.development-task-phase.local {
  background: var(--info-bg);
  color: var(--info-text);
}

.development-task-phase.external {
  background: #f1e8ff;
  color: #5b21b6;
}

html[data-theme="dark"] .development-task-phase.external {
  background: #322144;
  color: #d8b4fe;
}

.development-task-phase.data {
  background: #e7f5ef;
  color: #166046;
}

html[data-theme="dark"] .development-task-phase.data {
  background: #1d352b;
  color: #9ce4bf;
}

.development-task-phase.later {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.development-task-phase.decision {
  background: var(--surface-muted);
  color: var(--muted);
}

.development-task-progress-edit {
  min-width: 260px;
}

.development-task-progress-current {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.development-task-progress-current small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.development-task-progress-current p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.development-task-progress-status {
  display: inline-flex;
  justify-content: center;
  width: fit-content;
  min-width: 70px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  padding: 3px 8px;
  white-space: nowrap;
}

.development-task-progress-status.info {
  background: var(--info-bg);
  color: var(--info-text);
}

.development-task-progress-status.warn {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.development-task-progress-status.hold,
.development-task-progress-status.muted {
  background: var(--surface-muted);
  color: var(--muted);
}

.development-task-progress-status.ok {
  background: var(--success-bg);
  color: var(--success-text);
}

.development-task-progress-form {
  display: grid;
  gap: 6px;
}

.development-task-progress-form select,
.development-task-progress-form textarea {
  width: 100%;
  min-width: 0;
}

.development-task-progress-form textarea {
  min-height: 54px;
  resize: vertical;
}

.development-task-progress-form button {
  justify-self: start;
  min-height: 30px;
  padding: 6px 10px;
}

.coverage-queue-table,
.feature-evidence-table,
.implementation-map-table,
.coverage-decision-table,
.adoption-criteria-table,
.requirement-trace-table {
  margin-top: 8px;
}

.feature-evidence-summary {
  margin: 8px 0 10px;
}

.feature-evidence-table-wrap {
  max-height: 380px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.feature-evidence-table {
  min-width: 1120px;
  margin: 0;
}

.feature-evidence-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-muted);
}

.evidence-level {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  padding: 4px 7px;
  white-space: nowrap;
}

.evidence-level.strong {
  background: var(--success-bg);
  color: var(--success-text);
}

.evidence-level.medium {
  background: var(--info-bg);
  color: var(--info-text);
}

.evidence-level.pending {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.evidence-level.decision {
  background: var(--surface-muted);
  color: var(--muted);
}

.implementation-map-summary {
  margin: 8px 0 10px;
}

.implementation-map-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.implementation-map-table {
  min-width: 1180px;
  margin: 0;
}

.implementation-map-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-muted);
}

.implementation-phase {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  padding: 4px 7px;
  white-space: nowrap;
}

.implementation-phase.local {
  background: var(--success-bg);
  color: var(--success-text);
}

.implementation-phase.production {
  background: var(--info-bg);
  color: var(--info-text);
}

.implementation-phase.later {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.implementation-phase.decision {
  background: var(--surface-muted);
  color: var(--muted);
}

.adoption-criteria-summary {
  margin: 8px 0 10px;
}

.adoption-criteria-table-wrap {
  overflow-x: auto;
}

.adoption-criteria-table {
  min-width: 1180px;
}

.adoption-criteria-table .audit-detail-cell {
  min-width: 180px;
}

.unresolved-audit-panel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  margin: 12px 0;
  padding: 12px;
}

.unresolved-audit-summary {
  margin: 8px 0 10px;
}

.unresolved-audit-table-wrap {
  overflow-x: auto;
}

.unresolved-audit-table {
  min-width: 980px;
  margin: 0;
}

.unresolved-audit-table .audit-detail-cell {
  min-width: 190px;
}

.development-readiness-panel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  margin: 12px 0;
  padding: 12px;
}

.development-handoff-panel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  margin: 12px 0;
  padding: 12px;
}

.development-handoff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.development-handoff-card {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px;
}

.development-handoff-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.development-handoff-title strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.handoff-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--blue);
  flex: 0 0 22px;
  font-size: 12px;
  font-weight: 900;
}

.development-handoff-card p {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
  margin: 0 0 5px;
}

.development-handoff-card small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.5;
  min-height: 36px;
}

.handoff-link {
  margin-top: 9px;
}

.development-readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.development-readiness-grid section {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 9px;
}

.development-readiness-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.development-readiness-title strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.development-readiness-grid p {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  margin: 0 0 5px;
}

.development-readiness-grid small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  line-height: 1.45;
}

.marketplace-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}

.marketplace-decision-grid section {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 11px;
}

.marketplace-decision-grid h3 {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  margin: 0 0 6px;
}

.marketplace-decision-grid p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 0 0 9px;
}

.marketplace-decision-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.marketplace-decision-columns > div {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 8px;
}

.marketplace-decision-columns strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 5px;
}

.marketplace-decision-columns ul {
  margin: 0 0 0 18px;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.requirement-trace-summary {
  margin: 8px 0 10px;
}

.requirement-trace-table-wrap {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.requirement-trace-table {
  margin: 0;
}

.requirement-trace-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-muted);
}

.requirement-title-cell {
  min-width: 250px;
}

.requirement-title-cell strong {
  display: block;
  color: var(--blue);
  font-size: 12px;
  margin-bottom: 3px;
}

.requirement-title-cell span {
  color: var(--text);
  font-weight: 700;
}

.requirement-coverage-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 130px;
}

.readiness-status {
  display: inline-flex;
  min-width: 78px;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
}

.readiness-status.ok {
  background: var(--success-bg);
  color: var(--success-text);
}

.readiness-status.warn {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.readiness-status.muted {
  background: var(--surface-muted);
  color: var(--muted);
}

.private-storage-table .storage-target {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
}

.risk-level {
  display: inline-flex;
  min-width: 54px;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  padding: 3px 8px;
}

.risk-level.high {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.risk-level.medium {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.risk-level.low {
  background: var(--success-bg);
  color: var(--success-text);
}

.risk-review-table .audit-detail-cell {
  min-width: 160px;
}

.risk-review-table .readiness-coverage {
  min-width: 140px;
}

.safe-roadmap-summary {
  margin: 8px 0 10px;
}

.safe-roadmap-table-wrap {
  max-height: 460px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.safe-roadmap-table {
  min-width: 1480px;
  margin: 0;
}

.safe-roadmap-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-muted);
}

.safe-roadmap-table .audit-detail-cell {
  min-width: 180px;
}

.cutover-plan-summary {
  margin: 8px 0 10px;
}

.cutover-plan-table-wrap {
  max-height: 430px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.cutover-plan-table {
  min-width: 1680px;
  margin: 0;
}

.cutover-plan-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-muted);
}

.cutover-plan-table .audit-detail-cell {
  min-width: 170px;
}

.maildealer-export-summary {
  margin: 8px 0 10px;
}

.maildealer-export-table {
  min-width: 1760px;
}

.maildealer-export-table .audit-detail-cell {
  min-width: 180px;
}

.local-ui-check-summary {
  margin: 8px 0 10px;
}

.local-ui-check-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.local-ui-check-table {
  min-width: 1680px;
  margin: 0;
}

.local-ui-check-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-muted);
}

.local-ui-check-table .audit-detail-cell {
  min-width: 170px;
}

.local-ui-check-current {
  display: grid;
  gap: 6px;
}

.local-ui-check-current small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.local-ui-check-current p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.local-ui-check-edit {
  min-width: 260px;
}

.local-ui-check-result-form {
  display: grid;
  gap: 6px;
}

.local-ui-check-result-form select,
.local-ui-check-result-form textarea {
  width: 100%;
  min-width: 0;
}

.local-ui-check-result-form textarea {
  min-height: 54px;
  resize: vertical;
}

.local-ui-check-result-form button {
  justify-self: start;
  min-height: 30px;
  padding: 6px 10px;
}

.local-ui-check-result-form .followup-note-template-button {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 12px;
}

.followup-next-panel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
  margin: 10px 0 12px;
}

.followup-source-panel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
  margin: 10px 0 12px;
}

.followup-source-summary {
  margin-bottom: 10px;
}

.followup-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.followup-source-table-wrap {
  overflow-x: auto;
}

.followup-source-table th,
.followup-source-table td {
  min-width: 140px;
}

.followup-source-table th:nth-child(3),
.followup-source-table td:nth-child(3),
.followup-source-table th:nth-child(4),
.followup-source-table td:nth-child(4) {
  min-width: 260px;
}

.followup-next-list {
  display: grid;
  gap: 8px;
}

.followup-next-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.followup-next-order {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}

.followup-next-item strong {
  display: block;
  margin-bottom: 4px;
}

.followup-next-item p,
.followup-next-item small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.followup-next-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 130px;
}

.followup-observation-list {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.followup-route-note {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}

.followup-runbook-list {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}

.followup-stop-list {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.55;
}

.followup-note-template {
  margin-top: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-muted);
  padding: 6px 8px;
}

.followup-note-template summary {
  cursor: pointer;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.followup-note-template pre {
  white-space: pre-wrap;
  margin: 8px 0 0;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.55;
}

.preflight-import-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-muted);
  padding: 12px;
  margin: 10px 0 12px;
}

.preflight-import-form {
  display: grid;
  gap: 8px;
}

.preflight-import-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.preflight-import-form textarea {
  width: 100%;
  min-height: 110px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.preflight-import-form button {
  justify-self: start;
}

.compact-link {
  min-height: 0;
  padding: 5px 8px;
  font-size: 12px;
}

.roadmap-order {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.acceptance-test-table .audit-detail-cell {
  min-width: 170px;
}

.acceptance-test-table .readiness-coverage {
  min-width: 160px;
}

.release-gate-summary {
  margin: 8px 0 10px;
}

.release-gate-table .audit-detail-cell {
  min-width: 170px;
}

.release-gate-table .readiness-coverage {
  min-width: 160px;
}

.demo-note.ok,
.soft-tag.ok {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--line);
}

.demo-note.warn,
.soft-tag.warn {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--line);
}

.setting-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}

.setting-tools input[type="file"] {
  width: auto;
  min-width: 260px;
}

.sync-log-list {
  display: grid;
  gap: 8px;
}

.sync-log-row {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  display: grid;
  grid-template-columns: 1.1fr .7fr .8fr 1.25fr 1fr;
  gap: 10px;
  align-items: start;
}

.sync-log-row strong {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 4px;
}

.sync-log-row span {
  overflow-wrap: anywhere;
}

.sync-error-details {
  margin-top: 8px;
}

.sync-error-details summary {
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.sync-error-details pre {
  background: var(--surface-muted);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.6;
  margin: 8px 0 0;
  overflow-x: auto;
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

.inline-form {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-right: 6px;
}

.inline-form input { width: 140px; }

.alias-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.alias-inline-form label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.alias-inline-form select {
  max-width: 210px;
}

.topbar,
.sidebar,
.content-panel,
.detail-main,
.detail-side,
.setup-box,
.auth-card,
.notification-item,
.confirm-body,
.sync-log-row,
.preview-table {
  background: var(--surface);
}

.filter-bar,
.saved-view-save,
.bulk-toolbar,
.detail-toolbar,
.tabs a,
.audit-mini-item,
.audit-focus-panel,
.metric-box,
.confirm-summary,
.comment,
.message header,
.attachments a,
.attachments > span,
.notification-title span,
.setting-check,
.setting-status,
.setting-row,
.report-filter-bar,
.template-card,
.approval-body-preview {
  background: var(--surface-soft);
}

.audit-timeline-item {
  background: var(--surface);
}

.side-link,
.side-muted,
.sidebar h3,
label,
.message header,
.attachments a,
.attachments > span,
.audit-table .audit-detail-cell,
.audit-mini-item p,
.notification-item p,
.comment p,
.subtle-button {
  color: var(--text);
}

.side-link:hover,
.ticket-table tbody tr:hover {
  background: var(--surface-hover);
}

.side-count {
  background: var(--surface-muted);
  color: var(--muted);
}

input,
select,
textarea,
.search-form input {
  background: var(--field-bg);
  color: var(--text);
  border-color: var(--line);
}

input::placeholder,
textarea::placeholder,
.search-form input::placeholder {
  color: var(--muted);
}

.message.outbound header,
.notification-item.unread,
.attachments a {
  background: var(--info-bg);
  color: var(--info-text);
  border-color: var(--line);
}

.lock-banner,
.demo-note {
  background: var(--info-bg);
  color: var(--info-text);
  border-color: var(--line);
}

.lock-banner.active {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--line);
}

.lock-banner.warning,
.draft-note {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--line);
}

.status.new,
.approval-status.pending {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.status.done,
.approval-status.approved {
  background: var(--success-bg);
  color: var(--success-text);
}

.status.hold {
  background: var(--info-bg);
  color: var(--info-text);
}

.approval-status.sent,
.channel.bot {
  background: var(--info-bg);
  color: var(--info-text);
  border-color: var(--line);
}

.channel.line {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--line);
}

.confirm-body pre,
.confirm-body .mail-preview {
  background: var(--field-bg);
  border-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] .flash.error {
  background: #3a2023;
}

html[data-theme="dark"] .message-body iframe {
  background: #fffefa;
}

.line-thread {
  border-color: #cbd5e1;
  background: #e2edf8;
}

.line-thread .line-avatar {
  background: #f8fafc;
  color: #475569;
  border-color: #cbd5e1;
}

.line-thread .line-bubble {
  background: #fff;
  border-color: rgba(15, 23, 42, .08);
  color: #1f2937;
}

.line-thread .line-message.outbound .line-bubble {
  background: #dcfce7;
  border-color: #86efac;
}

.line-thread .line-bubble time,
.line-thread .line-bubble .attachments a span,
.line-thread .line-bubble .attachments > span span {
  color: #64748b;
}

/* Local color trial: business UI with a calm neutral base without changing the LINE talk surface. */
.topbar {
  background: #ffffff;
  border-bottom-color: #cbd5df;
  box-shadow: 0 3px 12px rgba(31, 41, 55, 0.08);
}

.topbar .brand,
.topbar .topnav,
.topbar .topnav a,
.topbar .topnav button {
  color: #334155;
}

.topbar .brand {
  color: #1f2937;
}

.topbar .topnav .nav-secondary {
  color: #64748b;
}

.topbar .topnav .nav-alert {
  color: #b91c1c;
  font-weight: 800;
}

.topbar .topnav button {
  background: #f8fafc;
}

.topbar .brand-mark {
  background: #2f6f9f;
  border-color: #2f6f9f;
  color: #ffffff;
}

.topbar .search-form input {
  background: #f8fafc;
  color: #1f2937;
  border-color: #cbd5df;
  box-shadow: none;
}

.topbar .search-detail-button {
  background: #eef4f8;
  border-color: #bfccda;
  color: #245f89;
  font-weight: 800;
}

.topbar .search-detail-button:hover {
  background: #e1eff8;
  border-color: #8fb1c9;
}

.topbar .theme-toggle {
  background: #f8fafc;
  border-color: #cbd5df;
  color: #334155;
}

.topbar .theme-toggle:hover {
  background: #e1eff8;
  color: #245f89;
}

.topbar .avatar {
  background: #e1eff8;
  color: #245f89;
  border: 1px solid #bfccda;
}

.sidebar {
  background: #f8fafc;
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.sidebar h3 {
  color: #475569;
  font-weight: 900;
}

.side-link,
.sidebar-folder summary {
  color: var(--text);
  font-weight: 800;
}

.side-link:hover,
.sidebar-product-link:hover,
.sidebar-quick-link:hover {
  background: #e1eff8;
  color: #245f89;
}

.sidebar-folder {
  background: #ffffff;
  border-color: #d4dee8;
}

.content-panel,
.detail-main,
.detail-side,
.setup-box,
.auth-card {
  box-shadow: var(--shadow);
}

.filter-bar,
.saved-view-save,
.bulk-toolbar,
.dashboard-controls,
.bulk-details,
.metric-box,
.setting-row,
.setting-status,
.settings-folder,
.routing-rule-card,
.template-card,
.approval-body-preview {
  background: var(--surface-soft);
  border-color: var(--line);
}

.tabs a,
.subtle-button,
button {
  border-color: var(--line);
}

.primary,
button.primary,
.product-answer-review-global-action button,
.product-pending-decision-form button,
.mvp-safe-next-action button {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.ticket-table th {
  color: #475569;
  background: #f1f5f9;
}

.ticket-table tbody tr:hover {
  background: #eef4fa;
}

.status.new,
.approval-status.pending {
  background: #fff3df;
  color: #8a4b12;
}

.status.hold,
.approval-status.sent,
.channel.bot {
  background: #e1eff8;
  color: #245f89;
}

.status.done,
.approval-status.approved,
.channel.line {
  background: #e2f5ec;
  color: #126346;
}

.notice-dot {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

html[data-theme="dark"] .topbar {
  background: #1f2937;
  border-bottom-color: #334155;
}

html[data-theme="dark"] .sidebar {
  background: #1f2937;
}

html[data-theme="dark"] .sidebar h3 {
  color: #cbd5e1;
}

html[data-theme="dark"] .topbar .search-form input {
  background: #111b24;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
}

html[data-theme="dark"] .topbar .search-detail-button {
  background: #263244;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .topbar .brand,
html[data-theme="dark"] .topbar .topnav,
html[data-theme="dark"] .topbar .topnav a,
html[data-theme="dark"] .topbar .topnav button {
  color: #f8fafc;
}

html[data-theme="dark"] .topbar .topnav .nav-secondary {
  color: #cbd5e1;
}

html[data-theme="dark"] .topbar .topnav .nav-alert {
  color: #fca5a5;
}

html[data-theme="dark"] .topbar .theme-toggle,
html[data-theme="dark"] .topbar .topnav button {
  background: #263244;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .topbar .avatar {
  background: #e1eff8;
  border-color: #60a5fa;
  color: #1f2937;
}

html[data-theme="dark"] .sidebar-folder {
  background: #263244;
  border-color: #4b5d73;
}

html[data-theme="dark"] .sidebar-folder summary,
html[data-theme="dark"] .sidebar-folder-name,
html[data-theme="dark"] .sidebar-product-name,
html[data-theme="dark"] .sidebar-quick-link,
html[data-theme="dark"] .sidebar-product-link {
  color: #f8fafc;
}

html[data-theme="dark"] .sidebar-folder summary::before {
  color: #cbd5e1;
}

html[data-theme="dark"] .side-link:hover,
html[data-theme="dark"] .sidebar-product-link:hover,
html[data-theme="dark"] .sidebar-quick-link:hover {
  background: #314058;
  color: #ffffff;
}

html[data-theme="dark"] .ticket-table th {
  background: #263244;
  color: #e2e8f0;
}

html[data-theme="dark"] .ticket-table td {
  color: #f8fafc;
  border-bottom-color: #3b4d63;
}

html[data-theme="dark"] .ticket-table tbody tr {
  background: #1f2937;
}

html[data-theme="dark"] .ticket-table tbody tr.row-mine {
  background: #1d332b;
}

html[data-theme="dark"] .ticket-table tbody tr.row-unassigned {
  background: #302a23;
}

html[data-theme="dark"] .ticket-table tbody tr:hover {
  background: #314058;
}

html[data-theme="dark"] .ticket-table .product-cell,
html[data-theme="dark"] .ticket-table .routing-cell,
html[data-theme="dark"] .ticket-table .subject-cell {
  color: #f8fafc;
}

html[data-theme="dark"] .ticket-table .meta,
html[data-theme="dark"] .product-summary strong,
html[data-theme="dark"] .product-summary span,
html[data-theme="dark"] .product-summary .line-account-brief {
  color: #d7dee8;
}

html[data-theme="dark"] .assignee-chip {
  background: #263244;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .assignee-chip.unassigned {
  background: #3d2b14;
  border-color: #b7791f;
  color: #fde68a;
}

html[data-theme="dark"] .channel.line,
html[data-theme="dark"] .status.done,
html[data-theme="dark"] .approval-status.approved {
  background: #17462e;
  border-color: #2f855a;
  color: #bbf7d0;
}

html[data-theme="dark"] .status.new,
html[data-theme="dark"] .approval-status.pending {
  background: #4a2a16;
  border-color: #c56a1a;
  color: #fed7aa;
}

html[data-theme="dark"] .status.hold,
html[data-theme="dark"] .approval-status.sent,
html[data-theme="dark"] .channel.bot {
  background: #1e3a5f;
  border-color: #47739d;
  color: #bfdbfe;
}

html[data-theme="dark"] .setting-edit-form,
html[data-theme="dark"] .setting-editor > .inline-form,
html[data-theme="dark"] .product-knowledge-bulk-editor.is-direct .setting-edit-form {
  background: #172233;
  border-color: #3b4d63;
  color: #f8fafc;
}

html[data-theme="dark"] .setting-editor,
html[data-theme="dark"] .settings-folder,
html[data-theme="dark"] .settings-screen-map div,
html[data-theme="dark"] .settings-tree-group,
html[data-theme="dark"] .settings-tree-children,
html[data-theme="dark"] .settings-tree-subgroup,
html[data-theme="dark"] .settings-tree-card,
html[data-theme="dark"] .product-page-section,
html[data-theme="dark"] .knowledge-proposal-import,
html[data-theme="dark"] .product-knowledge-folder,
html[data-theme="dark"] .product-knowledge-bulk-editor,
html[data-theme="dark"] .knowledge-answer-example {
  background: #1f2937;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .setting-editor > summary,
html[data-theme="dark"] .settings-folder > summary,
html[data-theme="dark"] .settings-tree-group > summary,
html[data-theme="dark"] .product-page-section > summary,
html[data-theme="dark"] .product-knowledge-bulk-editor summary,
html[data-theme="dark"] .knowledge-copy-box summary {
  background: #263244;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .setting-editor summary strong,
html[data-theme="dark"] .settings-folder summary strong,
html[data-theme="dark"] .settings-screen-map strong,
html[data-theme="dark"] .settings-tree-group summary strong,
html[data-theme="dark"] .product-page-section summary strong,
html[data-theme="dark"] .settings-tree-card strong,
html[data-theme="dark"] .settings-tree-subgroup h3,
html[data-theme="dark"] .setting-editor summary span,
html[data-theme="dark"] .settings-folder summary span,
html[data-theme="dark"] .product-page-section summary span {
  color: #f8fafc;
}

html[data-theme="dark"] .setting-editor summary .meta,
html[data-theme="dark"] .settings-folder summary .meta,
html[data-theme="dark"] .product-page-section summary small,
html[data-theme="dark"] .setting-help,
html[data-theme="dark"] .compact-help,
html[data-theme="dark"] .settings-screen-map span,
html[data-theme="dark"] .settings-tree-group summary span:not(.settings-tree-icon),
html[data-theme="dark"] .settings-tree-card span,
html[data-theme="dark"] .product-knowledge-meta .meta {
  color: #cbd5e1;
}

html[data-theme="dark"] .settings-tree-group > summary::after {
  background: #172233;
  border-color: #4b5d73;
  color: #cbd5e1;
}

html[data-theme="dark"] .settings-tree-subgroup h3 {
  color: #9fb1c7;
}

html[data-theme="dark"] .settings-tree-icon {
  background: #2f6f9f;
  color: #f8fafc;
}

html[data-theme="dark"] .product-page-workbench a,
html[data-theme="dark"] .product-detail-section {
  background: #1f2937;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .product-page-workbench a:hover {
  background: #263244;
  border-color: #6aa3d5;
}

html[data-theme="dark"] .product-page-workbench strong,
html[data-theme="dark"] .product-detail-section summary strong {
  color: #f8fafc;
}

html[data-theme="dark"] .product-page-workbench span,
html[data-theme="dark"] .product-detail-section summary small {
  color: #cbd5e1;
}

html[data-theme="dark"] .product-detail-section > summary {
  background: #263244;
  border-color: #4b5d73;
}

html[data-theme="dark"] .product-detail-section > summary em {
  background: #172233;
  border-color: #60758f;
  color: #dbeafe;
}

html[data-theme="dark"] .product-page-section > summary em {
  background: #172233;
  border-color: #60758f;
  color: #dbeafe;
}

html[data-theme="dark"] .product-knowledge-folder-body {
  background: #172233;
}

html[data-theme="dark"] .product-knowledge-meta,
html[data-theme="dark"] .knowledge-line-readiness,
html[data-theme="dark"] .knowledge-line-link-box,
html[data-theme="dark"] .knowledge-quick-approve-form,
html[data-theme="dark"] .knowledge-quick-approve-form.compact,
html[data-theme="dark"] .knowledge-copy-box,
html[data-theme="dark"] .check-group,
html[data-theme="dark"] .routing-condition-block,
html[data-theme="dark"] .weekday-fieldset {
  background: #263244;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .product-knowledge-meta strong,
html[data-theme="dark"] .knowledge-line-readiness-head strong,
html[data-theme="dark"] .knowledge-line-link-box > strong,
html[data-theme="dark"] .knowledge-quick-approve-form strong,
html[data-theme="dark"] .compact-link-list,
html[data-theme="dark"] .knowledge-answer,
html[data-theme="dark"] .knowledge-question {
  color: #f8fafc;
}

html[data-theme="dark"] .soft-tag {
  background: #334155;
  border-color: #64748b;
  color: #f8fafc;
}

html[data-theme="dark"] .soft-tag.warn,
html[data-theme="dark"] .warning-tag {
  background: #4a2a16;
  border-color: #c56a1a;
  color: #fed7aa;
}

html[data-theme="dark"] .soft-tag.ok {
  background: #17462e;
  border-color: #2f855a;
  color: #bbf7d0;
}

html[data-theme="dark"] .soft-tag.muted {
  background: #263244;
  border-color: #4b5d73;
  color: #cbd5e1;
}

html[data-theme="dark"] .line-account-management,
html[data-theme="dark"] .line-account-policy-box > div,
html[data-theme="dark"] .line-account-bulk-actions,
html[data-theme="dark"] .line-account-profile-switch,
html[data-theme="dark"] .line-account-preset-actions,
html[data-theme="dark"] .line-account-rule-summary,
html[data-theme="dark"] .line-account-operation-note,
html[data-theme="dark"] .product-line-account-overview,
html[data-theme="dark"] .product-line-account-overview-card,
html[data-theme="dark"] .product-line-account-rule-note {
  background: #263244;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .line-account-ai-readiness {
  background: #263244;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .line-account-ai-readiness.is-warn,
html[data-theme="dark"] .line-account-operation-note.is-ai-on,
html[data-theme="dark"] .setting-help.warn-help {
  background: #3a2a12;
  border-color: #d69e2e;
  color: #fde68a;
}

html[data-theme="dark"] .line-account-ai-readiness.is-ok {
  background: #173b2a;
  border-color: #2f855a;
  color: #bbf7d0;
}

html[data-theme="dark"] .line-account-operation-note.is-ai-off,
html[data-theme="dark"] .line-account-rule-summary.is-note {
  background: #1d2d3f;
  border-color: #47739d;
  color: #dbeafe;
}

html[data-theme="dark"] .draft-note,
html[data-theme="dark"] .line-send-guard,
html[data-theme="dark"] .line-final-guard,
html[data-theme="dark"] .confirm-final-ack,
html[data-theme="dark"] .product-next-steps,
html[data-theme="dark"] .product-knowledge-draft-box {
  background: #3a2a12;
  border-color: #d69e2e;
  color: #fde68a;
}

html[data-theme="dark"] .line-send-guard strong,
html[data-theme="dark"] .line-send-guard span,
html[data-theme="dark"] .line-final-guard strong,
html[data-theme="dark"] .line-final-guard li,
html[data-theme="dark"] .confirm-final-ack {
  color: #fde68a;
}

html[data-theme="dark"] .reply-prep-panel,
html[data-theme="dark"] .reply-compose-panel,
html[data-theme="dark"] .reply-assist-panel,
html[data-theme="dark"] .reply-assist-panel section,
html[data-theme="dark"] .ticket-detail.reply-window .reply-box-head,
html[data-theme="dark"] .template-preview,
html[data-theme="dark"] .quick-template-save,
html[data-theme="dark"] .reply-start-preview {
  background: #172233;
  border-color: #3b4d63;
  color: #f8fafc;
}

html[data-theme="dark"] .reply-prep-panel > div,
html[data-theme="dark"] .reply-prep-panel dl,
html[data-theme="dark"] .reply-checklist span,
html[data-theme="dark"] .reply-attachment-selection,
html[data-theme="dark"] .reply-start-preview div {
  background: #263244;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .reply-envelope-fixed > span,
html[data-theme="dark"] .reply-envelope-row > span,
html[data-theme="dark"] .reply-attachment-summary span,
html[data-theme="dark"] .reply-attachment-selection li small {
  color: #cbd5e1;
}

html[data-theme="dark"] .reply-copy-fields {
  border-top-color: #4b5d73;
}

html[data-theme="dark"] .reply-copy-fields > summary {
  color: #93c5fd;
}

html[data-theme="dark"] .reply-autosave-status {
  border-color: #47739d;
  background: #1d2d3f;
  color: #dbeafe;
}

html[data-theme="dark"] .reply-autosave-status[data-state="pending"],
html[data-theme="dark"] .reply-autosave-status[data-state="saving"] {
  border-color: #b7791f;
  background: #3a2a12;
  color: #fde68a;
}

html[data-theme="dark"] .reply-autosave-status[data-state="error"] {
  border-color: #b94a59;
  background: #3b1f26;
  color: #fecdd3;
}

html[data-theme="dark"] .reply-attachment-selection li {
  border-top-color: #4b5d73;
}

html[data-theme="dark"] .reply-attachment-selection li strong,
html[data-theme="dark"] .reply-attachment-summary strong {
  color: #f8fafc;
}

html[data-theme="dark"] .reply-attachment-remove {
  border-color: #7f3f4b;
  background: #3b1f26;
  color: #fecdd3;
}

html[data-theme="dark"] .confirm-actions {
  border-top-color: #3b4d63;
  background: rgba(23, 34, 51, 0.96);
}

@media (max-width: 780px) {
  .reply-envelope-fixed,
  .reply-envelope-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .reply-compose-statuses {
    justify-content: flex-start;
  }
}

html[data-theme="dark"] .reply-prep-panel strong,
html[data-theme="dark"] .reply-prep-panel dd,
html[data-theme="dark"] .reply-compose-head h3,
html[data-theme="dark"] .reply-assist-panel h3,
html[data-theme="dark"] .reply-start-preview > strong,
html[data-theme="dark"] .reply-start-preview span:first-child {
  color: #f8fafc;
}

html[data-theme="dark"] .reply-prep-panel p,
html[data-theme="dark"] .reply-prep-panel dt,
html[data-theme="dark"] .reply-checklist span,
html[data-theme="dark"] .reply-assist-section-head p,
html[data-theme="dark"] .template-preview.is-empty,
html[data-theme="dark"] .reply-start-preview span:last-child {
  color: #cbd5e1;
}

html[data-theme="dark"] .quick-template-save > summary {
  color: #f8fafc;
}

html[data-theme="dark"] .quick-template-save-grid {
  border-color: #4b5d73;
}

html[data-theme="dark"] .prep-eyebrow {
  background: #1e3a5f;
  color: #bfdbfe;
}

html[data-theme="dark"] .product-next-steps.is-complete,
html[data-theme="dark"] .product-knowledge-fix-box {
  background: #173b2a;
  border-color: #2f855a;
  color: #bbf7d0;
}

html[data-theme="dark"] .product-next-steps strong,
html[data-theme="dark"] .product-next-steps ul,
html[data-theme="dark"] .product-knowledge-draft-box strong,
html[data-theme="dark"] .product-knowledge-draft-box span {
  color: #fde68a;
}

html[data-theme="dark"] .product-next-steps.is-complete strong,
html[data-theme="dark"] .product-next-steps.is-complete ul,
html[data-theme="dark"] .product-knowledge-fix-box strong,
html[data-theme="dark"] .product-knowledge-fix-box span {
  color: #bbf7d0;
}

html[data-theme="dark"] .product-next-steps p {
  color: #f8d99a;
}

html[data-theme="dark"] .product-next-steps.is-complete p {
  color: #b7f3cf;
}

html[data-theme="dark"] .product-readiness-check span {
  background: #334155;
  color: #e2e8f0;
}

html[data-theme="dark"] .product-readiness-check.is-ready span {
  background: #17462e;
  color: #bbf7d0;
}

html[data-theme="dark"] .product-readiness-check.is-missing span {
  background: #4a2a16;
  color: #fed7aa;
}

html[data-theme="dark"] .line-account-policy-box strong,
html[data-theme="dark"] .line-account-ai-readiness strong,
html[data-theme="dark"] .line-account-bulk-actions strong,
html[data-theme="dark"] .line-account-rule-summary strong,
html[data-theme="dark"] .line-account-operation-note strong,
html[data-theme="dark"] .product-line-account-overview-head strong,
html[data-theme="dark"] .product-line-account-overview-card strong,
html[data-theme="dark"] .product-line-account-rule-note strong {
  color: #f8fafc;
}

html[data-theme="dark"] .line-account-ai-readiness.is-warn strong,
html[data-theme="dark"] .line-account-ai-readiness.is-warn span,
html[data-theme="dark"] .line-account-ai-readiness.is-warn p,
html[data-theme="dark"] .line-account-ai-readiness.is-warn li,
html[data-theme="dark"] .line-account-operation-note.is-ai-on strong,
html[data-theme="dark"] .line-account-operation-note.is-ai-on span,
html[data-theme="dark"] .setting-help.warn-help,
html[data-theme="dark"] .setting-help.warn-help code {
  color: #fde68a;
}

html[data-theme="dark"] .line-account-ai-readiness.is-ok strong,
html[data-theme="dark"] .line-account-ai-readiness.is-ok span,
html[data-theme="dark"] .line-account-ai-readiness.is-ok p,
html[data-theme="dark"] .line-account-ai-readiness.is-ok li {
  color: #bbf7d0;
}

html[data-theme="dark"] .line-account-policy-box span,
html[data-theme="dark"] .line-account-ai-readiness span,
html[data-theme="dark"] .line-account-ai-readiness p,
html[data-theme="dark"] .line-account-ai-readiness li,
html[data-theme="dark"] .line-account-bulk-actions span,
html[data-theme="dark"] .line-account-bulk-actions small,
html[data-theme="dark"] .line-account-rule-summary span,
html[data-theme="dark"] .line-account-operation-note span,
html[data-theme="dark"] .line-account-profile-switch > span,
html[data-theme="dark"] .line-account-preset-actions > span,
html[data-theme="dark"] .product-line-account-overview-head span,
html[data-theme="dark"] .product-line-account-overview-summary .meta,
html[data-theme="dark"] .product-line-account-overview-card span,
html[data-theme="dark"] .product-line-account-overview-card small,
html[data-theme="dark"] .product-line-account-overview-card p,
html[data-theme="dark"] .product-line-account-rule-note span {
  color: #cbd5e1;
}

html[data-theme="dark"] input[type="file"] {
  color: #f8fafc;
}

html[data-theme="dark"] input[type="file"]::file-selector-button {
  background: #334155;
  border: 1px solid #64748b;
  border-radius: 6px;
  color: #f8fafc;
  padding: 6px 10px;
  margin-right: 10px;
}

html[data-theme="dark"] .setting-tools,
html[data-theme="dark"] .form-grid,
html[data-theme="dark"] .form-grid .full-span,
html[data-theme="dark"] .routing-form,
html[data-theme="dark"] .routing-row-editor .routing-form,
html[data-theme="dark"] .routing-extra-conditions,
html[data-theme="dark"] .routing-preview,
html[data-theme="dark"] .routing-rerun-box,
html[data-theme="dark"] .routing-rule-card-body,
html[data-theme="dark"] .routing-rule-facts div,
html[data-theme="dark"] .preview-summary > div,
html[data-theme="dark"] .preview-table,
html[data-theme="dark"] .line-form-source-panel,
html[data-theme="dark"] .line-form-source-panel > div,
html[data-theme="dark"] .line-form-folder-editor,
html[data-theme="dark"] .line-form-setting-row,
html[data-theme="dark"] .line-form-faq-row,
html[data-theme="dark"] .line-form-media-editor,
html[data-theme="dark"] .product-routing-default-create,
html[data-theme="dark"] .product-routing-status-item,
html[data-theme="dark"] .product-bulk-routing-form,
html[data-theme="dark"] .product-connection-panel {
  background: #172233;
  border-color: #3b4d63;
  color: #f8fafc;
}

html[data-theme="dark"] .routing-row-editor summary,
html[data-theme="dark"] .routing-rule-card > summary,
html[data-theme="dark"] .routing-rule-card.is-inactive,
html[data-theme="dark"] .routing-rule-summary-side span,
html[data-theme="dark"] .preview-match-group {
  background: #263244;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .routing-extra-conditions > strong,
html[data-theme="dark"] .routing-rule-summary-main strong,
html[data-theme="dark"] .routing-rule-facts dd,
html[data-theme="dark"] .preview-summary strong,
html[data-theme="dark"] .preview-match-group strong,
html[data-theme="dark"] .line-form-source-panel strong,
html[data-theme="dark"] .line-form-media-editor > strong,
html[data-theme="dark"] .product-routing-title,
html[data-theme="dark"] .product-routing-title small {
  color: #f8fafc;
}

html[data-theme="dark"] .routing-rerun-box p,
html[data-theme="dark"] .routing-rule-facts dt,
html[data-theme="dark"] .preview-summary span,
html[data-theme="dark"] .line-form-source-panel span,
html[data-theme="dark"] .line-form-template-note,
html[data-theme="dark"] .line-form-delete-check,
html[data-theme="dark"] .product-routing-status-list .meta {
  color: #cbd5e1;
}

html[data-theme="dark"] .routing-preview,
html[data-theme="dark"] .routing-rerun-box {
  border-color: #47739d;
}

html[data-theme="dark"] .operation-card-head {
  background: #263244;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .operation-card-head small {
  color: #cbd5e1;
}

html[data-theme="dark"] .operation-scope.is-preview {
  background: #1e3a5f;
  border-color: #47739d;
  color: #bfdbfe;
}

html[data-theme="dark"] .operation-scope.is-test {
  background: #173b2a;
  border-color: #2f855a;
  color: #bbf7d0;
}

html[data-theme="dark"] .operation-scope.is-draft {
  background: #334155;
  border-color: #64748b;
  color: #e2e8f0;
}

html[data-theme="dark"] .operation-scope.is-production,
html[data-theme="dark"] .production-action-button {
  background: #4a2a16;
  border-color: #c56a1a;
  color: #fed7aa;
}

html[data-theme="dark"] .content-panel .setting-tools form,
html[data-theme="dark"] .content-panel .setting-row,
html[data-theme="dark"] .content-panel .setting-status,
html[data-theme="dark"] .content-panel .setting-check,
html[data-theme="dark"] .content-panel .compact-status-grid,
html[data-theme="dark"] .content-panel .setting-status-grid,
html[data-theme="dark"] .content-panel .setting-check-grid,
html[data-theme="dark"] .content-panel .bulk-toolbar,
html[data-theme="dark"] .content-panel .saved-view-save,
html[data-theme="dark"] .content-panel .dashboard-controls,
html[data-theme="dark"] .content-panel .filter-bar,
html[data-theme="dark"] .content-panel .detail-command-stack,
html[data-theme="dark"] .content-panel .detail-toolbar,
html[data-theme="dark"] .content-panel .confirm-summary,
html[data-theme="dark"] .content-panel .audit-mini-item,
html[data-theme="dark"] .content-panel .audit-focus-panel,
html[data-theme="dark"] .content-panel .metric-box,
html[data-theme="dark"] .content-panel .template-card,
html[data-theme="dark"] .content-panel .approval-body-preview,
html[data-theme="dark"] .content-panel .notification-item,
html[data-theme="dark"] .content-panel .comment,
html[data-theme="dark"] .content-panel .message,
html[data-theme="dark"] .content-panel .message header,
html[data-theme="dark"] .content-panel .attachments a,
html[data-theme="dark"] .content-panel .attachments > span {
  background: #263244;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .content-panel .meta,
html[data-theme="dark"] .content-panel small,
html[data-theme="dark"] .content-panel .setting-status span,
html[data-theme="dark"] .content-panel .setting-check span,
html[data-theme="dark"] .content-panel .comment p,
html[data-theme="dark"] .content-panel .notification-item p,
html[data-theme="dark"] .content-panel .audit-mini-item p {
  color: #cbd5e1;
}

html[data-theme="dark"] .content-panel h1,
html[data-theme="dark"] .content-panel h2,
html[data-theme="dark"] .content-panel h3,
html[data-theme="dark"] .content-panel strong,
html[data-theme="dark"] .content-panel label {
  color: #f8fafc;
}

html[data-theme="dark"] .line-form-preview-page.customer-only {
  background: transparent;
  color: #17212b;
}

html[data-theme="dark"] .line-form-preview-page.customer-only .panel-head h1,
html[data-theme="dark"] .line-form-preview-page.customer-only .panel-head h2,
html[data-theme="dark"] .line-form-preview-page.customer-only .panel-head strong {
  color: #17212b;
}

html[data-theme="dark"] .line-form-preview-page.customer-only .setting-help,
html[data-theme="dark"] .line-form-preview-page.customer-only .panel-head p,
html[data-theme="dark"] .line-form-preview-page.customer-only .panel-head span {
  color: #5f6f83;
}

html[data-theme="dark"] .line-form-preview-phone {
  background: #e7f0ee;
  border-color: #c8d7e4;
  color: #17212b;
}

html[data-theme="dark"] .line-form-preview-screen {
  background: #8ba9cf;
}

html[data-theme="dark"] .line-form-preview-bubble {
  background: #fff;
  color: #17212b;
}

html[data-theme="dark"] .line-form-preview-bubble h2,
html[data-theme="dark"] .line-form-preview-bubble strong,
html[data-theme="dark"] .line-form-solution-list {
  color: #17212b;
}

html[data-theme="dark"] .line-form-preview-bubble p {
  color: #4b5563;
}

html[data-theme="dark"] .line-form-preview-step {
  background: #eef5ff;
  color: #2f6fda;
}

html[data-theme="dark"] .line-form-option-button {
  background: #f8fbff;
  border-color: #d5dee8;
  color: #17212b;
}

html[data-theme="dark"] .line-form-option-button.primary {
  background: #26c755;
  border-color: #26c755;
  color: #fff;
}

html[data-theme="dark"] .line-form-preview-input,
html[data-theme="dark"] .line-form-preview-textarea {
  background: #fff;
  border-color: #d5dee8;
  color: #17212b;
}

html[data-theme="dark"] .line-form-solution-source,
html[data-theme="dark"] .line-form-solution-note {
  background: #eef7ff;
  color: #24506f;
}

html[data-theme="dark"] .line-form-preview-summary {
  background: #f3fbf6;
  color: #1d6b45;
}

html[data-theme="dark"] .line-thread .line-bubble,
html[data-theme="dark"] .line-thread .line-bubble strong {
  color: #172033;
}

html[data-theme="dark"] .line-thread .line-message.outbound .line-bubble,
html[data-theme="dark"] .line-thread .line-message.outbound .line-bubble strong {
  color: #14532d;
}

.line-thread .attachments a {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.line-thread .attachments > span {
  background: #f8fafc;
  border-color: #edf1f5;
  color: #334155;
}

/* MailDealer-like work surface: keep the list primary and move secondary controls into focused dialogs. */
.dashboard-layout {
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 10px;
}

.dashboard-sidebar {
  gap: 3px;
  padding: 9px;
}

.dashboard-sidebar h3 {
  margin: 4px 7px 5px;
  font-size: 12px;
}

.dashboard-sidebar .side-link {
  min-height: 28px;
  padding: 0 7px;
  font-size: 12px;
}

.dashboard-sidebar .side-link.is-active {
  background: #e1eff8;
  color: #245f89;
}

.dashboard-sidebar .side-count {
  min-width: 21px;
  height: 19px;
  padding: 0 5px;
  font-size: 11px;
}

.dashboard-sidebar .sidebar-folder-list {
  gap: 2px;
}

.dashboard-sidebar .sidebar-folder {
  border-color: transparent;
  border-radius: 5px;
  box-shadow: none;
}

.dashboard-sidebar .sidebar-folder[open] {
  border-color: var(--line-soft);
}

.dashboard-sidebar .sidebar-folder summary {
  min-height: 28px;
  padding: 0 6px;
  font-size: 12px;
}

.dashboard-sidebar .sidebar-folder summary::before {
  font-size: 15px;
}

.dashboard-sidebar .sidebar-children {
  gap: 1px;
  padding: 1px 5px 5px 19px;
}

.dashboard-sidebar .sidebar-quick-link,
.dashboard-sidebar .sidebar-product-link {
  min-height: 25px;
  font-weight: 700;
}

.personal-flag-settings-mini {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface);
  margin-top: 8px;
  overflow: hidden;
}

.personal-flag-settings-mini > summary {
  min-height: 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  padding: 0 8px;
}

.personal-flag-settings-mini form {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  padding: 8px;
}

.personal-flag-settings-mini p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.personal-flag-label-list {
  display: grid;
  gap: 6px;
}

.personal-flag-label-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.personal-flag-label-row input[type="text"] {
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  font-size: 12px;
}

.personal-flag-label-row .check {
  gap: 3px;
  font-size: 11px;
}

.reply-delay-alert-list,
.reply-delay-alert-detail {
  display: grid;
  gap: 3px;
  border: 1px solid #fecaca;
  border-left: 5px solid #dc2626;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  padding: 10px 12px;
  margin: 0 0 12px;
}

.reply-delay-alert-list strong,
.reply-delay-alert-detail strong {
  color: #7f1d1d;
  font-size: 13px;
}

.reply-delay-alert-list span,
.reply-delay-alert-detail span {
  color: #991b1b;
  font-size: 12px;
  font-weight: 700;
}

.reply-delay-alert-detail {
  margin: 0;
}

.ticket-personal-flags-panel form {
  display: grid;
  gap: 9px;
}

.ticket-personal-flags-panel .panel-head {
  align-items: center;
  margin-bottom: 10px;
}

.ticket-personal-flags-panel .panel-head h2 {
  margin: 0;
}

.ticket-personal-flags-panel .panel-head span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.personal-flag-checkbox-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.personal-flag-check {
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 16px 10px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--personal-flag-color) 36%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--personal-flag-color) 9%, var(--surface));
  color: var(--text);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.personal-flag-check:hover {
  border-color: color-mix(in srgb, var(--personal-flag-color) 62%, var(--line));
  background: color-mix(in srgb, var(--personal-flag-color) 14%, var(--surface));
}

.personal-flag-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--personal-flag-color) 76%, var(--line));
  background: color-mix(in srgb, var(--personal-flag-color) 16%, var(--surface));
  box-shadow: inset 3px 0 0 var(--personal-flag-color);
}

.personal-flag-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  min-width: 15px;
  margin: 0;
  padding: 0;
  justify-self: center;
  accent-color: var(--personal-flag-color);
}

.personal-flag-check strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
}

.dashboard-head {
  display: grid;
  gap: 9px;
  margin-bottom: 10px;
}

.dashboard-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-head-top h1 {
  margin: 0;
}

.dashboard-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.dashboard-action-row button,
.dashboard-action-row a {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.dashboard-status-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.dashboard-status-tabs a {
  height: 38px;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.dashboard-status-tabs a:hover,
.dashboard-status-tabs a.is-active {
  background: var(--surface-soft);
  border-bottom-color: var(--primary);
  color: var(--text);
}

.dashboard-status-tabs a span {
  min-width: 24px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  padding: 0 6px;
  font-size: 11px;
}

.dashboard-status-tabs a.is-active span {
  background: #dbeafe;
  color: #1e4f9a;
}

.dashboard-modal {
  width: min(860px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
  margin: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 0;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
  overflow: auto;
}

.dashboard-modal::backdrop {
  background: rgba(15, 23, 42, .48);
}

.dashboard-modal-head {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 11px 14px;
}

.dashboard-modal-head > div {
  display: grid;
  gap: 3px;
}

.dashboard-modal-head strong {
  font-size: 16px;
}

.dashboard-modal-head span {
  color: var(--muted);
  font-size: 12px;
}

.dashboard-modal-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 8px 14px 0;
}

.dashboard-modal-tabs button {
  min-height: 36px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 0 16px;
  font-weight: 800;
}

.dashboard-modal-tabs button:hover,
.dashboard-modal-tabs button.is-active {
  border-bottom-color: var(--primary);
  color: var(--text);
}

.dashboard-modal-panel[hidden] {
  display: none;
}

.icon-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.dashboard-modal .filter-bar {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 14px;
}

.dashboard-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
}

.dashboard-search-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 10px;
}

.dashboard-search-grid .full-span,
.dashboard-modal-actions {
  grid-column: 1 / -1;
}

.dashboard-search-combined {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.dashboard-search-section {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface);
  padding: 11px;
}

.dashboard-search-section legend {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  padding: 0 5px;
}

.dashboard-search-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.dashboard-search-checks .check {
  min-width: 128px;
}

.dashboard-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.dashboard-modal .saved-view-save {
  margin: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  padding: 11px 14px;
}

.dashboard-display-settings {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.dashboard-display-settings fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 11px;
}

.dashboard-display-settings legend {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  padding: 0 5px;
}

.dashboard-display-settings .check {
  min-width: 118px;
}

.ticket-table[data-dashboard-table] [hidden] {
  display: none !important;
}

.ticket-table[data-dashboard-table].is-compact th,
.ticket-table[data-dashboard-table].is-compact td {
  height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12px;
}

.detail-support {
  width: 104px;
  min-width: 0;
  max-width: 360px;
  min-height: 0;
  align-self: start;
  position: sticky;
  top: 76px;
  padding: 0;
  overflow: hidden;
  transition: width .16s ease;
}

.detail-support:has(.detail-support-drawer[open]) {
  width: 360px;
}

.detail-support-drawer > summary {
  min-height: 50px;
  display: grid;
  align-content: center;
  gap: 2px;
  cursor: pointer;
  list-style: none;
  padding: 9px 11px;
}

.detail-support-drawer > summary::-webkit-details-marker {
  display: none;
}

.detail-support-drawer > summary::before {
  content: "+";
  float: right;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--muted);
  font-size: 18px;
}

.detail-support-drawer[open] > summary::before {
  content: "−";
}

.detail-support-drawer > summary strong {
  font-size: 13px;
}

.detail-support-drawer > summary span {
  display: none;
  color: var(--muted);
  font-size: 11px;
}

.detail-support-drawer[open] > summary span {
  display: block;
}

.detail-support-body {
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding: 13px;
}

.detail-support-body .side-summary {
  margin: 0;
  box-shadow: none;
}

.detail-support-body .side-summary h3 {
  line-height: 1.4;
}

html[data-theme="dark"] .dashboard-sidebar .side-link.is-active,
html[data-theme="dark"] .dashboard-status-tabs a:hover,
html[data-theme="dark"] .dashboard-status-tabs a.is-active {
  background: #314058;
  color: #ffffff;
}

html[data-theme="dark"] .dashboard-status-tabs a.is-active span {
  background: #1e3a5f;
  color: #bfdbfe;
}

html[data-theme="dark"] .dashboard-modal,
html[data-theme="dark"] .dashboard-search-section,
html[data-theme="dark"] .dashboard-display-settings fieldset,
html[data-theme="dark"] .detail-support,
html[data-theme="dark"] .detail-support-body,
html[data-theme="dark"] .personal-flag-settings-mini {
  background: #1f2937;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .dashboard-modal-head,
html[data-theme="dark"] .dashboard-modal-tabs,
html[data-theme="dark"] .detail-support-drawer > summary {
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .dashboard-modal-tabs {
  background: #263244;
}

html[data-theme="dark"] .dashboard-modal-tabs button {
  color: #cbd5e1;
}

html[data-theme="dark"] .dashboard-modal-tabs button:hover,
html[data-theme="dark"] .dashboard-modal-tabs button.is-active {
  color: #ffffff;
}

html[data-theme="dark"] .dashboard-modal-head span,
html[data-theme="dark"] .detail-support-drawer > summary span,
html[data-theme="dark"] .detail-support-drawer > summary::before,
html[data-theme="dark"] .personal-flag-settings-mini p {
  color: #cbd5e1;
}

html[data-theme="dark"] .icon-button {
  background: #263244;
  border-color: #4b5d73;
  color: #f8fafc;
}

html[data-theme="dark"] .personal-flag-chip {
  border-color: color-mix(in srgb, var(--personal-flag-color) 58%, #334155);
  background: color-mix(in srgb, var(--personal-flag-color) 22%, #172033);
  color: #f8fafc;
}

html[data-theme="dark"] .personal-flag-check {
  border-color: color-mix(in srgb, var(--personal-flag-color) 46%, #4b5d73);
  background: color-mix(in srgb, var(--personal-flag-color) 18%, #172033);
}

html[data-theme="dark"] .personal-flag-check:hover {
  border-color: color-mix(in srgb, var(--personal-flag-color) 68%, #64748b);
  background: color-mix(in srgb, var(--personal-flag-color) 24%, #172033);
}

html[data-theme="dark"] .personal-flag-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--personal-flag-color) 82%, #94a3b8);
  background: color-mix(in srgb, var(--personal-flag-color) 28%, #172033);
}

html[data-theme="dark"] .ticket-personal-flags-panel .panel-head span {
  border-color: #4b5d73;
  background: #172033;
  color: #cbd5e1;
}

html[data-theme="dark"] .reply-delay-badge {
  background: #4c1d1d;
  border-color: #ef4444;
  color: #fecaca;
}

html[data-theme="dark"] .reply-delay-alert-list,
html[data-theme="dark"] .reply-delay-alert-detail {
  background: #351b1f;
  border-color: #7f1d1d;
  border-left-color: #ef4444;
  color: #fecaca;
}

html[data-theme="dark"] .reply-delay-alert-list strong,
html[data-theme="dark"] .reply-delay-alert-detail strong,
html[data-theme="dark"] .reply-delay-alert-list span,
html[data-theme="dark"] .reply-delay-alert-detail span {
  color: #fecaca;
}

@media (max-width: 1240px) {
  .main {
    min-width: 0;
  }

  .detail-main,
  .detail-side {
    padding: 14px;
  }

  .detail-command-stack {
    padding: 10px;
  }

  .detail-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .detail-toolbar > button {
    justify-self: start;
  }
}

@media (max-width: 1120px) {
  .ticket-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-support,
  .detail-support:has(.detail-support-drawer[open]) {
    width: 100%;
    max-width: 100%;
  }

  .detail-support {
    min-width: 0;
    position: static;
    top: auto;
  }

  .detail-support-body {
    max-height: none;
  }

  .detail-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  .app-shell { grid-template-rows: auto 1fr; }
  .topbar, .main { min-width: 0; }
  .topbar, .layout, .ticket-detail, .settings-grid { grid-template-columns: 1fr; }
  .dashboard-head-top,
  .dashboard-action-row {
    align-items: stretch;
    flex-direction: column;
  }
  .dashboard-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-status-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-filter-grid,
  .dashboard-search-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-sidebar,
  .detail-support,
  .detail-support:has(.detail-support-drawer[open]) {
    width: 100%;
  }
  .detail-support {
    position: static;
  }
  .detail-support-body {
    max-height: none;
  }
  .topbar {
    gap: 10px;
    padding: 10px 16px;
  }
  .topnav { flex-wrap: wrap; }
  .sidebar { min-height: 0; }
  .filter-bar,
  .report-filter-bar,
  .saved-view-save,
  .detail-toolbar {
    grid-template-columns: 1fr;
  }
  .detail-toolbar label.check.compact.detail-toolbar-notification {
    grid-column: 1 / -1;
  }
  .bulk-toolbar { grid-template-columns: 1fr; }
  .detail-title-row { display: grid; }
  .form-grid.columns { grid-template-columns: 1fr; }
  .routing-form { grid-template-columns: 1fr; }
  .routing-form label:first-of-type { grid-column: auto; }
  .routing-condition-row { grid-template-columns: 1fr; }
  .line-form-folder-editor,
  .line-form-source-panel,
  .line-form-setting-row,
  .line-form-faq-fields,
  .routing-rule-card > summary,
  .routing-rule-facts {
    grid-template-columns: 1fr;
  }
  .line-product-child-folder-list {
    margin-left: 0;
  }
  .routing-rule-summary-side {
    justify-content: flex-start;
  }
  .settings-hub-grid,
  .settings-screen-map,
  .settings-tree-children,
  .product-page-workbench,
  .setting-status-grid,
  .setting-check-grid { grid-template-columns: 1fr; }
  .product-status-report-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-status-report-actions {
    justify-content: flex-start;
  }
  .product-goal-audit-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-post-manual-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .report-product-manual-board-head,
  .report-product-manual-card-head {
    flex-direction: column;
  }
  .report-product-manual-actions {
    justify-content: flex-start;
  }
  .product-manual-checklist-head,
  .product-manual-checklist-card-head {
    flex-direction: column;
  }
  .product-manual-checklist-rail {
    grid-template-columns: 1fr;
  }
  .product-status-decision-grid {
    grid-template-columns: 1fr;
  }
  .product-completion-conditions-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-completion-conditions-list {
    grid-template-columns: 1fr;
  }
  .product-pre-production-checklist-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-pre-production-checklist-list {
    grid-template-columns: 1fr;
  }
  .product-production-approval-guard-main,
  .product-production-approval-guard-lists {
    grid-template-columns: 1fr;
  }
  .product-production-approval-guard-actions {
    justify-content: flex-start;
  }
  .product-manual-operation-guide-head {
    flex-direction: column;
  }
  .product-manual-operation-guide li {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .product-manual-operation-guide li .subtle-button {
    grid-column: 2;
    justify-self: flex-start;
  }
  .product-production-approval-guard-checks li {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .product-production-approval-guard-checks li .subtle-button {
    grid-column: 2;
    justify-self: flex-start;
  }
  .product-operation-final-checklist-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-operation-final-check {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .product-operation-final-check em,
  .product-operation-final-check b {
    grid-column: 2;
    justify-self: flex-start;
  }
  .product-goal-audit-item {
    grid-template-columns: 1fr;
  }
  .product-post-manual-step {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .product-post-manual-step em,
  .product-post-manual-step .subtle-button {
    grid-column: 2;
    justify-self: flex-start;
  }
  .product-after-manual-gate-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .product-after-manual-gate-head > div:last-child {
    justify-content: flex-start;
  }
  .product-after-manual-gate-grid {
    grid-template-columns: 1fr;
  }
  .product-after-manual-gate-card {
    min-height: 0;
  }
  .report-product-manual-task {
    grid-template-columns: 1fr;
  }
  .report-product-manual-task .soft-tag,
  .report-product-manual-task small {
    justify-self: flex-start;
    text-align: left;
  }
  .product-manual-checklist-task {
    grid-template-columns: 1fr;
  }
  .product-manual-checklist-task .soft-tag,
  .product-manual-checklist-task .subtle-button {
    justify-self: flex-start;
  }
  .product-next-action-strip {
    grid-template-columns: 1fr;
  }
  .product-connection-map-flow-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .product-connection-map-flow-arrow {
    display: none;
  }
  .product-connection-map-flow-row em {
    text-align: left;
  }
  .product-readiness-impact-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .product-readiness-impact-row b {
    white-space: normal;
  }
  .product-next-action-tags {
    justify-content: flex-start;
  }
  .product-next-action-strip > .subtle-button {
    justify-self: flex-start;
  }
  .development-handoff-grid,
  .development-readiness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketplace-decision-grid,
  .marketplace-decision-columns { grid-template-columns: 1fr; }
  .sync-log-row { grid-template-columns: 1fr; }
  .preview-summary { grid-template-columns: 1fr; }
  .metric-grid, .response-summary, .report-columns { grid-template-columns: 1fr; }
  .reply-box-head-actions {
    justify-items: start;
  }
  .reply-flow { justify-content: flex-start; }
  .reply-start-action-form {
    justify-self: start;
  }
  .reply-prep-panel,
  .reply-workspace-grid,
  .reply-start-preview {
    grid-template-columns: 1fr;
  }
  .reply-prep-panel dl {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .confirm-check-list { grid-template-columns: 1fr; }
  .confirm-grid { grid-template-columns: 1fr; }
  .approval-admin-grid { grid-template-columns: 1fr; }
  .template-picker { grid-template-columns: 1fr; }
  .handoff-package-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .handoff-package-item > .subtle-button {
    grid-column: 2;
    justify-self: flex-start;
  }
  .goal-blocking-focus-head {
    display: grid;
  }
  .goal-blocking-focus-item,
  .goal-next-action-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .goal-blocking-focus-item > .subtle-button,
  .goal-next-action-item > .subtle-button {
    grid-column: 2;
    justify-self: flex-start;
  }
  .product-answer-review-item,
  .product-assignee-decision-card,
  .product-knowledge-status-item {
    grid-template-columns: 1fr;
  }
  .product-line-harness-reflection-head,
  .product-line-harness-reflection-head .audit-shortcuts {
    display: grid;
    width: 100%;
  }
  .product-line-harness-test-plan-head,
  .product-line-harness-test-card-head {
    flex-direction: column;
  }
  .product-line-harness-test-plan-actions {
    justify-content: flex-start;
  }
  .product-line-harness-test-steps li {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .product-line-harness-test-steps small {
    grid-column: 2;
  }
  .product-line-harness-reflection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-answer-review-main {
    grid-template-columns: 1fr;
  }
  .product-answer-review-actions,
  .product-answer-review-actions .inline-form {
    justify-content: stretch;
  }
  .product-answer-review-product-actions,
  .product-answer-review-product-status {
    justify-content: flex-start;
  }
  .product-answer-draft-editor-head,
  .product-answer-draft-row summary,
  .product-answer-draft-summary,
  .product-answer-draft-actions {
    display: grid;
    width: 100%;
  }
  .product-answer-draft-row-tags {
    justify-content: flex-start;
  }
  .product-answer-review-actions .subtle-button,
  .product-answer-review-actions button {
    width: 100%;
  }
  .product-answer-review-global-action {
    grid-template-columns: 1fr;
  }
  .product-answer-review-focus {
    grid-template-columns: 1fr;
  }
  .product-answer-review-focus-tags {
    justify-content: flex-start;
  }
  .product-answer-review-global-action button {
    width: 100%;
  }
  .product-answer-review-focus > .subtle-button {
    justify-self: flex-start;
  }
  .product-answer-draft-actions button {
    width: 100%;
  }
  .product-answer-review-inline-action,
  .product-answer-review-inline-action button {
    width: 100%;
  }
  .product-knowledge-inline-form,
  .product-knowledge-inline-form button {
    width: 100%;
  }
  .followup-workflow-grid {
    grid-template-columns: 1fr;
  }
  .setting-row-with-meta .meta {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
  .bar-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .bar-count {
    justify-content: flex-start;
  }
  .inline-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 4px 0;
  }
  .inline-form input { width: 100%; }
  .ticket-table { min-width: 680px; }
  .line-thread { padding: 12px; }
  .line-message {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .line-message.outbound {
    grid-template-columns: minmax(0, 1fr) 34px;
  }
  .line-avatar {
    width: 34px;
    height: 34px;
    font-size: 10px;
  }
  .notification-item {
    grid-template-columns: 1fr;
  }
  .notification-actions {
    justify-content: flex-start;
  }
  .line-account-policy-box {
    grid-template-columns: 1fr;
  }
  .support-product-inline-folder-fields {
    grid-template-columns: 1fr;
  }
  .knowledge-quick-approve-form {
    grid-template-columns: 1fr;
  }
  .knowledge-quick-approve-form button {
    width: 100%;
    min-width: 0;
  }
  .product-assignee-decision-head {
    align-items: stretch;
    flex-direction: column;
  }
  .product-assignee-quick-apply {
    grid-template-columns: 1fr;
  }
  .product-assignee-quick-apply button {
    width: 100%;
  }
  .product-assignee-decision-card {
    grid-template-columns: 1fr;
  }
  .product-assignee-decision-card button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .development-handoff-grid,
  .development-readiness-grid {
    grid-template-columns: 1fr;
  }
}

/* MailDealer parity: list navigation, draft visibility, detail navigation and mail editor. */
.dashboard-action-row .subtle-button.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--info-text);
}

.dashboard-pagination {
  min-height: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line-soft);
  background: var(--surface-soft);
  padding: 7px 10px;
  margin: 10px 0;
}

.dashboard-result-range,
.dashboard-page-size,
.dashboard-page-links {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dashboard-result-range {
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-result-range strong {
  color: var(--text);
  font-size: 13px;
}

.dashboard-page-size > span {
  margin-right: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-page-size a,
.dashboard-page-links a {
  min-width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--button-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  padding: 0 7px;
}

.dashboard-page-size a:hover,
.dashboard-page-links a:hover,
.dashboard-page-size a.is-active,
.dashboard-page-links a.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--info-text);
}

.dashboard-page-links .dashboard-page-arrow {
  font-size: 20px;
  line-height: 1;
}

.dashboard-page-links .is-disabled {
  pointer-events: none;
  opacity: .38;
}

.dashboard-page-ellipsis {
  color: var(--muted);
  padding: 0 2px;
}

.dashboard-sort-link {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  white-space: nowrap;
}

.dashboard-sort-link:hover,
.dashboard-sort-link.is-active {
  color: var(--primary);
}

.dashboard-sort-link small {
  min-width: 9px;
  color: currentColor;
  font-size: 9px;
}

.draft-dot {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  border: 1px solid #f6c66c;
  border-radius: 999px;
  background: #fff7e6;
  color: #8a4b12;
  font-size: 11px;
  font-weight: 900;
  padding: 1px 7px;
  margin-right: 4px;
  vertical-align: middle;
}

html[data-theme="dark"] .draft-dot {
  border-color: #b7791f;
  background: #3a2b17;
  color: #fde3a7;
}

.detail-navigation {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.detail-neighbor-links {
  display: flex;
  align-items: center;
  gap: 5px;
}

.detail-neighbor-links .icon-button {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.detail-neighbor-links .is-disabled {
  opacity: .35;
}

.reply-rich-editor {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field-bg);
  overflow: hidden;
}

.reply-editor-head {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-soft);
  padding: 6px 8px 6px 11px;
}

.reply-editor-head > strong {
  color: var(--text);
  font-size: 12px;
}

.reply-editor-modes {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.reply-editor-modes button {
  min-height: 27px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: var(--button-bg);
  color: var(--muted);
  font-size: 11px;
  padding: 0 9px;
}

.reply-editor-modes button:first-child {
  border-left: 0;
}

.reply-editor-modes button.is-active {
  background: var(--primary);
  color: #fff;
}

.reply-editor-toolbar {
  min-height: 38px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-soft);
  padding: 5px 8px;
}

.reply-editor-toolbar button {
  min-width: 30px;
  height: 28px;
  border-radius: 5px;
  background: var(--button-bg);
  color: var(--text);
  font-size: 12px;
  padding: 0 7px;
}

.reply-editor-toolbar button:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--info-text);
}

.reply-editor-content,
.reply-plain-editor {
  width: 100%;
  min-height: 300px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  line-height: 1.7;
  overflow: auto;
  overflow-wrap: anywhere;
  padding: 14px;
}

.reply-editor-content:focus,
.reply-plain-editor:focus {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
}

.reply-editor-content:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.reply-editor-content p:first-child,
.reply-editor-content div:first-child {
  margin-top: 0;
}

.reply-editor-content p:last-child,
.reply-editor-content div:last-child {
  margin-bottom: 0;
}

.reply-editor-content a {
  color: var(--blue);
  text-decoration: underline;
}

@media (max-width: 760px) {
  .dashboard-pagination {
    align-items: flex-start;
  }
  .dashboard-result-range {
    width: 100%;
  }
  .reply-editor-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Natural-language routing assistant */
.routing-assistant {
  display: grid;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: var(--surface-soft);
}

.routing-assistant-head,
.routing-assistant-form-actions,
.routing-assistant-proposal-head,
.routing-assistant-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.routing-assistant-head h2,
.routing-assistant-head p,
.routing-assistant-form p {
  margin: 4px 0 0;
}

.routing-assistant-head p,
.routing-assistant-form-actions p,
.routing-assistant-proposal-head > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.routing-assistant-provider,
.routing-assistant-unsaved {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.routing-assistant-unsaved {
  border-color: #f0b36a;
  background: var(--warning-bg);
  color: var(--warning-text);
}

.routing-assistant-form {
  display: grid;
  gap: 7px;
}

.routing-assistant-form > label {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.routing-assistant-form textarea {
  min-height: 86px;
  resize: vertical;
}

.routing-assistant-proposal {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.routing-assistant-proposal.is-ready {
  border-color: #78bca3;
}

.routing-assistant-proposal-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.routing-assistant-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--line-soft);
}

.routing-assistant-summary > div {
  min-width: 0;
  padding: 10px;
  background: var(--surface-soft);
}

.routing-assistant-summary dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.routing-assistant-summary dd {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.routing-assistant-impact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--info-bg);
  color: var(--info-text);
}

.routing-assistant-impact span {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 12px;
  font-weight: 800;
}

.routing-assistant-impact strong {
  font-size: 18px;
}

.routing-assistant-impact small {
  margin-left: auto;
}

.routing-assistant-notice,
.routing-assistant-duplicates {
  padding: 9px 11px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
}

.routing-assistant-notice p {
  margin: 2px 0 0;
}

.routing-assistant-notice.is-error {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.routing-assistant-notice.is-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.routing-assistant-duplicates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  border: 1px solid var(--line-soft);
  color: var(--muted);
}

.routing-assistant-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.routing-assistant-actions form {
  margin: 0;
}

html[data-theme="dark"] .routing-assistant {
  background: var(--surface-soft);
}

html[data-theme="dark"] .routing-assistant-proposal,
html[data-theme="dark"] .routing-assistant-provider {
  background: var(--surface);
}

@media (max-width: 900px) {
  .routing-assistant-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .routing-assistant-head,
  .routing-assistant-form-actions,
  .routing-assistant-proposal-head {
    align-items: stretch;
    flex-direction: column;
  }

  .routing-assistant-summary {
    grid-template-columns: 1fr;
  }

  .routing-assistant-form-actions button,
  .routing-assistant-actions,
  .routing-assistant-actions form,
  .routing-assistant-actions button {
    width: 100%;
  }
}

/* Dashboard ticket movement. The compact row handle is the single move affordance. */
.dashboard-move-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-move-hint > span {
  color: var(--primary);
  font-size: 17px;
  line-height: 1;
}

.ticket-table .ticket-move-cell,
.ticket-table .ticket-select-cell {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  padding-inline: 5px;
  text-align: center;
}

.ticket-table .ticket-select-cell > .ticket-select {
  margin: 0;
}

.ticket-move-handle,
.ticket-move-placeholder {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
}

.ticket-move-handle {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--primary);
  cursor: grab;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
  padding: 0;
  touch-action: none;
  user-select: none;
}

.ticket-move-handle:hover,
.ticket-move-handle:focus-visible,
.ticket-move-handle[aria-pressed="true"] {
  border-color: var(--interaction-border);
  background: var(--interaction-selected);
  color: var(--text);
}

.ticket-move-handle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.ticket-move-handle:active,
.dashboard-layout.is-ticket-dragging .ticket-move-handle[aria-pressed="true"] {
  cursor: grabbing;
}

.ticket-table[data-dashboard-table].is-compact .ticket-move-cell,
.ticket-table[data-dashboard-table].is-compact .ticket-select-cell {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  padding-inline: 5px;
}

.ticket-table[data-dashboard-table].is-compact .ticket-move-handle,
.ticket-table[data-dashboard-table].is-compact .ticket-move-placeholder {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

.dashboard-ticket-move-status {
  min-height: 32px;
  margin: 0 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--info-bg);
  color: var(--info-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  padding: 7px 10px;
}

.dashboard-ticket-move-status[hidden] {
  display: none;
}

.dashboard-ticket-move-status[data-tone="success"] {
  background: var(--success-bg);
  color: var(--success-text);
}

.dashboard-ticket-move-status[data-tone="error"] {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.dashboard-layout.is-ticket-move-active .dashboard-sidebar [data-ticket-move-target] {
  cursor: copy;
}

.ticket-table tr[data-ticket-move-source].is-ticket-move-active,
.dashboard-layout.is-ticket-dragging .ticket-table tr[data-ticket-move-source]:has(.ticket-move-handle[aria-pressed="true"]) {
  background: var(--interaction-selected);
  box-shadow: inset 3px 0 0 var(--primary);
}

.dashboard-layout.is-ticket-dragging .ticket-table tr[data-ticket-move-source].is-ticket-move-active {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.dashboard-layout.is-ticket-dragging .ticket-table {
  user-select: none;
}

.dashboard-layout.is-ticket-move-active .dashboard-sidebar [data-ticket-move-target].is-ticket-move-over {
  background: var(--interaction-selected-strong);
  box-shadow: inset 3px 0 0 var(--primary), inset 0 0 0 1px var(--interaction-border);
}

.dashboard-layout[aria-busy="true"] .ticket-move-handle {
  cursor: wait;
  opacity: .45;
  pointer-events: none;
}

html[data-theme="dark"] .dashboard-layout.is-ticket-move-active .dashboard-sidebar [data-ticket-move-target] {
  cursor: copy;
}

.dashboard-layout[data-workspace-mode="horizontal"] .ticket-move-handle,
.dashboard-layout[data-workspace-mode="stacked"] .ticket-move-handle {
  flex: 0 0 auto;
}

/* Resizable inquiry workspaces. Width variables are restored per user by views.php. */
.dashboard-layout[data-workspace-layout="dashboard"],
.ticket-detail[data-workspace-layout="detail"] {
  --workspace-left-width: 210px;
  --workspace-right-width: 360px;
  min-width: 0;
  gap: 0;
}

.dashboard-layout[data-workspace-layout="dashboard"][data-workspace-mode="horizontal"] {
  grid-template-columns: var(--workspace-left-width) 9px minmax(0, 1fr);
}

.ticket-detail[data-workspace-layout="detail"][data-workspace-mode="horizontal"] {
  --workspace-right-current: var(--workspace-right-width);
  grid-template-columns: var(--workspace-left-width) 9px minmax(0, 1fr) 9px var(--workspace-right-current);
}

.ticket-detail[data-workspace-layout="detail"]:has(> .detail-support > .detail-support-drawer:not([open])) {
  --workspace-right-current: 104px;
}

.dashboard-layout[data-workspace-layout="dashboard"] > .dashboard-sidebar,
.ticket-detail[data-workspace-layout="detail"] > .workspace-left-sidebar,
.ticket-detail[data-workspace-layout="detail"] > .detail-support {
  width: 100%;
  max-width: 100%;
}

.dashboard-layout[data-workspace-layout="dashboard"] > .dashboard-sidebar,
.ticket-detail[data-workspace-layout="detail"] > .workspace-left-sidebar {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
}

.ticket-detail[data-workspace-layout="detail"] > .workspace-left-sidebar {
  padding: 9px;
}

.ticket-detail[data-workspace-layout="detail"] > .detail-main,
.dashboard-layout[data-workspace-layout="dashboard"] > .content-panel {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ticket-detail[data-workspace-layout="detail"] > .detail-support,
.ticket-detail[data-workspace-layout="detail"] > .detail-support:has(.detail-support-drawer[open]),
.ticket-detail[data-workspace-layout="detail"].line-ticket-detail > .detail-support {
  width: 100%;
  max-width: 100%;
}

.detail-folder-sidebar .sidebar-folder.is-current > summary,
.detail-folder-sidebar .sidebar-product-link.is-active,
.detail-folder-sidebar .sidebar-quick-link.is-active {
  background: var(--interaction-selected);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--primary);
}

.workspace-separator {
  width: 9px;
  min-width: 9px;
  min-height: 160px;
  position: relative;
  align-self: stretch;
  z-index: 3;
  border: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}

.workspace-separator::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  inset: 0 auto 0 4px;
  background: var(--line);
  transition: width .14s ease, inset .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.workspace-separator:hover::before,
.workspace-separator:focus-visible::before,
.workspace-separator.is-dragging::before {
  width: 3px;
  left: 3px;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--interaction-focus);
}

.workspace-separator:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.workspace-separator.is-dragging,
.workspace-is-resizing,
.workspace-is-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

html[data-theme="dark"] .detail-folder-sidebar .sidebar-folder.is-current > summary,
html[data-theme="dark"] .detail-folder-sidebar .sidebar-product-link.is-active,
html[data-theme="dark"] .detail-folder-sidebar .sidebar-quick-link.is-active {
  background: var(--interaction-selected);
  color: #f8fafc;
}

body:has(> .app-shell.workspace-shell [data-workspace-mode="horizontal"]) {
  height: 100dvh;
  overflow: hidden;
}

.app-shell.workspace-shell:has([data-workspace-mode="horizontal"]) {
  height: 100dvh;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.app-shell.workspace-shell:has([data-workspace-mode="horizontal"]) > .main {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-shell.workspace-shell > .main > [data-workspace-mode="horizontal"] {
  min-height: 0;
  flex: 1 1 auto;
  align-items: stretch;
}

.dashboard-layout[data-workspace-mode="horizontal"] > .dashboard-sidebar,
.ticket-detail[data-workspace-mode="horizontal"] > .workspace-left-sidebar,
.ticket-detail[data-workspace-mode="horizontal"] > .detail-main,
.dashboard-layout[data-workspace-mode="horizontal"] > .content-panel,
.ticket-detail[data-workspace-mode="horizontal"] > .detail-support {
  height: 100%;
  min-height: 0;
  max-height: none;
  position: static;
  top: auto;
  align-self: stretch;
  overflow-y: auto;
}

.ticket-detail[data-workspace-mode="horizontal"] > .detail-support {
  overflow-x: hidden;
}

.ticket-detail[data-workspace-mode="horizontal"] > .detail-support .detail-support-body,
.ticket-detail[data-workspace-mode="horizontal"] > .detail-support .line-ticket-customer-support-body {
  max-height: none;
  overflow: visible;
}

[data-workspace-mode="horizontal"] > .workspace-separator {
  height: auto;
  min-height: 0;
  top: auto;
}

.dashboard-layout[data-workspace-mode="stacked"],
.ticket-detail[data-workspace-mode="stacked"] {
  grid-template-columns: minmax(0, 1fr);
}

[data-workspace-mode="stacked"] > .workspace-separator {
  display: none;
}

.dashboard-layout[data-workspace-mode="stacked"] > .content-panel,
.ticket-detail[data-workspace-mode="stacked"] > .detail-main {
  order: 1;
}

.dashboard-layout[data-workspace-mode="stacked"] > .dashboard-sidebar,
.ticket-detail[data-workspace-mode="stacked"] > .workspace-left-sidebar {
  width: 100%;
  max-width: 100%;
  max-height: none;
  min-height: 0;
  position: static;
  top: auto;
  order: 2;
  overflow: visible;
}

.ticket-detail[data-workspace-mode="stacked"] > .detail-support,
.ticket-detail[data-workspace-mode="stacked"] > .detail-support:has(.detail-support-drawer[open]),
.ticket-detail[data-workspace-mode="stacked"].line-ticket-detail > .detail-support {
  width: 100%;
  max-width: 100%;
  position: static;
  top: auto;
  order: 3;
}

/* LINE and bot replies stay attached to the talk surface; mail keeps its popup workspace. */
.line-ticket-detail .line-chat-frame {
  display: grid;
  grid-template-rows: minmax(220px, auto) auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #e2edf8;
  margin: 14px 0;
}

.line-ticket-detail .line-chat-frame .line-thread {
  align-content: end;
  min-width: 0;
  min-height: 220px;
  max-height: min(58vh, 620px);
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  margin: 0;
}

.line-ticket-detail .line-chat-composer-dock {
  min-width: 0;
  max-width: 100%;
  border-top: 1px solid #b8c7d8;
  background: var(--surface);
  box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.08);
  margin: 0;
  padding: 10px 12px 12px;
  scroll-margin-top: 84px;
}

.line-ticket-detail .line-chat-composer-dock .reply-box-head {
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.line-ticket-detail .line-chat-composer-dock .reply-box-head h2 {
  margin: 0 0 3px;
  font-size: 16px;
  line-height: 1.3;
}

.line-ticket-detail .line-chat-composer-dock .reply-box-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  justify-content: flex-end;
}

.line-ticket-detail .line-chat-composer-dock .reply-flow {
  gap: 4px;
}

.line-ticket-detail .line-chat-composer-dock .reply-flow-step {
  padding: 5px 7px;
  font-size: 11px;
}

.line-ticket-detail .line-reply-workspace {
  min-width: 0;
  gap: 8px;
}

.line-ticket-detail .line-reply-workspace > .reply-workspace-grid {
  order: 1;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.line-ticket-detail .line-reply-workspace > .reply-prep-panel {
  order: 2;
  grid-template-columns: minmax(0, 1fr);
  border: 0;
  background: transparent;
  padding: 0;
}

.line-ticket-detail .line-reply-workspace > .reply-prep-panel > div {
  display: none;
}

.line-ticket-detail .line-reply-workspace > .reply-prep-panel dl {
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 5px 9px;
  padding: 8px 10px;
}

.line-ticket-detail .line-reply-workspace .reply-compose-panel {
  min-width: 0;
  gap: 8px;
  border-color: #b8c7d8;
  background: var(--surface);
  padding: 10px;
}

.line-ticket-detail .line-reply-workspace .reply-compose-head { order: 1; }
.line-ticket-detail .line-reply-workspace .reply-body-label { order: 2; }
.line-ticket-detail .line-reply-workspace .reply-actions { order: 3; }
.line-ticket-detail .line-reply-workspace .line-send-guard { order: 4; }
.line-ticket-detail .line-reply-workspace .draft-note { order: 5; }

.line-ticket-detail .line-reply-workspace .reply-compose-head h3 {
  margin-top: 2px;
  font-size: 14px;
}

.line-ticket-detail .line-reply-workspace .reply-body-label {
  min-width: 0;
  margin-top: 0;
}

.line-ticket-detail .line-reply-workspace .reply-compose-panel textarea {
  width: 100%;
  min-width: 0;
  min-height: 108px;
  max-height: 220px;
  resize: vertical;
}

.line-ticket-detail .line-reply-workspace .reply-actions {
  gap: 7px;
}

.line-ticket-detail .line-reply-workspace .reply-actions > button {
  min-width: 0;
  max-width: 100%;
}

.line-ticket-detail .line-reply-workspace .line-send-guard {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
  align-items: baseline;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
  padding: 6px 8px;
}

.line-ticket-detail .line-reply-workspace .line-send-guard strong {
  font-size: 11px;
}

.line-ticket-detail .line-reply-workspace .draft-note {
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
  padding: 6px 8px;
}

.line-ticket-detail .line-reply-tools {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
}

.line-ticket-detail .line-reply-tools > summary {
  cursor: pointer;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  padding: 9px 10px;
  overflow-wrap: anywhere;
}

.line-ticket-detail .line-reply-tools[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}

.line-ticket-detail .line-reply-tools-body {
  min-width: 0;
}

.line-ticket-detail .line-reply-tools .reply-assist-panel {
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px;
}

.line-ticket-detail .line-reply-tools .reply-template-shelf {
  grid-column: 1 / -1;
}

.line-ticket-detail .line-reply-tools input,
.line-ticket-detail .line-reply-tools select,
.line-ticket-detail .line-reply-tools textarea {
  min-width: 0;
  max-width: 100%;
}

.line-ticket-detail .line-reply-tools input[type="file"] {
  width: 100%;
}

.line-ticket-detail .line-attachment-note {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: -2px;
}

.line-ticket-detail .line-chat-composer-dock .reply-disabled {
  gap: 7px;
}

.line-ticket-detail .line-chat-composer-dock .reply-disabled .reply-start-preview {
  display: none;
}

.line-ticket-detail .line-reply-disabled-reason {
  border: 1px solid #f4b6a6;
  border-radius: 6px;
  background: #fff4ee;
  color: #9a3412;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  margin: 0;
  padding: 8px 10px;
  overflow-wrap: anywhere;
}

.line-ticket-detail .line-chat-composer-dock .reply-disabled textarea {
  min-height: 72px;
  max-height: 96px;
}

html[data-theme="dark"] .line-ticket-detail .line-chat-composer-dock,
html[data-theme="dark"] .line-ticket-detail .line-reply-tools {
  border-color: #3b4d63;
  background: #172233;
}

html[data-theme="dark"] .line-ticket-detail .line-chat-composer-dock {
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .line-ticket-detail .line-reply-tools[open] > summary {
  border-bottom-color: #3b4d63;
}

html[data-theme="dark"] .line-ticket-detail .line-reply-disabled-reason {
  border-color: #b45309;
  background: #3a2a12;
  color: #fde68a;
}

/* Keep the LINE workspace conversational: ticket operations live in the support column. */
.line-ticket-detail .detail-support {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  width: 360px;
  gap: 10px;
  padding: 12px;
}

.line-ticket-detail .line-ticket-info-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 10px;
}

.line-ticket-detail .line-ticket-info-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.line-ticket-detail .line-ticket-info-head > div {
  min-width: 0;
}

.line-ticket-detail .line-ticket-info-head h2 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.line-ticket-detail .line-ticket-complete-form {
  flex: 0 0 auto;
  margin: 0;
}

.line-ticket-detail .line-ticket-info-meta {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 5px 9px;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.line-ticket-detail .line-ticket-info-meta dt {
  color: var(--muted);
  font-weight: 800;
}

.line-ticket-detail .line-ticket-info-meta dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.line-ticket-detail .line-ticket-support-tools {
  display: grid;
  gap: 8px;
  min-width: 0;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 10px;
}

.line-ticket-detail .line-ticket-support-tools h2 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.line-ticket-detail .line-ticket-support-tool-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.line-ticket-detail .line-ticket-support-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  border: 1px solid #b8c7d8;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  padding: 7px 8px;
  overflow-wrap: anywhere;
}

.line-ticket-detail .line-ticket-support-tool:hover,
.line-ticket-detail .line-ticket-support-tool:focus-visible {
  border-color: #0f766e;
  background: #f0fdfa;
  color: #0f766e;
}

.line-ticket-detail .line-ticket-toolbar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.line-ticket-detail .line-ticket-toolbar > label {
  align-self: end;
}

.line-ticket-detail .line-ticket-secondary-fields {
  grid-column: 1 / -1;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface);
}

.line-ticket-detail .line-ticket-secondary-fields > summary {
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  padding: 9px 11px;
}

.line-ticket-detail .line-ticket-secondary-fields[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}

.line-ticket-detail .line-ticket-secondary-fields-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 10px;
}

.line-ticket-detail .line-ticket-secondary-fields-body > label {
  min-width: 0;
}

.line-ticket-detail .line-ticket-secondary-fields-body .detail-toolbar-notification {
  grid-column: 1 / -1;
  min-height: 36px;
}

.line-ticket-detail .line-ticket-toolbar .detail-toolbar-submit {
  grid-column: 1 / -1;
  min-width: 76px;
}

.line-ticket-detail .line-chat-composer-dock .reply-box-head {
  justify-content: space-between;
}

.line-ticket-detail .line-chat-composer-dock .reply-box-head-actions:empty {
  display: none;
}

.line-ticket-detail .line-reply-minimal-status {
  margin: 0;
}

.line-ticket-detail .line-reply-minimal-status p {
  max-width: 560px;
  margin: 0;
  color: #9a3412;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.line-ticket-detail .line-reply-workspace .reply-autosave-status.line-reply-minimal-status {
  display: none;
}

.line-ticket-detail .line-reply-workspace .reply-autosave-status.line-reply-minimal-status[data-state="error"] {
  display: inline-flex;
  order: 1;
  margin-bottom: 2px;
}

.line-ticket-detail .line-ticket-customer-support {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  overflow: hidden;
}

.line-ticket-detail .line-ticket-customer-support > summary {
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  padding: 10px 12px;
}

.line-ticket-detail .line-ticket-customer-support[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}

.line-ticket-detail .line-ticket-customer-support-body {
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 210px);
  overflow-y: auto;
  padding: 10px;
}

.line-ticket-detail .line-ticket-customer-support-body > .side-summary,
.line-ticket-detail .line-ticket-customer-support-body > .ticket-personal-flags-panel {
  margin: 0;
}

html[data-theme="dark"] .line-ticket-detail .line-ticket-info-panel,
html[data-theme="dark"] .line-ticket-detail .line-ticket-secondary-fields,
html[data-theme="dark"] .line-ticket-detail .line-ticket-customer-support {
  border-color: #3b4d63;
}

html[data-theme="dark"] .line-ticket-detail .line-ticket-secondary-fields,
html[data-theme="dark"] .line-ticket-detail .line-ticket-customer-support {
  background: #172233;
}

html[data-theme="dark"] .line-ticket-detail .line-ticket-secondary-fields[open] > summary,
html[data-theme="dark"] .line-ticket-detail .line-ticket-customer-support[open] > summary {
  border-bottom-color: #3b4d63;
}

html[data-theme="dark"] .line-ticket-detail .line-ticket-support-tool {
  border-color: #4b5d73;
  background: #263244;
  color: #f8fafc;
}

html[data-theme="dark"] .line-ticket-detail .line-ticket-support-tool:hover,
html[data-theme="dark"] .line-ticket-detail .line-ticket-support-tool:focus-visible {
  border-color: #5eead4;
  background: #123c3a;
  color: #ccfbf1;
}

html[data-theme="dark"] .line-ticket-detail .line-reply-minimal-status p {
  color: #fdba74;
}

@media (max-width: 1120px) {
  .line-ticket-detail .detail-support {
    width: 100%;
    max-width: 100%;
  }

  .line-ticket-detail .line-ticket-customer-support-body {
    max-height: none;
    overflow: visible;
  }

  .line-ticket-detail .line-reply-tools .reply-assist-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .line-ticket-detail .line-reply-tools .reply-template-shelf {
    grid-column: auto;
  }
}

@media (max-width: 1024px) {
  .line-ticket-detail .line-chat-composer-dock .reply-box-head,
  .line-ticket-detail .line-chat-composer-dock .reply-box-head-actions {
    align-items: flex-start;
  }

  .line-ticket-detail .line-chat-composer-dock .reply-box-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .line-ticket-detail .line-reply-workspace .reply-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .line-ticket-detail .line-reply-workspace .reply-actions > button {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .line-ticket-detail .line-chat-frame {
    grid-template-rows: minmax(220px, auto) auto;
  }

  .line-ticket-detail .line-chat-composer-dock {
    padding: 9px;
  }

  .line-ticket-detail .line-reply-workspace .reply-compose-panel,
  .line-ticket-detail .line-reply-tools .reply-assist-panel {
    padding: 8px;
  }

  .line-ticket-detail .line-reply-workspace .reply-compose-head,
  .line-ticket-detail .line-reply-workspace .reply-compose-statuses {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .line-ticket-detail .line-ticket-info-head {
    align-items: stretch;
    flex-direction: column;
  }

  .line-ticket-detail .line-ticket-complete-form,
  .line-ticket-detail .line-ticket-complete-form button {
    width: 100%;
  }

  .line-ticket-detail .line-ticket-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .line-ticket-detail .line-ticket-secondary-fields,
  .line-ticket-detail .line-ticket-toolbar .detail-toolbar-submit {
    grid-column: 1;
  }

  .line-ticket-detail .line-ticket-secondary-fields-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .line-ticket-detail .line-reply-workspace .reply-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .line-ticket-detail .line-ticket-support-tool-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .line-ticket-detail .line-reply-workspace .line-send-guard {
    display: grid;
  }
}

/* Keep ticket actions usable without pushing the conversation below the fold. */
.ticket-detail,
.ticket-detail .detail-main,
.ticket-detail .detail-command-stack,
.ticket-detail .detail-title-row,
.ticket-detail .detail-toolbar {
  max-width: 100%;
}

.ticket-detail .detail-title-row > *,
.ticket-detail .detail-actions,
.ticket-detail .detail-actions > * {
  min-width: 0;
}

.line-reply-anchor {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

#ticket-reply {
  scroll-margin-top: 84px;
}

@media (min-width: 1121px) and (max-width: 1180px) {
  .ticket-detail .detail-command-stack {
    gap: 7px;
    padding: 8px;
  }

  .ticket-detail .detail-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .ticket-detail .detail-title-row h1 {
    margin-block: 3px;
    font-size: 20px;
    line-height: 1.25;
  }

  .ticket-detail .detail-actions {
    align-self: start;
    justify-content: flex-end;
    gap: 6px;
    max-width: 420px;
  }

  .ticket-detail .detail-actions button,
  .ticket-detail .detail-actions .primary,
  .ticket-detail .detail-actions .assignee-chip {
    min-height: 32px;
    font-size: 11px;
    padding: 4px 8px;
  }

  .ticket-detail .detail-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
  }

  .ticket-detail .detail-toolbar > label {
    font-size: 11px;
    line-height: 1.25;
  }

  .ticket-detail .detail-toolbar select {
    min-width: 0;
    height: 32px;
    margin-top: 2px;
    padding-block: 3px;
    font-size: 12px;
  }

  .ticket-detail .detail-toolbar label.check.compact {
    min-height: 32px;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .ticket-detail .detail-toolbar > button {
    min-height: 32px;
    padding: 4px 10px;
  }

  .ticket-detail .toolbar-help-row {
    min-width: 0;
    gap: 6px;
    margin: 0;
    font-size: 10px;
    line-height: 1.3;
  }

  .ticket-detail .toolbar-help-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ticket-detail .toolbar-help-row .subtle-button {
    flex: 0 0 auto;
    min-height: 26px;
    padding: 2px 7px;
    font-size: 10px;
  }
}

/* The dedicated mail composer should reveal the editor immediately at laptop sizes. */
.reply-window-page .main {
  max-width: 100%;
  padding: 8px;
  overflow-x: hidden;
}

.ticket-detail.reply-window {
  width: 100%;
  max-width: 1180px;
}

.ticket-detail.reply-window .reply-box-head {
  gap: 8px;
  margin-bottom: 6px;
  padding: 6px 0;
}

.ticket-detail.reply-window .reply-box-head h2 {
  margin: 0 0 2px;
  font-size: 18px;
}

.ticket-detail.reply-window .reply-state-line,
.ticket-detail.reply-window .reply-flow {
  gap: 4px;
}

.ticket-detail.reply-window .reply-flow-step {
  padding: 5px 7px;
  font-size: 11px;
}

.ticket-detail.reply-window .reply-popup-context {
  gap: 6px 12px;
  margin: 4px 0 8px;
  padding: 6px 8px;
}

.ticket-detail.reply-window .reply-workspace {
  gap: 8px;
}

.ticket-detail.reply-window .reply-prep-panel {
  grid-template-columns: minmax(150px, .45fr) minmax(0, 1.55fr);
  gap: 8px;
  padding: 8px;
}

.ticket-detail.reply-window .reply-prep-panel > div,
.ticket-detail.reply-window .reply-prep-panel dl {
  padding: 8px;
}

.ticket-detail.reply-window .reply-prep-panel strong {
  margin: 2px 0;
  font-size: 14px;
}

.ticket-detail.reply-window .reply-prep-panel p {
  font-size: 11px;
  line-height: 1.35;
}

.ticket-detail.reply-window .reply-envelope-fields {
  gap: 5px;
}

.ticket-detail.reply-window .reply-envelope-fixed,
.ticket-detail.reply-window .reply-envelope-row {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 7px;
}

.ticket-detail.reply-window .reply-envelope-row input {
  height: 30px;
  padding-block: 3px;
}

.ticket-detail.reply-window .reply-copy-fields {
  padding-top: 5px;
}

.ticket-detail.reply-window .reply-compose-panel,
.ticket-detail.reply-window .reply-assist-panel {
  padding: 10px;
}

.ticket-detail.reply-window .reply-compose-panel {
  min-height: 0;
  gap: 8px;
}

.ticket-detail.reply-window .reply-compose-head {
  gap: 6px;
}

.ticket-detail.reply-window .reply-compose-head h3 {
  margin-top: 2px;
  font-size: 13px;
}

.ticket-detail.reply-window .reply-editor-head,
.ticket-detail.reply-window .reply-editor-toolbar {
  min-height: 32px;
  padding-block: 3px;
}

.ticket-detail.reply-window .reply-editor-content,
.ticket-detail.reply-window .reply-plain-editor {
  min-height: clamp(300px, 48vh, 520px);
}

@media (max-width: 760px) {
  .ticket-detail.reply-window .reply-prep-panel,
  .ticket-detail.reply-window .reply-workspace-grid {
    grid-template-columns: 1fr;
  }
}

/* Business assist workspace (Codex-backed, local-safe by default). */
.codex-workspace {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1440px;
  min-width: 0;
  margin: 0 auto;
}

.codex-workspace-header,
.codex-history-panel .section-heading,
.codex-result-panel .section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.codex-workspace-header > div:first-child,
.codex-history-panel .section-heading > div:first-child,
.codex-result-panel .section-heading > div:first-child {
  min-width: 0;
}

.codex-workspace-header h1 {
  margin: 2px 0 4px;
  font-size: 28px;
  line-height: 1.25;
}

.codex-workspace-header p,
.codex-workspace .section-heading h2,
.codex-workspace .section-heading p {
  margin-block: 0 4px;
}

.codex-workspace .section-heading h2 {
  font-size: 18px;
  line-height: 1.35;
}

.codex-provider-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  width: min(100%, 310px);
  min-width: 260px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  padding: 10px 12px;
}

.codex-provider-state strong,
.codex-provider-state span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.codex-provider-state strong {
  grid-column: 1;
  color: var(--text);
  font-size: 14px;
}

.codex-provider-state span {
  grid-column: 1;
  color: var(--muted);
  font-size: 12px;
}

.codex-provider-state .codex-provider-kicker {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.codex-provider-state code {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--field-bg);
  color: var(--muted);
  font-size: 11px;
  padding: 4px 6px;
}

.codex-provider-state.is-offline {
  border-color: var(--line);
}

.codex-workspace-natural .codex-provider-state {
  grid-template-columns: minmax(0, 1fr);
}

.codex-workspace-natural .codex-provider-state code {
  grid-column: 1;
  grid-row: auto;
  justify-self: start;
  margin-top: 4px;
}

.codex-view-tabs {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  min-height: 42px;
  border-bottom: 1px solid var(--line);
}

.codex-view-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-weight: 800;
  text-decoration: none;
  padding: 0 2px;
}

.codex-view-tabs a:hover,
.codex-view-tabs a:focus-visible {
  color: var(--text);
}

.codex-view-tabs a.is-active {
  border-bottom-color: var(--primary);
  color: var(--text);
}

.codex-intent-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.codex-intent-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.codex-intent-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 112px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 14px;
  text-decoration: none;
}

.codex-intent-card:hover,
.codex-intent-card:focus-visible {
  border-color: var(--primary);
  background: var(--surface-hover);
  outline: none;
}

.codex-intent-card.is-selected {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.codex-intent-card strong,
.codex-intent-card span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.codex-intent-card strong {
  font-size: 15px;
  line-height: 1.4;
}

.codex-intent-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.codex-workspace-grid {
  display: grid;
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.codex-request-panel,
.codex-result-panel,
.codex-history-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.codex-result-panel {
  min-height: 360px;
}

.codex-step-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.codex-request-form {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.codex-operation-picker {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.codex-operation-picker legend {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.codex-operation-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  padding: 11px 12px;
}

.codex-operation-card:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
}

.codex-operation-card.is-selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}

.codex-operation-card input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--primary);
}

.codex-operation-card > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.codex-operation-card strong,
.codex-operation-card small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.codex-operation-card strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.codex-operation-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}

.codex-reply-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  border-left: 3px solid var(--accent);
  background: var(--surface-soft);
  padding: 10px 12px;
}

.codex-reply-guide div {
  min-width: 0;
}

.codex-reply-guide strong,
.codex-reply-guide p {
  overflow-wrap: anywhere;
}

.codex-reply-guide strong {
  font-size: 13px;
}

.codex-reply-guide p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.codex-form-section {
  display: grid;
  gap: 11px;
  min-width: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

.codex-form-section h3 {
  margin: 0;
  font-size: 14px;
}

.codex-request-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.codex-request-form input:not([type="radio"]),
.codex-request-form select,
.codex-request-form textarea {
  width: 100%;
  min-width: 0;
}

.codex-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.codex-form-fields[hidden],
.codex-request-form [data-codex-fields][hidden] {
  display: none;
}

.codex-no-fields {
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  padding: 10px 12px;
}

.codex-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-soft);
  margin: 0 -16px -16px;
  padding: 12px 16px;
}

.codex-submit-row p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.codex-submit-row button {
  max-width: 100%;
  white-space: normal;
}

.codex-result-actions,
.codex-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.codex-run-prompt {
  display: grid;
  gap: 3px;
  border-left: 3px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  margin: 12px 0;
  padding: 9px 11px;
}

.codex-run-prompt span {
  font-size: 11px;
  font-weight: 800;
}

.codex-run-prompt p {
  margin: 0;
  overflow-wrap: anywhere;
}

.codex-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(86px, 1fr));
  gap: 8px;
  margin: 12px 0 18px;
}

.codex-metrics.small {
  grid-template-columns: repeat(4, minmax(86px, 1fr));
}

.codex-metrics > div {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-soft);
  padding: 9px 10px;
}

.codex-metrics span,
.codex-proposal-summary span,
.codex-proposal-final-state span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.codex-metrics strong {
  display: block;
  margin-top: 2px;
  font-size: 20px;
  line-height: 1.2;
}

.codex-table-wrap {
  max-height: 440px;
  margin-bottom: 16px;
}

.codex-history-table-wrap {
  margin-top: 12px;
}

.codex-table-wrap td,
.codex-history-table-wrap td {
  max-width: 360px;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.codex-result-panel h3 {
  margin: 18px 0 8px;
  font-size: 14px;
}

.codex-proposal-final-state {
  display: grid;
  gap: 2px;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  background: var(--surface-soft);
  padding: 10px 12px;
}

.codex-proposal-final-state strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.codex-proposal-summary {
  display: grid;
  gap: 0;
  margin: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.codex-proposal-summary > div {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 0;
}

.codex-proposal-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.codex-confirm-actions {
  margin-top: 12px;
}

.codex-confirm-actions form {
  max-width: 100%;
  margin: 0;
}

.codex-confirm-actions button {
  max-width: 100%;
  white-space: normal;
}

.codex-json-result {
  max-height: 480px;
  overflow: auto;
  white-space: pre-wrap;
}

.codex-natural-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(360px, 0.92fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.codex-interpretation-panel {
  min-width: 0;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.codex-interpretation-panel .section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.codex-natural-request textarea[data-codex-request-text] {
  min-height: 230px;
  resize: vertical;
  font: inherit;
  line-height: 1.7;
  padding: 14px;
}

.codex-request-text-label {
  color: var(--muted) !important;
  font-size: 12px !important;
}

.codex-example-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.codex-example-button {
  max-width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  padding: 7px 10px;
  text-align: left;
}

.codex-example-button:hover,
.codex-example-button:focus-visible {
  border-color: var(--primary);
  background: var(--surface-hover);
  outline: none;
}

.codex-resolver-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
}

.codex-resolver-status.status-resolved {
  border-color: var(--success-text);
  background: var(--success-bg);
  color: var(--success-text);
}

.codex-resolver-status.status-needs_details,
.codex-resolver-status.status-ambiguous {
  border-color: var(--warning-text);
  background: var(--warning-bg);
  color: var(--warning-text);
}

.codex-resolver-status.status-unsupported,
.codex-resolver-status.status-forbidden {
  border-color: var(--danger-text);
  background: var(--danger-bg);
  color: var(--danger-text);
}

.codex-session-request {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  border-left: 3px solid var(--primary);
  background: var(--surface-soft);
  padding: 10px 12px;
}

.codex-session-request span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.codex-session-request p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.codex-confirmation-list {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line-soft);
}

.codex-confirmation-list > div {
  display: grid;
  grid-template-columns: minmax(104px, 138px) minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 0;
}

.codex-confirmation-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.codex-confirmation-list dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.codex-interpretation-panel .codex-confirm-actions {
  justify-content: space-between;
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.codex-interpretation-panel .codex-confirm-actions p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.codex-resolution-stop {
  border-left: 3px solid var(--warning-text);
  background: var(--warning-bg);
  color: var(--warning-text);
  padding: 12px;
}

.codex-interpretation-panel.status-forbidden .codex-resolution-stop,
.codex-interpretation-panel.status-unsupported .codex-resolution-stop {
  border-left-color: var(--danger-text);
  background: var(--danger-bg);
  color: var(--danger-text);
}

.codex-resolution-stop p {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}

.codex-resolution-stop .button {
  margin-top: 10px;
}

.codex-yamato-policy {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.15fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
  border-block: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 16px;
}

.codex-yamato-policy h2,
.codex-yamato-policy p {
  margin: 0;
}

.codex-yamato-policy h2 {
  font-size: 16px;
  line-height: 1.4;
}

.codex-yamato-policy p:not(.codex-step-label) {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.codex-yamato-policy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.codex-yamato-policy li {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
  padding: 4px 7px;
}

@media (max-width: 1000px) {
  .codex-intent-grid,
  .codex-workspace-grid,
  .codex-natural-layout,
  .codex-yamato-policy {
    grid-template-columns: 1fr;
  }

  .codex-intent-card {
    min-height: 0;
  }

  .codex-request-panel {
    max-width: none;
  }
}

@media (max-width: 700px) {
  .codex-workspace-header,
  .codex-history-panel .section-heading,
  .codex-result-panel .section-heading,
  .codex-interpretation-panel .section-heading {
    flex-direction: column;
  }

  .codex-provider-state {
    width: 100%;
    min-width: 0;
  }

  .codex-form-fields,
  .codex-metrics,
  .codex-metrics.small,
  .codex-proposal-summary > div,
  .codex-confirmation-list > div,
  .codex-reply-guide,
  .codex-submit-row {
    grid-template-columns: 1fr;
  }

  .codex-submit-row button,
  .codex-reply-guide .button {
    width: 100%;
  }

  .codex-result-actions {
    width: 100%;
  }

  .codex-interpretation-panel .codex-confirm-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 430px) {
  .codex-workspace-header h1 {
    font-size: 24px;
  }

  .codex-view-tabs {
    gap: 0;
  }

  .codex-view-tabs a {
    flex: 1 1 50%;
    justify-content: center;
  }

  .codex-provider-state {
    grid-template-columns: minmax(0, 1fr);
  }

  .codex-provider-state code {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .codex-request-panel,
  .codex-interpretation-panel,
  .codex-result-panel,
  .codex-history-panel,
  .codex-intent-card {
    padding: 12px;
  }

  .codex-submit-row {
    margin: 0 -12px -12px;
    padding: 12px;
  }

  .codex-confirm-actions,
  .codex-confirm-actions form,
  .codex-confirm-actions button {
    width: 100%;
  }
}

/* Codex answer prototype: ticket-local drawer, no external send. */
.codex-answer-open-button {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
}

.codex-answer-open-button:hover {
  background: #dbeafe;
}

body.codex-answer-is-open {
  overflow: hidden;
}

.codex-answer-layer[hidden] {
  display: none !important;
}

.codex-answer-layer {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(570px, 100vw);
}

.codex-answer-backdrop {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, .45);
  cursor: default;
}

.codex-answer-drawer {
  min-width: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: -16px 0 38px rgba(15, 23, 42, .18);
}

.codex-answer-head,
.codex-answer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
}

.codex-answer-foot {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface-soft);
}

.codex-answer-foot span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.codex-answer-head h2 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.35;
}

.codex-answer-eyebrow {
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
}

.codex-answer-close {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

.codex-answer-scroll {
  min-width: 0;
  overflow: auto;
  padding: 16px 18px 28px;
}

.codex-answer-connection-notice {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  border: 1px solid #93c5fd;
  border-left: 4px solid #2563eb;
  border-radius: 7px;
  background: #eff6ff;
  padding: 11px 12px;
}

.codex-answer-connection-notice strong {
  color: #1e3a8a;
  font-size: 13px;
}

.codex-answer-connection-notice span {
  color: #334155;
  font-size: 12px;
  line-height: 1.55;
}

.codex-answer-connection-notice code {
  color: #1d4ed8;
  font-weight: 800;
}

.codex-answer-section,
.codex-answer-progress,
.codex-answer-result {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.codex-answer-progress,
.codex-answer-result {
  margin-top: 14px;
}

.codex-answer-section-head,
.codex-answer-section-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.codex-answer-section-head {
  justify-content: space-between;
}

.codex-answer-section-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.codex-answer-step-number {
  width: 28px;
  height: 28px;
  display: inline-grid;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.codex-answer-description {
  margin: 12px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.codex-answer-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.codex-answer-scope-grid > div {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  padding: 10px;
}

.codex-answer-scope-grid dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.codex-answer-scope-grid dd {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 4px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.codex-answer-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  border: 0;
  padding: 0;
}

.codex-answer-options legend {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.codex-answer-options label {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  padding: 10px;
  cursor: pointer;
}

.codex-answer-options label:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: inset 3px 0 0 #2563eb;
}

.codex-answer-options input {
  margin: 2px 0 0;
}

.codex-answer-options span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.codex-answer-options strong {
  color: var(--text);
  font-size: 13px;
}

.codex-answer-options small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.codex-answer-constraint-note {
  margin-top: 12px;
  border-left: 3px solid #64748b;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.55;
}

.codex-answer-constraint-note.warning {
  border-left-color: #d97706;
  background: #fffbeb;
  color: #92400e;
}

.codex-answer-generate {
  width: 100%;
  margin-top: 14px;
}

.codex-answer-progress ol {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.codex-answer-progress li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.codex-answer-progress li > span {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
}

.codex-answer-progress li.is-active {
  color: #1d4ed8;
}

.codex-answer-progress li.is-active > span {
  border-color: #2563eb;
  border-top-color: transparent;
  animation: codex-answer-spin .7s linear infinite;
}

.codex-answer-progress li.is-done {
  color: #047857;
}

.codex-answer-progress li.is-done > span {
  border-color: #10b981;
  background: #10b981;
}

@keyframes codex-answer-spin {
  to { transform: rotate(360deg); }
}

.codex-answer-generation-summary {
  overflow: hidden;
  margin: 10px 0;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
}

.codex-answer-generation-mode {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
}

.codex-answer-generation-mode span,
.codex-answer-run-meta dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.codex-answer-generation-mode strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

.codex-answer-run-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line-soft);
}

.codex-answer-run-meta > div {
  min-width: 0;
  padding: 9px 10px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.codex-answer-run-meta > div:nth-child(3n) {
  border-right: 0;
}

.codex-answer-run-meta > div:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.codex-answer-run-meta dd {
  overflow-wrap: anywhere;
  margin: 3px 0 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.codex-answer-editor-label {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.codex-answer-editor-label textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  line-height: 1.75;
}

.codex-answer-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.codex-answer-result-grid section {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  padding: 10px;
}

.codex-answer-result-grid h4,
.codex-answer-warnings strong {
  margin: 0;
  color: var(--text);
  font-size: 12px;
}

.codex-answer-result-grid ul,
.codex-answer-warnings ul {
  display: grid;
  gap: 5px;
  margin: 7px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.codex-answer-result-grid li {
  overflow-wrap: anywhere;
}

.codex-answer-warnings {
  margin-top: 12px;
  border: 1px solid #f59e0b;
  border-radius: 7px;
  background: #fffbeb;
  padding: 10px;
}

.codex-answer-warnings strong,
.codex-answer-warnings li {
  color: #92400e;
}

.codex-answer-action-message {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.codex-answer-action-message:empty {
  display: none;
}

.codex-answer-action-message[data-tone="success"] { color: #047857; }
.codex-answer-action-message[data-tone="error"] { color: #b91c1c; }

.codex-answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.codex-answer-actions button {
  flex: 1 1 110px;
}

.codex-answer-knowledge-candidate {
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
}

.codex-answer-knowledge-candidate summary {
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  padding: 11px;
}

.codex-answer-knowledge-candidate > div {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  padding: 11px;
}

.codex-answer-knowledge-candidate label {
  display: grid;
  gap: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.codex-answer-knowledge-candidate p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

html[data-theme="dark"] .codex-answer-open-button {
  border-color: #60a5fa;
  background: #1e3a5f;
  color: #dbeafe;
}

html[data-theme="dark"] .codex-answer-connection-notice {
  border-color: #315a86;
  border-left-color: #60a5fa;
  background: #172b45;
}

html[data-theme="dark"] .codex-answer-connection-notice strong {
  color: #bfdbfe;
}

html[data-theme="dark"] .codex-answer-connection-notice span {
  color: #d7e3f1;
}

html[data-theme="dark"] .codex-answer-connection-notice code {
  color: #93c5fd;
}

html[data-theme="dark"] .codex-answer-options label:has(input:checked) {
  border-color: #60a5fa;
  background: #1e3a5f;
  box-shadow: inset 3px 0 0 #60a5fa;
}

html[data-theme="dark"] .codex-answer-constraint-note.warning,
html[data-theme="dark"] .codex-answer-warnings {
  background: #3b2b13;
}

html[data-theme="dark"] .codex-answer-constraint-note.warning,
html[data-theme="dark"] .codex-answer-warnings strong,
html[data-theme="dark"] .codex-answer-warnings li {
  color: #fde68a;
}

html[data-theme="dark"] .codex-answer-progress li.is-active {
  color: #93c5fd;
}

html[data-theme="dark"] .codex-answer-action-message[data-tone="success"] { color: #6ee7b7; }
html[data-theme="dark"] .codex-answer-action-message[data-tone="error"] { color: #fca5a5; }

@media (max-width: 700px) {
  .codex-answer-layer {
    grid-template-columns: 1fr;
  }

  .codex-answer-backdrop {
    display: none;
  }

  .codex-answer-drawer {
    width: 100vw;
    border-left: 0;
  }

  .codex-answer-head,
  .codex-answer-foot,
  .codex-answer-scroll {
    padding-inline: 12px;
  }

  .codex-answer-scope-grid,
  .codex-answer-options,
  .codex-answer-result-grid {
    grid-template-columns: 1fr;
  }

  .codex-answer-actions button {
    flex-basis: calc(50% - 4px);
  }
}

@media (max-width: 460px) {
  .codex-answer-section,
  .codex-answer-progress,
  .codex-answer-result {
    padding: 12px;
  }

  .codex-answer-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .codex-answer-run-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .codex-answer-run-meta > div,
  .codex-answer-run-meta > div:nth-child(3n),
  .codex-answer-run-meta > div:nth-last-child(-n + 3) {
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }

  .codex-answer-run-meta > div:nth-child(2n) {
    border-right: 0;
  }

  .codex-answer-run-meta > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .codex-answer-open-button {
    width: 100%;
  }
}

/* Ticket-local shipping preparation. Customer data stays inside the app until a helper claims a confirmed job. */
.shipping-open-button {
  border-color: #0f766e;
  background: #f0fdfa;
  color: #0f766e;
  font-weight: 800;
}

.shipping-open-button:hover {
  background: #ccfbf1;
}

body.shipping-is-open {
  overflow: hidden;
}

.shipping-layer[hidden] {
  display: none !important;
}

.shipping-layer {
  position: fixed;
  z-index: 3010;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(640px, 100vw);
}

.shipping-backdrop {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, .48);
  cursor: default;
}

.shipping-drawer {
  min-width: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: -16px 0 38px rgba(15, 23, 42, .2);
}

.shipping-head,
.shipping-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
}

.shipping-foot {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface-soft);
}

.shipping-foot span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.shipping-head h2 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.35;
}

.shipping-eyebrow {
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
}

.shipping-close {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

.shipping-scroll {
  min-width: 0;
  overflow: auto;
  padding: 16px 18px 28px;
}

.shipping-section,
.shipping-progress,
.shipping-result {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.shipping-progress,
.shipping-result,
.shipping-history,
.shipping-action-message {
  margin-top: 14px;
}

.shipping-section-head,
.shipping-section-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shipping-section-head {
  justify-content: space-between;
}

.shipping-section-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.shipping-step-number {
  width: 28px;
  height: 28px;
  display: inline-grid;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.shipping-description {
  margin: 12px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.shipping-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.shipping-scope-grid > div {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  padding: 10px;
}

.shipping-scope-grid dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.shipping-scope-grid dd {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 4px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.shipping-progress ol {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.shipping-progress.is-complete ol {
  display: none;
}

.shipping-progress li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.shipping-progress li > span {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
}

.shipping-progress li.is-active {
  color: #0f766e;
}

.shipping-progress li.is-active > span {
  border-color: #14b8a6;
  border-top-color: transparent;
  animation: shipping-spin .7s linear infinite;
}

.shipping-progress li.is-done {
  color: #047857;
}

.shipping-progress li.is-done > span {
  border-color: #10b981;
  background: #10b981;
}

@keyframes shipping-spin {
  to { transform: rotate(360deg); }
}

.shipping-candidate-summary,
.shipping-warnings {
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  padding: 11px;
}

.shipping-candidate-summary strong,
.shipping-warnings strong {
  color: var(--text);
  font-size: 12px;
}

.shipping-candidate-summary ul,
.shipping-warnings ul {
  display: grid;
  gap: 5px;
  margin: 7px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.shipping-warnings {
  margin-top: 10px;
  border-color: #f59e0b;
  background: #fffbeb;
}

.shipping-warnings strong,
.shipping-warnings li {
  color: #92400e;
}

.shipping-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.shipping-decision-grid,
.shipping-address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 12px;
}

.shipping-decision-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shipping-decision-grid legend,
.shipping-address-grid legend {
  padding: 0 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.shipping-decision-grid label,
.shipping-address-grid label,
.shipping-reissue label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.shipping-decision-grid select,
.shipping-address-grid input,
.shipping-address-grid select,
.shipping-address-grid textarea,
.shipping-reissue input,
.shipping-reissue select {
  width: 100%;
  min-width: 0;
}

.shipping-wide {
  grid-column: 1 / -1;
}

.shipping-mapping-note {
  margin: -4px 0 0;
  border-left: 3px solid #0f766e;
  background: #f0fdfa;
  color: #115e59;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.shipping-confirm-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  padding: 11px;
  cursor: pointer;
}

.shipping-confirm-check:has(input:checked) {
  border-color: #0f766e;
  background: #f0fdfa;
  box-shadow: inset 3px 0 0 #0f766e;
}

.shipping-confirm-check input {
  margin-top: 3px;
}

.shipping-confirm-check span {
  display: grid;
  gap: 3px;
}

.shipping-confirm-check strong {
  color: var(--text);
  font-size: 13px;
}

.shipping-confirm-check small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.shipping-create-button {
  width: 100%;
}

.shipping-active-job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid #34d399;
  border-radius: 7px;
  background: #ecfdf5;
  padding: 12px;
}

.shipping-active-job[hidden] {
  display: none !important;
}

.shipping-active-job > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shipping-active-job strong,
.shipping-active-job small {
  overflow-wrap: anywhere;
}

.shipping-active-job small {
  color: #065f46;
}

.shipping-reissue {
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
}

.shipping-reissue summary {
  cursor: pointer;
  padding: 11px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.shipping-reissue > div {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--line-soft);
  padding: 11px;
}

.shipping-reissue p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.shipping-job-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  border-top: 1px solid var(--line-soft);
  padding: 10px 0;
}

.shipping-job-item:first-child {
  border-top: 0;
}

.shipping-job-item strong,
.shipping-job-item span,
.shipping-job-item small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shipping-job-item span,
.shipping-job-item small {
  color: var(--muted);
  font-size: 11px;
}

.shipping-job-item small {
  grid-column: 1 / -1;
}

.shipping-action-message {
  min-height: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.shipping-action-message:empty {
  display: none;
}

.shipping-action-message[data-tone="success"] { color: #047857; }
.shipping-action-message[data-tone="error"] { color: #b91c1c; }

html[data-theme="dark"] .shipping-open-button {
  border-color: #5eead4;
  background: #134e4a;
  color: #ccfbf1;
}

html[data-theme="dark"] .shipping-mapping-note,
html[data-theme="dark"] .shipping-confirm-check:has(input:checked) {
  background: #133f3b;
  color: #ccfbf1;
}

html[data-theme="dark"] .shipping-active-job {
  border-color: #34d399;
  background: #123c30;
}

html[data-theme="dark"] .shipping-active-job small {
  color: #a7f3d0;
}

html[data-theme="dark"] .shipping-warnings {
  background: #3b2b13;
}

html[data-theme="dark"] .shipping-warnings strong,
html[data-theme="dark"] .shipping-warnings li {
  color: #fde68a;
}

html[data-theme="dark"] .shipping-progress li.is-active {
  color: #5eead4;
}

html[data-theme="dark"] .shipping-action-message[data-tone="success"] { color: #6ee7b7; }
html[data-theme="dark"] .shipping-action-message[data-tone="error"] { color: #fca5a5; }

@media (max-width: 760px) {
  .shipping-layer {
    grid-template-columns: 1fr;
  }

  .shipping-backdrop {
    display: none;
  }

  .shipping-drawer {
    width: 100vw;
    border-left: 0;
  }

  .shipping-head,
  .shipping-foot,
  .shipping-scroll {
    padding-inline: 12px;
  }

  .shipping-decision-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .shipping-scope-grid,
  .shipping-address-grid {
    grid-template-columns: 1fr;
  }

  .shipping-wide {
    grid-column: auto;
  }

  .shipping-active-job {
    align-items: stretch;
    flex-direction: column;
  }

  .shipping-open-button {
    width: 100%;
  }
}

/* Shared interaction language: make the active target obvious without adding visual noise. */
:root {
  --interaction-hover: #edf4fa;
  --interaction-selected: #e3eff8;
  --interaction-selected-strong: #d4e7f5;
  --interaction-border: #7aa8ca;
  --interaction-focus: rgba(47, 111, 159, 0.24);
  --interaction-shadow: 0 4px 12px rgba(31, 79, 113, 0.10);
  --row-hover: #f3f7fa;
  --row-selected: #e8f2f9;
}

html[data-theme="dark"] {
  --interaction-hover: #2b3a4d;
  --interaction-selected: #31465e;
  --interaction-selected-strong: #36516d;
  --interaction-border: #70a9d2;
  --interaction-focus: rgba(96, 165, 250, 0.32);
  --interaction-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
  --row-hover: #273549;
  --row-selected: #2d435b;
}

.app-shell :where(
  button,
  a,
  summary,
  input,
  select,
  textarea,
  [contenteditable="true"]
) {
  transition: border-color .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease, opacity .14s ease;
}

.app-shell :where(
  button,
  a,
  summary,
  input,
  select,
  textarea,
  [contenteditable="true"]
):focus-visible {
  outline: 3px solid var(--interaction-focus);
  outline-offset: 2px;
}

.app-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover {
  border-color: var(--interaction-border);
}

.app-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--interaction-focus);
}

.app-shell :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--primary);
}

.app-shell :where(
  button:not(:disabled):not(.primary):not(.production-action-button):not(.danger-button),
  .subtle-button,
  .icon-button
):hover {
  border-color: var(--interaction-border);
  background-color: var(--interaction-hover);
  color: var(--text);
}

.app-shell :where(button:not(:disabled), .subtle-button, .icon-button):active {
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, .16);
}

.app-shell :where(.primary, .production-action-button):not(:disabled):hover {
  filter: brightness(.94);
  box-shadow: var(--interaction-shadow);
}

.app-shell :where(
  .settings-tree-card,
  .product-page-workbench a,
  .settings-detail-links a,
  .audit-shortcuts a,
  .history-item,
  .sidebar-product-link,
  .sidebar-quick-link
):hover {
  border-color: var(--interaction-border);
  background-color: var(--interaction-hover);
  box-shadow: var(--interaction-shadow);
}

.app-shell :where(
  .settings-tree-group,
  .settings-folder,
  .product-page-section,
  .product-detail-section,
  .setting-editor,
  .routing-rule-card,
  .bulk-details,
  .personal-flag-settings-mini,
  .detail-support-drawer
)[open] > summary {
  background-color: var(--interaction-selected);
  color: var(--text);
  box-shadow: inset 4px 0 0 var(--primary);
}

.app-shell :where(
  .settings-tree-group,
  .settings-folder,
  .product-page-section,
  .product-detail-section,
  .setting-editor,
  .routing-rule-card,
  .bulk-details,
  .personal-flag-settings-mini,
  .detail-support-drawer
) > summary:hover {
  background-color: var(--interaction-hover);
}

.app-shell :where(
  .settings-tree-group,
  .settings-folder,
  .product-page-section,
  .product-detail-section,
  .setting-editor,
  .routing-rule-card
)[open] {
  border-color: var(--interaction-border);
  box-shadow: var(--interaction-shadow);
}

.ticket-table tbody tr {
  transition: background-color .12s ease, box-shadow .12s ease;
}

.ticket-table tbody tr:hover {
  background-color: var(--row-hover);
}

.ticket-table tbody tr:has(input[type="checkbox"]:checked) {
  background-color: var(--row-selected);
  box-shadow: inset 4px 0 0 var(--primary);
}

.ticket-table tbody tr:has(input[type="checkbox"]:checked):hover {
  background-color: var(--interaction-selected-strong);
}

.dashboard-status-tabs a:hover,
.dashboard-modal-tabs button:hover,
.side-link:hover {
  background-color: var(--interaction-hover);
}

.dashboard-status-tabs a.is-active,
.dashboard-modal-tabs button.is-active,
.side-link.is-active,
.sidebar-product-link.is-active,
.sidebar-quick-link.is-active,
[aria-current="page"] {
  background-color: var(--interaction-selected);
  color: var(--text);
}

.dashboard-status-tabs a.is-active,
.dashboard-modal-tabs button.is-active {
  border-bottom-color: var(--primary);
}

.checkbox-grid .check,
.dashboard-search-checks .check,
.dashboard-display-settings .check,
.weekday-fieldset .check,
.routing-condition-block .check {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 8px;
}

.checkbox-grid .check:hover,
.dashboard-search-checks .check:hover,
.dashboard-display-settings .check:hover,
.weekday-fieldset .check:hover,
.routing-condition-block .check:hover {
  border-color: var(--line);
  background-color: var(--interaction-hover);
}

.checkbox-grid .check:has(input:checked),
.dashboard-search-checks .check:has(input:checked),
.dashboard-display-settings .check:has(input:checked),
.weekday-fieldset .check:has(input:checked),
.routing-condition-block .check:has(input:checked) {
  border-color: var(--interaction-border);
  background-color: var(--interaction-selected);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--primary);
}

.personal-flag-settings-mini[open] > summary,
.ticket-personal-flags-panel:has(input[type="checkbox"]:checked) .panel-head span {
  border-color: var(--interaction-border);
  background-color: var(--interaction-selected);
  color: var(--text);
}

html[data-theme="dark"] .ticket-table tbody tr:hover {
  background-color: var(--row-hover);
}

html[data-theme="dark"] .ticket-table tbody tr:has(input[type="checkbox"]:checked) {
  background-color: var(--row-selected);
}

/* Keep ownership cues in dark mode without turning the whole worklist brown. */
html[data-theme="dark"] .ticket-table tbody tr.row-mine {
  background-color: #20312d;
}

html[data-theme="dark"] .ticket-table tbody tr.row-unassigned {
  background-color: #252b34;
}

html[data-theme="dark"] .app-shell :where(
  .settings-tree-group,
  .settings-folder,
  .product-page-section,
  .product-detail-section,
  .setting-editor,
  .routing-rule-card,
  .bulk-details,
  .personal-flag-settings-mini,
  .detail-support-drawer
)[open] > summary {
  background-color: var(--interaction-selected);
  color: #f8fafc;
}

html[data-theme="dark"] .app-shell :where(
  .settings-tree-group,
  .settings-folder,
  .product-page-section,
  .product-detail-section,
  .setting-editor,
  .routing-rule-card,
  .bulk-details,
  .personal-flag-settings-mini,
  .detail-support-drawer
) > summary:hover {
  background-color: var(--interaction-hover);
  color: #f8fafc;
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: minmax(210px, auto) minmax(240px, 1fr);
  }

  .topbar .topnav {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .dashboard-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .detail-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-toolbar > button,
  .detail-toolbar > a,
  .detail-toolbar > form {
    min-width: 0;
  }

  .form-grid.two,
  .form-grid.columns,
  .dashboard-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .topbar .topnav {
    grid-column: auto;
    justify-content: flex-start;
  }

  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    position: static;
    max-height: none;
  }

  .dashboard-sidebar .sidebar-folder-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-sidebar .personal-flag-settings-mini {
    grid-column: 1 / -1;
  }

  .form-grid.two,
  .form-grid.columns,
  .dashboard-filter-grid,
  .detail-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dashboard-sidebar .sidebar-folder-list {
    grid-template-columns: 1fr;
  }

  .dashboard-status-tabs,
  .dashboard-action-row {
    grid-template-columns: 1fr;
  }

  .dashboard-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
}

/* MailDealer-like reply-template management */
.template-management-page,
.template-editor-page {
  width: min(1320px, 100%);
  margin: 0 auto;
}

.page-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.page-title-row h1 {
  margin: 0 0 6px;
}

.page-title-actions,
.settings-entry-actions,
.template-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.button-link.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  padding: 7px 14px;
  text-decoration: none;
}

.button-link.primary:hover {
  filter: brightness(.94);
}

.template-list-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.template-list-summary span {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 10px 12px;
}

.template-list-summary strong {
  margin-right: 5px;
  color: var(--text);
  font-size: 18px;
}

.template-list-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(150px, .75fr)) auto auto;
  align-items: end;
  gap: 8px;
  border-block: 1px solid var(--line-soft);
  padding: 12px 0;
}

.template-list-filter label,
.template-editor-form > label,
.template-editor-basics label {
  display: grid;
  gap: 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.template-list {
  display: grid;
  gap: 8px;
}

.template-group-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.template-list-group {
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  overflow: hidden;
}

.template-list-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--text);
  padding: 11px 13px;
}

.template-list-group > summary span {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
}

.template-list-group[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}

.template-list-group > .template-list {
  padding: 8px;
}

.template-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface);
  padding: 12px 14px;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.template-list-item:hover {
  border-color: var(--interaction-border, var(--primary));
  background: var(--surface-hover);
  box-shadow: inset 3px 0 0 var(--primary);
}

.template-list-item.is-inactive {
  opacity: .68;
}

.template-list-heading,
.template-list-meta,
.template-list-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.template-list-heading > strong {
  font-size: 15px;
}

.template-list-subject {
  margin-top: 6px;
  color: var(--text);
  font-size: 13px;
}

.template-list-main > p {
  margin: 6px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.template-list-meta {
  color: var(--muted);
  font-size: 12px;
}

.template-maintenance-tools {
  margin-top: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  overflow: hidden;
}

.template-maintenance-tools > summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
  padding: 11px 13px;
}

.template-maintenance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid var(--line-soft);
  padding: 12px;
}

.template-maintenance-grid > section {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface);
  padding: 12px;
}

.template-maintenance-grid h2 {
  margin: 0 0 10px;
  font-size: 15px;
}

.template-group-compact-list {
  display: grid;
  gap: 7px;
  margin-bottom: 9px;
}

.template-editor-panel {
  max-width: 1020px;
}

.template-editor-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.template-attachment-editor {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  padding: 12px;
}

.template-attachment-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.template-attachment-editor-head h2 {
  margin: 0 0 4px;
  font-size: 15px;
}

.template-attachment-editor-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.template-attachment-editor-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface);
  padding: 9px 10px;
}

.template-attachment-editor-list li > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.template-attachment-editor-list strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 13px;
}

.template-attachment-editor-list small,
.template-attachment-upload small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.template-attachment-upload {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.danger-check {
  color: var(--danger, #b91c1c);
}

.template-editor-basics {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(160px, .8fr) minmax(170px, .8fr);
  gap: 10px;
}

.template-product-picker {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  padding: 12px;
}

.template-product-picker legend {
  color: var(--text);
  font-weight: 900;
  padding: 0 5px;
}

.template-product-picker legend span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.template-product-picker details {
  border-top: 1px solid var(--line-soft);
}

.template-product-picker details:first-of-type {
  border-top: 0;
}

.template-product-picker summary {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
  padding: 10px 4px;
}

.template-product-picker summary span {
  color: var(--muted);
  font-size: 12px;
}

.template-product-options,
.template-user-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 0 4px 10px;
}

.template-product-options .check,
.template-user-options .check {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface);
  padding: 8px;
}

.template-product-options .check:has(input:checked),
.template-user-options .check:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}

.template-product-options .check.is-inactive {
  opacity: .62;
}

.template-user-scope {
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface-soft);
  padding: 10px 12px;
}

.template-user-scope > summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
}

.template-user-scope .template-user-options {
  margin-top: 10px;
}

.template-scope-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-soft);
  padding: 8px;
}

.template-scope-summary details {
  min-width: 0;
}

.template-scope-summary summary {
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.template-scope-summary details .check {
  margin-top: 7px;
}

.quick-template-save-grid select[multiple] {
  min-height: 92px;
}

.settings-entry-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-entry-card h1,
.settings-entry-card p {
  margin-block: 0 5px;
}

html[data-theme="dark"] .template-list-item,
html[data-theme="dark"] .template-maintenance-grid > section,
html[data-theme="dark"] .template-product-options .check,
html[data-theme="dark"] .template-user-options .check,
html[data-theme="dark"] .template-attachment-editor-list li {
  background: var(--surface);
}

html[data-theme="dark"] .template-list-item:hover,
html[data-theme="dark"] .template-product-options .check:has(input:checked),
html[data-theme="dark"] .template-user-options .check:has(input:checked) {
  background: var(--interaction-selected, #243851);
}

@media (max-width: 1080px) {
  .template-list-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .template-editor-basics {
    grid-template-columns: 1fr 1fr;
  }

  .template-editor-basics label:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .page-title-row,
  .settings-entry-card,
  .template-list-item {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .template-list-summary,
  .template-list-filter,
  .template-maintenance-grid,
  .template-editor-basics,
  .template-product-options,
  .template-user-options {
    grid-template-columns: 1fr;
  }

  .template-list-actions {
    justify-content: flex-start;
  }
}

/* Business-assist entry points and progressive disclosure. */
.assistant-entry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--info-text);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.assistant-entry-button::before {
  content: "AI";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 24px;
  height: 22px;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.assistant-manual-details,
.codex-secondary-operations,
.integration-raw-details {
  min-width: 0;
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  overflow: hidden;
}

.assistant-manual-details > summary,
.codex-secondary-operations > summary,
.integration-raw-details > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 12px;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  overflow-wrap: anywhere;
}

.assistant-manual-details > summary::-webkit-details-marker,
.codex-secondary-operations > summary::-webkit-details-marker,
.integration-raw-details > summary::-webkit-details-marker {
  display: none;
}

.assistant-manual-details > summary::before,
.codex-secondary-operations > summary::before,
.integration-raw-details > summary::before {
  content: ">";
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 900;
  transform: rotate(0deg);
}

.assistant-manual-details[open] > summary::before,
.codex-secondary-operations[open] > summary::before,
.integration-raw-details[open] > summary::before {
  transform: rotate(90deg);
}

.assistant-manual-details[open] > summary,
.codex-secondary-operations[open] > summary,
.integration-raw-details[open] > summary {
  border-bottom: 1px solid var(--line-soft);
  background: var(--interaction-selected);
}

.assistant-manual-details > :not(summary),
.codex-secondary-operations > :not(summary),
.integration-raw-details > :not(summary) {
  margin-inline: 12px;
}

.assistant-manual-details > :last-child,
.codex-secondary-operations > :last-child,
.integration-raw-details > :last-child {
  margin-bottom: 12px;
}

.codex-secondary-operations p {
  margin-block: 12px 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.codex-adapter-warnings {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  border-color: var(--warning-text);
  background: var(--warning-bg);
  color: var(--warning-text);
}

.codex-adapter-warnings p {
  margin: 0;
  overflow-wrap: anywhere;
}

.codex-provider-state.is-local-safe {
  border-left: 4px solid var(--success-text);
}

.integration-log-summary {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-block: 10px 14px;
}

.integration-log-summary > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.integration-raw-details .sync-log-list,
.integration-raw-details .table-wrap,
.integration-raw-details pre {
  max-width: calc(100% - 24px);
  overflow: auto;
}

/* Reports keep the headline metrics visible and disclose the dense sections by task. */
.report-category-list {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 16px;
}

.report-category-details {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.report-category-details > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 62px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.report-category-details > summary::-webkit-details-marker {
  display: none;
}

.report-category-details > summary:hover {
  background: var(--interaction-hover);
}

.report-category-details[open] > summary {
  border-bottom: 1px solid var(--line);
  background: var(--interaction-selected);
  box-shadow: inset 4px 0 0 var(--primary);
}

.report-category-number {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.report-category-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.report-category-title strong,
.report-category-title small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.report-category-title strong {
  color: var(--text);
  font-size: 15px;
}

.report-category-title small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.report-category-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.report-category-details[open] .report-category-state::before {
  content: "閉じる";
}

.report-category-details[open] .report-category-state {
  font-size: 0;
}

.report-category-details[open] .report-category-state::before {
  font-size: 11px;
}

.report-category-body {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
}

.report-category-body > .report-section:first-child,
.report-category-body > .report-columns:first-child {
  margin-top: 0;
}

.report-category-body > .report-section:first-child {
  border-top: 0;
  padding-top: 0;
}

html[data-theme="dark"] .assistant-entry-button {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: #dbeafe;
}

html[data-theme="dark"] .assistant-manual-details,
html[data-theme="dark"] .codex-secondary-operations,
html[data-theme="dark"] .integration-raw-details,
html[data-theme="dark"] .report-category-details {
  background: var(--surface);
}

html[data-theme="dark"] .report-category-details[open] > summary,
html[data-theme="dark"] .assistant-manual-details[open] > summary,
html[data-theme="dark"] .codex-secondary-operations[open] > summary,
html[data-theme="dark"] .integration-raw-details[open] > summary {
  background: var(--interaction-selected);
  color: var(--text);
}

@media (max-width: 900px) {
  .report-panel .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-panel .response-summary,
  .report-category-body .report-columns {
    grid-template-columns: 1fr;
  }

  .report-category-body .panel-head,
  .report-category-body .compact-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-category-body .report-export-actions {
    justify-content: flex-start;
    min-width: 0;
  }

  .report-category-body .report-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .assistant-entry-button {
    width: 100%;
  }

  .report-panel .panel-head > .panel-actions {
    width: 100%;
  }

  .report-panel .metric-grid,
  .report-panel .response-summary,
  .report-category-body .report-filter-bar,
  .integration-log-summary {
    grid-template-columns: 1fr;
  }

  .report-category-details > summary {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  .report-category-state {
    grid-column: 2;
    justify-self: start;
    min-height: 24px;
  }

  .report-category-body {
    padding: 10px;
  }

  .assistant-manual-details > :not(summary),
  .codex-secondary-operations > :not(summary),
  .integration-raw-details > :not(summary) {
    margin-inline: 9px;
  }
}