From 44586a5b241cdde1d1740173023cd345a9ca9a80 Mon Sep 17 00:00:00 2001
From: thatsfelix <thatwasfelix@gmail.com>
Date: Wed, 22 Jul 2026 12:25:26 +0800
Subject: [PATCH] =?UTF-8?q?style(pages):=20=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=88=9B=E4=BD=9C=E9=A1=B5=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/CharactersCreate/index.scss         | 3923 +++++++++--------
 .../Create/panels/FolderPanel/index.scss      |   27 +-
 .../CharacterAssetsPanel.scss                 |    6 +-
 .../panels/InspirationLibraryPanel/index.scss |   18 +
 .../Create/panels/MyCreationsPanel/index.scss |   18 +-
 .../Create/panels/MyFavoritePanel/index.scss  |   19 +-
 src/pages/Profile/index.scss                  |  112 +
 7 files changed, 2264 insertions(+), 1859 deletions(-)

diff --git a/src/pages/CharactersCreate/index.scss b/src/pages/CharactersCreate/index.scss
index 59b9186..90fd33f 100644
--- a/src/pages/CharactersCreate/index.scss
+++ b/src/pages/CharactersCreate/index.scss
@@ -1,1833 +1,2090 @@
-@use "../../assets/styles/mixins" as *;
-$characters-create-skeleton-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.07) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.07) 63%);
-
-.charactersCreate {
-  box-sizing: border-box;
-  width: 100%;
-  /* 与 layoutShell__body 同模式：(视口可用高) / scale；14px 为 contentFrame 内边距 */
-  height: calc((100vh - var(--layout-chrome-top) - 14px) / var(--layout-scale, 1));
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  .charactersCreate__row {
-    padding: 0 30px;
-    flex: 1 1 auto;
-    min-height: 0;
-    min-width: 0;
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: stretch;
-    justify-content: flex-start;
-    gap: 10px;
-    width: 100%;
-    margin: 0 auto;
-    overflow-x: auto;
-    overflow-y: hidden;
-    @include hide-scrollbar;
-
-    .charactersCreate__left {
-      flex: 0 0 330px;
-      min-width: 0;
-      max-width: 330px;
-      min-height: 0;
-      align-self: stretch;
-      display: flex;
-      flex-direction: column;
-      background: #ffffff;
-      border-radius: 26px;
-      box-shadow: none;
-      overflow: hidden;
-
-      .charactersCreate__leftInner {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        min-height: 0;
-        gap: 0;
-        padding-bottom: 20px;
-        background: #ffffff;
-        border-radius: 26px;
-
-        .charactersCreate__leftBody {
-          flex: 1;
-          min-height: 0;
-          display: flex;
-          flex-direction: column;
-          background: #ffffff;
-          border-radius: 26px;
-          overflow: hidden;
-
-          .charactersCreate__leftDiyBanner {
-            width: 100%;
-            height: 115px;
-            padding: 20px;
-            border-radius: 24px;
-            background: linear-gradient(0deg, rgba(210, 195, 255, 0) 14.9%, #d2c3ff 100%);
-
-            .charactersCreate__leftDiyBannerTitle {
-              margin: 0;
-              width: auto;
-              height: 34px;
-              font-size: 30px;
-              font-weight: 500;
-              line-height: normal;
-              color: #333;
-              display: flex;
-              align-items: center;
-            }
-
-            .charactersCreate__leftDiyBannerDesc {
-              margin: 8px 0 0;
-              width: auto;
-              font-size: 14px;
-              font-weight: 400;
-              line-height: normal;
-              color: #333333;
-            }
-          }
-
-          .charactersCreate__styleTabBar {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            overflow-x: auto;
-            height: 30px;
-            margin: 20px 20px;
-            @include hide-scrollbar;
-
-            /* 右侧线性淡出：提示可横向滚动，视觉与参考图一致 */
-            -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 172px), transparent 100%);
-            mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 172px), transparent 100%);
-            -webkit-mask-size: 100% 100%;
-            mask-size: 100% 100%;
-            -webkit-mask-repeat: no-repeat;
-            mask-repeat: no-repeat;
-
-            .charactersCreate__styleTab {
-              flex: 0 0 auto;
-              height: 30px;
-              padding: 5px 20px;
-              border: none;
-              border-radius: 24px;
-              background: #fbf0ff;
-              color: #6f47f5;
-              font-size: 14px;
-              font-weight: 400;
-              line-height: normal;
-              cursor: pointer;
-              position: relative;
-            }
-
-            .charactersCreate__styleTab_active {
-              background: #6f47f5;
-              color: #ffffff;
-              font-weight: 400;
-            }
-
-            .charactersCreate__styleTab_skeleton {
-              width: 82px;
-              padding: 0;
-              background: $characters-create-skeleton-gradient;
-              background-size: 400% 100%;
-              color: transparent;
-              cursor: default;
-              pointer-events: none;
-            }
-          }
-
-          .charactersCreate__styleTabBar_noRightFade {
-            -webkit-mask-image: none;
-            mask-image: none;
-          }
-
-          .charactersCreate__leftScroll {
-            flex: 1;
-            min-height: 0;
-            overflow-y: auto;
-            margin: 0 20px;
-            padding: 11px 10px 9px;
-            border-radius: 26px;
-            background: #f0f4f9;
-            @include hide-scrollbar;
-
-            .charactersCreate__styleGrid {
-              display: grid;
-              grid-template-columns: repeat(3, minmax(0, 1fr));
-              gap: 6px;
-              width: 270px;
-
-              .charactersCreate__styleCell {
-                margin: 0;
-                padding: 0;
-                width: 86px;
-                height: 86px;
-                background: #ffffff;
-                cursor: pointer;
-                border-radius: 24px;
-                position: relative;
-                overflow: hidden;
-                border: 0;
-                background-image: none;
-
-                .charactersCreate__styleCellInner {
-                  display: block;
-                  width: 100%;
-                  height: 100%;
-                  border-radius: 24px;
-                  overflow: hidden;
-
-                  .charactersCreate__styleImg {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                    border-radius: 24px;
-                    object-fit: cover;
-                  }
-                }
-              }
-
-              .charactersCreate__styleCell_selected {
-                border: 1px dashed #6f47f5;
-                background: #fbf0ff;
-                box-sizing: border-box;
-              }
-
-              .charactersCreate__styleCell_skeleton {
-                background: transparent;
-                cursor: default;
-                pointer-events: none;
-              }
-
-              .charactersCreate__styleCellInner_skeleton {
-                width: 100%;
-                height: 100%;
-                border-radius: 24px;
-              }
-            }
-          }
-        }
-
-        .charactersCreate__leftMore {
-          flex-shrink: 0;
-          margin-top: 20px;
-          align-self: center;
-          width: 173px;
-          height: 42px;
-          border: 1px solid #333333;
-          border-radius: 24px;
-          background: #ffffff;
-          font-size: 14px;
-          font-weight: 400;
-          line-height: normal;
-          color: #333333;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .charactersCreate__center {
-      flex: 0 0 min(906px, calc(100vw - 864px));
-      min-width: 720px;
-      min-height: 0;
-      display: flex;
-      flex-direction: column;
-      border-radius: 24px;
-      padding: 20px;
-      gap: 20px;
-      background: linear-gradient(134deg, rgba(233, 218, 238, 0.5) 3.04%, #eaebeb 24.64%, #f0f0f0 50%, rgba(218, 214, 229, 0.5) 96.96%);
-      overflow: hidden;
-
-      .charactersCreate__empty {
-        flex: 1 1 auto;
-        min-height: 0;
-        width: 100%;
-        overflow-y: auto;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: clamp(24px, 4vw, 48px) clamp(16px, 2.5vw, 24px);
-        gap: 0;
-        @include hide-scrollbar;
-
-        .charactersCreate__emptyIcon {
-          width: 113px;
-          height: 113px;
-          object-fit: contain;
-          display: block;
-        }
-
-        .charactersCreate__emptyText {
-          margin-top: 0;
-          text-align: center;
-          font-size: 16px;
-          font-weight: 400;
-          line-height: normal;
-          color: #d6ceef;
-
-          .charactersCreate__emptyLine {
-            margin: 0;
-          }
-        }
-      }
-
-      .charactersCreate__taskStage {
-        flex: 1 1 auto;
-        min-height: 0;
-        width: 100%;
-        display: flex;
-        align-items: stretch;
-
-        .charactersCreate__taskCanvas {
-          position: relative;
-          flex: 1 1 auto;
-          min-height: 0;
-          border-radius: 24px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          overflow: hidden;
-
-          .charactersCreate__taskViewport {
-            position: absolute;
-            inset: 0;
-            width: 100%;
-            height: 100%;
-            min-height: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transform: translate3d(0, 0, 0);
-            will-change: transform;
-          }
-
-          .charactersCreate__taskViewport_static {
-            position: relative;
-            inset: auto;
-            will-change: auto;
-          }
-
-          .charactersCreate__taskViewport_enterPrevious {
-            animation: charactersCreateTaskStageEnterPrevious 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
-          }
-
-          .charactersCreate__taskViewport_enterNext {
-            animation: charactersCreateTaskStageEnterNext 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
-          }
-
-          .charactersCreate__taskViewport_leavePrevious {
-            animation: charactersCreateTaskStageLeavePrevious 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
-            pointer-events: none;
-          }
-
-          .charactersCreate__taskViewport_leaveNext {
-            animation: charactersCreateTaskStageLeaveNext 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
-            pointer-events: none;
-          }
-
-          .charactersCreate__taskResultFrame {
-            position: relative;
-            width: min(100%, 678px);
-            max-height: calc(100% - 40px);
-            aspect-ratio: 678 / 381;
-            border-radius: 26px;
-            background: rgba(119, 99, 186, 0.05);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-
-            .charactersCreate__taskResultImage {
-              width: 100%;
-              height: 100%;
-              object-fit: contain;
-            }
-
-            .charactersCreate__taskResultDeleteBtn {
-              position: absolute;
-              top: 14px;
-              right: 14px;
-              z-index: 2;
-              width: 20px;
-              height: 20px;
-              border: 0;
-              border-radius: 50%;
-              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
-              cursor: pointer;
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-              opacity: 0;
-              pointer-events: none;
-              transition:
-                opacity 0.18s ease,
-                background-color 0.18s ease;
-
-              &:hover,
-              &:focus-visible {
-                background: #ffffff;
-              }
-
-              &:disabled {
-                cursor: default;
-              }
-
-              img {
-                width: 20px;
-                height: 20px;
-                display: block;
-                object-fit: contain;
-              }
-            }
-
-            &:hover,
-            &:focus-within {
-              .charactersCreate__taskResultDeleteBtn {
-                opacity: 1;
-                pointer-events: auto;
-              }
-            }
-
-            .charactersCreate__taskGeneratingOverlay {
-              position: absolute;
-              inset: 0;
-              border-radius: 26px;
-              padding: 20px;
-              background: rgba(223, 223, 223, 0.2);
-              backdrop-filter: blur(25.62px);
-
-              .charactersCreate__taskGeneratingBadge {
-                display: inline-flex;
-                height: 28px;
-                padding: 4px 7px;
-                align-items: center;
-                justify-content: center;
-                border-radius: 8px;
-                background: rgba(255, 255, 255, 0.15);
-                color: #2a2a2a;
-                font-size: 14px;
-                font-weight: 400;
-              }
-            }
-          }
-
-          .charactersCreate__taskResultFrame_pending {
-            background: linear-gradient(135deg, rgba(219, 202, 238, 0.78) 0%, rgba(171, 207, 232, 0.78) 100%);
-          }
-
-          .charactersCreate__taskResultFrame_skeleton {
-            background: transparent;
-          }
-
-          .charactersCreate__taskResultImage_skeleton {
-            width: 100%;
-            height: 100%;
-            border-radius: 26px;
-          }
-
-          .charactersCreate__currentPromptToggle {
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            width: 35px;
-            height: 35px;
-            padding: 5px;
-            border: 0;
-            border-radius: 17.5px;
-            background: #ffffff;
-            cursor: pointer;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-
-            img {
-              width: 25px;
-              height: 25px;
-              object-fit: contain;
-            }
-          }
-
-          .charactersCreate__currentPromptCard {
-            position: absolute;
-            left: 0;
-            right: 48px;
-            bottom: 20px;
-            min-height: 154px;
-            padding: 20px;
-            border-radius: 26px;
-            background: rgba(81, 55, 170, 0.3);
-            backdrop-filter: blur(10px);
-
-            .charactersCreate__currentPromptRefs {
-              display: flex;
-              align-items: center;
-              gap: 5px;
-
-              .charactersCreate__currentPromptRef {
-                width: 55px;
-                height: 55px;
-                border-radius: 8px;
-                object-fit: cover;
-              }
-            }
-
-            .charactersCreate__currentPromptText {
-              margin: 10px 0 0;
-              color: #ffffff;
-              font-size: 14px;
-              font-weight: 500;
-              line-height: normal;
-              word-break: break-word;
-            }
-          }
-
-          .charactersCreate__taskSwitch {
-            position: absolute;
-            right: 0;
-            top: 50%;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            transform: translateY(-50%);
-
-            .charactersCreate__taskSwitchBtn {
-              width: 35px;
-              min-width: 35px;
-              height: 65px;
-              border: 0;
-              border-radius: 24px;
-              background: #ffffff;
-              padding: 5px;
-              cursor: pointer;
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-            }
-
-            .charactersCreate__taskSwitchBtn:disabled {
-              opacity: 0.6;
-              cursor: not-allowed;
-            }
-
-            .charactersCreate__taskSwitchBtn_skeleton {
-              background: $characters-create-skeleton-gradient;
-              background-size: 400% 100%;
-              cursor: default;
-              pointer-events: none;
-            }
-
-            .charactersCreate__taskSwitchBtn img {
-              width: 25px;
-              height: 25px;
-              object-fit: contain;
-            }
-
-            .charactersCreate__taskSwitchBtn_prev img {
-              transform: rotate(-90deg);
-            }
-
-            .charactersCreate__taskSwitchBtn_next img {
-              transform: rotate(90deg);
-            }
-          }
-        }
-      }
-
-      .charactersCreate__composer {
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        width: 100%;
-        padding: 0;
-        position: relative;
-        z-index: 1000;
-
-        .charactersCreate__composerPanel {
-          width: 100%;
-          margin-top: 0;
-          border: 0;
-          border-radius: 26px;
-          background: #ffffff;
-          min-height: 150px;
-          padding: 15px 20px;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          position: relative;
-          transition:
-            min-height 0.18s ease,
-            box-shadow 0.18s ease;
-
-          .charactersCreate__composerExpandPromptBtn {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            z-index: 5;
-            width: 20px;
-            height: 20px;
-            border: none;
-            border-radius: 5px;
-            background: transparent;
-            padding: 0;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-
-            img {
-              width: 20px;
-              height: 20px;
-              display: block;
-              object-fit: contain;
-            }
-          }
-
-          .charactersCreate__composerExpandPromptBtn:hover {
-            background: #f0f0f0;
-          }
-
-          .charactersCreate__composerRow {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            align-items: flex-start;
-            gap: 10px;
-            border-radius: 9px;
-            position: relative;
-
-            .charactersCreate__promptLibraryWrap {
-              position: relative;
-              flex: 0 0 auto;
-
-              .charactersCreate__promptLibraryButton {
-                position: relative;
-                flex: 0 0 80px;
-                width: 80px;
-                height: 80px;
-                border: none;
-                border-radius: 10px;
-                background: transparent;
-                color: #6f47f5;
-                padding: 0;
-                font-size: 11.44px;
-                line-height: normal;
-                cursor: pointer;
-                box-sizing: border-box;
-
-                .charactersCreate__promptLibraryStack {
-                  position: absolute;
-                  inset: 0;
-                  display: block;
-
-                  .charactersCreate__promptLibraryStackLayer {
-                    position: absolute;
-                    border: 1px dashed #6f47f5;
-                    border-radius: 10px;
-                    background: #fbf0ff;
-                    box-sizing: border-box;
-                  }
-
-                  .charactersCreate__promptLibraryStackLayer--back {
-                    top: 0;
-                    left: 9px;
-                    width: 63px;
-                    height: 53px;
-                    z-index: 1;
-                  }
-
-                  .charactersCreate__promptLibraryStackLayer--mid {
-                    top: 6px;
-                    left: 3px;
-                    width: 75px;
-                    height: 74px;
-                    z-index: 2;
-                  }
-
-                  .charactersCreate__promptLibraryStackLayer--front {
-                    top: 13px;
-                    left: 0;
-                    width: 80px;
-                    height: 67px;
-                    z-index: 3;
-                    overflow: hidden;
-
-                    .charactersCreate__promptLibraryPreview {
-                      width: 100%;
-                      height: 100%;
-                      display: block;
-                      border-radius: 10px;
-                      object-fit: cover;
-                    }
-
-                    .charactersCreate__promptLibraryPreview_skeleton {
-                      object-fit: initial;
-                    }
-                  }
-
-                  .charactersCreate__promptLibraryIconWrap {
-                    position: absolute;
-                    top: 27px;
-                    left: 30px;
-                    z-index: 4;
-                    width: 20px;
-                    height: 20px;
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-
-                    .charactersCreate__promptLibraryIcon {
-                      width: 20px;
-                      height: 20px;
-                      display: block;
-                      object-fit: contain;
-                    }
-                  }
-
-                  .charactersCreate__promptLibraryLabel {
-                    position: absolute;
-                    top: 47px;
-                    left: 22px;
-                    z-index: 4;
-                    max-width: 64px;
-                    height: 20px;
-                    color: #6f47f5;
-                    font-size: 11.44px;
-                    font-weight: 400;
-                    line-height: normal;
-                    text-align: center;
-                    white-space: nowrap;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                  }
-                }
-              }
-
-              .charactersCreate__promptLibraryButton_active {
-                color: #6f47f5;
-              }
-
-              .charactersCreate__promptLibraryPanel {
-                position: absolute;
-                left: 0;
-                bottom: calc(100% + 14px);
-                z-index: 20;
-                width: 455px;
-                min-height: 155px;
-                padding: 20px;
-                border-radius: 26px;
-                background: #ffffff;
-                box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-                display: grid;
-                grid-template-columns: repeat(4, 100px);
-                grid-auto-rows: 120px;
-                gap: 5px;
-                overflow: hidden;
-                box-sizing: border-box;
-
-                .charactersCreate__promptLibraryCard {
-                  width: 100px;
-                  height: 120px;
-                  padding: 10px;
-                  border: 1px dashed transparent;
-                  border-radius: 26px;
-                  background: #ffffff;
-                  display: flex;
-                  flex-direction: column;
-                  align-items: center;
-                  justify-content: center;
-                  gap: 5px;
-                  cursor: pointer;
-                  box-sizing: border-box;
-                  overflow: hidden;
-
-                  .charactersCreate__promptLibraryCardImg {
-                    width: 80px;
-                    height: 80px;
-                    display: block;
-                    flex: 0 0 auto;
-                    border-radius: 24px;
-                    object-fit: cover;
-                  }
-
-                  .charactersCreate__promptLibraryCardTitle {
-                    width: 80px;
-                    height: 15px;
-                    color: #333333;
-                    font-size: 12px;
-                    font-weight: 400;
-                    line-height: 26px;
-                    text-align: center;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                  }
-                }
-
-                .charactersCreate__promptLibraryCard:disabled {
-                  cursor: default;
-                  opacity: 0.7;
-                }
-
-                .charactersCreate__promptLibraryCard_active,
-                .charactersCreate__promptLibraryCard:hover:not(:disabled) {
-                  border-color: #6f47f5;
-                  background: #fbf0ff;
-                }
-
-                .charactersCreate__promptLibraryCard_skeleton {
-                  border-color: transparent;
-                  background: #ffffff;
-                  cursor: default;
-                  pointer-events: none;
-                }
-
-                .charactersCreate__promptLibraryCard_skeleton:hover {
-                  border-color: transparent;
-                  background: #ffffff;
-                }
-
-                .charactersCreate__promptLibraryCardImg_skeleton {
-                  border-radius: 24px;
-                }
-
-                .charactersCreate__promptLibraryCardTitle_skeleton {
-                  height: 10px;
-                  border-radius: 999px;
-                }
-              }
-            }
-
-            .charactersCreate__composerUploadCard {
-              width: 80px;
-              height: 80px;
-              border: 1px dashed #6f47f5;
-              border-radius: 9px;
-              background: #fbf0ff;
-              padding: 0;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              flex-shrink: 0;
-              cursor: pointer;
-              position: relative;
-              box-sizing: border-box;
-            }
-
-            .charactersCreate__composerUploadCard > img {
-              width: 35px;
-              height: 35px;
-              display: block;
-              border-radius: 7px;
-              object-fit: contain;
-            }
-
-            .charactersCreate__composerUploadCard_preview {
-              border: none;
-              background: transparent;
-              cursor: default;
-              overflow: visible;
-
-              .charactersCreate__composerUploadPreview {
-                width: 100% !important;
-                height: 100% !important;
-                object-fit: cover;
-                border-radius: 7px;
-              }
-
-              .charactersCreate__composerUploadDeleteBtn {
-                position: absolute;
-                top: 2px;
-                right: 2px;
-                width: 15px;
-                height: 15px;
-                border: none;
-                background: transparent;
-                padding: 0;
-                display: inline-flex;
-                cursor: pointer;
-                opacity: 0;
-                pointer-events: none;
-              }
-
-              .charactersCreate__composerUploadDeleteBtn img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-              }
-            }
-
-            .charactersCreate__composerUploadCard_preview:hover .charactersCreate__composerUploadDeleteBtn {
-              opacity: 1;
-              pointer-events: auto;
-            }
-
-            .composerUploadSortableItem {
-              width: 80px;
-              height: 80px;
-              flex: 0 0 80px;
-              position: relative;
-              transition:
-                transform 0.14s ease,
-                box-shadow 0.14s ease,
-                opacity 0.14s ease;
-              user-select: none;
-              touch-action: none;
-            }
-
-            .composerUploadSortableItem_enabled {
-              cursor: grab;
-            }
-
-            .composerUploadSortableItem_enabled:active {
-              cursor: grabbing;
-            }
-
-            .composerUploadSortableItem_dragging {
-              z-index: 2;
-              opacity: 0.72;
-              box-shadow: 0 4px 14px rgba(51, 51, 51, 0.18);
-            }
-
-            .charactersCreate__composerUploadCard_uploading {
-              border: none;
-              background: transparent;
-              cursor: default;
-              overflow: visible;
-              pointer-events: none;
-
-              .charactersCreate__composerUploadPendingImage {
-                width: 80px !important;
-                height: 80px !important;
-                display: block;
-                border-radius: 8px;
-                object-fit: cover;
-              }
-
-              .charactersCreate__composerUploadPendingIcon {
-                position: absolute;
-                top: 5px;
-                right: 5px;
-                width: 25px !important;
-                height: 25px !important;
-                display: block;
-                border-radius: 0;
-                object-fit: contain;
-              }
-            }
-
-            .charactersCreate__composerUploadList {
-              display: flex;
-              align-items: flex-start;
-              gap: 10px;
-              flex: 0 1 auto;
-              overflow-y: visible;
-              scrollbar-width: none;
-
-              &::-webkit-scrollbar {
-                display: none;
-              }
-            }
-
-            .charactersCreate__composerUploadInput {
-              display: none;
-            }
-
-            .charactersCreate__composerTextarea {
-              width: 100%;
-              margin: 0;
-              border: none;
-              outline: none;
-              resize: none;
-              background: transparent;
-              color: #666666;
-              min-height: 74px;
-              font-size: 14px;
-              font-weight: 400;
-              line-height: 22px;
-              align-self: center;
-              overflow: auto;
-              scrollbar-width: none;
-              -ms-overflow-style: none;
-            }
-
-            .charactersCreate__composerTextarea.arco-textarea-wrapper {
-              display: flex;
-              align-items: center;
-            }
-
-            .arco-textarea-wrapper,
-            .arco-textarea-wrapper:hover,
-            .arco-textarea-wrapper:focus-within,
-            .arco-textarea-wrapper.arco-textarea-focus,
-            .charactersCreate__composerTextarea,
-            .charactersCreate__composerTextarea:hover,
-            .charactersCreate__composerTextarea:focus-within {
-              background: transparent !important;
-              background-color: transparent !important;
-              box-shadow: none !important;
-              border-color: transparent !important;
-            }
-
-            .arco-textarea-wrapper .arco-textarea,
-            .arco-textarea-wrapper:hover .arco-textarea,
-            .arco-textarea-wrapper:focus-within .arco-textarea,
-            .charactersCreate__composerTextarea .arco-textarea,
-            .charactersCreate__composerTextarea:hover .arco-textarea {
-              background: transparent !important;
-              background-color: transparent !important;
-            }
-
-            .charactersCreate__composerTextarea::-webkit-scrollbar {
-              width: 0;
-              height: 0;
-              display: none;
-            }
-
-            .charactersCreate__composerTextarea .arco-textarea {
-              overflow: auto;
-              scrollbar-width: none;
-              -ms-overflow-style: none;
-              min-height: unset;
-            }
-
-            .charactersCreate__composerTextarea .arco-textarea::-webkit-scrollbar {
-              width: 0;
-              height: 0;
-              display: none;
-            }
-
-            .charactersCreate__composerTextarea::placeholder {
-              color: #999999;
-              font-weight: 500;
-            }
-
-            .charactersCreate__composerTextarea .arco-textarea::placeholder {
-              color: #999999;
-              font-weight: 500;
-            }
-          }
-
-          &.charactersCreate__composerPanel_promptExpanded {
-            min-height: min(60vh, 520px);
-            box-shadow: 0 2px 12px rgba(51, 51, 51, 0.08);
-
-            .charactersCreate__composerRow {
-              flex: 1 1 auto;
-              min-height: min(42vh, 360px);
-              padding-right: 18px;
-            }
-
-            .charactersCreate__composerTextarea,
-            .charactersCreate__composerTextarea .arco-textarea {
-              min-height: min(42vh, 360px) !important;
-              max-height: min(42vh, 360px) !important;
-            }
-          }
-
-          .charactersCreate__composerToolbar {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: space-between;
-            gap: 10px;
-            margin-top: 10px;
-            position: relative;
-            z-index: 1;
-            overflow: visible;
-
-            .charactersCreate__composerChips {
-              display: flex;
-              align-items: center;
-              gap: 5px;
-              min-width: 0;
-              overflow-x: auto;
-              overflow-y: hidden;
-              @include hide-scrollbar;
-
-              .charactersCreate__paramDropdownTrigger,
-              .charactersCreate__modelDropdownTrigger {
-                display: inline-flex;
-                z-index: 2223;
-              }
-
-              .charactersCreate__modelDropdownTrigger {
-                order: 1;
-              }
-
-              .charactersCreate__paramDropdownTrigger {
-                order: 2;
-              }
-
-              .charactersCreate__pill {
-                min-height: 30px;
-                display: inline-flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: center;
-                height: 30px;
-                border: none;
-                background: #fbf0ff;
-                border-radius: 24px;
-                font-size: 12px;
-                font-weight: 400;
-                line-height: 12px;
-                color: #333333;
-                cursor: pointer;
-                box-sizing: border-box;
-              }
-
-              .charactersCreate__pill--model {
-                padding: 0 10px;
-                gap: 5px;
-                min-width: 89px;
-
-                .charactersCreate__modelIcon {
-                  width: 15px;
-                  height: 15px;
-                  object-fit: contain;
-                  flex-shrink: 0;
-                }
-
-                .charactersCreate__modelIcon_skeleton {
-                  border-radius: 50%;
-                  filter: none;
-                }
-
-                .charactersCreate__pillText {
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                }
-
-                .charactersCreate__pillText_skeleton {
-                  width: 54px;
-                  height: 10px;
-                  border-radius: 999px;
-                }
-              }
-
-              .charactersCreate__pill--spec {
-                padding: 0 10px;
-                gap: 0;
-                min-width: 0;
-                max-width: 290px;
-
-                .charactersCreate__paramPresetContent,
-                .charactersCreate__paramPresetItem {
-                  display: inline-flex;
-                  align-items: center;
-                  justify-content: center;
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                }
-
-                .charactersCreate__paramPresetContent {
-                  max-width: 100%;
-                }
-
-                .charactersCreate__paramPresetContent_skeleton {
-                  display: block;
-                  width: 148px;
-                  height: 10px;
-                  border-radius: 999px;
-                }
-
-                .charactersCreate__paramPresetItem {
-                  gap: 4px;
-                  min-width: 0;
-                  flex: 0 1 auto;
-                }
-
-                .charactersCreate__paramPresetItem_ratio {
-                  gap: 3px;
-                  font-size: 11px;
-                  line-height: 18px;
-                }
-
-                .charactersCreate__paramPresetName {
-                  color: #6f47f5;
-                  flex: 0 0 auto;
-                }
-
-                .charactersCreate__paramPresetValue {
-                  min-width: 0;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  color: #252525;
-                }
-
-                .charactersCreate__paramPresetRatioShape {
-                  display: inline-block;
-                  box-sizing: border-box;
-                  flex: 0 0 auto;
-                  border: 1px solid #6f47f5;
-                  border-radius: 2.5px;
-                  transform: scale(0.66);
-                  transform-origin: center;
-                }
-
-                .charactersCreate__paramPresetDivider {
-                  width: 1px;
-                  height: 12px;
-                  background: #eadcf2;
-                  margin: 0 6px;
-                  display: inline-block;
-                  flex: 0 0 auto;
-                }
-              }
-
-              .charactersCreate__composerResetBtn {
-                order: 3;
-                display: inline-flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: center;
-                min-width: 64px;
-                height: 30px;
-                padding: 0 10px;
-                gap: 5px;
-                border: none;
-                border-radius: 24px;
-                background: #fbf0ff;
-                color: #333333;
-                font-size: 12px;
-                font-weight: 400;
-                line-height: 12px;
-                cursor: pointer;
-                box-sizing: border-box;
-                flex: 0 0 auto;
-
-                img {
-                  width: 10px;
-                  height: 10px;
-                  display: block;
-                  flex-shrink: 0;
-                }
-              }
-            }
-
-            .charactersCreate__composerActions {
-              display: flex;
-              align-items: center;
-              gap: 15px;
-              flex-shrink: 0;
-              position: relative;
-              z-index: 1;
-              overflow: visible;
-
-              .charactersCreate__composerCostBtn {
-                position: relative;
-                z-index: 1;
-                overflow: visible;
-                display: inline-flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: center;
-                gap: 0;
-                width: 45.77px;
-                height: 45.77px;
-                border: none;
-                border-radius: 100px;
-                background: #6f47f5;
-                color: #ffffff;
-                font-size: 12px;
-                font-weight: 500;
-                line-height: 12px;
-                cursor: pointer;
-
-                img {
-                  width: 16px;
-                  height: 21px;
-                  display: block;
-                }
-
-                span:not(.charactersCreate__composerCostDiscountBadge) {
-                  display: none;
-                }
-
-                .charactersCreate__composerCostDiscountBadge {
-                  position: absolute;
-                  top: -10px;
-                  right: 0;
-                  z-index: 2;
-                  display: inline-flex;
-                  align-items: center;
-                  justify-content: center;
-                  min-width: 56px;
-                  height: 19px;
-                  padding: 0 6px;
-                  box-sizing: border-box;
-                  border-radius: 10px;
-                  border-bottom-right-radius: 5px;
-                  background: #f6efdb;
-                  color: #cf680e;
-                  font-size: 12px;
-                  font-weight: 500;
-                  line-height: normal;
-                  white-space: nowrap;
-                  pointer-events: none;
-
-                  strong {
-                    font-weight: 900;
-                  }
-                }
-              }
-
-              .charactersCreate__composerCostBtn_skeleton {
-                background: $characters-create-skeleton-gradient;
-                background-size: 400% 100%;
-                cursor: default;
-                pointer-events: none;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .charactersCreate__right {
-      container-type: inline-size;
-      container-name: characters-create-right;
-      flex: 0 0 494px;
-      width: 494px;
-      min-width: 494px;
-      max-width: 494px;
-      min-height: 0;
-      align-self: stretch;
-      padding: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      background: transparent;
-      border-radius: 26px;
-      overflow-x: hidden;
-      overflow-y: visible;
-
-      .charactersCreate__rightStack {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 10px;
-        flex: 1 1 auto;
-        min-height: 0;
-        width: 100%;
-        overflow-x: hidden;
-        overflow-y: hidden;
-        @include hide-scrollbar;
-
-        .charactersCreate__rightCreatePanel {
-          width: 100%;
-          flex: 1 1 auto;
-          min-height: 0;
-          padding: 20px;
-          border-radius: 26px;
-          background: #ffffff;
-
-          .charactersCreate__rightCreatePlaceholder {
-            height: 100%;
-            min-height: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 20px;
-
-            .charactersCreate__rightCreateAvatarPlaceholder {
-              width: 112px;
-              height: 112px;
-              border-radius: 50%;
-              background: linear-gradient(135deg, #f0f0f0 0%, #d6ceef 100%);
-            }
-
-            .charactersCreate__rightCreateFieldPlaceholder,
-            .charactersCreate__rightCreateTextareaPlaceholder {
-              width: 100%;
-              border-radius: 26px;
-              background: #f0f4f9;
-            }
-
-            .charactersCreate__rightCreateFieldPlaceholder {
-              height: 40px;
-            }
-
-            .charactersCreate__rightCreateTextareaPlaceholder {
-              height: 267px;
-            }
-          }
-        }
-
-        .charactersCreate__rightCreatePanel.charactersCreate__rightCreatePanel_skeleton {
-          .charactersCreate__rightCreatePlaceholder {
-            .charactersCreate__rightCreateAvatarPlaceholder,
-            .charactersCreate__rightCreateFieldPlaceholder,
-            .charactersCreate__rightCreateTextareaPlaceholder {
-              background: $characters-create-skeleton-gradient;
-              background-size: 400% 100%;
-            }
-          }
-        }
-
-        .charactersCreate__rightServiceRow {
-          width: 100%;
-          flex: 0 0 93px;
-          height: 93px;
-          display: grid;
-          grid-template-columns: repeat(2, minmax(0, 1fr));
-          gap: 10px;
-
-          .charactersCreate__serviceCard {
-            height: 100%;
-            padding: 20px;
-            border-radius: 26px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            cursor: pointer;
-
-            .charactersCreate__serviceText {
-              display: flex;
-              flex-direction: column;
-              gap: 5px;
-
-              .charactersCreate__serviceTitle {
-                font-size: 20px;
-                font-weight: 600;
-                line-height: normal;
-              }
-
-              .charactersCreate__serviceSub {
-                font-size: 14px;
-                font-weight: 400;
-                line-height: normal;
-              }
-            }
-
-            .charactersCreate__serviceArrow {
-              width: 34px;
-              height: 34px;
-              border: 1px solid #000000;
-              border-radius: 50%;
-              color: #000000;
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-
-              img {
-                width: 17px;
-                height: 17px;
-                transform: rotate(-90deg);
-                filter: brightness(0);
-              }
-            }
-          }
-
-          .charactersCreate__serviceCard_deposit {
-            background: #f7e7d9;
-            color: #9a795c;
-          }
-
-          .charactersCreate__serviceCard_artist {
-            background: #e5f3e5;
-            color: #558955;
-          }
-        }
-
-        .charactersCreate__rightCreateSubmitPanel {
-          width: 100%;
-          flex: 0 0 96px;
-          height: 96px;
-          padding: 19px 20px;
-          border-radius: 26px;
-          background: #ffffff;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-
-          .charactersCreate__rightCreateSubmitBtn {
-            width: 287px;
-            max-width: 287px;
-            height: 57px;
-            border-radius: 100px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.charactersCreate__skeletonBlock {
-  display: block;
-  background: $characters-create-skeleton-gradient;
-  background-size: 400% 100%;
-  animation: charactersCreateSkeletonShimmer 1.5s cubic-bezier(0, 0, 1, 1) infinite;
-}
-
-@keyframes charactersCreateSkeletonShimmer {
-  0% {
-    background-position: 100% 50%;
-  }
-
-  100% {
-    background-position: 0 50%;
-  }
-}
-
-@keyframes charactersCreateTaskStageEnterNext {
-  0% {
-    transform: translate3d(0, 100%, 0);
-  }
-
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes charactersCreateTaskStageLeaveNext {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-
-  100% {
-    transform: translate3d(0, -100%, 0);
-  }
-}
-
-@keyframes charactersCreateTaskStageEnterPrevious {
-  0% {
-    transform: translate3d(0, -100%, 0);
-  }
-
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes charactersCreateTaskStageLeavePrevious {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-
-  100% {
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .charactersCreate .charactersCreate__taskViewport {
-    animation: none;
-    transform: none;
-  }
-}
-
-.charactersCreate__modelDropdown {
-  width: 529px;
-  padding: 15px;
-  border-radius: 26px;
-  background: #ffffff;
-  box-shadow: 0 2px 7.5px 0 rgba(51, 51, 51, 0.2);
-  box-sizing: border-box;
-  max-height: min(620px, calc(100vh - 120px));
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .charactersCreate__modelDropdownTitle {
-    margin: 0;
-    color: #666666;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 12px;
-  }
-
-  .charactersCreate__modelDropdownList {
-    margin-top: 12.5px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    min-height: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    scrollbar-width: thin;
-
-    .charactersCreate__modelDropdownItem {
-      width: 100%;
-      border: 1px dashed transparent;
-      border-radius: 100px;
-      background: #ffffff;
-      padding: 15px 20px;
-      min-height: 65px;
-      display: flex;
-      align-items: flex-start;
-      gap: 10px;
-      text-align: left;
-      cursor: pointer;
-      box-sizing: border-box;
-
-      .charactersCreate__modelDropdownItemIcon {
-        width: 26px;
-        height: 26px;
-        margin-top: 5px;
-        display: block;
-        object-fit: contain;
-        flex-shrink: 0;
-      }
-
-      .charactersCreate__modelDropdownItemText {
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-        height: 35px;
-
-        .charactersCreate__modelDropdownItemName {
-          height: 15px;
-          color: #333333;
-          font-size: 14px;
-          font-weight: 500;
-          line-height: 26px;
-          display: flex;
-          align-items: center;
-        }
-
-        .charactersCreate__modelDropdownItemDesc {
-          margin-top: 5px;
-          height: 15px;
-          color: #999999;
-          font-size: 12px;
-          font-weight: 400;
-          line-height: 16px;
-          display: flex;
-          align-items: center;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-
-    .charactersCreate__modelDropdownItem:hover {
-      background: #fbf0ff;
-    }
-
-    .charactersCreate__modelDropdownItem_active {
-      border-color: #6f47f5;
-      background: #fbf0ff;
-    }
-
-    .charactersCreate__modelDropdownItem_active .charactersCreate__modelDropdownItemName,
-    .charactersCreate__modelDropdownItem_active .charactersCreate__modelDropdownItemDesc {
-      color: #6f47f5;
-    }
-  }
-}
-
-.charactersCreate__paramDropdown {
-  width: 320px;
-  padding: 15px;
-  border-radius: 26px;
-  background: #ffffff;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  .charactersCreate__paramGroup {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .charactersCreate__paramTitle {
-      margin: 0;
-      color: #4f4f4f;
-      font-size: 12px;
-      font-weight: 400;
-      line-height: normal;
-    }
-
-    .charactersCreate__paramOptions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-
-      .charactersCreate__paramOption {
-        min-width: 65px;
-        height: 38px;
-        border: 1px dashed transparent;
-        border-radius: 100px;
-        padding: 0 12px;
-        background: #ffffff;
-        color: #4f4f4f;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 26px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        box-sizing: border-box;
-      }
-
-      .charactersCreate__paramOption:hover {
-        background: #fbf0ff;
-      }
-
-      .charactersCreate__paramOption_active {
-        border-color: #6f47f5;
-        background: #fbf0ff;
-        color: #6f47f5;
-        font-weight: 400;
-      }
-    }
-
-    .charactersCreate__paramOptions_ratio {
-      width: 290px;
-      display: grid;
-      grid-template-columns: repeat(4, 65px);
-      column-gap: 10px;
-      row-gap: 10px;
-
-      .charactersCreate__paramOption_ratio {
-        width: 65px;
-        min-width: 65px;
-        height: 65px;
-        padding: 0;
-        border-radius: 20px;
-        display: grid;
-        grid-template-rows: 26px 15px;
-        align-content: center;
-        justify-items: center;
-        row-gap: 6px;
-        font-size: 12px;
-        line-height: 26px;
-
-        .charactersCreate__ratioShapeSlot {
-          width: 100%;
-          height: 26px;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-
-          .charactersCreate__ratioShape {
-            border: 1px solid #4f4f4f;
-            border-radius: 2px;
-            box-sizing: border-box;
-            display: block;
-          }
-        }
-
-        .charactersCreate__ratioLabel {
-          display: block;
-          color: inherit;
-          font-size: 12px;
-          font-weight: 400;
-          line-height: 26px;
-        }
-      }
-
-      .charactersCreate__paramOption_active .charactersCreate__ratioShape {
-        border-color: #6f47f5;
-      }
-
-      .charactersCreate__paramOption_active .charactersCreate__ratioLabel {
-        color: #6f47f5;
-        font-weight: 400;
-      }
-    }
-
-    .charactersCreate__paramRatioSizeWrap {
-      margin-top: 4px;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-
-      .charactersCreate__paramRatioSizeRow {
-        display: flex;
-        align-items: center;
-        gap: 15px;
-
-        .charactersCreate__paramRatioSizeValue {
-          width: 130px;
-          height: 38px;
-          border-radius: 9px;
-          background: #ffffff;
-          color: #4f4f4f;
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 26px;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          user-select: none;
-          pointer-events: none;
-        }
-
-        .charactersCreate__paramRatioSizeLink {
-          width: 15px;
-          height: 15px;
-          display: block;
-          flex-shrink: 0;
-        }
-      }
-    }
-  }
-
-  .charactersCreate__paramGroup:not(:has(.charactersCreate__paramOptions_ratio)) .charactersCreate__paramOptions {
-    width: 290px;
-    gap: 0;
-    border-radius: 9px;
-    background: #ffffff;
-    overflow: hidden;
-  }
-
-  .charactersCreate__paramGroup:not(:has(.charactersCreate__paramOptions_ratio)) .charactersCreate__paramOption {
-    flex: 1 1 0;
-    min-width: 0;
-  }
-}
-
-@media (max-width: 1680px) {
-  .charactersCreate {
-    .charactersCreate__row {
-      .charactersCreate__left {
-        flex-basis: 300px;
-        max-width: 300px;
-      }
-
-      .charactersCreate__center {
-        flex: 1 1 760px;
-        min-width: 660px;
-      }
-
-      .charactersCreate__right {
-        flex-basis: 430px;
-        width: 430px;
-        min-width: 430px;
-        max-width: 430px;
-      }
-    }
-  }
-
-  .charactersCreate .charactersCreate__row .charactersCreate__left .charactersCreate__leftInner .charactersCreate__leftBody .charactersCreate__leftScroll .charactersCreate__styleGrid {
-    width: 240px;
-  }
-
-  .charactersCreate .charactersCreate__row .charactersCreate__left .charactersCreate__leftInner .charactersCreate__leftBody .charactersCreate__leftScroll .charactersCreate__styleGrid .charactersCreate__styleCell {
-    width: 76px;
-    height: 76px;
-  }
-}
+@use "../../assets/styles/mixins" as *;
+$characters-create-skeleton-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.07) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.07) 63%);
+
+.charactersCreate {
+  box-sizing: border-box;
+  width: 100%;
+  /* 与 layoutShell__body 同模式：(视口可用高) / scale；14px 为 contentFrame 内边距 */
+  height: calc((100vh - var(--layout-chrome-top) - 14px) / var(--layout-scale, 1));
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  .charactersCreate__row {
+    padding: 0 30px;
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: 10px;
+    width: 100%;
+    margin: 0 auto;
+    overflow-x: auto;
+    overflow-y: hidden;
+    @include hide-scrollbar;
+
+    .charactersCreate__left {
+      flex: 0 0 330px;
+      min-width: 0;
+      max-width: 330px;
+      min-height: 0;
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      background: #ffffff;
+      border-radius: 26px;
+      box-shadow: none;
+      overflow: hidden;
+
+      .charactersCreate__leftInner {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        gap: 0;
+        padding-bottom: 20px;
+        background: #ffffff;
+        border-radius: 26px;
+
+        .charactersCreate__leftBody {
+          flex: 1;
+          min-height: 0;
+          display: flex;
+          flex-direction: column;
+          background: #ffffff;
+          border-radius: 26px;
+          overflow: hidden;
+
+          .charactersCreate__leftDiyBanner {
+            width: 100%;
+            height: 115px;
+            padding: 20px;
+            border-radius: 24px;
+            background: linear-gradient(0deg, rgba(210, 195, 255, 0) 14.9%, #d2c3ff 100%);
+
+            .charactersCreate__leftDiyBannerTitle {
+              margin: 0;
+              width: auto;
+              height: 34px;
+              font-size: 30px;
+              font-weight: 500;
+              line-height: normal;
+              color: #333;
+              display: flex;
+              align-items: center;
+            }
+
+            .charactersCreate__leftDiyBannerDesc {
+              margin: 8px 0 0;
+              width: auto;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: normal;
+              color: #333333;
+            }
+          }
+
+          .charactersCreate__styleTabBar {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            overflow-x: auto;
+            height: 30px;
+            margin: 20px 20px;
+            @include hide-scrollbar;
+
+            /* 右侧线性淡出：提示可横向滚动，视觉与参考图一致 */
+            -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 172px), transparent 100%);
+            mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 172px), transparent 100%);
+            -webkit-mask-size: 100% 100%;
+            mask-size: 100% 100%;
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+
+            .charactersCreate__styleTab {
+              flex: 0 0 auto;
+              height: 30px;
+              padding: 5px 20px;
+              border: none;
+              border-radius: 24px;
+              background: #fbf0ff;
+              color: #6f47f5;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: normal;
+              cursor: pointer;
+              position: relative;
+            }
+
+            .charactersCreate__styleTab_active {
+              background: #6f47f5;
+              color: #ffffff;
+              font-weight: 400;
+            }
+
+            .charactersCreate__styleTab_skeleton {
+              width: 82px;
+              padding: 0;
+              background: $characters-create-skeleton-gradient;
+              background-size: 400% 100%;
+              color: transparent;
+              cursor: default;
+              pointer-events: none;
+            }
+          }
+
+          .charactersCreate__styleTabBar_noRightFade {
+            -webkit-mask-image: none;
+            mask-image: none;
+          }
+
+          .charactersCreate__leftScroll {
+            flex: 1;
+            min-height: 0;
+            overflow-y: auto;
+            margin: 0 20px;
+            padding: 11px 10px 9px;
+            border-radius: 26px;
+            background: #f0f4f9;
+            @include hide-scrollbar;
+
+            .charactersCreate__styleGrid {
+              display: grid;
+              grid-template-columns: repeat(3, minmax(0, 1fr));
+              gap: 6px;
+              width: 270px;
+
+              .charactersCreate__styleCell {
+                margin: 0;
+                padding: 0;
+                width: 86px;
+                height: 86px;
+                background: #ffffff;
+                cursor: pointer;
+                border-radius: 24px;
+                position: relative;
+                overflow: hidden;
+                border: 0;
+                background-image: none;
+
+                .charactersCreate__styleCellInner {
+                  display: block;
+                  width: 100%;
+                  height: 100%;
+                  border-radius: 24px;
+                  overflow: hidden;
+
+                  .charactersCreate__styleImg {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 24px;
+                    object-fit: cover;
+                  }
+                }
+              }
+
+              .charactersCreate__styleCell_selected {
+                border: 1px dashed #6f47f5;
+                background: #fbf0ff;
+                box-sizing: border-box;
+              }
+
+              .charactersCreate__styleCell_skeleton {
+                background: transparent;
+                cursor: default;
+                pointer-events: none;
+              }
+
+              .charactersCreate__styleCellInner_skeleton {
+                width: 100%;
+                height: 100%;
+                border-radius: 24px;
+              }
+            }
+          }
+        }
+
+        .charactersCreate__leftMore {
+          flex-shrink: 0;
+          margin-top: 20px;
+          align-self: center;
+          width: 173px;
+          height: 42px;
+          border: 1px solid #333333;
+          border-radius: 24px;
+          background: #ffffff;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: normal;
+          color: #333333;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .charactersCreate__center {
+      flex: 0 0 min(906px, calc(100vw - 864px));
+      min-width: 720px;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      border-radius: 24px;
+      padding: 20px;
+      gap: 20px;
+      background: linear-gradient(134deg, rgba(233, 218, 238, 0.5) 3.04%, #eaebeb 24.64%, #f0f0f0 50%, rgba(218, 214, 229, 0.5) 96.96%);
+      overflow: hidden;
+
+      .charactersCreate__empty {
+        flex: 1 1 auto;
+        min-height: 0;
+        width: 100%;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: clamp(24px, 4vw, 48px) clamp(16px, 2.5vw, 24px);
+        gap: 0;
+        @include hide-scrollbar;
+
+        .charactersCreate__emptyIcon {
+          width: 113px;
+          height: 113px;
+          object-fit: contain;
+          display: block;
+        }
+
+        .charactersCreate__emptyText {
+          margin-top: 0;
+          text-align: center;
+          font-size: 16px;
+          font-weight: 400;
+          line-height: normal;
+          color: #d6ceef;
+
+          .charactersCreate__emptyLine {
+            margin: 0;
+          }
+        }
+      }
+
+      .charactersCreate__taskStage {
+        flex: 1 1 auto;
+        min-height: 0;
+        width: 100%;
+        display: flex;
+        align-items: stretch;
+
+        .charactersCreate__taskCanvas {
+          position: relative;
+          flex: 1 1 auto;
+          min-height: 0;
+          border-radius: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+
+          .charactersCreate__taskViewport {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            min-height: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transform: translate3d(0, 0, 0);
+            will-change: transform;
+          }
+
+          .charactersCreate__taskViewport_static {
+            position: relative;
+            inset: auto;
+            will-change: auto;
+          }
+
+          .charactersCreate__taskViewport_enterPrevious {
+            animation: charactersCreateTaskStageEnterPrevious 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
+          }
+
+          .charactersCreate__taskViewport_enterNext {
+            animation: charactersCreateTaskStageEnterNext 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
+          }
+
+          .charactersCreate__taskViewport_leavePrevious {
+            animation: charactersCreateTaskStageLeavePrevious 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
+            pointer-events: none;
+          }
+
+          .charactersCreate__taskViewport_leaveNext {
+            animation: charactersCreateTaskStageLeaveNext 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
+            pointer-events: none;
+          }
+
+          .charactersCreate__taskResultFrame {
+            position: relative;
+            width: min(100%, 678px);
+            max-height: calc(100% - 40px);
+            aspect-ratio: 678 / 381;
+            border-radius: 26px;
+            background: rgba(119, 99, 186, 0.05);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+
+            .charactersCreate__taskResultImage {
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+            }
+
+            .charactersCreate__taskResultDeleteBtn {
+              position: absolute;
+              top: 14px;
+              right: 14px;
+              z-index: 2;
+              width: 20px;
+              height: 20px;
+              border: 0;
+              border-radius: 50%;
+              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+              cursor: pointer;
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              opacity: 0;
+              pointer-events: none;
+              transition:
+                opacity 0.18s ease,
+                background-color 0.18s ease;
+
+              &:hover,
+              &:focus-visible {
+                background: #ffffff;
+              }
+
+              &:disabled {
+                cursor: default;
+              }
+
+              img {
+                width: 20px;
+                height: 20px;
+                display: block;
+                object-fit: contain;
+              }
+            }
+
+            &:hover,
+            &:focus-within {
+              .charactersCreate__taskResultDeleteBtn {
+                opacity: 1;
+                pointer-events: auto;
+              }
+            }
+
+            .charactersCreate__taskGeneratingOverlay {
+              position: absolute;
+              inset: 0;
+              border-radius: 26px;
+              padding: 20px;
+              background: rgba(223, 223, 223, 0.2);
+              backdrop-filter: blur(25.62px);
+
+              .charactersCreate__taskGeneratingBadge {
+                display: inline-flex;
+                height: 28px;
+                padding: 4px 7px;
+                align-items: center;
+                justify-content: center;
+                border-radius: 8px;
+                background: rgba(255, 255, 255, 0.15);
+                color: #2a2a2a;
+                font-size: 14px;
+                font-weight: 400;
+              }
+            }
+          }
+
+          .charactersCreate__taskResultFrame_pending {
+            background: linear-gradient(135deg, rgba(219, 202, 238, 0.78) 0%, rgba(171, 207, 232, 0.78) 100%);
+          }
+
+          .charactersCreate__taskResultFrame_skeleton {
+            background: transparent;
+          }
+
+          .charactersCreate__taskResultImage_skeleton {
+            width: 100%;
+            height: 100%;
+            border-radius: 26px;
+          }
+
+          .charactersCreate__currentPromptToggle {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            width: 35px;
+            height: 35px;
+            padding: 5px;
+            border: 0;
+            border-radius: 17.5px;
+            background: #ffffff;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+
+            img {
+              width: 25px;
+              height: 25px;
+              object-fit: contain;
+            }
+          }
+
+          .charactersCreate__currentPromptCard {
+            position: absolute;
+            left: 0;
+            right: 48px;
+            bottom: 20px;
+            min-height: 154px;
+            padding: 20px;
+            border-radius: 26px;
+            background: rgba(81, 55, 170, 0.3);
+            backdrop-filter: blur(10px);
+
+            .charactersCreate__currentPromptRefs {
+              display: flex;
+              align-items: center;
+              gap: 5px;
+
+              .charactersCreate__currentPromptRef {
+                width: 55px;
+                height: 55px;
+                border-radius: 8px;
+                object-fit: cover;
+              }
+            }
+
+            .charactersCreate__currentPromptText {
+              margin: 10px 0 0;
+              color: #ffffff;
+              font-size: 14px;
+              font-weight: 500;
+              line-height: normal;
+              word-break: break-word;
+            }
+          }
+
+          .charactersCreate__taskSwitch {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            transform: translateY(-50%);
+
+            .charactersCreate__taskSwitchBtn {
+              width: 35px;
+              min-width: 35px;
+              height: 65px;
+              border: 0;
+              border-radius: 24px;
+              background: #ffffff;
+              padding: 5px;
+              cursor: pointer;
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+            }
+
+            .charactersCreate__taskSwitchBtn:disabled {
+              opacity: 0.6;
+              cursor: not-allowed;
+            }
+
+            .charactersCreate__taskSwitchBtn_skeleton {
+              background: $characters-create-skeleton-gradient;
+              background-size: 400% 100%;
+              cursor: default;
+              pointer-events: none;
+            }
+
+            .charactersCreate__taskSwitchBtn img {
+              width: 25px;
+              height: 25px;
+              object-fit: contain;
+            }
+
+            .charactersCreate__taskSwitchBtn_prev img {
+              transform: rotate(-90deg);
+            }
+
+            .charactersCreate__taskSwitchBtn_next img {
+              transform: rotate(90deg);
+            }
+          }
+        }
+      }
+
+      .charactersCreate__composer {
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 100%;
+        padding: 0;
+        position: relative;
+        z-index: 1000;
+
+        .charactersCreate__composerPanel {
+          width: 100%;
+          margin-top: 0;
+          border: 0;
+          border-radius: 26px;
+          background: #ffffff;
+          min-height: 150px;
+          padding: 15px 20px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          position: relative;
+          transition:
+            min-height 0.18s ease,
+            box-shadow 0.18s ease;
+
+          .charactersCreate__composerExpandPromptBtn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            z-index: 5;
+            width: 20px;
+            height: 20px;
+            border: none;
+            border-radius: 5px;
+            background: transparent;
+            padding: 0;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+
+            img {
+              width: 20px;
+              height: 20px;
+              display: block;
+              object-fit: contain;
+            }
+          }
+
+          .charactersCreate__composerExpandPromptBtn:hover {
+            background: #f0f0f0;
+          }
+
+          .charactersCreate__composerRow {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: flex-start;
+            gap: 10px;
+            border-radius: 9px;
+            position: relative;
+
+            .charactersCreate__promptLibraryWrap {
+              position: relative;
+              flex: 0 0 auto;
+
+              .charactersCreate__promptLibraryButton {
+                position: relative;
+                flex: 0 0 80px;
+                width: 80px;
+                height: 80px;
+                border: none;
+                border-radius: 10px;
+                background: transparent;
+                color: #6f47f5;
+                padding: 0;
+                font-size: 11.44px;
+                line-height: normal;
+                cursor: pointer;
+                box-sizing: border-box;
+
+                .charactersCreate__promptLibraryStack {
+                  position: absolute;
+                  inset: 0;
+                  display: block;
+
+                  .charactersCreate__promptLibraryStackLayer {
+                    position: absolute;
+                    border: 1px dashed #6f47f5;
+                    border-radius: 10px;
+                    background: #fbf0ff;
+                    box-sizing: border-box;
+                  }
+
+                  .charactersCreate__promptLibraryStackLayer--back {
+                    top: 0;
+                    left: 9px;
+                    width: 63px;
+                    height: 53px;
+                    z-index: 1;
+                  }
+
+                  .charactersCreate__promptLibraryStackLayer--mid {
+                    top: 6px;
+                    left: 3px;
+                    width: 75px;
+                    height: 74px;
+                    z-index: 2;
+                  }
+
+                  .charactersCreate__promptLibraryStackLayer--front {
+                    top: 13px;
+                    left: 0;
+                    width: 80px;
+                    height: 67px;
+                    z-index: 3;
+                    overflow: hidden;
+
+                    .charactersCreate__promptLibraryPreview {
+                      width: 100%;
+                      height: 100%;
+                      display: block;
+                      border-radius: 10px;
+                      object-fit: cover;
+                    }
+
+                    .charactersCreate__promptLibraryPreview_skeleton {
+                      object-fit: initial;
+                    }
+                  }
+
+                  .charactersCreate__promptLibraryIconWrap {
+                    position: absolute;
+                    top: 27px;
+                    left: 30px;
+                    z-index: 4;
+                    width: 20px;
+                    height: 20px;
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    .charactersCreate__promptLibraryIcon {
+                      width: 20px;
+                      height: 20px;
+                      display: block;
+                      object-fit: contain;
+                    }
+                  }
+
+                  .charactersCreate__promptLibraryLabel {
+                    position: absolute;
+                    top: 47px;
+                    left: 22px;
+                    z-index: 4;
+                    max-width: 64px;
+                    height: 20px;
+                    color: #6f47f5;
+                    font-size: 11.44px;
+                    font-weight: 400;
+                    line-height: normal;
+                    text-align: center;
+                    white-space: nowrap;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  }
+                }
+              }
+
+              .charactersCreate__promptLibraryButton_active {
+                color: #6f47f5;
+              }
+
+              .charactersCreate__promptLibraryPanel {
+                position: absolute;
+                left: 0;
+                bottom: calc(100% + 14px);
+                z-index: 20;
+                width: 455px;
+                min-height: 155px;
+                padding: 20px;
+                border-radius: 26px;
+                background: #ffffff;
+                box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+                display: grid;
+                grid-template-columns: repeat(4, 100px);
+                grid-auto-rows: 120px;
+                gap: 5px;
+                overflow: hidden;
+                box-sizing: border-box;
+
+                .charactersCreate__promptLibraryCard {
+                  width: 100px;
+                  height: 120px;
+                  padding: 10px;
+                  border: 1px dashed transparent;
+                  border-radius: 26px;
+                  background: #ffffff;
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  justify-content: center;
+                  gap: 5px;
+                  cursor: pointer;
+                  box-sizing: border-box;
+                  overflow: hidden;
+
+                  .charactersCreate__promptLibraryCardImg {
+                    width: 80px;
+                    height: 80px;
+                    display: block;
+                    flex: 0 0 auto;
+                    border-radius: 24px;
+                    object-fit: cover;
+                  }
+
+                  .charactersCreate__promptLibraryCardTitle {
+                    width: 80px;
+                    height: 15px;
+                    color: #333333;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 26px;
+                    text-align: center;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  }
+                }
+
+                .charactersCreate__promptLibraryCard:disabled {
+                  cursor: default;
+                  opacity: 0.7;
+                }
+
+                .charactersCreate__promptLibraryCard_active,
+                .charactersCreate__promptLibraryCard:hover:not(:disabled) {
+                  border-color: #6f47f5;
+                  background: #fbf0ff;
+                }
+
+                .charactersCreate__promptLibraryCard_skeleton {
+                  border-color: transparent;
+                  background: #ffffff;
+                  cursor: default;
+                  pointer-events: none;
+                }
+
+                .charactersCreate__promptLibraryCard_skeleton:hover {
+                  border-color: transparent;
+                  background: #ffffff;
+                }
+
+                .charactersCreate__promptLibraryCardImg_skeleton {
+                  border-radius: 24px;
+                }
+
+                .charactersCreate__promptLibraryCardTitle_skeleton {
+                  height: 10px;
+                  border-radius: 999px;
+                }
+              }
+            }
+
+            .charactersCreate__composerUploadCard {
+              width: 80px;
+              height: 80px;
+              border: 1px dashed #6f47f5;
+              border-radius: 9px;
+              background: #fbf0ff;
+              padding: 0;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              flex-shrink: 0;
+              cursor: pointer;
+              position: relative;
+              box-sizing: border-box;
+            }
+
+            .charactersCreate__composerUploadCard > img {
+              width: 35px;
+              height: 35px;
+              display: block;
+              border-radius: 7px;
+              object-fit: contain;
+            }
+
+            .charactersCreate__composerUploadCard_preview {
+              border: none;
+              background: transparent;
+              cursor: default;
+              overflow: visible;
+
+              .charactersCreate__composerUploadPreview {
+                width: 100% !important;
+                height: 100% !important;
+                object-fit: cover;
+                border-radius: 7px;
+              }
+
+              .charactersCreate__composerUploadDeleteBtn {
+                position: absolute;
+                top: 2px;
+                right: 2px;
+                width: 15px;
+                height: 15px;
+                border: none;
+                background: transparent;
+                padding: 0;
+                display: inline-flex;
+                cursor: pointer;
+                opacity: 0;
+                pointer-events: none;
+              }
+
+              .charactersCreate__composerUploadDeleteBtn img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+              }
+            }
+
+            .charactersCreate__composerUploadCard_preview:hover .charactersCreate__composerUploadDeleteBtn {
+              opacity: 1;
+              pointer-events: auto;
+            }
+
+            .composerUploadSortableItem {
+              width: 80px;
+              height: 80px;
+              flex: 0 0 80px;
+              position: relative;
+              transition:
+                transform 0.14s ease,
+                box-shadow 0.14s ease,
+                opacity 0.14s ease;
+              user-select: none;
+              touch-action: none;
+            }
+
+            .composerUploadSortableItem_enabled {
+              cursor: grab;
+            }
+
+            .composerUploadSortableItem_enabled:active {
+              cursor: grabbing;
+            }
+
+            .composerUploadSortableItem_dragging {
+              z-index: 2;
+              opacity: 0.72;
+              box-shadow: 0 4px 14px rgba(51, 51, 51, 0.18);
+            }
+
+            .charactersCreate__composerUploadCard_uploading {
+              border: none;
+              background: transparent;
+              cursor: default;
+              overflow: visible;
+              pointer-events: none;
+
+              .charactersCreate__composerUploadPendingImage {
+                width: 80px !important;
+                height: 80px !important;
+                display: block;
+                border-radius: 8px;
+                object-fit: cover;
+              }
+
+              .charactersCreate__composerUploadPendingIcon {
+                position: absolute;
+                top: 5px;
+                right: 5px;
+                width: 25px !important;
+                height: 25px !important;
+                display: block;
+                border-radius: 0;
+                object-fit: contain;
+              }
+            }
+
+            .charactersCreate__composerUploadList {
+              display: flex;
+              align-items: flex-start;
+              gap: 10px;
+              flex: 0 1 auto;
+              overflow-y: visible;
+              scrollbar-width: none;
+
+              &::-webkit-scrollbar {
+                display: none;
+              }
+            }
+
+            .charactersCreate__composerUploadInput {
+              display: none;
+            }
+
+            .charactersCreate__composerTextarea {
+              width: 100%;
+              margin: 0;
+              border: none;
+              outline: none;
+              resize: none;
+              background: transparent;
+              color: #666666;
+              min-height: 74px;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 22px;
+              align-self: center;
+              overflow: auto;
+              scrollbar-width: none;
+              -ms-overflow-style: none;
+            }
+
+            .charactersCreate__composerTextarea.arco-textarea-wrapper {
+              display: flex;
+              align-items: center;
+            }
+
+            .arco-textarea-wrapper,
+            .arco-textarea-wrapper:hover,
+            .arco-textarea-wrapper:focus-within,
+            .arco-textarea-wrapper.arco-textarea-focus,
+            .charactersCreate__composerTextarea,
+            .charactersCreate__composerTextarea:hover,
+            .charactersCreate__composerTextarea:focus-within {
+              background: transparent !important;
+              background-color: transparent !important;
+              box-shadow: none !important;
+              border-color: transparent !important;
+            }
+
+            .arco-textarea-wrapper .arco-textarea,
+            .arco-textarea-wrapper:hover .arco-textarea,
+            .arco-textarea-wrapper:focus-within .arco-textarea,
+            .charactersCreate__composerTextarea .arco-textarea,
+            .charactersCreate__composerTextarea:hover .arco-textarea {
+              background: transparent !important;
+              background-color: transparent !important;
+            }
+
+            .charactersCreate__composerTextarea::-webkit-scrollbar {
+              width: 0;
+              height: 0;
+              display: none;
+            }
+
+            .charactersCreate__composerTextarea .arco-textarea {
+              overflow: auto;
+              scrollbar-width: none;
+              -ms-overflow-style: none;
+              min-height: unset;
+            }
+
+            .charactersCreate__composerTextarea .arco-textarea::-webkit-scrollbar {
+              width: 0;
+              height: 0;
+              display: none;
+            }
+
+            .charactersCreate__composerTextarea::placeholder {
+              color: #999999;
+              font-weight: 500;
+            }
+
+            .charactersCreate__composerTextarea .arco-textarea::placeholder {
+              color: #999999;
+              font-weight: 500;
+            }
+          }
+
+          &.charactersCreate__composerPanel_promptExpanded {
+            min-height: min(60vh, 520px);
+            box-shadow: 0 2px 12px rgba(51, 51, 51, 0.08);
+
+            .charactersCreate__composerRow {
+              flex: 1 1 auto;
+              min-height: min(42vh, 360px);
+              padding-right: 18px;
+            }
+
+            .charactersCreate__composerTextarea,
+            .charactersCreate__composerTextarea .arco-textarea {
+              min-height: min(42vh, 360px) !important;
+              max-height: min(42vh, 360px) !important;
+            }
+          }
+
+          .charactersCreate__composerToolbar {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+            margin-top: 10px;
+            position: relative;
+            z-index: 1;
+            overflow: visible;
+
+            .charactersCreate__composerChips {
+              display: flex;
+              align-items: center;
+              gap: 5px;
+              min-width: 0;
+              overflow-x: auto;
+              overflow-y: hidden;
+              @include hide-scrollbar;
+
+              .charactersCreate__paramDropdownTrigger,
+              .charactersCreate__modelDropdownTrigger {
+                display: inline-flex;
+                z-index: 2223;
+              }
+
+              .charactersCreate__modelDropdownTrigger {
+                order: 1;
+              }
+
+              .charactersCreate__paramDropdownTrigger {
+                order: 2;
+              }
+
+              .charactersCreate__pill {
+                min-height: 30px;
+                display: inline-flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                height: 30px;
+                border: none;
+                background: #fbf0ff;
+                border-radius: 24px;
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 12px;
+                color: #333333;
+                cursor: pointer;
+                box-sizing: border-box;
+              }
+
+              .charactersCreate__pill--model {
+                padding: 0 10px;
+                gap: 5px;
+                min-width: 89px;
+
+                .charactersCreate__modelIcon {
+                  width: 15px;
+                  height: 15px;
+                  object-fit: contain;
+                  flex-shrink: 0;
+                }
+
+                .charactersCreate__modelIcon_skeleton {
+                  border-radius: 50%;
+                  filter: none;
+                }
+
+                .charactersCreate__pillText {
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                }
+
+                .charactersCreate__pillText_skeleton {
+                  width: 54px;
+                  height: 10px;
+                  border-radius: 999px;
+                }
+              }
+
+              .charactersCreate__pill--spec {
+                padding: 0 10px;
+                gap: 0;
+                min-width: 0;
+                max-width: 290px;
+
+                .charactersCreate__paramPresetContent,
+                .charactersCreate__paramPresetItem {
+                  display: inline-flex;
+                  align-items: center;
+                  justify-content: center;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                }
+
+                .charactersCreate__paramPresetContent {
+                  max-width: 100%;
+                }
+
+                .charactersCreate__paramPresetContent_skeleton {
+                  display: block;
+                  width: 148px;
+                  height: 10px;
+                  border-radius: 999px;
+                }
+
+                .charactersCreate__paramPresetItem {
+                  gap: 4px;
+                  min-width: 0;
+                  flex: 0 1 auto;
+                }
+
+                .charactersCreate__paramPresetItem_ratio {
+                  gap: 3px;
+                  font-size: 11px;
+                  line-height: 18px;
+                }
+
+                .charactersCreate__paramPresetName {
+                  color: #6f47f5;
+                  flex: 0 0 auto;
+                }
+
+                .charactersCreate__paramPresetValue {
+                  min-width: 0;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  color: #252525;
+                }
+
+                .charactersCreate__paramPresetRatioShape {
+                  display: inline-block;
+                  box-sizing: border-box;
+                  flex: 0 0 auto;
+                  border: 1px solid #6f47f5;
+                  border-radius: 2.5px;
+                  transform: scale(0.66);
+                  transform-origin: center;
+                }
+
+                .charactersCreate__paramPresetDivider {
+                  width: 1px;
+                  height: 12px;
+                  background: #eadcf2;
+                  margin: 0 6px;
+                  display: inline-block;
+                  flex: 0 0 auto;
+                }
+              }
+
+              .charactersCreate__composerResetBtn {
+                order: 3;
+                display: inline-flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                min-width: 64px;
+                height: 30px;
+                padding: 0 10px;
+                gap: 5px;
+                border: none;
+                border-radius: 24px;
+                background: #fbf0ff;
+                color: #333333;
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 12px;
+                cursor: pointer;
+                box-sizing: border-box;
+                flex: 0 0 auto;
+
+                img {
+                  width: 10px;
+                  height: 10px;
+                  display: block;
+                  flex-shrink: 0;
+                }
+              }
+            }
+
+            .charactersCreate__composerActions {
+              display: flex;
+              align-items: center;
+              gap: 15px;
+              flex-shrink: 0;
+              position: relative;
+              z-index: 1;
+              overflow: visible;
+
+              .charactersCreate__composerCostBtn {
+                position: relative;
+                z-index: 1;
+                overflow: visible;
+                display: inline-flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                gap: 0;
+                width: 45.77px;
+                height: 45.77px;
+                border: none;
+                border-radius: 100px;
+                background: #6f47f5;
+                color: #ffffff;
+                font-size: 12px;
+                font-weight: 500;
+                line-height: 12px;
+                cursor: pointer;
+
+                img {
+                  width: 16px;
+                  height: 21px;
+                  display: block;
+                }
+
+                span:not(.charactersCreate__composerCostDiscountBadge) {
+                  display: none;
+                }
+
+                .charactersCreate__composerCostDiscountBadge {
+                  position: absolute;
+                  top: -10px;
+                  right: 0;
+                  z-index: 2;
+                  display: inline-flex;
+                  align-items: center;
+                  justify-content: center;
+                  min-width: 56px;
+                  height: 19px;
+                  padding: 0 6px;
+                  box-sizing: border-box;
+                  border-radius: 10px;
+                  border-bottom-right-radius: 5px;
+                  background: #f6efdb;
+                  color: #cf680e;
+                  font-size: 12px;
+                  font-weight: 500;
+                  line-height: normal;
+                  white-space: nowrap;
+                  pointer-events: none;
+
+                  strong {
+                    font-weight: 900;
+                  }
+                }
+              }
+
+              .charactersCreate__composerCostBtn_skeleton {
+                background: $characters-create-skeleton-gradient;
+                background-size: 400% 100%;
+                cursor: default;
+                pointer-events: none;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .charactersCreate__right {
+      container-type: inline-size;
+      container-name: characters-create-right;
+      flex: 0 0 494px;
+      width: 494px;
+      min-width: 494px;
+      max-width: 494px;
+      min-height: 0;
+      align-self: stretch;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background: transparent;
+      border-radius: 26px;
+      overflow-x: hidden;
+      overflow-y: visible;
+
+      .charactersCreate__rightStack {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        flex: 1 1 auto;
+        min-height: 0;
+        width: 100%;
+        overflow-x: hidden;
+        overflow-y: hidden;
+        @include hide-scrollbar;
+
+        .charactersCreate__rightCreatePanel {
+          width: 100%;
+          flex: 1 1 auto;
+          min-height: 0;
+          padding: 20px;
+          border-radius: 26px;
+          background: #ffffff;
+
+          .charactersCreate__rightCreatePlaceholder {
+            height: 100%;
+            min-height: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 20px;
+
+            .charactersCreate__rightCreateAvatarPlaceholder {
+              width: 112px;
+              height: 112px;
+              border-radius: 50%;
+              background: linear-gradient(135deg, #f0f0f0 0%, #d6ceef 100%);
+            }
+
+            .charactersCreate__rightCreateFieldPlaceholder,
+            .charactersCreate__rightCreateTextareaPlaceholder {
+              width: 100%;
+              border-radius: 26px;
+              background: #f0f4f9;
+            }
+
+            .charactersCreate__rightCreateFieldPlaceholder {
+              height: 40px;
+            }
+
+            .charactersCreate__rightCreateTextareaPlaceholder {
+              height: 267px;
+            }
+          }
+        }
+
+        .charactersCreate__rightCreatePanel.charactersCreate__rightCreatePanel_skeleton {
+          .charactersCreate__rightCreatePlaceholder {
+            .charactersCreate__rightCreateAvatarPlaceholder,
+            .charactersCreate__rightCreateFieldPlaceholder,
+            .charactersCreate__rightCreateTextareaPlaceholder {
+              background: $characters-create-skeleton-gradient;
+              background-size: 400% 100%;
+            }
+          }
+        }
+
+        .charactersCreate__rightServiceRow {
+          width: 100%;
+          flex: 0 0 93px;
+          height: 93px;
+          display: grid;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          gap: 10px;
+
+          .charactersCreate__serviceCard {
+            height: 100%;
+            padding: 20px;
+            border-radius: 26px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            cursor: pointer;
+
+            .charactersCreate__serviceText {
+              display: flex;
+              flex-direction: column;
+              gap: 5px;
+
+              .charactersCreate__serviceTitle {
+                font-size: 20px;
+                font-weight: 600;
+                line-height: normal;
+              }
+
+              .charactersCreate__serviceSub {
+                font-size: 14px;
+                font-weight: 400;
+                line-height: normal;
+              }
+            }
+
+            .charactersCreate__serviceArrow {
+              width: 34px;
+              height: 34px;
+              border: 1px solid #000000;
+              border-radius: 50%;
+              color: #000000;
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+
+              img {
+                width: 17px;
+                height: 17px;
+                transform: rotate(-90deg);
+                filter: brightness(0);
+              }
+            }
+          }
+
+          .charactersCreate__serviceCard_deposit {
+            background: #f7e7d9;
+            color: #9a795c;
+          }
+
+          .charactersCreate__serviceCard_artist {
+            background: #e5f3e5;
+            color: #558955;
+          }
+        }
+
+        .charactersCreate__rightCreateSubmitPanel {
+          width: 100%;
+          flex: 0 0 96px;
+          height: 96px;
+          padding: 19px 20px;
+          border-radius: 26px;
+          background: #ffffff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+
+          .charactersCreate__rightCreateSubmitBtn {
+            width: 287px;
+            max-width: 287px;
+            height: 57px;
+            border-radius: 100px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.charactersCreate__skeletonBlock {
+  display: block;
+  background: $characters-create-skeleton-gradient;
+  background-size: 400% 100%;
+  animation: charactersCreateSkeletonShimmer 1.5s cubic-bezier(0, 0, 1, 1) infinite;
+}
+
+@keyframes charactersCreateSkeletonShimmer {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+@keyframes charactersCreateTaskStageEnterNext {
+  0% {
+    transform: translate3d(0, 100%, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes charactersCreateTaskStageLeaveNext {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes charactersCreateTaskStageEnterPrevious {
+  0% {
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes charactersCreateTaskStageLeavePrevious {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .charactersCreate .charactersCreate__taskViewport {
+    animation: none;
+    transform: none;
+  }
+}
+
+.charactersCreate__modelDropdown {
+  width: 529px;
+  padding: 15px;
+  border-radius: 26px;
+  background: #ffffff;
+  box-shadow: 0 2px 7.5px 0 rgba(51, 51, 51, 0.2);
+  box-sizing: border-box;
+  max-height: min(620px, calc(100vh - 120px));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .charactersCreate__modelDropdownTitle {
+    margin: 0;
+    color: #666666;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 12px;
+  }
+
+  .charactersCreate__modelDropdownList {
+    margin-top: 12.5px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+
+    .charactersCreate__modelDropdownItem {
+      width: 100%;
+      border: 1px dashed transparent;
+      border-radius: 100px;
+      background: #ffffff;
+      padding: 15px 20px;
+      min-height: 65px;
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      text-align: left;
+      cursor: pointer;
+      box-sizing: border-box;
+
+      .charactersCreate__modelDropdownItemIcon {
+        width: 26px;
+        height: 26px;
+        margin-top: 5px;
+        display: block;
+        object-fit: contain;
+        flex-shrink: 0;
+      }
+
+      .charactersCreate__modelDropdownItemText {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        height: 35px;
+
+        .charactersCreate__modelDropdownItemName {
+          height: 15px;
+          color: #333333;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 26px;
+          display: flex;
+          align-items: center;
+        }
+
+        .charactersCreate__modelDropdownItemDesc {
+          margin-top: 5px;
+          height: 15px;
+          color: #999999;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 16px;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .charactersCreate__modelDropdownItem:hover {
+      background: #fbf0ff;
+    }
+
+    .charactersCreate__modelDropdownItem_active {
+      border-color: #6f47f5;
+      background: #fbf0ff;
+    }
+
+    .charactersCreate__modelDropdownItem_active .charactersCreate__modelDropdownItemName,
+    .charactersCreate__modelDropdownItem_active .charactersCreate__modelDropdownItemDesc {
+      color: #6f47f5;
+    }
+  }
+}
+
+.charactersCreate__paramDropdown {
+  width: 320px;
+  padding: 15px;
+  border-radius: 26px;
+  background: #ffffff;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .charactersCreate__paramGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .charactersCreate__paramTitle {
+      margin: 0;
+      color: #4f4f4f;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: normal;
+    }
+
+    .charactersCreate__paramOptions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .charactersCreate__paramOption {
+        min-width: 65px;
+        height: 38px;
+        border: 1px dashed transparent;
+        border-radius: 100px;
+        padding: 0 12px;
+        background: #ffffff;
+        color: #4f4f4f;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 26px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        box-sizing: border-box;
+      }
+
+      .charactersCreate__paramOption:hover {
+        background: #fbf0ff;
+      }
+
+      .charactersCreate__paramOption_active {
+        border-color: #6f47f5;
+        background: #fbf0ff;
+        color: #6f47f5;
+        font-weight: 400;
+      }
+    }
+
+    .charactersCreate__paramOptions_ratio {
+      width: 290px;
+      display: grid;
+      grid-template-columns: repeat(4, 65px);
+      column-gap: 10px;
+      row-gap: 10px;
+
+      .charactersCreate__paramOption_ratio {
+        width: 65px;
+        min-width: 65px;
+        height: 65px;
+        padding: 0;
+        border-radius: 20px;
+        display: grid;
+        grid-template-rows: 26px 15px;
+        align-content: center;
+        justify-items: center;
+        row-gap: 6px;
+        font-size: 12px;
+        line-height: 26px;
+
+        .charactersCreate__ratioShapeSlot {
+          width: 100%;
+          height: 26px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+
+          .charactersCreate__ratioShape {
+            border: 1px solid #4f4f4f;
+            border-radius: 2px;
+            box-sizing: border-box;
+            display: block;
+          }
+        }
+
+        .charactersCreate__ratioLabel {
+          display: block;
+          color: inherit;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 26px;
+        }
+      }
+
+      .charactersCreate__paramOption_active .charactersCreate__ratioShape {
+        border-color: #6f47f5;
+      }
+
+      .charactersCreate__paramOption_active .charactersCreate__ratioLabel {
+        color: #6f47f5;
+        font-weight: 400;
+      }
+    }
+
+    .charactersCreate__paramRatioSizeWrap {
+      margin-top: 4px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      .charactersCreate__paramRatioSizeRow {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+
+        .charactersCreate__paramRatioSizeValue {
+          width: 130px;
+          height: 38px;
+          border-radius: 9px;
+          background: #ffffff;
+          color: #4f4f4f;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 26px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          user-select: none;
+          pointer-events: none;
+        }
+
+        .charactersCreate__paramRatioSizeLink {
+          width: 15px;
+          height: 15px;
+          display: block;
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+
+  .charactersCreate__paramGroup:not(:has(.charactersCreate__paramOptions_ratio)) .charactersCreate__paramOptions {
+    width: 290px;
+    gap: 0;
+    border-radius: 9px;
+    background: #ffffff;
+    overflow: hidden;
+  }
+
+  .charactersCreate__paramGroup:not(:has(.charactersCreate__paramOptions_ratio)) .charactersCreate__paramOption {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}
+
+@media (max-width: 1680px) {
+  .charactersCreate {
+    .charactersCreate__row {
+      .charactersCreate__left {
+        flex-basis: 300px;
+        max-width: 300px;
+      }
+
+      .charactersCreate__center {
+        flex: 1 1 760px;
+        min-width: 660px;
+      }
+
+      .charactersCreate__right {
+        flex-basis: 430px;
+        width: 430px;
+        min-width: 430px;
+        max-width: 430px;
+      }
+    }
+  }
+
+  .charactersCreate .charactersCreate__row .charactersCreate__left .charactersCreate__leftInner .charactersCreate__leftBody .charactersCreate__leftScroll .charactersCreate__styleGrid {
+    width: 240px;
+  }
+
+  .charactersCreate .charactersCreate__row .charactersCreate__left .charactersCreate__leftInner .charactersCreate__leftBody .charactersCreate__leftScroll .charactersCreate__styleGrid .charactersCreate__styleCell {
+    width: 76px;
+    height: 76px;
+  }
+}
+
+@media (max-width: 900px) {
+  .charactersCreate {
+    height: auto;
+    min-height: calc(100vh - var(--layout-chrome-top, 0px) - var(--layout-mobile-bottom-nav-height, 72px));
+    overflow: visible;
+
+    .charactersCreate__row {
+      flex-direction: column;
+      flex-wrap: nowrap;
+      gap: 12px;
+      padding: 12px;
+      overflow-x: hidden;
+      overflow-y: visible;
+
+      .charactersCreate__left,
+      .charactersCreate__center,
+      .charactersCreate__right {
+        flex: 0 0 auto;
+        width: 100%;
+        min-width: 0;
+        max-width: none;
+        align-self: stretch;
+      }
+
+      .charactersCreate__left {
+        .charactersCreate__leftInner {
+          padding-bottom: 14px;
+
+          .charactersCreate__leftBody {
+            .charactersCreate__leftDiyBanner {
+              height: auto;
+              min-height: 92px;
+              padding: 16px;
+
+              .charactersCreate__leftDiyBannerTitle {
+                height: auto;
+                font-size: 24px;
+              }
+            }
+
+            .charactersCreate__styleTabBar {
+              margin: 14px 16px;
+            }
+
+            .charactersCreate__leftScroll {
+              margin: 0 16px;
+              max-height: 260px;
+
+              .charactersCreate__styleGrid {
+                width: 100%;
+                grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
+
+                .charactersCreate__styleCell {
+                  width: 100%;
+                  height: auto;
+                  aspect-ratio: 1 / 1;
+                }
+              }
+            }
+          }
+
+          .charactersCreate__leftMore {
+            margin-top: 14px;
+          }
+        }
+      }
+
+      .charactersCreate__center {
+        min-height: min(760px, calc(100vh - 120px));
+        padding: 14px;
+        gap: 14px;
+
+        .charactersCreate__taskStage {
+          min-height: 260px;
+
+          .charactersCreate__taskCanvas {
+            .charactersCreate__taskResultFrame {
+              width: 100%;
+              max-height: none;
+            }
+
+            .charactersCreate__currentPromptCard {
+              right: 44px;
+              bottom: 10px;
+              min-height: 0;
+              padding: 14px;
+            }
+          }
+        }
+
+        .charactersCreate__composer {
+          z-index: 10;
+
+          .charactersCreate__composerPanel {
+            min-height: 0;
+            padding: 14px;
+            border-radius: 20px;
+
+            .charactersCreate__composerRow {
+              flex-wrap: wrap;
+
+              .charactersCreate__promptLibraryPanel {
+                width: min(455px, calc(100vw - 52px));
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+                grid-auto-rows: auto;
+                overflow-y: auto;
+                max-height: min(420px, calc(100vh - 180px));
+
+                .charactersCreate__promptLibraryCard {
+                  width: 100%;
+                }
+              }
+
+              .charactersCreate__composerUploadList {
+                max-width: 100%;
+                overflow-x: auto;
+              }
+
+              .charactersCreate__composerTextarea {
+                flex: 1 1 220px;
+              }
+            }
+
+            .charactersCreate__composerToolbar {
+              align-items: stretch;
+
+              .charactersCreate__composerChips {
+                flex: 1 1 100%;
+              }
+
+              .charactersCreate__composerActions {
+                margin-left: auto;
+              }
+            }
+          }
+        }
+      }
+
+      .charactersCreate__right {
+        .charactersCreate__rightStack {
+          overflow: visible;
+
+          .charactersCreate__rightCreatePanel {
+            min-height: 360px;
+          }
+
+          .charactersCreate__rightServiceRow {
+            flex-basis: auto;
+            height: auto;
+          }
+
+          .charactersCreate__rightCreateSubmitPanel {
+            flex-basis: auto;
+            height: auto;
+
+            .charactersCreate__rightCreateSubmitBtn {
+              width: 100%;
+              max-width: 287px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .charactersCreate__modelDropdown,
+  .charactersCreate__paramDropdown {
+    width: min(100vw - 24px, 529px);
+    max-height: calc(100vh - 96px);
+  }
+}
+
+@media (max-width: 640px) {
+  .charactersCreate {
+    .charactersCreate__row {
+      padding: 10px;
+
+      .charactersCreate__center {
+        border-radius: 20px;
+
+        .charactersCreate__composer {
+          .charactersCreate__composerPanel {
+            .charactersCreate__composerRow {
+              .charactersCreate__promptLibraryPanel {
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+              }
+            }
+          }
+        }
+      }
+
+      .charactersCreate__right {
+        .charactersCreate__rightStack {
+          .charactersCreate__rightServiceRow {
+            grid-template-columns: minmax(0, 1fr);
+
+            .charactersCreate__serviceCard {
+              min-height: 82px;
+              padding: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .charactersCreate__paramDropdown {
+    .charactersCreate__paramGroup {
+      .charactersCreate__paramOptions_ratio {
+        width: 100%;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+
+        .charactersCreate__paramOption_ratio {
+          width: 100%;
+          min-width: 0;
+        }
+      }
+    }
+
+    .charactersCreate__paramGroup:not(:has(.charactersCreate__paramOptions_ratio)) .charactersCreate__paramOptions {
+      width: 100%;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .charactersCreate {
+    .charactersCreate__row {
+      .charactersCreate__center {
+        padding: 10px;
+
+        .charactersCreate__taskStage {
+          min-height: 220px;
+        }
+
+        .charactersCreate__composer {
+          .charactersCreate__composerPanel {
+            .charactersCreate__composerRow {
+              .charactersCreate__promptLibraryWrap,
+              .charactersCreate__composerUploadList {
+                flex: 1 1 100%;
+              }
+            }
+
+            .charactersCreate__composerToolbar {
+              .charactersCreate__composerActions {
+                width: 100%;
+                justify-content: flex-end;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/Create/panels/FolderPanel/index.scss b/src/pages/Create/panels/FolderPanel/index.scss
index 682d9c4..cf13f61 100644
--- a/src/pages/Create/panels/FolderPanel/index.scss
+++ b/src/pages/Create/panels/FolderPanel/index.scss
@@ -394,7 +394,7 @@
 
 .folderPanel__grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, 219px);
+  grid-template-columns: repeat(auto-fill, minmax(180px, 219px));
   gap: 15px;
   margin: 0;
   padding: 0;
@@ -1612,7 +1612,7 @@
 
 @media (max-width: 520px) {
   .folderPanel {
-    padding: 0 16px;
+    padding: 0;
   }
 
   .folderPanel__toolbar {
@@ -1623,6 +1623,8 @@
   }
 
   .folderPanel__search {
+    flex-basis: auto;
+    width: 100%;
     max-width: none;
   }
 
@@ -1632,19 +1634,21 @@
   }
 
   .folderPanel__grid {
-    grid-template-columns: repeat(auto-fill, 219px);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 12px;
     justify-content: center;
   }
 
   .folderPanel__card,
   .folderPanel__cardFrame {
-    width: 219px;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
   }
 
   .folderPanel__cardCoverWrap {
-    width: 199px;
-    height: 142px;
+    width: 100%;
+    height: calc(100% - 57px);
   }
 
   .folderPanel__createModal {
@@ -1664,16 +1668,19 @@
   }
 
   .folderPanel__uploadModalGrid {
-    grid-template-columns: repeat(3, 107px);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 9px;
   }
 
   .folderPanel__uploadModalGridItem,
   .folderPanel__uploadModalAddBtn,
   .folderPanel__uploadModalAddSlot,
-  .folderPanel__uploadModalThumb {
-    width: 107px;
-    height: 107px;
+  .folderPanel__uploadModalThumb,
+  .folderPanel__uploadModalUploading,
+  .folderPanel__uploadModalUploadingImage {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
   }
 
   .folderPanel__uploadModalFooter {
diff --git a/src/pages/Create/panels/InspirationLibraryPanel/CharacterAssetsPanel/CharacterAssetsPanel.scss b/src/pages/Create/panels/InspirationLibraryPanel/CharacterAssetsPanel/CharacterAssetsPanel.scss
index 93fd6a9..4ef2367 100644
--- a/src/pages/Create/panels/InspirationLibraryPanel/CharacterAssetsPanel/CharacterAssetsPanel.scss
+++ b/src/pages/Create/panels/InspirationLibraryPanel/CharacterAssetsPanel/CharacterAssetsPanel.scss
@@ -143,9 +143,13 @@
 }
 
 @media (max-width: 520px) {
+  .materialLibraryToolbar {
+    width: 100%;
+  }
+
   .materialLibraryToolbar__search {
     width: 100%;
-    max-width: 220px;
+    max-width: none;
   }
 
   .materialLibrary__grid {
diff --git a/src/pages/Create/panels/InspirationLibraryPanel/index.scss b/src/pages/Create/panels/InspirationLibraryPanel/index.scss
index 121dd73..6d77a7e 100644
--- a/src/pages/Create/panels/InspirationLibraryPanel/index.scss
+++ b/src/pages/Create/panels/InspirationLibraryPanel/index.scss
@@ -34,3 +34,21 @@
 .inspirationPanel__content_material {
   margin-top: 20px;
 }
+
+@media (max-width: 640px) {
+  .inspirationPanel__toolbarExtra {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .inspirationPanel__filters {
+    width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .inspirationPanel__filters::-webkit-scrollbar {
+    display: none;
+  }
+}
diff --git a/src/pages/Create/panels/MyCreationsPanel/index.scss b/src/pages/Create/panels/MyCreationsPanel/index.scss
index 29ccc23..b392084 100644
--- a/src/pages/Create/panels/MyCreationsPanel/index.scss
+++ b/src/pages/Create/panels/MyCreationsPanel/index.scss
@@ -25,7 +25,7 @@
 
 .createPage__myCreationsList {
   display: grid;
-  grid-template-columns: repeat(auto-fill, 219px);
+  grid-template-columns: repeat(auto-fill, minmax(180px, 219px));
   gap: 15px;
   align-items: start;
   justify-content: start;
@@ -34,19 +34,19 @@
   list-style: none;
 }
 
-.createPage__myCreationsList>.assetGalleryTile {
+.createPage__myCreationsList > .assetGalleryTile {
   width: 219px;
   height: 219px;
   margin-bottom: 0;
   border-radius: 26px;
 }
 
-.createPage__myCreationsList>.assetGalleryTile .assetGalleryTile__thumb,
-.createPage__myCreationsList>.assetGalleryTile .assetGalleryTile__poster {
+.createPage__myCreationsList > .assetGalleryTile .assetGalleryTile__thumb,
+.createPage__myCreationsList > .assetGalleryTile .assetGalleryTile__poster {
   border-radius: 26px;
 }
 
-.createPage__myCreationsList>.assetGalleryTile_pending {
+.createPage__myCreationsList > .assetGalleryTile_pending {
   border-radius: 26px;
 }
 
@@ -102,13 +102,13 @@
 @media (max-width: 560px) {
   .createPage__myCreationsList {
     width: 100%;
-    grid-template-columns: repeat(auto-fill, 182px);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     justify-content: center;
   }
 
-  .createPage__myCreationsList>.assetGalleryTile,
+  .createPage__myCreationsList > .assetGalleryTile,
   .createPage__myCreationsItem {
-    width: 182px;
+    width: 100%;
     height: auto;
     aspect-ratio: 1;
   }
@@ -134,4 +134,4 @@
   .createPage__batchBtn {
     align-self: flex-end;
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/Create/panels/MyFavoritePanel/index.scss b/src/pages/Create/panels/MyFavoritePanel/index.scss
index ff121fd..8f47f5d 100644
--- a/src/pages/Create/panels/MyFavoritePanel/index.scss
+++ b/src/pages/Create/panels/MyFavoritePanel/index.scss
@@ -4,9 +4,9 @@
 }
 
 .myFavoritePanel__list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 219px));
+  align-items: start;
   gap: 15px;
   margin: 0;
   padding: 0;
@@ -25,7 +25,6 @@
   cursor: pointer;
   background: #f2f3f5;
   box-sizing: border-box;
-  flex-shrink: 0;
 }
 
 .myFavoritePanel__item:focus-visible {
@@ -77,7 +76,15 @@
 @media (max-width: 900px) {
   .myFavoritePanel__item,
   .myFavoritePanel__list .assetGalleryTile {
-    width: 160px;
-    height: 160px;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
+  }
+}
+
+@media (max-width: 560px) {
+  .myFavoritePanel__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    justify-content: center;
   }
 }
diff --git a/src/pages/Profile/index.scss b/src/pages/Profile/index.scss
index effd992..78518f4 100644
--- a/src/pages/Profile/index.scss
+++ b/src/pages/Profile/index.scss
@@ -491,3 +491,115 @@
     }
   }
 }
+
+@media (max-width: 640px) {
+  .profilePage {
+    .profilePage__content {
+      padding: 12px 12px 112px;
+
+      .profilePage__hero {
+        .profilePage__card {
+          min-height: 0;
+          padding: 96px 14px 16px;
+          border-radius: 20px;
+
+          .profilePage__identity {
+            top: 24px;
+            left: 96px;
+            right: 14px;
+
+            .profilePage__nameRow {
+              flex-wrap: wrap;
+              gap: 4px 6px;
+
+              .profilePage__name {
+                max-width: 100%;
+                height: auto;
+                font-size: 20px;
+                line-height: 24px;
+              }
+            }
+          }
+
+          .profilePage__stats {
+            width: 100%;
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 8px 12px;
+
+            .profilePage__statItem {
+              min-width: 0;
+
+              .profilePage__statValue {
+                font-size: 18px;
+              }
+
+              .profilePage__statLabel {
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+            }
+          }
+
+          .profilePage__editButton {
+            position: static;
+            width: auto;
+            margin-top: 14px;
+          }
+        }
+      }
+
+      .profilePage__toolbar {
+        align-items: stretch;
+
+        .profilePage__tabs {
+          gap: 6px;
+
+          .profilePage__tab.tabPill {
+            width: auto;
+            min-width: 76px;
+            padding: 4px 14px;
+          }
+        }
+
+        .profilePage__toolbarRight {
+          width: 100%;
+          margin-left: 0;
+          justify-content: flex-end;
+          overflow-x: auto;
+          scrollbar-width: none;
+        }
+
+        .profilePage__toolbarRight::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .profilePage {
+    .profilePage__content {
+      .profilePage__hero {
+        .profilePage__card {
+          padding-top: 88px;
+
+          .profilePage__identity {
+            left: 82px;
+          }
+
+          .profilePage__stats {
+            grid-template-columns: minmax(0, 1fr);
+          }
+        }
+
+        .profilePage__avatar {
+          width: 58px;
+          height: 58px;
+        }
+      }
+    }
+  }
+}