html[data-ds-theme-mode="system"][data-ds-theme="light"] {
  --ds-color-bg: #edf2f7;
  --ds-color-surface: #f8fafc;
  --ds-color-surface-muted: #e7edf4;
  --ds-color-border: #b8c7d6;
  --ds-color-text: #1f2937;
  --ds-color-text-sub: #4b5563;
  --ds-color-primary-soft: #dbeafe;
  --ds-color-primary-soft-hover: #cfe0fb;
  --ds-color-info-bg: #dfeeff;
  --ds-color-success-bg: #d9f4e2;
  --ds-color-warning-bg: #ffedb6;
  --ds-color-error-bg: #ffe2e2;
  --ds-color-neutral-bg: #e7edf4;
  --ds-cta-neutral-bg: #e7edf4;
  --ds-cta-neutral-bg-hover: #d8e2ed;
  --ds-cta-neutral-border: #b8c7d6;
}

html[data-ds-theme="dark"] {
  --ds-color-bg: #111827;
  --ds-color-surface: #1f2937;
  --ds-color-surface-muted: #273449;
  --ds-color-surface-raised: #243044;
  --ds-color-border: #6b7a90;
  --ds-color-text: #f9fafb;
  --ds-color-text-sub: #cbd5e1;
  --ds-color-input: #0f172a;
  --ds-color-input-border: #73849b;
  --ds-color-input-text: #f9fafb;
  --ds-color-input-placeholder: #a8b3c3;
  --ds-color-disabled-bg: #263244;
  --ds-color-disabled-text: #a8b3c3;
  --ds-color-primary: #93c5fd;
  --ds-color-primary-hover: #bfdbfe;
  --ds-color-primary-soft: #1e3a5f;
  --ds-color-primary-soft-hover: #25476f;
  --ds-color-info: #93c5fd;
  --ds-color-info-bg: #1e3a5f;
  --ds-color-success: #86efac;
  --ds-color-success-bg: #173d29;
  --ds-color-warning: #fbbf24;
  --ds-color-warning-bg: #3f2f12;
  --ds-color-error: #fca5a5;
  --ds-color-error-bg: #4c1d1d;
  --ds-color-danger: var(--ds-color-error);
  --ds-color-danger-bg: var(--ds-color-error-bg);
  --ds-color-neutral-bg: #2f3a4b;
  --ds-color-overlay: rgba(0, 0, 0, 0.66);
  --ds-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.36);
  --ds-shadow-float: 0 20px 46px rgba(0, 0, 0, 0.5);
  --ds-focus-ring: 0 0 0 3px rgba(147, 197, 253, 0.32);
  --ds-cta-primary-solid-bg: #2563eb;
  --ds-cta-primary-solid-bg-hover: #3b82f6;
  --ds-cta-primary-solid-fg: #ffffff;
  --ds-cta-primary-solid-border: rgba(147, 197, 253, 0.36);
  --ds-cta-primary-solid-bg-disabled: #334155;
  --ds-cta-primary-soft-bg: var(--ds-color-primary-soft);
  --ds-cta-primary-soft-bg-hover: var(--ds-color-primary-soft-hover);
  --ds-cta-primary-soft-fg: #dbeafe;
  --ds-cta-primary-soft-border: rgba(147, 197, 253, 0.42);
  --ds-cta-primary-soft-bg-disabled: #263244;
  --ds-cta-primary-soft-fg-disabled: #94a3b8;
  --ds-cta-neutral-bg: #2f3a4b;
  --ds-cta-neutral-bg-hover: #3f4c61;
  --ds-cta-neutral-fg: #f9fafb;
  --ds-cta-neutral-border: #64748b;
  --ds-cta-neutral-bg-disabled: #263244;
  --ds-cta-neutral-fg-disabled: #94a3b8;
  --ds-cta-neutral-utility-bg: #2f3a4b;
  --ds-cta-neutral-utility-bg-hover: #3f4c61;
  --ds-cta-neutral-utility-fg: #f9fafb;
  --ds-cta-neutral-utility-border: #64748b;
  --ds-cta-neutral-utility-shadow: 0 1px 3px rgba(0, 0, 0, 0.36);
}

html[data-ds-theme="high-contrast"] {
  --ds-color-bg: #000000;
  --ds-color-surface: #000000;
  --ds-color-surface-muted: #111111;
  --ds-color-surface-raised: #000000;
  --ds-color-border: #ffffff;
  --ds-color-text: #ffffff;
  --ds-color-text-sub: #ffffff;
  --ds-color-input: #000000;
  --ds-color-input-border: #ffffff;
  --ds-color-input-text: #ffffff;
  --ds-color-input-placeholder: #ffffff;
  --ds-color-disabled-bg: #111111;
  --ds-color-disabled-text: #ffffff;
  --ds-color-neutral-bg: #111111;
  --ds-color-overlay: rgba(0, 0, 0, 0.82);
  --ds-focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px var(--ds-color-primary);
  --ds-shadow-soft: none;
  --ds-shadow-float: 0 0 0 2px #ffffff;
  --ds-cta-neutral-bg: #000000;
  --ds-cta-neutral-bg-hover: #1a1a1a;
  --ds-cta-neutral-fg: #ffffff;
  --ds-cta-neutral-border: #ffffff;
}

html[data-ds-accent="blue"] {
  --ds-color-primary: #0f62fe;
  --ds-color-primary-hover: #0043ce;
  --ds-color-primary-soft: #edf5ff;
  --ds-color-primary-soft-hover: #d0e2ff;
  --ds-focus-ring: 0 0 0 3px rgba(15, 98, 254, 0.26);
}

html[data-ds-accent="green"] {
  --ds-color-primary: #238636;
  --ds-color-primary-hover: #196127;
  --ds-color-primary-soft: #e6f6ea;
  --ds-color-primary-soft-hover: #d3efd9;
  --ds-focus-ring: 0 0 0 3px rgba(35, 134, 54, 0.25);
}

html[data-ds-accent="yellow-orange"] {
  --ds-color-primary: #b85c00;
  --ds-color-primary-hover: #8f4600;
  --ds-color-primary-soft: #fff1dc;
  --ds-color-primary-soft-hover: #ffe2b8;
  --ds-focus-ring: 0 0 0 3px rgba(184, 92, 0, 0.28);
}

