@yymojo-tec/mojo-ui 0.1.1 → 0.1.2

package/README.md

@@ -208,4 +208,158 @@ pnpm build
 ```bash
 pnpm release:dry
 ```
+
+## Upload SDK
+
+`MoUpload` 默认只负责选择文件、预览、裁切和维护文件状态，不会在选择文件后自动上传，也不会执行模拟上传。需要上传时，由外部手动触发：
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import type { UploadFileItem } from "@yymojo-tec/mojo-ui";
+
+const uploadRef = ref<{ submit: () => Promise<unknown[]> }>();
+
+function submitUpload() {
+  uploadRef.value?.submit();
+}
+
+function handleSuccess(file: UploadFileItem, response: unknown) {
+  console.log(file, response);
+}
+</script>
+
+<template>
+  <MoUpload
+    ref="uploadRef"
+    action="/api/upload"
+    :headers="{ Authorization: `Bearer ${token}` }"
+    :data="{ scene: 'avatar' }"
+    name="file"
+    @success="handleSuccess"
+  />
+
+  <MoButton @click="submitUpload">开始上传</MoButton>
+</template>
+```
+
+如果业务需要完全接管上传请求，可以传 `request`：
+
+```vue
+<MoUpload :request="customUpload" />
+```
+
+```ts
+async function customUpload({ file, onProgress }) {
+  const formData = new FormData();
+  formData.append("file", file);
+
+  await axios.post("/api/upload", formData, {
+    onUploadProgress(event) {
+      if (event.total) {
+        onProgress((event.loaded / event.total) * 100);
+      }
+    }
+  });
+}
+```
+
+也可以独立使用上传 SDK：
+
+```ts
+import { uploadFile } from "@yymojo-tec/mojo-ui";
+
+await uploadFile({
+  file,
+  action: "/api/upload",
+  headers: { Authorization: `Bearer ${token}` },
+  data: { scene: "avatar" },
+  onProgress(percent) {
+    console.log(percent);
+  }
+});
+```
+
+## Scrollbar
+
+`MoScrollbar` 绑定一个外部滚动容器，滚动条会显示在该容器右侧 border 内侧、padding 外侧，并使用外部容器的高度作为滚动轨道。
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+
+const panelRef = ref<HTMLElement>();
+</script>
+
+<template>
+  <div ref="panelRef" class="panel">
+    <div class="content">...</div>
+  </div>
+
+  <MoScrollbar :target="panelRef" theme="dark" />
+</template>
+
+<style scoped>
+.panel {
+  position: relative;
+  height: 360px;
+  overflow: auto;
+  padding: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+</style>
+```
+
+常用参数：
+
+- `target`: 外部滚动容器 ref 或元素
+- `size`: 滚动条宽度，默认 `6`
+- `minThumbSize`: 滑块最小高度，默认 `28`
+- `offset`: 距离右侧 border 的偏移量，默认 `0`
+- `always`: 是否常显
+- `hideNative`: 是否隐藏原生滚动条，默认 `true`
+
+## Dialog
+
+`MoDialog` 基于 Headless UI Dialog 封装，使用 `v-model` 控制显示，默认带标题和关闭按钮。
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+
+const visible = ref(false);
+</script>
+
+<template>
+  <MoButton @click="visible = true">打开弹窗</MoButton>
+
+  <MoDialog v-model="visible" title="创建智能体" theme="dark" :padding="24">
+    <p>这里放弹窗内容。</p>
+
+    <template #footer>
+      <MoButton theme="dark" type="ghost" @click="visible = false">取消</MoButton>
+      <MoButton theme="dark" type="primary" @click="visible = false">确认</MoButton>
+    </template>
+  </MoDialog>
+</template>
+```
+
+隐藏右上角关闭按钮：
+
+```vue
+<MoDialog v-model="visible" title="提示" :show-close="false">
+  内容
+</MoDialog>
+```
+
+常用参数：
+
+- `v-model`: 是否显示
+- `title`: 标题
+- `theme`: `light | dark`
+- `width`: 弹窗宽度，默认 `520`
+- `padding`: 内容和标题左右 padding，默认 `24`
+- `showClose`: 是否显示右上角关闭按钮，默认 `true`
+- `closeOnOverlay`: 点击遮罩或按 Esc 是否关闭，默认 `true`
+- `lockScroll`: 是否锁住页面滚动，默认 `false`
 

package/dist/mojo-ui.css

@@ -1 +1 @@
-:root{--mo-radius-base: 6px;--mo-transition: .16s ease}:root,[data-mojo-theme=light],.mo-theme--light{--mo-bg: #f6f7fb;--mo-header-bg: #ffffff;--mo-sidebar-bg: #ffffff;--mo-panel-bg: #ffffff;--mo-panel-bg-secondary: #f0f2f8;--mo-field-bg: #f8f9fc;--mo-primary: #6f55e8;--mo-primary-hover: #5f48d6;--mo-secondary: #b43fd2;--mo-secondary-hover: #9f34bd;--mo-gradient-start: #6f55e8;--mo-gradient-end: #b43fd2;--mo-text-primary: #202337;--mo-text-secondary: #5d6278;--mo-text-tertiary: #8b91a4;--mo-success: #1d9e75;--mo-success-hover: #168865;--mo-warning: #f6c544;--mo-warning-hover: #dea915;--mo-error: #e04472;--mo-error-hover: #c73360;--mo-border: rgba(31, 36, 54, .1);--mo-border-active: #6f55e8;--mo-disabled-bg: #eef0f6;--mo-disabled-text: #a2a7b8}[data-mojo-theme=dark],.mo-theme--dark{--mo-bg: #09070f;--mo-header-bg: #120f1e;--mo-sidebar-bg: #120f1e;--mo-panel-bg: #14171e;--mo-panel-bg-secondary: #262138;--mo-field-bg: #14101f;--mo-primary: #8b5cff;--mo-primary-hover: #9c76ff;--mo-secondary: #c44fe0;--mo-secondary-hover: #d46bea;--mo-gradient-start: #7b5cff;--mo-gradient-end: #c44fe0;--mo-text-primary: #eeeaff;--mo-text-secondary: #a09bbd;--mo-text-tertiary: #6f6a86;--mo-success: #1d9e75;--mo-success-hover: #25b688;--mo-warning: #f6c544;--mo-warning-hover: #ffd86a;--mo-error: #ff5c8a;--mo-error-hover: #ff7aa1;--mo-border: transparent;--mo-border-active: #8b5cff;--mo-disabled-bg: #201b32;--mo-disabled-text: #6f6a86}*{box-sizing:border-box}.mo-button{--mo-button-bg: var(--mo-button-custom-bg, var(--mo-panel-bg));--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-text-secondary, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-bg) 88%, var(--mo-primary));--mo-button-hover-border: var(--mo-border-active);--mo-button-hover-color: var(--mo-primary);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:max-content;padding:10px;border:1px solid var(--mo-button-border);border-radius:var(--mo-radius-base);background:var(--mo-button-bg);color:var(--mo-button-color);font:inherit;font-size:14px;line-height:1;white-space:nowrap;cursor:pointer;transition:background var(--mo-transition),border-color var(--mo-transition),box-shadow var(--mo-transition),color var(--mo-transition),opacity var(--mo-transition),transform var(--mo-transition)}.mo-button:hover:not(.is-disabled,.is-loading){border-color:var(--mo-button-hover-border);background:var(--mo-button-hover-bg);color:var(--mo-button-hover-color)}.mo-button:active:not(.is-disabled,.is-loading){transform:translateY(1px)}.mo-button.is-block{width:100%}.mo-button.is-disabled,.mo-button.is-loading{cursor:not-allowed;opacity:.72}.mo-button.is-disabled{--mo-button-bg: var(--mo-disabled-bg);--mo-button-border: var(--mo-border);--mo-button-color: var(--mo-disabled-text)}.mo-button.is-round{border-radius:999px}.mo-button.is-icon-only{min-width:38px}.mo-button--small{gap:6px;padding:6px 10px;height:max-content;font-size:12px}.mo-button--small.is-icon-only{width:32px;min-width:32px}.mo-button--large{gap:10px;height:max-content;padding:14px;border-radius:12px;font-size:16px}.mo-button--large.is-icon-only{width:52px;min-width:52px}.mo-button--primary{--mo-button-accent: var(--mo-primary);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 12%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button--ghost{--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-primary) 14%, transparent);--mo-button-hover-border: var(--mo-border-active);--mo-button-hover-color: var(--mo-text-primary)}.mo-button--secondary{--mo-button-accent: var(--mo-secondary);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 12%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button--gradient{--mo-button-bg: linear-gradient(90deg, var(--mo-gradient-start), var(--mo-gradient-end));--mo-button-border: var(--mo-button-custom-border, transparent);--mo-button-color: var(--mo-button-custom-color, #ffffff);--mo-button-hover-bg: linear-gradient(90deg, var(--mo-primary-hover), var(--mo-secondary-hover));--mo-button-hover-border: transparent;--mo-button-hover-color: #ffffff;background:var(--mo-button-custom-bg, var(--mo-button-bg));box-shadow:0 10px 24px #8b5cff3d}.mo-button--gradient:hover:not(.is-disabled,.is-loading){background:var(--mo-button-custom-bg, var(--mo-button-hover-bg));box-shadow:0 12px 28px #c44fe047}.mo-button--success{--mo-button-accent: var(--mo-success);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 12%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button--warning{--mo-button-accent: var(--mo-warning);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 14%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button--danger{--mo-button-accent: var(--mo-error);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 12%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button__content{min-width:0;overflow:hidden;line-height:1;text-overflow:ellipsis}.mo-button__icon svg,.mo-button__spinner svg{width:1em;height:1em}.mo-button__spinner{border:2px solid currentcolor;border-right-color:transparent;border-radius:50%;animation:mo-button-spin .8s linear infinite}@keyframes mo-button-spin{to{transform:rotate(360deg)}}.mo-card{--mo-card-bg: var(--mo-panel-bg);--mo-card-border: var(--mo-border);--mo-card-border-hover: var(--mo-border-active);--mo-card-shadow: 0 14px 34px rgba(31, 36, 54, .1);--mo-card-shadow-dark: 0 16px 36px rgba(0, 0, 0, .28);position:relative;overflow:hidden;border:1px solid var(--mo-card-border);border-radius:8px;background:var(--mo-card-bg);color:var(--mo-text-primary);transition:border-color var(--mo-transition),box-shadow var(--mo-transition),transform var(--mo-transition)}.mo-card.is-hoverable:hover{border-color:var(--mo-card-border-hover)}.mo-card.is-selectable{cursor:pointer;outline:none}.mo-card.is-selectable:focus-visible{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 18%,transparent)}.mo-card.is-selected{border-color:var(--mo-primary);background:linear-gradient(135deg,color-mix(in srgb,var(--mo-primary) 10%,transparent),transparent 42%),var(--mo-card-bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--mo-primary) 26%,transparent)}.mo-card.is-selected.is-hoverable:hover{border-color:var(--mo-primary)}.mo-card.is-hoverable.is-animated:hover{transform:translateY(-4px)}.mo-card--shadow-always{box-shadow:var(--mo-card-shadow)}.mo-theme--dark.mo-card--shadow-always{box-shadow:var(--mo-card-shadow-dark)}.mo-card--shadow-hover.is-hoverable:hover{box-shadow:var(--mo-card-shadow)}.mo-theme--dark.mo-card--shadow-hover.is-hoverable:hover{box-shadow:var(--mo-card-shadow-dark)}.mo-card--shadow-never{box-shadow:none}.mo-card--border-solid{border-style:solid}.mo-card--border-dashed{border-style:dashed}.mo-card--border-dotted{border-style:dotted}.mo-card--border-none{border-color:transparent}.mo-card__header,.mo-card__body,.mo-card__footer,.mo-card__selected-mark{position:relative;z-index:1}.mo-card__selected-mark{position:absolute;top:8px;right:8px;display:flex;width:16px;height:16px;align-items:center;justify-content:center;color:#f6c544;font-size:12px;line-height:1;pointer-events:none}.mo-card__header{padding:18px 18px 0}.mo-card__body{padding:18px}.mo-card__footer{padding:0 18px 18px}.mo-form{color:var(--mo-text-primary)}.mo-form-item{display:flex;margin-bottom:24px}.mo-form--label-top .mo-form-item{display:block}.mo-form-item__label{display:inline-flex;align-items:center;min-height:24px;width:var(--mo-form-label-width, auto);padding-right:12px;color:var(--mo-text-primary);font-size:14px;line-height:1.5;white-space:nowrap}.mo-form--label-left .mo-form-item__label{justify-content:flex-start;text-align:left}.mo-form--label-right .mo-form-item__label{justify-content:flex-end;text-align:right}.mo-form--label-top .mo-form-item__label{justify-content:flex-start;width:auto;margin-bottom:5px;padding-right:0}.mo-form-item__asterisk{margin:0 4px 0 0;color:var(--mo-error);font-weight:700}.mo-form-item__suffix{margin-left:2px}.mo-form-item__content{position:relative;min-width:0;flex:1}.mo-form-item__help{margin-top:8px;color:var(--mo-text-secondary);font-size:13px;line-height:1.5}.mo-form-item__error{position:absolute;top:calc(100% + 2px);left:0;z-index:2;margin-top:0;color:var(--mo-error);font-size:12px;line-height:1.5;pointer-events:none}.mo-form-item.is-error :where(input,textarea,select){border-color:var(--mo-error)}.mo-input{position:relative;width:100%;color:var(--mo-text-primary)}.mo-input__inner{width:100%;border:1px solid var(--mo-border-active);border-radius:8px;outline:none;background:var(--mo-field-bg);color:var(--mo-text-primary);font:inherit;transition:border-color var(--mo-transition),box-shadow var(--mo-transition)}.mo-input__tag-wrapper{display:flex;width:100%;min-height:46px;align-items:center;gap:8px;padding:5px;border:1px solid var(--mo-border-active);border-radius:8px;background:var(--mo-field-bg);color:var(--mo-text-primary);transition:border-color var(--mo-transition),box-shadow var(--mo-transition)}.mo-input__inner::placeholder,.mo-input__tag-input::placeholder{color:var(--mo-text-tertiary)}.mo-input__inner:hover,.mo-input__tag-wrapper:hover{border-color:var(--mo-primary)}.mo-input__inner:focus{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 18%,transparent)}.mo-input__tag-wrapper:focus-within{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 18%,transparent)}.mo-input:not(.is-textarea) .mo-input__inner{height:46px;padding:0 42px 0 16px}.mo-input--small:not(.is-textarea) .mo-input__inner{height:36px;padding:0 36px 0 12px;font-size:13px}.mo-input--large:not(.is-textarea) .mo-input__inner{height:56px;padding:0 46px 0 18px;font-size:16px}.mo-input--small .mo-input__tag-wrapper{min-height:36px;gap:6px;padding:5px;font-size:13px}.mo-input--large .mo-input__tag-wrapper{min-height:56px;gap:10px;padding:7px 16px;font-size:16px}.mo-input.is-textarea .mo-input__inner{min-height:calc(var(--mo-input-rows, 3) * 28px + 34px);padding:14px 16px 30px;line-height:1.6}.mo-input--small.is-textarea .mo-input__inner{min-height:calc(var(--mo-input-rows, 3) * 22px + 28px);padding:10px 12px 26px;font-size:13px}.mo-input--large.is-textarea .mo-input__inner{min-height:calc(var(--mo-input-rows, 3) * 32px + 42px);padding:18px 18px 34px;font-size:16px}.mo-input__count{position:absolute;right:14px;bottom:8px;color:var(--mo-text-secondary);font-size:12px;line-height:1;pointer-events:none}.mo-input__tag{display:inline-flex;max-width:180px;height:30px;align-items:center;gap:8px;padding:0 10px;border:1px solid color-mix(in srgb,var(--mo-primary) 34%,var(--mo-border));border-radius:6px;background:color-mix(in srgb,var(--mo-primary) 14%,var(--mo-panel-bg));color:var(--mo-primary);flex:0 0 auto;font-size:14px;line-height:1}.mo-input--small .mo-input__tag{height:28px;padding:0 9px;font-size:13px}.mo-input--large .mo-input__tag{height:34px;padding:0 12px;font-size:15px}.mo-input__tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mo-input__tag-close{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:currentcolor;cursor:pointer;flex:0 0 auto;font:inherit;line-height:1;opacity:.76}.mo-input__tag-close:hover{opacity:1}.mo-input__tag-input{min-width:120px;height:30px;border:0;outline:none;background:transparent;color:var(--mo-text-primary);font:inherit;flex:1 1 140px}.mo-input__clear{position:absolute;top:50%;right:12px;width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:var(--mo-text-tertiary);cursor:pointer;transform:translateY(-50%)}.mo-input__clear:hover{color:var(--mo-primary)}.mo-input.is-disabled .mo-input__inner,.mo-input.is-disabled .mo-input__tag-wrapper{cursor:not-allowed;background:var(--mo-disabled-bg);color:var(--mo-disabled-text)}.mo-row{display:flex;flex-wrap:wrap;margin-right:calc(var(--mo-row-gutter-half, 0px) * -1);margin-left:calc(var(--mo-row-gutter-half, 0px) * -1)}.mo-row.is-nowrap{flex-wrap:nowrap}.mo-row--justify-start{justify-content:flex-start}.mo-row--justify-center{justify-content:center}.mo-row--justify-end{justify-content:flex-end}.mo-row--justify-space-between{justify-content:space-between}.mo-row--justify-space-around{justify-content:space-around}.mo-row--justify-space-evenly{justify-content:space-evenly}.mo-row--align-top{align-items:flex-start}.mo-row--align-middle{align-items:center}.mo-row--align-bottom{align-items:flex-end}.mo-row--align-stretch{align-items:stretch}.mo-col{display:block;max-width:calc(var(--mo-col-span, 24) / 24 * 100%);min-height:1px;padding-right:var(--mo-row-gutter-half, 0px);padding-left:var(--mo-row-gutter-half, 0px);flex:0 0 calc(var(--mo-col-span, 24) / 24 * 100%)}.mo-menu{position:relative;display:inline-block}.mo-menu__trigger{height:36px;padding:0 14px;border:1px solid var(--mo-border);border-radius:8px;background:var(--mo-field-bg);color:var(--mo-text-primary);cursor:pointer;font:inherit}.mo-menu__items{position:absolute;z-index:30;width:var(--mo-menu-width);padding:4px;border:1px solid rgba(104,84,220,.22);border-radius:12px;outline:none;background:var(--mo-panel-bg);box-shadow:0 18px 42px #1f243624}.mo-theme--dark .mo-menu__items{box-shadow:0 18px 42px #00000057}.mo-menu--bottom-start .mo-menu__items{top:calc(100% + 8px);left:0}.mo-menu--bottom-end .mo-menu__items{top:calc(100% + 8px);right:0}.mo-menu--top-start .mo-menu__items{bottom:calc(100% + 8px);left:0}.mo-menu--top-end .mo-menu__items{right:0;bottom:calc(100% + 8px)}.mo-menu__item{display:flex;width:100%;align-items:flex-start;gap:14px;padding:10px 8px;border:0;border-radius:8px;background:transparent;color:var(--mo-text-primary);cursor:pointer;font:inherit;text-align:left;transition:background-color var(--mo-transition),opacity var(--mo-transition)}.mo-menu__item.is-active{background:color-mix(in srgb,var(--mo-primary) 10%,transparent)}.mo-menu__item.is-disabled{cursor:not-allowed;opacity:.48}.mo-menu__icon{display:inline-flex;width:18px;height:22px;align-items:center;justify-content:center;color:var(--mo-primary);flex:0 0 auto}.mo-menu__icon svg{width:18px;height:18px}.mo-menu__icon-dot{width:10px;height:10px;border:2px solid currentcolor;border-radius:50%}.mo-menu__text{display:grid;min-width:0;gap:4px}.mo-menu__label{color:var(--mo-text-primary);font-size:16px;font-weight:700;line-height:1.25}.mo-menu__description{color:var(--mo-text-secondary);font-size:13px;line-height:1.35}.mo-select{position:relative;width:100%;color:var(--mo-text-primary)}.mo-select__button{display:flex;width:100%;height:46px;align-items:center;justify-content:space-between;gap:12px;padding:0 14px 0 18px;border:1px solid var(--mo-border-active);border-radius:8px;outline:none;background:var(--mo-field-bg);color:var(--mo-text-primary);cursor:pointer;font:inherit;text-align:left;transition:border-color var(--mo-transition),box-shadow var(--mo-transition)}.mo-select__button:hover{border-color:var(--mo-primary)}.mo-select__button:focus-visible,.mo-select__button[data-headlessui-state~=open]{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 18%,transparent)}.mo-select--small .mo-select__button{height:36px;padding:0 12px 0 14px;font-size:13px}.mo-select--large .mo-select__button{height:56px;padding:0 16px 0 22px;font-size:16px}.mo-select__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mo-select.is-placeholder .mo-select__label{color:var(--mo-text-tertiary)}.mo-select__arrow{width:8px;height:8px;border-right:2px solid currentcolor;border-bottom:2px solid currentcolor;color:var(--mo-text-primary);flex:0 0 auto;transform:rotate(45deg) translateY(-2px);transition:transform var(--mo-transition)}.mo-select__button[data-headlessui-state~=open] .mo-select__arrow{transform:rotate(225deg) translateY(-2px)}.mo-select__options{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:100%;max-height:240px;margin:0;padding:6px;border:1px solid var(--mo-border);border-radius:8px;outline:none;background:var(--mo-panel-bg);box-shadow:0 14px 34px #1f243624;list-style:none;overflow:auto}.mo-theme--dark .mo-select__options{box-shadow:0 16px 36px #00000057}.mo-select__option{display:flex;min-height:34px;align-items:center;gap:10px;padding:0 12px;border-radius:6px;color:var(--mo-text-primary);cursor:pointer;font-size:14px}.mo-select__option.is-active{background:var(--mo-panel-bg-secondary);color:var(--mo-text-primary)}.mo-select__option.is-selected{color:var(--mo-text-primary);font-weight:500}.mo-select__check{position:relative;width:18px;height:18px;flex:0 0 auto;opacity:0}.mo-select__option.is-selected .mo-select__check{opacity:1}.mo-select__check:after{position:absolute;top:2px;left:6px;width:6px;height:11px;border-right:2px solid var(--mo-primary);border-bottom:2px solid var(--mo-primary);content:"";transform:rotate(45deg)}.mo-select__option.is-disabled{cursor:not-allowed;opacity:.48}.mo-select.is-disabled .mo-select__button{cursor:not-allowed;background:var(--mo-disabled-bg);color:var(--mo-disabled-text)}.mo-tabs{width:100%;color:var(--mo-text-primary)}.mo-tabs__list{position:relative;display:flex;width:100%;min-height:46px;padding:4px;border:1px solid var(--mo-border);border-radius:8px;background:var(--mo-field-bg)}.mo-tabs--small .mo-tabs__list{min-height:38px;padding:3px}.mo-tabs--large .mo-tabs__list{min-height:58px;padding:5px;border-radius:10px}.mo-tabs__indicator{position:absolute;top:4px;bottom:4px;left:4px;z-index:0;width:calc((100% - 8px) / var(--mo-tabs-count));border-radius:6px;background:linear-gradient(90deg,var(--mo-gradient-start),var(--mo-gradient-end));transform:translate(calc(var(--mo-tabs-active-index) * 100%));transition:transform .22s ease,width .22s ease}.mo-tabs--small .mo-tabs__indicator{top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--mo-tabs-count))}.mo-tabs--large .mo-tabs__indicator{top:5px;bottom:5px;left:5px;width:calc((100% - 10px) / var(--mo-tabs-count));border-radius:8px}.mo-tabs__tab{position:relative;z-index:1;display:inline-flex;min-width:0;align-items:center;justify-content:center;padding:0 18px;border:0;background:transparent;color:var(--mo-text-secondary);cursor:pointer;flex:1 1 0;font:inherit;font-size:14px;line-height:1;outline:none;transition:color var(--mo-transition),opacity var(--mo-transition)}.mo-tabs__tab.is-active{color:#fff;font-weight:700}.mo-tabs__tab:not(.is-active):hover{color:var(--mo-text-primary)}.mo-tabs__tab.is-disabled{cursor:not-allowed;opacity:.48}.mo-tabs--small .mo-tabs__tab{padding:0 14px;font-size:13px}.mo-tabs--large .mo-tabs__tab{padding:0 24px;font-size:16px}.mo-tabs__panels{margin-top:12px}.mo-tabs__panel{outline:none}.mo-upload{width:100%;color:var(--mo-text-primary)}.mo-upload__dropzone{display:grid;min-height:190px;place-items:center;padding:26px;border:1px dashed var(--mo-border-active);border-radius:12px;outline:none;background:var(--mo-field-bg);cursor:pointer;text-align:center;transition:border-color var(--mo-transition),box-shadow var(--mo-transition),background-color var(--mo-transition)}.mo-upload__dropzone:hover,.mo-upload__dropzone:focus-visible,.mo-upload.is-dragging .mo-upload__dropzone{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 16%,transparent)}.mo-upload__input{display:none}.mo-upload__icon{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,var(--mo-gradient-start),var(--mo-gradient-end));color:#fff;font-size:22px;font-weight:700}.mo-upload__title{margin-top:14px;color:var(--mo-text-primary);font-size:16px;font-weight:700}.mo-upload__action{margin-top:6px;color:var(--mo-primary);font-size:14px}.mo-upload__hint{margin-top:10px;color:var(--mo-text-secondary);font-size:13px;line-height:1.5}.mo-upload__dropzone.has-custom-dropzone>.mo-upload__icon,.mo-upload__dropzone.has-custom-dropzone>.mo-upload__title,.mo-upload__dropzone.has-custom-dropzone>.mo-upload__action,.mo-upload__dropzone.has-custom-dropzone>.mo-upload__hint{display:none}.mo-upload__list{display:grid;gap:12px;margin-top:14px}.mo-upload__file{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px;border:1px solid var(--mo-border);border-radius:10px;background:var(--mo-panel-bg)}.mo-upload__preview{width:64px;height:64px;overflow:hidden;border-radius:8px;background:var(--mo-panel-bg-secondary);color:var(--mo-text-secondary)}.mo-upload__preview.is-crop{width:var(--mo-upload-crop-size);height:var(--mo-upload-crop-size)}.mo-upload__preview.is-rect{width:var(--mo-upload-crop-preview-width);height:var(--mo-upload-crop-preview-height)}.mo-upload__preview.is-circle{border-radius:50%}.mo-upload__preview img,.mo-upload__preview video{display:block;width:100%;height:100%;object-fit:cover}.mo-upload__file-icon{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:12px;font-weight:700}.mo-upload__meta{min-width:0}.mo-upload__name{overflow:hidden;color:var(--mo-text-primary);font-weight:700;text-overflow:ellipsis;white-space:nowrap}.mo-upload__size,.mo-upload__status{margin-top:4px;color:var(--mo-text-secondary);font-size:12px}.mo-upload__progress{position:relative;height:6px;margin-top:8px;overflow:hidden;border-radius:999px;background:var(--mo-panel-bg-secondary)}.mo-upload__progress-bar{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mo-gradient-start),var(--mo-gradient-end));transition:width .18s ease}.mo-upload__status{display:flex;align-items:center;gap:10px}.mo-upload__status button,.mo-upload__remove{border:0;background:transparent;color:var(--mo-primary);cursor:pointer;font:inherit}.mo-upload__remove{width:28px;height:28px;border-radius:50%;color:var(--mo-text-tertiary);font-size:20px;line-height:1}.mo-upload__remove:hover{background:color-mix(in srgb,var(--mo-error) 12%,transparent);color:var(--mo-error)}.mo-upload-cropper{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:#00000094}.mo-upload-cropper__panel{width:min(420px,100%);padding:18px;border:1px solid var(--mo-border);border-radius:12px;background:var(--mo-panel-bg);color:var(--mo-text-primary);box-shadow:0 24px 64px #00000057}.mo-upload-cropper__header,.mo-upload-cropper__actions,.mo-upload-cropper__slider{display:flex;align-items:center;justify-content:space-between;gap:12px}.mo-upload-cropper__header{margin-bottom:14px}.mo-upload-cropper__header button{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--mo-text-secondary);cursor:pointer;font-size:20px}.mo-upload-cropper__stage{position:relative;width:320px;height:240px;margin:0 auto;overflow:hidden;border-radius:10px;background:var(--mo-field-bg);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.mo-upload-cropper__stage:active{cursor:grabbing}.mo-upload-cropper__image{position:absolute;top:50%;left:50%;max-width:none;transform-origin:center;-webkit-user-select:none;user-select:none}.mo-upload-cropper__frame{position:absolute;top:50%;left:50%;width:var(--mo-upload-crop-width);height:var(--mo-upload-crop-height);border:2px solid var(--mo-primary);box-shadow:0 0 0 999px #00000052;pointer-events:none;transform:translate(-50%,-50%)}.mo-upload-cropper__frame.is-circle{border-radius:50%}.mo-upload-cropper__slider{margin-top:16px;color:var(--mo-text-secondary);font-size:14px;display:none}.mo-upload-cropper__slider input{flex:1}.mo-upload-cropper__actions{justify-content:flex-end;margin-top:16px}.mo-upload-cropper__actions button{height:34px;padding:0 14px;border:1px solid var(--mo-border);border-radius:8px;background:transparent;color:var(--mo-text-primary);cursor:pointer;font:inherit}.mo-upload-cropper__actions button:last-child{border-color:transparent;background:linear-gradient(90deg,var(--mo-gradient-start),var(--mo-gradient-end));color:#fff}
+:root{--mo-radius-base: 6px;--mo-transition: .16s ease}:root,[data-mojo-theme=light],.mo-theme--light{--mo-bg: #f6f7fb;--mo-header-bg: #ffffff;--mo-sidebar-bg: #ffffff;--mo-panel-bg: #ffffff;--mo-panel-bg-secondary: #f0f2f8;--mo-field-bg: #f8f9fc;--mo-primary: #6f55e8;--mo-primary-hover: #5f48d6;--mo-secondary: #b43fd2;--mo-secondary-hover: #9f34bd;--mo-gradient-start: #6f55e8;--mo-gradient-end: #b43fd2;--mo-text-primary: #202337;--mo-text-secondary: #5d6278;--mo-text-tertiary: #8b91a4;--mo-success: #1d9e75;--mo-success-hover: #168865;--mo-warning: #f6c544;--mo-warning-hover: #dea915;--mo-error: #e04472;--mo-error-hover: #c73360;--mo-border: rgba(31, 36, 54, .1);--mo-border-active: #6f55e8;--mo-disabled-bg: #eef0f6;--mo-disabled-text: #a2a7b8}[data-mojo-theme=dark],.mo-theme--dark{--mo-bg: #09070f;--mo-header-bg: #120f1e;--mo-sidebar-bg: #120f1e;--mo-panel-bg: #14171e;--mo-panel-bg-secondary: #262138;--mo-field-bg: #12151b;--mo-primary: #8b5cff;--mo-primary-hover: #9c76ff;--mo-secondary: #c44fe0;--mo-secondary-hover: #d46bea;--mo-gradient-start: #7b5cff;--mo-gradient-end: #c44fe0;--mo-text-primary: #eeeaff;--mo-text-secondary: #a09bbd;--mo-text-tertiary: #6f6a86;--mo-success: #1d9e75;--mo-success-hover: #25b688;--mo-warning: #f6c544;--mo-warning-hover: #ffd86a;--mo-error: #ff5c8a;--mo-error-hover: #ff7aa1;--mo-border: transparent;--mo-border-active: #8b5cff;--mo-disabled-bg: #201b32;--mo-disabled-text: #6f6a86}*{box-sizing:border-box}.mo-button{--mo-button-bg: var(--mo-button-custom-bg, var(--mo-panel-bg));--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-text-secondary, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-bg) 88%, var(--mo-primary));--mo-button-hover-border: var(--mo-border-active);--mo-button-hover-color: var(--mo-primary);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:max-content;padding:10px;border:1px solid var(--mo-button-border);border-radius:var(--mo-radius-base);background:var(--mo-button-bg);color:var(--mo-button-color);font:inherit;font-size:14px;line-height:1;white-space:nowrap;cursor:pointer;transition:background var(--mo-transition),border-color var(--mo-transition),box-shadow var(--mo-transition),color var(--mo-transition),opacity var(--mo-transition),transform var(--mo-transition)}.mo-button:hover:not(.is-disabled,.is-loading){border-color:var(--mo-button-hover-border);background:var(--mo-button-hover-bg);color:var(--mo-button-hover-color)}.mo-button:active:not(.is-disabled,.is-loading){transform:translateY(1px)}.mo-button.is-block{width:100%}.mo-button.is-disabled,.mo-button.is-loading{cursor:not-allowed;opacity:.72}.mo-button.is-disabled{--mo-button-bg: var(--mo-disabled-bg);--mo-button-border: var(--mo-border);--mo-button-color: var(--mo-disabled-text)}.mo-button.is-round{border-radius:999px}.mo-button.is-icon-only{min-width:38px}.mo-button--small{gap:6px;padding:6px 10px;height:max-content;font-size:12px}.mo-button--small.is-icon-only{width:32px;min-width:32px}.mo-button--large{gap:10px;height:max-content;padding:14px;border-radius:12px;font-size:16px}.mo-button--large.is-icon-only{width:52px;min-width:52px}.mo-button--primary{--mo-button-accent: var(--mo-primary);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 12%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button--ghost{--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-primary) 14%, transparent);--mo-button-hover-border: var(--mo-border-active);--mo-button-hover-color: var(--mo-text-primary)}.mo-button--secondary{--mo-button-accent: var(--mo-secondary);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 12%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button--gradient{--mo-button-bg: linear-gradient(90deg, var(--mo-gradient-start), var(--mo-gradient-end));--mo-button-border: var(--mo-button-custom-border, transparent);--mo-button-color: var(--mo-button-custom-color, #ffffff);--mo-button-hover-bg: linear-gradient(90deg, var(--mo-primary-hover), var(--mo-secondary-hover));--mo-button-hover-border: transparent;--mo-button-hover-color: #ffffff;background:var(--mo-button-custom-bg, var(--mo-button-bg));box-shadow:0 10px 24px #8b5cff3d}.mo-button--gradient:hover:not(.is-disabled,.is-loading){background:var(--mo-button-custom-bg, var(--mo-button-hover-bg));box-shadow:0 12px 28px #c44fe047}.mo-button--success{--mo-button-accent: var(--mo-success);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 12%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button--warning{--mo-button-accent: var(--mo-warning);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 14%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button--danger{--mo-button-accent: var(--mo-error);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 12%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button__content{display:inline-flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;line-height:1;text-overflow:ellipsis}.mo-button__content>svg,.mo-button__content>:deep(svg),.mo-button__icon svg,.mo-button__spinner svg{display:block;width:1em;height:1em;flex:none}.mo-button__spinner{border:2px solid currentcolor;border-right-color:transparent;border-radius:50%;animation:mo-button-spin .8s linear infinite}@keyframes mo-button-spin{to{transform:rotate(360deg)}}.mo-card{--mo-card-bg: var(--mo-panel-bg);--mo-card-border: var(--mo-border);--mo-card-border-hover: var(--mo-border-active);--mo-card-shadow: 0 14px 34px rgba(31, 36, 54, .1);--mo-card-shadow-dark: 0 16px 36px rgba(0, 0, 0, .28);position:relative;overflow:hidden;border:1px solid var(--mo-card-border);border-radius:8px;background:var(--mo-card-bg);color:var(--mo-text-primary);transition:border-color var(--mo-transition),box-shadow var(--mo-transition),transform var(--mo-transition)}.mo-card.is-hoverable:hover{border-color:var(--mo-card-border-hover)}.mo-card.is-selectable{cursor:pointer;outline:none}.mo-card.is-selectable:focus-visible{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 18%,transparent)}.mo-card.is-selected{border-color:var(--mo-primary);background:linear-gradient(135deg,color-mix(in srgb,var(--mo-primary) 10%,transparent),transparent 42%),var(--mo-card-bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--mo-primary) 26%,transparent)}.mo-card.is-selected.is-hoverable:hover{border-color:var(--mo-primary)}.mo-card.is-hoverable.is-animated:hover{transform:translateY(-4px)}.mo-card--shadow-always{box-shadow:var(--mo-card-shadow)}.mo-theme--dark.mo-card--shadow-always{box-shadow:var(--mo-card-shadow-dark)}.mo-card--shadow-hover.is-hoverable:hover{box-shadow:var(--mo-card-shadow)}.mo-theme--dark.mo-card--shadow-hover.is-hoverable:hover{box-shadow:var(--mo-card-shadow-dark)}.mo-card--shadow-never{box-shadow:none}.mo-card--border-solid{border-style:solid}.mo-card--border-dashed{border-style:dashed}.mo-card--border-dotted{border-style:dotted}.mo-card--border-none{border-color:transparent}.mo-card__header,.mo-card__body,.mo-card__footer,.mo-card__selected-mark{position:relative;z-index:1}.mo-card__selected-mark{position:absolute;top:8px;right:8px;display:flex;width:16px;height:16px;align-items:center;justify-content:center;color:#f6c544;font-size:12px;line-height:1;pointer-events:none}.mo-card__header{padding:18px 18px 0}.mo-card__body{padding:18px;height:100%}.mo-card__footer{padding:0 18px 18px}.mo-dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--mo-dialog-z-index);color:var(--mo-text-primary)}.mo-dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000094}.mo-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:24px;pointer-events:none}.mo-dialog__panel{width:min(var(--mo-dialog-width),100%);overflow:hidden;border:1px solid var(--mo-border);border-radius:12px;background:var(--mo-panel-bg);box-shadow:0 24px 70px #1f243633;pointer-events:auto}.mo-theme--dark .mo-dialog__panel{box-shadow:0 28px 80px #0000006b}.mo-dialog__header{display:flex;min-height:56px;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--mo-dialog-padding);border-bottom:1px solid var(--mo-border)}.mo-dialog__title{min-width:0;margin:0;overflow:hidden;color:var(--mo-text-primary);font-size:16px;font-weight:700;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}.mo-dialog__close{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--mo-text-secondary);cursor:pointer;flex:0 0 auto;font:inherit;font-size:22px;line-height:1;transition:background var(--mo-transition),border-color var(--mo-transition),color var(--mo-transition)}.mo-dialog__close:hover{border-color:var(--mo-border-active);background:var(--mo-panel-bg-secondary);color:var(--mo-primary)}.mo-dialog__body{padding:var(--mo-dialog-padding)}.mo-dialog__footer{display:flex;justify-content:flex-end;gap:10px;padding:0 var(--mo-dialog-padding) var(--mo-dialog-padding)}.mo-dialog-fade-enter,.mo-dialog-fade-leave,.mo-dialog-panel-enter,.mo-dialog-panel-leave{transition:opacity .18s ease,transform .18s ease}.mo-dialog-fade-enter-from,.mo-dialog-fade-leave-to{opacity:0}.mo-dialog-fade-enter-to,.mo-dialog-fade-leave-from{opacity:1}.mo-dialog-panel-enter-from,.mo-dialog-panel-leave-to{opacity:0;transform:translateY(8px) scale(.98)}.mo-dialog-panel-enter-to,.mo-dialog-panel-leave-from{opacity:1;transform:translateY(0) scale(1)}.mo-form{color:var(--mo-text-primary)}.mo-form-item{display:flex;margin-bottom:24px}.mo-form--label-top .mo-form-item{display:block}.mo-form-item__label{display:inline-flex;align-items:center;min-height:24px;width:var(--mo-form-label-width, auto);padding-right:12px;color:var(--mo-text-primary);font-size:14px;line-height:1.5;white-space:nowrap}.mo-form--label-left .mo-form-item__label{justify-content:flex-start;text-align:left}.mo-form--label-right .mo-form-item__label{justify-content:flex-end;text-align:right}.mo-form--label-top .mo-form-item__label{justify-content:flex-start;width:auto;margin-bottom:5px;padding-right:0}.mo-form-item__asterisk{margin:0 4px 0 0;color:var(--mo-error);font-weight:700}.mo-form-item__suffix{margin-left:2px}.mo-form-item__content{position:relative;min-width:0;flex:1}.mo-form-item__help{margin-top:8px;color:var(--mo-text-secondary);font-size:13px;line-height:1.5}.mo-form-item__error{position:absolute;top:calc(100% + 2px);left:0;z-index:2;margin-top:0;color:var(--mo-error);font-size:12px;line-height:1.5;pointer-events:none}.mo-form-item.is-error :where(input,textarea,select){border-color:var(--mo-error)}.mo-input{position:relative;width:100%;color:var(--mo-text-primary)}.mo-input__field{position:relative;width:100%}.mo-input__inner{width:100%;border:1px solid var(--mo-border);border-radius:8px;outline:none;background:var(--mo-field-bg);color:var(--mo-text-primary);font:inherit;transition:border-color var(--mo-transition),box-shadow var(--mo-transition)}.mo-input__tag-wrapper{display:flex;width:100%;min-height:46px;align-items:center;gap:8px;padding:5px;border:1px solid var(--mo-border-active);border-radius:8px;background:var(--mo-field-bg);color:var(--mo-text-primary);transition:border-color var(--mo-transition),box-shadow var(--mo-transition)}.mo-input__prefix,.mo-input__suffix{position:absolute;top:50%;z-index:1;display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;color:var(--mo-text-tertiary);pointer-events:none;transform:translateY(-50%)}.mo-input__prefix{left:14px}.mo-input__suffix{right:14px}.mo-input__prefix svg,.mo-input__suffix svg{display:block;width:1em;height:1em;flex:none}.mo-input__inner::placeholder,.mo-input__tag-input::placeholder{color:var(--mo-text-tertiary)}.mo-input__inner:hover,.mo-input__tag-wrapper:hover{border-color:var(--mo-primary)}.mo-input__inner:focus{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 18%,transparent)}.mo-input__tag-wrapper:focus-within{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 18%,transparent)}.mo-input:not(.is-textarea) .mo-input__inner{height:46px;padding:0 42px 0 16px}.mo-input.has-prefix:not(.is-textarea) .mo-input__inner{padding-left:42px}.mo-input.has-suffix:not(.is-textarea) .mo-input__inner{padding-right:42px}.mo-input--small:not(.is-textarea) .mo-input__inner{height:36px;padding:0 36px 0 12px;font-size:13px}.mo-input--small .mo-input__prefix{left:12px}.mo-input--small .mo-input__suffix{right:12px}.mo-input--small.has-prefix:not(.is-textarea) .mo-input__inner{padding-left:36px}.mo-input--small.has-suffix:not(.is-textarea) .mo-input__inner{padding-right:36px}.mo-input--large:not(.is-textarea) .mo-input__inner{height:56px;padding:0 46px 0 18px;font-size:16px}.mo-input--large .mo-input__prefix{left:18px}.mo-input--large .mo-input__suffix{right:18px}.mo-input--large.has-prefix:not(.is-textarea) .mo-input__inner{padding-left:48px}.mo-input--large.has-suffix:not(.is-textarea) .mo-input__inner{padding-right:48px}.mo-input--small .mo-input__tag-wrapper{min-height:36px;gap:6px;padding:5px;font-size:13px}.mo-input--large .mo-input__tag-wrapper{min-height:56px;gap:10px;padding:7px 16px;font-size:16px}.mo-input.is-textarea .mo-input__inner{min-height:calc(var(--mo-input-rows, 3) * 28px + 34px);padding:14px 16px 30px;line-height:1.6}.mo-input.is-textarea .mo-input__prefix,.mo-input.is-textarea .mo-input__suffix{top:16px;transform:none}.mo-input.has-prefix.is-textarea .mo-input__inner{padding-left:42px}.mo-input.has-suffix.is-textarea .mo-input__inner{padding-right:42px}.mo-input--small.is-textarea .mo-input__inner{min-height:calc(var(--mo-input-rows, 3) * 22px + 28px);padding:10px 12px 26px;font-size:13px}.mo-input--large.is-textarea .mo-input__inner{min-height:calc(var(--mo-input-rows, 3) * 32px + 42px);padding:18px 18px 34px;font-size:16px}.mo-input__count{position:absolute;right:14px;bottom:8px;color:var(--mo-text-secondary);font-size:12px;line-height:1;pointer-events:none}.mo-input__tag{display:inline-flex;max-width:180px;height:30px;align-items:center;gap:8px;padding:0 10px;border:1px solid color-mix(in srgb,var(--mo-primary) 34%,var(--mo-border));border-radius:6px;background:color-mix(in srgb,var(--mo-primary) 14%,var(--mo-panel-bg));color:var(--mo-primary);flex:0 0 auto;font-size:14px;line-height:1}.mo-input--small .mo-input__tag{height:28px;padding:0 9px;font-size:13px}.mo-input--large .mo-input__tag{height:34px;padding:0 12px;font-size:15px}.mo-input__tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mo-input__tag-close{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:currentcolor;cursor:pointer;flex:0 0 auto;font:inherit;line-height:1;opacity:.76}.mo-input__tag-close:hover{opacity:1}.mo-input__tag-input{min-width:120px;height:30px;border:0;outline:none;background:transparent;color:var(--mo-text-primary);font:inherit;flex:1 1 140px}.mo-input.has-prefix .mo-input__tag-wrapper{padding-left:42px}.mo-input.has-suffix .mo-input__tag-wrapper{padding-right:42px}.mo-input__clear{position:absolute;top:50%;right:12px;width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:var(--mo-text-tertiary);cursor:pointer;transform:translateY(-50%)}.mo-input.has-suffix .mo-input__clear{right:36px}.mo-input__clear:hover{color:var(--mo-primary)}.mo-input.is-disabled .mo-input__inner,.mo-input.is-disabled .mo-input__tag-wrapper{cursor:not-allowed;background:var(--mo-disabled-bg);color:var(--mo-disabled-text)}.mo-row{display:flex;flex-wrap:wrap;margin-right:calc(var(--mo-row-gutter-half, 0px) * -1);margin-left:calc(var(--mo-row-gutter-half, 0px) * -1)}.mo-row.is-nowrap{flex-wrap:nowrap}.mo-row--justify-start{justify-content:flex-start}.mo-row--justify-center{justify-content:center}.mo-row--justify-end{justify-content:flex-end}.mo-row--justify-space-between{justify-content:space-between}.mo-row--justify-space-around{justify-content:space-around}.mo-row--justify-space-evenly{justify-content:space-evenly}.mo-row--align-top{align-items:flex-start}.mo-row--align-middle{align-items:center}.mo-row--align-bottom{align-items:flex-end}.mo-row--align-stretch{align-items:stretch}.mo-col{display:block;max-width:calc(var(--mo-col-span, 24) / 24 * 100%);min-height:1px;padding-right:var(--mo-row-gutter-half, 0px);padding-left:var(--mo-row-gutter-half, 0px);flex:0 0 calc(var(--mo-col-span, 24) / 24 * 100%)}.mo-menu{position:relative;display:inline-block}.mo-menu__trigger{height:36px;padding:0 14px;border:1px solid var(--mo-border);border-radius:8px;background:var(--mo-field-bg);color:var(--mo-text-primary);cursor:pointer;font:inherit}.mo-menu__items{position:absolute;z-index:30;width:var(--mo-menu-width);padding:4px;border:1px solid rgba(104,84,220,.22);border-radius:12px;outline:none;background:var(--mo-panel-bg);box-shadow:0 18px 42px #1f243624}.mo-theme--dark .mo-menu__items{box-shadow:0 18px 42px #00000057}.mo-menu--bottom-start .mo-menu__items{top:calc(100% + 8px);left:0}.mo-menu--bottom-end .mo-menu__items{top:calc(100% + 8px);right:0}.mo-menu--top-start .mo-menu__items{bottom:calc(100% + 8px);left:0}.mo-menu--top-end .mo-menu__items{right:0;bottom:calc(100% + 8px)}.mo-menu__item{display:flex;width:100%;align-items:flex-start;gap:14px;padding:10px 8px;border:0;border-radius:8px;background:transparent;color:var(--mo-text-primary);cursor:pointer;font:inherit;text-align:left;transition:background-color var(--mo-transition),opacity var(--mo-transition)}.mo-menu__item.is-active{background:color-mix(in srgb,var(--mo-primary) 10%,transparent)}.mo-menu__item.is-disabled{cursor:not-allowed;opacity:.48}.mo-menu__icon{display:inline-flex;width:18px;height:22px;align-items:center;justify-content:center;color:var(--mo-primary);flex:0 0 auto}.mo-menu__icon svg{width:18px;height:18px}.mo-menu__icon-dot{width:10px;height:10px;border:2px solid currentcolor;border-radius:50%}.mo-menu__text{display:grid;min-width:0;gap:4px}.mo-menu__label{color:var(--mo-text-primary);font-size:16px;font-weight:700;line-height:1.25}.mo-menu__description{color:var(--mo-text-secondary);font-size:13px;line-height:1.35}.mo-select{position:relative;width:100%;color:var(--mo-text-primary)}.mo-select__button{display:flex;width:100%;height:46px;align-items:center;justify-content:space-between;gap:12px;padding:0 14px 0 18px;border:1px solid var(--mo-border);border-radius:8px;outline:none;background:var(--mo-field-bg);color:var(--mo-text-primary);cursor:pointer;font:inherit;text-align:left;transition:border-color var(--mo-transition),box-shadow var(--mo-transition)}.mo-select__button:hover{border-color:var(--mo-primary)}.mo-select__button:focus-visible,.mo-select__button[data-headlessui-state~=open]{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 18%,transparent)}.mo-select--small .mo-select__button{height:36px;padding:0 12px 0 14px;font-size:13px}.mo-select--large .mo-select__button{height:56px;padding:0 16px 0 22px;font-size:16px}.mo-select__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mo-select.is-placeholder .mo-select__label{color:var(--mo-text-tertiary)}.mo-select__arrow{width:8px;height:8px;border-right:2px solid currentcolor;border-bottom:2px solid currentcolor;color:var(--mo-text-primary);flex:0 0 auto;transform:rotate(45deg) translateY(-2px);transition:transform var(--mo-transition)}.mo-select__button[data-headlessui-state~=open] .mo-select__arrow{transform:rotate(225deg) translateY(-2px)}.mo-select__options{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:100%;max-height:240px;margin:0;padding:6px;border:1px solid var(--mo-border);border-radius:8px;outline:none;background:var(--mo-panel-bg);box-shadow:0 14px 34px #1f243624;list-style:none;overflow:auto}.mo-theme--dark .mo-select__options{box-shadow:0 16px 36px #00000057}.mo-select__option{display:flex;min-height:34px;align-items:center;gap:10px;padding:0 12px;border-radius:6px;color:var(--mo-text-primary);cursor:pointer;font-size:14px}.mo-select__option.is-active,.mo-select__option[data-headlessui-state~=active]{background:var(--mo-panel-bg-secondary);color:var(--mo-text-primary)}.mo-select__option.is-selected,.mo-select__option[data-headlessui-state~=selected]{color:var(--mo-text-primary);font-weight:500}.mo-select__check{position:relative;width:18px;height:18px;flex:0 0 auto;opacity:0}.mo-select__option.is-selected .mo-select__check,.mo-select__option[data-headlessui-state~=selected] .mo-select__check{opacity:1}.mo-select__check:after{position:absolute;top:2px;left:6px;width:6px;height:11px;border-right:2px solid var(--mo-primary);border-bottom:2px solid var(--mo-primary);content:"";transform:rotate(45deg)}.mo-select__option.is-disabled,.mo-select__option[data-headlessui-state~=disabled],.mo-select__option[aria-disabled=true]{cursor:not-allowed;opacity:.48}.mo-select.is-disabled .mo-select__button{cursor:not-allowed;background:var(--mo-disabled-bg);color:var(--mo-disabled-text)}.mo-scrollbar{position:fixed;z-index:30;width:var(--mo-scrollbar-size);border-radius:999px;opacity:0;pointer-events:none;transition:opacity var(--mo-transition)}.mo-scrollbar.is-visible{opacity:1;pointer-events:auto}.mo-scrollbar__thumb{width:100%;border-radius:inherit;background:color-mix(in srgb,var(--mo-primary) 18%,var(--mo-text-tertiary));cursor:grab;transition:background var(--mo-transition),opacity var(--mo-transition)}.mo-scrollbar__thumb:hover,.mo-scrollbar.is-dragging .mo-scrollbar__thumb{background:var(--mo-primary)}.mo-scrollbar.is-dragging .mo-scrollbar__thumb{cursor:grabbing}.mo-scrollbar-native-hidden{scrollbar-width:none;-ms-overflow-style:none}.mo-scrollbar-native-hidden::-webkit-scrollbar{width:0;height:0}.mo-tabs{width:100%;color:var(--mo-text-primary)}.mo-tabs__list{position:relative;display:flex;width:100%;min-height:46px;padding:4px;border:1px solid var(--mo-border);border-radius:8px;background:var(--mo-field-bg)}.mo-tabs--small .mo-tabs__list{min-height:38px;padding:3px}.mo-tabs--large .mo-tabs__list{min-height:58px;padding:5px;border-radius:10px}.mo-tabs__indicator{position:absolute;top:4px;bottom:4px;left:4px;z-index:0;width:calc((100% - 8px) / var(--mo-tabs-count));border-radius:6px;background:linear-gradient(90deg,var(--mo-gradient-start),var(--mo-gradient-end));transform:translate(calc(var(--mo-tabs-active-index) * 100%));transition:transform .22s ease,width .22s ease}.mo-tabs--small .mo-tabs__indicator{top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--mo-tabs-count))}.mo-tabs--large .mo-tabs__indicator{top:5px;bottom:5px;left:5px;width:calc((100% - 10px) / var(--mo-tabs-count));border-radius:8px}.mo-tabs__tab{position:relative;z-index:1;display:inline-flex;min-width:0;align-items:center;justify-content:center;padding:0 18px;border:0;background:transparent;color:var(--mo-text-secondary);cursor:pointer;flex:1 1 0;font:inherit;font-size:14px;line-height:1;outline:none;transition:color var(--mo-transition),opacity var(--mo-transition)}.mo-tabs__tab.is-active{color:#fff;font-weight:700}.mo-tabs__tab:not(.is-active):hover{color:var(--mo-text-primary)}.mo-tabs__tab.is-disabled{cursor:not-allowed;opacity:.48}.mo-tabs--small .mo-tabs__tab{padding:0 14px;font-size:13px}.mo-tabs--large .mo-tabs__tab{padding:0 24px;font-size:16px}.mo-tabs__panels{margin-top:12px}.mo-tabs__panel{outline:none}.mo-upload{width:100%;color:var(--mo-text-primary)}.mo-upload__dropzone{display:grid;min-height:190px;place-items:center;padding:26px;border:1px dashed var(--mo-border);border-radius:12px;outline:none;background:var(--mo-field-bg);cursor:pointer;text-align:center;transition:border-color var(--mo-transition),box-shadow var(--mo-transition),background-color var(--mo-transition)}.mo-upload__dropzone:hover,.mo-upload__dropzone:focus-visible,.mo-upload.is-dragging .mo-upload__dropzone{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 16%,transparent)}.mo-upload__input{display:none}.mo-upload__icon{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,var(--mo-gradient-start),var(--mo-gradient-end));color:#fff;font-size:22px;font-weight:700}.mo-upload__title{margin-top:14px;color:var(--mo-text-primary);font-size:16px;font-weight:700}.mo-upload__action{margin-top:6px;color:var(--mo-primary);font-size:14px}.mo-upload__hint{margin-top:10px;color:var(--mo-text-secondary);font-size:13px;line-height:1.5}.mo-upload__dropzone.has-custom-dropzone>.mo-upload__icon,.mo-upload__dropzone.has-custom-dropzone>.mo-upload__title,.mo-upload__dropzone.has-custom-dropzone>.mo-upload__action,.mo-upload__dropzone.has-custom-dropzone>.mo-upload__hint{display:none}.mo-upload__list{display:grid;gap:12px;margin-top:14px}.mo-upload__file{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px;border:1px solid var(--mo-border);border-radius:10px;background:var(--mo-panel-bg)}.mo-upload__preview{width:64px;height:64px;overflow:hidden;border-radius:8px;background:var(--mo-panel-bg-secondary);color:var(--mo-text-secondary)}.mo-upload__preview.is-crop{width:var(--mo-upload-crop-size);height:var(--mo-upload-crop-size)}.mo-upload__preview.is-rect{width:var(--mo-upload-crop-preview-width);height:var(--mo-upload-crop-preview-height)}.mo-upload__preview.is-circle{border-radius:50%}.mo-upload__preview img,.mo-upload__preview video{display:block;width:100%;height:100%;object-fit:cover}.mo-upload__file-icon{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:12px;font-weight:700}.mo-upload__meta{min-width:0}.mo-upload__name{overflow:hidden;color:var(--mo-text-primary);font-weight:700;text-overflow:ellipsis;white-space:nowrap}.mo-upload__size,.mo-upload__status{margin-top:4px;color:var(--mo-text-secondary);font-size:12px}.mo-upload__progress{position:relative;height:6px;margin-top:8px;overflow:hidden;border-radius:999px;background:var(--mo-panel-bg-secondary)}.mo-upload__progress-bar{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mo-gradient-start),var(--mo-gradient-end));transition:width .18s ease}.mo-upload__status{display:flex;align-items:center;gap:10px}.mo-upload__status button,.mo-upload__remove{border:0;background:transparent;color:var(--mo-primary);cursor:pointer;font:inherit}.mo-upload__remove{width:28px;height:28px;border-radius:50%;color:var(--mo-text-tertiary);font-size:20px;line-height:1}.mo-upload__remove:hover{background:color-mix(in srgb,var(--mo-error) 12%,transparent);color:var(--mo-error)}.mo-upload-cropper{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:#00000094}.mo-upload-cropper__panel{width:min(420px,100%);padding:18px;border:1px solid var(--mo-border);border-radius:12px;background:var(--mo-panel-bg);color:var(--mo-text-primary);box-shadow:0 24px 64px #00000057}.mo-upload-cropper__header,.mo-upload-cropper__actions,.mo-upload-cropper__slider{display:flex;align-items:center;justify-content:space-between;gap:12px}.mo-upload-cropper__header{margin-bottom:14px}.mo-upload-cropper__header button{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--mo-text-secondary);cursor:pointer;font-size:20px}.mo-upload-cropper__stage{position:relative;width:320px;height:240px;margin:0 auto;overflow:hidden;border-radius:10px;background:var(--mo-field-bg);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.mo-upload-cropper__stage:active{cursor:grabbing}.mo-upload-cropper__image{position:absolute;top:50%;left:50%;max-width:none;transform-origin:center;-webkit-user-select:none;user-select:none}.mo-upload-cropper__frame{position:absolute;top:50%;left:50%;width:var(--mo-upload-crop-width);height:var(--mo-upload-crop-height);border:2px solid var(--mo-primary);box-shadow:0 0 0 999px #00000052;pointer-events:none;transform:translate(-50%,-50%)}.mo-upload-cropper__frame.is-circle{border-radius:50%}.mo-upload-cropper__slider{margin-top:16px;color:var(--mo-text-secondary);font-size:14px;display:none}.mo-upload-cropper__slider input{flex:1}.mo-upload-cropper__actions{justify-content:flex-end;margin-top:16px}.mo-upload-cropper__actions button{height:34px;padding:0 14px;border:1px solid var(--mo-border);border-radius:8px;background:transparent;color:var(--mo-text-primary);cursor:pointer;font:inherit}.mo-upload-cropper__actions button:last-child{border-color:transparent;background:linear-gradient(90deg,var(--mo-gradient-start),var(--mo-gradient-end));color:#fff}