kb-ui-vue 0.2.0

package/dist/styles/index.css

@@ -0,0 +1,2953 @@
+:root {
+  /* 品牌色 */
+  --kb-color-primary: #3b82f6;
+  --kb-color-success: #16a34a;
+  --kb-color-warning: #f59e0b;
+  --kb-color-danger: #dc2626;
+  --kb-color-info: #64748b;
+
+  /* 渐变变体（风格主题可覆盖，默认与实色一致） */
+  --kb-color-primary-gradient: linear-gradient(135deg, var(--kb-color-primary), var(--kb-color-primary));
+  --kb-color-success-gradient: linear-gradient(135deg, var(--kb-color-success), var(--kb-color-success));
+
+  /* 中性色 */
+  --kb-color-bg: #fff;
+  --kb-color-bg-elevated: #f8fafc;
+  --kb-color-border: #e2e8f0;
+  --kb-color-text-1: #0f172a;
+  --kb-color-text-2: #475569;
+  --kb-color-text-3: #94a3b8;
+
+  /* 圆角 */
+  --kb-radius-sm: 4px;
+  --kb-radius-md: 6px;
+  --kb-radius-lg: 10px;
+  --kb-radius-round: 999px;
+
+  /* 阴影 */
+  --kb-shadow-1: 0 1px 2px rgb(0 0 0 / 5%);
+  --kb-shadow-2: 0 4px 12px rgb(0 0 0 / 8%);
+
+  /* 字体 */
+  --kb-font-family:
+    -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  --kb-font-size-xs: 12px;
+  --kb-font-size-sm: 13px;
+  --kb-font-size-md: 14px;
+  --kb-font-size-lg: 16px;
+  --kb-font-size-xl: 20px;
+
+  /* 间距（4px 基数） */
+  --kb-space-1: 4px;
+  --kb-space-2: 8px;
+  --kb-space-3: 12px;
+  --kb-space-4: 16px;
+  --kb-space-5: 20px;
+  --kb-space-6: 24px;
+
+  /* 过渡 */
+  --kb-transition-duration: 0.2s;
+  --kb-transition-timing: ease;
+
+  /* 层级 */
+  --kb-z-index-message: 2000;
+  --kb-z-index-modal: 1000;
+}
+
+[data-theme='dark'] {
+  --kb-color-bg: #0f172a;
+  --kb-color-bg-elevated: #1e293b;
+  --kb-color-border: #334155;
+  --kb-color-text-1: #f1f5f9;
+  --kb-color-text-2: #cbd5e1;
+  --kb-color-text-3: #64748b;
+  --kb-shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
+  --kb-shadow-2: 0 4px 12px rgb(0 0 0 / 50%);
+}
+
+.kb-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kb-space-2);
+  box-sizing: border-box;
+  padding: var(--kb-space-3) var(--kb-space-4);
+  border-radius: var(--kb-radius-md);
+  border: 1px solid transparent;
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-alert--info {
+  border-color: color-mix(in srgb, var(--kb-color-info) 30%, transparent);
+  background: color-mix(in srgb, var(--kb-color-info) 8%, transparent);
+  color: var(--kb-color-info);
+}
+
+.kb-alert--success {
+  border-color: color-mix(in srgb, var(--kb-color-success) 30%, transparent);
+  background: color-mix(in srgb, var(--kb-color-success) 8%, transparent);
+  color: var(--kb-color-success);
+}
+
+.kb-alert--warning {
+  border-color: color-mix(in srgb, var(--kb-color-warning) 30%, transparent);
+  background: color-mix(in srgb, var(--kb-color-warning) 8%, transparent);
+  color: var(--kb-color-warning);
+}
+
+.kb-alert--danger {
+  border-color: color-mix(in srgb, var(--kb-color-danger) 30%, transparent);
+  background: color-mix(in srgb, var(--kb-color-danger) 8%, transparent);
+  color: var(--kb-color-danger);
+}
+
+.kb-alert__icon {
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.kb-alert__main {
+  flex: 1;
+}
+
+.kb-alert__title {
+  font-weight: 600;
+  color: var(--kb-color-text-1);
+}
+
+.kb-alert__content {
+  color: var(--kb-color-text-2);
+  line-height: 1.6;
+}
+
+.kb-alert__close {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: var(--kb-font-size-lg);
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.kb-alert__close:hover {
+  opacity: 1;
+}
+
+.kb-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-text-2);
+  flex-shrink: 0;
+}
+
+.kb-avatar--round {
+  border-radius: var(--kb-radius-round);
+}
+
+.kb-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.kb-avatar__fallback {
+  font-size: 0.5em;
+  line-height: 1;
+}
+
+.kb-avatar__icon {
+  width: 50%;
+  height: 50%;
+}
+
+.kb-badge {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.kb-badge--independent {
+  display: inline-flex;
+}
+
+.kb-badge__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 var(--kb-space-1);
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-danger);
+  color: var(--kb-color-bg);
+  font-size: var(--kb-font-size-xs);
+  line-height: 1;
+}
+
+.kb-badge--independent .kb-badge__content {
+  position: static;
+}
+
+.kb-badge__content:not(.kb-badge--independent, .kb-badge__content--dot) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.kb-badge__content--dot {
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  padding: 0;
+}
+
+.kb-badge__content--dot:not(.kb-badge--independent) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.kb-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--kb-space-1);
+  font-size: var(--kb-font-size-md);
+  color: var(--kb-color-text-2);
+}
+
+.kb-breadcrumb__item a {
+  color: var(--kb-color-text-2);
+  text-decoration: none;
+  transition: color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-breadcrumb__item a:hover {
+  color: var(--kb-color-primary);
+}
+
+.kb-breadcrumb__item--current {
+  color: var(--kb-color-text-1);
+  font-weight: 500;
+}
+
+.kb-breadcrumb__separator {
+  color: var(--kb-color-text-3);
+  margin: 0 var(--kb-space-1);
+}
+
+.kb-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kb-space-1);
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-family: var(--kb-font-family);
+  font-size: var(--kb-font-size-md);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background var(--kb-transition-duration) var(--kb-transition-timing),
+    border-color var(--kb-transition-duration) var(--kb-transition-timing),
+    color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-button:hover:not(.kb-button--disabled) {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-primary);
+}
+
+.kb-button--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.kb-button--round {
+  border-radius: var(--kb-radius-round);
+}
+
+.kb-button--small {
+  padding: var(--kb-space-1) var(--kb-space-2);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-button--medium {
+  padding: var(--kb-space-2) var(--kb-space-4);
+}
+
+.kb-button--large {
+  padding: var(--kb-space-3) var(--kb-space-5);
+  font-size: var(--kb-font-size-lg);
+}
+
+.kb-button--primary {
+  border-color: var(--kb-color-primary);
+  background: var(--kb-color-primary-gradient);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--primary:hover:not(.kb-button--disabled) {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+  filter: brightness(0.94);
+}
+
+.kb-button--success {
+  border-color: var(--kb-color-success);
+  background: var(--kb-color-success);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--warning {
+  border-color: var(--kb-color-warning);
+  background: var(--kb-color-warning);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--danger {
+  border-color: var(--kb-color-danger);
+  background: var(--kb-color-danger);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--info {
+  border-color: var(--kb-color-info);
+  background: var(--kb-color-info);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--plain.kb-button--primary {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-primary);
+}
+
+.kb-button--plain.kb-button--success {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-success);
+}
+
+.kb-button--plain.kb-button--warning {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-warning);
+}
+
+.kb-button--plain.kb-button--danger {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-danger);
+}
+
+.kb-button--plain.kb-button--info {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-info);
+}
+
+.kb-calendar {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  padding: var(--kb-space-3);
+  background: var(--kb-color-bg);
+}
+
+.kb-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--kb-space-3);
+}
+
+.kb-calendar__title {
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-lg);
+  font-weight: 600;
+}
+
+.kb-calendar__nav {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--kb-radius-sm);
+  background: transparent;
+  color: var(--kb-color-text-2);
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.kb-calendar__nav:hover {
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-primary);
+}
+
+.kb-calendar__week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: var(--kb-space-1);
+}
+
+.kb-calendar__week-label {
+  text-align: center;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.kb-calendar__day {
+  aspect-ratio: 1;
+  border: none;
+  border-radius: var(--kb-radius-sm);
+  background: transparent;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-sm);
+  cursor: pointer;
+}
+
+.kb-calendar__day:hover:not(.kb-calendar__day--active) {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-calendar__day--outside {
+  color: var(--kb-color-text-3);
+  opacity: 0.5;
+}
+
+.kb-calendar__day--active {
+  background: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+}
+
+.kb-card {
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-lg);
+  background: var(--kb-color-bg);
+}
+
+.kb-card--shadow-always {
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-card--shadow-hover {
+  transition: box-shadow var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-card--shadow-hover:hover {
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-card__header {
+  padding: var(--kb-space-3) var(--kb-space-4);
+  border-bottom: 1px solid var(--kb-color-border);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-lg);
+  font-weight: 600;
+}
+
+.kb-card__body {
+  padding: var(--kb-space-4);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  line-height: 1.6;
+}
+
+.kb-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--kb-space-3) var(--kb-space-4);
+  border-top: 1px solid var(--kb-color-border);
+}
+
+.kb-carousel {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--kb-radius-lg);
+}
+
+.kb-carousel__item {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity var(--kb-transition-duration) var(--kb-transition-timing);
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--kb-color-primary) 18%, transparent), transparent),
+    var(--kb-color-bg-elevated);
+}
+
+.kb-carousel__item--active {
+  opacity: 1;
+}
+
+.kb-carousel__title {
+  color: var(--kb-color-text-1);
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.kb-carousel__description {
+  margin-top: var(--kb-space-2);
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-carousel__prev,
+.kb-carousel__next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 25%);
+  color: var(--kb-color-bg);
+  font-size: 18px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-carousel__prev {
+  left: var(--kb-space-3);
+}
+
+.kb-carousel__next {
+  right: var(--kb-space-3);
+}
+
+.kb-carousel:hover .kb-carousel__prev,
+.kb-carousel:hover .kb-carousel__next {
+  opacity: 1;
+}
+
+.kb-carousel__dots {
+  position: absolute;
+  bottom: var(--kb-space-2);
+  left: 50%;
+  display: flex;
+  gap: var(--kb-space-1);
+  transform: translateX(-50%);
+}
+
+.kb-carousel__dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: none;
+  border-radius: var(--kb-radius-round);
+  background: rgb(255 255 255 / 50%);
+  cursor: pointer;
+}
+
+.kb-carousel__dot--active {
+  background: var(--kb-color-bg);
+}
+
+.kb-cascader {
+  position: relative;
+  display: inline-block;
+}
+
+.kb-cascader__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 200px;
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+}
+
+.kb-cascader__placeholder {
+  color: var(--kb-color-text-3);
+}
+
+.kb-cascader__arrow {
+  color: var(--kb-color-text-3);
+  font-size: 12px;
+}
+
+.kb-cascader__panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: var(--kb-z-index-modal);
+  display: flex;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-cascader__column {
+  min-width: 140px;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: var(--kb-space-1);
+}
+
+.kb-cascader__column + .kb-cascader__column {
+  border-left: 1px solid var(--kb-color-border);
+}
+
+.kb-cascader__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border-radius: var(--kb-radius-sm);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.kb-cascader__option:hover {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-cascader__option--active {
+  color: var(--kb-color-primary);
+  font-weight: 500;
+}
+
+.kb-cascader__more {
+  color: var(--kb-color-text-3);
+}
+
+.kb-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kb-space-1);
+  cursor: pointer;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  user-select: none;
+}
+
+.kb-checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.kb-checkbox__inner {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg);
+  transition:
+    background var(--kb-transition-duration) var(--kb-transition-timing),
+    border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-checkbox__inner::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 5px;
+  width: 4px;
+  height: 8px;
+  border: 2px solid var(--kb-color-bg);
+  border-top: none;
+  border-left: none;
+  transform: rotate(45deg) scale(0);
+  transition: transform var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-checkbox--checked .kb-checkbox__inner {
+  border-color: var(--kb-color-primary);
+  background: var(--kb-color-primary);
+}
+
+.kb-checkbox--checked .kb-checkbox__inner::after {
+  transform: rotate(45deg) scale(1);
+}
+
+.kb-checkbox__label {
+  line-height: 1;
+}
+
+.kb-collapse {
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  overflow: hidden;
+}
+
+.kb-collapse__panel + .kb-collapse__panel {
+  border-top: 1px solid var(--kb-color-border);
+}
+
+.kb-collapse__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kb-space-3) var(--kb-space-4);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-collapse__header:hover:not(.kb-collapse__header--disabled) {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-collapse__header--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-collapse__arrow {
+  color: var(--kb-color-text-3);
+  font-size: 12px;
+  transition: transform var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-collapse__arrow--open {
+  transform: rotate(180deg);
+}
+
+.kb-collapse__content {
+  padding: var(--kb-space-3) var(--kb-space-4);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  line-height: 1.6;
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-colorpicker {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-3);
+}
+
+.kb-colorpicker__value {
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  flex-shrink: 0;
+}
+
+.kb-colorpicker__presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kb-space-1);
+}
+
+.kb-colorpicker__swatch {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--kb-radius-sm);
+  cursor: pointer;
+}
+
+.kb-colorpicker__swatch--active {
+  border-color: var(--kb-color-text-1);
+}
+
+.kb-colorpicker__swatch:hover {
+  transform: scale(1.1);
+}
+
+.kb-countup {
+  font-variant-numeric: tabular-nums;
+  color: var(--kb-color-text-1);
+}
+
+.kb-datepicker {
+  position: relative;
+  display: inline-block;
+}
+
+.kb-datepicker__input {
+  width: 180px;
+  box-sizing: border-box;
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  outline: none;
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+  transition: border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-datepicker__input:focus {
+  border-color: var(--kb-color-primary);
+}
+
+.kb-datepicker__panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: var(--kb-z-index-modal);
+  width: 300px;
+  background: var(--kb-color-bg);
+  border-radius: var(--kb-radius-md);
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-descriptions__title {
+  margin-bottom: var(--kb-space-2);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-lg);
+  font-weight: 600;
+}
+
+.kb-descriptions__grid {
+  display: grid;
+  gap: var(--kb-space-3);
+}
+
+.kb-descriptions__item {
+  display: flex;
+  gap: var(--kb-space-3);
+}
+
+.kb-descriptions--border .kb-descriptions__item {
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  overflow: hidden;
+}
+
+.kb-descriptions__label {
+  min-width: 80px;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-descriptions__value {
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-descriptions--border .kb-descriptions__label {
+  display: flex;
+  align-items: center;
+  padding: var(--kb-space-2) var(--kb-space-3);
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-descriptions--border .kb-descriptions__value {
+  padding: var(--kb-space-2) var(--kb-space-3);
+}
+
+.kb-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kb-z-index-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(0 0 0 / 50%);
+}
+
+.kb-dialog {
+  box-sizing: border-box;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow-y: auto;
+  border-radius: var(--kb-radius-lg);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-dialog__header {
+  padding: var(--kb-space-4) var(--kb-space-5);
+  border-bottom: 1px solid var(--kb-color-border);
+  font-size: var(--kb-font-size-lg);
+  font-weight: 600;
+  color: var(--kb-color-text-1);
+}
+
+.kb-dialog__body {
+  padding: var(--kb-space-4) var(--kb-space-5);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  line-height: 1.6;
+}
+
+.kb-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--kb-space-2);
+  padding: var(--kb-space-3) var(--kb-space-5);
+  border-top: 1px solid var(--kb-color-border);
+}
+
+.kb-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-2);
+  margin: var(--kb-space-4) 0;
+}
+
+.kb-divider--vertical {
+  display: inline-block;
+  width: 1px;
+  height: 1em;
+  margin: 0 var(--kb-space-2);
+  background: var(--kb-color-border);
+  vertical-align: middle;
+}
+
+.kb-divider::before,
+.kb-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--kb-color-border);
+}
+
+.kb-divider--content-left::before {
+  flex: 0.06;
+}
+
+.kb-divider--content-right::after {
+  flex: 0.06;
+}
+
+.kb-divider__text {
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  white-space: nowrap;
+}
+
+.kb-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kb-z-index-modal);
+  background: rgb(0 0 0 / 50%);
+}
+
+.kb-drawer {
+  position: fixed;
+  z-index: var(--kb-z-index-modal);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-drawer--left {
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.kb-drawer--right {
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.kb-drawer--top {
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.kb-drawer--bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.kb-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kb-space-4);
+  border-bottom: 1px solid var(--kb-color-border);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-lg);
+  font-weight: 600;
+}
+
+.kb-drawer__close {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-xl);
+  cursor: pointer;
+}
+
+.kb-drawer__close:hover {
+  color: var(--kb-color-text-1);
+}
+
+.kb-drawer__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--kb-space-4);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  line-height: 1.6;
+}
+
+.kb-drawer__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--kb-space-2);
+  padding: var(--kb-space-3) var(--kb-space-4);
+  border-top: 1px solid var(--kb-color-border);
+}
+
+.kb-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.kb-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: var(--kb-z-index-modal);
+  min-width: 120px;
+  box-sizing: border-box;
+  padding: var(--kb-space-1);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-dropdown__item {
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border-radius: var(--kb-radius-sm);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.kb-dropdown__item:hover:not(.kb-dropdown__item--disabled) {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-dropdown__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-dropdown__item--danger {
+  color: var(--kb-color-danger);
+}
+
+.kb-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kb-space-2);
+  padding: var(--kb-space-6);
+  color: var(--kb-color-text-3);
+}
+
+.kb-empty__image {
+  color: var(--kb-color-text-3);
+  opacity: 0.5;
+}
+
+.kb-empty__description {
+  margin: 0;
+  font-size: var(--kb-font-size-md);
+  color: var(--kb-color-text-3);
+}
+
+.kb-empty__action {
+  margin-top: var(--kb-space-2);
+}
+
+.kb-form {
+  width: 100%;
+}
+
+.kb-form-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kb-space-2);
+  margin-bottom: var(--kb-space-4);
+}
+
+.kb-form-item__label {
+  flex-shrink: 0;
+  padding-top: 8px;
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-form-item__content {
+  flex: 1;
+}
+
+.kb-form-item__error {
+  margin-top: var(--kb-space-1);
+  color: var(--kb-color-danger);
+  font-size: var(--kb-font-size-xs);
+  line-height: 1.4;
+}
+
+.kb-form-item--error .kb-input,
+.kb-form-item--error .kb-textarea__inner {
+  border-color: var(--kb-color-danger);
+}
+
+.kb-row {
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+}
+
+.kb-row--start {
+  justify-content: flex-start;
+}
+
+.kb-row--center {
+  justify-content: center;
+}
+
+.kb-row--end {
+  justify-content: flex-end;
+}
+
+.kb-row--space-between {
+  justify-content: space-between;
+}
+
+.kb-row--space-around {
+  justify-content: space-around;
+}
+
+.kb-row--align-top {
+  align-items: flex-start;
+}
+
+.kb-row--align-middle {
+  align-items: center;
+}
+
+.kb-row--align-bottom {
+  align-items: flex-end;
+}
+
+.kb-col {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+}
+
+.kb-col-0 {
+  display: none;
+}
+
+.kb-col-1 {
+  flex-basis: 4.1667%;
+  max-width: 4.1667%;
+}
+
+.kb-col-2 {
+  flex-basis: 8.3333%;
+  max-width: 8.3333%;
+}
+
+.kb-col-3 {
+  flex-basis: 12.5%;
+  max-width: 12.5%;
+}
+
+.kb-col-4 {
+  flex-basis: 16.6667%;
+  max-width: 16.6667%;
+}
+
+.kb-col-5 {
+  flex-basis: 20.8333%;
+  max-width: 20.8333%;
+}
+
+.kb-col-6 {
+  flex-basis: 25%;
+  max-width: 25%;
+}
+
+.kb-col-7 {
+  flex-basis: 29.1667%;
+  max-width: 29.1667%;
+}
+
+.kb-col-8 {
+  flex-basis: 33.3333%;
+  max-width: 33.3333%;
+}
+
+.kb-col-9 {
+  flex-basis: 37.5%;
+  max-width: 37.5%;
+}
+
+.kb-col-10 {
+  flex-basis: 41.6667%;
+  max-width: 41.6667%;
+}
+
+.kb-col-11 {
+  flex-basis: 45.8333%;
+  max-width: 45.8333%;
+}
+
+.kb-col-12 {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.kb-col-13 {
+  flex-basis: 54.1667%;
+  max-width: 54.1667%;
+}
+
+.kb-col-14 {
+  flex-basis: 58.3333%;
+  max-width: 58.3333%;
+}
+
+.kb-col-15 {
+  flex-basis: 62.5%;
+  max-width: 62.5%;
+}
+
+.kb-col-16 {
+  flex-basis: 66.6667%;
+  max-width: 66.6667%;
+}
+
+.kb-col-17 {
+  flex-basis: 70.8333%;
+  max-width: 70.8333%;
+}
+
+.kb-col-18 {
+  flex-basis: 75%;
+  max-width: 75%;
+}
+
+.kb-col-19 {
+  flex-basis: 79.1667%;
+  max-width: 79.1667%;
+}
+
+.kb-col-20 {
+  flex-basis: 83.3333%;
+  max-width: 83.3333%;
+}
+
+.kb-col-21 {
+  flex-basis: 87.5%;
+  max-width: 87.5%;
+}
+
+.kb-col-22 {
+  flex-basis: 91.6667%;
+  max-width: 91.6667%;
+}
+
+.kb-col-23 {
+  flex-basis: 95.8333%;
+  max-width: 95.8333%;
+}
+
+.kb-col-24 {
+  flex-basis: 100%;
+  max-width: 100%;
+}
+
+.kb-col-offset-1 {
+  margin-left: 4.1667%;
+}
+
+.kb-col-offset-2 {
+  margin-left: 8.3333%;
+}
+
+.kb-col-offset-3 {
+  margin-left: 12.5%;
+}
+
+.kb-col-offset-4 {
+  margin-left: 16.6667%;
+}
+
+.kb-col-offset-6 {
+  margin-left: 25%;
+}
+
+.kb-col-offset-8 {
+  margin-left: 33.3333%;
+}
+
+.kb-col-offset-12 {
+  margin-left: 50%;
+}
+
+.kb-icon {
+  display: inline-block;
+  vertical-align: -0.125em;
+  flex-shrink: 0;
+}
+
+.kb-input {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  transition:
+    border-color var(--kb-transition-duration) var(--kb-transition-timing),
+    box-shadow var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-input:hover:not(.kb-input--disabled) {
+  border-color: var(--kb-color-text-3);
+}
+
+.kb-input--focused {
+  border-color: var(--kb-color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-color-primary) 15%, transparent);
+}
+
+.kb-input--disabled {
+  background: var(--kb-color-bg-elevated);
+  cursor: not-allowed;
+}
+
+.kb-input--small {
+  height: 28px;
+}
+
+.kb-input--medium {
+  height: 34px;
+}
+
+.kb-input--large {
+  height: 40px;
+}
+
+.kb-input__inner {
+  flex: 1;
+  min-width: 0;
+  padding: 0 var(--kb-space-3);
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--kb-color-text-1);
+  font-family: var(--kb-font-family);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-input__inner::placeholder {
+  color: var(--kb-color-text-3);
+}
+
+.kb-input--disabled .kb-input__inner {
+  cursor: not-allowed;
+  color: var(--kb-color-text-3);
+}
+
+.kb-input__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: var(--kb-space-1);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-text-2);
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.kb-input__clear:hover {
+  color: var(--kb-color-text-1);
+}
+
+.kb-input-number {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  overflow: hidden;
+  background: var(--kb-color-bg);
+}
+
+.kb-input-number__input {
+  width: 48px;
+  padding: 0;
+  border: none;
+  outline: none;
+  text-align: center;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  background: transparent;
+}
+
+.kb-input-number__step {
+  width: 28px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-text-2);
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.kb-input-number__step:disabled,
+.kb-input-number--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-input-number__step:hover:not(:disabled) {
+  color: var(--kb-color-primary);
+}
+
+.kb-input-password {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  overflow: hidden;
+  transition: border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-input-password:focus-within {
+  border-color: var(--kb-color-primary);
+}
+
+.kb-input-password__inner {
+  flex: 1;
+  min-width: 0;
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-input-password__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin-right: var(--kb-space-1);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--kb-color-text-3);
+  cursor: pointer;
+}
+
+.kb-input-password__toggle:hover {
+  color: var(--kb-color-primary);
+}
+
+.kb-list {
+  width: 100%;
+}
+
+.kb-list__item {
+  padding: var(--kb-space-3) var(--kb-space-2);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  transition: background var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-list__item:hover {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-list--bordered .kb-list__item {
+  border-bottom: 1px solid var(--kb-color-border);
+}
+
+.kb-list--bordered .kb-list__item:last-child {
+  border-bottom: none;
+}
+
+.kb-list__empty {
+  padding: var(--kb-space-5);
+  text-align: center;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-loading {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--kb-space-2);
+}
+
+.kb-loading__spinner {
+  display: inline-block;
+  box-sizing: border-box;
+  border-style: solid;
+  border-color: var(--kb-color-primary);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: kb-loading-spin 0.8s linear infinite;
+}
+
+.kb-loading__text {
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+@keyframes kb-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.kb-message {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-2);
+  padding: var(--kb-space-2) var(--kb-space-4);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+  font-size: var(--kb-font-size-md);
+  color: var(--kb-color-text-1);
+}
+
+.kb-message--success {
+  color: var(--kb-color-success);
+}
+
+.kb-message--error {
+  color: var(--kb-color-danger);
+}
+
+.kb-message--warning {
+  color: var(--kb-color-warning);
+}
+
+.kb-message--info {
+  color: var(--kb-color-info);
+}
+
+.kb-message__content {
+  color: var(--kb-color-text-1);
+  line-height: 1.5;
+}
+
+.kb-notification {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kb-space-2);
+  width: 320px;
+  box-sizing: border-box;
+  padding: var(--kb-space-3) var(--kb-space-4);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-notification__icon {
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.kb-notification--success .kb-notification__icon {
+  color: var(--kb-color-success);
+}
+
+.kb-notification--error .kb-notification__icon {
+  color: var(--kb-color-danger);
+}
+
+.kb-notification--warning .kb-notification__icon {
+  color: var(--kb-color-warning);
+}
+
+.kb-notification--info .kb-notification__icon {
+  color: var(--kb-color-info);
+}
+
+.kb-notification__main {
+  flex: 1;
+}
+
+.kb-notification__title {
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  font-weight: 600;
+}
+
+.kb-notification__message {
+  margin-top: 2px;
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-sm);
+  line-height: 1.5;
+}
+
+.kb-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-1);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-pagination__total {
+  margin-right: var(--kb-space-2);
+  color: var(--kb-color-text-2);
+}
+
+.kb-pagination__item,
+.kb-pagination__prev,
+.kb-pagination__next {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  padding: 0 var(--kb-space-1);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+  transition:
+    border-color var(--kb-transition-duration) var(--kb-transition-timing),
+    color var(--kb-transition-duration) var(--kb-transition-timing),
+    background var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-pagination__prev:disabled,
+.kb-pagination__next:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.kb-pagination__item:hover:not(.kb-pagination__item--active),
+.kb-pagination__prev:hover:not(:disabled),
+.kb-pagination__next:hover:not(:disabled) {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-primary);
+}
+
+.kb-pagination__item--active {
+  border-color: var(--kb-color-primary);
+  background: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+}
+
+.kb-pagination__more {
+  color: var(--kb-color-text-3);
+  padding: 0 var(--kb-space-1);
+}
+
+.kb-popconfirm {
+  position: relative;
+  display: inline-block;
+}
+
+.kb-popconfirm__panel {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  z-index: var(--kb-z-index-modal);
+  min-width: 160px;
+  box-sizing: border-box;
+  padding: var(--kb-space-3);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+  transform: translateX(-50%);
+}
+
+.kb-popconfirm__title {
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-popconfirm__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--kb-space-2);
+  margin-top: var(--kb-space-3);
+}
+
+.kb-popconfirm__cancel,
+.kb-popconfirm__ok {
+  padding: var(--kb-space-1) var(--kb-space-3);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-sm);
+  cursor: pointer;
+}
+
+.kb-popconfirm__ok {
+  border-color: var(--kb-color-danger);
+  background: var(--kb-color-danger);
+  color: var(--kb-color-bg);
+}
+
+.kb-popconfirm__cancel:hover {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-primary);
+}
+
+.kb-popover {
+  position: relative;
+  display: inline-block;
+}
+
+.kb-popover__panel {
+  position: absolute;
+  z-index: var(--kb-z-index-modal);
+  min-width: 160px;
+  max-width: 280px;
+  box-sizing: border-box;
+  padding: var(--kb-space-3);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-popover__panel--top {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.kb-popover__panel--bottom {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.kb-popover__panel--left {
+  top: 50%;
+  right: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+
+.kb-popover__panel--right {
+  top: 50%;
+  left: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+
+.kb-popover__title {
+  margin-bottom: var(--kb-space-1);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  font-weight: 600;
+}
+
+.kb-popover__content {
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-sm);
+  line-height: 1.6;
+}
+
+.kb-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-2);
+  width: 100%;
+}
+
+.kb-progress__track {
+  flex: 1;
+  overflow: hidden;
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-progress__bar {
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-primary-gradient);
+  transition: width var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-progress__bar--success {
+  background: var(--kb-color-success);
+}
+
+.kb-progress__bar--warning {
+  background: var(--kb-color-warning);
+}
+
+.kb-progress__bar--danger {
+  background: var(--kb-color-danger);
+}
+
+.kb-progress__text {
+  min-width: 40px;
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-sm);
+  text-align: right;
+}
+
+.kb-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kb-space-1);
+  cursor: pointer;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  user-select: none;
+}
+
+.kb-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-radio__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.kb-radio__inner {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: 50%;
+  background: var(--kb-color-bg);
+  transition:
+    border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-radio__inner::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--kb-color-bg);
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-radio--checked .kb-radio__inner {
+  border-color: var(--kb-color-primary);
+}
+
+.kb-radio--checked .kb-radio__inner::after {
+  background: var(--kb-color-primary);
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.kb-radio__label {
+  line-height: 1;
+}
+
+.kb-rate {
+  display: inline-flex;
+  gap: var(--kb-space-1);
+  font-size: 20px;
+  line-height: 1;
+}
+
+.kb-rate__star {
+  color: var(--kb-color-border);
+  cursor: pointer;
+  user-select: none;
+  transition: color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-rate__star:hover {
+  color: var(--kb-color-warning);
+}
+
+.kb-rate__star--active {
+  color: var(--kb-color-warning);
+}
+
+.kb-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kb-space-2);
+  padding: var(--kb-space-6);
+  text-align: center;
+}
+
+.kb-result__icon--success {
+  color: var(--kb-color-success);
+}
+
+.kb-result__icon--error {
+  color: var(--kb-color-danger);
+}
+
+.kb-result__icon--warning {
+  color: var(--kb-color-warning);
+}
+
+.kb-result__icon--info {
+  color: var(--kb-color-info);
+}
+
+.kb-result__title {
+  margin: var(--kb-space-2) 0 0;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-xl);
+}
+
+.kb-result__description {
+  margin: 0;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-result__action {
+  margin-top: var(--kb-space-3);
+}
+
+.kb-search {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  overflow: hidden;
+  transition: border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-search:focus-within {
+  border-color: var(--kb-color-primary);
+}
+
+.kb-search__icon {
+  margin-left: var(--kb-space-2);
+  color: var(--kb-color-text-3);
+}
+
+.kb-search__input {
+  flex: 1;
+  min-width: 160px;
+  padding: var(--kb-space-2);
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-search__input::placeholder {
+  color: var(--kb-color-text-3);
+}
+
+.kb-search__button {
+  padding: var(--kb-space-2) var(--kb-space-4);
+  border: none;
+  background: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+}
+
+.kb-search__button:hover {
+  filter: brightness(0.94);
+}
+
+.kb-segmented {
+  display: inline-flex;
+  padding: 3px;
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg-elevated);
+  gap: 2px;
+}
+
+.kb-segmented__item {
+  padding: var(--kb-space-1) var(--kb-space-3);
+  border-radius: var(--kb-radius-sm);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background var(--kb-transition-duration) var(--kb-transition-timing),
+    color var(--kb-transition-duration) var(--kb-transition-timing),
+    box-shadow var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-segmented__item--active {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-primary);
+  box-shadow: var(--kb-shadow-1);
+  font-weight: 500;
+}
+
+.kb-segmented__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-select {
+  position: relative;
+  display: inline-block;
+  width: 200px;
+  box-sizing: border-box;
+}
+
+.kb-select__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 34px;
+  padding: 0 var(--kb-space-3);
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  cursor: pointer;
+  transition:
+    border-color var(--kb-transition-duration) var(--kb-transition-timing),
+    box-shadow var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-select__trigger:hover {
+  border-color: var(--kb-color-text-3);
+}
+
+.kb-select--open .kb-select__trigger {
+  border-color: var(--kb-color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-color-primary) 15%, transparent);
+}
+
+.kb-select--small .kb-select__trigger {
+  height: 28px;
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-select--large .kb-select__trigger {
+  height: 40px;
+  font-size: var(--kb-font-size-lg);
+}
+
+.kb-select--disabled .kb-select__trigger {
+  border-color: var(--kb-color-border);
+  background: var(--kb-color-bg-elevated);
+  cursor: not-allowed;
+  color: var(--kb-color-text-3);
+}
+
+.kb-select__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--kb-color-text-1);
+}
+
+.kb-select__placeholder {
+  color: var(--kb-color-text-3);
+}
+
+.kb-select__arrow {
+  margin-left: var(--kb-space-2);
+  color: var(--kb-color-text-3);
+  font-size: 12px;
+  transition: transform var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-select--open .kb-select__arrow {
+  transform: rotate(180deg);
+}
+
+.kb-select__panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: var(--kb-z-index-modal);
+  box-sizing: border-box;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: var(--kb-space-1);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-select__option {
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border-radius: var(--kb-radius-sm);
+  font-size: var(--kb-font-size-md);
+  color: var(--kb-color-text-1);
+  cursor: pointer;
+}
+
+.kb-select__option:hover:not(.kb-select__option--disabled) {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-select__option--selected {
+  color: var(--kb-color-primary);
+  font-weight: 500;
+}
+
+.kb-select__option--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kb-space-2);
+}
+
+.kb-skeleton__item {
+  height: 14px;
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-skeleton__item:nth-child(2) {
+  width: 80%;
+}
+
+.kb-skeleton__item:nth-child(3) {
+  width: 60%;
+}
+
+.kb-skeleton--animated .kb-skeleton__item {
+  background: linear-gradient(
+    90deg,
+    var(--kb-color-bg-elevated) 25%,
+    color-mix(in srgb, var(--kb-color-border) 40%, var(--kb-color-bg-elevated)) 37%,
+    var(--kb-color-bg-elevated) 63%
+  );
+  background-size: 400% 100%;
+  animation: kb-skeleton-loading 1.4s ease infinite;
+}
+
+@keyframes kb-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+.kb-slider {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.kb-slider__track {
+  position: relative;
+  flex: 1;
+  height: 6px;
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-slider__fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-primary);
+}
+
+.kb-slider__handle {
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--kb-color-primary);
+  border-radius: 50%;
+  background: var(--kb-color-bg);
+  transform: translate(-50%, -50%);
+  box-shadow: var(--kb-shadow-1);
+  transition: box-shadow var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-slider__handle:hover {
+  box-shadow: 0 0 0 6px color-mix(in srgb, var(--kb-color-primary) 15%, transparent);
+}
+
+.kb-slider--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-space {
+  display: inline-flex;
+}
+
+.kb-space--vertical {
+  flex-direction: column;
+}
+
+.kb-space--wrap {
+  flex-wrap: wrap;
+}
+
+.kb-space--align-start {
+  align-items: flex-start;
+}
+
+.kb-space--align-center {
+  align-items: center;
+}
+
+.kb-space--align-end {
+  align-items: flex-end;
+}
+
+.kb-space--align-baseline {
+  align-items: baseline;
+}
+
+.kb-statistic {
+  box-sizing: border-box;
+  padding: var(--kb-space-3);
+}
+
+.kb-statistic__title {
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-statistic__value {
+  margin-top: var(--kb-space-1);
+  color: var(--kb-color-text-1);
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.3;
+  font-variant-numeric: tabular-nums;
+}
+
+.kb-statistic__prefix,
+.kb-statistic__suffix {
+  font-size: var(--kb-font-size-md);
+  font-weight: 400;
+  color: var(--kb-color-text-2);
+}
+
+.kb-statistic__extra {
+  margin-top: var(--kb-space-2);
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-steps {
+  display: flex;
+  width: 100%;
+}
+
+.kb-steps__item {
+  display: flex;
+  align-items: flex-start;
+  flex: 1;
+}
+
+.kb-steps__item:last-child {
+  flex: none;
+}
+
+.kb-steps__head {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.kb-steps__circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  box-sizing: border-box;
+  border: 2px solid var(--kb-color-border);
+  border-radius: 50%;
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+  flex-shrink: 0;
+  transition:
+    border-color var(--kb-transition-duration) var(--kb-transition-timing),
+    color var(--kb-transition-duration) var(--kb-transition-timing),
+    background var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-steps__line {
+  flex: 1;
+  height: 2px;
+  margin: 0 var(--kb-space-2);
+  background: var(--kb-color-border);
+  transition: background var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-steps__item--active .kb-steps__circle {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-primary);
+}
+
+.kb-steps__item--active .kb-steps__line {
+  background: var(--kb-color-primary);
+}
+
+.kb-steps__item--done .kb-steps__circle {
+  border-color: var(--kb-color-primary);
+  background: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+}
+
+.kb-steps__item--done .kb-steps__line {
+  background: var(--kb-color-primary);
+}
+
+.kb-steps__body {
+  margin-left: var(--kb-space-2);
+  padding-top: 4px;
+}
+
+.kb-steps__title {
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  font-weight: 500;
+}
+
+.kb-steps__description {
+  margin-top: 2px;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+  box-sizing: border-box;
+  padding: 0;
+  border: none;
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-border);
+  cursor: pointer;
+  transition:
+    background var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-switch--checked {
+  background: var(--kb-color-primary);
+}
+
+.kb-switch--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-switch__dot {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-1);
+  transition: transform var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-switch--checked .kb-switch__dot {
+  transform: translateX(18px);
+}
+
+.kb-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-table th {
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border-bottom: 1px solid var(--kb-color-border);
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-text-2);
+  font-weight: 600;
+  text-align: left;
+}
+
+.kb-table td {
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border-bottom: 1px solid var(--kb-color-border);
+  color: var(--kb-color-text-1);
+}
+
+.kb-table tbody tr:hover {
+  background: color-mix(in srgb, var(--kb-color-primary) 4%, transparent);
+}
+
+.kb-table--stripe tbody tr:nth-child(even) {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-table--border {
+  border: 1px solid var(--kb-color-border);
+}
+
+.kb-table--border th,
+.kb-table--border td {
+  border-right: 1px solid var(--kb-color-border);
+}
+
+.kb-table--border th:last-child,
+.kb-table--border td:last-child {
+  border-right: none;
+}
+
+.kb-tabs {
+  width: 100%;
+}
+
+.kb-tabs__nav {
+  display: flex;
+  gap: var(--kb-space-1);
+  border-bottom: 1px solid var(--kb-color-border);
+}
+
+.kb-tabs__tab {
+  padding: var(--kb-space-2) var(--kb-space-4);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+  user-select: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition:
+    color var(--kb-transition-duration) var(--kb-transition-timing),
+    border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-tabs__tab:hover:not(.kb-tabs__tab--disabled) {
+  color: var(--kb-color-primary);
+}
+
+.kb-tabs__tab--active {
+  color: var(--kb-color-primary);
+  border-bottom-color: var(--kb-color-primary);
+  font-weight: 500;
+}
+
+.kb-tabs__tab--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-tabs__panel {
+  padding: var(--kb-space-3) 0;
+}
+
+.kb-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kb-space-1);
+  box-sizing: border-box;
+  padding: 0 var(--kb-space-2);
+  height: 24px;
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-xs);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.kb-tag--small {
+  height: 20px;
+  font-size: var(--kb-font-size-xs);
+}
+
+.kb-tag--large {
+  height: 28px;
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-tag--round {
+  border-radius: var(--kb-radius-round);
+}
+
+.kb-tag--primary {
+  background: color-mix(in srgb, var(--kb-color-primary) 12%, transparent);
+  color: var(--kb-color-primary);
+}
+
+.kb-tag--success {
+  background: color-mix(in srgb, var(--kb-color-success) 12%, transparent);
+  color: var(--kb-color-success);
+}
+
+.kb-tag--warning {
+  background: color-mix(in srgb, var(--kb-color-warning) 12%, transparent);
+  color: var(--kb-color-warning);
+}
+
+.kb-tag--danger {
+  background: color-mix(in srgb, var(--kb-color-danger) 12%, transparent);
+  color: var(--kb-color-danger);
+}
+
+.kb-tag--info {
+  background: color-mix(in srgb, var(--kb-color-info) 12%, transparent);
+  color: var(--kb-color-info);
+}
+
+.kb-tag__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.kb-tag__close:hover {
+  opacity: 1;
+}
+
+.kb-textarea {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.kb-textarea__inner {
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  outline: none;
+  resize: vertical;
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-family: var(--kb-font-family);
+  font-size: var(--kb-font-size-md);
+  line-height: 1.6;
+  transition: border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-textarea__inner:focus {
+  border-color: var(--kb-color-primary);
+}
+
+.kb-textarea__inner::placeholder {
+  color: var(--kb-color-text-3);
+}
+
+.kb-textarea--disabled .kb-textarea__inner {
+  background: var(--kb-color-bg-elevated);
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-textarea__count {
+  position: absolute;
+  right: var(--kb-space-2);
+  bottom: var(--kb-space-1);
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-xs);
+}
+
+.kb-timeline {
+  padding: var(--kb-space-2) 0;
+}
+
+.kb-timeline__item {
+  display: flex;
+}
+
+.kb-timeline__node {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-right: var(--kb-space-3);
+}
+
+.kb-timeline__dot {
+  width: 10px;
+  height: 10px;
+  box-sizing: border-box;
+  border: 2px solid var(--kb-color-primary);
+  border-radius: 50%;
+  background: var(--kb-color-bg);
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.kb-timeline__dot--default {
+  border-color: var(--kb-color-border);
+  background: var(--kb-color-border);
+}
+
+.kb-timeline__dot--success {
+  border-color: var(--kb-color-success);
+}
+
+.kb-timeline__dot--warning {
+  border-color: var(--kb-color-warning);
+}
+
+.kb-timeline__dot--danger {
+  border-color: var(--kb-color-danger);
+}
+
+.kb-timeline__tail {
+  position: absolute;
+  top: 16px;
+  bottom: -8px;
+  left: 50%;
+  width: 2px;
+  background: var(--kb-color-border);
+  transform: translateX(-50%);
+}
+
+.kb-timeline__main {
+  flex: 1;
+  padding-bottom: var(--kb-space-4);
+}
+
+.kb-timeline__content {
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  line-height: 1.5;
+}
+
+.kb-timeline__time {
+  margin-top: 2px;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.kb-tooltip__popper {
+  position: absolute;
+  z-index: var(--kb-z-index-modal);
+  max-width: 240px;
+  padding: var(--kb-space-1) var(--kb-space-2);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-text-1);
+  color: var(--kb-color-bg);
+  font-size: var(--kb-font-size-xs);
+  line-height: 1.5;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.kb-tooltip__popper--top {
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.kb-tooltip__popper--bottom {
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.kb-tooltip__popper--left {
+  top: 50%;
+  right: calc(100% + 6px);
+  transform: translateY(-50%);
+}
+
+.kb-tooltip__popper--right {
+  top: 50%;
+  left: calc(100% + 6px);
+  transform: translateY(-50%);
+}
+
+.kb-transfer {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-2);
+}
+
+.kb-transfer__box {
+  width: 180px;
+  height: 220px;
+  overflow-y: auto;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+}
+
+.kb-transfer__title {
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border-bottom: 1px solid var(--kb-color-border);
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-transfer__item {
+  padding: var(--kb-space-2) var(--kb-space-3);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+}
+
+.kb-transfer__item:hover {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-transfer__item--selected {
+  background: color-mix(in srgb, var(--kb-color-primary) 12%, transparent);
+  color: var(--kb-color-primary);
+}
+
+.kb-transfer__actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kb-space-2);
+}
+
+.kb-transfer__move {
+  width: 36px;
+  height: 32px;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+}
+
+.kb-transfer__move:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.kb-transfer__move:hover:not(:disabled) {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-primary);
+}
+
+.kb-tree {
+  font-size: var(--kb-font-size-md);
+  color: var(--kb-color-text-1);
+}
+
+.kb-tree__row {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  border-radius: var(--kb-radius-sm);
+}
+
+.kb-tree__row:hover {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-tree__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--kb-color-text-3);
+  cursor: pointer;
+  transition: transform var(--kb-transition-duration) var(--kb-transition-timing);
+  flex-shrink: 0;
+}
+
+.kb-tree__toggle--open {
+  transform: rotate(90deg);
+}
+
+.kb-tree__toggle--leaf {
+  cursor: default;
+}
+
+.kb-tree__label {
+  padding: 2px var(--kb-space-2);
+  border-radius: var(--kb-radius-sm);
+  cursor: pointer;
+}
+
+.kb-tree__label--selected {
+  background: color-mix(in srgb, var(--kb-color-primary) 12%, transparent);
+  color: var(--kb-color-primary);
+}
+
+.kb-tree__children {
+  margin-left: var(--kb-space-4);
+}
+
+.kb-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kb-space-2);
+  align-items: flex-start;
+}
+
+.kb-upload__button {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--kb-space-2) var(--kb-space-4);
+  border: 1px dashed var(--kb-color-primary);
+  border-radius: var(--kb-radius-md);
+  background: color-mix(in srgb, var(--kb-color-primary) 6%, transparent);
+  color: var(--kb-color-primary);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+}
+
+.kb-upload__button input {
+  display: none;
+}
+
+.kb-upload__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kb-space-1);
+  width: 100%;
+}
+
+.kb-upload__item {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-2);
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg);
+}
+
+.kb-upload__name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-upload__size {
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-xs);
+}
+
+.kb-upload__delete {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-lg);
+  cursor: pointer;
+}
+
+.kb-upload__delete:hover {
+  color: var(--kb-color-danger);
+}
+
+.kb-watermark {
+  position: relative;
+}
+
+.kb-watermark__layer {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background-repeat: repeat;
+  background-size: 200px 140px;
+  pointer-events: none;
+}
+
+.kb-watermark__content {
+  position: relative;
+  z-index: 2;
+}