html[data-ds-accent="red"] {
  --ds-color-primary: #b42318;
  --ds-color-primary-hover: #8f1d15;
  --ds-color-primary-soft: #fff1f0;
  --ds-color-primary-soft-hover: #ffe0dd;
  --ds-focus-ring: 0 0 0 3px rgba(180, 35, 24, 0.26);
}

html[data-ds-theme="dark"][data-ds-accent="default"],
html[data-ds-theme="dark"][data-ds-accent="blue"] {
  --ds-color-primary: #93c5fd;
  --ds-color-primary-hover: #bfdbfe;
  --ds-color-primary-soft: #1e3a5f;
  --ds-color-primary-soft-hover: #25476f;
  --ds-focus-ring: 0 0 0 3px rgba(147, 197, 253, 0.32);
}

html[data-ds-theme="dark"][data-ds-accent="green"] {
  --ds-color-primary: #86efac;
  --ds-color-primary-hover: #bbf7d0;
  --ds-color-primary-soft: #173d29;
  --ds-color-primary-soft-hover: #1f5136;
  --ds-focus-ring: 0 0 0 3px rgba(134, 239, 172, 0.28);
}

html[data-ds-theme="dark"][data-ds-accent="yellow-orange"] {
  --ds-color-primary: #fbbf24;
  --ds-color-primary-hover: #fcd34d;
  --ds-color-primary-soft: #3f2f12;
  --ds-color-primary-soft-hover: #543f18;
  --ds-focus-ring: 0 0 0 3px rgba(251, 191, 36, 0.3);
}

html[data-ds-theme="dark"][data-ds-accent="red"] {
  --ds-color-primary: #fca5a5;
  --ds-color-primary-hover: #fecaca;
  --ds-color-primary-soft: #4c1d1d;
  --ds-color-primary-soft-hover: #641f1f;
  --ds-focus-ring: 0 0 0 3px rgba(252, 165, 165, 0.3);
}

html[data-ds-font-size="large"] {
  --ds-font-xs: 13px;
  --ds-font-sm: 14px;
  --ds-font-md: 16px;
  --ds-font-lg: 18px;
  --ds-font-xl: 20px;
}

html[data-ds-density="compact"] {
  --ds-space-2: 6px;
  --ds-space-3: 10px;
  --ds-space-4: 12px;
  --ds-space-5: 16px;
  --workqueue-titlebar-height: 48px;
}

html[data-ds-motion="reduced"] *,
html[data-ds-motion="reduced"] *::before,
html[data-ds-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 1ms !important;
}

html[data-ds-theme="dark"] .workqueue-folder[data-folder-key="inbox"],
html[data-ds-theme="dark"] .workqueue-folder[data-folder-key="sent"],
html[data-ds-theme="dark"] .workqueue-folder[data-folder-key="processing"],
html[data-ds-theme="dark"] .workqueue-folder[data-folder-key="done"] {
  --workqueue-folder-pill-bg: var(--ds-color-primary-soft);
  --workqueue-folder-pill-text: var(--ds-color-text);
}

html[data-ds-theme="dark"] .workqueue-folder-row[data-workqueue-parent="drafts"],
html[data-ds-theme="dark"] .workqueue-folder-row[data-workqueue-parent="unprocessed"] {
  --workqueue-folder-pill-bg: var(--ds-color-primary-soft);
  --workqueue-folder-pill-text: var(--ds-color-text);
}

html[data-ds-theme="dark"] .workqueue-folder[data-folder-key="processing"] {
  --workqueue-folder-pill-bg: var(--ds-color-warning-bg);
}

html[data-ds-theme="dark"] .workqueue-folder[data-folder-key="done"] {
  --workqueue-folder-pill-bg: var(--ds-color-success-bg);
}

html[data-ds-theme="dark"] .workqueue-folder-row[data-workqueue-parent="processing"] {
  --workqueue-folder-pill-bg: var(--ds-color-warning-bg);
  --workqueue-folder-pill-text: var(--ds-color-text);
}

html[data-ds-theme="dark"] .workqueue-folder-row[data-workqueue-parent="done"] {
  --workqueue-folder-pill-bg: var(--ds-color-success-bg);
  --workqueue-folder-pill-text: var(--ds-color-text);
}

