:root {
  color-scheme: light;
  --app-shell-width: min(1536px, calc(100% - 24px));
  --font-sans: "Inter", "PingFang SC", "PingFang HK", "PingFang TC", "Microsoft YaHei", sans-serif;
  --bg: #f5f5f7;
  --bg-elevated: rgba(255, 255, 255, 0.80);
  --card: #ffffff;
  --card-soft: #fbfbfd;
  --field: #f5f5f7;
  --text: #1d1d1f;
  --text-soft: #333336;
  --muted: #707070;
  --muted-strong: #474747;
  --accent: #ff6a2a;
  --accent-strong: #f2530f;
  --accent-soft: #fff1e8;
  --accent-rgb: 255, 106, 42;
  --border: #d2d2d7;
  --border-strong: #a1a1a6;
  --success: #248a3d;
  --success-soft: #e9f9ee;
  --danger: #d70015;
  --danger-soft: #ffeef0;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-accent: 0 0 0 0 rgba(var(--accent-rgb), 0);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-elevated: rgba(22, 22, 23, 0.86);
  --card: #1c1c1e;
  --card-soft: #242426;
  --field: #2c2c2e;
  --text: #f5f5f7;
  --text-soft: #d2d2d7;
  --muted: #98989d;
  --muted-strong: #aeaeb2;
  --accent: #ff8148;
  --accent-strong: #ff9a66;
  --accent-soft: #331c0d;
  --accent-rgb: 255, 129, 72;
  --border: #38383a;
  --border-strong: #48484a;
  --success: #34c759;
  --success-soft: #0d2e1a;
  --danger: #ff453a;
  --danger-soft: #3a1418;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 20px 56px rgba(0, 0, 0, 0.44), 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-accent: 0 0 0 0 rgba(var(--accent-rgb), 0);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color 280ms ease, color 280ms ease;
}

button, input, select, textarea { font: inherit; }
summary, kbd, code, pre { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }
::selection { color: #fff; background: var(--accent); }
.ri-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; overflow: visible; fill: currentColor; vertical-align: -0.125em; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  opacity: 0.13;
  filter: blur(110px);
  pointer-events: none;
}

.ambient { display: none; }
body.studio-upload-active .ambient { display: block; }
.ambient-one { top: -260px; left: -180px; background: var(--brand-400); }
.ambient-two { top: 25%; right: -320px; background: var(--brand-200); opacity: 0.09; }

.appbar {
  position: sticky;
  top: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px max(24px, calc((100vw - 1480px) / 2));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: var(--bg-elevated);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  transition: transform 260ms var(--ease), box-shadow 260ms ease, border-color 260ms ease;
}

.appbar-hidden .appbar {
  transform: translate3d(0, calc(-100% - 24px), 0);
  pointer-events: none;
  visibility: hidden;
  box-shadow: none !important;
  border-color: transparent !important;
}
@media (prefers-reduced-motion: reduce) {
  .appbar { transition: transform 0.01ms; }
}

/* Account MVP */
.account-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(6, 7, 10, .80);
  -webkit-backdrop-filter: blur(10px) saturate(.72);
  backdrop-filter: blur(10px) saturate(.72);
}
.account-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1100;
  isolation: isolate;
  width: min(430px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 36px 120px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 255, 255, .04);
  overflow: hidden;
}
.account-modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
}
.account-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--border);
}
.account-modal-head h2 { margin: 5px 0 0; font-size: 22px; }
.account-modal .drawer-close {
  background: var(--field);
  color: var(--text);
}
.account-modal .drawer-close:hover { background: var(--card-soft); }
.account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 20px 24px 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--field);
}
.account-tabs button {
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}
.account-tabs button:hover { color: var(--text); }
.account-tabs button.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .13);
}
.account-form { display: grid; gap: 15px; padding: 20px 24px 26px; }
.account-form label { display: grid; gap: 8px; color: var(--text); font-size: 12px; font-weight: 700; }
.account-form input {
  height: 48px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--field);
  color: var(--text);
  outline: none;
}
.account-form input:hover { border-color: var(--muted); }
.account-form input:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft); }
.account-form .primary {
  width: 100%;
  height: 48px;
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), .26);
}
.account-message { min-height: 20px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.account-message.error { color: var(--danger); }
.wechat-login { padding: 30px 24px 34px; text-align: center; }
.qr-placeholder { display: grid; place-items: center; width: 150px; height: 150px; margin: 0 auto 18px; border: 1px dashed var(--border-strong); border-radius: 14px; background: var(--field); }
.qr-placeholder .ri-icon { width: 70px; height: 70px; color: var(--muted); }
.wechat-login strong { display: block; }
.wechat-login p { color: var(--muted); font-size: 12px; line-height: 1.65; }
.wechat-login .primary { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; text-decoration: none; }
.account-user { padding: 8px 24px 26px; }
.account-profile { display: flex; align-items: center; gap: 13px; padding: 18px 0; }
.account-profile>span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.account-profile h3 { margin: 0 0 5px; font-size: 16px; }
.account-profile p { margin: 0; color: var(--muted); font-size: 11px; }
.account-profile em { margin-left: auto; padding: 5px 9px; border-radius: 20px; background: var(--field); color: var(--muted); font-size: 10px; font-style: normal; }
.account-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.account-stat div { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--field); }
.account-stat span, .account-stat strong { display: block; }
.account-stat span { color: var(--muted); font-size: 10px; }
.account-stat strong { margin-top: 7px; font-size: 22px; }
.account-user>.ghost { width: 100%; height: 42px; }
@media(max-width:980px){.account-action span:not(.ri-wrap){display:none}}
.poster-image-visual img{display:block;width:100%;height:100%;object-fit:cover}
/* 灵感卡片：图片完整显示，高度随当前宽度自适应（不裁切） */
.inspiration-card .poster-visual.poster-image-visual { aspect-ratio: auto; height: auto; }
.inspiration-card .poster-visual.poster-image-visual img { width: 100%; height: auto; display: block; object-fit: contain; }
.creator-entry{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--field);margin-bottom:14px}.creator-entry strong{font-size:12px}.creator-entry p{margin:5px 0 0;color:var(--muted);font-size:10px}.creator-upload{display:grid;gap:12px;padding:15px;margin-bottom:14px;border:1px solid var(--border);border-radius:12px;background:var(--field)}.creator-upload-head{display:flex;align-items:center;justify-content:space-between}.creator-upload-head strong{font-size:12px}.creator-upload-head span{font-size:10px;color:var(--muted)}.creator-upload label{display:grid;gap:6px;font-size:10px;color:var(--muted)}.creator-upload input,.creator-upload select{width:100%;height:39px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text)}.creator-upload input[type=file]{padding:8px}.creator-meta-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.creator-upload .primary{height:40px}.account-logout{width:100%;height:42px}
:root[data-theme="dark"] .account-backdrop { background: rgba(0, 0, 0, .86); }
:root[data-theme="dark"] .account-modal { border-color: rgba(255, 255, 255, .12); box-shadow: 0 38px 130px rgba(0, 0, 0, .78), 0 0 0 1px rgba(255, 255, 255, .04); }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-wordmark { display: block; width: 78px; height: auto; aspect-ratio: 1059.91 / 299.57; color: var(--text); background-color: currentColor; -webkit-mask: url("assets/kutuhui-wordmark.svg") center / contain no-repeat; mask: url("assets/kutuhui-wordmark.svg") center / contain no-repeat; transition: color 280ms ease, transform 180ms var(--ease); }
.brand-copy strong { font-size: 14px; letter-spacing: -0.1px; }
.brand-copy small { margin-top: 4px; color: var(--muted); font-size: 40px; font-weight: 700; letter-spacing: 2px; }
.appbar-actions { display: flex; align-items: center; gap: 9px; }
.privacy-note { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-strong); font-size: 12px; font-weight: 600; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #35b982; box-shadow: 0 0 0 4px rgba(53, 185, 130, 0.12); }

.api-status-pill { display: inline-flex; min-height: 32px; align-items: center; gap: 8px; padding: 4px 2px; border: 0; border-radius: 0; color: var(--muted-strong); background: transparent; box-shadow: none; cursor: pointer; appearance: none; white-space: nowrap; font: inherit; }
.api-status-pill:hover:not(:disabled) { color: var(--text); background: transparent; }
.api-status-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.api-status-pill:disabled { cursor: wait; opacity: .72; }
.connection-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 12%, transparent); transition: background-color 180ms ease, box-shadow 180ms ease; }
.connection-dot.checking { background: #e3a83d; box-shadow: 0 0 0 4px rgba(227, 168, 61, .13); animation: status-pulse 1.2s ease-in-out infinite; }
.connection-dot.ok { background: #35b982; box-shadow: 0 0 0 4px rgba(53, 185, 130, .13); }
.connection-dot.fail { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 13%, transparent); }
.conn-status { color: var(--muted); font-size: 11px; }
.conn-status.ok { color: var(--success); }
.conn-status.fail { color: var(--danger); }

.top-action { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); background: var(--card); box-shadow: var(--shadow-sm); cursor: pointer; font-size: 12px; font-weight: 650; white-space: nowrap; transition: transform 180ms var(--ease), color 180ms ease, border-color 180ms ease, background-color 180ms ease; }
.top-action i { font-size: 15px; line-height: 1; }
.top-action:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(var(--accent-rgb), 0.4); color: var(--accent); background: var(--accent-soft); }
.top-action:disabled { opacity: 0.55; cursor: wait; }
.config-action { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 7px 18px rgba(var(--accent-rgb), 0.2); }
.config-action:hover:not(:disabled) { color: #fff; border-color: var(--accent-strong); background: var(--accent-strong); }

.theme-toggle { display: inline-grid; width: 44px; height: 44px; min-height: 44px; padding: 10px; place-items: center; border: 0; border-radius: 0; color: var(--text-soft); background: transparent; box-shadow: none; cursor: pointer; transition: color 180ms ease, opacity 180ms ease; }
.theme-toggle:hover { color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 0; color: inherit; background: transparent; }
.theme-icon .ri-icon { width: 18px; height: 18px; }
.moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: none; }
[data-theme="dark"] .moon-icon { display: grid; }

body.drawer-open { overflow: hidden; }
.config-backdrop { position: fixed; inset: 0; z-index: 240; background: rgba(8, 8, 13, 0.42); backdrop-filter: blur(5px); animation: fade-in 180ms ease both; }
.config-drawer { position: fixed; top: 0; right: 0; z-index: 250; display: flex; width: min(460px, 100vw); height: 100dvh; flex-direction: column; border-left: 1px solid var(--border); background: var(--card); box-shadow: -24px 0 70px rgba(13, 12, 24, 0.18); transform: translateX(102%); visibility: hidden; transition: transform 340ms var(--ease), visibility 340ms; }
.config-drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px 26px 20px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 5px 0 3px; color: var(--text); font-size: 22px; line-height: 1.2; letter-spacing: -0.5px; }
.drawer-head p { margin: 0; color: var(--muted); font-size: 11px; }
.drawer-eyebrow { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; }
.drawer-close { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--muted-strong); background: var(--field); cursor: pointer; transition: transform 180ms var(--ease), color 180ms ease, background-color 180ms ease; }
.drawer-close:hover { transform: rotate(6deg); color: var(--text); background: var(--accent-soft); }
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 26px 28px; }
.drawer-section { display: flex; flex-direction: column; gap: 15px; padding: 22px 0; }
.drawer-section + .drawer-section { border-top: 1px solid var(--border); }
.drawer-section-title { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.drawer-section-title .section-rule { flex: 1; height: 1px; background: var(--border); }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 26px; border-top: 1px solid var(--border); background: var(--card-soft); }
.drawer-foot > span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.drawer-foot .primary { min-height: 38px; padding: 8px 22px; }
.config-drawer .conn-details { flex: none; margin-top: 2px; }

.page { width: min(100%, 1536px); margin: 0 auto; padding: 70px 28px 48px; }
.hero { max-width: 840px; margin: 0 auto 48px; text-align: center; animation: hero-in 720ms var(--ease) both; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 15px; color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: 1.4px; text-transform: uppercase; }
.eyebrow span { width: 22px; height: 1px; background: currentColor; }
.hero h1 { margin: 0; font-size: clamp(34px, 4.2vw, 58px); font-weight: 800; line-height: 1.12; letter-spacing: -2.4px; } /* 标题字号（通用档）：clamp(最小, 随屏宽比例, 最大) */
.hero h1 span { color: var(--accent); }
.subtitle { max-width: 650px; margin: 18px auto 0; color: var(--muted-strong); font-size: 15px; line-height: 1.75; }

.workflow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; color: var(--muted); font-size: 12px; }
.workflow-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.workflow-item b { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--muted-strong); font-size: 9px; }
.workflow-item.active { color: var(--text-soft); font-weight: 650; }
.workflow-item.active b { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.1); }
.workflow i { width: 36px; height: 1px; background: var(--border-strong); }

.workspace { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: start; }
.card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); transition: border-color 220ms ease, box-shadow 220ms ease, background-color 280ms ease; }
.card:hover { border-color: color-mix(in srgb, var(--border-strong) 80%, var(--accent)); box-shadow: var(--shadow-md); }
.panel { grid-column: span 6; min-width: 0; padding: 24px; animation: panel-in 540ms var(--ease) both; }
#inputPanel { grid-column: span 5; display: flex; flex-direction: column; gap: 16px; }
#dnaCard, #systemPromptCard { display: none !important; }
#remixCard { grid-column: span 5; }
#remixPromptCard { grid-column: span 7; }

.section-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.step-index { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: 11px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 800; letter-spacing: 0.5px; }
.card-title { margin: 0; color: var(--text); font-size: 16px; font-weight: 730; line-height: 1.25; letter-spacing: -0.2px; }
.card-kicker { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.3; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.head-btns { display: inline-flex; align-items: center; gap: 7px; }
.settings-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 760; letter-spacing: 1px; text-transform: uppercase; }
.settings-sub::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.field label { display: block; margin: 0 0 7px; color: var(--text-soft); font-size: 12px; font-weight: 650; }
.field input:not([type="radio"]):not([type="checkbox"]):not([type="color"]), .field select, .more-desc, .remix-prompt, .saved-row select { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; color: var(--text); background: var(--field); font-size: 13px; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 280ms ease; }
.field input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }
.field input:hover, .field select:hover, textarea:hover, .saved-row select:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus, textarea:focus, .saved-row select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.13); background: var(--card); }
.field input[type="file"] { padding: 8px; cursor: pointer; }
.field input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 10px; border: 0; border-radius: 7px; color: var(--accent); background: var(--accent-soft); font-weight: 650; cursor: pointer; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; min-width: 0; }
.model-custom, .color-custom { margin-top: 8px; }
.server-field { margin-top: -4px; }
.server-field input[readonly] { color: var(--muted-strong); background: var(--card-soft); cursor: text; }
.hint { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.req { margin-left: 4px; color: var(--danger); font-size: 10px; font-weight: 750; }
.conn-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.qr-hint.error { color: var(--danger); }
.conn-details { flex: 1 0 100%; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--border)); border-radius: 10px; color: var(--text-soft); background: var(--danger-soft); font-size: 11px; line-height: 1.6; }
.conn-details strong { display: block; margin-bottom: 4px; color: var(--danger); font-size: 11px; }
.conn-details ol { margin: 0; padding-left: 18px; }
.conn-details code { padding: 1px 4px; border-radius: 4px; color: var(--accent); background: var(--accent-soft); font-family: var(--font-sans); font-size: 10px; }

.upload { position: relative; display: flex; min-height: 210px; align-items: center; justify-content: center; overflow: hidden; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); background: transparent; box-shadow: none; cursor: pointer; isolation: isolate; transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease); }
.upload::before { display: none; }
.upload:hover { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .16), 0 0 0 6px rgba(var(--accent-rgb), .08), 0 14px 36px rgba(var(--accent-rgb), .14); transform: translateY(-1px); }
.upload.dragging { border-color: var(--accent); background: transparent; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .18), 0 0 0 8px rgba(var(--accent-rgb), .12), 0 18px 44px rgba(var(--accent-rgb), .18); transform: scale(1.005); }
/* ===== 上传图标位置（暴露可修改）=====
   drop-inner  上传区整块内容容器
   drop-icon   上传图标盒子（云朵上传 icon）
   drop-icon .ri-icon  图标本身 */
.drop-inner { padding: 34px 24px; text-align: center; } /* 整体内边距：调整 34px(上下)/24px(左右) 可整体移动图标+文案位置 */
.drop-icon { display: grid; width: 48px; height: 48px; margin: 0 auto; place-items: center; border: 0; border-radius: 0; color: var(--muted); background: transparent; box-shadow: none; } /* 图标盒子：margin: 0 auto 水平居中；width/height 改图标盒子大小；place-items 控制图标在盒内居中 */
.drop-icon .ri-icon { width: 23px; height: 23px; } /* 图标自身尺寸（改这里可放大缩小图标） */
.drop-title { margin: 14px 0 4px; color: var(--text); font-size: 14px; font-weight: 700; } /* margin 的 14px = 图标与"上传图片"文字的间距（调大=间距变大）；4px = 文字与下方提示的间距 */
.drop-hint { margin: 0; color: var(--muted); font-size: 11px; }
.preview { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--field); }
.preview img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.preview img:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.remove, .file-remove { display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(18, 18, 24, 0.74); backdrop-filter: blur(8px); cursor: pointer; }
.remove { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; }

.primary, .ghost { border: 0; cursor: pointer; font-weight: 650; transition: transform 170ms var(--ease), box-shadow 170ms ease, border-color 170ms ease, background-color 170ms ease, opacity 170ms ease; }
.primary { min-height: 44px; padding: 11px 26px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.22); font-size: 13px; }
.primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-accent); }
.primary:active:not(:disabled), .ghost:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.primary:disabled { opacity: 0.42; box-shadow: none; cursor: not-allowed; }
.ghost { min-height: 38px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--text-soft); background: var(--card); font-size: 12px; }
.ghost:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), 0.4); color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.ghost:disabled { opacity: 0.42; cursor: not-allowed; }
.ghost.small { min-height: 30px; padding: 5px 9px; font-size: 10px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.saved-box { display: flex; flex-direction: column; gap: 7px; padding-top: 2px; }
.saved-row { display: flex; align-items: center; gap: 7px; }
.saved-row select { flex: 1; min-width: 0; min-height: 34px; padding: 6px 9px; font-size: 11px; }
.status { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; color: var(--accent); background: var(--accent-soft); text-align: center; font-size: 12px; font-weight: 600; }
.status-spinner { display: none; flex: 0 0 16px; width: 16px; height: 16px; }
.status[aria-busy="true"] .status-spinner { display: block; animation: kutu-spin 700ms linear infinite; }
.status.error { color: var(--danger); background: var(--danger-soft); }

.type-tag { flex: 0 0 auto; padding: 5px 10px; border: 1px solid rgba(var(--accent-rgb), 0.16); border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 700; }
.result-empty { display: grid; min-height: 510px; place-content: center; padding: 48px 24px; color: var(--muted); text-align: center; }
.result-empty-icon { display: grid; width: 62px; height: 62px; margin: 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 20px; background: var(--card-soft); font-size: 26px; box-shadow: var(--shadow-sm); }
.result-empty-title { margin: 17px 0 5px; color: var(--text-soft); font-size: 14px; font-weight: 700; }
.result-empty-hint { max-width: 260px; margin: 0; font-size: 11px; }
.result-content { animation: content-in 440ms var(--ease) both; }
.result-block { padding: 18px 0; }
.result-block:first-child { padding-top: 4px; }
.result-block + .result-block { border-top: 1px solid var(--border); }
.result-block.muted { color: var(--muted); }
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.label { color: var(--muted); font-size: 10px; font-weight: 780; letter-spacing: 1px; text-transform: uppercase; }
.prompt-text, .summary-text { margin: 0; white-space: pre-wrap; word-break: break-word; }
.prompt-text { color: var(--text-soft); font-size: 14px; line-height: 1.75; }
.summary-text { font-size: 13px; line-height: 1.7; }
.dna-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dna-row { min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-soft); }
.dna-key { margin-bottom: 4px; color: var(--accent); font-size: 10px; font-weight: 750; }
.dna-val { color: var(--text-soft); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

.system-prompt, .final-prompt, .remix-prompt { margin: 0; border: 1px solid var(--border); border-radius: 12px; color: var(--text-soft); background: var(--field); font-family: var(--font-sans); font-size: 11.5px; line-height: 1.72; white-space: pre-wrap; word-break: break-word; }
.system-prompt, .final-prompt { max-height: 520px; overflow: auto; padding: 16px; }
#systemPromptCard .system-prompt { min-height: 320px; }
.remix-prompt { min-height: 250px; padding: 15px; resize: vertical; }
.more-desc { min-height: 80px; resize: vertical; }
.advanced-prompt { margin-top: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-soft); }
.advanced-prompt summary { display: flex; align-items: center; min-height: 42px; padding: 10px 13px; color: var(--muted-strong); cursor: pointer; font-size: 11px; font-weight: 650; list-style: none; }
.advanced-prompt summary::-webkit-details-marker { display: none; }
.advanced-prompt summary > .ri-icon { width: 18px; height: 18px; margin-left: auto; color: var(--accent); transition: transform 180ms var(--ease); }
.advanced-prompt[open] summary { border-bottom: 1px solid var(--border); color: var(--text-soft); }
.advanced-prompt[open] summary > .ri-icon { transform: rotate(180deg); }
.advanced-prompt .remix-prompt { margin: 12px; width: calc(100% - 24px); min-height: 220px; }
.advanced-prompt .result-block { margin: 0 14px; }
.final-prompt-details { margin-top: 16px; }

