:root {
  --ink: #f5f1e8;
  --muted: #a19e9b;
  --line: rgba(255,255,255,.1);
  --accent: #d6ff5f;
  --coral: #ff735c;
  --shadow: 0 1.5rem 4rem rgba(0,0,0,.28);
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.4rem;
  --space-xl: 1.8rem;
  --radius-sm: .65rem;
  --radius-md: 1rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background-color: #0b0c0c; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 3.5rem 3.5rem; }
body {
  min-width: 20rem;
  overflow-x: hidden;
  background-color: #0b0c0c;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  color: var(--ink);
  font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif;
  font-size: .9rem;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1 { white-space: nowrap; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.7rem); line-height: .98; font-weight: 400; }
h2 { font-size: 1.35rem; font-weight: 500; }
.app-shell { position: relative; width: 100%; min-width: 1200px; height: 100vh; padding-top: 4.5rem; }
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 60; min-height: 4.5rem; padding: .9rem clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: rgba(11,12,12,.86); backdrop-filter: blur(1rem); }
.brand { display: flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; color: var(--accent); font-size: 1.6rem; }
.brand b, .brand small { display: block; }
.brand b { font-size: 1.15rem; letter-spacing: .08em; }
.brand small, .eyebrow, .batch-label { color: var(--muted); font-size: .72rem; letter-spacing: .16em; }
.topbar-actions { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .85rem; }
.topbar-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 1px solid rgba(214,255,95,.35); border-radius: .5rem; background: rgba(214,255,95,.08); color: var(--accent); font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.topbar-btn:hover { background: rgba(214,255,95,.16); border-color: var(--accent); }
.queue-dot { width: .45rem; height: .45rem; flex: none; border-radius: 50%; background: var(--muted); transition: background .2s; }
.topbar-actions.running .queue-dot { background: var(--accent); box-shadow: 0 0 .8rem var(--accent); animation: pulse 1s infinite; }
.icon-button { padding: .35rem; border: 0; background: none; color: var(--muted); }
.icon-button:hover { color: var(--accent); }