html[data-ds-theme="dark"] .workqueue-folder-row.is-open,
html[data-ds-theme="dark"] .workqueue-folder-row[role="button"]:hover,
html[data-ds-theme="dark"] .workqueue-folder-row[role="button"]:focus-visible,
html[data-ds-theme="dark"] .workqueue-folder-row.is-active,
html[data-ds-theme="dark"] .workqueue-folder-child:hover,
html[data-ds-theme="dark"] .workqueue-folder-child:focus-visible,
html[data-ds-theme="dark"] .workqueue-folder-child.is-active,
html[data-ds-theme="dark"] .workqueue-folder-child[aria-current="page"] {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .workqueue-children {
  border-left-color: var(--ds-color-border);
}

html[data-ds-theme="dark"] .workqueue-child {
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .workqueue-child:hover,
html[data-ds-theme="dark"] .workqueue-child:focus-visible {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .workqueue-child.is-selected,
html[data-ds-theme="dark"] .workqueue-child[aria-current="page"] {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-soft);
  color: var(--ds-color-text);
  box-shadow: inset 3px 0 0 var(--ds-color-primary);
}

html[data-ds-theme="dark"] .workqueue-child-title {
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .workqueue-child-meta,
html[data-ds-theme="dark"] .workqueue-child-progress,
html[data-ds-theme="dark"] .workqueue-child-meta-text {
  color: var(--ds-color-text-sub);
}

html[data-ds-theme="dark"] .main-tab:hover,
html[data-ds-theme="dark"] .doc-tab:hover,
html[data-ds-theme="dark"] .main-tab.is-active,
html[data-ds-theme="dark"] .doc-tab.is-active {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-surface);
  color: var(--ds-color-primary);
  box-shadow: inset 0 3px 0 var(--ds-color-primary);
}

html[data-ds-theme="dark"] .notification-toast {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .notification-toast-dismiss {
  color: var(--ds-color-text-sub);
}

html[data-ds-theme="dark"] .notification-toast-dismiss:hover {
  background: var(--ds-cta-neutral-bg-hover);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .notification-toast.severity-warning {
  border-color: var(--ds-color-warning);
  background: var(--ds-color-warning-bg);
}

html[data-ds-theme="dark"] .notification-toast.severity-error {
  border-color: var(--ds-color-error);
  background: var(--ds-color-error-bg);
}

html[data-ds-theme="dark"] .notification-toast.severity-success {
  border-color: var(--ds-color-success);
  background: var(--ds-color-success-bg);
}

html[data-ds-theme="dark"] .notification-toast.severity-info {
  background: linear-gradient(180deg, var(--ds-color-surface) 0%, var(--ds-color-primary-soft) 100%);
}

html[data-ds-theme="dark"] .request-retention-picker-trigger,
html[data-ds-theme="dark"] .request-retention-picker,
html[data-ds-theme="dark"] .request-retention-confirmed,
html[data-ds-theme="dark"] .request-retention-period-panel,
html[data-ds-theme="dark"] .request-retention-period-toggle,
html[data-ds-theme="dark"] .request-retention-search,
html[data-ds-theme="dark"] .request-retention-candidate,
html[data-ds-theme="dark"] .request-retention-period-button,
html[data-ds-theme="dark"] .request-retention-chip,
html[data-ds-theme="dark"] .tag-input,
html[data-ds-theme="dark"] .request-comment-input,
html[data-ds-theme="dark"] .approval-user-row,
html[data-ds-theme="dark"] .viewer-department-row,
html[data-ds-theme="dark"] .template-modal,
html[data-ds-theme="dark"] .template-popup-dialog,
html[data-ds-theme="dark"] .template-name-dialog {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .request-retention-candidate:hover,
html[data-ds-theme="dark"] .request-retention-candidate.is-active,
html[data-ds-theme="dark"] .request-retention-candidate[aria-selected="true"],
html[data-ds-theme="dark"] .request-retention-candidate.is-selected,
html[data-ds-theme="dark"] .request-retention-period-button:hover,
html[data-ds-theme="dark"] .request-retention-period-button.is-selected,
html[data-ds-theme="dark"] .request-retention-period-badge,
html[data-ds-theme="dark"] .request-retention-favorite-toggle,
html[data-ds-theme="dark"] .tag-chip,
html[data-ds-theme="dark"] .viewer-department-chip,
html[data-ds-theme="dark"] .department-chip {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-soft);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .new-request-apply-popup {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface-raised);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-confirmed-item,
html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-shortcuts,
html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-period-panel,
html[data-ds-theme="dark"] .new-request-apply-popup .new-request-apply-gate {
  border: 1px solid var(--ds-color-border);
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-confirmed-label,
html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-candidate-subtitle,
html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-shortcut-label,
html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-shortcut-empty,
html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-period-label,
html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-period-toggle::after {
  color: var(--ds-color-text-sub);
}

html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-confirmed-item strong,
html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-candidate-title,
html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-shortcut-title {
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .new-request-apply-popup .request-retention-summary-period--empty,
html[data-ds-theme="dark"] .request-retention-period-badge,
html[data-ds-theme="dark"] .request-retention-period-badge--permanent,
html[data-ds-theme="dark"] .request-retention-period-badge--80y,
html[data-ds-theme="dark"] .request-retention-period-badge--20y,
html[data-ds-theme="dark"] .request-retention-period-badge--10y,
html[data-ds-theme="dark"] .request-retention-period-badge--7y,
html[data-ds-theme="dark"] .request-retention-period-badge--5y,
html[data-ds-theme="dark"] .request-retention-period-badge--3y,
html[data-ds-theme="dark"] .request-retention-period-badge--1y {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .request-retention-picker {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface-raised);
  color: var(--ds-color-text);
  box-shadow: var(--ds-shadow-float);
}

html[data-ds-theme="dark"] .request-retention-picker-trigger,
html[data-ds-theme="dark"] .request-retention-period-toggle,
html[data-ds-theme="dark"] .request-retention-period-button,
html[data-ds-theme="dark"] .request-retention-candidate,
html[data-ds-theme="dark"] .request-retention-chip,
html[data-ds-theme="dark"] .request-retention-favorite-toggle {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .request-retention-picker-trigger:hover,
html[data-ds-theme="dark"] .request-retention-picker-trigger:focus-visible,
html[data-ds-theme="dark"] .request-retention-period-toggle:hover,
html[data-ds-theme="dark"] .request-retention-period-toggle:focus-visible,
html[data-ds-theme="dark"] .request-retention-period-button:hover,
html[data-ds-theme="dark"] .request-retention-period-button:focus-visible,
html[data-ds-theme="dark"] .request-retention-period-button.is-selected,
html[data-ds-theme="dark"] .request-retention-candidate:hover,
html[data-ds-theme="dark"] .request-retention-candidate:focus-visible,
html[data-ds-theme="dark"] .request-retention-candidate.is-active,
html[data-ds-theme="dark"] .request-retention-candidate.is-selected,
html[data-ds-theme="dark"] .request-retention-favorite-toggle:hover,
html[data-ds-theme="dark"] .request-retention-favorite-toggle:focus-visible,
html[data-ds-theme="dark"] .request-retention-favorite-toggle.is-active,
html[data-ds-theme="dark"] .request-retention-chip:hover,
html[data-ds-theme="dark"] .request-retention-chip:focus-visible {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-soft);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .request-retention-search {
  border-color: var(--ds-color-input-border);
  background: var(--ds-color-input);
  color: var(--ds-color-input-text);
}

html[data-ds-theme="dark"] .request-retention-empty {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-sub);
}

html[data-ds-theme="dark"] .new-request-apply-gate input[type="checkbox"] {
  accent-color: var(--ds-color-primary);
}

html[data-ds-theme="dark"] .new-request-apply-submit:disabled {
  border-color: var(--ds-color-border);
  background: var(--ds-color-disabled-bg);
  color: var(--ds-color-disabled-text);
  opacity: 1;
}

html[data-ds-theme="dark"] .approval-user-select,
html[data-ds-theme="dark"] .approval-user-select.viewer-user-select,
html[data-ds-theme="dark"] .viewer-user-select-empty {
  border-color: var(--ds-color-input-border);
  background: var(--ds-color-input);
  color: var(--ds-color-input-text);
}

html[data-ds-theme="dark"] .approval-user-select.is-unselected,
html[data-ds-theme="dark"] .approval-user-select.viewer-user-select.is-unselected,
html[data-ds-theme="dark"] .viewer-user-select-empty,
html[data-ds-theme="dark"] .viewer-selection-placeholder {
  color: var(--ds-color-text-sub);
}

html[data-ds-theme="dark"] .approval-user-select:hover,
html[data-ds-theme="dark"] .approval-user-select:focus-visible,
html[data-ds-theme="dark"] .approval-user-select.viewer-user-select:hover,
html[data-ds-theme="dark"] .approval-user-select.viewer-user-select:focus-visible {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-soft);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .user-search-popup,
html[data-ds-theme="dark"] .user-search-popup input,
html[data-ds-theme="dark"] .user-search-popup button,
html[data-ds-theme="dark"] .user-search-result-row {
  border-color: var(--ds-color-border) !important;
  background: var(--ds-color-surface) !important;
  color: var(--ds-color-text) !important;
}

html[data-ds-theme="dark"] .user-search-result-row:hover,
html[data-ds-theme="dark"] .user-search-result-row.is-selected,
html[data-ds-theme="dark"] .user-search-result-row[aria-selected="true"],
html[data-ds-theme="dark"] .user-search-popup button:hover {
  background: var(--ds-color-primary-soft) !important;
}

html[data-ds-theme="dark"] .user-search-info,
html[data-ds-theme="dark"] .user-search-empty {
  color: var(--ds-color-text-sub) !important;
}

html[data-ds-theme="dark"] .user-search-error {
  color: var(--ds-color-error) !important;
}

html[data-ds-theme="dark"] #tab-content.approval-mode .approval-tile,
html[data-ds-theme="dark"] #tab-content.approval-mode .approval-list,
html[data-ds-theme="dark"] #tab-content.approval-mode .approval-list-row,
html[data-ds-theme="dark"] #tab-content.approval-mode .approval-list-item,
html[data-ds-theme="dark"] #tab-content.approval-mode .approval-list-head,
html[data-ds-theme="dark"] .approval-share-popup,
html[data-ds-theme="dark"] .approval-decision-popup,
html[data-ds-theme="dark"] .approval-modal,
html[data-ds-theme="dark"] .approval-window {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] #tab-content.approval-mode .approval-list-item:hover {
  background: var(--ds-color-primary-soft);
}

html[data-ds-theme="dark"] #tab-content.approval-mode .approval-list-head,
html[data-ds-theme="dark"] .approval-empty,
html[data-ds-theme="dark"] .approval-loading,
html[data-ds-theme="dark"] .approval-error {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text-sub);
}

html[data-ds-theme="dark"] #tab-content.approval-mode .approval-result-chip.approved {
  background: var(--ds-color-success-bg);
  color: var(--ds-color-success);
}

html[data-ds-theme="dark"] #tab-content.approval-mode .approval-result-chip.rejected {
  background: var(--ds-color-error-bg);
  color: var(--ds-color-error);
}

html[data-ds-theme="dark"] .approval-done-search,
html[data-ds-theme="dark"] .approval-request-summary-block,
html[data-ds-theme="dark"] .approval-request-comment-text,
html[data-ds-theme="dark"] .approval-user-card,
html[data-ds-theme="dark"] .approval-primary-section,
html[data-ds-theme="dark"] .approval-bulk-download-panel,
html[data-ds-theme="dark"] .approval-progress-popup,
html[data-ds-theme="dark"] .approval-thumb-item,
html[data-ds-theme="dark"] .approval-thumb-frame,
html[data-ds-theme="dark"] .approval-modal .column.thumbnail-column,
html[data-ds-theme="dark"] .approval-doc-stage-message {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .approval-thumb-frame {
  background: var(--ds-color-surface-muted);
}

html[data-ds-theme="dark"] .approval-thumb-item:hover,
html[data-ds-theme="dark"] .approval-thumb-item.selected,
html[data-ds-theme="dark"] .approval-user-status.pending {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-soft);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .approval-retention-pill,
html[data-ds-theme="dark"] .approval-modal-mode-chip,
html[data-ds-theme="dark"] .approval-user-status,
html[data-ds-theme="dark"] .approval-request-retention-block,
html[data-ds-theme="dark"] .approval-request-warning-block {
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .approval-tile-title,
html[data-ds-theme="dark"] .approval-list-title-text,
html[data-ds-theme="dark"] .approval-request-meta-label,
html[data-ds-theme="dark"] .approval-request-retention-text,
html[data-ds-theme="dark"] .approval-user-name,
html[data-ds-theme="dark"] .approval-thumb-number-label,
html[data-ds-theme="dark"] .approval-share-popup-button,
html[data-ds-theme="dark"] .approval-modal .user-footer-btn.confirm.approval-footer-next-readonly {
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .approval-unprocessed-meta,
html[data-ds-theme="dark"] .approval-processing-note,
html[data-ds-theme="dark"] .approval-tile-sub,
html[data-ds-theme="dark"] .approval-progress-text,
html[data-ds-theme="dark"] .approval-progress-count,
html[data-ds-theme="dark"] .approval-done-scope,
html[data-ds-theme="dark"] .approval-done-decided-at,
html[data-ds-theme="dark"] .approval-modal-result-text,
html[data-ds-theme="dark"] .approval-request-comment-text.is-empty,
html[data-ds-theme="dark"] .approval-request-meta-empty,
html[data-ds-theme="dark"] .approval-user-role,
html[data-ds-theme="dark"] .approval-user-sub,
html[data-ds-theme="dark"] .approval-thumb-caption,
html[data-ds-theme="dark"] .approval-bulk-download-hint,
html[data-ds-theme="dark"] .realqr-section-heading,
html[data-ds-theme="dark"] .approval-doc-stage-message {
  color: var(--ds-color-text-sub);
}

html[data-ds-theme="dark"] .dgs-session-warning,
html[data-ds-theme="dark"] .dgs-auth-expired-card {
  border-color: var(--ds-color-border) !important;
  background: var(--ds-color-surface) !important;
  color: var(--ds-color-text) !important;
  box-shadow: var(--ds-shadow-float) !important;
}

html[data-ds-theme="dark"] .dgs-session-warning [data-role],
html[data-ds-theme="dark"] .dgs-auth-expired-card [data-role] {
  color: inherit;
}

html[data-ds-theme="dark"] .workqueue-nav,
html[data-ds-theme="high-contrast"] .workqueue-nav {
  background: var(--ds-color-surface-muted);
}

html[data-ds-theme="dark"] .workqueue-folder-row.is-open,
html[data-ds-theme="dark"] .workqueue-folder-row[role="button"]:hover,
html[data-ds-theme="dark"] .workqueue-folder-row[role="button"]:focus-visible,
html[data-ds-theme="dark"] .workqueue-folder-row.is-active {
  background: var(--ds-color-primary-soft);
}

html[data-ds-theme="high-contrast"] .workqueue-folder-row.is-open,
html[data-ds-theme="high-contrast"] .workqueue-folder-row[role="button"]:hover,
html[data-ds-theme="high-contrast"] .workqueue-folder-row[role="button"]:focus-visible,
html[data-ds-theme="high-contrast"] .workqueue-folder-row.is-active {
  background: #111111;
  border-color: #ffffff;
}

html[data-ds-theme="dark"] body,
html[data-ds-theme="dark"] .app-shell,
html[data-ds-theme="dark"] .workqueue-layout,
html[data-ds-theme="dark"] #tab-content,
html[data-ds-theme="dark"] .content,
html[data-ds-theme="dark"] .new-request-area,
html[data-ds-theme="dark"] .new-request-area .column {
  background: var(--ds-color-bg);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .app-titlebar,
html[data-ds-theme="dark"] .workqueue-nav,
html[data-ds-theme="dark"] .tab-wrapper,
html[data-ds-theme="dark"] .sidebar-panel,
html[data-ds-theme="dark"] .document-tab-panel,
html[data-ds-theme="dark"] .approval-primary-section,
html[data-ds-theme="dark"] .realqr-user-section,
html[data-ds-theme="dark"] .request-meta-panel,
html[data-ds-theme="dark"] .request-comment-block,
html[data-ds-theme="dark"] .request-retention-shell,
html[data-ds-theme="dark"] .new-request-side-stack,
html[data-ds-theme="dark"] .new-request-side-panel,
html[data-ds-theme="dark"] .approval-flow-shell,
html[data-ds-theme="dark"] .viewer-shell,
html[data-ds-theme="dark"] .viewer-panel,
html[data-ds-theme="dark"] .viewer-toolbar,
html[data-ds-theme="dark"] .thumbnail-list,
html[data-ds-theme="dark"] .thumbnail-item {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .new-request-area .column.user-column,
html[data-ds-theme="dark"] .new-request-area .column.viewer-column,
html[data-ds-theme="dark"] .approval-modal .column.viewer-column,
html[data-ds-theme="dark"] .new-request-area .column.thumbnail-column,
html[data-ds-theme="dark"] .approval-modal .column.thumbnail-column,
html[data-ds-theme="dark"] .template-modal-header,
html[data-ds-theme="dark"] .template-modal-footer,
html[data-ds-theme="dark"] .approval-panel-section-heading,
html[data-ds-theme="dark"] .approval-list-head,
html[data-ds-theme="dark"] .notification-center-header {
  border-color: var(--ds-color-border);
}

html[data-ds-theme="dark"] .new-request-area .column.viewer-column,
html[data-ds-theme="dark"] .approval-modal .column.viewer-column {
  border-right-color: var(--ds-color-border) !important;
  background-color: var(--ds-color-bg) !important;
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .new-request-area .column.thumbnail-column,
html[data-ds-theme="dark"] .approval-modal .column.thumbnail-column {
  background: var(--ds-color-surface-muted);
  scrollbar-color: var(--ds-color-border) transparent;
}

html[data-ds-theme="dark"] .new-request-area[data-request-stage="editing"].global-drop-active .column {
  background-color: var(--ds-color-primary-soft);
}

html[data-ds-theme="dark"] .thumbnail-square,
html[data-ds-theme="dark"] .approval-thumb-item,
html[data-ds-theme="dark"] .approval-thumb-frame {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .thumbnail-square.selected,
html[data-ds-theme="dark"] .approval-thumb-item.is-selected,
html[data-ds-theme="dark"] .approval-thumb-item[aria-current="page"] {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-soft);
}

html[data-ds-theme="dark"] .user-footer-btn.progress,
html[data-ds-theme="dark"] #thumbnail-progress-btn.user-footer-btn.progress {
  border-color: var(--ds-cta-neutral-utility-border);
  background: var(--ds-cta-neutral-utility-bg);
  color: var(--ds-cta-neutral-utility-fg);
  box-shadow: var(--ds-shadow-soft);
}

html[data-ds-theme="dark"] .user-footer-btn.progress:hover,
html[data-ds-theme="dark"] #thumbnail-progress-btn.user-footer-btn.progress:hover {
  background: var(--ds-cta-neutral-utility-bg-hover);
}

html[data-ds-theme="dark"] .user-footer-btn.progress .pp-count,
html[data-ds-theme="dark"] #thumbnail-progress-btn.user-footer-btn.progress .pp-count,
html[data-ds-theme="dark"] .user-footer-btn.progress .progress-label {
  color: var(--ds-cta-neutral-utility-fg);
}

html[data-ds-theme="dark"] .user-footer-btn.progress .pp-icon {
  filter: none;
}

html[data-ds-theme="dark"] input,
html[data-ds-theme="dark"] select,
html[data-ds-theme="dark"] textarea,
html[data-ds-theme="dark"] .tag-input,
html[data-ds-theme="dark"] .request-comment-input,
html[data-ds-theme="dark"] .request-retention-search,
html[data-ds-theme="dark"] .template-name-input,
html[data-ds-theme="dark"] .user-search-popup input {
  border-color: var(--ds-color-input-border);
  background: var(--ds-color-input);
  color: var(--ds-color-input-text);
}

html[data-ds-theme="dark"] input::placeholder,
html[data-ds-theme="dark"] textarea::placeholder,
html[data-ds-theme="dark"] .request-retention-search::placeholder {
  color: var(--ds-color-input-placeholder);
}

html[data-ds-theme="dark"] button:disabled,
html[data-ds-theme="dark"] input:disabled,
html[data-ds-theme="dark"] select:disabled,
html[data-ds-theme="dark"] textarea:disabled,
html[data-ds-theme="dark"] [aria-disabled="true"],
html[data-ds-theme="dark"] .is-disabled {
  border-color: var(--ds-color-border);
  background: var(--ds-color-disabled-bg);
  color: var(--ds-color-disabled-text);
  opacity: 1;
}

html[data-ds-theme="dark"] .template-modal,
html[data-ds-theme="dark"] .template-popup-dialog,
html[data-ds-theme="dark"] .template-name-dialog,
html[data-ds-theme="dark"] .template-list-item,
html[data-ds-theme="dark"] .template-modal-body,
html[data-ds-theme="dark"] .approval-share-popup,
html[data-ds-theme="dark"] .approval-modal,
html[data-ds-theme="dark"] .approval-window,
html[data-ds-theme="dark"] .user-search-popup,
html[data-ds-theme="dark"] .notification-toast,
html[data-ds-theme="dark"] .app-settings-panel {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface-raised);
  color: var(--ds-color-text);
  box-shadow: var(--ds-shadow-float);
}

html[data-ds-theme="dark"] .template-list-item:hover,
html[data-ds-theme="dark"] .template-item-delete:hover,
html[data-ds-theme="dark"] .template-item-apply-btn:hover,
html[data-ds-theme="dark"] .template-item-apply-all:hover,
html[data-ds-theme="dark"] .new-request-side-tab:hover,
html[data-ds-theme="dark"] .new-request-side-tab.is-active,
html[data-ds-theme="dark"] .approval-user-select:hover,
html[data-ds-theme="dark"] .approval-anchor-trigger:hover:not(:disabled),
html[data-ds-theme="dark"] .document-tab .close-btn:hover,
html[data-ds-theme="dark"] .document-tab .close-btn:focus-visible {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-soft);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .template-name-modal,
html[data-ds-theme="dark"] .template-popup-modal,
html[data-ds-theme="dark"] .attachment-upload-overlay {
  background: var(--ds-color-overlay);
}

html[data-ds-theme="dark"] .template-popup-title,
html[data-ds-theme="dark"] .template-name-title,
html[data-ds-theme="dark"] .template-popup-message,
html[data-ds-theme="dark"] .template-name-dialog,
html[data-ds-theme="dark"] .template-popup-dialog {
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .template-name-input {
  border-color: var(--ds-color-input-border);
  background: var(--ds-color-input);
  color: var(--ds-color-input-text);
}

html[data-ds-theme="dark"] .template-name-input:focus {
  border-color: var(--ds-color-primary);
  box-shadow: var(--ds-focus-ring);
}

html[data-ds-theme="dark"] .attachment-section,
html[data-ds-theme="dark"] .attachment-item,
html[data-ds-theme="dark"] .attachment-thumb,
html[data-ds-theme="dark"] .attachment-upload-modal,
html[data-ds-theme="dark"] .attachment-upload-progress,
html[data-ds-theme="dark"] .new-request-draft-restore-group,
html[data-ds-theme="dark"] .progress-fab-content {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface-raised);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .attachment-section,
html[data-ds-theme="dark"] .attachment-thumb,
html[data-ds-theme="dark"] .attachment-upload-progress,
html[data-ds-theme="dark"] .new-request-draft-restore-group {
  background: var(--ds-color-surface-muted);
}

html[data-ds-theme="dark"] .attachment-title,
html[data-ds-theme="dark"] .attachment-name,
html[data-ds-theme="dark"] .attachment-upload-title,
html[data-ds-theme="dark"] .new-request-draft-restore-title,
html[data-ds-theme="dark"] .new-request-draft-restore-summary dd {
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .attachment-counter,
html[data-ds-theme="dark"] .attachment-hint,
html[data-ds-theme="dark"] .attachment-size,
html[data-ds-theme="dark"] .attachment-upload-sub,
html[data-ds-theme="dark"] .new-request-draft-restore-copy,
html[data-ds-theme="dark"] .new-request-draft-restore-summary dt,
html[data-ds-theme="dark"] .progress-fab-close {
  color: var(--ds-color-text-sub);
}

html[data-ds-theme="dark"] .attachment-add-btn,
html[data-ds-theme="dark"] .progress-fab-btn,
html[data-ds-theme="dark"] .approval-modal-action-trigger.ds-cta-primary-soft {
  border-color: var(--ds-cta-primary-soft-border);
  background: var(--ds-cta-primary-soft-bg);
  color: var(--ds-cta-primary-soft-fg);
}

html[data-ds-theme="dark"] .attachment-add-btn:hover,
html[data-ds-theme="dark"] .progress-fab-btn:hover,
html[data-ds-theme="dark"] .approval-modal-action-trigger.ds-cta-primary-soft:hover:not(:disabled) {
  background: var(--ds-cta-primary-soft-bg-hover);
  color: var(--ds-cta-primary-soft-fg);
}

html[data-ds-theme="dark"] .attachment-upload-cancel,
html[data-ds-theme="dark"] .progress-fab-close:hover {
  border-color: var(--ds-cta-neutral-border);
  background: var(--ds-cta-neutral-bg-hover);
  color: var(--ds-cta-neutral-fg);
}

html[data-ds-theme="dark"] .new-request-draft-restore-notice {
  border-color: var(--ds-color-warning);
  background: var(--ds-color-warning-bg);
  color: var(--ds-color-warning);
}

html[data-ds-theme="dark"] .attachment-remove:hover,
html[data-ds-theme="dark"] .new-request-draft-restore-action[data-action="discard"],
html[data-ds-theme="dark"] .approval-modal-action-trigger.approval-modal-reject-trigger,
html[data-ds-theme="dark"] .approval-modal-action-trigger.approval-modal-reject-trigger:hover:not(:disabled) {
  border-color: var(--ds-color-error);
  background: var(--ds-color-error-bg);
  color: var(--ds-color-error);
}

html[data-ds-theme="dark"] .viewer-token-kind-label-user {
  border-color: var(--ds-color-border);
  background: var(--ds-color-neutral-bg);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .viewer-token-kind-label-dept {
  border-color: var(--ds-color-success);
  background: var(--ds-color-success-bg);
  color: var(--ds-color-success);
}

html[data-ds-theme="dark"] .main-tab:hover:not(.active),
html[data-ds-theme="dark"] .document-tab:hover:not(.active),
html[data-ds-theme="dark"] .main-tab.active,
html[data-ds-theme="dark"] .document-tab.active {
  border-color: var(--ds-color-primary);
  border-bottom-color: var(--ds-color-surface);
  background: var(--ds-color-surface);
  color: var(--ds-color-primary);
  box-shadow: inset 0 3px 0 var(--ds-color-primary);
}

html[data-ds-theme="dark"] .template-modal-title,
html[data-ds-theme="dark"] .template-list-item-name,
html[data-ds-theme="dark"] .approval-panel-section-heading h3,
html[data-ds-theme="dark"] .new-request-side-tab,
html[data-ds-theme="dark"] .request-meta-panel label,
html[data-ds-theme="dark"] .request-comment-title,
html[data-ds-theme="dark"] .user-search-result-row {
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .template-list-item-meta,
html[data-ds-theme="dark"] .template-list-empty-message,
html[data-ds-theme="dark"] .approval-panel-section-heading p,
html[data-ds-theme="dark"] .new-request-side-tab-summary,
html[data-ds-theme="dark"] .request-meta-help,
html[data-ds-theme="dark"] .request-retention-help,
html[data-ds-theme="dark"] .approval-empty,
html[data-ds-theme="dark"] .approval-loading {
  color: var(--ds-color-text-sub);
}

html[data-ds-theme="dark"] .new-request-side-tab-badge,
html[data-ds-theme="dark"] .template-item-apply-all,
html[data-ds-theme="dark"] .template-save-button,
html[data-ds-theme="dark"] .template-item-apply-btn,
html[data-ds-theme="dark"] .approval-signpos-btn,
html[data-ds-theme="dark"] .request-retention-period-badge,
html[data-ds-theme="dark"] .request-retention-chip {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .new-request-side-tab-badge.is-alert-warning {
  border-color: var(--ds-color-warning);
  background: var(--ds-color-warning-bg);
  color: var(--ds-color-warning);
}

html[data-ds-theme="dark"] .new-request-side-tab-badge.is-alert-danger {
  border-color: var(--ds-color-error);
  background: var(--ds-color-error-bg);
  color: var(--ds-color-error);
}

html[data-ds-theme="dark"] .new-request-side-tab-badge.is-alert-success {
  border-color: var(--ds-color-success);
  background: var(--ds-color-success-bg);
  color: var(--ds-color-success);
}

html[data-ds-theme="dark"] .template-modal-overlay,
html[data-ds-theme="dark"] .template-popup-overlay,
html[data-ds-theme="dark"] .template-name-overlay,
html[data-ds-theme="dark"] .app-settings-backdrop,
html[data-ds-theme="dark"] .modal-overlay {
  background: var(--ds-color-overlay);
}

html[data-ds-theme="dark"] .red-bg {
  background: var(--ds-color-error-bg);
}

html[data-ds-theme="dark"] .yellow-bg {
  background: var(--ds-color-warning-bg);
}

html[data-ds-theme="dark"] .green-bg {
  background: var(--ds-color-success-bg);
}

html[data-ds-theme="dark"] .blue-bg {
  background: var(--ds-color-info-bg);
}

.app-settings-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
  cursor: pointer;
}

.app-settings-trigger:hover,
.app-settings-trigger:focus-visible,
.app-settings-trigger.is-active {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-soft);
}

.app-settings-trigger img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

html[data-ds-theme="dark"] .app-settings-trigger img,
html[data-ds-theme="high-contrast"] .app-settings-trigger img {
  filter: invert(1);
}

html.app-settings-modal-open,
body.app-settings-modal-open {
  overflow: hidden;
}

.app-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1440;
  background: rgba(15, 23, 42, 0.38);
  cursor: default;
}

.app-settings-backdrop[hidden] {
  display: none !important;
}

html[data-ds-theme="high-contrast"] .app-settings-backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.app-settings-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1450;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(860px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: min(720px, calc(100vh - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-float);
  color: var(--ds-color-text);
}

@supports (height: 100dvh) {
  .app-settings-panel {
    height: min(720px, calc(100dvh - 32px));
    max-height: min(720px, calc(100dvh - 32px));
  }
}

@media (min-width: 981px) {
  .app-settings-panel {
    width: min(860px, 74vw);
    height: min(720px, calc(100vh - 48px));
    max-height: min(720px, calc(100vh - 48px));
  }

  @supports (height: 100dvh) {
    .app-settings-panel {
      height: min(720px, calc(100dvh - 48px));
      max-height: min(720px, calc(100dvh - 48px));
    }
  }
}

.app-settings-panel[hidden] {
  display: none !important;
}

.app-settings-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
  border-bottom: 1px solid var(--ds-color-border);
}

.app-settings-panel-title {
  margin: 0;
  color: var(--ds-color-text);
  font-size: var(--ds-font-lg);
  font-weight: 800;
  line-height: var(--ds-line-compact);
}

.app-settings-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-cta-neutral-bg);
  color: var(--ds-cta-neutral-fg);
  cursor: pointer;
  font-size: var(--ds-font-lg);
  line-height: 1;
}

.app-settings-panel-shell {
  display: grid;
  grid-template-columns: minmax(160px, 188px) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.app-settings-nav {
  min-width: 0;
  overflow: auto;
  border-right: 1px solid var(--ds-color-border);
  background: var(--ds-color-surface-muted);
}

.app-settings-nav-list {
  display: grid;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3);
}

.app-settings-nav-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-color-text);
  cursor: pointer;
  font-size: var(--ds-font-sm);
  font-weight: 800;
  line-height: var(--ds-line-compact);
  text-align: left;
  overflow-wrap: anywhere;
}

.app-settings-nav-button:hover,
.app-settings-nav-button:focus-visible,
.app-settings-nav-button.is-selected,
.app-settings-nav-button[aria-selected="true"] {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-soft);
  color: var(--ds-color-text);
}

.app-settings-nav-button:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

.app-settings-panel-body {
  display: grid;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  gap: var(--ds-space-4);
  min-width: 0;
  overflow: auto;
  padding: var(--ds-space-4);
}

.app-settings-section {
  display: grid;
  align-content: start;
  align-self: start;
  gap: var(--ds-space-4);
  min-width: 0;
  width: 100%;
}

.app-settings-section[hidden] {
  display: none !important;
}

.app-settings-section-heading {
  display: grid;
  gap: var(--ds-space-1, 4px);
  min-width: 0;
}

.app-settings-section-heading h3 {
  margin: 0;
  color: var(--ds-color-text);
  font-size: var(--ds-font-md);
  font-weight: 800;
  line-height: var(--ds-line-compact);
}

.app-settings-section-subtitle {
  margin: 0;
  color: var(--ds-color-text-sub);
  font-size: var(--ds-font-sm);
  line-height: var(--ds-line-normal);
  overflow-wrap: anywhere;
}

.app-settings-fieldset {
  display: grid;
  align-content: start;
  gap: var(--ds-space-2);
  min-width: 0;
  border: 0;
}

.app-settings-fieldset legend {
  margin-bottom: var(--ds-space-2);
  color: var(--ds-color-text);
  font-size: var(--ds-font-sm);
  font-weight: 800;
}

.app-settings-options,
.app-settings-swatches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-2);
}

.app-settings-options--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-settings-option,
.app-settings-swatch {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
  cursor: pointer;
  font-size: var(--ds-font-sm);
  font-weight: 700;
  line-height: var(--ds-line-compact);
  overflow-wrap: anywhere;
}

.app-settings-option:has(input:checked),
.app-settings-swatch:has(input:checked) {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-soft);
  color: var(--ds-color-text);
}