.remix-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.remix-form > .field:nth-child(n + 5) { grid-column: 1 / -1; }
.tone-toggle, .style-options { display: flex; flex-wrap: wrap; gap: 8px; }
.tone-toggle { margin-bottom: 12px; }
.tone-opt, .style-opt { position: relative; display: inline-flex !important; align-items: center; gap: 7px; margin: 0 !important; padding: 7px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted-strong); background: var(--field); cursor: pointer; font-size: 11px !important; font-weight: 600 !important; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; }
.tone-opt:has(input:checked), .style-opt:has(input:checked) { border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent); background: var(--accent-soft); }
.tone-opt input, .style-opt input { accent-color: var(--accent); }
.color-swatches { display: grid; grid-template-columns: repeat(5, minmax(42px, 1fr)); gap: 14px 12px; align-items: center; }
.color-swatch { position: relative; display: grid; width: 48px; height: 48px; max-width: none; padding: 0; place-items: center; border: 2px solid var(--card); border-radius: 50%; background: #f0f0f3; box-shadow: 0 0 0 1px var(--border), 0 4px 10px rgba(18, 19, 22, .06); cursor: pointer; transition: transform 160ms var(--ease), box-shadow 160ms ease, border-color 160ms ease; }
.color-swatch:hover { transform: translateY(-2px) scale(1.04); }
.color-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.color-swatch.active { box-shadow: 0 0 0 2px var(--accent), 0 6px 14px rgba(var(--accent-rgb), 0.2); }
.color-swatch.keep { width: 48px; height: 48px; border: 1px dashed var(--border-strong); color: var(--muted); background: var(--field); font-size: 9px; font-weight: 750; line-height: 1.1; box-shadow: none; }
.color-swatch.keep.active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 6px 14px rgba(var(--accent-rgb), 0.2); }
.color-swatch.custom { background: conic-gradient(#ff6b6b, #ffd93d, #6bcb77, #4d96ff, #b983ff, #ff6b6b); }
.color-swatch.custom .ri-icon { width: 22px; height: 22px; padding: 3px; border-radius: 50%; color: #fff; background: rgba(18,19,22,.62); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.color-custom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.color-custom-item { display: grid; grid-template-columns: auto 42px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.color-custom-item span { color: var(--muted-strong); font-size: 11px; font-weight: 700; white-space: nowrap; }
.color-custom input[type="color"] { flex: 0 0 42px; width: 42px; height: 42px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; }
.color-custom input[type="text"] { min-width: 0; font-family: var(--font-sans); }

.file-preview { position: relative; display: inline-flex; margin-top: 9px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-soft); }
.file-preview img { display: block; max-width: 130px; max-height: 90px; object-fit: contain; border-radius: 7px; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.file-preview img:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-remove { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; background: var(--danger); font-size: 10px; }
.manual-conflict { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-soft); font-size: 11px; }
.conflict-title { color: var(--text); font-weight: 700; }
.conflict-item.ok { color: var(--success); }
.conflict-item.override { color: var(--danger); }
.prompt-mode { display: flex; flex-wrap: wrap; gap: 10px; }
.prompt-mode-opt { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 11px; font-weight: 650; cursor: pointer; }
.auto-prompt-ref { color: var(--muted); font-size: 11px; }
.auto-prompt-ref summary { margin-bottom: 7px; cursor: pointer; }

#remixPromptCard > .hint { margin: -8px 0 14px; }
#remixPromptCard .actions { margin-top: 14px; }
#genStatus { margin-top: 12px; }
#generateResultCard { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.result-title { margin: 0 0 14px; }
.gen-image-wrap { margin-bottom: 15px; }
.gen-image { display: block; width: min(100%, 720px); margin: 0 auto; border: 1px solid var(--border); border-radius: 14px; background: var(--field); box-shadow: var(--shadow-md); cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.gen-actions { display: flex; justify-content: center; margin-top: 11px; }

.foot { margin-top: 34px; color: var(--muted); text-align: center; font-size: 10px; }
.foot p { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; }
.footer-brand { color: var(--text-soft); font-weight: 750; }
.footer-divider { width: 1px; height: 12px; background: var(--border-strong); }
.hidden { display: none !important; }

.newcomer-banner { position: relative; z-index: 2; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; width: min(1180px,calc(100% - 32px)); margin: 18px auto 0; padding: 12px 14px; border: 1px solid color-mix(in srgb,var(--accent) 34%,var(--border)); border-radius: 8px; background: color-mix(in srgb,var(--card) 94%,var(--accent)); box-shadow: 0 6px 22px rgba(18,19,22,.06); }
.newcomer-banner-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 7px; color: #fff; background: var(--accent); }
.newcomer-banner-icon .ri-icon { width: 19px; height: 19px; }
.newcomer-banner strong { display: block; font-size: 13px; }
.newcomer-banner p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.newcomer-banner > button { min-height: 36px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 7px; color: #fff; background: var(--accent); cursor: pointer; font: inherit; font-size: 11px; font-weight: 750; }
.newcomer-modal { position: fixed; inset: 0; z-index: 720; display: grid; place-items: center; padding: 20px; }
.newcomer-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(12,13,15,.64); backdrop-filter: blur(8px); }
.newcomer-modal-card { position: relative; width: min(430px,100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); box-shadow: 0 28px 90px rgba(0,0,0,.28); }
.newcomer-modal-close { position: absolute; top: 12px; right: 12px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; }
.newcomer-modal-close:hover { color: var(--text); background: var(--card-soft); }
.newcomer-modal-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 8px; color: #fff; background: var(--accent); }
.newcomer-modal-icon .ri-icon { width: 24px; height: 24px; }
.newcomer-modal-eyebrow { margin: 20px 0 5px; color: var(--accent); font-size: 10px; font-weight: 800; }
.newcomer-modal-card h2 { margin: 0; font-size: 24px; letter-spacing: 0; }
.newcomer-modal-copy { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.newcomer-modal-offer { display: grid; gap: 4px; margin-top: 20px; padding: 17px 18px; border: 1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius: 8px; background: color-mix(in srgb,var(--accent) 6%,var(--card)); }
.newcomer-modal-offer strong { font-size: 23px; }
.newcomer-modal-offer span { color: var(--muted); font-size: 11px; }
.newcomer-task-list { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--border); }
.newcomer-task-list span { display: flex; align-items: center; gap: 9px; min-height: 40px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.newcomer-task-list span.done { color: var(--text); }
.newcomer-task-list .ri-icon { width: 16px; height: 16px; color: var(--accent); }
.newcomer-modal-message { min-height: 18px; margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.newcomer-modal-message.error { color: #dc2626; }
.newcomer-modal-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.newcomer-modal-actions button { min-height: 42px; }
.recharge-show-all { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; margin: 14px auto 0; padding: 0 16px; border: 1px solid var(--border); border-radius: 7px; color: var(--muted-strong); background: var(--card); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
.recharge-show-all .ri-icon { width: 15px; height: 15px; }

@media (max-width: 600px) {
  .newcomer-banner { grid-template-columns: 34px minmax(0,1fr); width: calc(100% - 24px); margin-top: 12px; }
  .newcomer-banner-icon { width: 34px; height: 34px; }
  .newcomer-banner > button { grid-column: 1 / -1; width: 100%; }
  .newcomer-modal { padding: 12px; }
  .newcomer-modal-card { max-height: calc(100dvh - 24px); padding: 24px 20px; }
  .newcomer-modal-actions { grid-template-columns: 1fr; }
}
.lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; width: 100vw; height: 100dvh; align-items: center; justify-content: center; padding: 0; background: #050507; cursor: zoom-out; animation: fade-in 180ms ease both; }
.lightbox:fullscreen { width: 100vw; height: 100vh; background: #050507; }
.lightbox img { display: block; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; border-radius: 0; object-fit: contain; box-shadow: none; pointer-events: none; user-select: none; }
.lightbox:fullscreen img { height: 100vh; max-height: 100vh; }
.lightbox-close { position: absolute; z-index: 1; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; color: #fff; background: rgba(10,10,14,0.58); backdrop-filter: blur(12px); cursor: pointer; }
.lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* Full-scene OCR text editor */
.text-editor-trigger {
  display: flex;
  width: 100%;
  min-height: 68px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text);
  background: var(--field);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.text-editor-trigger:hover { border-color: var(--border-strong); background: var(--card); transform: translateY(-1px); }
.text-editor-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }
.text-editor-trigger-main { display: flex; min-width: 0; flex: 1; align-items: center; gap: 11px; }
.text-editor-trigger-main > .ri-icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--accent); }
.text-editor-trigger-main span { display: grid; min-width: 0; gap: 3px; }
.text-editor-trigger-main strong { font-size: 13px; font-weight: 720; }
.text-editor-trigger-main small { overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.text-editor-count { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 11px; font-weight: 720; }
.text-editor-trigger > .ri-arrow-right-s-line { width: 18px; height: 18px; flex: 0 0 18px; color: var(--muted); }

.text-editor-backdrop { position: fixed; inset: 0; z-index: 10020; background: rgba(9, 10, 16, .52); backdrop-filter: blur(8px); animation: fade-in 180ms ease both; }
.text-editor-modal {
  position: fixed;
  z-index: 10021;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(620px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  background: var(--card);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .26);
  transform: translate(-50%, -50%);
  animation: text-editor-in 220ms var(--ease) both;
}
.text-editor-head { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid var(--border); }
.text-editor-head h2 { margin: 0; font-size: 19px; font-weight: 760; letter-spacing: -.35px; }
.text-editor-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.text-editor-close { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.text-editor-close:hover { color: var(--text); background: var(--field); }
.text-editor-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.text-editor-close .ri-icon { width: 21px; height: 21px; }
.text-editor-list { display: grid; min-height: 180px; overflow-y: auto; overscroll-behavior: contain; gap: 14px; padding: 20px 24px 24px; scrollbar-gutter: stable; }
.text-editor-item { display: grid; gap: 7px; }
.text-editor-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.text-editor-item-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-editor-input-row { display: flex; align-items: center; gap: 8px; }
.text-editor-input-row input { width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; outline: none; color: var(--text); background: var(--field); font-size: 14px; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
.text-editor-input-row input:hover { border-color: var(--border-strong); }
.text-editor-input-row input:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }
.text-editor-delete { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 0; border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.text-editor-delete:hover { color: #d84a4a; background: rgba(216, 74, 74, .09); }
.text-editor-delete:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.text-editor-delete .ri-icon { width: 19px; height: 19px; }
.text-editor-empty { display: grid; min-height: 190px; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
.text-editor-empty .ri-icon { width: 28px; height: 28px; margin-bottom: 3px; color: var(--border-strong); }
.text-editor-empty strong { color: var(--text-soft); font-size: 14px; }
.text-editor-empty span { font-size: 12px; }
.text-editor-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--field) 54%, var(--card)); }
.text-editor-footer span { color: var(--muted); font-size: 12px; }
.text-editor-footer .primary { min-width: 92px; }
@keyframes text-editor-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.985); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Remix icon motion system */
button i[class^="ri-"],
button i[class*=" ri-"],
a i[class^="ri-"],
a i[class*=" ri-"],
.drop-icon .ri-icon,
.result-empty-icon .ri-icon,
.viewer-carrier .ri-icon,
.inspiration-search > .ri-icon {
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform 180ms var(--ease), color 180ms ease, opacity 180ms ease, filter 180ms ease;
  will-change: transform;
}

button:hover:not(:disabled) i[class^="ri-"],
button:hover:not(:disabled) i[class*=" ri-"],
a:hover i[class^="ri-"],
a:hover i[class*=" ri-"] {
  transform: translateY(-1px) scale(1.08);
}

button:active:not(:disabled) i[class^="ri-"],
button:active:not(:disabled) i[class*=" ri-"],
a:active i[class^="ri-"],
a:active i[class*=" ri-"] {
  transform: translateY(0) scale(0.92);
}

.brand:hover .brand-wordmark { transform: translateX(1px); }
.result-empty-icon .ri-icon { animation: icon-soft-float 2.8s ease-in-out infinite; }
.top-action:has(.ri-refresh-line):hover:not(:disabled) i,
.detect-action.is-loading i { transform: rotate(180deg); }
.detect-action.is-loading::before { animation-duration: 660ms; }
.config-action[aria-expanded="true"] i,
.config-action:hover:not(:disabled) i { transform: rotate(18deg) scale(1.06); }
.theme-toggle:hover .theme-icon .ri-icon { transform: rotate(22deg) scale(1.08); }
.theme-toggle:active .theme-icon .ri-icon { transform: rotate(38deg) scale(0.92); }
.drawer-close:hover i,
.viewer-close:hover .ri-icon,
.lightbox-close:hover i,
.remove:hover i,
.file-remove:hover i { transform: rotate(90deg) scale(1.08); }
.viewer-action:has(.ri-download-2-line):hover .ri-icon,
#downloadBtn:hover:not(:disabled) .ri-icon { animation: icon-download-nudge 520ms var(--ease) both; }
.viewer-action:has(.ri-heart-fill) .ri-icon,
.viewer-action.active .ri-icon,
.favorite-pop .ri-icon { animation: icon-heart-pop 420ms var(--ease) both; }
.viewer-use:hover .ri-icon,
.card-use:hover i,
.primary:hover:not(:disabled) i,
button:has(.ri-magic-line):hover:not(:disabled) .ri-icon { animation: icon-magic-spark 560ms var(--ease) both; }
.viewer-prev:hover .ri-icon { transform: translateX(-3px) scale(1.08); }
.viewer-next:hover .ri-icon { transform: translateX(3px) scale(1.08); }
.filter-trigger:hover .ri-icon,
.subcategory-trigger:hover .ri-icon { transform: translateY(1px); }
.filter-menu.open .filter-trigger .ri-icon,
.filter-menu.open .subcategory-trigger .ri-icon { transform: rotate(180deg); }
.filter-option.active .ri-icon,
.active-filter button:hover .ri-icon { transform: scale(1.12); }
.inspiration-search:focus-within > .ri-icon { transform: scale(1.08); color: var(--gallery-accent); }

@keyframes icon-soft-float {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes icon-download-nudge {
  0%, 100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(4px) scale(1.04); }
}

@keyframes icon-heart-pop {
  0% { transform: scale(.86); }
  55% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@keyframes icon-magic-spark {
  0%, 100% { transform: rotate(0deg) scale(1); filter: none; }
  45% { transform: rotate(-10deg) scale(1.12); filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .28)); }
}

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: var(--border-strong); background-clip: padding-box; }

@keyframes hero-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes content-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.82); } }

@media (max-width: 1180px) {
  .page { padding-inline: 22px; }
  #inputPanel, #remixCard, #remixPromptCard { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .appbar { min-height: 64px; padding-inline: 18px; }
  .privacy-note { display: none; }
  .appbar-actions { gap: 7px; }
  .api-status-pill { width: 40px; min-width: 40px; padding: 7px; justify-content: center; }
  .top-action { width: 38px; padding: 7px; justify-content: center; }
  .top-action > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .page { padding: 52px 16px 36px; }
  .hero { margin-bottom: 36px; }
  .hero h1 { letter-spacing: -1.5px; }
  .workspace { gap: 14px; }
  .panel, #remixCard, #remixPromptCard { grid-column: 1 / -1; padding: 20px; }
  .remix-form { grid-template-columns: 1fr; }
  .remix-form > .field { grid-column: 1 !important; }
}

/* Generation feedback: keep the reference and pending artwork spatially paired. */
.studio-generation-view {
  display: block;
  width: min(1500px, 100%);
  min-height: 0;
  margin: 0 auto;
}
.generation-result-head { margin-bottom: 28px; }
.generation-comparison {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 32px);
  row-gap: 14px;
}
.generation-reference-preview { cursor: default; }
.comparison-dot.generated.loading {
  background: var(--muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 14%, transparent);
  animation: generation-dot-pulse 1.4s ease-in-out infinite;
}
.generation-placeholder {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: clamp(420px, 62dvh, 760px);
  place-content: center;
  justify-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 24px;
  border-radius: 16px;
  color: var(--muted-strong);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-soft) 78%, #b7bac0), color-mix(in srgb, var(--card-soft) 70%, #a8acb3));
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}
.generation-placeholder::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 52%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.08) 24%, rgba(255,255,255,.52) 50%, rgba(255,255,255,.08) 76%, transparent 100%);
  transform: translateX(-140%);
  animation: generation-shimmer 1.8s ease-in-out infinite;
}
[data-theme="dark"] .generation-placeholder::before {
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.02) 24%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.02) 76%, transparent 100%);
}
.generation-placeholder-spinner {
  width: 30px;
  height: 30px;
  margin-bottom: 3px;
  border: 3px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: kutu-spin 760ms linear infinite;
}
.generation-placeholder strong { color: var(--text-soft); font-size: 14px; }
.generation-placeholder small { color: var(--muted); font-size: 11px; }
.generation-command-panel { justify-content: space-between; }
.generation-progress-copy { display: grid; gap: 4px; }
.generation-progress-copy strong { color: var(--text-soft); font-size: 12px; }
.generation-progress-copy span { color: var(--muted); font-size: 11px; }
.generation-pending-button {
  display: inline-flex;
  min-width: 154px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted-strong);
  background: var(--border-strong);
  opacity: .72;
}
.generation-pending-button.is-loading::before { display: none; }
.generation-button-spinner {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  animation: kutu-spin 760ms linear infinite;
}
@keyframes generation-shimmer {
  0% { transform: translateX(-140%); }
  100% { transform: translateX(300%); }
}
@keyframes generation-dot-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

@media (max-width: 820px) {
  .generation-result-head { margin-bottom: 20px; }
  .generation-comparison { grid-template-columns: 1fr; gap: 14px; }
  .generation-placeholder { height: min(62dvh, 620px); }
  .generation-command-panel { align-items: stretch; }
  .generation-pending-button { width: 100%; }
}

@media (max-width: 560px) {
  .generation-placeholder { height: min(56dvh, 520px); padding: 12px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .generation-placeholder::before,
  .comparison-dot.generated.loading,
  .generation-placeholder-spinner,
  .generation-button-spinner { animation: none; }
}

@media (max-width: 560px) {
  .text-editor-modal { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: min(82vh, 760px); border-width: 1px 0 0; border-radius: 22px 22px 0 0; transform: none; animation-name: text-editor-mobile-in; }
  .text-editor-head { padding: 19px 18px 15px; }
  .text-editor-list { padding: 17px 18px 22px; }
  .text-editor-footer { padding: 12px 18px max(12px, env(safe-area-inset-bottom)); }
  .text-editor-trigger-main small { white-space: normal; }
  @keyframes text-editor-mobile-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  .brand-copy small { display: none; }
  .theme-toggle { padding: 10px; }
  .config-drawer { width: 100vw; }
  .drawer-head { padding: 22px 20px 17px; }
  .drawer-body { padding-inline: 20px; }
  .drawer-foot { padding: 14px 20px; }
  .hero h1 { font-size: 34px; } /* 标题字号（≤560px 窄屏档，固定 34px） */
  .subtitle { font-size: 13px; }
  .workflow { gap: 7px; }
  .workflow i { width: 16px; }
  .workflow-item { font-size: 0; gap: 0; }
  .workflow-item b { font-size: 9px; }
  .panel { padding: 17px; border-radius: 17px; }
  .card-head { align-items: flex-start; }
  .head-btns { flex-wrap: wrap; justify-content: flex-end; }
  .dna-list { grid-template-columns: 1fr; }
  .saved-row { flex-wrap: wrap; }
  .saved-row select { flex-basis: 100%; }
  .upload { min-height: 190px; }
}

@media (max-width: 420px) {
  .brand-copy { display: flex; }
  .brand-wordmark { width: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .result-empty-icon .ri-icon,
  .viewer-action:has(.ri-download-2-line):hover .ri-icon,
  .viewer-action:has(.ri-heart-fill) .ri-icon,
  .viewer-action.active .ri-icon,
  .favorite-pop .ri-icon,
  .viewer-use:hover .ri-icon,
  .card-use:hover i,
  button:has(.ri-magic-line):hover:not(:disabled) i {
    animation: none !important;
    filter: none !important;
  }
}

/* Keep the creation workspace locked to the viewport. */
body.studio-active:has(#studioView[data-stage="create"]) {
  overflow: hidden;
}
body.studio-active:has(#studioView[data-stage="create"]) .page {
  height: calc(100dvh - 72px);
  min-height: 0;
  overflow: hidden;
}
#studioView[data-stage="create"] {
  height: 100%;
  overflow: hidden;
}
#studioView[data-stage="create"] .workspace {
  height: calc(100% - 98px);
  min-height: 0;
  overflow: hidden;
}
#studioView[data-stage="create"] #inputPanel,
#studioView[data-stage="create"] #remixCard {
  min-height: 0;
  height: 100%;
}
#studioView[data-stage="create"] #inputPanel .upload {
  flex: 1 1 auto;
  height: auto;
}
#studioView[data-stage="create"] #remixCard {
  overflow-y: auto;
}

@media (max-width: 820px) {
  body.studio-active:has(#studioView[data-stage="create"]) .page {
    height: calc(100dvh - 64px);
  }
  #studioView[data-stage="create"] {
    overflow: hidden;
  }
  #studioView[data-stage="create"] .workspace {
    height: calc(100% - 66px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  #studioView[data-stage="create"] #inputPanel {
    height: min(68vh, 560px);
  }
  #studioView[data-stage="create"] #remixCard {
    height: auto;
    overflow: visible;
  }
}

/* Inspiration library */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.primary-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; margin-left: 28px; padding-left: 24px; border-left: 1px solid var(--border); }
.primary-nav-item { position: relative; min-height: 38px; padding: 7px 13px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 13px; font-weight: 680; transition: color 180ms ease; }
.primary-nav-item::after { content: ""; position: absolute; right: 13px; bottom: 2px; left: 13px; height: 2px; border-radius: 99px; background: var(--accent); transform: scaleX(0); transition: transform 220ms var(--ease); }
.primary-nav-item:hover { color: var(--text); }
.primary-nav-item.active { color: var(--text); }
.primary-nav-item.active::after { transform: scaleX(1); }
.app-view { animation: content-in 360ms var(--ease) both; }

.inspiration-view { --gallery-accent: #ff6a2a; min-height: calc(100vh - 150px); padding-bottom: 64px; }
.inspiration-search-wrap { display: flex; justify-content: center; padding: 2px 0 62px; }
.inspiration-search { display: flex; width: min(500px, 100%); min-height: 54px; align-items: center; gap: 12px; padding: 0 17px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--card); box-shadow: var(--shadow-sm); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease); }
.inspiration-search:focus-within { border-color: color-mix(in srgb, var(--gallery-accent) 55%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gallery-accent) 11%, transparent), var(--shadow-md); transform: translateY(-1px); }
.inspiration-search > .ri-icon { width: 19px; height: 19px; flex: 0 0 19px; }
.inspiration-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.inspiration-search input::-webkit-search-cancel-button { display: none; }
.inspiration-search kbd { padding: 3px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); background: var(--field); font: 600 10px/1.2 var(--font-sans); white-space: nowrap; }

.inspiration-categories { display: flex; justify-content: center; gap: clamp(20px, 3.2vw, 44px); min-height: 42px; margin-bottom: 64px; overflow-x: auto; scrollbar-width: none; }
.inspiration-categories::-webkit-scrollbar, .subcategory-tabs::-webkit-scrollbar { display: none; }
.inspiration-category { position: relative; flex: 0 0 auto; padding: 7px 1px 13px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 14px; font-weight: 680; transition: color 180ms ease, transform 180ms var(--ease); }
.inspiration-category::after { content: ""; position: absolute; right: 18%; bottom: 5px; left: 18%; height: 2px; border-radius: 2px; background: var(--gallery-accent); transform: scaleX(0); transition: transform 200ms var(--ease); }
.inspiration-category:hover { color: var(--text); transform: translateY(-1px); }
.inspiration-category.active { color: var(--text); }
.inspiration-category.active::after { transform: scaleX(1); }

.inspiration-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.toolbar-left { display: flex; min-width: 0; align-items: center; gap: 18px; }
.subcategory-tabs { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--field); overflow-x: auto; scrollbar-width: none; }
.inspiration-subcategories { flex: 0 0 auto; margin-left: auto; }
.subcategory-tab { flex: 0 0 auto; min-height: 34px; padding: 6px 14px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 680; transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.subcategory-tab:hover { color: var(--text); }
.subcategory-tab.active { color: var(--text); background: var(--card); box-shadow: 0 2px 8px rgba(10, 10, 20, 0.08); }
.toolbar-divider { flex: 0 0 1px; width: 1px; height: 28px; background: var(--border-strong); }
.inspiration-filters { display: flex; align-items: center; gap: 9px; }
.filter-menu { position: relative; }
.filter-menu.open::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 8px;
}
.filter-trigger { display: flex; min-height: 38px; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-soft); background: transparent; cursor: pointer; font-size: 12px; font-weight: 650; transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease; }
.filter-trigger .ri-icon { width: 14px; height: 14px; transition: transform 180ms var(--ease); }
.filter-trigger:hover, .filter-menu.open .filter-trigger, .filter-trigger.selected { border-color: color-mix(in srgb, var(--gallery-accent) 60%, var(--border)); color: var(--text); background: color-mix(in srgb, var(--gallery-accent) 7%, transparent); }
.filter-menu.open .filter-trigger .ri-icon { transform: rotate(180deg); }
.filter-popover { position: absolute; top: 100%; left: 0; z-index: 80; width: 150px; padding: 7px; border: 1px solid var(--border); border-radius: 13px; background: var(--card); box-shadow: var(--shadow-md); animation: filter-pop 160ms var(--ease) both; }
.filter-option { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 9px 10px; border: 0; border-radius: 8px; color: var(--text-soft); background: transparent; cursor: pointer; text-align: left; font-size: 12px; }
.filter-option:hover { color: var(--text); background: var(--field); }
.filter-option.active { color: var(--gallery-accent); font-weight: 720; }
.sort-select { position: relative; display: flex; flex: 0 0 auto; align-items: center; color: var(--text-soft); }
.sort-select select { min-height: 38px; padding: 7px 29px 7px 12px; border: 0; outline: 0; color: inherit; background: transparent; appearance: none; cursor: pointer; font-size: 12px; font-weight: 680; }
.sort-select > .ri-icon { position: absolute; right: 8px; width: 14px; height: 14px; pointer-events: none; }