/* 固定工作台：由 .app-shell 固定设计尺寸 + transform scale 整体等比缩放适配移动端 */
html { overflow: hidden; }
body { overflow: hidden; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; width: 100%; height: calc(100vh - 4.5rem); min-height: 0; margin: 0; overflow: hidden; }
.settings-panel, .stage-panel, .history-drawer, .prompt-dock { min-width: 0; min-height: 0; }
.settings-heading { display: grid; gap: .3rem; margin-bottom: var(--space-lg); }
.settings-heading strong { font-size: .88rem; }
.settings-heading small { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.param-popover .mode-switch { display: flex; gap: .35rem; margin-bottom: var(--space-lg); }
.param-popover .mode { flex: 1; padding: .5rem .4rem; border: 1px solid var(--line); border-radius: .45rem; background: rgba(255,255,255,.035); color: var(--muted); font-size: .72rem; }
.param-popover .mode small { display: block; margin-top: .15rem; font-size: .52rem; color: var(--muted); }
.param-popover .mode.active { border-color: rgba(214,255,95,.6); background: rgba(214,255,95,.12); color: var(--accent); }
.control-section { margin-top: var(--space-lg); }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.chip { padding: .18rem .4rem; border: 1px solid rgba(214,255,95,.2); border-radius: 999px; color: var(--accent); font-size: .62rem; white-space: nowrap; }
.model-card { display: flex; align-items: center; gap: .6rem; padding: .8rem; border: 1px solid rgba(214,255,95,.36); border-radius: var(--radius-sm); background: rgba(214,255,95,.07); }
.model-card > span:nth-child(2) { min-width: 0; flex: 1; }
.model-card b, .model-card small { display: block; }
.model-card b { font-size: .82rem; }
.model-card small { margin-top: .2rem; overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.model-icon { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: .45rem; background: var(--accent); color: #0b0c0c; font-weight: 700; }
.check { color: var(--accent); }
.segmented, .quick-counts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; }
.segmented button, .quick-counts button, .ratio-grid button { border: 1px solid var(--line); border-radius: .45rem; background: rgba(255,255,255,.035); color: var(--muted); }
.segmented button { padding: .6rem .25rem; font-size: .78rem; }
.segmented small { display: block; margin-top: .15rem; font-size: .6rem; }
.segmented button.selected, .quick-counts button.selected, .ratio-grid button.selected { border-color: rgba(214,255,95,.6); background: rgba(214,255,95,.12); color: var(--accent); }
.select-wrap { position: relative; }
.select-wrap select { width: 100%; appearance: none; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: .45rem; outline: 0; background: rgba(255,255,255,.04); color: var(--ink); }
.select-wrap span { position: absolute; top: 50%; right: .7rem; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ratio-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.ratio-grid button { min-height: 2.2rem; font-size: .74rem; }
.quantity-row { display: grid; grid-template-columns: minmax(0,1fr); gap: .5rem; }
.quick-counts button { min-height: 2rem; font-size: .7rem; }
.quantity-input { position: relative; display: block; }
.quantity-input span { position: absolute; top: 50%; left: .35rem; transform: translateY(-50%); color: var(--muted); font-size: .6rem; }
.quantity-input input { width: 100%; padding: .65rem .2rem .65rem 1.1rem; border: 1px solid var(--line); border-radius: .45rem; background: rgba(255,255,255,.04); color: var(--ink); -moz-appearance: textfield; appearance: none; }
.quantity-input input::-webkit-outer-spin-button, .quantity-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cost-card { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: var(--space-lg); padding: .95rem; border: 1px solid rgba(214,255,95,.18); border-radius: var(--radius-sm); background: rgba(214,255,95,.055); }
.cost-card span, .cost-card small { display: block; }
.cost-card span { font-size: .76rem; white-space: nowrap; }
.cost-card small { margin-top: .2rem; color: var(--muted); font-size: .62rem; white-space: nowrap; }
.cost-card strong { color: var(--accent); font-size: 1.3rem; white-space: nowrap; }
.cost-card strong span { display: inline; }
.secure-note { margin-top: var(--space-lg); color: var(--muted); font-size: .66rem; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stage-panel { grid-column: 1; grid-row: 1; position: relative; width: 100%; height: 100%; min-width: 0; overflow: hidden; background: rgba(11,12,12,.18); }
.stage-heading { position: absolute; top: 1.4rem; left: 0; right: 0; margin: 0 auto; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 .8rem; width: min(100%, 96rem); padding: 0 .5rem; pointer-events: none; opacity: .82; }
.stage-heading .eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
.stage-heading .batch-label { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; padding: .2rem .3rem; }
.stage-heading h1 { grid-column: 1 / -1; grid-row: 2; margin-top: .2rem; text-align: center; white-space: nowrap; justify-self: center; }
/* "ChatGPT Imagine 2.0" 柔和流光：低对比、缓慢掠过，不张扬 */
.brand-glow {
  background: linear-gradient(90deg, #dfe6e9, #9fb3c8, #ffeaa7, #dfe6e9);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glow-flow 8s linear infinite;
}
@keyframes glow-flow { to { background-position: 200% 0; } }
/* 标题前缀丝滑轮播：利用先进 ↔ 自主思考 ↔ 灵感迸发，每 4.5s 切换、0.5s 淡入淡出 */
.swap-words { position: relative; display: inline-block; }
.swap-words .sw { display: inline-block; white-space: nowrap; opacity: 0; animation: swapWord 13.5s ease-in-out infinite; animation-fill-mode: both; }
.swap-words .sw-a { animation-delay: 0s; }
.swap-words .sw-b { position: absolute; left: 0; top: 0; animation-delay: 4.5s; }
.swap-words .sw-c { position: absolute; left: 0; top: 0; animation-delay: 9s; }
@keyframes swapWord {
  0% { opacity: 0; }
  3.7% { opacity: 1; }
  29.6% { opacity: 1; }
  33.3% { opacity: 0; }
  100% { opacity: 0; }
}
.batch-label strong { margin-left: .25rem; color: var(--accent); }
.topbar-actions #clearResults:hover {
  border-color: var(--coral);
  background: rgba(255,115,92,.2);
  color: #ff9d8c;
}
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: var(--space-md); width: min(100%, 56rem); min-height: 0; margin: 0 auto; overflow-y: auto; scrollbar-gutter: stable; }
.empty-state { grid-column: 1 / -1; width: min(100%, 30rem); margin: auto; padding: 3rem 1rem; text-align: center; }
.empty-glyph { display: block; margin-bottom: .75rem; color: var(--accent); font-size: 3rem; line-height: 1; }
.empty-state h2 { margin-bottom: .5rem; }
.empty-state p { color: var(--muted); font-size: .75rem; }
.result-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.035); box-shadow: var(--shadow); }
.result-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.result-actions { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .55rem .7rem; }
.result-actions a { color: var(--accent); text-decoration: none; font-size: .7rem; }
.favorite-button { border: 0; background: transparent; color: var(--muted); font-size: .7rem; }
.favorite-button.active { color: var(--accent); }

.history-drawer { position: absolute; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 2rem; background: rgba(0,0,0,.6); backdrop-filter: blur(.5rem); }
.history-drawer.open { display: flex; }
.history-card { width: min(46rem, 94vw); height: min(82vh, 46rem); display: flex; flex-direction: column; overflow: hidden; padding: var(--space-xl) var(--space-lg); border: 1px solid rgba(214,255,95,.25); border-radius: var(--radius-md); background: #111213; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.5); }
.drawer-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.drawer-heading h2 { margin-top: .4rem; }
.drawer-note, .history-empty { color: var(--muted); font-size: .68rem; line-height: 1.5; }
.history-search { width: 100%; margin: var(--space-md) 0 .75rem; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: .45rem; outline: 0; background: rgba(255,255,255,.05); color: var(--ink); }
.history-tabs { display: flex; gap: .4rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line); }
.history-tabs button { padding: .5rem .25rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: .68rem; }
.history-tabs button.selected { border-color: var(--accent); color: var(--accent); }
.history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .7rem; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; align-content: start; padding: .3rem; }
.history-item { display: flex; flex-direction: column; position: relative; gap: .35rem; overflow: hidden; }
.history-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: .5rem; overflow: hidden; background: rgba(255,255,255,.05); cursor: zoom-in; border: 1px solid var(--line); }
.history-thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.history-thumb.placeholder { color: var(--muted); font-size: .62rem; }
.history-caption { min-width: 0; overflow: hidden; }
.history-caption b, .history-caption small { display: block; }
.history-caption b { overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.history-caption small { margin-top: .1rem; overflow: hidden; color: var(--muted); font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.history-actions { position: absolute; top: .3rem; right: .3rem; z-index: 2; display: flex; gap: .25rem; }
.history-item .favorite-button { padding: .15rem .3rem; border: 0; background: rgba(0,0,0,.5); color: var(--muted); font-size: .6rem; border-radius: .3rem; cursor: pointer; }
.history-item .favorite-button.active { color: var(--accent); }
.delete-button { padding: .15rem .3rem; border: 0; background: rgba(0,0,0,.5); color: var(--muted); font-size: .6rem; border-radius: .3rem; cursor: pointer; }
.delete-button:hover { color: var(--coral); background: rgba(255,115,92,.2); }
.storage-actions { display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: var(--space-md); }
.storage-actions input, #referenceImages, #importHistory { display: none; }
.danger-button { width: 100%; margin-top: .6rem; padding: .55rem; border: 1px solid rgba(255,115,92,.32); border-radius: .45rem; background: transparent; color: var(--coral); font-size: .68rem; }
.danger-button:hover { background: rgba(255,115,92,.1); }
.danger-button span { display:block; margin-top:.25rem; color:var(--muted); font-size:.58rem; font-weight:400; }

.prompt-dock { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 30; width: min(56rem, calc(100vw - 3rem)); max-height: 68dvh; overflow-y: auto; padding: .7rem 1.1rem 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-md); background: rgba(19,20,20,.72); backdrop-filter: blur(1.2rem); box-shadow: 0 1rem 3rem rgba(0,0,0,.4); }
.prompt-dock[hidden] { display: none; }
.prompt-dock.anchored { bottom: auto; transform: none; }
.prompt-dock.dock-smooth { transition: left .5s cubic-bezier(.22,1,.36,1), top .5s cubic-bezier(.22,1,.36,1); }
.prompt-dock > * { width: min(100%, 72rem); margin-inline: auto; }
.prompt-toolbar { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; position: relative; }
.param-trigger { flex: 1; min-width: 0; display: flex; align-items: center; gap: .55rem; padding: .55rem .85rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); background: rgba(19,20,20,.6); color: var(--ink); cursor: pointer; }
.param-trigger:hover { border-color: rgba(214,255,95,.35); }
.tb-mode { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .5rem; border: 1px solid rgba(214,255,95,.35); border-radius: 999px; color: var(--accent); font-size: .66rem; font-weight: 700; white-space: nowrap; }
.tb-mode::before { content: '✦'; font-size: .5rem; }
.tb-params { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.param-chevron { margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.param-trigger[aria-expanded="true"] .param-chevron { transform: rotate(180deg); }
.param-popover { position: fixed; z-index: 70; width: min(32rem, calc(100vw - 2rem)); max-height: 60dvh; overflow-y: auto; padding: .7rem .8rem .8rem; border: 1px solid rgba(214,255,95,.25); border-radius: var(--radius-sm); background: #111213; box-shadow: 0 1rem 2.4rem rgba(0,0,0,.5); }
.param-popover[hidden] { display: none; }
.param-popover .settings-heading { gap: .05rem; margin-bottom: .5rem; }
.param-popover .settings-heading strong { font-size: .92rem; }
.param-popover .settings-heading small { font-size: .74rem; }
.param-popover .mode-switch { gap: .25rem; margin-bottom: .6rem; }
.param-popover .mode { padding: .45rem .4rem; font-size: .82rem; }
.param-popover .mode small { margin-top: .05rem; font-size: .56rem; }
.param-popover .control-section { margin-top: .65rem; }
.param-popover .field-label { margin-bottom: .3rem; font-size: .88rem; }
.param-popover .segmented { display: flex; justify-content: center; gap: .3rem; }
.param-popover .segmented button { flex: none; padding: .45rem .8rem; font-size: 1rem; white-space: nowrap; }
.param-popover .quick-counts { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .25rem; }
.param-popover .segmented small { display: inline; margin-left: .2rem; font-size: .7rem; }
.param-popover #qualityOptions button { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.param-popover #qualityOptions button i { display: inline; margin-left: .3rem; font-style: normal; color: var(--muted); font-size: .78rem; }
.param-popover .ratio-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.param-popover .ratio-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 3rem; padding: .35rem .2rem; font-size: .74rem; }
.param-popover .ratio-grid button i { display: block; border: 1px solid var(--muted); border-radius: 2px; opacity: .7; }
.param-popover .ratio-grid button.selected i { border-color: var(--accent); opacity: 1; }
.param-popover .quick-counts button { width: 100%; padding: .4rem .2rem; min-height: auto; font-size: .9rem; }
.param-popover .quantity-input input { padding: .4rem .15rem .4rem .95rem; font-size: .94rem; }
.param-popover .cost-card { margin-top: .65rem; padding: .55rem .7rem; }
.param-popover .cost-card span { font-size: .84rem; }
.param-popover .cost-card small { font-size: .56rem; }
.param-popover .cost-card strong { font-size: 1.05rem; }
.param-popover .reference-box { margin-top: .6rem; }
.param-popover .upload-zone { min-height: 3rem; gap: .15rem; padding: .35rem .5rem; }
.param-popover .upload-zone > span { font-size: 1.1rem; }
.param-popover .upload-zone b { font-size: .58rem; }
.param-popover .upload-zone small { font-size: .5rem; }
.param-popover .preview-list { margin-top: .35rem; gap: .25rem; }
.prompt-tabs { display: flex; align-items: stretch; gap: .35rem; overflow-x: auto; padding-bottom: .35rem; }
.prompt-tabs > div { display: flex; gap: .35rem; min-width: 0; }
.prompt-tab, .add-prompt { display: flex; min-height: 2.65rem; align-items: center; gap: .4rem; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.035); color: var(--muted); }
.prompt-tab b { color: var(--accent); font-size: .7rem; }
.prompt-tab span, .prompt-tab small { display: block; max-width: 8rem; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.prompt-tab span { color: var(--ink); font-size: .7rem; }
.prompt-tab small { font-size: .56rem; }
.prompt-tab.selected { border-color: rgba(214,255,95,.55); background: rgba(214,255,95,.09); }
.add-prompt { min-width: 2.5rem; justify-content: center; color: var(--accent); font-size: 1.2rem; }
.prompt-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .25rem; }
.mode-switch { display: flex; gap: .35rem; }
.mode { padding: .45rem .6rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: .72rem; }
.mode small { display: block; margin-top: .15rem; font-size: .52rem; }
.mode.active { border-color: var(--accent); color: var(--accent); }
.prompt-meta { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; color: var(--muted); font-size: .64rem; }
.prompt-input-wrap { position: relative; width: 100%; }
.prompt-input-wrap textarea { display: block; width: 100%; min-height: 6rem; max-height: 11rem; resize: none; scrollbar-width: none; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: 0; background: rgba(255,255,255,.05); color: var(--ink); line-height: 1.6; }
.prompt-input-wrap textarea::-webkit-scrollbar { display: none; }
.prompt-input-wrap textarea:focus { border-color: rgba(214,255,95,.55); box-shadow: 0 0 0 .15rem rgba(214,255,95,.06); }
.prompt-input-wrap .prompt-editor { display:block; width:100%; min-height:6rem; max-height:11rem; overflow-y:auto; scrollbar-width:none; padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:var(--radius-sm); outline:0; background:rgba(255,255,255,.05); color:var(--ink); line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.prompt-input-wrap .prompt-editor::-webkit-scrollbar { display:none; }
.prompt-input-wrap .prompt-editor:focus { border-color:rgba(214,255,95,.55); box-shadow:0 0 0 .15rem rgba(214,255,95,.06); }
.prompt-input-wrap .prompt-editor:empty::before { content:attr(data-placeholder); color:var(--muted); pointer-events:none; }
.mention-chip { display:inline-block; padding:.05rem .45rem; margin:0 .15rem; border-radius:.3rem; background:rgba(214,255,95,.16); border:1px solid rgba(214,255,95,.5); color:var(--accent); font-size:.9em; font-weight:600; white-space:nowrap; user-select:all; }
.prompt-count { position: absolute; top: .6rem; right: .9rem; color: var(--muted); font-size: .6rem; pointer-events: none; }
.prompt-toolbar .generate-button { flex: none; min-width: 0; padding: .55rem 1.1rem; border: 1px solid var(--accent); border-radius: .5rem; background: var(--accent); color: #0b0c0c; font-weight: 700; font-size: .72rem; }
.prompt-input-wrap .generate-button span { margin-right: .2rem; }
.prompt-input-wrap .generate-button b { margin-left: .25rem; font-size: .6rem; }
.generate-button { min-width: 13rem; padding: .75rem 1rem; border: 1px solid var(--accent); border-radius: .55rem; background: var(--accent); color: #0b0c0c; font-weight: 700; }
.generate-button:disabled { cursor: not-allowed; opacity: .38; }
.generate-button.loading { opacity: .65; }
.generate-button span { margin-right: .25rem; }
.generate-button b { margin-left: .35rem; font-size: .66rem; }
.new-node-button { flex: none; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: .5rem; background: rgba(255,255,255,.04); color: var(--ink); font-size: .7rem; font-weight: 600; cursor: pointer; transition: border-color .18s, background .18s, color .18s, transform .12s; white-space: nowrap; }
.new-node-button:hover { border-color: var(--accent); background: rgba(214,255,95,.08); color: var(--accent); }
.new-node-button:active { transform: translateY(1px); }
.text-button { padding: .3rem .45rem; border: 0; background: transparent; color: var(--muted); font-size: .66rem; }
.text-button:hover { color: var(--accent); }
.hidden { display: none !important; }
.task-list { display: none; }
.task-card { display: flex; align-items: center; gap: .5rem; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: .5rem; background: rgba(255,255,255,.035); }
.task-card > div { min-width: 0; flex: 1; }
.task-card b, .task-card small { display: block; }
.task-card b { font-size: .65rem; }
.task-card small { margin-top: .15rem; overflow: hidden; color: var(--muted); font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.task-indicator { width: .45rem; height: .45rem; flex: none; border-radius: 50%; background: var(--muted); }
.task-card.running .task-indicator { background: var(--accent); box-shadow: 0 0 .7rem var(--accent); animation: pulse 1s infinite; }
.task-card.failed .task-indicator { background: var(--coral); }
.task-card.done .task-indicator { background: var(--accent); }
@keyframes pulse { 50% { opacity: .35; } }

.reference-box { margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .3s ease, margin-top .45s cubic-bezier(.22,1,.36,1); }
.reference-box.open { margin-top: var(--space-lg); max-height: 40rem; opacity: 1; }
.upload-zone { display: grid; min-height: 6rem; place-items: center; align-content: center; gap: .3rem; padding: .7rem; border: 1px dashed rgba(214,255,95,.35); border-radius: var(--radius-sm); background: rgba(214,255,95,.04); text-align: center; cursor: pointer; }
.reference-box.dragging .upload-zone { border-color: var(--accent); background: rgba(214,255,95,.12); }
.upload-zone > span { color: var(--accent); font-size: 1.5rem; }
.upload-zone b { font-size: .65rem; }
.upload-zone small { color: var(--muted); font-size: .55rem; }
.preview-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)) !important; gap: .35rem; margin-top: .55rem; position: relative; }
.param-popover .preview-list, #previewList, .reference-box .preview-list { display: grid !important; position: relative; }
#previewList .preview-item, .preview-list .preview-item { position: relative !important; display: block !important; float: none !important; width: auto !important; height: auto !important; aspect-ratio: 1; margin: 0 !important; }
/* dock 吸附参考图预览：横排小图，仅有参考图时显示 */
.dock-preview-list { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; padding:.35rem .1rem 0; }
.dock-preview-list[hidden] { display:none !important; }
.dock-preview-item { position:relative; width:44px; height:44px; border-radius:.35rem; overflow:hidden; border:1px solid var(--line); cursor:grab; }
.dock-preview-item img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none; user-select:none; }
.dock-preview-item button { position:absolute; top:0; right:0; width:1rem; height:1rem; border:none; border-radius:0 0 0 .3rem; background:rgba(0,0,0,.65); color:#fff; font-size:.6rem; line-height:1; cursor:pointer; }
.dock-preview-item button:hover { background:rgba(239,68,68,.85); }
.dock-preview-item .dock-preview-label, .preview-item .preview-label { position:absolute; left:0; right:0; bottom:0; padding:.08rem 0; background:rgba(0,0,0,.68); color:#fff; font-size:.55rem; line-height:1.2; text-align:center; pointer-events:none; }
.preview-item { position:relative; }.preview-item, .dock-preview-item { user-select: none; touch-action: none; }.dock-preview-item.drag-over { border-color:var(--accent); }
.dock-preview-item:hover, .preview-item:hover { border-color:var(--accent); box-shadow:0 0 0 2px rgba(214,255,95,.3); }
.preview-item { cursor:pointer; }
.prompt-dock.drag-over .prompt-input-wrap textarea, .prompt-dock.drag-over .prompt-input-wrap .prompt-editor { border-color:var(--accent); box-shadow:0 0 0 2px rgba(214,255,95,.35); }
.preview-item { position: relative; width: 100%; height: auto; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: .45rem; cursor: grab; background: #111; flex: none; }
.preview-item img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.preview-item button { position: absolute; top: .2rem; right: .2rem; width: 1.25rem; height: 1.25rem; border: 0; border-radius: 50%; background: rgba(0,0,0,.72); color: #fff; }

body { color-scheme: dark; }

body, .settings-panel, .stage-panel, .history-drawer, .history-card, .history-list, .prompt-dock, .param-popover { scrollbar-width: thin; scrollbar-color: rgba(214,255,95,.4) transparent; }
body::-webkit-scrollbar, .settings-panel::-webkit-scrollbar, .stage-panel::-webkit-scrollbar, .history-drawer::-webkit-scrollbar, .history-card::-webkit-scrollbar, .history-list::-webkit-scrollbar, .prompt-dock::-webkit-scrollbar, .param-popover::-webkit-scrollbar { width: .13rem; height: .13rem; }
body::-webkit-scrollbar-track, .settings-panel::-webkit-scrollbar-track, .stage-panel::-webkit-scrollbar-track, .history-drawer::-webkit-scrollbar-track, .history-card::-webkit-scrollbar-track, .history-list::-webkit-scrollbar-track, .prompt-dock::-webkit-scrollbar-track, .param-popover::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb, .settings-panel::-webkit-scrollbar-thumb, .stage-panel::-webkit-scrollbar-thumb, .history-drawer::-webkit-scrollbar-thumb, .history-card::-webkit-scrollbar-thumb, .history-list::-webkit-scrollbar-thumb, .prompt-dock::-webkit-scrollbar-thumb, .param-popover::-webkit-scrollbar-thumb { border: .04rem solid transparent; border-radius: 999rem; background: rgba(214,255,95,.32); background-clip: padding-box; }

/* 自研主题下拉框 */
.custom-select { position: relative; }
.custom-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: .45rem; background: rgba(255,255,255,.04); color: var(--ink); }
.custom-select-trigger:hover { border-color: rgba(214,255,95,.4); }
.custom-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-caret { color: var(--muted); transition: transform .2s ease; }
.custom-select.open .custom-select-caret { transform: rotate(180deg); }
.custom-select-menu { position: absolute; z-index: 30; top: calc(100% + .35rem); left: 0; right: 0; overflow: hidden; border: 1px solid rgba(214,255,95,.25); border-radius: .55rem; background: #111213; box-shadow: 0 1rem 2.5rem rgba(0,0,0,.4); }
.custom-select-option { display: block; width: 100%; padding: .6rem .7rem; border: 0; background: transparent; color: var(--muted); text-align: left; }
.custom-select-option:hover { background: rgba(214,255,95,.08); color: var(--ink); }
.custom-select-option.selected { color: var(--accent); background: rgba(214,255,95,.1); }

/* 自研主题弹窗 */
.modal-root { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 1rem; }
.history-list-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.history-list-view[hidden] { display: none; }
.history-viewer { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; }
.history-viewer[hidden] { display: none; }
.viewer-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.viewer-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; background: rgba(0,0,0,.2); border-radius: var(--radius-sm); }
.viewer-stage img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; transform-origin: center; transition: transform .08s ease; user-select: none; }
.viewer-caption { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.viewer-caption p { font-size: .8rem; color: var(--ink); line-height: 1.5; word-break: break-word; }
.viewer-caption small { color: var(--muted); font-size: .62rem; }
.viewer-actions { display: flex; gap: .5rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.viewer-action { flex: 1; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: .45rem; background: rgba(255,255,255,.04); color: var(--ink); font-size: .68rem; cursor: pointer; transition: background .15s, border-color .15s; }
.viewer-action:hover { background: rgba(255,255,255,.08); border-color: var(--accent); }
.viewer-action.danger { color: var(--coral); border-color: rgba(255,115,92,.32); }
.viewer-action.danger:hover { background: rgba(255,115,92,.1); border-color: var(--coral); }
.viewer-toast { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%) translateY(.5rem); padding: .5rem 1rem; border-radius: .5rem; background: rgba(17,18,19,.95); color: var(--ink); font-size: .72rem; border: 1px solid var(--line); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 999; }
.viewer-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* 全局 toast：顶部弹出，荧光描边，按类型着色 */
.toast-root { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 2000; pointer-events: none; width: min(92vw, 30rem); }
.toast-item { display: inline-flex; align-items: flex-start; gap: .5rem; padding: .62rem .9rem; border-radius: .55rem; background: rgba(16,17,18,.97); border: 1px solid var(--line); color: var(--ink); font-size: .82rem; font-weight: 600; line-height: 1.4; box-shadow: 0 .5rem 1.4rem rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); opacity: 0; transform: translateY(-.5rem); transition: opacity .22s, transform .22s; }
.toast-item.show { opacity: 1; transform: translateY(0); }
.toast-item.ok { border-color: rgba(214,255,95,.55); color: var(--accent); }
.toast-item.err { border-color: rgba(239,68,68,.55); color: #ff9a9a; }
.toast-item.warn { border-color: rgba(245,158,11,.55); color: #ffc46b; }
/* 页面缩放控件：固定右下角，反向补偿 zoom 保持自身大小不变 */
#page-zoom-ctl { position:fixed; right:14px; bottom:14px; z-index:2100; display:flex; align-items:center; gap:2px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); background:rgba(17,18,19,.95); box-shadow:0 6px 18px rgba(0,0,0,.4); user-select:none; }
/* 底部公告条：单行高度；短文本静态居中，长文本无缝横向循环滚动 */
.announcement-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; height: 2rem; display: flex; align-items: center; overflow: hidden; background: rgba(11,12,12,.92); border-top: 1px solid var(--line); backdrop-filter: blur(.5rem); }
.announcement-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; }
.announcement-item { padding: 0 1.5rem; color: var(--ink); font-size: .85rem; }#page-zoom-ctl .pz-btn { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.06); color:var(--ink); font-size:14px; cursor:pointer; line-height:1; }
#page-zoom-ctl .pz-btn:hover { border-color:var(--accent); color:var(--accent); }
#page-zoom-ctl .pz-val { min-width:44px; text-align:center; font-size:12px; font-weight:600; color:var(--accent); cursor:pointer; }
/* 画布恢复中遮罩：恢复完成后由 app.js 移除，避免初始布局闪切 */
.canvas-loading { position:absolute; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; background:rgba(8,9,9,.65); backdrop-filter:blur(.3rem); }
.canvas-loading[hidden] { display:none !important; }

/* ==========================================================================
   移动端：流体等比缩放
   变量公式取 M=375px、D=820px（移动端仅在 <=820px 生效），clamp 保证连续缩放。
   仅作用于 .m-view 移动端布局，桌面端隐藏，不影响 PC。
   ========================================================================== */
:root {
  --m-h1: clamp(1.3rem, calc(1.142rem + 0.676vw), 1.75rem);
  --m-h2: clamp(1rem, calc(0.93rem + 0.3vw), 1.2rem);
  --m-body: clamp(.82rem, calc(0.785rem + 0.15vw), .92rem);
  --m-small: clamp(.7rem, calc(0.672rem + 0.12vw), .78rem);
  --m-tiny: clamp(.62rem, calc(0.592rem + 0.12vw), .7rem);
  --m-xs: clamp(.35rem, calc(0.297rem + 0.225vw), .5rem);
  --m-sm: clamp(.6rem, calc(0.53rem + 0.3vw), .8rem);
  --m-md: clamp(.85rem, calc(0.762rem + 0.376vw), 1.1rem);
  --m-lg: clamp(1.1rem, calc(0.994rem + 0.451vw), 1.4rem);
  --m-gap: clamp(.5rem, calc(0.43rem + 0.3vw), .7rem);
  --m-radius: clamp(.7rem, calc(0.594rem + 0.451vw), 1rem);
  --m-node: clamp(9.5rem, calc(8.62rem + 3.756vw), 12rem);
  --m-bar: clamp(3rem, calc(2.824rem + 0.751vw), 3.5rem);
}
.m-view { display: none; }
.m-lightbox-actions { display: none; }

@media (max-width: 820px) {
  /* 隐藏桌面端布局，仅显示移动端视图 */
  .app-shell, #page-zoom-ctl, .announcement-bar { display: none !important; }
  .m-view {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;   /* 固定视口高度，让内部 .m-main 负责滚动 */
    min-height: 0;
    width: 100%; color: var(--ink);
    overflow: hidden;
  }
  /* 全屏加载动画：默认覆盖，加载完成后 JS 移除 */
  .m-loading { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: #0b0c0c; }
  .m-loading-inner { display: flex; flex-direction: column; align-items: center; gap: var(--m-sm); color: var(--muted); font-size: var(--m-small); }
  .m-loading-spin { width: var(--m-node); height: var(--m-node); max-width: 3.4rem; max-height: 3.4rem; border: calc(var(--m-xs) * .6) solid rgba(214,255,95,.15); border-top-color: var(--accent); border-radius: 50%; animation: mspin .8s linear infinite; }
  .m-loading-text { letter-spacing: .08em; }
  .m-topbar {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: var(--m-sm) var(--m-md); border-bottom: 1px solid var(--line);
    background: rgba(11,12,12,.9); backdrop-filter: blur(1rem);
    position: sticky; top: 0; z-index: 20;
  }
  .m-brand { display: flex; align-items: center; gap: var(--m-xs); text-decoration: none; color: inherit; }
  .m-brand-mark { display: grid; place-items: center; color: var(--accent); font-size: var(--m-lg); width: var(--m-lg); }
  .m-brand-name { font-size: var(--m-body); font-weight: 700; letter-spacing: .04em; }
  .m-brand-name small { display: block; font-size: var(--m-tiny); color: var(--muted); letter-spacing: .12em; }
  .m-top-actions { display: flex; align-items: center; gap: var(--m-xs); }
  .m-balance { display: inline-flex; align-items: center; gap: var(--m-xs); padding: var(--m-xs) var(--m-sm); border: 1px solid var(--line); border-radius: 999px; font-size: var(--m-small); color: var(--muted); white-space: nowrap; }
  .m-balance b { color: var(--accent); font-size: var(--m-h2); font-variant-numeric: tabular-nums; font-weight: 700; }
  .m-icon-btn.m-redeem-btn { width: auto; display: inline-flex; align-items: center; padding: var(--m-xs) var(--m-sm); color: var(--accent); font-weight: 600; border: 1px solid rgba(214,255,95,.5); border-radius: calc(var(--m-radius) * .6); background: none; white-space: nowrap; }
  .m-icon-btn.m-redeem-btn:active { color: var(--accent); border-color: var(--accent); filter: brightness(1.1); }
  .m-redeem-full { font-weight: 600; }
  .m-icon-btn { width: var(--m-bar); height: var(--m-bar); display: grid; place-items: center; background: none; border: 1px solid var(--line); border-radius: var(--m-radius); color: var(--muted); font-size: var(--m-body); }
  .m-icon-btn:active { color: var(--accent); border-color: var(--accent); }
  .m-notice { flex: none; padding: var(--m-xs) var(--m-md); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--m-small); white-space: nowrap; overflow: hidden; }
  .m-notice-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; }
  .m-notice-item { white-space: nowrap; }
  .m-notice b { color: var(--accent); }
  .m-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: calc(env(safe-area-inset-bottom) + var(--m-md)); }
  .m-cache-bar { flex: none; padding: var(--m-xs) var(--m-md) calc(var(--m-xs) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .m-cache-clear { width: 100%; padding: var(--m-sm); border: 1px solid var(--line); border-radius: calc(var(--m-radius) * .6); background: rgba(255,255,255,.03); color: var(--muted); font-size: var(--m-small); cursor: pointer; }
  .m-cache-clear:active { border-color: var(--coral); color: var(--coral); }
  .m-cache-size { color: var(--accent); font-weight: 600; }
  .m-strip-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: var(--m-sm) var(--m-md); }
  .m-strip-head b { font-size: var(--m-body); font-weight: 600; }
  .m-strip-head span { font-size: var(--m-tiny); color: var(--muted); }
  .m-strip {
    flex: none; display: flex; gap: var(--m-gap); overflow-x: auto; padding: 0 var(--m-md) var(--m-sm);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .m-strip::-webkit-scrollbar { display: none; }
  .m-node {
    flex: 0 0 auto; width: var(--m-node); height: var(--m-node);
    border-radius: var(--m-radius); border: 1px solid var(--line); background: #111213;
    display: grid; place-items: center; position: relative; overflow: hidden;
  }
  .m-node.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(214,255,95,.25), 0 0 1.2rem rgba(214,255,95,.15); }
  .m-node.empty { border-style: dashed; border-color: rgba(255,255,255,.16); }
  .m-node img { max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; width: auto; height: auto; border-radius: calc(var(--m-radius) * .6); object-fit: contain; display: block; opacity: 0; transition: opacity .25s ease; }
  .m-ph { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.03); }
  .m-spin { width: 1.5rem; height: 1.5rem; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--accent); border-radius: 50%; animation: mspin .8s linear infinite; }
  @keyframes mspin { to { transform: rotate(360deg); } }
  .m-node .m-zoom { position: absolute; top: var(--m-xs); right: var(--m-xs); width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(0,0,0,.5); color: var(--muted); font-size: var(--m-body); z-index: 2; }
  .m-node .m-zoom:active { border-color: var(--accent); color: var(--accent); }
  .m-node .m-del { position: absolute; top: var(--m-xs); right: var(--m-xs); width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(0,0,0,.5); color: var(--muted); font-size: var(--m-body); z-index: 2; }
  .m-node .m-del:active { border-color: var(--accent); color: var(--accent); }
  .m-node .m-ver-badge { position: absolute; top: var(--m-xs); left: var(--m-xs); z-index: 2; padding: .15rem .4rem; border: 1px solid rgba(214,255,95,.45); border-radius: .3rem; background: rgba(8,9,9,.75); color: var(--accent); font-size: var(--m-tiny); font-weight: 700; }
  .m-node .m-ver-nav { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
  .m-node .m-ver-nav .m-v-prev, .m-node .m-ver-nav .m-v-next { pointer-events: auto; border: none; background: none; color: #fff; font-size: var(--m-h1); font-weight: 700; line-height: 1; cursor: pointer; text-shadow: 0 0 .3rem rgba(0,0,0,.9); }
  .m-node .m-ver-nav .m-v-count { color: var(--muted); font-size: var(--m-tiny); padding: .05rem .3rem; background: rgba(0,0,0,.45); border-radius: .3rem; }
  .m-node .m-ver-nav button:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
  .m-node.m-skel { border-style: dashed; border-color: rgba(255,255,255,.18); }
  .m-skel-text { position: absolute; bottom: .5rem; left: 0; right: 0; text-align: center; font-size: var(--m-tiny); color: var(--muted); line-height: 1.5; }
  .m-empty { color: var(--muted); font-size: var(--m-small); padding: var(--m-md); text-align: center; }
  .m-panel { flex: 1 1 auto; padding: 0 var(--m-md) var(--m-md); border-top: 1px solid var(--line); }
  .m-field { margin-top: var(--m-sm); }
  .m-field-label { display: flex; justify-content: space-between; align-items: center; font-size: var(--m-small); color: var(--muted); margin-bottom: var(--m-xs); }
  .m-field-label b { color: var(--ink); font-weight: 600; }
  .m-ratio { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--m-xs) * .6); }
  .m-ratio button, .m-seg button { padding: var(--m-sm) 0; font-size: var(--m-body); white-space: nowrap; border: 1px solid var(--line); border-radius: calc(var(--m-radius) * .6); background: rgba(255,255,255,.03); transition: all .15s; }
  .m-ratio button.selected, .m-seg button.selected { border-color: var(--accent); background: rgba(214,255,95,.1); color: var(--accent); font-weight: 600; }
  .m-ratio button i { display: inline-block; vertical-align: middle; margin-right: .3rem; border: 1px solid rgba(255,255,255,.55); border-radius: .15rem; }
  .m-node.m-add { border-style: dashed; border-color: rgba(255,255,255,.16); }
  .m-add-plus { color: var(--muted); font-size: var(--m-lg); pointer-events: none; }
  .m-seg { display: flex; gap: calc(var(--m-xs) * .6); }
  .m-seg button { flex: 1; }
  .m-mode { display: flex; gap: calc(var(--m-xs) * .6); margin-top: var(--m-sm); }
  .m-mode button { flex: 1; padding: var(--m-sm) 0; font-size: var(--m-small); border: 1px solid var(--line); border-radius: calc(var(--m-radius) * .6); background: rgba(255,255,255,.03); }
  .m-mode button.selected { border-color: var(--accent); background: rgba(214,255,95,.1); color: var(--accent); font-weight: 600; }  .m-seg button small { display: inline; font-size: var(--m-small); color: var(--muted); margin-left: 3px; }
  .m-seg button i { font-style: normal; margin-left: .18rem; color: var(--muted); font-size: .78em; }
  .m-seg button.selected small { color: var(--accent); }  .m-mode .m-new { border: 1px dashed rgba(255,255,255,.28); color: var(--muted); }
  .m-new-row { display: flex; align-items: stretch; gap: calc(var(--m-xs) * .6); margin-top: var(--m-sm); }
  .m-new-row .m-new { flex: 0 0 auto; padding: var(--m-sm) var(--m-sm); border: 1px dashed rgba(255,255,255,.28); border-radius: calc(var(--m-radius) * .6); background: rgba(255,255,255,.03); color: var(--muted); font-size: var(--m-small); }
  .m-new-row .m-ref { flex: 1; margin-top: 0; }
  .m-node.m-placeholder { border-style: dashed; border-color: rgba(255,255,255,.22); background: transparent; }
  .m-node.m-placeholder .m-ph-hint { color: var(--muted); font-size: var(--m-tiny); text-align: center; line-height: 1.5; opacity: .85; }
  .m-node.m-loading { border: 1px solid rgba(214,255,95,.4); background: rgba(214,255,95,.05); }
  .m-node.m-loading .m-skel-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .m-node.m-loading .m-timer { position: absolute; top: 6px; right: 6px; font-size: var(--m-tiny); color: var(--accent); background: rgba(0,0,0,.5); padding: .1rem .4rem; border-radius: .4rem; font-variant-numeric: tabular-nums; }
  .m-ref { display: flex; align-items: center; justify-content: center; gap: var(--m-xs); min-height: var(--m-bar); border: 1px dashed rgba(255,255,255,.2); border-radius: calc(var(--m-radius) * .6); color: var(--muted); font-size: var(--m-small); background: rgba(255,255,255,.02); }
  .m-ref-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--m-bar), 1fr)); gap: calc(var(--m-xs) * .7); margin-top: var(--m-xs); }
  .m-ref-item { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--m-xs); overflow: hidden; border: 1px solid var(--line); cursor: pointer; }
  .m-ref-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
  .m-ref-item .preview-label { position: absolute; left: 0; right: 0; bottom: 0; padding: .08rem 0; background: rgba(0,0,0,.68); color: #fff; font-size: var(--m-tiny); line-height: 1.2; text-align: center; pointer-events: none; }
  .m-ref-item button { position: absolute; top: 0; right: 0; width: 1.1rem; height: 1.1rem; border: none; border-radius: 0 0 0 .3rem; background: rgba(0,0,0,.65); color: #fff; font-size: var(--m-tiny); line-height: 1; cursor: pointer; }
  .m-ref-item button:hover { background: rgba(239,68,68,.85); }
  .m-cost { margin-top: var(--m-sm); display: flex; justify-content: space-between; align-items: center; padding: var(--m-sm) var(--m-sm); border: 1px solid var(--line); border-radius: calc(var(--m-radius) * .6); }
  .m-cost span { font-size: var(--m-small); color: var(--muted); }
  .m-cost strong { color: var(--accent); font-size: var(--m-h2); font-variant-numeric: tabular-nums; }
  .m-prompt-wrap { margin-top: var(--m-sm); position: relative; }
  .m-prompt { height: calc(var(--m-bar) * 2.4); min-height: calc(var(--m-bar) * 2.4); overflow-y: auto; overflow-x: hidden; padding: var(--m-sm) var(--m-sm); border: 1px solid var(--line); border-radius: calc(var(--m-radius) * .6); background: rgba(255,255,255,.03); font-size: var(--m-body); line-height: 1.6; outline: none; word-break: break-word; }
  .m-prompt:empty::before { content: attr(data-placeholder); color: var(--muted); }
  .m-prompt-count { position: absolute; right: var(--m-sm); bottom: var(--m-xs); font-size: var(--m-tiny); color: var(--muted); }
  .m-generate { width: 100%; margin-top: var(--m-sm); padding: var(--m-md) 1rem; border: 1px solid var(--accent); border-radius: var(--m-radius); background: var(--accent); color: #0b0c0c; font-weight: 700; font-size: var(--m-body); letter-spacing: .02em; }
  .m-generate:active { filter: brightness(.92); transform: translateY(1px); }
  .m-generate:disabled { opacity: .45; cursor: not-allowed; }
  /* 移动端放大查看：原比例 contain 全屏，图片区更高，不溢出 */
  .image-lightbox { padding: .9rem; }
  .image-lightbox img { max-width: 100%; max-height: calc(100% - 4.6rem); width: auto; height: auto; }
  .m-lightbox-actions { display: flex; flex-direction: column; gap: var(--m-sm); position: absolute; left: 0; right: 0; bottom: calc(var(--m-md) + var(--m-lg) + env(safe-area-inset-bottom)); align-items: center; z-index: 2; }
  .m-lightbox-prompt { max-width: calc(100% - 2 * var(--m-md)); color: var(--muted); font-size: var(--m-small); line-height: 1.5; text-align: center; word-break: break-word; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .m-lightbox-btn-row { display: flex; gap: var(--m-sm); justify-content: center; }
  .m-lightbox-actions button { padding: var(--m-sm) var(--m-lg); border: 1px solid rgba(255,255,255,.3); border-radius: calc(var(--m-radius) * .6); background: rgba(0,0,0,.5); color: var(--ink); font-size: var(--m-body); }
  .m-lightbox-actions button:active { border-color: var(--accent); color: var(--accent); }
}
.canvas-loading .canvas-spinner { position:static; width:2rem; height:2rem; margin:0; border:3px solid rgba(214,255,95,.25); border-top-color:var(--accent); border-radius:50%; animation:canvas-spin .8s linear infinite; }
.canvas-loading .loading-message { color:var(--muted); font-size:.8rem; }

/* ---------- 管理员配置页 ---------- */
body.admin-page {
  min-height: 100vh;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  overflow: auto;
  background-color: #080909;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(214,255,95,.1), transparent 34rem),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, 3.5rem 3.5rem, 3.5rem 3.5rem;
}

.admin-card {
  position: relative;
  width: min(100%, 34rem);
  padding: clamp(1.8rem, 5vw, 3.2rem);
  border: 1px solid rgba(214,255,95,.24);
  border-radius: 1.1rem;
  background: linear-gradient(145deg, rgba(25,27,27,.94), rgba(13,14,14,.92));
  box-shadow: 0 2rem 5rem rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.025) inset;
  overflow: hidden;
}

.admin-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2rem;
  right: 2rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 1.5rem rgba(214,255,95,.45);
}

.back-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 2.6rem;
  color: var(--muted);
  font-size: .78rem;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}

