@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-advanced.css

@@ -0,0 +1,830 @@
+/* fanUI v2.1.0 · module: advanced（独立产物，自带令牌） */
+@charset "UTF-8";
+.fanui-loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--fanui-z-toast, 1090);
+  height: 3px;
+  pointer-events: none;
+  opacity: 0;
+  background-color: transparent;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-loading-bar__inner {
+  height: 100%;
+  width: var(--fanui-loading-progress, 0%);
+  border-radius: 0 9999px 9999px 0;
+  background-image: linear-gradient(90deg, var(--fanui-primary), var(--fanui-accent-vivid));
+  box-shadow: 0 0 8px var(--fanui-primary-ring);
+  transition: width 240ms cubic-bezier(0, 0, 0.2, 1) 0s;
+}
+.fanui-loading-bar.is-loading {
+  opacity: 1;
+}
+.fanui-loading-bar--indeterminate .fanui-loading-bar__inner {
+  width: 40% !important;
+  animation: fanui-loading-slide 1.1s var(--fanui-ease-in-out, ease-in-out) infinite;
+}
+
+@keyframes fanui-loading-slide {
+  0% {
+    margin-inline-start: -40%;
+  }
+  100% {
+    margin-inline-start: 100%;
+  }
+}
+.fanui-cascader__panel, .fanui-datepanel,
+.fanui-timepanel,
+.fanui-colorpanel {
+  position: absolute;
+  z-index: var(--fanui-z-popover, 1070);
+  min-width: 260px;
+  padding: var(--fanui-space-3);
+  background-color: var(--fanui-color-overlay);
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-lg);
+  box-shadow: var(--fanui-shadow-xl);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px) scale(0.98);
+  transform-origin: top left;
+  transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1) 0s, visibility 150ms cubic-bezier(0, 0, 0.2, 1) 0s, transform 150ms cubic-bezier(0, 0, 0.2, 1) 0s;
+}
+.is-open.fanui-cascader__panel, .is-open.fanui-datepanel,
+.is-open.fanui-timepanel,
+.is-open.fanui-colorpanel {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0) scale(1);
+}
+
+.fanui-datepanel {
+  width: 292px;
+}
+.fanui-datepanel__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fanui-space-2);
+  margin-bottom: var(--fanui-space-2);
+}
+.fanui-datepanel__title {
+  flex: 1 1 auto;
+  text-align: center;
+  font-size: var(--fanui-font-size-sm);
+  font-weight: var(--fanui-font-weight-semibold);
+  color: var(--fanui-color-text-strong);
+}
+.fanui-datepanel__nav {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: var(--fanui-radius-sm);
+  background-color: transparent;
+  color: var(--fanui-color-text-muted);
+  cursor: pointer;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-datepanel__nav:hover {
+  background-color: var(--fanui-color-hover);
+  color: var(--fanui-color-text-strong);
+}
+.fanui-datepanel__nav:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
+}
+@media (forced-colors: active) {
+  .fanui-datepanel__nav:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-datepanel__nav:disabled {
+  opacity: 0.35;
+  pointer-events: none;
+}
+.fanui-datepanel__week, .fanui-datepanel__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+.fanui-datepanel__week > span {
+  padding: 4px 0;
+  text-align: center;
+  font-size: var(--fanui-font-size-xs);
+  font-weight: var(--fanui-font-weight-semibold);
+  color: var(--fanui-color-text-subtle);
+}
+.fanui-datepanel__day {
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1;
+  border: 0;
+  border-radius: var(--fanui-radius-sm);
+  background-color: transparent;
+  font-size: var(--fanui-font-size-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--fanui-color-text);
+  cursor: pointer;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-datepanel__day:hover {
+  background-color: var(--fanui-color-hover);
+}
+.fanui-datepanel__day:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
+}
+@media (forced-colors: active) {
+  .fanui-datepanel__day:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-datepanel__day.is-other {
+  color: var(--fanui-color-text-subtle);
+  opacity: 0.55;
+}
+.fanui-datepanel__day.is-today {
+  color: var(--fanui-primary);
+  font-weight: var(--fanui-font-weight-bold);
+  box-shadow: inset 0 0 0 1px var(--fanui-primary-border);
+}
+.fanui-datepanel__day.is-selected {
+  color: var(--fanui-primary-fg);
+  background-color: var(--fanui-primary);
+  font-weight: var(--fanui-font-weight-semibold);
+}
+.fanui-datepanel__day.is-in-range {
+  color: var(--fanui-primary-ink);
+  background-color: var(--fanui-primary-soft);
+  border-radius: 0;
+}
+.fanui-datepanel__day:disabled {
+  color: var(--fanui-color-text-subtle);
+  opacity: 0.35;
+  text-decoration: line-through;
+  pointer-events: none;
+}
+.fanui-datepanel__quick {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: var(--fanui-space-2);
+  padding-top: var(--fanui-space-2);
+  border-top: 1px solid var(--fanui-color-border-subtle);
+}
+.fanui-datepanel__quick button {
+  padding: 3px 10px;
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-full);
+  background-color: transparent;
+  font-size: var(--fanui-font-size-xs);
+  color: var(--fanui-color-text-muted);
+  cursor: pointer;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-datepanel__quick button:hover {
+  color: var(--fanui-primary);
+  border-color: var(--fanui-primary-border);
+  background-color: var(--fanui-primary-soft);
+}
+.fanui-datepanel__foot {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--fanui-space-2);
+  font-size: var(--fanui-font-size-xs);
+  color: var(--fanui-color-text-subtle);
+}
+
+.fanui-timepanel {
+  width: 160px;
+  max-height: 280px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
+}
+.fanui-timepanel::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.fanui-timepanel::-webkit-scrollbar-track {
+  background: transparent;
+}
+.fanui-timepanel::-webkit-scrollbar-thumb {
+  background: rgba(100, 116, 139, 0.45);
+  border-radius: 9999px;
+}
+.fanui-timepanel::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 0.7);
+}
+.fanui-timepanel__opt {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 7px 12px;
+  border: 0;
+  border-radius: var(--fanui-radius-sm);
+  background-color: transparent;
+  font-size: var(--fanui-font-size-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--fanui-color-text);
+  cursor: pointer;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-timepanel__opt:hover {
+  background-color: var(--fanui-color-hover);
+}
+.fanui-timepanel__opt:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
+}
+@media (forced-colors: active) {
+  .fanui-timepanel__opt:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-timepanel__opt.is-selected {
+  color: var(--fanui-primary-fg);
+  background-color: var(--fanui-primary);
+  font-weight: var(--fanui-font-weight-semibold);
+}
+.fanui-timepanel__opt.is-selected::after {
+  content: "✓";
+  font-size: 12px;
+}
+.fanui-timepanel__empty {
+  padding: var(--fanui-space-4);
+  text-align: center;
+  font-size: var(--fanui-font-size-xs);
+  color: var(--fanui-color-text-subtle);
+}
+
+.fanui-colorpanel {
+  width: 264px;
+}
+.fanui-colorpanel__preview {
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-3);
+  margin-bottom: var(--fanui-space-3);
+}
+.fanui-colorpanel__swatch {
+  width: 44px;
+  height: 44px;
+  flex: 0 0 auto;
+  border-radius: var(--fanui-radius-md);
+  border: 1px solid var(--fanui-color-border);
+  box-shadow: inset 0 0 0 2px var(--fanui-color-surface);
+}
+.fanui-colorpanel__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 7px 10px;
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-md);
+  background-color: var(--fanui-color-surface-sunken);
+  font-family: var(--fanui-font-mono);
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text);
+  text-transform: uppercase;
+}
+.fanui-colorpanel__slider {
+  width: 100%;
+  margin: 0 0 var(--fanui-space-2);
+  accent-color: var(--fanui-primary);
+  cursor: pointer;
+}
+.fanui-colorpanel__row {
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-2);
+  margin-bottom: var(--fanui-space-2);
+  font-size: var(--fanui-font-size-xs);
+  color: var(--fanui-color-text-subtle);
+}
+.fanui-colorpanel__row label {
+  flex: 0 0 32px;
+}
+.fanui-colorpanel__palette {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 6px;
+  margin-top: var(--fanui-space-3);
+  padding-top: var(--fanui-space-3);
+  border-top: 1px solid var(--fanui-color-border-subtle);
+}
+.fanui-colorpanel__palette button {
+  aspect-ratio: 1;
+  border: 0;
+  border-radius: var(--fanui-radius-sm);
+  cursor: pointer;
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-colorpanel__palette button:hover {
+  transform: scale(1.12);
+  box-shadow: var(--fanui-shadow-md);
+}
+.fanui-colorpanel__palette button.is-selected {
+  box-shadow: 0 0 0 2px var(--fanui-color-surface), 0 0 0 4px var(--fanui-primary);
+}
+.fanui-colorpanel__palette button:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
+}
+@media (forced-colors: active) {
+  .fanui-colorpanel__palette button:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-colorpanel__actions {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--fanui-space-2);
+  margin-top: var(--fanui-space-3);
+}
+
+.fanui-cascader {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+}
+.fanui-cascader__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fanui-space-2);
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-md);
+  background-color: var(--fanui-color-surface);
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text);
+  cursor: pointer;
+  text-align: start;
+  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-cascader__trigger:hover {
+  border-color: var(--fanui-primary-border);
+}
+.fanui-cascader__trigger:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
+}
+@media (forced-colors: active) {
+  .fanui-cascader__trigger:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-cascader__trigger.is-active {
+  border-color: var(--fanui-primary);
+}
+.fanui-cascader__trigger .fanui-cascader__placeholder {
+  color: var(--fanui-color-text-subtle);
+}
+.fanui-cascader__trigger .fanui-cascader__caret {
+  color: var(--fanui-color-text-subtle);
+  font-size: 10px;
+}
+.fanui-cascader__panel {
+  display: none;
+  width: max-content;
+  max-width: min(560px, 92vw);
+}
+.fanui-cascader__panel.is-open {
+  display: flex;
+}
+.fanui-cascader__panel.is-searching {
+  display: block;
+}
+.fanui-cascader__search {
+  width: 100%;
+  padding: 7px 10px;
+  margin-bottom: var(--fanui-space-2);
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-sm);
+  background-color: var(--fanui-color-surface-sunken);
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text);
+}
+.fanui-cascader__cols {
+  display: flex;
+  max-height: 280px;
+}
+.fanui-cascader__col {
+  flex: 0 0 auto;
+  width: 180px;
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 4px;
+  border-inline-end: 1px solid var(--fanui-color-border-subtle);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
+}
+.fanui-cascader__col::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.fanui-cascader__col::-webkit-scrollbar-track {
+  background: transparent;
+}
+.fanui-cascader__col::-webkit-scrollbar-thumb {
+  background: rgba(100, 116, 139, 0.45);
+  border-radius: 9999px;
+}
+.fanui-cascader__col::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 0.7);
+}
+.fanui-cascader__col:last-child {
+  border-inline-end: 0;
+}
+.fanui-cascader__opt {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  width: 100%;
+  padding: 7px 10px;
+  border: 0;
+  border-radius: var(--fanui-radius-sm);
+  background-color: transparent;
+  font-size: var(--fanui-font-size-sm);
+  text-align: start;
+  color: var(--fanui-color-text);
+  cursor: pointer;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-cascader__opt:hover {
+  background-color: var(--fanui-color-hover);
+}
+.fanui-cascader__opt:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
+}
+@media (forced-colors: active) {
+  .fanui-cascader__opt:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-cascader__opt.is-active {
+  color: var(--fanui-primary-ink);
+  background-color: var(--fanui-primary-soft);
+  font-weight: var(--fanui-font-weight-semibold);
+}
+.fanui-cascader__opt .fanui-cascader__arrow {
+  font-size: 10px;
+  color: var(--fanui-color-text-subtle);
+}
+.fanui-cascader__breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin-top: var(--fanui-space-2);
+  padding-top: var(--fanui-space-2);
+  border-top: 1px solid var(--fanui-color-border-subtle);
+  font-size: var(--fanui-font-size-xs);
+  color: var(--fanui-color-text-subtle);
+}
+.fanui-cascader__breadcrumb b {
+  color: var(--fanui-color-text-strong);
+  font-weight: var(--fanui-font-weight-semibold);
+}
+
+.fanui-tree {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text);
+}
+.fanui-tree ul {
+  margin: 0;
+  padding: 0 0 0 20px;
+  list-style: none;
+}
+.fanui-tree li {
+  position: relative;
+}
+.fanui-tree__row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  border-radius: var(--fanui-radius-sm);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-tree__row:hover {
+  background-color: var(--fanui-color-hover);
+}
+.fanui-tree__row.is-selected {
+  color: var(--fanui-primary-ink);
+  background-color: var(--fanui-primary-soft);
+}
+.fanui-tree__caret {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: var(--fanui-radius-sm);
+  background-color: transparent;
+  color: var(--fanui-color-text-subtle);
+  font-size: 9px;
+  cursor: pointer;
+  transition: transform 0.15s var(--fanui-ease-out, ease-out);
+  visibility: hidden;
+}
+.fanui-tree__caret.is-expandable {
+  visibility: visible;
+}
+.fanui-tree__caret.is-open {
+  transform: rotate(90deg);
+}
+.fanui-tree__caret:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
+}
+@media (forced-colors: active) {
+  .fanui-tree__caret:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-tree__check {
+  flex: 0 0 auto;
+  width: 15px;
+  height: 15px;
+  accent-color: var(--fanui-primary);
+  cursor: pointer;
+}
+.fanui-tree__icon {
+  flex: 0 0 auto;
+  color: var(--fanui-primary);
+  font-size: 13px;
+}
+.fanui-tree__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fanui-tree__badge {
+  flex: 0 0 auto;
+  padding: 1px 7px;
+  font-size: 10px;
+  color: var(--fanui-color-text-subtle);
+  background-color: var(--fanui-color-surface-sunken);
+  border-radius: var(--fanui-radius-full);
+}
+.fanui-tree li.is-collapsed > ul {
+  display: none;
+}
+.fanui-tree__check:indeterminate {
+  opacity: 1;
+}
+
+.fanui-transfer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: var(--fanui-space-3);
+  align-items: center;
+  width: 100%;
+}
+@media (max-width: 767.95px) {
+  .fanui-transfer {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+}
+.fanui-transfer__panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 220px;
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-lg);
+  background-color: var(--fanui-color-surface);
+  overflow: hidden;
+}
+.fanui-transfer__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fanui-space-2);
+  padding: var(--fanui-space-2) var(--fanui-space-3);
+  border-bottom: 1px solid var(--fanui-color-border-subtle);
+  background-color: var(--fanui-color-surface-sunken);
+  font-size: var(--fanui-font-size-xs);
+  color: var(--fanui-color-text-muted);
+}
+.fanui-transfer__title {
+  font-weight: var(--fanui-font-weight-semibold);
+  color: var(--fanui-color-text-strong);
+}
+.fanui-transfer__search {
+  width: 100%;
+  padding: 7px 10px;
+  border: 0;
+  border-bottom: 1px solid var(--fanui-color-border-subtle);
+  background-color: var(--fanui-color-surface);
+  font-size: var(--fanui-font-size-xs);
+  color: var(--fanui-color-text);
+}
+.fanui-transfer__list {
+  max-height: 260px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
+}
+.fanui-transfer__list::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.fanui-transfer__list::-webkit-scrollbar-track {
+  background: transparent;
+}
+.fanui-transfer__list::-webkit-scrollbar-thumb {
+  background: rgba(100, 116, 139, 0.45);
+  border-radius: 9999px;
+}
+.fanui-transfer__list::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 0.7);
+}
+.fanui-transfer__opt {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: var(--fanui-radius-sm);
+  cursor: pointer;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-transfer__opt:hover {
+  background-color: var(--fanui-color-hover);
+}
+.fanui-transfer__opt.is-selected {
+  background-color: var(--fanui-primary-soft);
+}
+.fanui-transfer__opt.is-disabled {
+  pointer-events: none;
+  background-color: var(--fanui-color-disabled-bg);
+  color: var(--fanui-color-disabled-text);
+}
+.fanui-transfer__opt.is-disabled .fanui-transfer__opt-label,
+.fanui-transfer__opt.is-disabled .fanui-transfer__opt-tag {
+  color: var(--fanui-color-disabled-text);
+}
+.fanui-transfer__opt-check {
+  accent-color: var(--fanui-primary);
+  flex: 0 0 auto;
+}
+.fanui-transfer__opt-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fanui-transfer__opt-tag {
+  flex: 0 0 auto;
+  font-size: 10px;
+  color: var(--fanui-color-text-subtle);
+}
+.fanui-transfer__empty {
+  padding: var(--fanui-space-5) var(--fanui-space-3);
+  text-align: center;
+  font-size: var(--fanui-font-size-xs);
+  color: var(--fanui-color-text-subtle);
+}
+.fanui-transfer__actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fanui-space-2);
+}
+@media (max-width: 767.95px) {
+  .fanui-transfer__actions {
+    flex-direction: row;
+  }
+}
+.fanui-transfer__btn {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-md);
+  background-color: var(--fanui-color-surface);
+  color: var(--fanui-color-text-muted);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-transfer__btn:hover:not(:disabled) {
+  color: var(--fanui-primary-fg);
+  background-color: var(--fanui-primary);
+  border-color: var(--fanui-primary);
+}
+.fanui-transfer__btn:disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.fanui-transfer__btn:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
+}
+@media (forced-colors: active) {
+  .fanui-transfer__btn:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+
+.fanui-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--fanui-cluster-gap, var(--fanui-space-3));
+  margin-inline: calc(var(--fanui-cluster-gap, var(--fanui-space-3)) * -0.5);
+}
+.fanui-cluster > * {
+  margin-inline: calc(var(--fanui-cluster-gap, var(--fanui-space-3)) * 0.5);
+}
+.fanui-cluster--center {
+  justify-content: center;
+}
+.fanui-cluster--between {
+  justify-content: space-between;
+}
+.fanui-cluster--end {
+  justify-content: flex-end;
+}
+.fanui-cluster--tight {
+  --fanui-cluster-gap: var(--fanui-space-2);
+}
+.fanui-cluster--loose {
+  --fanui-cluster-gap: var(--fanui-space-5);
+}
+
+.fanui-logo-cloud {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--fanui-logo-min, 150px), 1fr));
+  gap: var(--fanui-space-4);
+  align-items: stretch;
+}
+.fanui-logo-cloud__item {
+  display: grid;
+  place-items: center;
+  min-height: 72px;
+  padding: var(--fanui-space-4);
+  border: 1px solid var(--fanui-color-border-subtle);
+  border-radius: var(--fanui-radius-lg);
+  background-color: var(--fanui-color-surface);
+  font-weight: var(--fanui-font-weight-bold);
+  letter-spacing: var(--fanui-tracking-wide);
+  color: var(--fanui-color-text-subtle);
+  transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-logo-cloud__item img {
+  max-height: 32px;
+  max-width: 100%;
+  object-fit: contain;
+  opacity: 0.62;
+  filter: grayscale(1);
+  transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-logo-cloud__item:hover {
+  color: var(--fanui-primary);
+  transform: translateY(-2px);
+  box-shadow: var(--fanui-shadow-md);
+}
+.fanui-logo-cloud__item:hover img {
+  opacity: 1;
+  filter: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fanui-loading-bar--indeterminate .fanui-loading-bar__inner {
+    animation: none;
+    width: 100% !important;
+  }
+}