.active-filter-bar { display: flex; align-items: center; gap: 8px; margin: -12px 0 22px; color: var(--muted); font-size: 11px; }
.active-filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--gallery-accent) 28%, var(--border)); border-radius: 999px; color: var(--text-soft); background: color-mix(in srgb, var(--gallery-accent) 6%, var(--card)); }
.active-filter-chip button { display: grid; width: 15px; height: 15px; padding: 0; place-items: center; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.clear-filter-link { padding: 4px 5px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; }
.clear-filter-link:hover { color: var(--gallery-accent); }

.inspiration-gallery { columns: 6 200px; column-gap: 13px; }
.inspiration-card { position: relative; display: inline-block; width: 100%; margin: 0 0 13px; overflow: hidden; border: 0; border-radius: 3px; color: white; background: #222; box-shadow: 0 2px 12px rgba(8, 8, 14, 0.08); cursor: zoom-in; break-inside: avoid; vertical-align: top; text-align: left; isolation: isolate; animation: gallery-card-in 420ms var(--ease) both; animation-delay: min(calc(var(--index) * 28ms), 280ms); }
.inspiration-card::after { content: ""; position: absolute; inset: 0; z-index: 4; border: 1px solid rgba(255,255,255,0.1); border-radius: inherit; pointer-events: none; }
.card-open { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 0; border: 0; outline-offset: -3px; background: transparent; cursor: zoom-in; }
.poster-visual { position: relative; width: 100%; aspect-ratio: var(--ratio); overflow: hidden; background: color-mix(in srgb, var(--c1) 50%, #808080); }
.poster-visual::before, .poster-visual::after { content: ""; position: absolute; pointer-events: none; transition: transform 520ms var(--ease); }
.poster-visual::before { top: 11%; right: -16%; width: 78%; aspect-ratio: 1; border-radius: 39% 61% 55% 45%; background: var(--c3); opacity: .96; transform: rotate(-18deg); }
.poster-visual::after { bottom: -15%; left: -25%; width: 92%; aspect-ratio: 1; border: clamp(10px, 1.8vw, 28px) solid rgba(255,255,255,.2); border-radius: 50%; transform: rotate(14deg); }
.poster-noise { position: absolute; inset: 0; z-index: 1; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.poster-rail { position: absolute; z-index: 2; top: 7%; right: 7%; left: 7%; display: flex; justify-content: space-between; color: var(--ink); font-size: clamp(7px, .58vw, 10px); font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.poster-copy { position: absolute; z-index: 2; right: 8%; bottom: 9%; left: 8%; color: var(--ink); }
.poster-copy small { display: block; margin-bottom: 7px; font-size: clamp(7px, .55vw, 9px); font-weight: 780; letter-spacing: .14em; text-transform: uppercase; }
.poster-copy strong { display: block; max-width: 95%; font-size: clamp(22px, 2.15vw, 40px); font-weight: 880; line-height: .96; letter-spacing: -.07em; text-wrap: balance; }
.poster-copy span { display: block; width: 62%; height: 3px; margin-top: 13px; background: currentColor; opacity: .75; }
.poster-orb { position: absolute; z-index: 2; top: 29%; left: 50%; width: 48%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.85), rgba(255,255,255,.08) 34%, rgba(0,0,0,.14) 72%); box-shadow: inset -12px -18px 30px rgba(0,0,0,.12), 0 18px 32px rgba(0,0,0,.16); transform: translateX(-50%); }
.poster-v2 .poster-visual::before { top: 25%; right: 12%; width: 65%; border-radius: 4px; background: repeating-linear-gradient(0deg, var(--c3) 0 9px, transparent 9px 18px); opacity: .75; transform: rotate(-10deg); }
.poster-v2 .poster-visual::after { bottom: 14%; left: 8%; width: 30%; border-width: 8px; border-radius: 0; }
.poster-v2 .poster-orb { top: 17%; left: 28%; width: 32%; border-radius: 5%; background: var(--c3); transform: rotate(12deg); }
.poster-v3 .poster-visual::before { top: 17%; right: 8%; width: 46%; border-radius: 50%; background: repeating-conic-gradient(var(--c3) 0 8deg, transparent 8deg 16deg); filter: blur(.2px); }
.poster-v3 .poster-visual::after { bottom: -1%; left: 10%; width: 58%; border-width: 2px; border-radius: 0; transform: skew(-18deg); }
.poster-v3 .poster-orb { top: 35%; left: 40%; width: 58%; border: 0; border-radius: 52% 48% 26% 74%; background: linear-gradient(135deg, rgba(255,255,255,.65), var(--c3)); filter: saturate(1.2); transform: translateX(-50%) rotate(20deg); }
.poster-v4 .poster-visual::before { inset: 17% 11% auto auto; width: 58%; border-radius: 50%; background: transparent; border: 2px solid var(--c3); box-shadow: inset 0 0 0 18px rgba(255,255,255,.08), inset 0 0 0 34px var(--c3); }
.poster-v4 .poster-visual::after { bottom: 18%; left: 8%; width: 82%; aspect-ratio: 2.3; border: 0; border-radius: 0; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 8px); opacity: .22; }
.poster-v4 .poster-orb { top: 24%; width: 28%; border-radius: 2px; background: rgba(255,255,255,.22); transform: translateX(-50%) rotate(45deg); }
.inspiration-card:hover .poster-visual::before { transform: rotate(-12deg) scale(1.06); }
.inspiration-card:hover .poster-visual::after { transform: rotate(8deg) scale(1.04); }
.card-hover { position: absolute; inset: auto 0 0; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 48px 13px 13px; background: linear-gradient(transparent, rgba(5,5,8,.76)); opacity: 0; transform: translateY(8px); transition: opacity 200ms ease, transform 220ms var(--ease); }
.inspiration-card:hover .card-hover, .inspiration-card:focus-visible .card-hover { opacity: 1; transform: none; }
.card-hover strong { display: block; font-size: 12px; line-height: 1.3; }
.card-hover span { display: block; margin-top: 3px; color: rgba(255,255,255,.7); font-size: 9px; }
.card-use { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #17110d; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.22); backdrop-filter: blur(8px); cursor: pointer; transition: transform 180ms var(--ease), background-color 180ms ease, color 180ms ease; }
.card-use:hover { color: #fff; background: var(--accent); transform: translateY(-1px) scale(1.04); }
.card-use i { font-size: 18px; line-height: 1; }

.inspiration-empty { padding: 100px 20px; text-align: center; color: var(--text); }
.inspiration-empty span { font-size: 16px; font-weight: 720; }
.inspiration-empty p { margin: 5px 0 18px; color: var(--muted); font-size: 12px; }
.inspiration-modal { position: fixed; inset: 0; z-index: 500; display: grid; min-height: 100dvh; place-items: center; padding: 0; background: rgba(10,11,13,.94); }
.inspiration-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(10,11,13,.94); backdrop-filter: blur(18px) saturate(80%); cursor: zoom-out; animation: fade-in 180ms ease both; }
.inspiration-viewer { position: relative; z-index: 1; display: grid; width: 100%; height: 100%; place-items: center; padding: 0; pointer-events: none; }
.inspiration-detail-art { display: flex; width: 100%; height: 100dvh; align-items: center; justify-content: center; overflow: hidden; padding: 88px 104px 94px; pointer-events: auto; touch-action: none; animation: viewer-art-in 280ms var(--ease) both; }
.viewer-image-stage { display: inline-flex; max-width: 100%; max-height: 100%; align-items: center; justify-content: center; transform-origin: center; cursor: zoom-in; user-select: none; will-change: transform; }
.viewer-image-stage.viewer-transform-animate { transition: transform 220ms var(--ease); }
.viewer-image-stage.is-zoomed { cursor: grab; }
.viewer-image-stage.is-dragging { cursor: grabbing; }
.viewer-image { display: block; max-width: 100%; max-height: calc(100dvh - 182px); object-fit: contain; border-radius: 4px; box-shadow: 0 24px 70px rgba(0,0,0,.38); }
.viewer-image-stage .poster-visual { max-width: min(72vw, 900px); max-height: calc(100dvh - 182px); }
.viewer-meta { position: absolute; z-index: 2; top: max(24px, env(safe-area-inset-top)); left: max(28px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 10px; color: #fff; pointer-events: auto; }
.viewer-carrier { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 12px; background: rgba(25,26,29,.78); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 13px; font-weight: 680; backdrop-filter: blur(14px); }
.viewer-carrier > .ri-icon { width: 15px; height: 15px; color: var(--muted); }
.viewer-position { min-width: 48px; color: rgba(255,255,255,.62); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.viewer-palette { display: flex; align-items: center; gap: 3px; }
.viewer-color-swatch { position: relative; display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--text); background: transparent; cursor: copy; outline: none; }
.viewer-color-dot { display: block; width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.16); transition: transform 180ms var(--ease), box-shadow 180ms ease, border-color 180ms ease; }
.viewer-color-swatch::before, .viewer-color-swatch::after { position: absolute; left: 50%; z-index: 6; pointer-events: none; opacity: 0; transition: opacity 150ms ease, transform 180ms var(--ease); }
.viewer-color-swatch::before { content: ""; top: calc(100% - 2px); width: 8px; height: 8px; background: rgba(27,29,33,.96); transform: translate(-50%, 3px) rotate(45deg); }
.viewer-color-swatch::after { content: attr(data-tooltip); top: calc(100% + 2px); width: max-content; max-width: 180px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; color: #fff; background: rgba(27,29,33,.96); box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: 11px; font-weight: 680; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; transform: translate(-50%, 5px); }
.viewer-color-swatch:hover .viewer-color-dot, .viewer-color-swatch:focus-visible .viewer-color-dot { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 5px 14px rgba(0,0,0,.18); transform: scale(1.13); }
.viewer-color-swatch:hover::before, .viewer-color-swatch:hover::after, .viewer-color-swatch:focus-visible::before, .viewer-color-swatch:focus-visible::after { opacity: 1; }
.viewer-color-swatch:hover::before, .viewer-color-swatch:focus-visible::before { transform: translate(-50%, 0) rotate(45deg); }
.viewer-color-swatch:hover::after, .viewer-color-swatch:focus-visible::after { transform: translate(-50%, 2px); }
.viewer-color-swatch:first-child::after { left: 0; transform: translate(0, 5px); }
.viewer-color-swatch:first-child:hover::after, .viewer-color-swatch:first-child:focus-visible::after { transform: translate(0, 2px); }
.viewer-color-swatch.copied .viewer-color-dot { animation: color-copy-pop 360ms var(--ease); }
.viewer-actions { position: absolute; z-index: 3; top: max(20px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(25,26,29,.72); backdrop-filter: blur(14px); pointer-events: auto; }
.viewer-action { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: rgba(255,255,255,.72); background: transparent; cursor: pointer; transition: color 160ms ease, background-color 160ms ease, transform 180ms var(--ease); }
.viewer-action:hover { color: #fff; background: rgba(255,255,255,.11); transform: translateY(-1px); }
.viewer-action .ri-icon, .viewer-nav .ri-icon { width: 20px; height: 20px; }
.viewer-action.active { color: var(--danger); }
.viewer-action.active .ri-icon { color: currentColor; }
.viewer-use { color: var(--text-soft); }
.viewer-close { margin-left: 2px; color: #fff; background: rgba(255,255,255,.1); font-size: 23px; font-weight: 300; }
.viewer-close:hover { background: rgba(255,255,255,.18); }
.viewer-nav { position: absolute; z-index: 3; top: 50%; display: grid; width: 52px; height: 52px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: rgba(255,255,255,.8); background: rgba(25,26,29,.72); backdrop-filter: blur(12px); cursor: pointer; pointer-events: auto; transform: translateY(-50%); transition: color 160ms ease, background-color 160ms ease, transform 180ms var(--ease); }
.viewer-nav:hover { color: #fff; background: rgba(45,46,50,.92); transform: translateY(-50%) scale(1.04); }
.viewer-prev { left: 30px; }
.viewer-next { right: 30px; }
.viewer-bottom-bar { position: absolute; z-index: 4; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.64); background: rgba(25,26,29,.8); box-shadow: 0 12px 36px rgba(0,0,0,.24); backdrop-filter: blur(16px); pointer-events: auto; transform: translateX(-50%); }
.viewer-zoom-controls { display: flex; align-items: center; }
.viewer-zoom-controls button, .viewer-mobile-step { display: grid; min-width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 999px; color: rgba(255,255,255,.82); background: transparent; cursor: pointer; }
.viewer-zoom-controls button:hover, .viewer-mobile-step:hover { color: #fff; background: rgba(255,255,255,.1); }
.viewer-zoom-controls button:disabled { color: rgba(255,255,255,.25); cursor: not-allowed; }
.viewer-zoom-controls .viewer-zoom-value { min-width: 58px; padding-inline: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.viewer-gesture-hint { padding-right: 10px; font-size: 11px; white-space: nowrap; }
.viewer-mobile-step { display: none; }

/* 全屏查看器：操作按钮保持圆形，只有底部控制条作为整体容器保留胶囊形。 */
.viewer-actions {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.viewer-action,
.viewer-close,
.viewer-nav,
.viewer-mobile-step,
.viewer-zoom-controls button:not(.viewer-zoom-value) {
  aspect-ratio: 1;
  border-radius: 50%;
}
.viewer-close { width: 44px; height: 44px; }
.viewer-nav { width: 52px; min-width: 52px; height: 52px; }
.inspiration-toast { position: fixed; z-index: 800; right: 24px; bottom: 24px; max-width: min(360px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--card); box-shadow: var(--shadow-md); font-size: 12px; animation: toast-in 240ms var(--ease) both; }
body.modal-open { overflow: hidden; }

@keyframes gallery-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes filter-pop { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes detail-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes viewer-art-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes color-copy-pop { 0% { transform: scale(1); } 48% { transform: scale(1.25); } 100% { transform: scale(1.13); } }

@media (max-width: 1040px) {
  .inspiration-toolbar { align-items: flex-start; }
  .toolbar-left { flex-wrap: wrap; }
  .toolbar-divider { display: none; }
  .inspiration-filters { flex-basis: 100%; }
}

@media (max-width: 820px) {
  .primary-nav { margin-left: 14px; padding-left: 12px; }
  .primary-nav-item { padding-inline: 9px; font-size: 12px; }
  .primary-nav-item::after { right: 9px; left: 9px; }
  .inspiration-search-wrap { padding-bottom: 42px; }
  .inspiration-categories { justify-content: flex-start; margin-bottom: 42px; padding-inline: 4px; }
  .inspiration-toolbar { flex-wrap: wrap; }
  .sort-select { margin-left: auto; }
  .viewer-meta { top: 22px; left: 28px; }
  .viewer-actions { top: 18px; right: 20px; gap: 7px; }
  .viewer-prev { left: 14px; }
  .viewer-next { right: 14px; }
  .inspiration-detail-art { padding: 82px 76px 92px; }
  .viewer-gesture-hint { display: none; }
}

@media (max-width: 660px) {
  .primary-nav { order: 3; width: 100%; margin: 7px 0 -3px; padding: 6px 0 0; justify-content: center; border-top: 1px solid var(--border); border-left: 0; }
  .appbar { flex-wrap: wrap; }
  .appbar-actions { margin-left: auto; }
  .page { padding-top: 36px; }
  .inspiration-search kbd { display: none; }
  .toolbar-left { width: 100%; }
  .subcategory-tabs { max-width: 100%; }
  .inspiration-filters { width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .filter-popover { position: fixed; top: auto; right: 16px; bottom: 16px; left: 16px; width: auto; z-index: 600; }
  .inspiration-gallery { columns: 2 135px; column-gap: 9px; }
  .inspiration-card { margin-bottom: 9px; }
  .card-hover { opacity: 1; transform: none; }
  .inspiration-detail-art { padding: 78px 12px 88px; }
  .viewer-image { max-height: calc(100dvh - 166px); }
  .viewer-meta { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); align-items: flex-start; flex-direction: column; gap: 2px; }
  .viewer-carrier { min-height: 38px; padding: 7px 11px; font-size: 12px; }
  .viewer-position { min-width: 0; padding-left: 11px; }
  .viewer-palette { gap: 0; }
  .viewer-color-swatch { width: 44px; height: 44px; }
  .viewer-color-dot { width: 22px; height: 22px; }
  .viewer-actions { top: max(10px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); gap: 0; padding: 2px; }
  .viewer-action { width: 44px; height: 44px; }
  .viewer-action .ri-icon { width: 18px; height: 18px; }
  .viewer-close { width: 44px; height: 44px; margin-left: 0; font-size: 20px; }
  .viewer-nav { display: none; }
  .viewer-bottom-bar { bottom: max(10px, env(safe-area-inset-bottom)); gap: 2px; padding: 3px 5px; }
  .viewer-mobile-step { display: grid; }
  .viewer-zoom-controls .viewer-zoom-value { min-width: 52px; }
}

@media (max-width: 520px) {
  .viewer-actions #downloadInspiration { display: none; }
  .viewer-palette { display: none; }
}

@media (max-height: 500px) and (min-width: 661px) {
  .inspiration-detail-art { padding: 68px 76px 72px; }
  .viewer-image { max-height: calc(100dvh - 140px); }
  .viewer-bottom-bar { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-color-dot, .viewer-color-swatch::before, .viewer-color-swatch::after { transition: none; }
  .viewer-color-swatch.copied .viewer-color-dot { animation: none; }
}

@media (max-width: 420px) {
  .primary-nav { margin-top: 9px; }
  .inspiration-categories { gap: 22px; }
  .inspiration-filters { gap: 6px; }
  .filter-trigger { padding-inline: 11px; }
}

/* =========================================================
   KUTU DESIGN SYSTEM · v1
   Foundations: warm creative orange, ink neutrals, 4px grid
   ========================================================= */
:root {
  --brand-50: #fff3ec;
  --brand-100: #ffe4d3;
  --brand-200: #ffc5a5;
  --brand-400: #ff9356;
  --brand-500: #ff6a2a;
  --brand-600: #f2530f;
  --brand-700: #c23e08;
  --ink-950: #1d1d1f;
  --ink-900: #242426;
  --ink-700: #3a3a3c;
  --ink-500: #707070;
  --ink-300: #c7c7cc;
  --ink-200: #d2d2d7;
  --ink-100: #e8e8ed;
  --ink-50: #f5f5f7;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 26px;
  --duration-fast: 180ms;
  --duration-base: 240ms;
  --ease-standard: cubic-bezier(.25,.1,.25,1);
  --bg: #f5f5f7;
  --bg-elevated: rgba(255, 255, 255, .8);
  --card: #ffffff;
  --card-soft: #fbfbfd;
  --field: #f5f5f7;
  --text: var(--ink-950);
  --text-soft: var(--ink-700);
  --muted: var(--ink-500);
  --muted-strong: #474747;
  --accent: var(--brand-500);
  --accent-strong: var(--brand-600);
  --accent-soft: var(--brand-50);
  --accent-rgb: 255, 106, 42;
  --border: #d2d2d7;
  --border-strong: #a1a1a6;
  --success: #248a3d;
  --success-soft: #e9f9ee;
  --danger: #d70015;
  --danger-soft: #ffeef0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.04);
  --shadow-md: 0 18px 48px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.05);
  --shadow-accent: 0 0 0 0 rgba(var(--accent-rgb), 0);
  --ease: var(--ease-standard);
}

:root[data-theme="dark"] {
  --bg: #000000;
  --bg-elevated: rgba(22, 22, 23, .86);
  --card: #1c1c1e;
  --card-soft: #242426;
  --field: #2c2c2e;
  --text: #f5f5f7;
  --text-soft: #d2d2d7;
  --muted: #98989d;
  --muted-strong: #aeaeb2;
  --accent: #ff8148;
  --accent-strong: #ff9a66;
  --accent-soft: #331c0d;
  --accent-rgb: 255, 129, 72;
  --border: #38383a;
  --border-strong: #48484a;
  --success: #34c759;
  --success-soft: #0d2e1a;
  --danger: #ff453a;
  --danger-soft: #3a1418;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.2);
  --shadow-md: 0 24px 70px rgba(0,0,0,.44), 0 3px 10px rgba(0,0,0,.24);
}

body {
  letter-spacing: -.005em;
  background: var(--bg);
}

body.studio-upload-active {
  background:
    radial-gradient(circle at 12% 2%, rgba(var(--accent-rgb), .075), transparent 28rem),
    radial-gradient(circle at 88% 28%, rgba(var(--accent-rgb), .045), transparent 30rem),
    radial-gradient(var(--studio-dot) 1px, transparent 1.5px),
    var(--bg);
  background-size: auto, auto, var(--studio-dot-size) var(--studio-dot-size), auto;
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-attachment: fixed, fixed, scroll, fixed;
}

.skip-link { position: fixed; z-index: 99999; top: 10px; left: 12px; padding: 9px 13px; border-radius: var(--radius-xs); color: #fff; background: var(--accent-strong); font-size: 12px; font-weight: 700; text-decoration: none; transform: translateY(-150%); transition: transform var(--duration-fast) var(--ease); }
.skip-link:focus { transform: none; }
.ambient { opacity: .08; }
.ambient-one { background: var(--brand-400); }
.ambient-two { background: var(--brand-200); opacity: .055; }

.appbar {
  min-height: 76px;
  padding-block: 14px;
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--bg-elevated);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.brand { gap: var(--space-3); }
.brand-copy strong { font-size: 15px; font-weight: 790; letter-spacing: -.35px; }
.brand-copy small { margin-top: 5px; font-size: 9px; letter-spacing: .9px; text-transform: none; }
.primary-nav { gap: 5px; margin-left: 30px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--field); }
.primary-nav-item { min-height: 34px; padding: 6px 15px; border-radius: 999px; font-size: 12px; }
.primary-nav-item::after { display: none; }
.primary-nav-item.active { color: var(--text); background: var(--card); box-shadow: 0 2px 9px rgba(18,19,22,.07); }
.appbar-search { position: absolute; top: 50%; left: 50%; z-index: 2; display: none; width: min(440px, 31vw); transform: translate(-50%, -50%); }
.inspiration-active .appbar-search { display: block; animation: appbar-search-in 220ms var(--ease) both; }
.appbar-search .inspiration-search { width: 100%; min-height: 44px; padding-inline: 14px; border-radius: 14px; background: var(--card); box-shadow: 0 4px 18px rgba(18,19,22,.06); }
.appbar-search .inspiration-search:focus-within { transform: none; }
.appbar-search .inspiration-search input { font-size: 12px; }
.top-action { min-height: 40px; border-radius: 999px; box-shadow: none; }
.top-action { background: var(--card); }
.config-action { border-color: var(--ink-950); color: #fff; background: var(--ink-950); box-shadow: 0 8px 18px rgba(18,19,22,.14); }
.config-action:hover:not(:disabled) { border-color: var(--brand-600); color: #fff; background: var(--brand-600); }
[data-theme="dark"] .config-action { border-color: var(--accent); color: #17110d; background: var(--accent); }
.theme-icon { color: inherit; background: transparent; }

.page { width: min(100%, 1320px); padding: 74px 28px 52px; }
.hero { max-width: 980px; margin-bottom: 52px; }
.hero h1 { font-size: clamp(38px, 5vw, 70px); font-weight: 810; line-height: 1.06; letter-spacing: clamp(-3.8px, -.055em, -1.8px); text-wrap: balance; } /* 标题字号（创作台桌面端生效）：clamp(38px 最小, 5vw 随屏宽比例, 70px 最大)；想固定大小可改成固定值如 font-size: 60px */
.hero h1 span { color: transparent; background: linear-gradient(105deg, var(--brand-500), #ffa76b); background-clip: text; -webkit-background-clip: text; }

.workspace { gap: var(--space-6); }
.card { border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.panel { padding: var(--space-8); }
#inputPanel { grid-column: 3 / span 8; gap: var(--space-5); }
#remixCard { grid-column: span 5; }
#remixPromptCard { grid-column: span 7; }
.section-heading { gap: var(--space-3); }
.step-index { width: 40px; height: 40px; flex-basis: 40px; border: 0; border-radius: 13px; color: #fff; background: var(--ink-950); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
[data-theme="dark"] .step-index { color: #21140b; background: var(--accent); }
.card-title { font-size: 17px; font-weight: 760; letter-spacing: -.35px; }
.card-kicker { margin-top: 5px; font-size: 11px; }

.upload { min-height: 318px; border: 1.5px dashed var(--border-strong); border-radius: 16px; background: transparent; box-shadow: none; }
.upload::before { display: none; }
.upload:hover { border-color: var(--accent); background: transparent; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .16), 0 0 0 6px rgba(var(--accent-rgb), .08), 0 14px 36px rgba(var(--accent-rgb), .14); transform: none; }
.drop-icon { width: 58px; height: 58px; margin: 12px auto 0; border: 0; border-radius: 0; color: var(--muted); background: transparent; box-shadow: none; } /* 创作台上传图标：margin 的 12px 是图标与上方距离（调大=图标下移，调小=图标上移），auto 保持水平居中；width/height 控制图标盒子大小 */
.drop-icon .ri-icon { width: 26px; height: 80px; } /* 创作台图标自身尺寸 */
.drop-title { margin-top: 5px; font-size: 16px; font-weight: 760; } /* 创作台：margin-top 的 5px = 图标与"上传图片"文字的间距（调大=间距变大，调小=间距变小），由 10px 缩小一倍 */
.drop-hint { margin-top: 3px; font-size: 11px; } /* 创作台："上传图片"与"拖入、点击或粘贴"提示的间距 */
/* 创作台：鼠标悬停选区（上传区）时，上传图标与"上传图片"文字均变为橙色 */
.upload:hover .drop-icon,
.upload:hover .drop-title { color: var(--accent); }
.preview { background: var(--card-soft); }

.primary { min-height: 48px; padding: 12px 28px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); box-shadow: 0 10px 22px rgba(var(--accent-rgb), .2); font-size: 13px; font-weight: 730; }
.primary:hover:not(:disabled) { transform: translateY(-2px); background: linear-gradient(135deg, var(--brand-400), var(--brand-600)); }
.ghost { min-height: 40px; border-radius: 11px; background: var(--card); }
.ghost:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.saved-box { padding-top: var(--space-3); border-top: 0; }
#inputPanel > .saved-box:has(.saved-row.hidden) { display: none; }
.saved-box > .hint { color: var(--muted); }

.field label { margin-bottom: var(--space-2); font-weight: 680; }
.field input:not([type="radio"]):not([type="checkbox"]):not([type="color"]), .field select, .more-desc, .remix-prompt, .saved-row select {
  min-height: 46px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: var(--field);
}
.field input:focus, .field select:focus, textarea:focus, .saved-row select:focus { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }
.tone-opt, .style-opt { min-height: 38px; padding: 8px 12px; border-radius: var(--radius-sm); }
.tone-opt:has(input:checked), .style-opt:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.advanced-prompt { border-radius: var(--radius-md); }
.status { border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: var(--radius-sm); }
.gen-image { border-radius: var(--radius-md); }

.config-drawer { width: min(480px, 100vw); border-color: var(--border); }
.drawer-head { padding: 30px 30px 22px; }
.drawer-head h2 { font-size: 24px; font-weight: 790; }
.drawer-body { padding-inline: 30px; }
.drawer-section { padding-block: 24px; }
.drawer-section-title { color: var(--accent); letter-spacing: 1.25px; }
.drawer-foot { padding: 16px 30px; }
.drawer-close { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }

.inspiration-view { --gallery-accent: var(--accent); }
.inspiration-search-wrap { display: none; }
.inspiration-search { min-height: 56px; border-radius: 18px; box-shadow: var(--shadow-sm); }
.inspiration-toolbar { align-items: center; margin-bottom: 0; }
.toolbar-left { width: 100%; }
.primary-category-tabs { display: flex; flex: 0 0 auto; align-items: center; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.primary-category-tabs::-webkit-scrollbar { display: none; }
.primary-category-tabs .inspiration-category { padding: 8px 1px 12px; font-size: 13px; white-space: nowrap; }
.primary-category-tabs .inspiration-category::after { right: 8%; left: 8%; bottom: 4px; }
.inspiration-category::after { background: var(--accent); }
.subcategory-tabs { border-radius: 14px; }
.subcategory-tab { border-radius: 10px; }
.inspiration-subcategories { width: fit-content; max-width: 100%; margin-left: auto; }
.subcategory-menu .filter-trigger { color: var(--text); background: var(--card); box-shadow: 0 2px 9px rgba(18,19,22,.07); }
.subcategory-menu .filter-popover { right: 0; left: auto; }
.filter-trigger { min-height: 40px; border-radius: 12px; }
.sort-select select { min-height: 40px; }
.inspiration-gallery { columns: 6 180px; column-gap: 14px; }
.inspiration-card { margin-bottom: 14px; border-radius: 10px; box-shadow: 0 3px 16px rgba(18,19,22,.1); transition: transform var(--duration-base) var(--ease), box-shadow var(--duration-base) ease; }
.inspiration-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(18,19,22,.16); }
.poster-visual { transition: transform 400ms var(--ease); }
.inspiration-card:hover .poster-visual { transform: scale(1.015); }
.card-hover { border-radius: 0 0 10px 10px; }

.foot { margin-top: 44px; }

@keyframes appbar-search-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 4px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@media (max-width: 1180px) {
  #inputPanel { grid-column: 2 / span 10; }
  .appbar-search { width: 250px; }
}

@media (max-width: 820px) {
  .appbar { min-height: 68px; }
  .page { padding-top: 54px; }
  .hero { margin-bottom: 38px; }
  .hero h1 { font-size: clamp(36px, 8vw, 54px); } /* 标题字号（≤820px 平板档） */
  .appbar-search { width: 200px; }
  .appbar-search .inspiration-search kbd { display: none; }
  .primary-category-tabs { max-width: 100%; gap: 20px; }
  .inspiration-subcategories { overflow-x: auto; scrollbar-width: none; }
  .inspiration-subcategories::-webkit-scrollbar { display: none; }
  #inputPanel { grid-column: 1 / -1; }
  .panel { padding: 24px; }
  .upload { min-height: 270px; }
}

@media (max-width: 660px) {
  .primary-nav { margin: 8px 0 -4px; padding: 4px; border: 1px solid var(--border); }
  .inspiration-active .appbar-search { position: static; order: 4; width: 100%; margin-top: 10px; transform: none; animation-name: appbar-search-mobile-in; }
  .appbar-search .inspiration-search { min-height: 46px; }
  .page { padding: 40px 14px 34px; }
  .inspiration-toolbar .toolbar-left { flex-wrap: wrap; gap: 14px; }
  .inspiration-toolbar .toolbar-divider { display: none; }
  .primary-category-tabs { width: 100%; gap: 22px; }
  .inspiration-subcategories { width: 100%; margin: 14px 0 22px; }
  .hero { margin-bottom: 30px; }
  .hero h1 { font-size: clamp(34px, 10vw, 46px); letter-spacing: -2.1px; } /* 标题字号（≤660px 手机档） */
  .panel { padding: 18px; border-radius: 20px; }
  .upload { min-height: 230px; }
  .inspiration-card { border-radius: 8px; }
}

@keyframes appbar-search-mobile-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* =========================================================
   KUTU DESIGN SYSTEM · v2 — UI/UX Pro Max refinement
   ========================================================= */
html { scroll-padding-top: 96px; }
button, [role="button"], a, input[type="file"], summary { touch-action: manipulation; }
button:disabled { cursor: not-allowed; box-shadow: none; transform: none !important; }

.ambient-two { background: #f6c453; opacity: .045; }
.appbar { isolation: isolate; }
.appbar-search .inspiration-search input { font-size: 14px; }
.primary-nav-item,
.top-action,
.theme-toggle,
.filter-trigger,
.inspiration-subcategories .subcategory-tab { min-height: 44px; }
.primary-nav-item:active,
.top-action:active:not(:disabled),
.theme-toggle:active,
.ghost:active:not(:disabled),
.primary:active:not(:disabled) { opacity: .78; }

.is-loading { position: relative; }
.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: kutu-spin 700ms linear infinite;
}
.detect-action.is-loading > i { display: none; }
.generation-action #generateBtn.is-loading,
.generation-pending-button.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.generation-action #generateBtn.is-loading::before,
.generation-pending-button.is-loading::before {
  flex: 0 0 14px;
}
@keyframes kutu-spin { to { transform: rotate(360deg); } }

.card { transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease; }
.card:hover { transform: none; }
.upload:focus-within {
  border-color: var(--accent-strong);
  box-shadow: none;
}
.status[aria-busy="true"] { min-height: 44px; }

.primary-category-tabs .inspiration-category { min-height: 44px; padding-block: 10px 12px; }
.filter-trigger { padding-inline: 14px; }
.filter-option { min-height: 40px; }
.inspiration-gallery { margin-top: 0; }
.inspiration-card:has(.card-open:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.inspiration-card:focus-within .card-hover { opacity: 1; transform: none; }
.card-use { width: 44px; height: 44px; flex-basis: 44px; }
.viewer-action { width: 44px; height: 44px; }
.viewer-action:focus-visible,
.viewer-nav:focus-visible { outline-color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .inspiration-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(18,19,22,.16); }
  .inspiration-card:hover .poster-visual { transform: scale(1.015); }
}

@media (max-width: 820px) {
  .inspiration-subcategories { margin-left: 0; }
}

@media (max-width: 660px) {
  .appbar-search .inspiration-search input,
  .field input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
  .field select,
  .more-desc,
  .remix-prompt,
  .saved-row select { font-size: 16px; }
  .color-custom { grid-template-columns: 1fr; }
  .primary-category-tabs { gap: 18px; }
  .inspiration-subcategories { flex: 1 1 calc(50% - 6px); width: auto; }
  .subcategory-menu .filter-trigger { width: 100%; justify-content: space-between; }
  .inspiration-filters { flex-wrap: wrap; overflow: visible; }
  .filter-menu { flex: 1 1 calc(50% - 6px); }
  .filter-trigger { width: 100%; justify-content: space-between; }
  .viewer-action { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-loading::before,
  .status[aria-busy="true"] .status-spinner { animation-duration: 1.2s !important; }
}

/* Full-viewport application layout — 不影响创建阶段（创建阶段由下方 .page:has 规则覆盖） */
:root { --viewport-gutter: clamp(16px, 1.35vw, 24px); --appbar-inset: 12px; }
.appbar { padding-inline: var(--viewport-gutter); }
.page:not(:has(#studioView[data-stage="create"])) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--viewport-gutter);
}
.workspace { width: 100%; }
#inputPanel { grid-column: 1 / -1; }
.workspace:has(#remixCard:not(.hidden)) #inputPanel,
.workspace:has(#remixCard:not(.hidden)) #remixCard,
.workspace:has(#remixCard:not(.hidden)) #remixPromptCard {
  grid-column: span 4;
}
.workspace:has(#remixCard:not(.hidden)) #remixCard .remix-form {
  grid-template-columns: 1fr;
}
.workspace:has(#remixCard:not(.hidden)) #remixCard .remix-form > .field {
  grid-column: 1;
}
.workspace:has(#remixCard:not(.hidden)) #remixCard .color-custom {
  grid-template-columns: 1fr;
}
.inspiration-gallery {
  width: 100%;
  column-width: 220px;
  column-count: auto;
}
.inspiration-gallery .inspiration-card,
.inspiration-gallery .card-hover,
.inspiration-gallery .poster-visual {
  border-radius: 0;
}

/* Inspiration category layout — compact capsule row */
.inspiration-toolbar .toolbar-left {
  justify-content: flex-start;
  gap: 18px;
}
.primary-category-tabs {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.primary-category-tabs .inspiration-category {
  min-height: 40px;
  padding: 8px 17px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-soft);
  background: transparent;
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
}
.primary-category-tabs .inspiration-category::after {
  display: none;
}
.primary-category-tabs .inspiration-category:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--field);
  transform: none;
}
.primary-category-tabs .inspiration-category.active {
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
  color: #fff;
  background: #2f3033;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
[data-theme="light"] .primary-category-tabs .inspiration-category.active {
  color: var(--text);
  background: #e7e6e2;
}
.inspiration-subcategories {
  width: auto;
  max-width: none;
  margin-left: 0;
}
.inspiration-filters {
  gap: 18px;
}
.inspiration-toolbar .toolbar-divider {
  display: none;
}
.subcategory-menu .filter-trigger,
.inspiration-filters .filter-trigger {
  min-height: 40px;
  padding: 8px 16px;
  border-color: #3f4148;
  border-radius: 999px;
  color: var(--text);
  background: #15161a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
  font-size: 13px;
  font-weight: 760;
}
[data-theme="light"] .subcategory-menu .filter-trigger,
[data-theme="light"] .inspiration-filters .filter-trigger {
  border-color: var(--border-strong);
  background: var(--card);
}
.subcategory-menu .filter-trigger:hover,
.inspiration-filters .filter-trigger:hover,
.filter-menu.open .filter-trigger,
.filter-trigger.selected {
  border-color: color-mix(in srgb, var(--accent) 52%, #3f4148);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 11%, #15161a);
}
[data-theme="light"] .subcategory-menu .filter-trigger:hover,
[data-theme="light"] .inspiration-filters .filter-trigger:hover,
[data-theme="light"] .filter-menu.open .filter-trigger,
[data-theme="light"] .filter-trigger.selected {
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}
.filter-trigger .ri-icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 820px) {
  :root { --viewport-gutter: 14px; }
  .page { padding-inline: var(--viewport-gutter); }
  .workspace:has(#remixCard:not(.hidden)) #inputPanel,
  .workspace:has(#remixCard:not(.hidden)) #remixCard,
  .workspace:has(#remixCard:not(.hidden)) #remixPromptCard {
    grid-column: 1 / -1;
  }
  .inspiration-gallery { column-width: 170px; column-count: auto; }
}

@media (max-width: 660px) {
  :root { --viewport-gutter: 12px; }
  .page { padding-inline: var(--viewport-gutter); }
  .inspiration-gallery { columns: 2; }
  .inspiration-toolbar .toolbar-left,
  .inspiration-filters {
    gap: 10px;
  }
  .primary-category-tabs {
    width: auto;
    gap: 6px;
  }
  .inspiration-subcategories,
  .filter-menu {
    flex: 0 0 auto;
    width: auto;
  }
  .subcategory-menu .filter-trigger,
  .inspiration-filters .filter-trigger,
  .primary-category-tabs .inspiration-category {
    min-height: 38px;
    padding-inline: 13px;
    font-size: 12px;
  }
}

/* Studio default composition + unified dropdown system */
#studioView:not(:has(#remixCard:not(.hidden))) .workspace {
  max-width: min(760px, calc(100vw - (var(--viewport-gutter) * 2)));
  margin-inline: auto;
}

/* ===== 上传区虚线框大小尺寸（暴露可修改）=====
   宽度：改下面 #inputPanel 的 width（680px = 最大宽度，调小变窄、调大变宽）
   高度：黄金比例 aspect-ratio: 1.618 / 1，高度由宽度自动算出（680px 宽 → 约 420px 高）
   小屏档位：文件下方 @media(max-width:820px) 里 260px、@media(max-width:660px) 里 230px（窄屏保底高度） */
#studioView:not(:has(#remixCard:not(.hidden))) #inputPanel {
  grid-column: 1 / -1;
  width: min(100%, 680px); /* 虚线框宽度：680px = 最大宽度 */
  margin-inline: auto;
}

#studioView:not(:has(#remixCard:not(.hidden))) .upload {
  aspect-ratio: 1.618 / 1; /* 黄金比例：宽:高 = 1.618:1，高度由宽度自动算出 */
  min-height: 0; /* 去掉固定最小高度，让黄金比例生效 */
}

.field select,
.saved-row select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted-strong) 50%),
    linear-gradient(135deg, var(--muted-strong) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px !important;
}

.field select:hover,
.saved-row select:hover,
.filter-trigger:hover,
.filter-menu.open .filter-trigger,
.filter-trigger.selected {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-strong));
  background-color: color-mix(in srgb, var(--accent) 6%, var(--field));
}

.field select:focus,
.saved-row select:focus,
.filter-trigger:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12);
  background-color: var(--card);
}

.subcategory-menu .filter-trigger,
.inspiration-filters .filter-trigger,
.field select,
.saved-row select {
  min-height: 44px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 690;
}

.subcategory-menu .filter-trigger,
.inspiration-filters .filter-trigger {
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  background: var(--field);
  box-shadow: none;
}

[data-theme="dark"] .subcategory-menu .filter-trigger,
[data-theme="dark"] .inspiration-filters .filter-trigger {
  background: #15161a;
}

.filter-popover {
  width: max(180px, 100%);
  max-height: min(420px, 52vh);
  overflow-y: auto;
  padding: 8px;
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--border) 86%, transparent);
}

.filter-option {
  min-height: 40px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 620;
}

.filter-option:hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--field));
}

@media (max-width: 820px) {
  #studioView:not(:has(#remixCard:not(.hidden))) .workspace,
  #studioView:not(:has(#remixCard:not(.hidden))) #inputPanel {
    max-width: none;
    width: 100%;
  }
  #studioView:not(:has(#remixCard:not(.hidden))) .upload {
    min-height: 260px; /* 小屏（≤820px）保底最小高度，宽度足够时仍按黄金比例 */
  }
}

@media (max-width: 660px) {
  #studioView:not(:has(#remixCard:not(.hidden))) .upload {
    min-height: 230px; /* 小屏（≤660px）保底最小高度 */
  }
  .subcategory-menu .filter-trigger,
  .inspiration-filters .filter-trigger,
  .field select,
  .saved-row select {
    min-height: 42px;
    border-radius: 13px;
  }
}

/* Attach inspiration filters directly to the top appbar */
body.inspiration-active .page {
  padding-top: 28px;
}

@media (max-width: 820px) {
  body.inspiration-active .page {
    padding-top: 22px;
  }
}

@media (max-width: 660px) {
  body.inspiration-active .page {
    padding-top: 18px;
  }
}

/* Same-style workspace: image-led editing with a contextual side panel. */
#studioView[data-stage="create"] {
  padding-bottom: 0;
}

#studioView[data-stage="create"] .workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 27vw);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  width: 100%;
  max-width: none;
  min-height: calc(100dvh - 164px);
  margin: 0;
}

#studioView[data-stage="create"] #inputPanel {
  grid-column: 1;
  display: flex;
  min-width: 0;
  min-height: calc(100dvh - 164px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: color-mix(in srgb, var(--bg) 96%, var(--card));
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 42%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 42%, transparent) 1px, transparent 1px),
    radial-gradient(circle, color-mix(in srgb, var(--muted) 38%, transparent) 1px, transparent 1.5px);
  background-size: 40px 40px, 40px 40px, 8px 8px;
  background-position: center center;
  box-shadow: none;
}

#studioView[data-stage="create"] #inputPanel:hover {
  border-color: transparent;
  box-shadow: none;
}

.reference-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-bottom: 12px;
  color: var(--text);
}

.reference-toolbar strong {
  font-size: 14px;
  font-weight: 760;
}

.region-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted-strong);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  transition: border-color 170ms ease, color 170ms ease, background-color 170ms ease;
}

