/* DMS primitives. Every value comes from a DMS token; pages compose these classes. */
@layer components {
  /* Icon shapes are static, byte-for-byte Lucide SVG assets. A mask keeps
   * their source geometry intact while currentColor controls their UI color. */
  .dms-icon {
    flex: none;
    display: inline-block;
    width: var(--dms-icon-size-md);
    height: var(--dms-icon-size-md);
    background-color: currentColor;
    vertical-align: middle;
  }

  .dms-icon--sm {
    width: var(--dms-icon-size-sm);
    height: var(--dms-icon-size-sm);
  }

  .dms-icon--lg {
    width: var(--dms-icon-size-lg);
    height: var(--dms-icon-size-lg);
  }

  .dms-icon--spin {
    animation: dms-spin calc(var(--dms-duration-slow) * 3) linear infinite;
  }

  /* Layout primitives */
  .dms-stack {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-4);
  }

  .dms-stack--sm {
    gap: var(--dms-space-2);
  }

  .dms-stack--lg {
    gap: var(--dms-space-8);
  }

  .dms-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dms-space-2);
  }

  .dms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--dms-layout-sidebar-min)), 1fr));
    gap: var(--dms-space-4);
  }

  .dms-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--dms-layout-secondary-width)), 1fr));
  }

  /* Page primitives & headers */
  .dms-page {
    width: 100%;
    max-width: var(--dms-layout-content-wide);
    margin-inline: auto;
    padding: var(--dms-space-6);
  }

  .dms-page--narrow {
    max-width: var(--dms-layout-content-narrow);
  }

  .dms-page--standard {
    max-width: var(--dms-layout-content-standard);
  }

  .dms-page--wide {
    max-width: var(--dms-layout-content-wide);
  }

  .dms-page--fluid {
    max-width: var(--dms-layout-content-fluid);
  }

  .dms-page__header,
  .dms-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--dms-space-3);
    margin-block-end: var(--dms-space-6);
  }

  .dms-page__header-content {
    flex: 1 1 auto;
    min-width: 0;
  }

  .dms-page__title {
    margin: 0;
    font-size: var(--dms-font-headline-size);
    font-weight: var(--dms-font-headline-weight);
    --dms-icon-stroke: var(--dms-font-headline-icon-stroke);
    line-height: var(--dms-font-headline-line-height);
    color: var(--dms-text-primary);
  }

  .dms-page__description,
  .dms-page-header__description {
    margin-block-start: var(--dms-space-1);
    margin-block-end: 0;
    color: var(--dms-text-secondary);
  }

  .dms-page__actions,
  .dms-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--dms-space-2);
  }

  .dms-section {
    scroll-margin-block-start: var(--dms-space-6);
  }

  .dms-section + .dms-section {
    margin-block-start: var(--dms-space-10);
  }

  /* Inside a stack the stack gap already separates sections. */
  .dms-stack > .dms-section + .dms-section {
    margin-block-start: 0;
  }

  .dms-section__header {
    margin-block-end: var(--dms-space-4);
  }

  .dms-section__description {
    margin-block-start: var(--dms-space-1);
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-small-weight);
    --dms-icon-stroke: var(--dms-font-small-icon-stroke);
    line-height: var(--dms-font-small-line-height);
  }

  .dms-code {
    padding-inline: var(--dms-space-1);
    border: var(--dms-border-width) solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    background: var(--dms-background);
    color: var(--dms-text-primary);
  }

  .dms-kbd {
    display: inline-flex;
    align-items: center;
    height: var(--dms-space-5);
    padding-inline: var(--dms-space-1);
    border: var(--dms-border-width) solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    background: var(--dms-background-white);
    color: var(--dms-text-secondary);
    line-height: 1;
  }

  .dms-dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--dms-space-2) var(--dms-space-3);
    margin: 0;
  }

  .dms-dl dt {
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-small-weight);
    --dms-icon-stroke: var(--dms-font-small-icon-stroke);
    line-height: var(--dms-font-body-line-height);
  }

  .dms-dl dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  /* Buttons */
  .dms-button,
  .dms-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dms-space-2);
    height: var(--dms-control-height-md);
    padding-inline: var(--dms-space-3);
    border: var(--dms-border-width) solid transparent;
    border-radius: var(--dms-radius-md);
    font-size: var(--dms-font-body-size);
    font-weight: var(--dms-font-body-weight);
    --dms-icon-stroke: var(--dms-font-body-icon-stroke);
    line-height: var(--dms-font-body-line-height);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dms-duration-fast) var(--dms-easing-standard), border-color var(--dms-duration-fast) var(--dms-easing-standard), color var(--dms-duration-fast) var(--dms-easing-standard), box-shadow var(--dms-duration-fast) var(--dms-easing-standard), transform var(--dms-duration-fast) var(--dms-easing-standard), filter var(--dms-duration-fast) var(--dms-easing-standard);
  }

  .dms-button:active,
  .dms-btn:active {
    box-shadow: var(--dms-shadow-emboss-button-active);
    transform: translateY(1px);
  }

  /* Charcoal primary action (Design System 2.0); dms/surface refines the finish. */
  .dms-button--primary,
  .dms-btn--primary {
    border-color: transparent;
    background: linear-gradient(to bottom, var(--dms-action-primary-start), var(--dms-action-primary-end));
    box-shadow: var(--dms-shadow-emboss-button-primary);
    color: var(--dms-text-on-primary);
  }

  .dms-button--primary:hover,
  .dms-btn--primary:hover {
    box-shadow: var(--dms-shadow-emboss-button-primary-hover);
    filter: brightness(0.97);
  }

  .dms-button--secondary,
  .dms-btn--secondary,
  .dms-btn--outline {
    border-color: var(--dms-border);
    background: var(--dms-background-white);
    color: var(--dms-text-primary);
    box-shadow: var(--dms-shadow-emboss-button);
  }

  .dms-button--secondary:hover,
  .dms-btn--secondary:hover,
  .dms-btn--outline:hover {
    border-color: var(--dms-border);
    background: var(--dms-surface-hover);
    color: var(--dms-text-primary);
    box-shadow: var(--dms-shadow-emboss-button-hover);
  }

  .dms-button--ghost,
  .dms-btn--ghost {
    background: transparent;
    color: var(--dms-text-secondary);
  }

  .dms-button--ghost:hover,
  .dms-btn--ghost:hover {
    background: var(--dms-surface-hover);
    color: var(--dms-text-primary);
  }

  .dms-button--danger,
  .dms-btn--danger {
    background: var(--dms-danger);
    color: var(--dms-text-on-action);
    box-shadow: var(--dms-shadow-emboss-button-danger);
  }

  .dms-button--danger:hover,
  .dms-btn--danger:hover {
    background: var(--dms-danger-hover);
  }

  .dms-button--sm,
  .dms-btn--sm {
    height: var(--dms-control-height-sm);
    padding-inline: var(--dms-space-2);
  }

  .dms-button--lg,
  .dms-btn--lg {
    height: var(--dms-control-height-lg);
    padding-inline: var(--dms-space-4);
  }

  .dms-button--block,
  .dms-btn--block {
    width: 100%;
  }

  .dms-btn__label {
    display: inline-flex;
    align-items: center;
  }

  .dms-button:disabled,
  .dms-btn:disabled,
  .dms-button[aria-disabled="true"],
  .dms-btn[aria-disabled="true"] {
    border-color: transparent;
    background: var(--dms-surface-hover);
    box-shadow: none;
    color: var(--dms-text-muted);
    cursor: not-allowed;
  }

  .dms-button[aria-busy="true"],
  .dms-btn[aria-busy="true"] {
    cursor: progress;
  }

  .dms-icon-button {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--dms-control-height-md);
    height: var(--dms-control-height-md);
    padding: 0;
    border: 0;
    border-radius: var(--dms-radius-sm);
    background: transparent;
    color: var(--dms-text-secondary);
    cursor: pointer;
  }

  .dms-icon-button:hover,
  .dms-icon-button[aria-expanded="true"],
  .dms-icon-button[aria-pressed="true"] {
    background: var(--dms-surface-hover);
    color: var(--dms-text-primary);
  }

  .dms-icon-button:disabled {
    background: transparent;
    color: var(--dms-text-muted);
    cursor: not-allowed;
  }

  .dms-icon-button--sm {
    width: var(--dms-control-height-sm);
    height: var(--dms-control-height-sm);
  }

  /* Tooltips for icon-only controls (the accessible name comes from aria-label) */
  [data-dms-tooltip] {
    position: relative;
  }

  @media (hover: hover) {
    [data-dms-tooltip]:hover::after,
    [data-dms-tooltip]:focus-visible::after {
      content: attr(data-dms-tooltip);
      position: absolute;
      z-index: var(--dms-z-tooltip);
      inset-block-start: 50%;
      inset-inline-start: calc(100% + var(--dms-space-2));
      padding: var(--dms-space-1) var(--dms-space-2);
      border-radius: var(--dms-radius-sm);
      background: var(--dms-text-primary);
      box-shadow: var(--dms-shadow-md);
      color: var(--dms-background-white);
      font-size: var(--dms-font-small-size);
      font-weight: var(--dms-font-small-weight);
      --dms-icon-stroke: var(--dms-font-small-icon-stroke);
      line-height: var(--dms-font-small-line-height);
      white-space: nowrap;
      pointer-events: none;
      transform: translateY(-50%);
    }

    [data-dms-tooltip-placement="bottom-end"]:hover::after,
    [data-dms-tooltip-placement="bottom-end"]:focus-visible::after {
      inset-block-start: calc(100% + var(--dms-space-1));
      inset-inline: auto 0;
      transform: none;
    }

    [data-dms-tooltip-placement="top-end"]:hover::after,
    [data-dms-tooltip-placement="top-end"]:focus-visible::after {
      inset-block: auto calc(100% + var(--dms-space-1));
      inset-inline: auto 0;
      transform: none;
    }
  }

  /* Badges and alerts */
  .dms-count-badge {
    display: inline-grid;
    place-items: center;
    min-width: var(--dms-space-4);
    height: var(--dms-space-4);
    padding-inline: var(--dms-space-1);
    border-radius: var(--dms-radius-full);
    background: var(--dms-danger);
    color: var(--dms-text-on-action);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-body-weight);
    --dms-icon-stroke: var(--dms-font-body-icon-stroke);
    line-height: 1;
  }

  .dms-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--dms-space-1);
    height: var(--dms-space-6);
    padding-inline: var(--dms-space-2);
    border: var(--dms-border-width) solid var(--dms-border);
    border-radius: var(--dms-radius-full);
    background: var(--dms-background);
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-body-weight);
    --dms-icon-stroke: var(--dms-font-body-icon-stroke);
    line-height: var(--dms-font-small-line-height);
    white-space: nowrap;
  }

  .dms-badge--success,
  .dms-badge--warning,
  .dms-badge--danger,
  .dms-badge--info {
    border-color: transparent;
  }

  .dms-badge--success { background: var(--dms-success-subtle); color: var(--dms-success); }
  .dms-badge--warning { background: var(--dms-warning-subtle); color: var(--dms-warning); }
  .dms-badge--danger { background: var(--dms-danger-subtle); color: var(--dms-danger); }
  .dms-badge--info { background: var(--dms-info-subtle); color: var(--dms-info); }

  .dms-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--dms-space-1) var(--dms-space-3);
    padding: var(--dms-space-3) var(--dms-space-4);
    border: var(--dms-border-width) solid transparent;
    border-radius: var(--dms-radius-md);
    color: var(--dms-text-primary);
  }

  .dms-alert__body {
    margin-block-start: var(--dms-space-1);
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-small-weight);
    --dms-icon-stroke: var(--dms-font-small-icon-stroke);
    line-height: var(--dms-font-small-line-height);
  }

  .dms-alert--info { background: var(--dms-info-subtle); }
  .dms-alert--success { background: var(--dms-success-subtle); }
  .dms-alert--warning { background: var(--dms-warning-subtle); }
  .dms-alert--danger { background: var(--dms-danger-subtle); }
  .dms-alert--info .dms-alert__icon { color: var(--dms-info); }
  .dms-alert--success .dms-alert__icon { color: var(--dms-success); }
  .dms-alert--warning .dms-alert__icon { color: var(--dms-warning); }
  .dms-alert--danger .dms-alert__icon { color: var(--dms-danger); }

  /* Card */
  .dms-card {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-2);
    min-width: 0;
    padding: var(--dms-space-4);
    border: var(--dms-border-width) solid var(--dms-border);
    border-radius: var(--dms-radius-lg);
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-emboss-card);
    transition: box-shadow var(--dms-duration-fast) var(--dms-easing-standard);
  }

  .dms-card--interactive:hover {
    box-shadow: var(--dms-shadow-md);
  }

  .dms-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dms-space-3);
  }

  .dms-card__title {
    font-size: var(--dms-font-body-size);
    font-weight: var(--dms-font-body-weight);
    --dms-icon-stroke: var(--dms-font-body-icon-stroke);
    line-height: var(--dms-font-body-line-height);
    color: var(--dms-text-secondary);
  }

  .dms-card__value {
    font-size: var(--dms-font-title-size);
    font-weight: var(--dms-font-title-weight);
    --dms-icon-stroke: var(--dms-font-title-icon-stroke);
    line-height: var(--dms-font-title-line-height);
    font-variant-numeric: tabular-nums;
  }

  .dms-card__meta {
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-small-weight);
    --dms-icon-stroke: var(--dms-font-small-icon-stroke);
    line-height: var(--dms-font-small-line-height);
  }

  /* Grouped Card with divider rows (Clerk-style settings container) */
  .dms-card--grouped,
  .dms-card--table {
    padding: 0;
    overflow: hidden;
    gap: 0;
  }

  .dms-card--grouped > .dms-card__header,
  .dms-card--table > .dms-card__header {
    padding: var(--dms-space-4);
    border-block-end: var(--dms-border-width) solid var(--dms-border);
  }

  .dms-card--table > .dms-card__body {
    padding: 0;
    overflow-x: auto;
  }

  .dms-setting-row {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-2);
    padding: var(--dms-space-4);
    border-block-end: var(--dms-border-width) solid var(--dms-border);
  }

  .dms-setting-row:last-child {
    border-block-end: none;
  }

  .dms-setting-row__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dms-space-3);
  }

  .dms-setting-row__meta {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-1);
    flex: 1;
    min-width: 0;
  }

  .dms-setting-row__title {
    display: inline-flex;
    align-items: center;
    gap: var(--dms-space-2);
    font-size: var(--dms-font-body-size);
    font-weight: var(--dms-font-title-weight);
    color: var(--dms-text-primary);
  }

  .dms-setting-row__description {
    font-size: var(--dms-font-small-size);
    color: var(--dms-text-secondary);
    line-height: var(--dms-font-small-line-height);
  }

  .dms-setting-row__nested {
    padding-inline-start: calc(var(--dms-space-8) + var(--dms-space-2));
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-2);
    margin-block-start: var(--dms-space-2);
  }

  /* Forms */
  .dms-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--dms-layout-sidebar-width)), 1fr));
    gap: var(--dms-space-4);
  }

  .dms-form {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-4);
  }

  .dms-field,
  .dms-form-group,
  .dms-fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-1);
    min-width: 0;
  }

  .dms-fieldset {
    gap: var(--dms-space-2);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .dms-field__label,
  .dms-label,
  .dms-fieldset__legend {
    padding: 0;
    color: var(--dms-text-primary);
  }

  .dms-form-actions {
    display: flex;
    align-items: center;
    gap: var(--dms-space-2);
    margin-block-start: var(--dms-space-2);
  }

  .dms-field__required {
    margin-inline-start: var(--dms-space-1);
    color: var(--dms-danger);
  }

  .dms-field__hint,
  .dms-field__error,
  .dms-check__description {
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-small-weight);
    --dms-icon-stroke: var(--dms-font-small-icon-stroke);
    line-height: var(--dms-font-small-line-height);
    color: var(--dms-text-secondary);
  }

  .dms-field__error {
    display: flex;
    align-items: center;
    gap: var(--dms-space-1);
    color: var(--dms-danger);
  }

  .dms-input {
    width: 100%;
    height: var(--dms-control-height-md);
    padding-inline: var(--dms-space-3);
    border: var(--dms-border-width) solid var(--dms-border);
    border-radius: var(--dms-radius-md);
    background: var(--dms-background-white);
    color: var(--dms-text-primary);
    box-shadow: var(--dms-shadow-emboss-field);
    font-size: var(--dms-font-body-size);
    font-weight: var(--dms-font-small-weight);
    --dms-icon-stroke: var(--dms-font-small-icon-stroke);
    line-height: var(--dms-font-body-line-height);
    transition: border-color var(--dms-duration-fast) var(--dms-easing-standard), box-shadow var(--dms-duration-fast) var(--dms-easing-standard);
  }

  .dms-input::placeholder {
    color: var(--dms-text-muted);
    opacity: 1;
  }

  .dms-input:hover {
    border-color: var(--dms-text-secondary);
  }

  .dms-input:focus-visible {
    border-color: var(--dms-action-primary-end);
    box-shadow: var(--dms-shadow-sm);
    outline-offset: 0;
  }

  .dms-input[aria-invalid="true"] {
    border-color: var(--dms-danger);
  }

  .dms-input:disabled {
    border-color: var(--dms-border);
    background: var(--dms-background);
    box-shadow: none;
    color: var(--dms-text-muted);
    cursor: not-allowed;
  }

  textarea.dms-input {
    height: auto;
    min-height: calc(var(--dms-control-height-md) * 3);
    padding-block: var(--dms-space-2);
    resize: vertical;
  }

  input[type="file"].dms-input {
    height: auto;
    min-height: var(--dms-control-height-md);
    padding: var(--dms-space-1) var(--dms-space-2);
    line-height: normal;
    cursor: pointer;
  }

  input[type="file"].dms-input::file-selector-button {
    height: calc(var(--dms-control-height-md) - var(--dms-space-2));
    margin-inline-end: var(--dms-space-2);
    padding-inline: var(--dms-space-3);
    border: var(--dms-border-width) solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    background: var(--dms-surface-hover);
    color: var(--dms-text-primary);
    font-size: var(--dms-font-small-size);
    cursor: pointer;
    transition: background-color var(--dms-duration-fast) var(--dms-easing-standard);
  }

  input[type="file"].dms-input::file-selector-button:hover {
    background: var(--dms-surface-selected);
  }

  .dms-select,
  .dms-search {
    position: relative;
    display: block;
  }

  .dms-select__trigger {
    display: flex;
    align-items: center;
    gap: var(--dms-space-2);
    padding-inline-end: var(--dms-space-2);
    text-align: start;
    cursor: pointer;
  }

  .dms-select__trigger > .dms-icon {
    color: var(--dms-text-secondary);
  }

  .dms-select__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dms-select__value[data-dms-placeholder] {
    color: var(--dms-text-muted);
  }

  /* Top-layer popover positioned by dms--select through --dms-select-* properties. */
  .dms-select__popover {
    position: fixed;
    inset: auto;
    inset-block-start: var(--dms-select-top, 0);
    inset-inline-start: var(--dms-select-left, 0);
    width: var(--dms-select-width, auto);
    margin: 0;
    padding: 0;
    overflow: visible;
    border: var(--dms-border-width) solid var(--dms-border);
    border-radius: var(--dms-radius-md);
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-md);
    color: var(--dms-text-primary);
  }

  .dms-select__listbox {
    position: relative;
    max-height: calc(var(--dms-control-height-md) * 8);
    margin: 0;
    padding: var(--dms-space-1);
    overflow: auto;
    list-style: none;
  }

  .dms-select__option {
    display: flex;
    align-items: center;
    gap: var(--dms-space-2);
    min-height: var(--dms-control-height-md);
    padding-inline: var(--dms-space-2);
    border-radius: var(--dms-radius-sm);
    cursor: pointer;
  }

  .dms-select__option:hover {
    background: var(--dms-surface-hover);
  }

  .dms-select__option[data-dms-active] {
    background: var(--dms-surface-hover);
    outline: var(--dms-focus-ring-width) solid var(--dms-action-primary-end);
    outline-offset: calc(var(--dms-focus-ring-width) * -1);
  }

  .dms-select__check {
    visibility: hidden;
    color: var(--dms-action-primary-end);
  }

  .dms-select__option[aria-selected="true"] .dms-select__check {
    visibility: visible;
  }

  .dms-search__icon {
    position: absolute;
    inset-block-start: 50%;
    display: inline-flex;
    color: var(--dms-text-secondary);
    pointer-events: none;
    transform: translateY(-50%);
    inset-inline-start: var(--dms-space-3);
  }

  .dms-search .dms-input {
    padding-inline-start: var(--dms-space-8);
  }

  .dms-check {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-1);
  }

  .dms-check__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
  }

  .dms-check__body {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--dms-space-2);
    color: var(--dms-text-primary);
    cursor: pointer;
  }

  .dms-check__control {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--dms-space-4);
    height: var(--dms-space-4);
    margin-block-start: calc((var(--dms-font-body-line-height) - var(--dms-space-4)) / 2);
    border: var(--dms-border-width) solid var(--dms-border);
    border-radius: calc(var(--dms-radius-sm) * 2 / 3);
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-sm);
    color: var(--dms-text-on-action);
    --dms-icon-stroke: var(--dms-font-title-icon-stroke);
    transition: background-color var(--dms-duration-fast) var(--dms-easing-standard), border-color var(--dms-duration-fast) var(--dms-easing-standard), box-shadow var(--dms-duration-fast) var(--dms-easing-standard);
  }

  .dms-check__control > .dms-icon {
    width: calc(var(--dms-space-3) - 1px);
    height: calc(var(--dms-space-3) - 1px);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--dms-duration-fast) var(--dms-easing-standard), transform var(--dms-duration-fast) var(--dms-easing-standard);
  }

  .dms-check--radio .dms-check__control::after {
    opacity: 0;
    transform: scale(0.4);
    transition: opacity var(--dms-duration-fast) var(--dms-easing-standard), transform var(--dms-duration-fast) var(--dms-easing-standard);
  }

  .dms-check__body:hover .dms-check__control {
    border-color: var(--dms-action-primary-end);
  }

  .dms-check--radio .dms-check__control {
    border-radius: var(--dms-radius-full);
  }

  .dms-check--radio .dms-check__control::after {
    content: "";
    width: var(--dms-space-2);
    height: var(--dms-space-2);
    border-radius: var(--dms-radius-full);
    background: linear-gradient(to bottom right, var(--dms-action-primary-start), var(--dms-action-primary-end));
  }

  .dms-check__input:checked + .dms-check__body .dms-check__control,
  .dms-check__input:indeterminate + .dms-check__body .dms-check__control {
    border-color: var(--dms-action-primary-end);
    background: linear-gradient(to bottom right, var(--dms-action-primary-start), var(--dms-action-primary-end));
    box-shadow: var(--dms-shadow-emboss-button-primary);
    color: var(--dms-text-on-primary);
  }

  .dms-check--radio .dms-check__input:checked + .dms-check__body .dms-check__control {
    border-color: var(--dms-action-primary-end);
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-sm);
  }

  .dms-check__input:checked + .dms-check__body .dms-check__control > .dms-icon,
  .dms-check__input:indeterminate + .dms-check__body .dms-check__control > .dms-icon {
    opacity: 1;
    transform: none;
  }

  .dms-check--radio .dms-check__input:checked + .dms-check__body .dms-check__control::after {
    opacity: 1;
    transform: none;
  }

  .dms-check__input:focus-visible + .dms-check__body .dms-check__control,
  .dms-check__input:focus-visible + .dms-check__body .dms-switch__track {
    outline: var(--dms-focus-ring-width) solid var(--dms-action-primary-end);
    outline-offset: var(--dms-focus-ring-offset);
  }

  .dms-check__input:disabled + .dms-check__body {
    color: var(--dms-text-muted);
    cursor: not-allowed;
  }

  .dms-check__input:disabled + .dms-check__body .dms-check__control,
  .dms-check__input:disabled + .dms-check__body .dms-switch__track {
    border-color: var(--dms-border);
    background: var(--dms-background);
    box-shadow: none;
  }

  .dms-check__description {
    padding-inline-start: calc(var(--dms-space-4) + var(--dms-space-2));
  }

  .dms-switch .dms-check__description {
    padding-inline-start: calc(var(--dms-space-8) + var(--dms-space-2));
  }

  .dms-check__label-hidden .dms-check__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .dms-switch__track {
    position: relative;
    flex: none;
    width: var(--dms-space-8);
    height: var(--dms-space-5);
    border-radius: var(--dms-radius-full);
    background: var(--dms-border);
    transition: background-color var(--dms-duration-fast) var(--dms-easing-standard), box-shadow var(--dms-duration-fast) var(--dms-easing-standard);
  }

  .dms-switch__track::after {
    content: "";
    position: absolute;
    inset-block-start: calc((var(--dms-space-5) - var(--dms-space-4)) / 2);
    inset-inline-start: calc((var(--dms-space-5) - var(--dms-space-4)) / 2);
    width: var(--dms-space-4);
    height: var(--dms-space-4);
    border-radius: var(--dms-radius-full);
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-emboss-button);
    transition: transform var(--dms-duration-fast) var(--dms-easing-standard);
  }

  .dms-check__input:checked + .dms-check__body .dms-switch__track {
    background: linear-gradient(to right, var(--dms-action-primary-start), var(--dms-action-primary-end));
    box-shadow: var(--dms-shadow-emboss-button-primary);
  }

  .dms-check__input:checked + .dms-check__body .dms-switch__track::after {
    transform: translateX(calc(var(--dms-space-8) - var(--dms-space-5)));
  }

  .dms-dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .dms-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dms-space-1);
    padding: var(--dms-space-6);
    border: var(--dms-border-width) dashed var(--dms-border);
    border-radius: var(--dms-radius-lg);
    background: var(--dms-background);
    color: var(--dms-text-secondary);
    text-align: center;
    cursor: pointer;
  }

  .dms-dropzone:hover,
  .dms-dropzone[data-dms-dragging] {
    border-color: var(--dms-action-primary-end);
    background: var(--dms-surface-selected);
  }

  .dms-dropzone__input:focus-visible + .dms-dropzone {
    outline: var(--dms-focus-ring-width) solid var(--dms-action-primary-end);
    outline-offset: var(--dms-focus-ring-offset);
  }

  .dms-dropzone__illustration {
    width: calc(var(--dms-space-12) * 2);
  }

  .dms-dropzone__title {
    color: var(--dms-text-primary);
  }

  .dms-dropzone__files {
    color: var(--dms-text-primary);
    font-size: var(--dms-font-small-size);
  }

  /* Dropdown, menu, popover */
  .dms-dropdown {
    position: relative;
    display: inline-flex;
  }

  /*
   * Every dropdown is a popover with an arrow pointing at its trigger. The
   * controller sets --dms-popover-arrow-inline to the trigger's center; the
   * arrow sits in the space-2 gap between trigger and surface.
   */
  .dms-dropdown__menu::before,
  .dms-select__popover::before {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--dms-space-3) / -2);
    inset-inline-start: calc(var(--dms-popover-arrow-inline, 50%) - var(--dms-space-3) / 2);
    width: var(--dms-space-3);
    height: var(--dms-space-3);
    border-block-start: var(--dms-border-width) solid var(--dms-border);
    border-inline-start: var(--dms-border-width) solid var(--dms-border);
    background: var(--dms-background-white);
    transform: rotate(45deg);
    pointer-events: none;
  }

  .dms-select__popover[data-dms-placement="top"]::before {
    inset-block: auto calc(var(--dms-space-3) / -2);
    transform: rotate(225deg);
  }

  .dms-dropdown__menu {
    position: absolute;
    inset-block-start: calc(100% + var(--dms-space-2));
    inset-inline-end: 0;
    z-index: var(--dms-z-dropdown);
    min-width: var(--dms-layout-menu-min-width);
    max-width: calc(100vw - var(--dms-space-4));
    padding: var(--dms-space-1);
    border: var(--dms-border-width) solid var(--dms-border);
    border-radius: var(--dms-radius-md);
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-md);
    color: var(--dms-text-primary);
  }

  .dms-dropdown__menu--start {
    inset-inline: 0 auto;
  }

  .dms-dropdown__menu[data-dms-placement="top"] {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--dms-space-2));
  }

  .dms-dropdown__menu[data-dms-placement="top"]::before {
    inset-block: auto calc(var(--dms-space-3) / -2);
    transform: rotate(225deg);
  }

  .dms-dropdown__menu form,
  .dms-dropdown__menu .dms-inline-form,
  .dms-dropdown__menu .button_to {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .dms-menu-item {
    display: flex;
    align-items: center;
    gap: var(--dms-space-2);
    width: 100%;
    min-height: var(--dms-control-height-md);
    padding-inline: var(--dms-space-2);
    border: 0;
    border-radius: var(--dms-radius-sm);
    background: transparent;
    color: var(--dms-text-primary);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .dms-menu-item > .dms-icon {
    flex: none;
  }

  .dms-menu-item > span:not(.dms-icon) {
    flex: 1;
    min-width: 0;
  }

  .dms-menu-item:hover {
    background: var(--dms-surface-hover);
  }

  .dms-menu-item:focus-visible {
    background: var(--dms-surface-hover);
    outline-offset: calc(var(--dms-focus-ring-width) * -1);
  }

  .dms-menu-item--danger {
    color: var(--dms-danger);
  }

  .dms-menu-item[aria-disabled="true"] {
    background: transparent;
    color: var(--dms-text-muted);
    cursor: not-allowed;
  }

  .dms-menu-item__check {
    visibility: hidden;
  }

  .dms-menu-item[aria-checked="true"] .dms-menu-item__check {
    visibility: visible;
  }

  .dms-menu-separator {
    margin-block: var(--dms-space-1);
    border-block-start: var(--dms-border-width) solid var(--dms-border);
  }

  .dms-menu-hint {
    padding: 0 var(--dms-space-2) var(--dms-space-1) calc(var(--dms-space-2) * 2 + var(--dms-icon-size-sm));
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-small-weight);
    --dms-icon-stroke: var(--dms-font-small-icon-stroke);
    line-height: var(--dms-font-small-line-height);
  }

  .dms-popover {
    width: var(--dms-layout-secondary-width);
    padding: 0;
  }

  .dms-popover__header {
    padding: var(--dms-space-3) var(--dms-space-4);
    border-block-end: var(--dms-border-width) solid var(--dms-border);
  }

  .dms-popover__body {
    max-height: calc(var(--dms-layout-panel-height) * 2);
    overflow: auto;
    padding: var(--dms-space-2);
  }

  .dms-search-popover {
    width: min(calc(100vw - var(--dms-space-4)), var(--dms-layout-command-width));
    max-height: min(70vh, calc(100dvh - var(--dms-layout-topbar-height) - var(--dms-space-4)));
    overflow: hidden;
  }

  .dms-search-popover:not([hidden]) {
    display: flex;
    flex-direction: column;
  }

  .dms-search-popover[hidden] {
    display: none !important;
  }

  .dms-search-popover .dms-command__results {
    flex: 1 1 auto;
    max-height: 50vh;
    overflow-y: auto;
  }

  /* Dialog and command palette */
  .dms-dialog {
    width: min(var(--dms-layout-content-narrow), calc(100vw - var(--dms-space-8)));
    max-height: calc(100dvh - var(--dms-space-12));
    padding: 0;
    border: var(--dms-border-width) solid var(--dms-border);
    border-radius: var(--dms-radius-lg);
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-dialog);
    color: var(--dms-text-primary);
  }

  .dms-dialog--sm {
    width: min(var(--dms-layout-command-width), calc(100vw - var(--dms-space-8)));
  }

  .dms-dialog[open] {
    display: flex;
    animation: dms-dialog-in var(--dms-duration-base) var(--dms-easing-standard);
  }

  .dms-dialog::backdrop {
    background: var(--dms-scrim);
    -webkit-backdrop-filter: blur(var(--dms-space-1));
    backdrop-filter: blur(var(--dms-space-1));
  }

  .dms-dialog__surface {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  .dms-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dms-space-3);
    padding: var(--dms-space-4) var(--dms-space-3) var(--dms-space-2) var(--dms-space-6);
  }

  .dms-dialog__body {
    min-height: 0;
    overflow: auto;
    padding: var(--dms-space-2) var(--dms-space-6) var(--dms-space-6);
    color: var(--dms-text-secondary);
  }

  .dms-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--dms-space-2);
    padding: var(--dms-space-3) var(--dms-space-6);
    border-block-start: var(--dms-border-width) solid var(--dms-border);
  }

  .dms-command {
    margin-block-start: var(--dms-space-12);
  }

  .dms-command__search {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--dms-space-2);
    height: var(--dms-space-12);
    padding-inline: var(--dms-space-4);
    border-block-end: var(--dms-border-width) solid var(--dms-border);
    color: var(--dms-text-secondary);
  }

  .dms-command__search:focus-within {
    box-shadow: inset 0 calc(var(--dms-focus-ring-width) * -1) 0 var(--dms-action-primary-end);
  }

  .dms-command__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--dms-text-primary);
    outline: none;
  }

  .dms-command__input::placeholder {
    color: var(--dms-text-muted);
  }

  .dms-command__results {
    min-height: 0;
    margin: 0;
    padding: var(--dms-space-2);
    overflow: auto;
    list-style: none;
  }

  .dms-command__item {
    display: flex;
    align-items: center;
    gap: var(--dms-space-2);
    min-height: var(--dms-control-height-md);
    padding-inline: var(--dms-space-2);
    border-radius: var(--dms-radius-sm);
    color: var(--dms-text-primary);
    text-decoration: none;
  }

  .dms-command__item:hover,
  .dms-command__item:focus-visible {
    background: var(--dms-surface-hover);
  }

  .dms-command__item:focus-visible {
    outline-offset: calc(var(--dms-focus-ring-width) * -1);
  }

  .dms-command__meta {
    margin-inline-start: auto;
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-small-weight);
    --dms-icon-stroke: var(--dms-font-small-icon-stroke);
  }

  .dms-command__empty {
    padding: var(--dms-space-6);
    color: var(--dms-text-secondary);
    text-align: center;
  }

  /* Contextual navigation */
  .dms-nav {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-4);
  }

  .dms-nav__section-title {
    margin-block-end: var(--dms-space-1);
    padding-inline: var(--dms-space-2);
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-small-weight);
    --dms-icon-stroke: var(--dms-font-small-icon-stroke);
    line-height: var(--dms-font-small-line-height);
  }

  .dms-nav__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dms-nav__link {
    display: flex;
    align-items: center;
    gap: var(--dms-space-2);
    min-height: var(--dms-control-height-md);
    padding-inline: var(--dms-space-2);
    border-radius: var(--dms-radius-sm);
    color: var(--dms-text-secondary);
    text-decoration: none;
  }

  .dms-nav__link:hover {
    background: var(--dms-surface-hover);
    color: var(--dms-text-primary);
  }

  .dms-nav__link[aria-current="page"],
  .dms-nav__link[aria-current="true"] {
    position: relative;
    background: var(--dms-surface-selected);
    color: var(--dms-text-primary);
    font-weight: var(--dms-font-body-weight);
  }

  .dms-nav__link[aria-current="page"]::before,
  .dms-nav__link[aria-current="true"]::before {
    content: "";
    position: absolute;
    inset-block: var(--dms-space-1);
    inset-inline-start: 0;
    width: var(--dms-layout-active-indicator);
    border-radius: var(--dms-radius-full);
    background: linear-gradient(to bottom, var(--dms-action-primary-start), var(--dms-action-primary-end));
  }

  .dms-nav__link:focus-visible {
    outline-offset: calc(var(--dms-focus-ring-width) * -1);
  }

  .dms-nav__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Tabs */
  .dms-tabs__list {
    display: flex;
    gap: var(--dms-space-1);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-block-end: var(--dms-border-width) solid var(--dms-border);
  }

  .dms-tabs__list::-webkit-scrollbar {
    display: none;
  }

  .dms-tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--dms-space-2);
    height: var(--dms-control-height-md);
    padding-inline: var(--dms-space-3);
    border: 0;
    background: transparent;
    color: var(--dms-text-secondary);
    white-space: nowrap;
    cursor: pointer;
  }

  .dms-tabs__tab:hover,
  .dms-tabs__tab[aria-selected="true"] {
    color: var(--dms-text-primary);
  }

  .dms-tabs__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline: var(--dms-space-2);
    inset-block-end: calc(var(--dms-border-width) * -1);
    height: var(--dms-layout-active-indicator);
    background: linear-gradient(to right, var(--dms-action-primary-start), var(--dms-action-primary-end));
  }

  .dms-tabs__tab:focus-visible {
    outline-offset: calc(var(--dms-focus-ring-width) * -1);
  }

  .dms-tabs__panel {
    padding-block-start: var(--dms-space-3);
  }

  /* Data table */
  .dms-data-table {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: var(--dms-border-width) solid var(--dms-border);
    border-radius: var(--dms-radius-lg);
    background: var(--dms-background-white);
  }

  .dms-data-table__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dms-space-2);
    padding: var(--dms-space-3);
    border-block-end: var(--dms-border-width) solid var(--dms-border);
  }

  .dms-data-table__bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dms-space-2);
    padding: var(--dms-space-2) var(--dms-space-3);
    border-block-end: var(--dms-border-width) solid var(--dms-border);
    background: var(--dms-surface-selected);
  }

  .dms-data-table__selected {
    margin-inline-end: auto;
  }

  .dms-data-table__scroll {
    overflow-x: auto;
  }

  .dms-data-table__scroll:focus-visible {
    outline-offset: calc(var(--dms-focus-ring-width) * -1);
  }

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

  .dms-table th {
    height: var(--dms-control-height-lg);
    padding-inline: var(--dms-space-3);
    border-block-end: var(--dms-border-width) solid var(--dms-border);
    background: var(--dms-background);
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-body-weight);
    --dms-icon-stroke: var(--dms-font-body-icon-stroke);
    line-height: var(--dms-font-small-line-height);
    text-align: start;
    white-space: nowrap;
  }

  .dms-table td {
    height: var(--dms-control-height-lg);
    padding: var(--dms-space-2) var(--dms-space-3);
    border-block-end: var(--dms-border-width) solid var(--dms-border);
    vertical-align: middle;
  }

  .dms-table tbody tr:last-child td {
    border-block-end: 0;
  }

  .dms-table tbody tr:hover {
    background: var(--dms-background);
  }

  .dms-table tbody tr[data-dms-selected] {
    background: var(--dms-surface-selected);
  }

  .dms-table .dms-table__numeric {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }

  .dms-table .dms-table__select {
    width: calc(var(--dms-space-4) + var(--dms-space-3) * 2);
  }

  .dms-table .dms-table__actions,
  th.dms-table__actions,
  td.dms-table__actions {
    text-align: end;
    white-space: nowrap;
    width: 1%;
  }

  .dms-table__actions .dms-dropdown {
    display: inline-flex;
    justify-content: flex-end;
  }

  .dms-table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--dms-space-1);
    margin-inline: calc(var(--dms-space-1) * -1);
    padding-inline: var(--dms-space-1);
    border-radius: var(--dms-radius-sm);
    color: inherit;
    text-decoration: none;
  }

  .dms-table__sort:hover,
  th[aria-sort="ascending"] .dms-table__sort,
  th[aria-sort="descending"] .dms-table__sort {
    color: var(--dms-text-primary);
  }

  .dms-data-table__state {
    border-block-start: 0;
  }

  .dms-data-table__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dms-space-2);
    padding: var(--dms-space-2) var(--dms-space-3);
    border-block-start: var(--dms-border-width) solid var(--dms-border);
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-small-weight);
    --dms-icon-stroke: var(--dms-font-small-icon-stroke);
  }

  .dms-pagination,
  .dms-pagination__list {
    display: flex;
    align-items: center;
    gap: var(--dms-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dms-pagination__link {
    display: inline-grid;
    place-items: center;
    min-width: var(--dms-control-height-sm);
    height: var(--dms-control-height-sm);
    padding-inline: var(--dms-space-1);
    border: var(--dms-border-width) solid transparent;
    border-radius: var(--dms-radius-sm);
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-body-size);
    text-decoration: none;
  }

  .dms-pagination__link:hover {
    background: var(--dms-surface-hover);
    color: var(--dms-text-primary);
  }

  .dms-pagination__link[aria-current="page"] {
    border-color: var(--dms-border);
    color: var(--dms-text-primary);
  }

  .dms-pagination__link[aria-disabled="true"] {
    color: var(--dms-text-muted);
    pointer-events: none;
  }

  /* Feedback: states, loading, toast */
  .dms-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dms-space-2);
    padding: var(--dms-space-10) var(--dms-space-6);
    color: var(--dms-text-secondary);
    text-align: center;
  }

  .dms-state--compact {
    padding: var(--dms-space-6) var(--dms-space-4);
  }

  .dms-state__illustration {
    width: calc(var(--dms-space-12) * 3);
    max-width: 100%;
    margin-block-end: var(--dms-space-2);
  }

  .dms-state--compact .dms-state__illustration {
    width: calc(var(--dms-space-12) * 2);
  }

  .dms-state__icon {
    display: grid;
    place-items: center;
    width: var(--dms-space-10);
    height: var(--dms-space-10);
    margin-block-end: var(--dms-space-1);
    border-radius: var(--dms-radius-full);
    background: var(--dms-background);
    color: var(--dms-text-secondary);
  }

  .dms-state--success .dms-state__icon {
    background: var(--dms-success-subtle);
    color: var(--dms-success);
  }

  .dms-state__title {
    color: var(--dms-text-primary);
  }

  .dms-state--compact .dms-state__title {
    font-size: var(--dms-font-body-size);
    line-height: var(--dms-font-body-line-height);
  }

  .dms-state__description {
    max-width: var(--dms-layout-command-width);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-small-weight);
    --dms-icon-stroke: var(--dms-font-small-icon-stroke);
    line-height: var(--dms-font-small-line-height);
  }

  .dms-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dms-space-2);
    margin-block-start: var(--dms-space-2);
  }

  .dms-skeleton-group {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-2);
  }

  .dms-skeleton {
    display: block;
    height: var(--dms-space-3);
    border-radius: var(--dms-radius-sm);
    background: linear-gradient(90deg, var(--dms-surface-hover) 25%, var(--dms-border) 50%, var(--dms-surface-hover) 75%);
    background-size: 200% 100%;
    animation: dms-shimmer calc(var(--dms-duration-slow) * 5) ease-in-out infinite;
  }

  .dms-skeleton:last-child {
    width: 60%;
  }

  .dms-progress {
    display: block;
    width: 100%;
    height: var(--dms-space-1);
    overflow: hidden;
    border: 0;
    border-radius: var(--dms-radius-full);
    background: var(--dms-border);
    appearance: none;
  }

  .dms-progress::-webkit-progress-bar {
    background: var(--dms-border);
  }

  .dms-progress::-webkit-progress-value {
    background: linear-gradient(to right, var(--dms-action-primary-start), var(--dms-action-primary-end));
  }

  .dms-progress::-moz-progress-bar {
    background: linear-gradient(to right, var(--dms-action-primary-start), var(--dms-action-primary-end));
  }

  .dms-toast-region {
    position: fixed;
    inset-block-end: var(--dms-space-4);
    inset-inline-end: var(--dms-space-4);
    z-index: var(--dms-z-toast);
    width: min(var(--dms-layout-secondary-width), calc(100vw - var(--dms-space-8)));
    pointer-events: none;
  }

  .dms-toast-region__list {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-2);
  }

  .dms-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--dms-space-3);
    padding: var(--dms-space-3);
    border: var(--dms-border-width) solid var(--dms-border);
    border-inline-start: var(--dms-layout-active-indicator) solid var(--dms-info);
    border-radius: var(--dms-radius-md);
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-md);
    pointer-events: auto;
    animation: dms-rise var(--dms-duration-base) var(--dms-easing-standard);
  }

  .dms-toast[data-dms-leaving] {
    animation: dms-fade-out var(--dms-duration-fast) var(--dms-easing-exit) forwards;
  }

  .dms-toast__icon {
    display: inline-flex;
    margin-block-start: var(--dms-space-1);
    color: var(--dms-info);
  }

  .dms-toast--success { border-inline-start-color: var(--dms-success); }
  .dms-toast--warning { border-inline-start-color: var(--dms-warning); }
  .dms-toast--danger { border-inline-start-color: var(--dms-danger); }
  .dms-toast--success .dms-toast__icon { color: var(--dms-success); }
  .dms-toast--warning .dms-toast__icon { color: var(--dms-warning); }
  .dms-toast--danger .dms-toast__icon { color: var(--dms-danger); }

  .dms-toast__message {
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-small-weight);
    --dms-icon-stroke: var(--dms-font-small-icon-stroke);
    line-height: var(--dms-font-small-line-height);
  }

  @media (max-width: 767.98px) {
    .dms-page {
      padding: var(--dms-space-4);
    }

    .dms-toast-region {
      inset-block-end: calc(var(--dms-layout-mobile-nav-height) + var(--dms-space-3) + env(safe-area-inset-bottom));
      inset-inline: var(--dms-space-3);
      width: auto;
    }

    .dms-popover {
      position: fixed;
      inset-block-start: calc(var(--dms-layout-topbar-height) + var(--dms-space-1));
      inset-inline: var(--dms-space-2);
      width: auto;
    }

    .dms-dialog {
      width: 100%;
      max-width: 100%;
      margin: auto 0 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }

    .dms-command {
      margin-block-start: var(--dms-space-2);
      margin-block-end: auto;
      border-radius: var(--dms-radius-lg);
    }

    .dms-table--stack thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }

    .dms-table--stack,
    .dms-table--stack tbody,
    .dms-table--stack tr,
    .dms-table--stack td {
      display: block;
      width: 100%;
    }

    .dms-table--stack tr {
      padding: var(--dms-space-2) var(--dms-space-3);
      border-block-end: var(--dms-border-width) solid var(--dms-border);
    }

    .dms-table--stack tbody tr:last-child {
      border-block-end: 0;
    }

    .dms-table--stack td,
    .dms-table--stack .dms-table__numeric {
      display: flex;
      justify-content: space-between;
      gap: var(--dms-space-3);
      height: auto;
      padding: var(--dms-space-1) 0;
      border: 0;
      text-align: end;
    }

    .dms-table--stack td::before {
      content: attr(data-label);
      color: var(--dms-text-secondary);
      font-size: var(--dms-font-small-size);
      text-align: start;
    }

    .dms-table--stack .dms-table__select {
      width: auto;
    }
  }

  @keyframes dms-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes dms-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
  }

  @keyframes dms-rise {
    from { opacity: 0; transform: translateY(var(--dms-space-2)); }
  }

  @keyframes dms-fade-out {
    to { opacity: 0; }
  }

  @keyframes dms-dialog-in {
    from { opacity: 0; transform: translateY(var(--dms-space-2)); }
  }

  .dms-text--title {
    font-size: var(--dms-font-title-size);
    font-weight: var(--dms-font-title-weight);
    line-height: var(--dms-font-title-line-height);
    color: var(--dms-text-primary);
  }

  .dms-text--body {
    font-size: var(--dms-font-body-size);
    font-weight: var(--dms-font-body-weight);
    line-height: var(--dms-font-body-line-height);
    color: var(--dms-text-primary);
  }

  .dms-text--small {
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-small-weight);
    line-height: var(--dms-font-small-line-height);
    color: var(--dms-text-secondary);
  }

  /* Sub-tabs with status dot indicator (Clerk-style horizontal subnav) */
  .dms-subtabs {
    display: flex;
    align-items: center;
    gap: var(--dms-space-2);
    border-block-end: var(--dms-border-width) solid var(--dms-border);
    padding-block-end: var(--dms-space-2);
    margin-block-end: var(--dms-space-4);
    overflow-x: auto;
  }

  .dms-subtab {
    display: inline-flex;
    align-items: center;
    gap: var(--dms-space-2);
    padding: var(--dms-space-1) var(--dms-space-3);
    border-radius: var(--dms-radius-md);
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-body-weight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dms-duration-fast) var(--dms-easing-standard), background-color var(--dms-duration-fast) var(--dms-easing-standard);
  }

  .dms-subtab:hover {
    color: var(--dms-text-primary);
    background: var(--dms-surface-hover);
  }

  .dms-subtab[aria-current="true"],
  .dms-subtab--active {
    color: var(--dms-text-primary);
    font-weight: var(--dms-font-title-weight);
    background: var(--dms-surface-selected);
  }

  .dms-subtab__dot {
    width: var(--dms-space-2);
    height: var(--dms-space-2);
    border-radius: var(--dms-radius-full);
    background: var(--dms-action-primary-start);
  }

  .dms-subtab__dot--muted {
    background: var(--dms-text-muted);
  }

  /* User profile popover menu (Clerk-style top-right account menu) */
  .dms-user-popover {
    width: var(--dms-layout-sidebar-width);
    padding: var(--dms-space-3);
  }

  .dms-user-popover__header {
    display: flex;
    align-items: center;
    gap: var(--dms-space-3);
    padding-block-end: var(--dms-space-3);
  }

  .dms-user-popover__avatar {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--dms-space-8);
    height: var(--dms-space-8);
    border-radius: var(--dms-radius-md);
    background: linear-gradient(to right, var(--dms-brand-start), var(--dms-brand-end));
    color: var(--dms-text-white);
    font-size: var(--dms-font-body-size);
    font-weight: var(--dms-font-title-weight);
  }

  .dms-user-popover__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .dms-user-popover__name {
    overflow: hidden;
    color: var(--dms-text-primary);
    font-size: var(--dms-font-body-size);
    font-weight: var(--dms-font-title-weight);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dms-user-popover__email {
    overflow: hidden;
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dms-user-popover__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dms-space-2);
    margin-block: var(--dms-space-2);
  }

  .dms-user-popover__actions .dms-button {
    justify-content: center;
    font-size: var(--dms-font-small-size);
  }

  .dms-user-popover__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dms-space-1);
    margin-block-start: var(--dms-space-2);
    padding-block: var(--dms-space-2);
    border-radius: var(--dms-radius-sm);
    background: var(--dms-surface-hover);
    color: var(--dms-text-muted);
    font-size: var(--dms-font-small-size);
  }

  /* ==========================================================================
     MEDIA VIEWERS, PLAYERS & EDITORS (Fase 1 Professional Suite)
     ========================================================================== */

  .dms-workspace-chassis {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-lg);
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-emboss-card);
  }

  .dms-workspace-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dms-space-2);
    padding: var(--dms-space-2) var(--dms-space-3);
    border-block-end: 1px solid var(--dms-border);
    background: var(--dms-background);
  }

  .dms-workspace-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: var(--dms-space-1);
  }

  .dms-workspace-toolbar__separator {
    display: inline-block;
    width: 1px;
    height: 1.25rem;
    margin-inline: var(--dms-space-1);
    background: var(--dms-border);
  }

  .dms-workspace-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dms-space-2);
    padding: var(--dms-space-2) var(--dms-space-3);
    border-block-start: 1px solid var(--dms-border);
    background: var(--dms-background);
    color: var(--dms-text-secondary);
    font-size: var(--dms-font-small-size);
  }

  /* --- 1. TIPTAP RICH TEXT EDITOR --- */
  .dms-tiptap-container {
    display: flex;
    flex-direction: column;
    min-height: 24rem;
  }

  .dms-tiptap-content {
    flex: 1;
    min-height: 18rem;
    padding: var(--dms-space-5);
    color: var(--dms-text-primary);
    font-size: var(--dms-font-body-size);
    line-height: 1.6;
    outline: none;
    overflow-y: auto;
  }

  .dms-tiptap-content:empty::before {
    content: attr(data-placeholder);
    color: var(--dms-text-muted);
  }

  .dms-tiptap-content h1,
  .dms-tiptap-content h2,
  .dms-tiptap-content h3 {
    margin-block-start: var(--dms-space-4);
    margin-block-end: var(--dms-space-2);
    color: var(--dms-text-primary);
    font-weight: var(--dms-font-title-weight);
  }

  .dms-tiptap-content blockquote {
    margin-inline: 0;
    margin-block: var(--dms-space-3);
    padding-inline-start: var(--dms-space-3);
    border-inline-start: calc(var(--dms-border-width) * 3) solid var(--dms-action-primary-end);
    color: var(--dms-text-secondary);
    font-style: italic;
  }

  .dms-tiptap-content .dms-code-block {
    margin-block: var(--dms-space-3);
    padding: var(--dms-space-3);
    border-radius: var(--dms-radius-sm);
    background: var(--dms-surface-hover);
    color: var(--dms-text-primary);
    font-family: var(--dms-font-family-mono);
    font-size: var(--dms-font-small-size);
    overflow-x: auto;
  }

  .dms-task-item {
    display: flex;
    align-items: center;
    gap: var(--dms-space-2);
    margin-block: var(--dms-space-1);
  }

  /* --- 2. PDF.JS VIEWER & REVIEW --- */
  .dms-pdf-chassis {
    display: flex;
    flex-direction: column;
    height: 48rem;
  }

  .dms-pdf-main {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    background: var(--dms-surface-hover);
  }

  .dms-pdf-viewport {
    flex: 1;
    overflow: auto;
    display: flex;
    padding: var(--dms-space-4);
  }

  /* margin: auto centers the page without clipping it when zoomed past the viewport. */
  .dms-pdf-viewport > * {
    margin: auto;
  }

  .dms-pdf-page-container {
    position: relative;
    box-shadow: var(--dms-shadow-lg);
    border-radius: var(--dms-radius-sm);
    background: var(--dms-background-white);
    transition: transform var(--dms-duration-fast) ease;
  }

  .dms-pdf-canvas {
    display: block;
  }

  /* --- 3. VIDEO.JS & AUDIO PLAYER --- */
  .dms-player-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--dms-radius-lg);
    background: var(--dms-text-primary);
    aspect-ratio: 16 / 9;
    max-height: 40rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dms-player-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .dms-player-big-play {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--dms-radius-full);
    background: var(--dms-action-primary-end);
    color: var(--dms-text-on-primary);
    border: 0;
    cursor: pointer;
    box-shadow: var(--dms-shadow-lg);
    transition: transform var(--dms-duration-fast) ease, opacity var(--dms-duration-fast) ease;
  }

  .dms-player-big-play:hover {
    transform: scale(1.1);
  }

  .dms-player-controls {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-2);
    padding: var(--dms-space-3);
    background: linear-gradient(to top, var(--dms-scrim) 0%, transparent 100%);
    color: var(--dms-text-white);
  }

  .dms-player-progress {
    width: 100%;
    height: 0.35rem;
    -webkit-appearance: none;
    appearance: none;
    background: var(--dms-border);
    border-radius: var(--dms-radius-full);
    outline: none;
    cursor: pointer;
  }

  .dms-player-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: var(--dms-radius-full);
    background: var(--dms-action-primary-start);
    cursor: pointer;
  }

  .dms-player-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dms-space-2);
  }

  .dms-player-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--dms-space-1);
    background: transparent;
    border: 0;
    color: var(--dms-text-white);
    cursor: pointer;
    border-radius: var(--dms-radius-sm);
    transition: background var(--dms-duration-fast) ease;
  }

  .dms-player-btn:hover {
    background: var(--dms-surface-hover);
    color: var(--dms-text-primary);
  }

  .dms-player-time {
    font-size: var(--dms-font-small-size);
    font-family: var(--dms-font-family-mono);
    color: var(--dms-text-white);
    white-space: nowrap;
  }

  .dms-player-volume-slider {
    width: 4rem;
    cursor: pointer;
  }

  /* --- 4. OPENSEADRAGON DEEP ZOOM --- */
  .dms-deep-zoom-chassis {
    position: relative;
    height: 38rem;
    overflow: hidden;
    background: var(--dms-surface-hover);
    user-select: none;
  }

  .dms-deep-zoom-viewport {
    width: 100%;
    height: 100%;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dms-deep-zoom-canvas {
    transform-origin: center center;
    transition: transform 50ms linear;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    box-shadow: var(--dms-shadow-md);
  }

  .dms-deep-zoom-floating-pill {
    position: absolute;
    inset-inline-end: var(--dms-space-4);
    inset-block-start: var(--dms-space-4);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--dms-space-1);
    padding: var(--dms-space-1);
    border-radius: var(--dms-radius-full);
    background: var(--dms-background-white);
    border: 1px solid var(--dms-border);
    box-shadow: var(--dms-shadow-md);
  }

  .dms-deep-zoom-minimap {
    position: absolute;
    inset-inline-end: var(--dms-space-4);
    inset-block-end: var(--dms-space-4);
    z-index: 5;
    width: 8rem;
    height: 6rem;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-sm);
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-md);
    overflow: hidden;
  }

  .dms-deep-zoom-minimap-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
  }

  .dms-deep-zoom-minimap-lens {
    position: absolute;
    inset-block-start: 10%;
    inset-inline-start: 10%;
    width: 40%;
    height: 40%;
    border: var(--dms-control-border-width) solid var(--dms-action-primary-end);
    background: var(--dms-surface-selected);
    pointer-events: none;
  }

  /* --- 5. PHOTOSWIPE GALLERY & LIGHTBOX --- */
  .dms-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--dms-space-4);
  }

  .dms-gallery-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-md);
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-sm);
    cursor: pointer;
    transition: transform var(--dms-duration-fast) ease, box-shadow var(--dms-duration-fast) ease;
  }

  .dms-gallery-card:hover {
    transform: translateY(calc(var(--dms-space-1) / -2));
    box-shadow: var(--dms-shadow-md);
  }

  .dms-gallery-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
  }

  .dms-gallery-card__info {
    padding: var(--dms-space-2);
  }

  .dms-gallery-card__title {
    font-size: var(--dms-font-small-size);
    font-weight: var(--dms-font-title-weight);
    color: var(--dms-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dms-lightbox-dialog {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: 95vw;
    max-height: 95vh;
    outline: none;
  }

  .dms-lightbox-dialog::backdrop {
    background: var(--dms-scrim);
    backdrop-filter: blur(var(--dms-space-2));
  }

  .dms-lightbox-chassis {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 75rem;
    max-height: 90vh;
    border-radius: var(--dms-radius-lg);
    background: var(--dms-background-white);
    overflow: hidden;
    box-shadow: var(--dms-shadow-dialog);
  }

  .dms-lightbox-stage {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    align-items: center;
    justify-content: center;
    background: var(--dms-background);
    min-height: 24rem;
  }

  .dms-lightbox-main-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
  }

  .dms-lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--dms-radius-full);
    background: var(--dms-background-white);
    border: 1px solid var(--dms-border);
    box-shadow: var(--dms-shadow-md);
    cursor: pointer;
  }

  .dms-lightbox-nav-btn--prev { inset-inline-start: var(--dms-space-4); }
  .dms-lightbox-nav-btn--next { inset-inline-end: var(--dms-space-4); }

  .dms-lightbox-metadata-sidebar {
    width: 18rem;
    border-inline-start: 1px solid var(--dms-border);
    background: var(--dms-background-white);
    padding: var(--dms-space-4);
    overflow-y: auto;
  }

  /* --- 6. SVG.JS INTERACTIVE VIEWER --- */
  .dms-svg-chassis {
    position: relative;
    height: 34rem;
    overflow: hidden;
    background: var(--dms-surface-hover);
    background-image: radial-gradient(var(--dms-border) 1px, transparent 1px);
    background-size: 1.25rem 1.25rem;
  }

  .dms-svg-viewport {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
  }

  .dms-svg-container {
    transform-origin: center center;
    transition: transform 60ms linear;
  }

  .dms-svg-inspected {
    stroke: var(--dms-action-primary-start) !important;
    stroke-width: var(--dms-focus-ring-width) !important;
    filter: drop-shadow(0 0 var(--dms-radius-sm) var(--dms-action-primary-start));
  }

  .dms-svg-inspector-card {
    position: absolute;
    inset-inline-start: var(--dms-space-4);
    inset-block-end: var(--dms-space-4);
    z-index: 5;
    padding: var(--dms-space-3);
    border-radius: var(--dms-radius-md);
    background: var(--dms-background-white);
    border: 1px solid var(--dms-border);
    box-shadow: var(--dms-shadow-md);
    font-size: var(--dms-font-small-size);
  }

  /* --- 7. DMS 365 (ONLYOFFICE DOCSAPI) STAGE --- */
  .dms-office-stage {
    min-height: 32rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dms-surface-hover);
    padding: var(--dms-space-6);
  }

  /* --- 8. MONACO CODE & CONFIG EDITOR --- */
  .dms-monaco-chassis {
    display: flex;
    flex-direction: column;
    min-height: 24rem;
  }

  .dms-monaco-body {
    position: relative;
    flex: 1;
    min-height: 20rem;
    overflow: hidden;
    background: var(--dms-background-white);
  }

  .dms-monaco-fallback {
    width: 100%;
    min-height: 20rem;
    padding: var(--dms-space-4);
    box-sizing: border-box;
    border: 0;
    margin: 0;
    font-family: var(--dms-font-family-mono);
    font-size: var(--dms-font-small-size);
    line-height: 1.5;
    color: var(--dms-text-primary);
    background: var(--dms-background-white);
    outline: none;
    resize: vertical;
    white-space: pre-wrap;
    word-break: break-all;
    tab-size: 2;
  }

  [data-dms-theme="dark"] .dms-monaco-fallback {
    background: var(--dms-surface-card);
    color: var(--dms-text-primary);
  }

  /* --- 9. DOCUMENT SPLIT & ATTACHMENT VIEWER --- */
  .dms-document-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--dms-space-6);
    align-items: start;
    transition: grid-template-columns var(--dms-duration-normal) var(--dms-ease-default);
  }

  .dms-document-split[data-viewer-open="false"] {
    grid-template-columns: minmax(0, 1fr) 0;
  }

  .dms-document-split[data-viewer-open="false"] .dms-document-viewer-panel {
    display: none;
  }

  .dms-document-split__main {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-5);
    min-width: 0;
  }

  .dms-document-content-card {
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-lg);
    background: var(--dms-background-white);
    padding: var(--dms-space-6);
    box-shadow: var(--dms-shadow-card);
  }

  [data-dms-theme="dark"] .dms-document-content-card {
    background: var(--dms-surface-card);
  }

  .dms-document-content-body {
    color: var(--dms-text-primary);
    font-size: var(--dms-font-size-base);
    line-height: 1.65;
  }

  .dms-attachment-section {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-3);
  }

  .dms-attachment-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dms-space-4);
    padding: var(--dms-space-4);
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-lg);
    background: var(--dms-background-white);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all var(--dms-duration-fast) var(--dms-ease-default);
  }

  .dms-attachment-card:hover {
    border-color: var(--dms-action-primary-start);
    box-shadow: var(--dms-shadow-md);
    background: var(--dms-surface-hover);
  }

  .dms-attachment-card--active {
    border-color: var(--dms-action-primary-start);
    box-shadow: 0 0 0 1px var(--dms-action-primary-start);
    background: var(--dms-surface-brand-subtle);
  }

  [data-dms-theme="dark"] .dms-attachment-card {
    background: var(--dms-surface-card);
  }

  [data-dms-theme="dark"] .dms-attachment-card:hover {
    background: var(--dms-surface-hover);
  }

  [data-dms-theme="dark"] .dms-attachment-card--active {
    background: var(--dms-surface-brand-subtle);
  }

  .dms-attachment-card__start {
    display: flex;
    align-items: center;
    gap: var(--dms-space-3);
    min-width: 0;
  }

  .dms-attachment-card__icon-wrap {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--dms-space-11);
    height: var(--dms-space-11);
    border-radius: var(--dms-radius-md);
    background: var(--dms-surface-brand-subtle);
    border: 1px solid var(--dms-border);
    color: var(--dms-action-primary-start);
  }

  .dms-attachment-card__details {
    display: flex;
    flex-direction: column;
    gap: var(--dms-space-1);
    min-width: 0;
  }

  .dms-attachment-card__title {
    font-size: var(--dms-font-size-base);
    font-weight: var(--dms-font-weight-medium);
    color: var(--dms-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dms-attachment-card__subtitle {
    font-size: var(--dms-font-small-size);
    color: var(--dms-text-muted);
  }

  .dms-attachment-card__actions {
    display: flex;
    align-items: center;
    gap: var(--dms-space-2);
    flex: none;
  }

  .dms-document-viewer-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-lg);
    background: var(--dms-background-white);
    box-shadow: var(--dms-shadow-card);
    overflow: hidden;
    position: sticky;
    top: var(--dms-space-2);
    max-height: calc(100vh - var(--dms-layout-topbar-height) - var(--dms-space-6));
    min-height: 32rem;
  }

  [data-dms-theme="dark"] .dms-document-viewer-panel {
    background: var(--dms-surface-card);
  }

  .dms-document-viewer-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dms-space-3) var(--dms-space-4);
    border-bottom: 1px solid var(--dms-border);
    background: var(--dms-surface-hover);
    gap: var(--dms-space-3);
    min-height: var(--dms-space-12);
    box-sizing: border-box;
  }

  [data-dms-theme="dark"] .dms-document-viewer-panel__header {
    background: var(--dms-surface-card-subtle);
  }

  .dms-document-viewer-panel__title-wrap {
    display: flex;
    align-items: center;
    gap: var(--dms-space-2);
    min-width: 0;
  }

  .dms-document-viewer-panel__title {
    font-size: var(--dms-font-size-base);
    font-weight: var(--dms-font-weight-semibold);
    color: var(--dms-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dms-document-viewer-panel__actions {
    display: flex;
    align-items: center;
    gap: var(--dms-space-2);
    flex: none;
  }

  .dms-document-viewer-panel__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    position: relative;
    background: var(--dms-background-white);
  }

  [data-dms-theme="dark"] .dms-document-viewer-panel__body {
    background: var(--dms-surface-card);
  }

  .dms-document-viewer-panel--fullscreen {
    position: fixed;
    inset: 0;
    z-index: var(--dms-z-dialog);
    max-height: none;
    border-radius: 0;
  }

  @media (max-width: 768px) {
    .dms-document-split {
      display: flex;
      flex-direction: column;
    }

    .dms-document-viewer-panel {
      position: relative;
      top: auto;
      max-height: none;
      min-height: 24rem;
      width: 100%;
    }
  }
}

.dms-card--table > .dms-card__body { min-height: 0 !important; }
.dms-card__body { min-height: 0 !important; }