.app-settings-option input,
.app-settings-swatch input {
  flex: 0 0 auto;
}

.app-settings-swatch span {
  width: 16px;
  height: 16px;
  border: 1px solid var(--ds-color-border);
  border-radius: 50%;
  background: var(--ds-color-primary);
}

.app-settings-swatch[data-accent="default"] span { background: #007bff; }
.app-settings-swatch[data-accent="blue"] span { background: #0f62fe; }
.app-settings-swatch[data-accent="green"] span { background: #238636; }
.app-settings-swatch[data-accent="yellow-orange"] span { background: #b85c00; }
.app-settings-swatch[data-accent="red"] span { background: #b42318; }

.app-settings-info-list {
  display: grid;
  gap: var(--ds-space-2);
  min-width: 0;
  margin: 0;
}

.app-settings-info-row {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
  gap: var(--ds-space-3);
  min-width: 0;
  padding: var(--ds-space-3);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-surface);
}

.app-settings-info-row dt,
.app-settings-info-row dd {
  min-width: 0;
  margin: 0;
  line-height: var(--ds-line-normal);
  overflow-wrap: anywhere;
}

.app-settings-info-row dt {
  color: var(--ds-color-text);
  font-size: var(--ds-font-sm);
  font-weight: 800;
}

.app-settings-info-row dd {
  color: var(--ds-color-text-sub);
  font-size: var(--ds-font-sm);
}

.app-settings-panel [data-settings-panel="license"],
.app-settings-panel .app-settings-info-row dt,
.app-settings-panel .app-settings-info-row dd {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: text;
}

.app-settings-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .app-settings-panel {
    width: min(100%, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  @supports (height: 100dvh) {
    .app-settings-panel {
      height: calc(100dvh - 16px);
      max-height: calc(100dvh - 16px);
    }
  }

  .app-settings-panel-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-settings-nav {
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--ds-color-border);
  }

  .app-settings-nav-list {
    display: flex;
    gap: var(--ds-space-2);
    min-width: max-content;
    padding: var(--ds-space-2);
  }

  .app-settings-nav-button {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 36px;
    justify-content: center;
    text-align: center;
  }

  .app-settings-panel-body {
    padding: var(--ds-space-3);
  }

  .app-settings-options,
  .app-settings-swatches,
  .app-settings-options--wide,
  .app-settings-info-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-settings-info-row {
    gap: var(--ds-space-1, 4px);
  }
}

@media (max-height: 560px) {
  .app-settings-panel {
    height: calc(100vh - 12px);
    max-height: calc(100vh - 12px);
  }

  @supports (height: 100dvh) {
    .app-settings-panel {
      height: calc(100dvh - 12px);
      max-height: calc(100dvh - 12px);
    }
  }

  .app-settings-panel-header,
  .app-settings-panel-body {
    padding: var(--ds-space-3);
  }

  .app-settings-nav-list {
    padding: var(--ds-space-2);
  }
}

@media (max-width: 420px) {
  .app-settings-panel-header {
    padding: var(--ds-space-3);
  }

  .app-settings-panel-title {
    font-size: var(--ds-font-md);
  }

  .app-settings-nav-button {
    min-width: 88px;
    padding-inline: 8px;
  }

  .app-settings-option,
  .app-settings-swatch {
    min-height: 40px;
    padding: 8px;
  }
}

html[data-ds-theme="high-contrast"] .app-settings-nav-button:hover,
html[data-ds-theme="high-contrast"] .app-settings-nav-button:focus-visible,
html[data-ds-theme="high-contrast"] .app-settings-nav-button.is-selected,
html[data-ds-theme="high-contrast"] .app-settings-nav-button[aria-selected="true"] {
  border-color: #ffffff;
  background: #111111;
  color: #ffffff;
}

html[data-ds-theme="high-contrast"] .app-settings-option:has(input:checked),
html[data-ds-theme="high-contrast"] .app-settings-swatch:has(input:checked) {
  border-color: #ffffff;
  background: #111111;
  color: #ffffff;
  box-shadow: inset 4px 0 0 var(--ds-color-primary);
}

html[data-ds-theme="high-contrast"] .app-settings-option:has(input:checked) input,
html[data-ds-theme="high-contrast"] .app-settings-swatch:has(input:checked) input {
  accent-color: var(--ds-color-primary);
}

html[data-ds-theme="high-contrast"] .app-settings-swatch:has(input:checked) span {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px #000000, 0 0 0 3px #ffffff;
}

html[data-ds-theme="dark"] .request-retention-method,
html[data-ds-theme="dark"] .request-retention-wrapper[data-retention-contract="NR_RETENTION_PICKER_UX_V2"] .request-retention-confirmed-item,
html[data-ds-theme="dark"] .request-retention-wrapper[data-retention-contract="NR_RETENTION_PICKER_UX_V2"] .request-retention-shortcuts,
html[data-ds-theme="dark"] .new-request-apply-popup .new-request-apply-gate {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .request-retention-method-heading,
html[data-ds-theme="dark"] .request-retention-wrapper[data-retention-contract="NR_RETENTION_PICKER_UX_V2"] .request-retention-confirmed-item strong,
html[data-ds-theme="dark"] .request-retention-wrapper[data-retention-contract="NR_RETENTION_PICKER_UX_V2"] .request-retention-candidate-title,
html[data-ds-theme="dark"] .request-retention-wrapper[data-retention-contract="NR_RETENTION_PICKER_UX_V2"] .request-retention-shortcut-title {
  color: var(--ds-color-text);
}

html[data-ds-theme="dark"] .request-retention-method.is-selected-mode,
html[data-ds-theme="dark"] .request-retention-period-button.is-selected,
html[data-ds-theme="dark"] .request-retention-candidate.is-selected {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-soft);
  box-shadow: inset 4px 0 0 var(--ds-color-primary);
}