.region-toggle:hover,
.region-toggle[aria-pressed="true"] {
  border-color: var(--border);
  color: var(--text);
  background: var(--card);
}

.region-toggle[aria-pressed="true"] { color: var(--accent); }

.region-toggle-dot {
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

.region-toggle[aria-pressed="true"] .region-toggle-dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12);
}

#studioView[data-stage="create"] .upload {
  flex: 1 1 auto;
  min-height: 0;
  height: clamp(420px, calc(100dvh - 218px), 780px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  cursor: default;
}

#studioView[data-stage="create"] .upload:hover,
#studioView[data-stage="create"] .upload.dragging {
  border-color: var(--accent);
  background: transparent;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .18), 0 0 0 8px rgba(var(--accent-rgb), .12), 0 18px 44px rgba(var(--accent-rgb), .18);
  transform: none;
}

#studioView[data-stage="create"] .preview {
  background: transparent;
}

#studioView[data-stage="create"] #inputPanel > .status {
  display: none;
}

.reference-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.reference-hotspot {
  position: absolute;
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.reference-hotspot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
.reference-hotspot.is-background { z-index: 0; }
.reference-hotspot:not(.is-background) { z-index: 1; }

.reference-hotspot span {
  position: absolute;
  top: -25px;
  left: 0;
  display: block;
  padding: 3px 6px;
  border-radius: 5px;
  color: var(--accent);
  background: var(--card);
  box-shadow: 0 3px 12px rgba(18,19,22,.12);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

#studioView.show-editable-regions .reference-hotspot,
.reference-hotspot:hover,
.reference-hotspot:focus-visible,
.reference-hotspot.is-selected {
  opacity: 1;
}

.reference-hotspot:hover,
.reference-hotspot:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  background: rgba(var(--accent-rgb), .06);
}

.reference-hotspot.is-selected {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .08);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}

.reference-hotspot.is-selected span { background: var(--accent); color: #fff; }
.reference-hotspot.is-peeking:not(.is-selected) {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  background: rgba(var(--accent-rgb), .055);
}
.overlap-picker {
  position: absolute;
  z-index: 30;
  display: grid;
  width: 160px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
}
.overlap-picker button {
  min-height: 36px;
  padding: 7px 9px;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 680;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overlap-picker button:hover,
.overlap-picker button:focus-visible { color: var(--accent); background: var(--field); }
.hotspot-title { top: 9%; left: 17%; width: 66%; height: 15%; }
.hotspot-subtitle { top: 23%; left: 22%; width: 56%; height: 10%; }
.hotspot-subject { top: 31%; left: 13%; width: 74%; height: 42%; }
.hotspot-body { top: 72%; left: 15%; width: 70%; height: 15%; }
.hotspot-brand { top: 4%; left: 3%; width: 94%; height: 12%; }
.hotspot-background { inset: 2%; z-index: -1; }

.remove { z-index: 5; }

#studioView[data-stage="create"] #remixCard {
  grid-column: 2;
  position: sticky;
  top: 92px;
  display: flex;
  min-width: 0;
  max-height: calc(100dvh - 184px);
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

#studioView[data-stage="create"] #remixCard:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.context-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.context-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 8px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted-strong);
  background: var(--field);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}
.context-back:hover,
.context-back:focus-visible { color: var(--text); border-color: var(--border-strong); }
.context-back .ri-icon { width: 16px; height: 16px; }

.context-navigator {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--field);
}
.context-navigator > button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--card);
  cursor: pointer;
}
.context-navigator > button:hover:not(:disabled),
.context-navigator > button:focus-visible { color: var(--accent); }
.context-navigator > button:disabled { cursor: default; opacity: .42; }
.context-navigator > span { display: grid; min-width: 0; text-align: center; }
.context-navigator strong { color: var(--text-soft); font-size: 11px; }
.context-navigator small { margin-top: 2px; color: var(--muted); font-size: 10px; }

.context-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 1px;
}

.context-title { margin: 0; font-size: 19px; font-weight: 780; line-height: 1.25; }

.context-close {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  flex: 0 0 36px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color 170ms ease, background-color 170ms ease;
}

.context-close:hover { color: var(--text); background: var(--field); }
.context-close .ri-icon { width: 18px; height: 18px; }

.context-empty { padding: 31px 3px 28px; }
.context-empty p { margin: 0 0 10px; color: var(--text-soft); font-size: 14px; font-weight: 700; }
.context-empty span { color: var(--muted); font-size: 11px; line-height: 1.7; }
.element-inventory { display: grid; gap: 10px; }
.element-inventory-head { display: flex; align-items: center; justify-content: space-between; }
.element-inventory-head strong { color: var(--text-soft); font-size: 12px; }
.element-inventory-head span { font-size: 10px; }
.element-inventory-list {
  display: grid;
  gap: 5px;
  max-height: min(31dvh, 260px);
  padding-right: 3px;
  overflow-y: auto;
}
.element-inventory-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 3px 4px 3px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted-strong);
  transition: color 170ms ease, border-color 170ms ease, background-color 170ms ease;
}
.element-inventory-edit {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.element-inventory-edit > .ri-icon {
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 8px;
  color: var(--muted-strong);
  background: var(--field);
}
.element-inventory-edit > span { display: grid; min-width: 0; }
.element-inventory-item strong,
.element-inventory-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.element-inventory-item strong { color: var(--text-soft); font-size: 12px; }
.element-inventory-item small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.element-inventory-status.is-delete-manual { color: var(--danger, #bd4b4b); }
.element-inventory-status.is-delete-auto { color: var(--warning, #a66a12); }
.element-inventory-status.is-replace { color: var(--accent); }
.element-inventory-status.is-keep { color: var(--muted); }
.element-inventory-actions { display: inline-flex; align-items: center; gap: 2px; }
.element-inventory-action {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.element-inventory-action:hover,
.element-inventory-action:focus-visible { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--field); outline: none; }
.element-inventory-delete:hover,
.element-inventory-delete:focus-visible { color: var(--danger, #bd4b4b); border-color: color-mix(in srgb, var(--danger, #bd4b4b) 38%, var(--border)); background: color-mix(in srgb, var(--danger, #bd4b4b) 8%, var(--card)); }
.element-inventory-action .ri-icon { width: 17px; height: 17px; }
.element-inventory-item:hover,
.element-inventory-item:focus-visible,
.element-inventory-item.is-peeking,
.element-inventory-item.is-selected {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  box-shadow: none;
}
.element-inventory-item:hover strong,
.element-inventory-item:focus-within strong,
.element-inventory-item.is-peeking strong,
.element-inventory-item.is-selected strong { color: var(--text); }
.element-inventory-item:hover .element-inventory-edit > .ri-icon,
.element-inventory-item:focus-within .element-inventory-edit > .ri-icon,
.element-inventory-item.is-peeking .element-inventory-edit > .ri-icon,
.element-inventory-item.is-selected .element-inventory-edit > .ri-icon { color: var(--accent); }
.element-inventory-empty { margin: 0; padding: 12px; border-radius: 9px; color: var(--muted); background: var(--field); font-size: 11px; }

#contextFields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 22px;
}

#contextFields > .field { display: none; min-width: 0; }
#contextFields > .field.is-context-visible { display: block; animation: content-in 220ms var(--ease) both; }
#contextFields .field label { margin-bottom: 8px; font-size: 12px; }
#contextFields .field input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
#contextFields .field select,
#contextFields .more-desc,
#contextFields .element-editor-field textarea { min-height: 46px; border-radius: 10px; }
#contextFields .more-desc { min-height: 92px; }
#contextFields .element-editor-field textarea { width: 100%; min-height: 108px; padding: 10px 12px; border: 1px solid var(--border); color: var(--text); background: var(--field); font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; }
#contextFields .element-editor-field label { display: block; color: var(--text-soft); font-weight: 700; }
.inline-text-editor {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.inline-text-editor .text-editor-item { gap: 7px; }
.inline-text-editor .text-editor-input-row input { font-size: 13px; }
.inline-text-editor .text-editor-empty { min-height: 90px; padding: 16px; border: 1px dashed var(--border); border-radius: 10px; background: var(--field); }
.element-upload-action {
  display: inline-flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--card);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 720;
}
.element-upload-action:hover,
.element-upload-action:focus-visible { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.element-upload-action .ri-icon { width: 17px; height: 17px; }
.element-reference-upload {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 72%, var(--card));
}
.element-reference-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.element-reference-head > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.element-reference-head strong {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.4;
}
.element-reference-head small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.element-reference-head .element-upload-action {
  width: auto;
  min-width: 104px;
  flex: 0 0 auto;
  margin-top: 0;
  background: var(--card);
}
.element-reference-status {
  margin: 0;
  color: var(--success);
  font-size: 11px;
  line-height: 1.5;
}
.element-reference-status:empty { display: none; }
.element-reference-status.error { color: var(--danger); }
.element-reference-preview {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border));
  border-radius: 10px;
  background: var(--card);
}
.element-reference-preview > img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field);
}
.element-reference-preview > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.element-reference-preview strong,
.element-reference-preview small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.element-reference-preview strong { color: var(--text); font-size: 11px; }
.element-reference-preview small { color: var(--success); font-size: 10px; }
.element-reference-remove {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.element-reference-remove:hover,
.element-reference-remove:focus-visible {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.element-reference-remove .ri-icon { width: 17px; height: 17px; }

@media (max-width: 430px) {
  .element-reference-head { align-items: stretch; flex-direction: column; }
  .element-reference-head .element-upload-action { width: 100%; }
}
#contextFields .text-editor-trigger { min-height: 54px; }
#contextFields .color-custom { grid-template-columns: 1fr; }

.context-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 22px;
}

.context-actions .primary { width: 100%; min-height: 46px; }

.studio-flow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-inline: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.studio-flow strong { color: var(--text); font-weight: 760; }
.studio-flow i { width: 18px; height: 1px; background: var(--border-strong); }

#studioView[data-stage="create"] .reference-toolbar { display: flex; }
.reference-toolbar { display: none; }

#studioView[data-stage="create"] #remixPromptCard {
  display: contents;
}

#studioView[data-stage="create"] #remixPromptCard > .card-head,
#studioView[data-stage="create"] #remixPromptCard > .hint,
#studioView[data-stage="create"] #remixPromptCard > .advanced-prompt {
  display: none !important;
}

#studioView[data-stage="create"] #generateResultCard {
  grid-column: 1 / -1;
  width: min(100%, 900px);
  margin: 26px auto 0;
}

.same-style-action-bar {
  position: sticky;
  z-index: 40;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  margin-inline: calc(var(--viewport-gutter) * -1);
  padding: 12px var(--viewport-gutter) max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  box-shadow: 0 -8px 24px rgba(18,19,22,.06);
  backdrop-filter: blur(18px) saturate(130%);
}

.overall-adjust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: border-color 170ms ease, color 170ms ease, background-color 170ms ease;
}

.overall-adjust:hover { border-color: var(--border); color: var(--accent); background: var(--card); }
.overall-adjust[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}
.overall-adjust .ri-icon { width: 17px; height: 17px; }

.style-opt > span { display: grid; gap: 2px; min-width: 0; }
.style-opt strong { color: inherit; font-size: 13px; font-weight: 650; }
.style-opt small { color: var(--muted-strong); font-size: 11px; font-weight: 400; line-height: 1.45; }
.field .style-options { display: grid; grid-template-columns: minmax(0, 1fr); }
.field .style-opt { width: 100%; min-height: 52px; border-radius: 12px; }
.generation-action { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.generation-action .status { max-width: 360px; margin: 0; }
.generation-action #generateBtn {
  position: relative;
  display: inline-flex;
  min-width: 226px;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 22px 0 28px;
  overflow: hidden;
  border: 1px solid #d99b52;
  border-radius: 14px;
  color: #4b301d;
  background: linear-gradient(118deg, #f8dcb5 0%, #f2c886 55%, #e8ae62 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 8px 18px rgba(205, 133, 45, .22);
  font-size: 17px;
  font-weight: 780;
  letter-spacing: .01em;
}
.generation-action #generateBtn::after {
  content: "↗";
  flex: 0 0 auto;
  color: #4b301d;
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-1px);
}
.generation-action #generateBtn:hover:not(:disabled) {
  border-color: #c9873b;
  background: linear-gradient(118deg, #fbe2c0 0%, #f4cc8d 55%, #ebb369 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 11px 24px rgba(205, 133, 45, .3);
  transform: translateY(-2px);
}
.generation-action #generateBtn:active:not(:disabled) { transform: translateY(0) scale(.985); }
.generation-action #generateBtn:disabled { color: rgba(75, 48, 29, .56); opacity: .58; }
.generation-action #generateBtn.is-loading::after { display: none; }

@media (max-width: 980px) and (min-width: 821px) {
  #studioView[data-stage="create"] .workspace { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
  #studioView[data-stage="create"] #remixCard { padding: 20px; }
}

@media (max-width: 820px) {
  .studio-flow { display: none; }

  #studioView[data-stage="create"] .workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
  }

  #studioView[data-stage="create"] #inputPanel {
    grid-column: 1;
    min-height: 0;
  }

  #studioView[data-stage="create"] .upload { height: clamp(340px, 68vh, 620px); }

  #studioView[data-stage="create"] #remixCard {
    grid-column: 1;
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
    padding: 20px;
  }

  .context-empty { padding-block: 22px 10px; }
  #contextFields { margin-top: 16px; }
  .context-actions { padding-top: 18px; }
  #studioView[data-stage="create"] #generateResultCard { grid-column: 1; margin-top: 8px; }
}

@media (max-width: 560px) {
  .reference-toolbar { min-height: 42px; margin-bottom: 8px; }
  .reference-toolbar strong { font-size: 13px; }
  .region-toggle { padding-inline: 7px; font-size: 11px; }
  #studioView[data-stage="create"] .upload { height: min(68vh, 540px); min-height: 320px; }
  .same-style-action-bar { gap: 10px; min-height: 68px; }
  .generation-action { flex: 1; }
  .generation-action #generateBtn { width: 100%; min-width: 0; padding-right: 18px; padding-left: 22px; }
  .generation-action .status {
    display: block;
    max-width: 42vw;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overall-adjust { padding-inline: 8px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .reference-hotspot,
  .region-toggle,
  .context-close,
  .overall-adjust { transition-duration: .01ms; }
}

/* Final composition override for the reference-image editing stage.
   用 body + id + class + :has 组合选择器，specificity 强于下方的 #mainContent 单 id 规则。
   让 #mainContent 创作时与 .appbar 浮岛同宽、同 padding、内缩对齐导航栏 */
body.studio-active:has(#studioView[data-stage="create"]) #mainContent.page {
  width: min(1536px, calc(100% - 24px));
  margin-inline: auto;
  padding-left: clamp(16px, 1.5vw, 24px);   /* 与 .appbar 内 padding 完全对齐 */
  padding-right: clamp(16px, 1.5vw, 24px);
  padding-top: 26px;
  padding-bottom: 72px;
}

#studioView[data-stage="create"] .workspace {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 27%);
  gap: 20px;
  width: min(1600px, 100%);
  min-height: 0;
  margin-inline: auto;
}

#studioView[data-stage="create"] #inputPanel {
  height: min(740px, calc(100dvh - 172px));
  min-height: 540px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

#studioView[data-stage="create"] #inputPanel:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

#studioView[data-stage="create"] .reference-toolbar {
  flex: 0 0 64px;
  min-height: 64px;
  margin: 0;
  padding-inline: 20px;
  border-bottom: 1px solid var(--border);
}

.reference-toolbar strong {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.reference-toolbar strong::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
}

#studioView[data-stage="create"] .upload {
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 46%),
    var(--card-soft);
  box-shadow: none;
}

#studioView[data-stage="create"] .upload::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  background-image: radial-gradient(color-mix(in srgb, var(--border-strong) 56%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}

#studioView[data-stage="create"] .preview,
#studioView[data-stage="create"] .preview img,
#studioView[data-stage="create"] .reference-overlay {
  z-index: 1;
}

#studioView[data-stage="create"] .preview {
  display: flex;
  align-items: center;
  justify-content: center;
}

#studioView[data-stage="create"] .preview img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#studioView[data-stage="create"] #remixCard {
  height: min(646px, calc(100dvh - 230px));
  max-height: none;
  min-height: 420px;
  padding: 22px;
  border-radius: 22px;
  overflow-y: auto;
}

.context-panel-head { padding-bottom: 16px; }
.context-title { font-size: 18px; }
.context-empty { padding-top: 30px; }

.studio-flow { gap: 12px; }
.studio-flow span,
.studio-flow strong { display: inline-flex; align-items: center; gap: 6px; }
.studio-flow b { color: var(--muted); font-size: 10px; font-weight: 760; }
.studio-flow strong b { color: var(--accent); }

