/* Interactive states mirror the static Figma hover/pressed variants. */
#componentPreview {
  --interaction-primary: #2990ff;
  --interaction-hover: #4ba2ff;
  --interaction-active: #2279d6;
  --interaction-surface-hover: rgba(0, 0, 0, .04);
  --interaction-surface-active: rgba(0, 0, 0, .08);
}

/* Buttons */
.lan-button.state-default:not(:disabled) { cursor: pointer; transition: color .12s, border-color .12s, background-color .12s; }
.lan-button.button-primary.state-default:is(:hover,:focus-visible) { --button-bg: var(--interaction-hover) !important; }
.lan-button.button-primary.state-default:active { --button-bg: var(--interaction-active) !important; }
.lan-button.button-secondary.state-default:is(:hover,:focus-visible) { --button-text: #2990ff !important; --button-border: #4ba2ff !important; }
.lan-button.button-secondary.state-default:active { --button-text: #2279d6 !important; --button-border: #2279d6 !important; }
.lan-button:is(.button-dashed,.button-ghost,.button-addDashed).state-default:is(:hover,:focus-visible) { --button-bg: #dfeeff !important; }
.lan-button:is(.button-dashed,.button-ghost,.button-addDashed).state-default:active { --button-bg: #dfeeff !important; --button-text: #2279d6 !important; --button-border: #2279d6 !important; }
.lan-button.button-dropdown.state-default:is(:hover,:focus-visible) { --button-text: #2990ff !important; --button-border: #4ba2ff !important; }
.lan-button.button-dropdown.state-default:active { --button-text: #2279d6 !important; --button-border: #2279d6 !important; }
.lan-button.button-dropdown.state-default:is(:hover,:focus-visible) .button-arrow { filter: brightness(0) saturate(100%) invert(51%) sepia(97%) saturate(2435%) hue-rotate(190deg) brightness(101%) contrast(101%); }
.lan-button.button-dropdown.state-default:active .button-arrow { filter: brightness(0) saturate(100%) invert(42%) sepia(86%) saturate(1281%) hue-rotate(178deg) brightness(83%) contrast(96%); transform: rotate(-90deg); }
.lan-button.text-only.state-default:is(:hover,:focus-visible) { --button-bg: var(--interaction-surface-hover) !important; }
.lan-button.text-only.state-default:active { --button-bg: var(--interaction-surface-hover) !important; --button-text: #2279d6 !important; }

/* Switches */
.lan-switch[data-state="default"]:not(:disabled):is(:hover,:focus-visible) { background: #4ba2ff; }
.lan-switch[data-state="default"]:not(:disabled):active { background: #2279d6; }

/* Inputs and filter controls */
.di-control.di-state-default,
.lan-filter-control:not(.filter-state-hover):not(.filter-state-active):not(.filter-state-disabled),
.filter-trigger-default { transition: color .12s, border-color .12s, background-color .12s; }
.di-control.di-state-default:is(:hover,:focus-visible),
.lan-filter-control:not(.filter-state-hover):not(.filter-state-active):not(.filter-state-disabled):hover { --di-border: #4ba2ff; --di-color: #333; --filter-border: #4ba2ff; --filter-color: #333; }
.di-control.di-state-default:active,
.lan-filter-control:not(.filter-state-hover):not(.filter-state-active):not(.filter-state-disabled):active { --di-border: #2990ff; --di-color: #333; --filter-border: #2279d6; --filter-color: #333; }
.filter-trigger-default:is(:hover,:focus-visible) { color: #4ba2ff; border-color: #4ba2ff; }
.filter-trigger-default:active { color: #2279d6; border-color: #2279d6; }
.filter-trigger-default:is(:hover,:focus-visible) > .filter-svg:first-child { filter: brightness(0) saturate(100%) invert(55%) sepia(95%) saturate(1617%) hue-rotate(185deg) brightness(102%) contrast(101%); }
.filter-trigger-default:active > .filter-svg:first-child { filter: brightness(0) saturate(100%) invert(42%) sepia(86%) saturate(1281%) hue-rotate(178deg) brightness(83%) contrast(96%); }
.lan-filter-delete:hover,.lan-filter-head-actions button:hover { background: var(--interaction-surface-hover); }

/* Dropdown option surfaces */
.dd-item:not(.disabled):not(.selected):not(.hover):not(.active):hover,
.dd-search-item:not(.hover):hover,
.dd-cascade-item:not(.selected):not(.hover):not(.active):hover,
.dd-tree-row:not(.hover):not(.active):hover,
.dd-level-item:not(.selected):not(.hover):hover,
.dd-table-row:not(.hover):hover,
.dd-data-row:not(.hover):hover,
.org-tree-item:not(.active):hover,
.orgx-row:not(.active):hover,
.orgx-result-row:not(.active):hover { color: #333; background: var(--interaction-surface-hover); }
.dd-item:not(.disabled):active,
.dd-cascade-item:active,
.dd-tree-row:active,
.dd-level-item:active,
.dd-table-row:active,
.dd-data-row:active { color: #2279d6; background: var(--interaction-surface-hover); }

/* Date and time */
.dt-field.默认 > div { transition: border-color .12s, background-color .12s; }
.dt-field.默认 > div:is(:hover,:focus-visible) { border-color: #4ba2ff; }
.dt-field.默认 > div:active { border-color: #2279d6; }
.dt-days span:not(.selected):not(.muted):hover,
.dt-months span:not(.selected):hover,
.dt-years span:not(.selected):hover,
.dt-time-columns span:not(.selected):hover,
.dt-preset aside span:not(.selected):hover { background: var(--interaction-surface-hover); }
.dt-days span:not(.selected):active,
.dt-months span:not(.selected):active,
.dt-years span:not(.selected):active,
.dt-time-columns span:not(.selected):active { color: #2279d6; background: var(--interaction-surface-hover); }
.dt-calendar header button:hover,.dt-months header button:hover,.dt-years header button:hover,.dt-calendar footer button:first-child:hover { background: var(--interaction-surface-hover); }

/* Upload */
.lan-upload-button.默认 { cursor: pointer; transition: background-color .12s; }
.lan-upload-button.默认:is(:hover,:focus-visible) { background: #4ba2ff; }
.lan-upload-button.默认:active { background: #2279d6; }
.upload-file.默认 { transition: color .12s, background-color .12s; }
.upload-file.默认:hover { background: #eef7ff; }
.upload-file.默认:active { color: #2279d6; }
.upload-drop:not(.自定义):hover { background: var(--interaction-surface-hover); }
.import-dialog button:not(:disabled):hover { background: var(--interaction-surface-hover); }
.import-dialog button:last-child:not(:disabled):hover { background: #4ba2ff; }
.import-dialog button:last-child:not(:disabled):active { background: #2279d6; }

/* Tables */
.lan-table:has(.lan-table-cell:nth-child(2):hover) .lan-table-cell:nth-child(2),
.lan-table:has(.lan-table-cell:nth-child(3):hover) .lan-table-cell:nth-child(3),
.lan-table:has(.lan-table-cell:nth-child(4):hover) .lan-table-cell:nth-child(4),
.lan-table:has(.lan-table-cell:nth-child(5):hover) .lan-table-cell:nth-child(5) { background: var(--interaction-surface-hover); }
.table-actions img:hover,.table-inline-icon:hover { border-radius: 4px; background: var(--interaction-surface-hover); }

/* Common components and cards */
.lan-card-icon-button:hover,.lan-card-icon-button:focus-visible,
.cc-counter button:hover,
.cc-pagination button:not(.on):hover,
.cc-float:not(.hover):not(.active):hover { background: var(--interaction-surface-hover); }
.lan-card-icon-button:active,
.cc-counter button:active,
.cc-pagination button:not(.on):active,
.cc-float:not(.hover):not(.active):active { background: var(--interaction-surface-active); }
.cc-tab:not(.selected):not(.hover):not(.active):hover,
.cc-breadcrumb:not(.hover):not(.active):hover span:first-child { color: #4ba2ff; }
.cc-tab:not(.selected):not(.hover):not(.active):active,
.cc-breadcrumb:not(.hover):not(.active):active span:first-child { color: #2279d6; }
.cc-filter-switch button:not(.hover):not(.active):hover { background: var(--interaction-surface-hover); }
.cc-filter-switch button:not(.hover):not(.active):active { color: #2279d6; background: var(--interaction-surface-hover); }
.cc-choice:not(:has(.disabled)):hover :is(.cc-radio,.cc-checkbox) { border-color: #4ba2ff; }
.cc-avatar-name:not(.cc-avatar-hover):not(.cc-avatar-active):hover { background: var(--interaction-surface-hover); }

/* Neutral interaction backgrounds use black at 4%; pressed surfaces use 8%. */
.modal-table-row:hover,.modal-inner-nav button:hover,.modal-search-row label:hover,.modal-search-row > button:hover { background: var(--interaction-surface-hover); }