.back-link:hover {
  color: var(--accent);
  transform: translateX(-3px);
}

.admin-card > .eyebrow {
  display: block;
  margin-bottom: .7rem;
  color: var(--accent);
  font-size: .68rem;
}

.admin-card h1 {
  margin-bottom: .9rem;
  font-family: Georgia, serif;
  font-size: clamp(2rem, 7vw, 3.3rem);
  line-height: 1;
  letter-spacing: -.04em;
  white-space: normal;
}

.admin-intro {
  max-width: 27rem;
  margin-bottom: 2rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}

.admin-card form {
  display: grid;
  gap: .65rem;
}

.admin-card .field-label {
  margin-bottom: .1rem;
  color: var(--ink);
  font-size: .78rem;
}

.admin-input {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .6rem;
  outline: 0;
  background: rgba(255,255,255,.055);
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.admin-input::placeholder { color: #6f7470; }
.admin-input:focus {
  border-color: rgba(214,255,95,.7);
  background: rgba(214,255,95,.045);
  box-shadow: 0 0 0 .2rem rgba(214,255,95,.08);
}

.admin-card .generate-button {
  width: 100%;
  margin-top: .7rem;
  border-radius: .6rem;
  transition: filter .18s ease, transform .18s ease;
}

.admin-card .generate-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.form-message {
  min-height: 1.4rem;
  margin-top: 1rem;
  font-size: .78rem;
  line-height: 1.5;
}

.form-message.success { color: var(--accent); }
.form-message.error { color: var(--coral); }

.status-box {
  margin-top: 1rem;
  padding: .8rem .9rem;
  border: 1px solid rgba(214,255,95,.18);
  border-radius: .6rem;
  background: rgba(214,255,95,.055);
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
}

@media (max-width: 640px) {
  body.admin-page { padding: 1rem; }
  .admin-card { padding: 1.6rem; }
  .back-link { margin-bottom: 2rem; }
}

.modal-root[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(.4rem); }
.modal { position: relative; z-index: 1; width: min(100%, 24rem); border: 1px solid rgba(214,255,95,.25); border-radius: var(--radius-md); background: #111213; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.5); transform: translateY(1rem); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.modal-root.open .modal { transform: translateY(0); opacity: 1; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.1rem .6rem; }
.modal-title { font-size: .9rem; font-weight: 600; }
.modal-body { padding: 0 1.1rem 1rem; }
.modal-message { color: var(--muted); font-size: .78rem; line-height: 1.6; }
.modal-input { width: 100%; margin-top: .75rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: .45rem; outline: 0; background: rgba(255,255,255,.05); color: var(--ink); }
.modal-input:focus { border-color: rgba(214,255,95,.55); box-shadow: 0 0 0 .15rem rgba(214,255,95,.06); }
.modal-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: 0 1.1rem 1.1rem; }
.modal-button { padding: .6rem 1rem; border: 1px solid var(--line); border-radius: .5rem; background: rgba(255,255,255,.05); color: var(--ink); font-size: .75rem; }
.modal-button.primary { border-color: var(--accent); background: var(--accent); color: #0b0c0c; font-weight: 700; }
.modal-button.danger { border-color: var(--coral); background: transparent; color: var(--coral); }
.modal-button.ghost { background: transparent; }
.modal-button:hover { filter: brightness(1.1); }

/* ---------- 无限画布 ---------- */
.generate-button .spinner { display:inline-block; width:1em; height:1em; border:2px solid rgba(11,12,12,.3); border-top-color:#0b0c0c; border-radius:50%; margin-right:.4rem; vertical-align:middle; animation: canvas-spin .8s linear infinite; }
.generate-button.loading { cursor:wait; }
.generate-button:active { transform: translateY(1px); filter: brightness(.92); }
@keyframes canvas-spin { to { transform: rotate(360deg); } }
@keyframes loading-orbit { 0%, 100% { transform:scale(.8) rotate(0deg); opacity:.45; } 50% { transform:scale(1.25) rotate(180deg); opacity:1; } }
.canvas-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; z-index: 2; will-change: transform; }
.canvas-viewport.dragging { cursor:grabbing; }
.canvas-world { position:absolute; left:50%; top:50%; display:flex; align-items:center; gap:2.2rem; transform: translate(calc(-50% + var(--pan-x,0px)), calc(-50% + var(--pan-y,0px))) scale(var(--zoom,1)); will-change:transform; }
.canvas-frame { position:relative; width:320px; height:320px; flex:none; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(255,255,255,.035); overflow:hidden; transition:width .55s cubic-bezier(.22,1,.36,1), height .55s cubic-bezier(.22,1,.36,1); }
.canvas-frame.node-enter { z-index: 6; animation: node-in .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes node-in { from { opacity: 0; transform: scale(.9) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.canvas-frame.empty { border:1px dashed rgba(214,255,95,.4); background:rgba(214,255,95,.04); }
.canvas-frame.frame-selected { z-index: 5; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(214,255,95,.55), 0 0 1.4rem rgba(214,255,95,.28); }
.canvas-frame.empty::before { content:''; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 50%, rgba(214,255,95,.07), transparent); }
.frame-hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; color:var(--muted); font-size:.66rem; text-align:center; line-height:1.5; }
.canvas-frame.loading { border:1px solid rgba(214,255,95,.4); background:rgba(214,255,95,.05); }
.canvas-frame .canvas-spinner { position:absolute; inset:0; margin:auto; width:1.8rem; height:1.8rem; border:3px solid rgba(214,255,95,.25); border-top-color:var(--accent); border-radius:50%; animation:canvas-spin .8s linear infinite; }
.loading-orbit { position:absolute; inset:0; display:grid; place-items:center; color:var(--accent); font-size:1.15rem; text-shadow:0 0 1rem var(--accent); animation:loading-orbit 1.2s ease-in-out infinite; pointer-events:none; z-index:1; }
.frame-timer { position:absolute; top:.65rem; right:.65rem; z-index:2; padding:.25rem .45rem; border:1px solid rgba(214,255,95,.38); border-radius:.35rem; background:rgba(8,9,9,.72); color:var(--accent); font-variant-numeric:tabular-nums; font-size:.72rem; letter-spacing:.03em; box-shadow:0 0 .8rem rgba(214,255,95,.12); }
.placeholder-label { position:absolute; left:0; right:0; bottom:1rem; padding:0 .75rem; overflow:hidden; text-align:center; color:var(--muted); font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; }
.loading-message { color:var(--ink); font-size:.64rem; letter-spacing:.03em; text-overflow:clip; }
.thinking-dots { display:inline-flex; gap:.18rem; margin-left:.28rem; vertical-align:middle; }
.thinking-dots i { width:.22rem; height:.22rem; border-radius:50%; background:var(--accent); opacity:.25; animation:thinking-dot 1.2s ease-in-out infinite; }
.thinking-dots i:nth-child(2) { animation-delay:.18s; }
.thinking-dots i:nth-child(3) { animation-delay:.36s; }
@keyframes thinking-dot { 0%, 100% { opacity:.2; transform:translateY(0) scale(.8); } 45% { opacity:1; transform:translateY(-.18rem) scale(1.15); } }
.canvas-frame.done img { display: block; width: 100%; height: 100%; object-fit: contain; }
.canvas-frame.done .stack-image { position:absolute; inset:0; width:100%; height:100%; border:1px solid rgba(214,255,95,.35); border-radius:var(--radius-md); object-fit:cover; pointer-events:none; transform:translate(18px,18px) scale(.94); opacity:.62; filter:saturate(.7) brightness(.7); z-index:0; }
.canvas-frame.done .stack-image.stack-2 { transform:translate(9px,9px) scale(.97); opacity:.8; z-index:1; }
.canvas-frame.done .result-image { position:relative; z-index:2; cursor:default; }
.canvas-frame.done .fs-btn { position:absolute; top:.5rem; right:.55rem; z-index:6; width:2.4rem; height:2.4rem; display:grid; place-items:center; border:none; background:none; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; text-shadow:0 .1rem .5rem rgba(0,0,0,.95), 0 0 .2rem rgba(0,0,0,.9); transition:color .15s, transform .15s; }
.canvas-frame.done .fs-btn:hover { color:var(--accent); transform:scale(1.15); }
.canvas-frame.done .result-timer { top:auto; right:.65rem; bottom:2.7rem; }
.canvas-frame.done .result-actions { position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:.3rem; padding:.45rem .5rem; background:linear-gradient(transparent, rgba(0,0,0,.55)); }
.canvas-frame.done .result-actions button, .canvas-frame.done .result-actions a { flex:1; padding:.32rem .2rem; border:1px solid rgba(255,255,255,.14); border-radius:.34rem; background:rgba(255,255,255,.05); color:var(--ink); font-size:.6rem; text-align:center; text-decoration:none; cursor:pointer; white-space:nowrap; }
.canvas-frame.done .result-actions button:hover, .canvas-frame.done .result-actions a:hover { border-color:var(--accent); background:rgba(214,255,95,.1); color:var(--accent); }
.version-badge { position:absolute; top:.65rem; left:.65rem; z-index:4; padding:.28rem .5rem; border:1px solid rgba(214,255,95,.45); border-radius:.35rem; background:rgba(8,9,9,.75); color:var(--accent); font-size:.65rem; font-weight:700; }
.version-nav { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.version-nav button { border:1px solid var(--line); border-radius:.34rem; background:rgba(0,0,0,.45); color:var(--muted); font-size:.66rem; line-height:1; padding:.22rem .5rem; cursor:pointer; }
.version-nav .v-prev, .version-nav .v-next { width:3rem; height:3.8rem; padding:0; border:none; background:none; color:#fff; font-size:3.4rem; font-weight:700; line-height:1; pointer-events:auto; cursor:pointer; text-shadow:0 0 .35rem rgba(0,0,0,1), 0 0 .7rem rgba(0,0,0,.85), 0 .15rem .4rem rgba(0,0,0,.9); transition:color .18s, transform .18s, text-shadow .18s; }
.version-nav .v-prev { transform:none; }
.version-nav .v-next { transform:none; }
.version-nav .v-prev:hover, .version-nav .v-next:hover { color:var(--accent); text-shadow:0 0 .8rem rgba(214,255,95,.75), 0 0 .3rem rgba(0,0,0,.8); }
.version-nav .v-prev:hover { transform:scale(1.25); }
.version-nav .v-next:hover { transform:scale(1.25); }
.version-nav button:hover { color:var(--accent); border-color:var(--accent); }
.version-nav .v-count { color:var(--muted); font-size:.6rem; padding:.1rem .3rem; background:rgba(0,0,0,.45); border-radius:.3rem; }
.version-nav button:disabled { opacity:.35; cursor:not-allowed; pointer-events:none; }
.image-lightbox { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1.25rem; background:rgba(0,0,0,.86); backdrop-filter:blur(.8rem); }
.image-lightbox[hidden] { display:none; }
[hidden] { display:none !important; }
.image-lightbox img { display:block; object-fit:contain; box-shadow:0 1.5rem 4rem rgba(0,0,0,.6); cursor:grab; touch-action:none; }
.lightbox-close { position:absolute; top:1.2rem; right:1.5rem; z-index:1; width:2.8rem; height:2.8rem; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; transition:background .18s, border-color .18s, transform .18s; }
.lightbox-close:hover { border-color:var(--accent); background:rgba(214,255,95,.16); color:var(--accent); transform:rotate(90deg); }
body.lightbox-open { overflow:hidden; }

/* ---------- 余额徽章 & 兑换弹层 ---------- */
.balance-chip { display:inline-flex; align-items:center; gap:.45rem; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--muted); font-size:.92rem; font-weight:600; letter-spacing:.2px; white-space:nowrap; }
.balance-chip::before { content:'◈'; color:var(--accent); font-size:.9rem; }
.balance-chip b { font-variant-numeric:tabular-nums; font-size:1.35rem; font-weight:800; margin-left:.1rem; line-height:1; color:var(--accent); text-shadow:0 0 10px rgba(214,255,95,.3); }
.redeem-mask { position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:1rem; background:rgba(0,0,0,.66); backdrop-filter:blur(.75rem); }
.redeem-mask[hidden] { display:none; }
.redeem-box { position:relative; width:min(100%,26.5rem); padding:1.6rem 1.7rem 1.7rem; border:1px solid rgba(214,255,95,.22); border-radius:1.1rem; background:linear-gradient(180deg,#15161a,#0d0e10); box-shadow:0 1rem 2.5rem rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter:blur(.5rem); }
.redeem-box::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:70%; height:1px; background:linear-gradient(90deg,transparent,rgba(214,255,95,.6),transparent); }
.redeem-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.redeem-head .eyebrow { letter-spacing:.28em; font-size:.68rem; }
.redeem-title { font-size:1.5rem; font-weight:700; letter-spacing:-.01em; }
.redeem-sub { color:var(--muted); font-size:.8rem; line-height:1.7; margin:.5rem 0 1.1rem; }
.redeem-box .admin-input { width:100%; padding:.9rem 1rem; border:1px solid rgba(255,255,255,.12); border-radius:.7rem; outline:0; background:rgba(255,255,255,.05); color:var(--ink); font-size:.9rem; letter-spacing:.04em; transition:border-color .15s, background .15s, box-shadow .15s; }
.redeem-box .admin-input:focus { border-color:rgba(214,255,95,.7); background:rgba(214,255,95,.05); box-shadow:0 0 0 .22rem rgba(214,255,95,.09); }
.redeem-msg { min-height:1.2rem; margin-top:.7rem; font-size:.8rem; }
.redeem-msg.ok { color:var(--accent); }
.redeem-msg.err { color:var(--coral); }
/* 按钮行：确认兑换 + 购买额度并排 */
.redeem-actions { display:flex; align-items:stretch; gap:.6rem; margin-top:.85rem; }
.redeem-actions .generate-button { flex:1 1 auto; width:auto; margin-top:0; }
.redeem-actions .generate-button:not(:disabled):hover { filter:brightness(1.08); box-shadow:0 0 0 .2rem rgba(214,255,95,.14); }
.redeem-buy { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; padding:0 1.15rem; border:1px solid rgba(214,255,95,.4); border-radius:.7rem; color:var(--accent); font-size:.9rem; font-weight:600; background:rgba(214,255,95,.06); text-decoration:none; white-space:nowrap; transition:background .15s, border-color .15s, box-shadow .15s; }
.redeem-buy:hover { background:rgba(214,255,95,.14); border-color:rgba(214,255,95,.6); box-shadow:0 0 0 .2rem rgba(214,255,95,.08); }
.redeem-buy .buy-arrow { font-size:1rem; line-height:1; transition:transform .15s; }
.redeem-buy:hover .buy-arrow { transform:translate(2px,-2px); }
.redeem-buy[hidden] { display:none; }
/* 余额展示：紧凑一行，细分隔线隔开，金额大而突出 */
.redeem-balance { margin-top:.9rem; padding-top:.8rem; display:flex; align-items:baseline; justify-content:center; gap:.45rem; border-top:1px solid rgba(255,255,255,.08); color:var(--muted); font-size:.85rem; }
.redeem-balance b { color:var(--accent); font-variant-numeric:tabular-nums; font-size:1.45rem; font-weight:800; line-height:1; text-shadow:0 0 12px rgba(214,255,95,.3); }

@media (max-width: 400px) {
  /* 窄屏：兑换按钮只显示“兑换” */
  .m-redeem-full { display: none; }
}

@media (max-width: 820px) {
  /* 移动端：确认弹框等比缩放、不超屏 */
  .modal-root { padding: var(--m-md); }
  .modal { width: min(calc(100vw - 2 * var(--m-md)), 24rem); border-radius: var(--m-radius); }
  .modal-head { padding: var(--m-sm) var(--m-md); }
  .modal-title { font-size: var(--m-h2); }
  .modal-body { padding: 0 var(--m-md) var(--m-md); }
  .modal-message { font-size: var(--m-small); line-height: 1.6; }
  .modal-footer { padding: 0 var(--m-md) var(--m-md); gap: var(--m-sm); }
  .modal-button { padding: var(--m-sm) var(--m-md); font-size: var(--m-body); }
}

@media (max-width: 820px) {
  /* 移动端：兑换弹框等比缩放，并限制宽度不超出屏幕 */
  .redeem-mask { padding: var(--m-md); }
  .redeem-box { width: min(calc(100vw - 2 * var(--m-md)), 26.5rem); padding: var(--m-md); border-radius: var(--m-radius); }
  .redeem-title { font-size: var(--m-h2); }
  .redeem-sub { font-size: var(--m-small); line-height: 1.6; margin: var(--m-xs) 0 var(--m-sm); }
  .redeem-box .admin-input { font-size: var(--m-body); padding: var(--m-sm) var(--m-md); }
  .redeem-msg { font-size: var(--m-small); }
  .redeem-actions { gap: var(--m-sm); }
  .redeem-buy { font-size: var(--m-body); padding: 0 var(--m-sm); }
  .redeem-balance { font-size: var(--m-small); }
  .redeem-balance b { font-size: var(--m-h2); }
}