.same-style-action-bar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: max(var(--viewport-gutter), calc((100vw - 1600px) / 2));
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: 0 -8px 24px rgba(18,19,22,.06);
  backdrop-filter: blur(18px) saturate(130%);
}

.selection-status {
  margin-right: auto;
  color: var(--muted);
  font-size: 11px;
}

.selection-status::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 10px 1px 0;
  border-radius: 50%;
  background: var(--muted);
}

.same-style-action-bar .overall-adjust { margin-left: auto; }

@media (max-width: 820px) {
  .page:has(#studioView[data-stage="create"]) { padding-top: 18px; padding-bottom: 68px; }
  #studioView[data-stage="create"] .workspace { width: 100%; }
  #studioView[data-stage="create"] #inputPanel,
  #studioView[data-stage="create"] #remixCard { height: auto; min-height: 0; }
  #studioView[data-stage="create"] #inputPanel { min-height: 420px; }
  #studioView[data-stage="create"] .upload { min-height: 356px; }
  .same-style-action-bar {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-inline: var(--viewport-gutter);
  }
}

@media (max-width: 560px) {
  #studioView[data-stage="create"] #inputPanel { border-radius: 16px; }
  #studioView[data-stage="create"] #inputPanel { min-height: 340px; }
  #studioView[data-stage="create"] .upload { min-height: 300px; }
  #studioView[data-stage="create"] #remixCard { border-radius: 16px; }
  .same-style-action-bar { padding-inline: var(--viewport-gutter); }
  .selection-status { display: none; }
  .same-style-action-bar .overall-adjust { margin-left: 0; }
}

/* Canonical dropdown component — shared by studio, settings and inspiration */
:root {
  --dropdown-height: 44px;
  --dropdown-radius: 14px;
  --dropdown-padding-x: 14px;
  --dropdown-font-size: 13px;
}

.field select,
.saved-row select,
.sort-select select,
.subcategory-menu .filter-trigger,
.inspiration-filters .filter-trigger {
  min-height: var(--dropdown-height);
  border: 1px solid var(--border-strong);
  border-radius: var(--dropdown-radius);
  color: var(--text);
  background-color: var(--field);
  box-shadow: none;
  font-size: var(--dropdown-font-size);
  font-weight: 690;
  line-height: 1.2;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.field select,
.saved-row select,
.sort-select select {
  width: 100%;
  padding: 10px 40px 10px var(--dropdown-padding-x) !important;
  appearance: none;
  color-scheme: light;
  background-image: none;
}

.select-control {
  position: relative;
  width: 100%;
}

.select-control > .ri-icon,
.sort-select > .ri-icon {
  position: absolute;
  top: 50%;
  right: 13px;
  z-index: 1;
  color: var(--muted-strong);
  width: 16px;
  height: 16px;
  pointer-events: none;
  transform: translateY(-50%);
}

.saved-select-control {
  flex: 1 1 auto;
  min-width: 0;
}

[data-theme="dark"] .field select,
[data-theme="dark"] .saved-row select,
[data-theme="dark"] .sort-select select {
  color-scheme: dark;
}

.subcategory-menu .filter-trigger,
.inspiration-filters .filter-trigger {
  gap: 9px;
  justify-content: space-between;
  padding: 10px var(--dropdown-padding-x);
}

.subcategory-menu .filter-trigger .ri-icon,
.inspiration-filters .filter-trigger .ri-icon {
  flex: 0 0 auto;
  color: var(--muted-strong);
  width: 16px;
  height: 16px;
}

.field select:hover,
.saved-row select:hover,
.sort-select select:hover,
.subcategory-menu .filter-trigger:hover,
.inspiration-filters .filter-trigger:hover,
.filter-menu.open .filter-trigger,
.filter-trigger.selected {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  color: var(--text);
  background-color: color-mix(in srgb, var(--accent) 6%, var(--field));
}

.field select:focus-visible,
.saved-row select:focus-visible,
.sort-select select:focus-visible,
.subcategory-menu .filter-trigger:focus-visible,
.inspiration-filters .filter-trigger:focus-visible {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12);
  background-color: var(--card);
}

.field select:disabled,
.saved-row select:disabled,
.sort-select select:disabled,
.filter-trigger:disabled {
  opacity: .48;
  cursor: not-allowed;
}

.filter-popover {
  top: calc(100% + 8px);
  width: max(180px, 100%);
  max-height: min(420px, 52vh);
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--dropdown-radius);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}

.filter-option {
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--text-soft);
  font-size: var(--dropdown-font-size);
  font-weight: 620;
  line-height: 1.2;
  transition: color 160ms ease, background-color 160ms ease;
}

.filter-option:hover,
.filter-option:focus-visible {
  color: var(--text);
  outline: 0;
  background: color-mix(in srgb, var(--accent) 8%, var(--field));
}

.filter-option.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.sort-select {
  min-width: 150px;
}

.sort-select > .ri-icon { display: block; }

@media (max-width: 660px) {
  :root {
    --dropdown-height: 44px;
    --dropdown-radius: 14px;
  }
}

/* Inspiration gallery column system */
.inspiration-gallery {
  column-width: auto;
  column-count: 7;
}

@media (max-width: 1180px) {
  .inspiration-gallery {
    column-width: auto;
    column-count: 5;
  }
}

@media (max-width: 820px) {
  .inspiration-gallery {
    column-width: auto;
    column-count: 3;
  }
}

@media (max-width: 660px) {
  .inspiration-gallery {
    column-width: auto;
    column-count: 2;
  }
}

/* Synchronized appbar + inspiration filter motion */
:root {
  --appbar-stack-height: 76px;
  --nav-stack-duration: 220ms;
}

.appbar {
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--nav-stack-duration) var(--ease),
    box-shadow var(--nav-stack-duration) ease,
    border-color var(--nav-stack-duration) ease;
  will-change: transform;
}

.inspiration-active.appbar-hidden .appbar {
  transform: translate3d(0, calc(-100% - 24px), 0);
  pointer-events: none;
  visibility: hidden;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Hide the toolbar divider when there are no subcategories to show */
#inspirationSubcategories.hidden + .toolbar-divider { display: none; }

/* =========================================================
   创作台：点状网格背景（主题自适应，覆盖顶部留白）
   ========================================================= */
:root {
  --studio-dot: color-mix(in srgb, var(--text) 8%, transparent);
  --studio-dot-size: 24px;
}

/* 点状网格背景已上移到 body.studio-upload-active（铺满整个视口与文档，
   覆盖 .page 居中后两侧留白与上下留白）。.page 不再单独设置网格背景，
   保留 .studio-upload-active 时 body 的纯色/渐变/网格整体承载。 */

/* =========================================================
   前端用户菜单：头像 / 积分 / 账号管理 / 退出登录
   ========================================================= */
.account-wrap,
.points-wrap { position: relative; display: inline-flex; }
.account-wrap.is-open::after {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 12px;
  content: '';
}

.points-wrap.is-open::after {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 14px;
  content: '';
}

/* Keep the balance control visually distinct from the account avatar. */
.points-wrap:not(.hidden) + .account-wrap { margin-left: 8px; }

.points-trigger {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms var(--ease);
}
.points-trigger .ri-icon { width: 16px; height: 16px; color: currentColor; }
.points-trigger b { color: #171717; line-height: 1; font-weight: 400; letter-spacing: 0; }
[data-theme="dark"] .points-trigger b { color: #fff; }
.points-trigger:hover,
.points-trigger[aria-expanded="true"] { color: var(--accent); border-color: transparent; background: transparent; transform: translateY(-1px); }
.points-trigger:hover b,
.points-trigger[aria-expanded="true"] b { color: var(--accent); }
.points-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.points-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: -8px;
  z-index: 310;
  width: min(336px, calc(100vw - 24px));
  padding: 22px 22px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent));
  border-radius: 18px;
  color: var(--text);
  background:
    radial-gradient(circle at 82% 22%, rgba(var(--accent-rgb), .08), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 88%, var(--accent-soft)), var(--card));
  box-shadow: 0 28px 72px rgba(18, 19, 22, .17), 0 3px 12px rgba(18, 19, 22, .06);
  transform-origin: top right;
  animation: account-menu-in 190ms var(--ease) both;
}
.points-popover-watermark {
  position: absolute;
  top: 52px;
  right: 12px;
  z-index: 0;
  width: 108px;
  height: 108px;
  color: var(--accent);
  fill: currentColor;
  opacity: .08;
  pointer-events: none;
}
.points-popover-watermark * { fill: currentColor; }
.points-popover-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.points-popover-head h2 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 760; letter-spacing: 0; }
.points-help {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.points-help:hover { color: var(--accent); background: var(--accent-soft); }
.points-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.points-popover-balance {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--accent);
}
.points-popover-balance .ri-icon { width: 22px; height: 22px; }
.points-popover-balance strong { font-size: 30px; line-height: 1.05; font-weight: 600; letter-spacing: 0; }
.points-estimate {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 17px;
  margin: 4px 0 13px 30px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 560;
}
.points-balance-split { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.points-balance-split > span { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb,var(--card) 82%,transparent); }
.points-balance-split small { color: var(--muted); font-size: 10px; }
.points-balance-split strong { overflow: hidden; color: var(--text); font-size: 13px; line-height: 1.35; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.points-expiry-notice { position: relative; z-index: 1; margin: 0 0 12px; padding: 9px 11px; border-left: 3px solid #d97706; border-radius: 0 7px 7px 0; color: var(--text-soft); background: color-mix(in srgb,#f59e0b 10%,var(--field)); font-size: 11px; line-height: 1.45; }
.points-recharge-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 980px;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.16px;
  box-shadow: none;
  transition: background-color var(--duration-fast) var(--ease), transform 120ms var(--ease);
}
.points-recharge-button:hover { transform: none; filter: none; background: var(--accent-strong); }
.points-recharge-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.recharge-tier > button.points-recharge-button { margin-top: auto; }
.points-ledger-button {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 2px 0;
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 640;
}
.points-ledger-button:hover { color: var(--accent); }
.points-ledger-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.points-ledger-button > .ri-icon { width: 18px; height: 18px; margin-left: auto; color: var(--muted); }
.points-ledger-icon { display: grid; width: 24px; height: 24px; place-items: center; color: var(--text-soft); }
.points-ledger-icon .ri-icon { width: 18px; height: 18px; }
.points-popover-status {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--muted-strong);
  background: var(--field);
  font-size: 11px;
  line-height: 1.45;
}

#accountBtn.account-action {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  justify-content: center;
  gap: 0;
  padding: 3px;
  border-color: transparent;
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--field));
  box-shadow: none;
}
#accountBtn.account-action > #accountLabel,
#accountBtn.account-action .account-caret { display: none !important; }
#accountBtn.account-action:hover:not(:disabled),
#accountBtn.account-action[aria-expanded="true"] {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 22%, var(--field));
  border-color: transparent;
}
#accountBtn.account-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: none; }

.account-avatar,
.account-menu-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--field));
  background-position: center;
  background-size: cover;
  font-weight: 800;
}
.account-avatar { width: 36px; height: 36px; aspect-ratio: 1; border-radius: 50%; font-size: 13px; }
.account-menu-avatar { width: 54px; height: 54px; font-size: 18px; }
.account-avatar.has-image,
.account-menu-avatar.has-image { color: transparent; }

.account-caret { width: 16px; height: 16px; color: var(--muted); transition: transform 180ms var(--ease); }
#accountBtn[aria-expanded="true"] .account-caret { transform: rotate(180deg); }

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 300;
  width: min(348px, calc(100vw - 24px));
  max-height: calc(100vh - 88px);
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text);
  background: var(--card);
  box-shadow: 0 28px 72px rgba(18, 19, 22, .18), 0 3px 12px rgba(18, 19, 22, .06);
  backdrop-filter: blur(20px) saturate(140%);
  transform-origin: top right;
  animation: account-menu-in 190ms var(--ease) both;
}
@keyframes account-menu-in { from { opacity: 0; transform: translateY(-7px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.account-menu-head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 13px; }
.account-menu-identity { min-width: 0; flex: 1; }
.account-menu-name-line { display: flex; min-width: 0; align-items: center; gap: 8px; }
.account-menu-name-line strong { min-width: 0; overflow: hidden; font-size: 16px; font-weight: 760; letter-spacing: -.2px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-name-line em { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 11px; font-style: normal; font-weight: 720; }
.account-menu-email { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.account-menu-points {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  width: 100%;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 14px;
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 66%, var(--field)), var(--field));
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.account-menu-points:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); box-shadow: 0 8px 24px rgba(var(--accent-rgb), .09); }
.account-menu-points:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .13); }
.account-menu-points-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.account-menu-points-icon .ri-icon { width: 20px; height: 20px; }
.account-menu-points-copy { display: grid; min-width: 0; justify-items: start; gap: 0; }
.account-menu-points-copy > span { color: var(--muted); font-size: 12px; font-weight: 620; }
.account-menu-points-copy strong { font-size: 22px; line-height: 1.18; font-weight: 790; letter-spacing: -.6px; }
.account-menu-points-action { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; color: var(--accent); font-size: 12px; font-weight: 720; }
.account-menu-points-action .ri-icon { width: 16px; height: 16px; }

.account-menu-group { display: grid; gap: 2px; }
.account-menu-item {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color 150ms ease, background-color 150ms ease;
}
.account-menu-item:hover { color: var(--text); background: var(--field); }
.account-menu-item:focus-visible { outline: none; background: var(--field); box-shadow: inset 0 0 0 2px var(--accent); }
.account-menu-item-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; color: var(--text-soft); background: var(--field); transition: color 150ms ease, background-color 150ms ease; }
.account-menu-item:hover .account-menu-item-icon { color: var(--accent); background: var(--accent-soft); }
.account-menu-item-icon .ri-icon { width: 18px; height: 18px; }
.account-menu-item-copy { display: grid; min-width: 0; flex: 1; }
.account-menu-item-copy strong { font-size: 13px; font-weight: 690; }
.account-menu-arrow { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); }
.account-menu-preview { width: 34px; height: 34px; flex: 0 0 34px; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--field) center/cover no-repeat; }
.account-menu-count { display: inline-grid; min-width: 22px; height: 22px; flex: 0 0 auto; place-items: center; padding: 0 6px; border-radius: 999px; color: var(--on-accent, #fff); background: var(--accent); font-size: 9px; font-weight: 760; }
.account-menu-count.neutral { color: var(--muted); background: var(--field); }
.account-menu-compact { min-height: 48px; }
.account-menu-compact .account-menu-item-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
.account-menu-compact .account-menu-item-icon .ri-icon { width: 16px; height: 16px; }
.account-menu-tag { flex: 0 0 auto; margin-left: auto; padding: 4px 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 9px; font-style: normal; font-weight: 720; }
.account-menu-item:disabled { opacity: .55; cursor: wait; }
.account-menu-status { margin: 8px 9px 2px; padding: 8px 10px; border-radius: 9px; color: var(--danger); background: var(--danger-soft); font-size: 10px; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .account-menu,
  .points-popover { animation: none; }
  .account-caret,
  .account-menu-item-icon,
  .points-trigger { transition: none; }
}

@media (max-width: 980px) {
  #accountBtn.account-action > .account-avatar { position: static; display: grid; width: 34px; height: 34px; font-size: 12px; clip: auto; }
  .points-trigger { padding-inline: 8px; font-size: 12px; }
}
@media (max-width: 560px) {
  .account-menu { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: 82dvh; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; transform-origin: bottom center; animation-name: account-sheet-in; }
  @keyframes account-sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  .account-menu::before { display: block; width: 36px; height: 4px; margin: -5px auto 8px; border-radius: 99px; background: var(--border-strong, var(--border)); content: ''; }
  .points-popover { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: 100%; padding: 20px 20px calc(14px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; transform-origin: bottom center; animation-name: account-sheet-in; }
  .points-popover::before { display: block; width: 36px; height: 4px; margin: -14px auto 18px; border-radius: 99px; background: var(--border-strong, var(--border)); content: ''; }
}

/* =========================================================
   账号管理页
   ========================================================= */
.account-page-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.account-page-title h1 { margin: 0; font-size: 24px; letter-spacing: -.04em; }
.account-page-title p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.account-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
.account-profile-card, .favorites-card, .records-card { padding: 22px 24px; }
.account-page-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0 6px;
}
.account-page-identity .account-menu-avatar { width: 48px; height: 48px; font-size: 15px; }
.account-page-identity strong { display: block; font-size: 16px; }
.account-page-identity em {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}
.account-form input[readonly] { color: var(--muted); background: var(--field); }

.favorites-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.fav-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.fav-card:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); background: var(--card); box-shadow: var(--shadow-sm); }
.fav-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }
.fav-card > .ri-icon { width: 17px; height: 17px; color: var(--muted); }
.fav-cover {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}
.fav-cover img { width: 100%; height: 100%; object-fit: cover; }
.fav-meta { min-width: 0; }
.fav-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.fav-meta small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }

.records-list { display: grid; gap: 10px; margin-top: 16px; }
.analysis-record-row { width: 100%; text-align: left; }
.analysis-record-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; margin-left: auto; }
.analysis-record-delete {
  min-width: 68px;
  justify-content: center;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 20%, var(--border));
  background: var(--card);
}
.analysis-record-delete:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.analysis-record-delete .ri-icon { width: 15px; height: 15px; }

.analysis-delete-modal { position: fixed; inset: 0; z-index: 1180; display: grid; place-items: center; padding: 20px; }
.analysis-delete-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(8,9,12,.6); cursor: default; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.analysis-delete-card { position: relative; width: min(420px,100%); padding: 28px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); box-shadow: 0 28px 90px rgba(0,0,0,.3); animation: panel-in 220ms var(--ease) both; }
.analysis-delete-icon { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 18px; border-radius: 14px; color: var(--danger); background: var(--danger-soft); }
.analysis-delete-icon .ri-icon { width: 21px; height: 21px; }
.analysis-delete-card h2 { margin: 0; font-size: 19px; line-height: 1.3; }
.analysis-delete-card > p:not(.analysis-delete-message) { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.analysis-delete-message { min-height: 20px; margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.analysis-delete-message.error { color: var(--danger); }
.analysis-delete-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.analysis-delete-actions button { min-height: 44px; }
.analysis-delete-confirm { border: 1px solid var(--danger); border-radius: 11px; color: #fff; background: var(--danger); cursor: pointer; font: inherit; font-size: 13px; font-weight: 720; transition: opacity 150ms ease, box-shadow 150ms ease; }
.analysis-delete-confirm:hover:not(:disabled) { opacity: .88; }
.analysis-delete-confirm:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); }
.analysis-delete-confirm:disabled { opacity: .56; cursor: wait; }
.record-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  text-align: left;
}
button.record-row { cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
button.record-row:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); background: var(--card); box-shadow: var(--shadow-sm); }
button.record-row:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }
.record-thumb {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}
.record-thumb img { width: 100%; height: 100%; object-fit: cover; }
.record-meta { min-width: 0; flex: 1; }
.record-meta strong { display: block; font-size: 12px; }
.record-meta small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.record-status {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
}
.record-status.ok { color: var(--success); background: var(--success-soft); }
.record-status.warn { color: var(--muted-strong); background: var(--field); }
.record-status.bad { color: var(--danger); background: var(--danger-soft); }
.record-status.neutral { color: var(--muted); background: var(--field); }
.record-points { flex: 0 0 auto; color: var(--accent); font-size: 12px; font-weight: 750; }
.account-empty {
  margin-top: 16px;
  padding: 34px 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  background: var(--field);
  text-align: center;
  font-size: 12px;
}

@media (max-width: 900px) {
  .account-page-grid { grid-template-columns: 1fr; }
  .favorites-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .account-page-head { flex-wrap: wrap; gap: 12px; }
  .record-row { flex-wrap: wrap; }
  .record-points { margin-left: 66px; }
  .analysis-record-actions { width: 100%; margin-left: 0; padding-left: 66px; }
  .record-row .analysis-record-actions .task-row-action { width: auto; flex: 1 1 0; justify-content: center; }
  .analysis-delete-card { padding: 22px; border-radius: 16px; }
}

/* 居中工具页：任务、账户与帮助共享同一视觉框架 */
.account-page-single { max-width: 760px; }
.utility-view {
  width: min(840px, 100%);
  margin-inline: auto;
}
.utility-page-head {
  position: relative;
  display: grid;
  min-height: 76px;
  place-items: center;
  margin-bottom: 22px;
}
.utility-page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: left;
}
.utility-page-icon,
.utility-section-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
}
.utility-page-icon { width: 48px; height: 48px; border-radius: 15px; }
.utility-page-icon .ri-icon { width: 23px; height: 23px; }
.utility-section-icon { width: 38px; height: 38px; border-radius: 11px; }
.utility-section-icon .ri-icon { width: 19px; height: 19px; }
.utility-card {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(31, 28, 54, .07), 0 2px 8px rgba(31, 28, 54, .03);
}
.utility-card-heading { align-items: center; margin-bottom: 20px; }
.utility-card-heading .card-title { font-size: 17px; }
.utility-card-heading .card-kicker { margin-top: 3px; font-size: 12px; }

#accountView .utility-card { width: min(720px, 100%); }
#accountView .account-page-identity {
  gap: 13px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 62%, var(--field)), var(--field));
}
#accountView .account-page-identity .account-menu-avatar { width: 52px; height: 52px; }
#accountView .account-page-identity strong { font-size: 15px; }
#accountView .account-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px 16px;
  padding: 22px 0 0;
}
.account-field-label { display: inline-flex; align-items: center; gap: 7px; }
.account-field-label .ri-icon { width: 15px; height: 15px; color: var(--muted); }
#accountView .account-form input { border-radius: 11px; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
#accountView .account-form .account-message,
#accountView .account-form .account-save-button { grid-column: 1 / -1; }
#accountView .account-form .account-save-button {
  display: inline-flex;
  width: auto;
  min-width: 148px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  gap: 8px;
  padding-inline: 20px;
}
.account-save-button .ri-icon { width: 17px; height: 17px; }
#rechargeView .account-recharge-card { margin-top: 0; }

/* 二级 + 三级分类下拉并排 */
#inspirationSubcategories { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.dim-menu .filter-trigger { min-height: 38px; }

/* 灵感卡片：只展示图片（去掉装饰图形 + 悬停浮层） */
.poster-visual::before,
.poster-visual::after { display: none !important; }
.inspiration-card .card-open { display: none !important; }
.inspiration-card:hover .card-cat { display: none; }
.poster-empty { display: block; width: 100%; height: 100%; background: var(--field); }
.card-cat {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  max-width: calc(100% - 20px);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(5, 5, 8, .55);
  color: #fff;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

/* 灵感查看器：详情面板（DNA / 系统提示词 / 生图提示词） */
.inspiration-detail-info {
  position: absolute;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  z-index: 4;
  width: min(680px, calc(100vw - 40px));
  max-height: 44vh;
  overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(18, 19, 22, .92);
  color: #f4f4f2;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
  pointer-events: auto;
  animation: fade-in 180ms ease both;
}
@media (max-width: 660px) {
  .inspiration-detail-info { bottom: 76px; width: calc(100vw - 24px); max-height: 52vh; }
}
.detail-block + .detail-block { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.detail-block h4 { margin: 0 0 8px; font-size: 12px; color: var(--accent); }
.detail-pre { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); font: 11px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.dna-item { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.12); font-size: 11px; }
.dna-item:last-child { border-bottom: 0; }
.dna-item small { flex: 0 0 88px; color: var(--muted); }
.detail-empty, .detail-loading { padding: 14px 0; color: var(--muted); font-size: 11px; text-align: center; }

/* 积分充值 */
#rechargeView {
  width: min(1400px,100%);
  min-height: calc(100dvh - 72px);
  height: auto;
  gap: 0;
  overflow: visible;
  padding-bottom: 72px;
}
#rechargeView .account-page-single { width: 100%; max-width: none; }
.recharge-page-head { min-height: auto; margin: 8px 0 52px; }
.recharge-page-head .account-page-title h1 { font-size: 38px; line-height: 1.2; font-weight: 680; letter-spacing: 0; }
.credit-overview { position: relative; display: grid; grid-template-columns: minmax(220px,.75fr) minmax(360px,1.25fr); gap: 28px; align-items: center; min-height: 154px; padding: 26px 30px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--accent) 24%,var(--border)); border-radius: 8px; color: #fff; background: #202126; box-shadow: 0 12px 34px rgba(18,19,22,.12); }
.credit-overview::after { position: absolute; right: -54px; bottom: -94px; width: 260px; height: 180px; border: 44px solid rgba(var(--accent-rgb),.26); border-radius: 50%; content: ''; pointer-events: none; }
.credit-overview-main,.credit-overview-split,.credit-expiry { position: relative; z-index: 1; }
.credit-overview-main { display: grid; gap: 4px; }
.credit-overview-main > small { color: #bbbcc2; font-size: 12px; font-weight: 650; }
.credit-overview-main > strong { margin-top: 2px; color: #fff; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.credit-overview-main > span { margin-top: 6px; color: #dedfe3; font-size: 12px; }
.credit-overview-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(255,255,255,.12); }
.credit-overview-split > span { display: grid; gap: 8px; padding: 18px 20px; background: rgba(255,255,255,.06); }
.credit-overview-split small { color: #bfc0c6; font-size: 11px; }
.credit-overview-split strong { color: #fff; font-size: 22px; font-variant-numeric: tabular-nums; }
.credit-expiry { grid-column: 1 / -1; margin: -12px 0 0; color: #bfc0c6; font-size: 11px; }
.account-recharge-card { margin-top: 0; padding: 0; }
.recharge-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.recharge-section-head h2 { margin: 0; font-size: 19px; letter-spacing: 0; }
.recharge-section-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.recharge-section-head > span { flex: 0 0 auto; padding: 5px 8px; border: 1px solid color-mix(in srgb,#16a34a 28%,var(--border)); border-radius: 6px; color: #15803d; background: color-mix(in srgb,#16a34a 8%,var(--card)); font-size: 10px; font-weight: 700; }
.recharge-tier-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 14px; max-width: 1104px; margin: 0 auto; }
.recharge-tier { position: relative; display: flex; min-width: 0; min-height: 380px; flex-direction: column; align-items: stretch; padding: 24px 20px 20px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--card); box-shadow: 0 3px 12px rgba(18,19,22,.05); transition: border-color 180ms ease,box-shadow 180ms ease,transform 180ms var(--ease); }
.recharge-tier:hover { border-color: color-mix(in srgb,var(--accent) 62%,var(--border)); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18,19,22,.09); }
.recharge-tier.featured { border: 2px solid var(--accent); padding: 23px 19px 19px; box-shadow: 0 10px 26px rgba(var(--accent-rgb),.12); }
.recharge-tier-badge { position: absolute; top: 0; right: 14px; padding: 7px 11px; border-radius: 0 0 7px 7px; color: #fff; background: var(--accent); font-size: 10px; font-weight: 750; }
.recharge-tier-name { min-height: 34px; padding-right: 4px; color: var(--muted-strong); font-size: 13px; font-weight: 650; }
.recharge-tier.featured .recharge-tier-name { padding-right: 68px; }
.recharge-tier-price { display: flex; align-items: flex-start; gap: 3px; margin-top: 9px; color: var(--text); }
.recharge-tier-price small { margin-top: 7px; font-size: 15px; font-weight: 750; }
.recharge-tier-price strong { overflow-wrap: anywhere; font-size: 36px; line-height: 1; letter-spacing: 0; }
.recharge-tier-creations { display: grid; gap: 4px; margin: 25px 0 0; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.recharge-tier-creations strong { color: var(--accent); font-size: 20px; }
.recharge-tier-creations span { color: var(--muted); font-size: 11px; }
.recharge-tier-points { display: grid; gap: 6px; margin-top: 18px; }
.recharge-tier-points span { color: var(--text); font-size: 13px; font-weight: 750; }
.recharge-tier-points small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.recharge-tier > button:not(.points-recharge-button) { width: 100%; min-height: 48px; margin-top: auto; border: 1px solid color-mix(in srgb,var(--accent) 52%,var(--border)); border-radius: 8px; color: var(--accent); background: var(--card); cursor: pointer; font: inherit; font-size: 12px; font-weight: 760; transition: color 160ms ease,background-color 160ms ease,border-color 160ms ease; }
.recharge-tier.featured > button:not(.points-recharge-button),.recharge-tier > button:not(.points-recharge-button):hover { border-color: var(--accent); color: #fff; background: var(--accent); }
.recharge-tier > button:not(.points-recharge-button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.recharge-tier > button:disabled { opacity: .62; cursor: wait; }
.credit-rule-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 18px; padding: 13px 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 10px; }
.credit-rule-strip span { display: inline-flex; align-items: center; gap: 6px; }
.credit-rule-strip .ri-icon { width: 14px; height: 14px; color: var(--accent); }
.recharge-record-actions { position: absolute; right: 0; display: flex; gap: 8px; }
.recharge-record-button { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 13px; border-radius: 9px; font-size: 12px; font-weight: 700; }
.recharge-record-button .ri-icon { width: 16px; height: 16px; }
.recharge-records-page-head { min-height: auto; margin: 8px 0 28px; }
.recharge-records-page-head .utility-page-title { width: 100%; justify-content: flex-start; gap: 18px; }
.recharge-records-page-head .account-page-title > div { min-width: 0; }
.recharge-records-back { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 38px; padding-inline: 12px; }
.recharge-records-back .ri-icon { width: 16px; height: 16px; }
.recharge-records-page-card { width: min(840px, 100%); margin-inline: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-sm); }
.recharge-records-page-card .points-ledger-list { padding: 8px 24px 18px; }
@media (max-width: 560px) { .recharge-record-actions { position: static; width: 100%; justify-content: center; } .recharge-record-button { flex: 1; justify-content: center; } .recharge-records-page-head .utility-page-title { align-items: flex-start; flex-direction: column; gap: 14px; } .recharge-records-page-card .points-ledger-list { padding-inline: 16px; } }
.recharge-loading { grid-column: 1 / -1; padding: 24px 0; color: var(--muted); font-size: 12px; text-align: center; }
.ledger-credit-type { display: inline-flex; margin-left: 7px; padding: 2px 5px; border-radius: 4px; color: var(--muted); background: var(--field); font-size: 9px; font-style: normal; font-weight: 650; vertical-align: middle; }
@media (max-width: 760px) { .credit-overview { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; } .credit-overview-main > strong { font-size: 36px; } .recharge-tier-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px) { .recharge-page-head { margin: 0 0 32px; } .recharge-page-head .account-page-title h1 { font-size: 28px; } .recharge-tier-list { grid-template-columns: 1fr; } .recharge-tier { min-height: 330px; } }

/* Artwork library: keep DOM order visible from left to right, then row by row. */
.inspiration-gallery {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  columns: initial;
}
.inspiration-gallery .inspiration-card { display: block; margin: 0; }
@media (max-width: 1799px) { .inspiration-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1499px) { .inspiration-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .inspiration-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 959px) { .inspiration-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 659px) { .inspiration-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } }
@media (max-width: 439px) { .inspiration-gallery { grid-template-columns: minmax(0, 1fr); } }

/* 积分充值菜单入口角标 */
.account-menu-tag { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; }

/* 积分明细 */
.account-ledger-card { margin-top: 18px; }
.points-ledger-list { padding: 8px 24px 18px; }
.ledger-row { display: flex; align-items: center; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.ledger-row:last-child { border-bottom: 0; }
.ledger-main { flex: 1 1 auto; min-width: 0; }
.ledger-main strong { display: block; font-size: 13px; }
.ledger-main small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-amount { flex: 0 0 auto; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.ledger-amount.in { color: var(--green, #16a34a); }
.ledger-amount.out { color: var(--danger, #dc2626); }
.ledger-side { flex: 0 0 auto; text-align: right; }
.ledger-side span { display: block; font-size: 11px; color: var(--muted); }
.ledger-side time { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); opacity: .8; }
@media (max-width: 560px) { .ledger-side { display: none; } }

/* 创作账户业务页面 */
.account-task-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px; border-radius: 13px; background: var(--field); }
.account-task-tabs button { min-height: 40px; padding: 8px 15px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 680; transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.account-task-tabs button:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.account-task-tabs button.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); background: var(--card); box-shadow: var(--shadow-sm); }
.account-task-tabs button:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }
.task-row-action { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--card); cursor: pointer; font: inherit; font-size: 11px; font-weight: 680; transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease; }
.task-row-action .ri-icon { width: 15px; height: 15px; }
.task-row-action:hover { color: var(--accent); border-color: var(--accent); }
.task-row-action:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }

.account-assets-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.asset-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 13px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 15px; background: var(--field); }
.asset-thumb { display: grid; width: 76px; height: 76px; overflow: hidden; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-meta { min-width: 0; }
.asset-meta strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.asset-meta small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.asset-actions { display: flex; gap: 6px; margin-top: 10px; }
.asset-actions button { min-height: 32px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--card); cursor: pointer; font: inherit; font-size: 10px; font-weight: 650; }
.asset-actions button:hover { color: var(--accent); border-color: var(--accent); }
.asset-actions button.danger:hover { color: var(--danger); border-color: var(--danger); }
.asset-actions button:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }

.creator-center-status { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--field); }
.creator-center-status .account-menu-item-icon { color: var(--accent); background: var(--accent-soft); }
.creator-center-status div { flex: 1; }
.creator-center-status strong { display: block; font-size: 14px; }
.creator-center-status p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.creator-work-stats { display: flex; gap: 12px; color: var(--muted); font-size: 10px; }

.help-center-card { padding: 24px; }
.help-diagnostic { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border)); border-radius: 15px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 55%, var(--field)), var(--field)); }
.help-diagnostic > div { min-width: 0; flex: 1; }
.help-diagnostic strong { font-size: 14px; }
.help-diagnostic p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.help-diagnostic .ghost { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; }
.help-diagnostic .ghost .ri-icon { width: 16px; height: 16px; }
.help-section-title { display: flex; align-items: center; gap: 9px; margin: 24px 2px 12px; }
.help-section-title .ri-icon { width: 18px; height: 18px; color: var(--accent); }
.help-section-title h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.help-faq-list { display: grid; gap: 9px; }
.help-faq-list details { padding: 0 15px; border: 1px solid var(--border); border-radius: 13px; background: var(--card); transition: border-color 150ms ease, background-color 150ms ease; }
.help-faq-list details:hover { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
.help-faq-list details[open] { border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 28%, var(--card)); }
.help-faq-list summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; list-style: none; cursor: pointer; font-size: 13px; font-weight: 680; }
.help-faq-list summary::-webkit-details-marker { display: none; }
.help-faq-list summary .ri-icon { width: 18px; height: 18px; color: var(--muted); transition: transform 180ms var(--ease), color 150ms ease; }
.help-faq-list details[open] summary .ri-icon { color: var(--accent); transform: rotate(180deg); }
.help-faq-list summary:focus-visible { outline: none; border-radius: 8px; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12); }
.help-faq-list p { margin: -1px 30px 15px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

@media (max-width: 680px) {
  .account-assets-grid { grid-template-columns: 1fr; }
  .help-diagnostic { align-items: flex-start; flex-wrap: wrap; }
  .help-diagnostic .ghost { width: 100%; }
  #accountView .account-form { grid-template-columns: 1fr; }
  #accountView .account-form .account-message,
  #accountView .account-form .account-save-button { grid-column: 1; }
  #accountView .account-form .account-save-button { width: 100%; justify-self: stretch; }
}

@media (max-width: 560px) {
  .utility-page-head { min-height: 96px; padding-top: 0; }
  .utility-page-title { flex-direction: column; gap: 10px; text-align: center; }
  .utility-page-title p { max-width: 320px; }
  .utility-card,
  .help-center-card { padding: 18px; border-radius: 17px; }
  .utility-card-heading { align-items: flex-start; }
  .account-task-tabs { display: grid; grid-template-columns: repeat(2, 1fr); }
  .account-task-tabs button { width: 100%; }
  .record-row .task-row-action { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .help-faq-list summary .ri-icon { transition: none; }
}

.inspiration-modal:fullscreen { background: var(--bg); }

/* =========================================================
   Artwork library refinements
   ========================================================= */

/* 灵感卡片 hover：左下角文件夹 + 二级分类 */
.card-hover-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin-bottom: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card-hover-cat .ri-icon { flex: 0 0 auto; width: 11px; height: 11px; }
.card-hover-cat em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 私有作品库 */
.backend-only { display: none !important; }
.artwork-card { cursor: zoom-in; }
.artwork-delete-trigger { position:absolute; top:10px; right:10px; z-index:3; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:12px; color:#fff; background:rgba(18,19,22,.58); backdrop-filter:blur(10px); cursor:pointer; opacity:0; transition:opacity 150ms ease,background-color 150ms ease; }
.artwork-delete-trigger .ri-icon { width:19px; height:19px; }
.artwork-card:hover .artwork-delete-trigger,.artwork-card:focus-within .artwork-delete-trigger { opacity:1; }
.artwork-delete-trigger:hover { background:var(--danger); }
.artwork-delete-trigger:focus-visible { outline:2px solid #fff; outline-offset:3px; opacity:1; }
.artwork-viewer-delete:hover { color:#fff; background:var(--danger); }
.viewer-actions .viewer-close { order:1; }
body:has(.artwork-delete-dialog[open]) { overflow:hidden; }
.artwork-delete-dialog { box-sizing:border-box; width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:28px; border:1px solid var(--border); border-radius:20px; color:var(--text); background:var(--card); box-shadow:0 24px 80px rgba(0,0,0,.24); font-family:inherit; }
.artwork-delete-dialog::backdrop { background:rgba(12,14,18,.52); backdrop-filter:blur(5px); }
.artwork-delete-symbol { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:var(--danger); background:var(--danger-soft); }
.artwork-delete-symbol .ri-icon { width:22px; height:22px; }
.artwork-delete-dialog h2 { margin:18px 0 10px; font-size:22px; letter-spacing:-.5px; }
.artwork-delete-dialog > p { margin:0; color:var(--muted-strong); font-size:13px; line-height:1.8; }
.artwork-delete-preview { display:flex; align-items:center; gap:14px; margin:20px 0; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--field); }
.artwork-delete-preview img { width:64px; height:76px; flex-shrink:0; border-radius:7px; object-fit:contain; background:var(--card); }
.artwork-delete-preview > div { min-width:0; }
.artwork-delete-preview strong { display:block; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.artwork-delete-preview span { display:block; margin-top:6px; color:var(--muted-strong); font-size:12px; }
.artwork-delete-dialog .artwork-delete-error { color:var(--danger); }
.artwork-delete-error:empty { display:none; }
.artwork-delete-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.artwork-delete-actions button { min-width:104px; min-height:44px; padding:10px 18px; }
@media (hover:none), (max-width:760px) { .artwork-delete-trigger { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .artwork-delete-trigger { transition:none; } }
.artwork-card .artwork-card-actions,
.artwork-card .artwork-card-actions button,
.artwork-card .artwork-star { cursor: pointer; }

/* KUTU Design Language v3.1 — final UI polish layer */
:root {
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .12);
}

.card,
.panel {
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.card:hover,
.panel:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.primary,
.ghost,
.config-action,
.top-action,
.filter-trigger,
.sort-select,
.recharge-show-all {
  border-radius: 999px;
}
.primary {
  background: var(--accent);
  box-shadow: none;
}
.primary:hover:not(:disabled) {
  background: var(--accent-strong);
  box-shadow: none;
  transform: none;
}
.ghost {
  border-color: transparent;
  background: var(--field);
}
.ghost:hover:not(:disabled) {
  border-color: transparent;
  background: color-mix(in srgb, var(--field) 78%, var(--text));
  transform: none;
}
.top-action:hover:not(:disabled),
.filter-trigger:hover,
.inspiration-search:focus-within {
  transform: none;
}
.top-action,
.inspiration-search {
  box-shadow: none;
}

.field input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
.field select,
.more-desc,
.remix-prompt,
.saved-row select {
  border-radius: 10px;
}
.field input:focus,
.field select:focus,
textarea:focus,
.saved-row select:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 1px;
  box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), .16);
}
.upload:hover,
.upload.dragging {
  box-shadow: 0 0 0 1px var(--accent);
  transform: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}
.artwork-card .poster-image-visual img { width: 100%; height: auto; display: block; object-fit: contain; }
.artwork-card-actions { display: flex; gap: 8px; }
.artwork-card .card-use { width: 44px; height: 44px; flex-basis: 44px; }
.artwork-star {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 7;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  color: #fff;
  background: rgba(18,19,22,.52);
  box-shadow: 0 5px 18px rgba(0,0,0,.22);
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease, color 180ms ease, background-color 180ms ease;
  backdrop-filter: blur(10px);
}
.artwork-card:hover .artwork-star,
.artwork-card:focus-within .artwork-star,
.artwork-star.active { opacity: 1; }
.artwork-star.active { color: #ffd36a; background: rgba(18,19,22,.7); }
.artwork-star:hover { color: #ffd36a; background: rgba(18,19,22,.76); }
.artwork-star:focus-visible { opacity: 1; outline: none; box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.28),0 5px 18px rgba(0,0,0,.22); }
.artwork-card-info { align-items: flex-end; }
.artwork-card-info > div:first-child { min-width: 0; }
.artwork-card-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspiration-toast.error { color: #fff; background: var(--danger); }
@media (max-width: 760px), (hover: none) {
  .artwork-star { opacity: 1; }
  .artwork-card-actions { gap: 6px; }
}

/* Stable two-column composition workspace on desktop. */
@media (min-width: 821px) {
  #studioView[data-stage="create"] .workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    align-items: start;
    gap: clamp(18px, 2vw, 28px);
    width: min(1600px, 100%);
    margin-inline: auto;
  }

  #studioView[data-stage="create"] #inputPanel {
    grid-column: 1;
    grid-row: 1;
    min-height: min(740px, calc(100dvh - 172px));
    height: min(740px, calc(100dvh - 172px));
  }

  #studioView[data-stage="create"] #remixCard {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    position: sticky;
    top: 92px;
    width: 100%;
    min-height: min(540px, calc(100dvh - 184px));
    max-height: calc(100dvh - 184px);
    overflow-y: auto;
  }

  #studioView[data-stage="create"] #remixPromptCard {
    display: contents;
  }
}

/* Creation workspace V5: precise canvas editing and a dedicated result flow. */
.reference-toolbar-title,
.reference-toolbar-actions,
.canvas-tool,
.selection-summary,
.studio-result-head-actions,
.result-primary-actions {
  display: flex;
  align-items: center;
}
.studio-flow span,
.studio-flow strong { color: var(--muted); font-weight: 650; }
.studio-flow strong:not(.is-active) b { color: var(--muted); }
.studio-flow .is-active { color: var(--text); font-weight: 760; }
.studio-flow .is-active b { color: var(--accent); }

.reference-toolbar-title { gap: 12px; min-width: 0; }
.reference-toolbar-title > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reference-toolbar-actions { gap: 6px; }
.canvas-tool {
  gap: 7px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted-strong);
  background: transparent;
  font-size: 12px;
  font-weight: 680;
  cursor: pointer;
  transition: color 170ms ease, border-color 170ms ease, background-color 170ms ease;
}
.canvas-tool:hover,
.canvas-tool:focus-visible { color: var(--text); border-color: var(--border); background: var(--field); }
.canvas-tool .ri-icon { width: 17px; height: 17px; }

/* The overlay is sized by JavaScript to the actual object-fit rendered image. */
.reference-overlay { inset: auto; }
.reference-hotspot.is-applied:not(.is-selected) {
  opacity: 1;
  border-color: color-mix(in srgb, var(--success) 70%, transparent);
  background: color-mix(in srgb, var(--success) 7%, transparent);
}
.reference-hotspot.is-applied::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--success) 35%, transparent);
}

.canvas-zoom-controls {
  position: absolute;
  z-index: 8;
  bottom: 14px;
  left: 14px;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
#studioView[data-stage="create"] .canvas-zoom-controls { display: inline-flex; }
.canvas-zoom-button,
.canvas-zoom-reset {
  display: inline-grid;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease;
}
.canvas-zoom-button .ri-icon { width: 17px; height: 17px; }
.canvas-zoom-button:hover:not(:disabled),
.canvas-zoom-reset:hover { color: var(--text); background: var(--field); }
.canvas-zoom-button:focus-visible,
.canvas-zoom-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.canvas-zoom-button:disabled { cursor: not-allowed; opacity: .35; }

.context-empty { display: grid; gap: 26px; }
.context-empty-copy p { margin-bottom: 8px; }
.whole-prompt { display: grid; gap: 10px; }
.whole-prompt label { color: var(--text-soft); font-size: 12px; font-weight: 720; }
.whole-prompt textarea {
  width: 100%;
  min-height: 116px;
  padding: 13px 14px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  color: var(--text);
  background: var(--field);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  transition: border-color 170ms ease, box-shadow 170ms ease;
}
.whole-prompt textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12);
}
.whole-prompt-apply {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--card);
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
}
.whole-prompt-apply:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.whole-prompt-apply .ri-icon { width: 17px; height: 17px; }
.context-actions { flex-wrap: wrap; gap: 10px; }
.context-applied-status {
  display: none;
  width: 100%;
  color: var(--success);
  font-size: 11px;
  line-height: 1.5;
}
.context-applied-status.show { display: block; }
.element-delete-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--danger, #bd4b4b) 22%, var(--border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--danger, #bd4b4b) 5%, var(--field));
}
.element-delete-bar.is-deleted {
  border-color: color-mix(in srgb, var(--danger, #bd4b4b) 35%, var(--border));
  background: color-mix(in srgb, var(--danger, #bd4b4b) 9%, var(--field));
}
.element-delete-copy { display: grid; min-width: 0; gap: 3px; }
.element-delete-copy strong { color: var(--text-soft); font-size: 12px; }
.element-delete-copy small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.element-delete-action {
  display: inline-flex;
  min-width: 96px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--danger, #bd4b4b) 38%, var(--border));
  border-radius: 9px;
  color: var(--danger, #bd4b4b);
  background: var(--card);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
}
.element-delete-action:hover,
.element-delete-action:focus-visible { border-color: var(--danger, #bd4b4b); background: color-mix(in srgb, var(--danger, #bd4b4b) 8%, var(--card)); outline: none; }
.element-delete-bar.is-deleted .element-delete-action { color: var(--success); border-color: color-mix(in srgb, var(--success) 38%, var(--border)); }
.auto-save-status {
  display: block;
  min-height: 18px;
  margin-top: 8px;
  color: var(--success);
  font-size: 11px;
  line-height: 1.5;
}
.element-editor-field .field-note { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.55; }

.selection-summary { position: relative; min-width: 0; gap: 12px; }
.change-count {
  appearance: none;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--success) 82%, var(--text));
  background: color-mix(in srgb, var(--success) 8%, var(--card));
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.change-count:hover,
.change-count:focus-visible {
  border-color: var(--text);
  color: var(--card);
  background: var(--text);
}
.change-count:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.change-summary-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 80;
  width: min(360px, calc(100vw - 32px));
  max-height: 240px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  background: var(--card);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
  pointer-events: none;
}
.selection-summary:has(.change-count:hover) .change-summary-popover:not(.hidden),
.selection-summary:has(.change-count:focus-visible) .change-summary-popover:not(.hidden),
.selection-summary:has(.change-summary-popover:hover) .change-summary-popover:not(.hidden) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.change-summary-popover > strong { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 760; }
.change-summary-popover ul { display: grid; gap: 5px; margin: 0; padding-left: 17px; color: var(--text-soft); font-size: 11px; line-height: 1.45; }
.change-summary-popover li::marker { color: var(--accent); }
.reset-edits {
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.reset-edits:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); }

#studioView[data-stage="generating"] .workspace,
#studioView[data-stage="result"] .workspace { display: none; }
#studioView[data-stage="generating"],
#studioView[data-stage="result"] { padding-bottom: 0; }
.page:has(#studioView[data-stage="generating"]),
.page:has(#studioView[data-stage="result"]) {
  width: 100%;
  max-width: none;
  padding-top: clamp(22px, 3vw, 40px);
  padding-bottom: 56px;
}

.studio-generation-view {
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(360px, .75fr);
  gap: clamp(36px, 6vw, 96px);
  width: min(1180px, 100%);
  min-height: calc(100dvh - 180px);
  align-items: center;
  margin: 0 auto;
}
.generation-visual {
  position: relative;
  display: grid;
  min-height: min(660px, 70dvh);
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), .14), transparent 40%),
    var(--card-soft);
  box-shadow: var(--shadow-md);
}
.generation-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
  background-size: 22px 22px;
}
.generation-reference-frame {
  position: relative;
  z-index: 1;
  width: min(72%, 420px);
  max-height: 78%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 28px 70px rgba(18,19,22,.22);
}
.generation-reference-frame img { display: block; width: 100%; max-height: 62dvh; object-fit: contain; filter: saturate(.72) brightness(.84); }
.generation-scan {
  position: absolute;
  z-index: 2;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .7);
  animation: generation-scan 2.1s var(--ease) infinite;
}
@keyframes generation-scan { 0% { top: 17%; opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { top: 83%; opacity: 0; } }
.generation-copy { max-width: 520px; }
.result-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.generation-copy h2,
.studio-result-head h2 { margin: 0; color: var(--text); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.045em; }
.generation-copy > p,
.studio-result-head p { margin: 14px 0 0; color: var(--muted-strong); font-size: 13px; line-height: 1.7; }
.generation-steps { display: grid; gap: 4px; margin: 36px 0 0; padding: 0; list-style: none; }
.generation-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: start; padding: 14px 0; color: var(--muted); opacity: .62; transition: opacity 220ms ease, color 220ms ease; }
.generation-steps li > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; font-size: 11px; font-weight: 760; }
.generation-steps li strong,
.generation-steps li small { display: block; }
.generation-steps li strong { margin: 1px 0 5px; color: inherit; font-size: 13px; }
.generation-steps li small { font-size: 11px; line-height: 1.5; }
.generation-steps li.active { color: var(--text); opacity: 1; }
.generation-steps li.active > span { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .12); }
.generation-steps li.complete { color: var(--success); opacity: .9; }

.studio-result-view { width: min(1500px, 100%); margin: 0 auto; }
.studio-result-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.studio-result-head > div:first-child { max-width: 680px; }
.studio-result-head-actions { gap: 10px; }
.studio-result-head-actions button { min-height: 44px; padding-inline: 17px; }
.result-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow-md);
}
.comparison-column { min-width: 0; }
.comparison-label { display: flex; min-height: 46px; align-items: center; gap: 9px; padding: 0 8px; color: var(--text-soft); font-size: 12px; }
.comparison-label em { margin-left: auto; color: var(--success); font-size: 10px; font-style: normal; font-weight: 700; }
.comparison-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.comparison-dot.reference { background: var(--muted); }
.comparison-dot.generated { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent); }
.comparison-image-button {
  display: grid;
  width: 100%;
  height: clamp(420px, 62dvh, 760px);
  place-items: center;
  overflow: hidden;
  padding: 24px;
  border: 0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), .06), transparent 42%),
    var(--card-soft);
  cursor: zoom-in;
}
.comparison-image-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gen-image-wrap { width: 100%; }
.result-command-panel {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
}
.result-meta-grid { display: flex; flex: 1; align-items: center; gap: clamp(20px, 4vw, 54px); }
.result-meta-grid span { display: grid; gap: 4px; }
.result-meta-grid small { color: var(--muted); font-size: 10px; }
.result-meta-grid strong { color: var(--text-soft); font-size: 12px; }
.result-primary-actions { gap: 8px; }
.result-primary-actions button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding-inline: 16px; }
.result-primary-actions .ri-icon { width: 17px; height: 17px; }
.result-save-status { display: none; }

@media (max-width: 820px) {
  .reference-toolbar-title > span { display: none; }
  .studio-generation-view { grid-template-columns: 1fr; gap: 28px; min-height: 0; }
  .generation-visual { min-height: 48dvh; }
  .generation-reference-frame img { max-height: 42dvh; }
  .generation-copy { max-width: none; }

  #studioView[data-stage="create"]:not([data-edit-target="none"]) #remixCard {
    position: fixed;
    z-index: 70;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: min(74dvh, 680px);
    overflow-y: auto;
    padding: 20px max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -24px 60px rgba(18,19,22,.2);
  }
  #studioView[data-stage="create"]:not([data-edit-target="none"]) #remixCard::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: -8px auto 14px;
    border-radius: 999px;
    background: var(--border-strong);
  }

  .studio-result-head { align-items: flex-start; flex-direction: column; }
  .studio-result-head-actions { width: 100%; }
  .studio-result-head-actions button { flex: 1; }
  .result-comparison { grid-template-columns: 1fr; }
  .comparison-image-button { height: min(62dvh, 620px); }
  .result-command-panel { align-items: stretch; flex-direction: column; }
  .result-meta-grid { justify-content: space-between; }
  .result-primary-actions { width: 100%; }
  .result-primary-actions button { flex: 1; }
}

@media (max-width: 560px) {
  .canvas-tool span { display: none; }
  .canvas-tool { width: 40px; justify-content: center; padding-inline: 0; }
  .reference-toolbar-actions { gap: 2px; }
  .region-toggle span:last-child { display: none; }
  .region-toggle { width: 40px; justify-content: center; }
  .selection-summary { flex: 1; }
  .change-count { overflow: hidden; max-width: 135px; text-overflow: ellipsis; }
  .reset-edits { display: none; }
  .studio-generation-view { gap: 22px; }
  .generation-visual { min-height: 42dvh; border-radius: 18px; }
  .generation-copy h2,
  .studio-result-head h2 { font-size: 30px; }
  .generation-steps { margin-top: 24px; }
  .result-comparison { padding: 8px; border-radius: 18px; }
  .comparison-image-button { height: min(56dvh, 520px); padding: 12px; border-radius: 12px; }
  .comparison-label em { display: none; }
  .result-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-meta-grid span:last-child { grid-column: 1 / -1; }
  .result-primary-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .generation-scan { animation-duration: .01ms; animation-iteration-count: 1; }
  .generation-steps li { transition-duration: .01ms; }
}

/* First creation step: an uncluttered canvas with the detected element list. */
#studioView[data-stage="create"] {
  min-height: calc(100dvh - 72px);
  padding: 0;
}
#studioView[data-stage="create"] .newcomer-banner,
#studioView[data-stage="create"] .hero,
#studioView[data-stage="create"] .reference-toolbar,
#studioView[data-stage="create"] .saved-box,
#studioView[data-stage="create"] #status,
#studioView[data-stage="create"] #dnaCard,
#studioView[data-stage="create"] #systemPromptCard,
#studioView[data-stage="create"] #remixPromptCard,
#studioView[data-stage="create"] #studioGenerationView,
#studioView[data-stage="create"] #studioResultView {
  display: none !important;
}
#studioView[data-stage="create"] .workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 0;
  width: 100%;
  min-height: calc(100dvh - 72px);
  margin: 0;
}
#studioView[data-stage="create"] #inputPanel {
  height: calc(100dvh - 72px);
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#studioView[data-stage="create"] #inputPanel:hover {
  border-color: transparent;
  box-shadow: none;
}
#studioView[data-stage="create"] .upload {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: grab;
  touch-action: none;
}
#studioView[data-stage="create"] .upload::before,
#studioView[data-stage="create"] .upload::after {
  display: none;
}
#studioView[data-stage="create"] .upload:hover,
#studioView[data-stage="create"] .upload.dragging {
  border-color: var(--accent);
  background: transparent;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .18), 0 0 0 8px rgba(var(--accent-rgb), .12), 0 18px 44px rgba(var(--accent-rgb), .18);
  transform: none;
}
#studioView[data-stage="create"] .upload.is-panning { cursor: grabbing; }
#studioView[data-stage="create"] .upload.is-panning * { cursor: grabbing !important; }
#studioView[data-stage="create"] .reference-hotspot { cursor: grab; }
#studioView[data-stage="create"] .upload:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: -3px;
}
#studioView[data-stage="create"] .preview {
  overflow: hidden;
  background: transparent;
}
#studioView[data-stage="create"] .preview img {
  cursor: grab;
  transition: none;
  will-change: transform;
}
#studioView[data-stage="create"] #removeImage { display: none; }
#studioView[data-stage="create"] .preview img,
#studioView[data-stage="create"] .reference-overlay {
  display: block;
  transform-origin: center center;
}
#studioView[data-stage="create"] #remixCard {
  display: block;
  height: calc(100dvh - 72px);
  min-height: 0;
  padding: 28px 24px;
  overflow-y: auto;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: var(--card);
  box-shadow: none;
}
#studioView[data-stage="create"] #remixCard .context-panel-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
#studioView[data-stage="create"] #remixCard .context-panel-head .context-close,
#studioView[data-stage="create"] #remixCard .context-navigator,
#studioView[data-stage="create"] #remixCard .context-empty-copy,
#studioView[data-stage="create"] #remixCard .whole-prompt,
#studioView[data-stage="create"] #remixCard .context-fields,
#studioView[data-stage="create"] #remixCard .context-actions {
  display: none !important;
}
#studioView[data-stage="create"] #remixCard .context-empty { display: block; }
#studioView[data-stage="create"] #remixCard .element-inventory {
  display: grid;
  gap: 14px;
  margin: 0;
}
#studioView[data-stage="create"] #remixCard .element-inventory-head { padding: 18px 0 4px; }
#studioView[data-stage="create"] #remixCard .element-inventory-list {
  display: grid;
  gap: 8px;
}
#studioView[data-stage="create"] #remixCard .element-inventory-item {
  min-height: 52px;
  border-radius: 8px;
}
#studioView[data-stage="create"] #remixCard .element-inventory-item.is-newest {
  animation: element-inventory-reveal 240ms var(--ease) both;
}

.element-inventory-skeleton {
  display: grid;
  min-height: 52px;
  align-content: center;
  gap: 8px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field);
}
.element-inventory-skeleton span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--field) 0%, color-mix(in srgb, var(--muted) 22%, var(--field)) 48%, var(--field) 100%);
  background-size: 220% 100%;
  animation: element-inventory-shimmer 1.15s ease-in-out infinite;
}
.element-inventory-skeleton span:first-child { width: 44%; }
.element-inventory-skeleton span:last-child { width: 72%; opacity: .72; }

.generation-action .primary:disabled {
  cursor: not-allowed;
  opacity: .46;
  box-shadow: none;
  transform: none;
}

@keyframes element-inventory-reveal {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes element-inventory-shimmer {
  from { background-position: 110% 0; }
  to { background-position: -110% 0; }
}

@media (prefers-reduced-motion: reduce) {
  #studioView[data-stage="create"] #remixCard .element-inventory-item,
  .element-inventory-skeleton span { animation: none; }
}
#studioView[data-stage="create"] .context-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
#studioView[data-stage="create"] .context-panel-head .region-toggle {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 8px;
  border-color: var(--border);
  color: var(--muted-strong);
  background: var(--field);
  font-size: 11px;
}
#studioView[data-stage="create"] .context-panel-head .region-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, var(--field));
}
#studioView[data-stage="create"] .reference-hotspot {
  border: 1px solid #101114;
  background: rgba(255,255,255,.035);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.96),
    0 0 0 3px rgba(0,0,0,.9),
    0 0 16px rgba(0,0,0,.22);
}
#studioView[data-stage="create"] .reference-hotspot span {
  top: -27px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px;
  color: #fff;
  background: rgba(0,0,0,.8);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  font-size: 11px;
  font-weight: 700;
}
#studioView[data-stage="create"] .reference-hotspot span.label-below {
  top: calc(100% + 7px);
}
#studioView[data-stage="create"] .reference-hotspot span.label-align-right {
  right: 0;
  left: auto;
}
#studioView[data-stage="create"] .reference-hotspot:hover,
#studioView[data-stage="create"] .reference-hotspot:focus-visible,
#studioView[data-stage="create"] .reference-hotspot.is-peeking:not(.is-selected) {
  border-color: #101114;
  background: rgba(255,255,255,.09);
  box-shadow:
    0 0 0 2px rgba(255,255,255,1),
    0 0 0 4px rgba(0,0,0,.92),
    0 0 22px rgba(255,255,255,.28),
    0 0 28px rgba(0,0,0,.3);
}
#studioView[data-stage="create"] .reference-overlay:has(.reference-hotspot.is-selected) .reference-hotspot:not(.is-selected):not(.is-peeking) {
  opacity: 0;
  filter: none;
}
#studioView[data-stage="create"] .reference-hotspot.is-selected {
  z-index: 4;
  border: 2px solid #fff;
  background: rgba(37, 99, 235, .18);
  box-shadow:
    0 0 0 2px #11131a,
    0 0 0 5px rgba(255,255,255,.94),
    0 0 0 7px rgba(17,19,26,.88),
    0 0 30px rgba(37, 99, 235, .65);
}
#studioView[data-stage="create"] .reference-hotspot.is-selected span {
  color: #fff;
  background: #2563eb;
  box-shadow: 0 0 0 2px #11131a, 0 4px 16px rgba(37,99,235,.4), 0 4px 16px rgba(0,0,0,.35);
}
#studioView[data-stage="create"]:not(.show-editable-regions) .reference-hotspot {
  opacity: 0;
}
#studioView[data-stage="create"]:not(.show-editable-regions) .reference-hotspot:hover,
#studioView[data-stage="create"]:not(.show-editable-regions) .reference-hotspot:focus-visible,
#studioView[data-stage="create"]:not(.show-editable-regions) .reference-hotspot.is-peeking,
#studioView[data-stage="create"]:not(.show-editable-regions) .reference-hotspot.is-selected {
  opacity: 1;
}
#studioView[data-stage="create"].is-editing-element #remixCard .context-panel-head .context-close,
#studioView[data-stage="create"].is-editing-element #remixCard .context-panel-head .context-back,
#studioView[data-stage="create"].is-editing-element #remixCard .context-navigator,
#studioView[data-stage="create"].is-editing-element #remixCard .context-fields,
#studioView[data-stage="create"].is-editing-element #remixCard .context-actions {
  display: flex !important;
}
#studioView[data-stage="create"].is-editing-element #remixCard .context-fields {
  display: grid !important;
}
#studioView[data-stage="create"].is-editing-element #remixCard .context-empty {
  display: none !important;
}
#studioView[data-stage="create"][data-edit-target="overall"] #remixCard .context-fields {
  display: grid !important;
}
#studioView[data-stage="create"][data-edit-target="overall"] #remixCard .context-empty {
  display: none !important;
}
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.field-label-row label { margin-bottom: 0 !important; }
.text-collapse-toggle {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted-strong);
  background: var(--field);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.text-collapse-toggle:hover,
.text-collapse-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
  outline: none;
}
.inline-text-editor.is-collapsed { display: none; }
@media (max-width: 760px) {
  #studioView[data-stage="create"] .workspace { grid-template-columns: minmax(0, 1fr) 270px; }
  #studioView[data-stage="create"] #remixCard { padding-inline: 18px; }
}
@media (max-width: 820px) {
  #studioView[data-stage="create"]:not([data-edit-target="none"]) #remixCard {
    position: static;
    inset: auto;
    width: auto;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Keep edited graphics visible in the overall-adjustment view. */
.element-edit-summary {
  display: grid;
  gap: 8px;
}
.element-edit-summary-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  width: 100%;
  min-height: 70px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--field);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.element-edit-summary-item:hover,
.element-edit-summary-item:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 6%, var(--field));
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), .10);
  outline: none;
}
.element-edit-summary-thumb {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
  background: var(--card);
  font-size: 18px;
  font-weight: 780;
}
.element-edit-summary-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.element-edit-summary-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding-top: 2px;
}
.element-edit-summary-copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}
.element-edit-summary-copy small {
  min-width: 0;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
}
.element-edit-summary-empty {
  display: block;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: var(--muted);
  background: var(--field);
  font-size: 11px;
  line-height: 1.5;
}

/* Restore the separated creation workspace with rounded panels. */
#studioView[data-stage="create"] {
  min-height: 0;
  padding: 12px 0 0; /* 左右为 0，align 由 .page max-width 决定：与 .appbar 浮岛同宽 */
}
#studioView[data-stage="create"] .workspace {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  width: 100%;            /* 创作阶段主面板：填满 studioView 内容，跟导航栏同宽 */
  min-height: 0;
  margin: 0;
  align-items: stretch;   /* 画布与编辑栏高度一致 */
}
#studioView[data-stage="create"] #inputPanel {
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
#studioView[data-stage="create"] #inputPanel:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
#studioView[data-stage="create"] .upload {
  height: 100%;
  min-height: 0;
  border-radius: 0;
  background: transparent;
}
#studioView[data-stage="create"] #remixCard {
  position: relative;
  top: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: none;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
#studioView[data-stage="create"] #remixCard:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
#studioView[data-stage="create"] #remixCard {
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}
#studioView[data-stage="create"] #remixCard .context-panel-head {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 22px 22px 18px;
  background: var(--card);
}
#studioView[data-stage="create"] #remixCard .context-panel-scroll {
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 22px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
#studioView[data-stage="create"] #remixCard .element-inventory-list {
  max-height: none;
  overflow: visible;
}

/* Keep the fixed creation actions compact while preserving usable controls. */
#studioView[data-stage="create"] .same-style-action-bar {
  position: relative;
  bottom: auto;
  width: 100%;           /* 与上方画布/编辑栏同宽，整版对齐 */
  min-height: 54px;
  margin: 0;
  padding-inline: 12px;
  padding-top: 6px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  gap: 12px;
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
}
#studioView[data-stage="create"] .same-style-action-bar .overall-adjust {
  min-height: 36px;
  padding-block: 6px;
}
#studioView[data-stage="create"] .same-style-action-bar .generation-action #generateBtn {
  min-height: 40px;
  padding-block: 7px;
}

@media (min-width: 821px) {
  body.studio-active:has(#studioView[data-stage="create"]) #mainContent {
    height: calc(100dvh - 76px);
    padding: 0;
  }
  #studioView[data-stage="create"] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    height: 100%;
    overflow: hidden;
  }
  #studioView[data-stage="create"] .workspace {
    height: auto;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
  }
  #studioView[data-stage="create"] .workspace:has(#remixCard:not(.hidden)) #inputPanel {
    grid-column: 1;
    grid-row: 1;
  }
  #studioView[data-stage="create"] .workspace:has(#remixCard:not(.hidden)) #remixCard {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 820px) {
  #studioView[data-stage="create"] {
    padding: 18px 16px 48px;
  }
  #studioView[data-stage="create"] .workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  #studioView[data-stage="create"] #inputPanel {
    height: min(68vh, 560px);
    min-height: 360px;
    border-radius: 16px;
  }
  #studioView[data-stage="create"] #remixCard,
  #studioView[data-stage="create"]:not([data-edit-target="none"]) #remixCard {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    max-height: min(70dvh, 620px);
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
  }
  #studioView[data-stage="create"] #remixCard .context-panel-head {
    padding-inline: 18px;
  }
  #studioView[data-stage="create"] #remixCard .context-panel-scroll {
    padding-inline: 18px;
  }
  #studioView[data-stage="create"] .same-style-action-bar {
    min-height: 50px;
    padding-top: 5px;
    padding-bottom: max(5px, env(safe-area-inset-bottom));
  }
}

/* Keep these stage-layout rules last so the generation comparison wins over legacy flow styles. */
#studioView[data-stage="generating"] .studio-generation-view {
  display: block;
  width: min(1500px, 100%);
  min-height: 0;
  margin-inline: auto;
}
#studioView[data-stage="generating"] .generation-comparison {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 32px);
  row-gap: 14px;
}
#studioView[data-stage="generating"] .generation-pending-button.primary:disabled {
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--border-strong) 84%, var(--card-soft));
  box-shadow: none;
  opacity: .9;
}

@media (max-width: 820px) {
  #studioView[data-stage="generating"] .generation-comparison {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

/* Floating glass app bar */
body > .appbar {
  top: 12px;
  width: var(--app-shell-width);
  min-height: 64px;
  margin-inline: auto;
  padding: 10px clamp(16px, 1.5vw, 24px);
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 28px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-elevated) 94%, transparent),
      color-mix(in srgb, var(--bg-elevated) 82%, transparent));
  box-shadow:
    0 18px 44px rgba(18, 19, 22, .08),
    0 1px 0 rgba(255, 255, 255, .34) inset;
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
}
body > .appbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 38%);
}
body > .appbar > * {
  position: relative;
  z-index: 1;
}
body > .appbar .primary-nav {
  margin-left: clamp(14px, 1.5vw, 24px);
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 76%, transparent);
}
body > .appbar .primary-nav-item {
  min-height: 34px;
  padding-inline: 14px;
  border-radius: 999px;
}
body > .appbar .appbar-search .inspiration-search {
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--card) 84%, transparent);
  box-shadow: 0 6px 18px rgba(18, 19, 22, .05);
}
body > .appbar .top-action {
  min-height: 40px;
}

@media (max-width: 820px) {
  :root { --app-shell-width: calc(100% - 16px); }
  body > .appbar {
    top: 8px;
    width: var(--app-shell-width);
    min-height: 60px;
    padding: 9px 14px 10px;
    border-radius: 22px;
  }
  body > .appbar .primary-nav {
    margin-left: 12px;
  }
}

@media (max-width: 660px) {
  :root { --app-shell-width: calc(100% - 14px); }
  body > .appbar {
    width: var(--app-shell-width);
    padding: 8px 12px 10px;
  }
  body > .appbar .primary-nav {
    width: 100%;
    order: 3;
    margin: 8px 0 0;
    padding: 4px;
    border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-left: 0;
    background: transparent;
  }
  body > .appbar .appbar-search {
    position: static;
    order: 4;
    width: 100%;
    margin-top: 10px;
    transform: none;
  }
}

/* Creation workspace V6: framed canvas + compact floating inspector.
   This block intentionally stays last because earlier generations of the
   workspace contain legacy full-height and borderless overrides. */
@media (min-width: 821px) {
  body.studio-active:has(#studioView[data-stage="create"]) #mainContent {
    height: calc(100dvh - 76px);
  }

  #studioView[data-stage="create"] {
    gap: 12px;
    padding: 16px 0 12px; /* 桌面端：左右为 0，align 由 .page max-width 决定，与 .appbar 浮岛同宽 */
  }

  #studioView[data-stage="create"] .workspace {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: clamp(16px, 1.4vw, 24px);
    align-items: stretch;          /* 桌面端两列等高，画布与编辑栏上下间距一致 */
    width: 100%;                  /* 桌面端主面板填满，与导航栏同宽 */
    margin: 0;
  }

  #studioView[data-stage="create"] #inputPanel {
    position: relative;
    height: min(740px, calc(100dvh - 172px)); /* 桌面端：与右列 remixCard 同高（画布=编辑栏一致） */
    min-height: 540px;
    border: 1px solid var(--border-strong) !important;
    border-radius: 20px;
    background: var(--card) !important;
    box-shadow:
      0 18px 46px rgba(18, 19, 22, .07),
      0 1px 0 color-mix(in srgb, #fff 72%, transparent) inset !important;
    isolation: isolate;
  }

  #studioView[data-stage="create"] #inputPanel::after {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: 6;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 14px;
    pointer-events: none;
  }

  #studioView[data-stage="create"] #inputPanel:hover {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border-strong)) !important;
    background: var(--card) !important;
    box-shadow:
      0 20px 52px rgba(18, 19, 22, .09),
      0 1px 0 color-mix(in srgb, #fff 72%, transparent) inset !important;
  }

  #studioView[data-stage="create"] .upload,
  #studioView[data-stage="create"] .preview {
    border-radius: 19px;
  }

  #studioView[data-stage="create"] .preview {
    background-color: color-mix(in srgb, var(--field) 76%, var(--card));
    background-image: radial-gradient(circle, color-mix(in srgb, var(--muted) 24%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
  }

  #studioView[data-stage="create"] #remixCard {
    align-self: stretch; /* 取消 start 覆盖：与左列画布同高，上下间距一致 */
    height: min(740px, calc(100dvh - 172px));
    max-height: min(740px, calc(100dvh - 172px));
    border-color: var(--border-strong);
    border-radius: 18px;
    box-shadow: 0 16px 42px rgba(18, 19, 22, .07);
  }

  #studioView[data-stage="create"] #remixCard:hover {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border-strong));
    box-shadow: 0 18px 46px rgba(18, 19, 22, .085);
  }

  #studioView[data-stage="create"] #remixCard .context-panel-head {
    padding: 18px 20px 15px;
  }

  #studioView[data-stage="create"] #remixCard .context-panel-scroll {
    padding: 0 20px 18px;
  }

  #studioView[data-stage="create"] #remixCard .element-inventory {
    gap: 10px;
  }

  #studioView[data-stage="create"] #remixCard .element-inventory-head {
    padding-top: 14px;
  }

  #studioView[data-stage="create"] #remixCard .element-inventory-list {
    gap: 4px;
  }

  #studioView[data-stage="create"] #remixCard .element-inventory-item {
    min-height: 48px;
    padding-block: 6px;
  }

  #studioView[data-stage="create"] .same-style-action-bar {
    min-height: 56px;
    padding: 7px 10px max(7px, env(safe-area-inset-bottom));
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 94%, transparent);
    box-shadow: 0 12px 34px rgba(18, 19, 22, .06);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
}

@media (max-width: 820px) {
  #studioView[data-stage="create"] #inputPanel {
    border: 1px solid var(--border-strong) !important;
    background: var(--card) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  #studioView[data-stage="create"] #remixCard {
    max-height: min(58dvh, 540px);
  }
}

/* Upload stage: the dashed dropzone is the only visible selection frame. */
body.studio-upload-active #inputPanel {
  gap: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body.studio-upload-active #inputPanel:hover {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.studio-upload-active #dropzone {
  background: var(--card);
  box-shadow: none;
}

body.studio-upload-active #dropzone:hover,
body.studio-upload-active #dropzone.dragging {
  background: var(--card);
  box-shadow: none;
  transform: none;
}

/* Artwork library V2: centered search + appbar-aligned filter rail. */
body.inspiration-active > .appbar .appbar-search {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(440px, 34vw);
  margin: 0;
  transform: translate(-50%, -50%);
}

.inspiration-search-clear {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: var(--field);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.inspiration-search-clear:hover {
  color: var(--text);
  background: var(--border);
}

.inspiration-search-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.inspiration-search-clear .ri-icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 1180px) {
  body.inspiration-active > .appbar .appbar-search {
    width: min(320px, 30vw);
  }

  .appbar-search .inspiration-search kbd {
    display: none;
  }
}

@media (max-width: 820px) {
  body.inspiration-active > .appbar .appbar-search {
    width: min(250px, 30vw);
  }
}

@media (min-width: 661px) and (max-width: 760px) {
  body.inspiration-active {
    --appbar-stack-height: 124px;
  }

  body.inspiration-active > .appbar {
    flex-wrap: wrap;
  }

  body.inspiration-active > .appbar .appbar-search {
    position: static;
    order: 4;
    width: 100%;
    margin-top: 8px;
    transform: none;
    animation-name: appbar-search-mobile-in;
  }
}

@media (max-width: 660px) {
  body.inspiration-active {
    --appbar-stack-height: 178px;
  }

  body.inspiration-active > .appbar .appbar-search {
    position: static;
    order: 4;
    width: 100%;
    margin-top: 10px;
    transform: none;
  }
}

/* Top navigation: text-only tabs. */
body > .appbar .primary-nav {
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body > .appbar .primary-nav-item {
  min-height: 44px;
  padding-inline: 12px;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-weight: 600;
}

body > .appbar .primary-nav-item:hover {
  color: var(--text);
  background: transparent;
}

body > .appbar .primary-nav-item.active {
  color: var(--text);
  background: transparent;
  box-shadow: none;
  font-weight: 800;
}

body > .appbar .primary-nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

@media (max-width: 660px) {
  body > .appbar .primary-nav {
    border: 0;
    background: transparent;
  }
}

/* ===== 作品库导航下拉：hover 显示全部作品 / 星标作品 ===== */
body > .appbar .primary-nav-dropdown {
  position: relative;
  display: inline-flex;
}

body > .appbar .primary-nav-dropdown > .primary-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body > .appbar .primary-nav-dropdown > .primary-nav-item .ri-icon {
  width: 14px;
  height: 14px;
  transition: transform 180ms var(--ease);
}

body > .appbar .primary-nav-dropdown:hover > .primary-nav-item .ri-icon,
body > .appbar .primary-nav-dropdown:focus-within > .primary-nav-item .ri-icon {
  transform: rotate(180deg);
}

/* 悬停桥：填补按钮与菜单之间的空隙，避免鼠标经过时菜单消失 */
body > .appbar .primary-nav-dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 10px;
}

body > .appbar .primary-nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  min-width: 152px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms var(--ease), visibility 160ms ease;
}

body > .appbar .primary-nav-dropdown:hover .primary-nav-menu,
body > .appbar .primary-nav-dropdown:focus-within .primary-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body > .appbar .primary-nav-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  transition: color 150ms ease, background-color 150ms ease;
}

body > .appbar .primary-nav-menu-item:hover {
  color: var(--text);
  background: var(--field);
}

body > .appbar .primary-nav-menu-item.active {
  color: var(--accent);
  font-weight: 700;
}

body > .appbar .primary-nav-menu-item .ri-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 150ms ease;
}

body > .appbar .primary-nav-menu-item.active .ri-icon {
  opacity: 1;
}

/* =========================================================
   KUTU DESIGN LANGUAGE · v3.1 — Apple-inspired「白室 · 焰橙」
   参考：Apple HIG / apple.com 视觉语言
   原则：单一焰橙强调（#FF6A2A）· 发丝线边框 · 扁平表面
        · 胶囊按钮 · Apple 缓动曲线 · 按压缩放反馈 · 负字距排版
   ========================================================= */

/* ---- 3.1 令牌：动效曲线与专属色 ---- */
:root {
  --signal-blue: #ff6a2a;
  --fill-neutral: rgba(120, 120, 128, 0.12);
  --fill-neutral-hover: rgba(120, 120, 128, 0.2);
  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
  --press-scale: 0.97;
  --duration-slow: 420ms;
}
:root[data-theme="dark"] {
  --signal-blue: #ff8148;
  --fill-neutral: rgba(120, 120, 128, 0.24);
  --fill-neutral-hover: rgba(120, 120, 128, 0.36);
}

/* ---- 3.2 排版：SF 式负字距 ---- */
body { letter-spacing: -0.011em; }
h1, h2, h3 { letter-spacing: -0.022em; }
.card-title { letter-spacing: -0.3px; }

/* ---- 3.3 主按钮：Apple 实心胶囊（无渐变 · 无阴影 · 不上浮） ---- */
.primary {
  min-height: 44px;
  padding: 11px 22px;
  border: 0;
  border-radius: 980px;
  color: #fff;
  background: var(--accent);
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.16px;
  transition: background-color var(--duration-fast) var(--ease),
              transform 120ms var(--ease),
              opacity var(--duration-fast) var(--ease);
}
.primary:hover:not(:disabled) {
  transform: none;
  background: var(--accent-strong);
  box-shadow: none;
}
.primary:active:not(:disabled) { transform: scale(var(--press-scale)); background: var(--accent-strong); }
.primary:disabled { opacity: 0.42; box-shadow: none; cursor: not-allowed; }

/* ---- 3.4 次按钮：iOS 中性填充胶囊（代替描边） ---- */
.ghost {
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 980px;
  color: var(--text);
  background: var(--fill-neutral);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.16px;
  transition: background-color var(--duration-fast) var(--ease),
              transform 120ms var(--ease),
              opacity var(--duration-fast) var(--ease);
}
.ghost:hover:not(:disabled) {
  transform: none;
  border-color: transparent;
  color: var(--text);
  background: var(--fill-neutral-hover);
}
.ghost:active:not(:disabled) { transform: scale(var(--press-scale)); }
.ghost.small { min-height: 30px; padding: 5px 12px; font-size: 11px; }

/* ---- 3.5 焦点环：Apple 2px 蓝 ---- */
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- 3.6 卡片与浮层：发丝线 + 扁平，悬停不增重 ---- */
.card { border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: border-color var(--duration-fast) var(--ease); }
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.panel { border-radius: var(--radius-lg); }

/* ---- 3.7 首页标题：焰橙单色，去渐变文字 ---- */
.hero h1 span {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--signal-blue);
}

/* ---- 3.8 弹窗顶栏：渐变条 → 实心焰橙 ---- */
.account-modal::before { background: var(--accent); }

/* ---- 3.9 环境光斑：焰橙主光 + 暖桃副光 ---- */
.ambient-one { background: var(--signal-blue); }
.ambient-two { background: #ffb38a; opacity: 0.08; }
[data-theme="dark"] .ambient-two { background: #ff7d3c; opacity: 0.06; }

/* ---- 3.10 上传区悬停：焰橙聚焦环 ---- */
.upload:hover {
  border-color: var(--accent);
  background: transparent;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1);
  transform: none;
}

/* ---- 3.11 分段导航：扁平激活态 + 按压反馈 ---- */
.primary-nav-item.active { color: var(--text); background: var(--card); box-shadow: none; }
.primary-nav-item,
.top-action,
.theme-toggle,
.filter-trigger {
  transition: color var(--duration-fast) var(--ease),
              background-color var(--duration-fast) var(--ease),
              transform 120ms var(--ease);
}
.primary-nav-item:active:not(:disabled),
.top-action:active:not(:disabled),
.theme-toggle:active,
.filter-trigger:active { transform: scale(var(--press-scale)); }

/* ---- 3.12 输入与表单：Apple 聚焦样式 ---- */
.account-form input { border-radius: 10px; }
.account-form input:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), 0.16); }
.inspiration-search { border-radius: 12px; }

/* 搜索框的选中态作用于整个胶囊容器，避免输入框内部出现小矩形焦点框。 */
.inspiration-search input:focus,
.inspiration-search input:focus-visible {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.inspiration-search:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- 3.13 悬停位移统一为 Apple 曲线（令牌已换，此处收敛残余 ease） ---- */
.inspiration-card, .card-hover, .poster-visual, .primary-nav-menu {
  transition-property: opacity, transform, box-shadow, border-color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-emphasized);
}
@media (hover: hover) and (pointer: fine) {
  .inspiration-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1); }
}

/* ---- 3.14 减少动态效果 ---- */
@media (prefers-reduced-motion: reduce) {
  .primary, .ghost, .primary-nav-item, .top-action, .theme-toggle,
  .filter-trigger, .card, .inspiration-card, .poster-visual {
    transition-duration: 0.01ms !important;
  }
}

/* ---- v3.2 API 自动检测开关 ---- */
.auto-health-field { margin-top: 16px; }
.auto-health-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; cursor: pointer; user-select: none;
}
.auto-health-label { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.16px; }
.auto-health-switch { position: relative; display: inline-block; flex-shrink: 0; }
.auto-health-switch input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2;
}
.auto-health-track {
  display: inline-block; width: 44px; height: 26px; border-radius: 980px;
  background: var(--fill-neutral); transition: background-color var(--duration-fast) var(--ease);
}
.auto-health-thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: transform 180ms var(--ease-emphasized);
}
.auto-health-switch input:checked ~ .auto-health-track { background: var(--accent); }
.auto-health-switch input:checked ~ .auto-health-track .auto-health-thumb { transform: translateX(18px); }
.auto-health-switch input:focus-visible ~ .auto-health-track {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.auto-health-switch input:disabled ~ .auto-health-track { opacity: 0.42; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .auto-health-thumb, .auto-health-track { transition-duration: 0.01ms !important; }
}

/* =========================================================
   KUTU DESIGN LANGUAGE · v3.3 — 创作台精简版
   原则：整页只突出一个核心动作「上传图片」
        · 上传区深底 + 细深灰边 · 图标 28px 灰→橙
        · 标题缩小 ~12% · 顶栏压缩减弱发光
        · 点阵透明 -30% · 首次进入一次性提示
        · 橙色仅用于交互态（hover / dragging / active）
   ========================================================= */

/* ---- 3.3.1 创作台点阵透明度降低 30%（8% → 5.6%）---- */
:root {
  --studio-dot: color-mix(in srgb, var(--text) 5.6%, transparent);
}

/* ---- 3.3.2 上传区：深底 + 细深灰边 + 更克制 ---- */
body.studio-upload-active #dropzone,
#dropzone.upload {
  min-height: 280px;
  border: 2px dashed color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--field) 82%, var(--card));
  box-shadow: none;
  transform: none;
}
body.studio-upload-active #dropzone:hover,
#dropzone.upload:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--field) 100%, var(--card));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  transform: none;
}
body.studio-upload-active #dropzone.dragging,
#dropzone.upload.dragging {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 56%, var(--card));
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12);
  transform: scale(1.003);
}

/* ---- 3.3.3 上传图标：28px，默认灰，hover/拖入变橙 ---- */
.drop-icon {
  width: 36px; height: 36px;
  color: var(--muted-strong);
  transition: color var(--duration-fast) var(--ease);
}
.drop-icon .ri-icon { width: 28px; height: 28px; }
.upload:hover .drop-icon,
.upload.dragging .drop-icon { color: var(--accent); }

/* ---- 3.3.4 标题字号缩小约 12%，保持纯文字色 ---- */
.hero h1 {
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: clamp(-3px, -.05em, -1.6px);
}
.hero h1 span {
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ---- 3.3.5 顶栏压缩 + 减弱发光与边框存在感 ---- */
body > .appbar {
  min-height: 56px;
  padding-block: 8px;
  border-color: color-mix(in srgb, var(--border) 48%, transparent);
  box-shadow: 0 6px 18px rgba(18, 19, 22, .035);
}
body > .appbar::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 24%);
}

/* ---- 3.3.6 「创作台」选中状态弱化 ---- */
body > .appbar .primary-nav-item.active {
  color: var(--text-soft);
  background: transparent;
  box-shadow: none;
  font-weight: 700;
}
body > .appbar .primary-nav-item.active::after { background: var(--muted); transform: scaleX(0.6); }

/* ---- 3.3.7 首次进入一次性 pulse 提示（不循环）---- */
@keyframes dropzone-hint-once {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  45%  { box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .14); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
#dropzone.dropzone-hint-once {
  animation: dropzone-hint-once 1100ms var(--ease-emphasized) 1;
}
@media (prefers-reduced-motion: reduce) {
  #dropzone.dropzone-hint-once { animation: none; }
}

/* =========================================================
   KUTU DESIGN LANGUAGE · v3.4 — Apple continuous corners
   Radius grows with surface size; circles and pills are reserved
   for controls whose shape communicates their interaction.
   ========================================================= */
:root {
  --radius-compact: 8px;
  --radius-control: 12px;
  --radius-action: 14px;
  --radius-group: 16px;
  --radius-surface: 22px;
  --radius-modal: 26px;
  --radius-pill: 999px;
}

/* Standard interactive controls */
button,
input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
select,
textarea,
.filter-trigger,
.filter-option,
.whole-prompt-apply,
.element-upload-action,
.element-reference-remove,
.text-collapse-toggle,
.canvas-tool,
.canvas-zoom-button,
.canvas-zoom-reset {
  border-radius: var(--radius-control);
}

.primary { border-radius: var(--radius-action); }
.ghost,
.top-action,
.region-toggle,
.overall-adjust { border-radius: var(--radius-control); }

/* Segmented controls, tags and status chips */
.primary-nav,
.primary-nav-item,
.tone-opt,
.style-opt,
.type-tag,
.status-pill,
.viewer-bottom-bar,
.auto-health-track,
.subcategory-tabs,
.category-count {
  border-radius: var(--radius-pill);
}

/* Small nested elements */
.step-index,
.dna-row,
.status,
.conn-details,
.element-inventory-empty,
.element-reference-preview,
.element-edit-summary-item,
.element-edit-summary-empty,
.reference-hotspot,
.reference-hotspot span,
.overlap-picker,
.overlap-picker button,
.inspiration-toast,
.viewer-color-swatch::after {
  border-radius: var(--radius-compact);
}

/* Nested groups and media are softer than their parent surface. */
.advanced-prompt,
.file-preview,
.element-reference-upload,
.inline-text-editor .text-editor-empty,
.result-command-panel,
.result-comparison,
.comparison-image-button,
.generation-reference-frame,
.generation-result-frame,
.color-custom,
.color-custom-item,
.primary-nav-menu,
.filter-popover,
.filter-options,
.account-stat,
.creator-entry,
.creator-upload {
  border-radius: var(--radius-group);
}

/* Main content surfaces */
.card,
.panel,
.upload,
.preview,
.inspiration-card,
.poster-visual,
.poster-image-visual,
.card-hover,
.generation-visual,
.studio-generation-view,
.studio-result-view,
.artwork-card,
.faq details,
.empty-state {
  border-radius: var(--radius-surface);
}

/* Large floating layers */
.account-modal,
.config-drawer,
.text-editor-modal,
.lightbox,
#studioView[data-stage="create"] #inputPanel,
#studioView[data-stage="create"] #remixCard {
  border-radius: var(--radius-modal);
}

/* Semantically circular controls stay circular. */
.remove,
.file-remove,
.drawer-close,
.context-close,
.theme-toggle,
.theme-icon,
.viewer-action,
.viewer-nav,
.artwork-star,
.viewer-color-swatch,
.viewer-color-dot,
.color-swatch,
.auto-health-thumb,
.account-profile > span {
  border-radius: 50%;
}

/* The color picker is intentionally visible and touch-friendly. */
#contextFields .color-swatches { grid-template-columns: repeat(5, 48px); gap: 14px 12px; }
#contextFields .color-swatch {
  width: 48px;
  max-width: 48px;
  min-height: 48px;
}
#contextFields .color-swatch.keep {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  border-radius: 50%;
}
#contextFields .field > .hint { margin-top: 10px; }

/* Progressive enhancement for Apple's continuous-corner silhouette. */
@supports (corner-shape: squircle) {
  button,
  input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
  select,
  textarea,
  .card,
  .panel,
  .upload,
  .preview,
  .advanced-prompt,
  .inspiration-card,
  .poster-visual,
  .account-modal,
  .config-drawer,
  .text-editor-modal,
  #studioView[data-stage="create"] #inputPanel,
  #studioView[data-stage="create"] #remixCard {
    corner-shape: squircle;
  }
}

/* Account and utility pages: one centered heading pattern, without back buttons. */
.account-view > .account-page-head {
  justify-content: center;
  text-align: center;
}
.account-view > .account-page-head .account-page-title {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.account-view > .account-page-head .account-page-title > div {
  min-width: 0;
  text-align: center;
}
.account-view > .account-page-head .account-page-title h1,
.account-view > .account-page-head .account-page-title p {
  text-align: center;
}
.account-view > .account-page-head .utility-page-icon {
  margin-inline: auto;
}
.recharge-records-page-head .utility-page-title {
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Image and recognition regions share one transformable coordinate system. */
.reference-scene {
  position: absolute;
  z-index: 1;
  transform-origin: center center;
  will-change: transform;
}
.reference-scene > #preview,
.reference-scene > .reference-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none !important;
}
.reference-scene > #preview {
  z-index: 1;
}
.reference-scene > .reference-overlay {
  z-index: 2;
}

/* Generated artworks live in the same transformable coordinate system as the
   reference image, so panning and zooming keep the relationship intact. */
.generation-canvas-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}
.generation-canvas-node {
  position: absolute;
  pointer-events: auto;
  user-select: none;
  animation: generation-canvas-enter 260ms var(--ease, ease-out) both;
}
.generation-canvas-pending {
  display: grid;
  box-sizing: border-box;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--muted-strong);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-soft) 82%, #b7bac0), color-mix(in srgb, var(--card-soft) 74%, #a8acb3));
  pointer-events: none;
}
.generation-canvas-pending strong { color: var(--text-soft); font-size: 14px; }
.generation-canvas-pending small { color: var(--muted); font-size: 11px; }
.generation-canvas-node.is-latest {
  z-index: 2;
}
.generation-canvas-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-strong));
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 18px 38px rgba(18, 19, 22, .16), 0 0 0 5px color-mix(in srgb, var(--accent) 9%, transparent);
  cursor: zoom-in;
  -webkit-user-drag: none;
}
.generation-canvas-node:not(.is-latest) .generation-canvas-image {
  box-shadow: 0 12px 28px rgba(18, 19, 22, .12);
}
.generation-canvas-download {
  position: absolute;
  top: 12px;
  left: calc(100% + 12px);
  z-index: 3;
  display: inline-flex;
  min-width: 88px;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent);
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 10px 28px rgba(18, 19, 22, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  pointer-events: none;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: opacity 160ms ease, transform 160ms var(--ease), visibility 160ms;
}
.generation-canvas-download .ri-icon { width: 17px; height: 17px; }
.generation-canvas-download span { font-size: 12px; font-weight: 700; }
.generation-canvas-node:hover .generation-canvas-download,
.generation-canvas-node:focus-within .generation-canvas-download {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.generation-canvas-download:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.generation-canvas-download:active { background: color-mix(in srgb, var(--card) 84%, var(--accent-soft)); }
.generation-canvas-download:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.generation-canvas-label {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--card) 85%, transparent);
}
@keyframes generation-canvas-enter {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .generation-canvas-node { animation: none; }
  .generation-canvas-download { transition: none; }
}

@media (max-width: 1100px), (hover: none) {
  .generation-canvas-download {
    top: 12px;
    right: 12px;
    left: auto;
    min-width: 44px;
    padding: 0;
  }
  .generation-canvas-download span { display: none; }
}

@media (hover: none) {
  .generation-canvas-download {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
}

/* Keep the editing rail visible during generation, but make the current
   creation immutable until the request settles. Panning and zooming remain
   available on the canvas so the reference and pending artwork stay browsable. */
#studioView.is-generation-locked .reference-overlay { pointer-events: none; }
#studioView.is-generation-locked .context-panel-head,
#studioView.is-generation-locked .context-panel-scroll,
#studioView.is-generation-locked .same-style-action-bar { opacity: .62; }
#studioView.is-generation-locked #remixCard,
#studioView.is-generation-locked #remixPromptCard,
#studioView.is-generation-locked #sameStyleActionBar { cursor: not-allowed; }

/* Account menu: text-only, centered routes with no redundant decoration. */
.account-menu .account-menu-avatar,
.account-menu .account-menu-item-icon,
.account-menu .account-menu-arrow,
.account-menu .account-menu-points-icon,
.account-menu .account-menu-points-action .ri-icon {
  display: none;
}
.account-menu-head {
  justify-content: center;
  padding: 12px 8px 14px;
  text-align: center;
}
.account-menu-identity {
  flex: 0 1 auto;
}
.account-menu-name-line {
  justify-content: center;
}
.account-menu-email {
  text-align: center;
}
.account-menu .account-menu-item {
  position: relative;
  justify-content: center;
  padding-inline: 14px;
  text-align: center;
}
.account-menu .account-menu-item-copy {
  flex: 0 1 auto;
  justify-items: center;
}
.account-menu .account-menu-count,
.account-menu .account-menu-tag {
  position: absolute;
  right: 14px;
  margin-left: 0;
}
.account-menu .account-menu-points {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.account-menu .account-menu-points-copy {
  justify-items: center;
}
.account-menu .account-menu-points-action {
  display: none;
}

/* Utility pages: retain the task content, remove explanatory filler. */
.account-view .utility-page-icon,
.account-view .utility-section-icon,
.account-view .account-page-title > p,
.account-view .section-heading .card-kicker,
.account-view .step-index {
  display: none;
}
.account-view .account-page-head,
.account-view .account-page-title,
.account-view .utility-page-title,
.account-view .section-heading {
  justify-content: center;
  text-align: center;
}
.account-view .account-page-single,
.account-view .records-card,
.account-view .favorites-card,
.account-view .help-center-card {
  margin-inline: auto;
}

/* Creation workspace: compact, balanced cards around the full reference image. */
@media (min-width: 821px) {
  body.studio-active:has(#studioView[data-stage="create"]) #mainContent.page {
    height: calc(100dvh - 76px);
    padding: 12px clamp(16px, 1.5vw, 24px);
  }

  #studioView[data-stage="create"] {
    gap: 12px;
    padding: 0;
  }

  #studioView[data-stage="create"] .workspace {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 16px;
    height: auto;
    min-height: 0;
  }

  #studioView[data-stage="create"] #inputPanel {
    height: 100%;
    min-height: 0;
    border: 1px solid var(--border) !important;
    border-radius: 20px;
    background: var(--card) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  #studioView[data-stage="create"] #inputPanel::after {
    display: none;
  }

  #studioView[data-stage="create"] #inputPanel:hover {
    border-color: var(--border-strong) !important;
    background: var(--card) !important;
    box-shadow: var(--shadow-md) !important;
  }

  #studioView[data-stage="create"] .upload,
  #studioView[data-stage="create"] .preview {
    height: 100%;
    min-height: 0;
    border-radius: 18px;
  }

  #studioView[data-stage="create"] #remixCard {
    height: 100%;
    max-height: none;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
  }

  #studioView[data-stage="create"] #remixCard:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
  }

  #studioView[data-stage="create"] #remixCard .context-panel-head {
    padding-top: 16px;
  }

  #studioView[data-stage="create"] .same-style-action-bar {
    min-height: 52px;
    padding-block: 6px;
  }
}

/* 顶部账户入口必须保持正圆，避免被通用按钮圆角规则覆盖。 */
#accountBtn.account-action {
  flex: 0 0 44px;
  width: 44px;
  aspect-ratio: 1;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 3px;
  border-radius: 50% !important;
  overflow: hidden;
}
#accountBtn.account-action > .account-avatar { border-radius: 50% !important; }

/* 创作台：参考图画布与识别结果栏都与顶部导航保持统一的 20px 呼吸间距。 */
#studioView[data-stage="create"] .workspace {
  margin-top: 20px !important;
}

/* Keep the appbar account trigger circular even when shared button styles change. */
.appbar #accountBtn.account-action {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 3px;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
}
.appbar #accountBtn.account-action > .account-avatar { border-radius: 50% !important; }

/* A menu is a reading list: align its text to one baseline, then center the card. */
.account-menu-head {
  justify-content: flex-start;
  padding: 12px 14px 14px;
  text-align: left;
}
.account-menu-identity {
  flex: 1 1 auto;
}
.account-menu-name-line {
  justify-content: flex-start;
}
.account-menu-email {
  text-align: left;
}
.account-menu .account-menu-item {
  justify-content: flex-start;
  min-height: 46px;
  padding-inline: 14px;
  text-align: left;
}
.account-menu .account-menu-item-copy {
  flex: 1 1 auto;
  justify-items: start;
}
.account-menu .account-menu-count,
.account-menu .account-menu-tag {
  position: static;
  margin-left: auto;
}
.account-menu .account-menu-group + .account-menu-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   Creation settings layout — a clear four-zone workspace:
   global app bar / reference canvas / settings inspector / action rail.
   This stays at the end of the stylesheet to supersede the previous studio
   iterations while leaving upload, generation and result stages untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 821px) {
  body.studio-active:has(#studioView[data-stage="create"]) #mainContent.page {
    height: calc(100dvh - 76px);
    padding: 12px clamp(16px, 1.5vw, 24px);
    overflow: hidden;
  }

  #studioView[data-stage="create"] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  #studioView[data-stage="create"] .workspace {
    grid-template-columns: minmax(0, 2.7fr) minmax(320px, 1fr);
    gap: clamp(16px, 1.35vw, 22px);
    align-items: stretch;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  #studioView[data-stage="create"] #inputPanel,
  #studioView[data-stage="create"] #remixCard {
    height: 100%;
    min-height: 0;
    margin: 0;
    border: 1px solid var(--border) !important;
    border-radius: 20px;
    background: var(--card) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  #studioView[data-stage="create"] #inputPanel {
    overflow: hidden;
  }

  #studioView[data-stage="create"] .upload,
  #studioView[data-stage="create"] .preview {
    height: 100%;
    min-height: 0;
    border-radius: 19px;
  }

  #studioView[data-stage="create"] #remixCard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #studioView[data-stage="create"] #remixCard .context-panel-head {
    flex: 0 0 auto;
    padding: 18px 20px 14px;
  }

  #studioView[data-stage="create"] #remixCard .context-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 20px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #studioView[data-stage="create"] .same-style-action-bar {
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
  }
}

@media (max-width: 1100px) and (min-width: 821px) {
  #studioView[data-stage="create"] .workspace {
    grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
    gap: 16px;
  }
}

@media (max-width: 820px) {
  #studioView[data-stage="create"] {
    display: block;
    height: auto;
    padding: 12px 0 32px;
    overflow: visible;
  }

  #studioView[data-stage="create"] .workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    height: auto;
    overflow: visible;
  }

  #studioView[data-stage="create"] .same-style-action-bar {
    margin-top: 16px;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #studioView[data-stage="create"] #inputPanel,
  #studioView[data-stage="create"] #remixCard,
  #studioView[data-stage="create"] .same-style-action-bar {
    transition: none;
  }
}

@media (max-width: 820px) {
  .appbar .api-status-pill,
  .appbar .points-trigger,
  .appbar .theme-toggle {
    width: auto;
    min-width: 0;
    padding-inline: 12px;
  }
  #accountBtn.account-action {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 3px;
    border-radius: 50% !important;
  }
  .account-menu {
    position: fixed;
    top: 82px;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(340px, calc(100vw - 32px));
    max-height: calc(100dvh - 98px);
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    transform: translateX(-50%);
    transform-origin: top center;
    animation: none;
  }
  .account-menu::before {
    display: none;
  }
}

/* Both edit modes stay outside the independently scrolling form. */
#remixCard .edit-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: 4px;
  margin: 12px 20px 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--field);
}
#remixCard .edit-mode-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted-strong);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
#remixCard .edit-mode-switch button[aria-pressed="true"] {
  border-color: var(--border);
  color: var(--text);
  background: var(--card);
}
#remixCard .edit-mode-switch button:hover { color: var(--text); }
#remixCard .edit-mode-switch button:focus-visible,
#remixCard .quick-element-editor input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#allElementsCount { font-size: 12px; color: var(--muted-strong); }
#remixCard .quick-edit-panel { padding-top: 20px; }
#remixCard .quick-edit-intro { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#remixCard .quick-edit-intro strong { color: var(--text); font-size: 14px; }
#remixCard .quick-edit-intro span { color: var(--muted-strong); font-size: 12px; }
#remixCard .quick-edit-hint { margin: 10px 0 20px; color: var(--muted-strong); font-size: 12px; line-height: 1.7; }
#remixCard .quick-edit-fields { display: grid; gap: 20px; }
#remixCard .quick-edit-group { min-width: 0; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
#remixCard .quick-edit-group h3 { margin: 0 0 12px; color: var(--text); font-size: 14px; font-weight: 600; }
#remixCard .quick-element-editor { display: grid; gap: 8px; min-width: 0; margin: 0; }
#remixCard .quick-element-editor + .quick-element-editor { margin-top: 16px; }
#remixCard .quick-element-editor > label { margin: 0; color: var(--text-soft); font-size: 12px; font-weight: 500; }
#remixCard .quick-element-editor > input { width: 100%; min-width: 0; min-height: 44px; font-size: 14px; }
#remixCard .quick-field-status { color: var(--muted-strong); font-size: 11px; line-height: 1.5; }
#remixCard .quick-field-status.is-filled { color: var(--success); }
#remixCard .quick-element-editor .element-reference-upload { margin-top: 0; padding: 10px; }
#remixCard .quick-element-editor .element-reference-head { gap: 8px; }
#remixCard .quick-element-editor .element-reference-head small { display: none; }
#remixCard .quick-element-editor .element-reference-head strong { font-size: 12px; }
#remixCard .quick-element-editor .element-upload-action { min-height: 44px; flex-shrink: 0; }
#remixCard .quick-element-editor .element-reference-status:empty { display: none; }
#remixCard .quick-element-editor .element-reference-preview { min-width: 0; }
#remixCard .quick-element-editor .element-reference-preview > span { min-width: 0; overflow-wrap: anywhere; }
#remixCard #quickMoreDescHost { margin-top: 20px; }
#remixCard #quickMoreDescHost .field { display: grid; gap: 8px; }
#remixCard #quickMoreDescHost textarea { min-height: 110px; resize: vertical; }
#remixCard .quick-edit-empty { color: var(--muted-strong); font-size: 13px; line-height: 1.7; }
#studioView[data-stage="create"] #remixCard.is-quick-overview #contextEmpty { display: none !important; }
#studioView[data-stage="create"] #remixCard.is-quick-overview #contextFields { display: none !important; }
#studioView[data-stage="create"] .generation-edit-summary { max-width: 250px; color: var(--muted-strong); font-size: 12px; line-height: 1.5; text-align: right; }
#studioView.is-generation-locked .edit-mode-switch { pointer-events: none; opacity: .55; }
@media (max-width: 820px) {
  #remixCard .edit-mode-switch { margin-inline: 14px; }
  body.studio-active:has(#studioView[data-stage="create"]) { height: auto; overflow-y: auto; }
  body.studio-active:has(#studioView[data-stage="create"]) #mainContent.page { height: auto; min-height: 0; overflow: visible; }
  #studioView[data-stage="create"] #remixCard { display: flex; flex-direction: column; max-height: 78dvh; overflow: hidden; }
  #studioView[data-stage="create"] #remixCard .context-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  #studioView[data-stage="create"] .same-style-action-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px; }
  #studioView[data-stage="create"] .same-style-action-bar .selection-summary { grid-column: 1 / -1; }
  #studioView[data-stage="create"] .change-summary-popover { max-width: calc(100vw - 80px); }
  #studioView[data-stage="create"] .same-style-action-bar .reset-edits,
  #studioView[data-stage="create"] .same-style-action-bar .overall-adjust { grid-column: 1; justify-self: start; }
  #studioView[data-stage="create"] .generation-action { grid-column: 2; grid-row: 2 / span 2; flex-direction: column; align-items: stretch; gap: 6px; }
  #studioView[data-stage="create"] .generation-action #generateBtn { width: 100%; min-width: 0; padding-inline: 16px; white-space: nowrap; }
  #studioView[data-stage="create"] .generation-edit-summary { width: 100%; max-width: none; font-size: 11px; text-align: center; }
}

/* Shared horizontal shell: artwork library, creation workspace and action bar
   follow the exact outer edges of the floating navigation. */
body.inspiration-active #mainContent.page,
body.studio-active:has(#studioView[data-stage="create"]) #mainContent.page {
  width: var(--app-shell-width);
  max-width: none;
  margin-inline: auto;
  padding-right: 0;
  padding-left: 0;
}

body.inspiration-active #inspirationView,
#studioView[data-stage="create"] .workspace,
#studioView[data-stage="create"] .same-style-action-bar {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

/* Final cascade: keep the shipped surface aligned with KUTU Design Language. */
.card,
.panel { border-radius: 14px; box-shadow: var(--shadow-sm); }
.card:hover,
.panel:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.primary { border-radius: 999px; background: var(--accent); box-shadow: none; }
.primary:hover:not(:disabled) { background: var(--accent-strong); box-shadow: none; transform: none; }
.ghost { border-radius: 999px; border-color: transparent; background: var(--field); }
.ghost:hover:not(:disabled) { border-color: transparent; background: color-mix(in srgb, var(--field) 78%, var(--text)); transform: none; }
.top-action,
.filter-trigger,
.inspiration-search { box-shadow: none; }
.top-action:hover:not(:disabled),
.inspiration-search:focus-within { transform: none; }
.upload:hover,
.upload.dragging { box-shadow: 0 0 0 1px var(--accent); transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}