:root {
  --bg: #f4f4f0;
  --surface: #fff;
  --surface-soft: #fafaf7;
  --ink: #17181a;
  --muted: #777873;
  --muted-2: #a0a19b;
  --line: #e7e7e0;
  --dark: #0b0c10;
  --dark-2: #15161c;
  --violet: #6d5dfc;
  --violet-dark: #5749e8;
  --mint: #a9ecda;
  --yellow: #f3d76d;
  --sans: "Manrope", "Noto Sans SC", sans-serif;
  --mono: "DM Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--sans); }
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 246px; min-height: 100vh; display: flex; flex-direction: column; flex: 0 0 246px; padding: 25px 18px 20px; color: #fff; background: var(--dark); }
.brand-row { display: flex; align-items: center; padding: 0 9px; }
.brand { display: inline-flex; gap: 10px; align-items: center; }
.brand b { display: block; font-size: 19px; letter-spacing: -.08em; }
.brand small { display: block; margin-top: 2px; color: #7e8088; font-family: var(--mono); font-size: 7px; letter-spacing: .11em; }
.brand-mark { width: 27px; height: 27px; display: flex; align-items: flex-end; gap: 3px; padding: 5px; border-radius: 8px; background: var(--violet); }
.brand-mark i { display: block; width: 4px; border-radius: 5px; background: var(--mint); transform: rotate(30deg); }
.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 14px; background: #fff; }.brand-mark i:nth-child(3) { height: 7px; background: var(--yellow); }
.sidebar-close { display: none; margin-left: auto; color: #85858e; background: transparent; font-size: 22px; }
.new-project { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 39px; padding: 12px 14px; color: #fff; background: var(--violet); border-radius: 10px; font-size: 12px; font-weight: 700; transition: background .2s, transform .2s; }
.new-project:hover { background: var(--violet-dark); transform: translateY(-1px); }.new-project span { font-size: 18px; font-weight: 400; line-height: 12px; }
.main-nav { margin-top: 30px; }.nav-label { margin: 0 9px 10px; color: #666973; font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }.nav-label-spaced { margin-top: 30px; }
.nav-item { min-height: 40px; display: flex; align-items: center; gap: 11px; margin: 2px 0; padding: 0 10px; color: #a3a4ab; border-radius: 8px; font-size: 11px; transition: .2s; }.nav-item:hover { color: #fff; background: #191a21; }.nav-item.active { color: #fff; background: #1d1e27; }.nav-icon { width: 17px; color: #777984; text-align: center; font-size: 15px; }.nav-item.active .nav-icon { color: var(--mint); }.nav-item em { margin-left: auto; padding: 3px 6px; color: #91929a; background: #2a2b32; border-radius: 99px; font-size: 8px; font-style: normal; }
.sidebar-bottom { margin-top: auto; }.credit-card { padding: 15px; border: 1px solid #25262e; border-radius: 12px; background: #15161c; }.credit-top, .credit-foot { display: flex; align-items: center; justify-content: space-between; }.credit-top { color: #aaaab2; font-size: 10px; }.credit-live { color: #79caae; font-family: var(--mono); font-size: 7px; }.credit-card strong { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 25px; font-weight: 500; letter-spacing: -.07em; }.credit-unit { margin-left: 5px; color: #777983; font-size: 10px; }.credit-progress { height: 3px; margin: 12px 0 11px; overflow: hidden; border-radius: 9px; background: #292a31; }.credit-progress span { display: block; width: 61%; height: 100%; background: var(--mint); border-radius: inherit; }.credit-foot small { color: #6f7078; font-size: 8px; }.credit-foot button { padding: 4px 8px; color: var(--mint); background: #202e2d; border-radius: 5px; font-size: 9px; }.help-link { display: flex; gap: 8px; align-items: center; margin: 20px 9px; color: #80818a; font-size: 10px; }.help-link span { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #595a64; border-radius: 50%; font-size: 9px; }.help-link b { margin-left: auto; color: #5b5c65; font-size: 13px; }.user-row { display: flex; align-items: center; gap: 9px; padding: 15px 9px 0; border-top: 1px solid #25262c; }.avatar { width: 28px; height: 28px; display: inline-grid; place-items: center; flex: 0 0 auto; color: #3c3c38; background: var(--yellow); border-radius: 50%; font-size: 11px; font-weight: 800; }.user-row b, .user-row small { display: block; }.user-row b { color: #d2d2d6; font-size: 10px; font-weight: 600; }.user-row small { margin-top: 2px; color: #70717a; font-size: 8px; }.user-row .more { margin-left: auto; color: #767780; font-size: 12px; letter-spacing: 2px; }
.main-content { min-width: 0; flex: 1; }.topbar { height: 73px; display: flex; align-items: center; justify-content: space-between; padding: 0 38px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.68); }.breadcrumbs { display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: 11px; }.breadcrumbs b { color: #d2d2cb; font-weight: 400; }.breadcrumbs strong { color: var(--ink); font-weight: 700; }.top-actions { display: flex; align-items: center; gap: 13px; }.icon-btn, .ghost-btn, .mini-icon { color: #8d8d88; background: transparent; }.icon-btn { position: relative; font-size: 19px; }.icon-btn i { position: absolute; top: 0; right: 0; width: 4px; height: 4px; background: #ff7164; border-radius: 50%; }.ghost-btn { padding: 8px 12px; border: 1px solid #deded6; border-radius: 7px; color: #454640; font-size: 10px; }.avatar-small { border: 0; }.mobile-menu { display: none; color: var(--ink); background: transparent; font-size: 20px; }
.workspace { width: min(1250px, calc(100% - 76px)); margin: 0 auto; padding: 38px 0 56px; }.studio-intro { display: flex; align-items: end; justify-content: space-between; }.eyebrow { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--violet); font-family: var(--mono); font-size: 9px; letter-spacing: .13em; }.eyebrow span { width: 6px; height: 6px; background: var(--violet); border-radius: 50%; }.studio-intro h1 { margin: 14px 0 10px; font-size: clamp(35px, 4vw, 54px); line-height: 1.1; letter-spacing: -.09em; }.studio-intro h1 em { color: var(--violet); font-style: normal; }.intro-copy { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }.save-state { margin-bottom: 5px; color: #9b9c95; font-family: var(--mono); font-size: 8px; }.save-state b { color: #d1d1cb; font-weight: 400; }.save-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; background: #79caa7; border-radius: 50%; box-shadow: 0 0 0 3px rgba(121,202,167,.14); }
.mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 35px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #ededE8; }.mode-tab { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 15px; text-align: left; color: #93938e; background: transparent; border-radius: 9px; }.mode-tab.active { color: var(--ink); background: #fff; box-shadow: 0 3px 12px rgba(28,29,27,.07); }.mode-symbol { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; color: var(--violet); background: #eeebff; border-radius: 8px; font-size: 19px; }.mode-tab:nth-child(2) .mode-symbol { color: #de8d55; background: #fff1e7; }.mode-tab b, .mode-tab small { display: block; }.mode-tab b { font-size: 12px; }.mode-tab small { margin-top: 3px; color: #a1a19b; font-size: 9px; }.mode-tab i { position: absolute; top: 9px; right: 11px; padding: 3px 6px; color: #7d70ec; background: #eeebff; border-radius: 4px; font-size: 7px; font-style: normal; }
.creation-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(340px, .86fr); gap: 18px; margin-top: 19px; align-items: start; }.creation-left { display: grid; gap: 17px; }.panel, .preview-card { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }.panel { padding: 22px; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }.panel-heading > div:first-child { display: flex; gap: 10px; align-items: flex-start; }.step-num { display: inline-grid; width: 24px; height: 24px; place-items: center; flex: 0 0 auto; color: var(--violet); background: #f0edff; border-radius: 7px; font-family: var(--mono); font-size: 8px; }.panel h2 { margin: 0; font-size: 13px; letter-spacing: -.02em; }.panel-heading p { margin: 4px 0 0; color: var(--muted-2); font-size: 9px; }.quality-chip, .time-estimate, .settings-label { margin-top: 2px; color: #80ae9c; font-family: var(--mono); font-size: 8px; }.quality-chip { padding: 5px 7px; border-radius: 5px; background: #eef9f4; }.time-estimate b { color: #4b4d47; font-weight: 500; }
.upload-zone { min-height: 218px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; border: 1px dashed #d5d6cc; border-radius: 10px; background: #fbfbf8; cursor: pointer; transition: border-color .2s, background .2s; }.upload-zone:hover, .upload-zone.dragover { border-color: var(--violet); background: #f9f8ff; }.upload-zone input { display: none; }.upload-art { position: relative; width: 67px; height: 48px; margin-bottom: 13px; }.upload-frame { position: absolute; left: 14px; top: 5px; width: 41px; height: 37px; display: grid; place-items: center; border: 1px solid #aaa5ff; border-radius: 8px; background: #f1efff; color: var(--violet); font-size: 20px; }.upload-spark { position: absolute; top: -4px; right: 4px; color: var(--yellow); font-size: 18px; }.upload-wave { position: absolute; left: 1px; bottom: 3px; width: 13px; height: 23px; border: 2px solid #a8e5d5; border-top: 0; border-bottom: 0; border-radius: 50%; transform: rotate(27deg); }.upload-zone strong { font-size: 11px; }.upload-zone > small { margin-top: 6px; color: var(--muted-2); font-size: 9px; }.upload-btn { margin-top: 14px; padding: 7px 11px; color: var(--violet); background: #efedff; border-radius: 6px; font-size: 9px; font-weight: 700; }.uploaded-preview { display: none; align-items: center; gap: 11px; margin-top: 13px; padding: 9px; border: 1px solid #e5e5de; border-radius: 9px; background: #fbfbf7; }.uploaded-preview.is-visible { display: flex; }.uploaded-preview img { width: 49px; height: 39px; object-fit: cover; border-radius: 6px; }.uploaded-preview b, .uploaded-preview small { display: block; }.uploaded-preview b { font-size: 10px; }.uploaded-preview small { margin-top: 4px; color: #999a93; font-size: 8px; }.remove-upload { margin-left: auto; color: #aaa; background: transparent; font-size: 18px; }
.script-tabs { display: flex; gap: 19px; margin: -3px 0 12px 34px; border-bottom: 1px solid var(--line); }.script-tab { position: relative; padding: 0 0 9px; color: #9a9b95; background: transparent; font-size: 9px; }.script-tab.active { color: var(--ink); font-weight: 700; }.script-tab.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--violet); border-radius: 9px; }.script-content { display: none; }.script-content.active { display: block; }.script-content textarea { width: 100%; min-height: 100px; resize: vertical; padding: 11px 12px; color: var(--ink); border: 1px solid #e3e3dc; outline: none; border-radius: 8px; background: #fcfcf9; font-size: 11px; line-height: 1.8; }.script-content textarea:focus { border-color: #b7aefa; box-shadow: 0 0 0 3px #f1efff; }.textarea-foot { display: flex; justify-content: space-between; margin-top: 7px; color: #a2a39d; font-size: 8px; }.textarea-foot b { color: #5c5e58; font-family: var(--mono); font-weight: 500; }.record-card, .audio-upload { min-height: 100px; display: flex; align-items: center; gap: 12px; padding: 17px; border: 1px solid #e7e7e0; border-radius: 9px; background: #fcfcf9; }.record-button { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: #ec8b7c; border-radius: 50%; box-shadow: 0 0 0 7px #fff1ed; }.record-button span { font-size: 12px; }.record-card b, .record-card small, .audio-upload b, .audio-upload small { display: block; }.record-card b, .audio-upload b { font-size: 10px; }.record-card small, .audio-upload small { max-width: 260px; margin-top: 5px; color: #9c9d96; font-size: 8px; line-height: 1.5; }.record-length { margin-left: auto; color: #acada6; font-family: var(--mono); font-size: 8px; }.audio-icon { width: 39px; height: 39px; display: grid; place-items: center; color: #db8f5d; background: #fff1e7; border-radius: 50%; font-size: 18px; }.audio-upload .small-outline { margin-left: auto; padding: 7px 9px; border: 1px solid #dddcd4; border-radius: 6px; color: #555650; font-size: 8px; cursor: pointer; }.audio-upload input { display: none; }
.voice-card { display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid #d8d4ff; border-radius: 9px; background: #faf9ff; }.voice-avatar { position: relative; width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: linear-gradient(135deg,#8679ff,#5446d9); border-radius: 8px; font-size: 15px; font-weight: 700; }.play-voice { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; display: grid; place-items: center; color: var(--violet); background: #fff; border: 1px solid #dedbff; border-radius: 50%; font-size: 7px; }.voice-meta { min-width: 0; flex: 1; }.voice-meta > div { display: flex; align-items: center; gap: 6px; }.voice-meta b { font-size: 10px; }.voice-meta small { display: block; margin-top: 4px; color: #999a94; font-size: 8px; }.verified { padding: 3px 5px; color: #509e82; background: #e5f6ef; border-radius: 4px; font-size: 7px; }.voice-wave { display: flex; align-items: center; gap: 2px; height: 14px; margin-top: 7px; }.voice-wave i { display: block; width: 2px; height: 6px; background: #aaa1ff; border-radius: 2px; }.voice-wave i:nth-child(2n) { height: 12px; }.voice-wave i:nth-child(3n) { height: 8px; }.checkmark { width: 17px; height: 17px; display: grid; place-items: center; color: #fff; background: var(--violet); border-radius: 50%; font-size: 9px; }.add-voice { width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 10px; text-align: left; color: #74756f; border: 1px dashed #d6d6cf; border-radius: 8px; background: transparent; font-size: 9px; }.add-voice span { font-size: 16px; color: var(--violet); }.add-voice small { margin-left: auto; color: #a7a8a1; font-size: 8px; }.text-btn { color: var(--violet); background: transparent; font-size: 9px; }
.voice-card { transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.voice-card[role="button"] { cursor: pointer; }
.voice-card[role="button"]:focus-visible { outline: 2px solid rgba(89,70,217,.4); outline-offset: 3px; }
.voice-card.empty { border-style: dashed; border-color: #d9d6ec; background: #fff; }
.voice-card.empty:hover { border-color: #9388ed; background: #fcfbff; box-shadow: 0 6px 18px rgba(89,70,217,.07); }
.voice-card.empty .voice-avatar { color: #6355df; background: #f0efff; }
.voice-card.empty .voice-wave i { background: #ddd9f7; }
.voice-card.empty .checkmark { color: #776ae5; background: #efedff; }
.voice-status.pending { padding: 3px 5px; color: #8176c5; background: #f0efff; border-radius: 4px; font-size: 7px; }
.play-voice:disabled { cursor: not-allowed; opacity: .55; }
.creation-right { display: grid; gap: 14px; }.preview-card { overflow: hidden; background: var(--dark); }.preview-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px 11px; color: #c8c9d0; font-family: var(--mono); font-size: 8px; }.preview-head div { display: flex; gap: 10px; }.mini-icon { color: #878892; font-size: 11px; }.preview-canvas { position: relative; height: clamp(320px, 37vw, 460px); display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 44%, #292b3a 0, #171821 36%, #0b0c10 72%); }.preview-canvas::before, .preview-canvas::after { content: ""; position: absolute; border: 1px solid rgba(190,181,255,.13); border-radius: 50%; }.preview-canvas::before { width: 320px; height: 320px; }.preview-canvas::after { width: 470px; height: 470px; }.preview-empty { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; color: #a1a1aa; text-align: center; }.preview-orb { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 14px; color: var(--mint); border: 1px solid rgba(169,236,218,.35); border-radius: 50%; background: rgba(169,236,218,.08); box-shadow: 0 0 40px rgba(109,93,252,.2); font-size: 18px; }.preview-empty b { color: #dddde3; font-size: 10px; font-weight: 500; }.preview-empty small { margin-top: 5px; color: #757681; font-size: 8px; }.canvas-image { position: absolute; inset: 0; display: none; overflow: hidden; }.canvas-image.is-visible { display: block; }.canvas-image img { width: 100%; height: 100%; object-fit: cover; opacity: .75; filter: saturate(.82); transform: scale(1.04); }.canvas-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,15,.1), rgba(10,11,15,.26) 48%, rgba(6,7,10,.86)); }.ai-badge { position: absolute; top: 14px; left: 14px; padding: 5px 7px; color: rgba(255,255,255,.84); background: rgba(11,12,16,.58); border: 1px solid rgba(255,255,255,.16); border-radius: 4px; font-family: var(--mono); font-size: 7px; }.canvas-caption { position: absolute; bottom: 49px; left: 22px; right: 22px; color: #fff; text-align: center; text-shadow: 0 2px 12px #000; font-size: 11px; line-height: 1.6; }.canvas-controls { position: absolute; right: 14px; bottom: 13px; left: 14px; display: flex; align-items: center; gap: 8px; color: #aaaab3; font-family: var(--mono); font-size: 7px; }.canvas-play { width: 22px; height: 22px; display: grid; place-items: center; color: var(--dark); background: var(--mint); border-radius: 50%; font-size: 8px; }.canvas-spacer { flex: 1; }.preview-ratio { display: flex; justify-content: center; gap: 19px; padding: 11px; border-top: 1px solid #24252c; }.ratio { display: flex; align-items: center; gap: 5px; color: #696a75; background: transparent; font-family: var(--mono); font-size: 8px; }.ratio.active { color: var(--mint); }.ratio span { display: block; border: 1px solid currentColor; border-radius: 2px; }.ratio-portrait { width: 7px; height: 11px; }.ratio-landscape { width: 12px; height: 8px; }.ratio-square { width: 9px; height: 9px; }
.settings-panel { padding: 18px; }.panel-heading.compact { align-items: center; margin-bottom: 19px; }.settings-label { margin: 0; color: #a4a59e; }.setting-row { display: flex; align-items: center; justify-content: space-between; min-height: 37px; border-top: 1px solid #eeeeE8; color: #63645e; font-size: 9px; }.setting-row label { font-weight: 600; }.setting-row > b { color: var(--violet); font-family: var(--mono); font-size: 10px; font-weight: 500; }.duration-picker { padding: 4px 0 2px; }.duration-picker input { width: 100%; height: 3px; appearance: none; border-radius: 10px; outline: none; background: linear-gradient(90deg, var(--violet) 16%, #e8e7e1 16%); }.duration-picker input::-webkit-slider-thumb { width: 13px; height: 13px; appearance: none; border: 3px solid #fff; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 1px var(--violet); cursor: pointer; }.range-labels { display: flex; justify-content: space-between; margin-top: 6px; color: #aaa; font-family: var(--mono); font-size: 7px; }.duration-chips { display: flex; gap: 5px; margin: 9px 0 7px; }.duration-chips button { padding: 6px 8px; color: #a0a19a; background: #f5f5f0; border-radius: 5px; font-family: var(--mono); font-size: 8px; }.duration-chips button.active, .duration-chips button:hover { color: var(--violet); background: #f0eeff; }.select-btn { color: #8c8d87; background: transparent; font-size: 9px; }.select-btn span { margin-left: 4px; color: #c4c4bd; }.select-btn.muted { color: #b0b1ab; }.toggle { width: 27px; height: 15px; padding: 2px; border-radius: 20px; background: #d8d9d2; transition: .2s; }.toggle span { display: block; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: .2s; }.toggle.active { background: var(--violet); }.toggle.active span { transform: translateX(12px); }
.cost-card { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border: 1px solid #ddd9ff; border-radius: 10px; background: #f7f6ff; }.cost-card span { display: block; color: #92938d; font-size: 8px; }.cost-card strong { display: block; margin-top: 3px; color: var(--violet); font-size: 14px; }.cost-card strong b { font-family: var(--mono); font-size: 19px; font-weight: 500; }.cost-note { color: #70a38d !important; font-family: var(--mono); font-size: 7px !important; }.cost-note span { display: inline !important; color: #71c4a3; }.generate-btn { width: 100%; display: flex; align-items: center; gap: 10px; justify-content: center; padding: 14px; color: #fff; background: var(--dark); border-radius: 9px; font-size: 11px; font-weight: 700; transition: .2s; }.generate-btn:hover { background: #252631; transform: translateY(-1px); }.generate-btn b { margin-left: auto; color: var(--mint); font-size: 17px; font-weight: 400; }.generate-spark { color: var(--yellow); font-size: 15px; }.terms-note { margin: -5px 0 0; color: #a1a29c; text-align: center; font-size: 8px; }.terms-note a { color: #7163ee; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 20px; background: rgba(7,8,12,.65); backdrop-filter: blur(8px); }.modal-backdrop.is-visible { display: grid; }.modal { position: relative; width: min(390px,100%); padding: 31px; border-radius: 16px; background: #fff; box-shadow: 0 25px 80px rgba(0,0,0,.28); text-align: center; }.modal-close { position: absolute; top: 15px; right: 17px; color: #a4a49d; background: transparent; font-size: 21px; }.modal-icon { width: 40px; height: 40px; display: grid; place-items: center; margin: 0 auto 14px; color: var(--violet); background: #f0edff; border-radius: 12px; }.modal h2 { margin: 0; font-size: 18px; }.modal p { margin: 10px 0 17px; color: #888982; font-size: 10px; line-height: 1.7; }.modal-demo { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; margin-bottom: 19px; color: rgba(255,255,255,.67); border-radius: 10px; background: radial-gradient(circle at 50% 35%,#42426a,#151622 63%); font-family: var(--mono); font-size: 8px; }.demo-orb { position: absolute; width: 180px; height: 180px; border: 1px solid rgba(169,236,218,.24); border-radius: 50%; }.modal-demo button { position: absolute; bottom: 16px; width: 30px; height: 30px; color: var(--dark); background: var(--mint); border-radius: 50%; font-size: 9px; }.modal-video { width: 100%; max-height: 62vh; display: block; margin-bottom: 19px; border-radius: 10px; background: #101119; }.modal-video[hidden] { display: none; }.modal-primary { width: 100%; padding: 12px; color: #fff; background: var(--violet); border-radius: 8px; font-size: 10px; font-weight: 700; }.toast { position: fixed; left: 50%; bottom: 25px; z-index: 70; max-width: min(420px,calc(100% - 30px)); padding: 11px 15px; color: #fff; background: #1c1d24; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.18); font-size: 10px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: .22s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1040px) { .sidebar { width: 215px; flex-basis: 215px; }.workspace { width: min(100% - 44px, 900px); }.creation-grid { grid-template-columns: 1fr; }.creation-right { grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr); }.preview-card { grid-row: span 4; }.settings-panel { align-self: start; } }
@media (max-width: 720px) { .sidebar { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: 246px; transform: translateX(-100%); transition: transform .25s; box-shadow: 14px 0 40px rgba(0,0,0,.25); }.sidebar.is-open { transform: translateX(0); }.sidebar-close { display: block; }.mobile-menu { display: block; }.topbar { height: 62px; padding: 0 17px; }.top-actions .ghost-btn, .top-actions .icon-btn { display: none; }.workspace { width: calc(100% - 30px); padding-top: 27px; }.studio-intro { display: block; }.save-state { margin-top: 18px; }.studio-intro h1 { font-size: 39px; }.mode-switch { margin-top: 27px; }.mode-tab { gap: 8px; padding: 12px 9px; }.mode-tab b { font-size: 10px; }.mode-tab small { font-size: 8px; }.mode-tab i { display: none; }.creation-right { display: flex; flex-direction: column; }.preview-card { order: -1; }.preview-canvas { height: 365px; }.creation-grid { margin-top: 13px; }.panel { padding: 17px; }.panel-heading p { font-size: 8px; }.cost-card { align-items: flex-start; flex-direction: column; gap: 8px; }.cost-note { align-self: flex-end; }.audio-upload { align-items: flex-start; flex-wrap: wrap; }.audio-upload .small-outline { margin-left: 52px; }.duration-chips { flex-wrap: wrap; }.duration-chips button { flex: 1; min-width: 46px; }.script-tabs { gap: 14px; margin-left: 33px; } }
@media (max-width: 420px) { .mode-tab { min-height: 69px; align-items: flex-start; }.mode-symbol { margin-top: 1px; }.mode-tab small { max-width: 92px; line-height: 1.35; }.topbar .breadcrumbs { font-size: 10px; }.top-actions .avatar { width: 25px; height: 25px; }.preview-canvas { height: 320px; }.studio-intro h1 { font-size: 35px; }.preview-ratio { gap: 12px; } }
/* Application sub-pages */
.app-view { display: none; }.app-view.active { display: block; }.page-shell { width: min(1250px, calc(100% - 76px)); margin: 0 auto; padding: 43px 0 60px; }.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }.page-heading h1 { margin: 14px 0 8px; color: var(--ink); font-size: clamp(33px, 4vw, 48px); letter-spacing: -.075em; line-height: 1; }.page-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }.page-primary, .outlined-page-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 8px; font-size: 10px; font-weight: 700; }.page-primary { color: #fff; background: var(--dark); }.page-primary:hover { background: #2a2b33; }.outlined-page-btn { color: #5d5e59; border: 1px solid #deded6; background: #fff; }.outlined-page-btn span { margin-left: 8px; color: #8b7dfa; font-size: 15px; }.filter-row, .asset-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 32px 0 18px; }.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }.filter-pills button, .sort-button { padding: 8px 10px; color: #83847d; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 9px; } .filter-pills button, .sort-button { cursor: pointer; } .project-card[hidden] { display: none !important; }.filter-pills button.active { color: var(--violet); border-color: #dedaff; background: #f3f1ff; font-weight: 700; }.filter-pills b { margin-left: 3px; font-family: var(--mono); font-size: 8px; font-weight: 400; }.sort-button span { padding-left: 7px; color: #a9aaa3; }.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; }.project-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.project-cover { position: relative; height: 196px; overflow: hidden; }.project-cover::before { content: ""; position: absolute; inset: 0; opacity: .93; }.project-cover.sunset::before { background: linear-gradient(150deg,#f3c994 0%,#eaa581 39%,#42595d 100%); }.project-cover.city::before { background: linear-gradient(150deg,#293a66 0%,#6d608b 42%,#e6a089 100%); }.project-cover.flowers::before { background: linear-gradient(140deg,#d9cfad,#e3a4a5 45%,#6d8e69); }.project-cover.processing { display: grid; place-items: center; background: radial-gradient(circle at 50% 30%,#49406f,#1a1b24 66%); }.project-time, .project-ai, .project-more { position: absolute; z-index: 2; }.project-time { top: 10px; left: 10px; padding: 4px 6px; color: #fff; background: rgba(11,12,16,.55); border-radius: 4px; font-family: var(--mono); font-size: 7px; }.project-ai { bottom: 9px; left: 10px; padding: 4px 5px; color: #fff; background: rgba(11,12,16,.5); border-radius: 4px; font-family: var(--mono); font-size: 7px; }.project-more { top: 7px; right: 10px; color: #fff; background: transparent; letter-spacing: 2px; }.cover-lines { position:absolute; right: 20px; bottom: -29px; width: 145px; height: 145px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; box-shadow: 0 0 0 17px rgba(255,255,255,.13),0 0 0 34px rgba(255,255,255,.08); }.cover-orb { position:absolute; left: 26px; top: 26px; width: 80px; height: 80px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; box-shadow: 0 0 0 13px rgba(255,255,255,.1),0 0 0 28px rgba(255,255,255,.07); }.flower-shapes i { position:absolute; width: 60px; height: 20px; border-radius: 100% 0; background: rgba(255,238,228,.73); }.flower-shapes i:nth-child(1) { left:39%; top:29%; transform:rotate(20deg); }.flower-shapes i:nth-child(2) { left:50%; top:41%; transform:rotate(128deg); }.flower-shapes i:nth-child(3) { left:33%; top:49%; transform:rotate(230deg); }.process-art { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; color: #cccbd6; }.process-art span { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: 10px; color: var(--mint); border: 1px solid rgba(169,236,218,.4); border-radius: 50%; box-shadow: 0 0 28px rgba(109,93,252,.3); }.process-art b { font-size: 10px; }.process-art small { margin-top: 4px; color: #92929b; font-size: 8px; }.process-art i { width: 120px; height: 3px; margin-top: 13px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.13); }.process-art em { display: block; width: 62%; height: 100%; background: var(--mint); }.project-info { display: flex; justify-content: space-between; gap: 10px; padding: 13px 13px 10px; }.project-info h2 { margin: 0; font-size: 11px; }.project-info p { margin: 4px 0 0; color: #9a9b94; font-size: 8px; }.status { height: max-content; padding: 3px 5px; border-radius: 4px; font-size: 7px; white-space: nowrap; }.status.done { color: #4a997d; background: #e8f7ef; }.status.making { color: #826fe0; background: #f0edff; }.project-actions { display: flex; border-top: 1px solid #eeeDE7; }.project-actions button { flex: 1; padding: 9px 3px; color: #777873; border-right: 1px solid #eeeDE7; background: #fff; font-size: 8px; }.project-actions button:last-child { border-right: 0; }.project-actions button:hover { color: var(--violet); background: #fbfaff; }.project-actions button:disabled { color: #adada7; background: #fafaf7; }.project-play { color: var(--violet) !important; }.new-project-card { min-height: 280px; display: grid; place-items: center; border-style: dashed; background: transparent; cursor: pointer; }.new-project-card:hover { border-color: #aca4fa; background: #faf9ff; }.new-project-card div { display: flex; flex-direction: column; align-items: center; color: #777872; }.new-project-card span { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 10px; color: var(--violet); background: #f0edff; border-radius: 10px; font-size: 18px; }.new-project-card b { font-size: 10px; }.new-project-card small { margin-top: 4px; color: #aaaBA4; font-size: 8px; }
.template-tabs { display: flex; gap: 19px; margin: 34px 0 18px; padding-bottom: 9px; overflow-x: auto; border-bottom: 1px solid var(--line); }.template-tabs button { position: relative; padding: 0 0 9px; flex: 0 0 auto; color: #9b9b96; background: transparent; font-size: 10px; }.template-tabs button.active { color: var(--ink); font-weight: 700; }.template-tabs button.active::after { content:""; position:absolute; right:0; bottom:-10px; left:0; height:2px; border-radius:2px; background: var(--violet); }.template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }.template-card { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; }.template-cover { position:relative; height:208px; display:flex; flex-direction:column; justify-content:space-between; padding:15px; overflow:hidden; color:#fff; }.template-cover::before,.template-cover::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.25); border-radius:50%; }.template-cover::before { right:-42px; top:-65px; width:190px; height:190px; }.template-cover::after { left:-95px; bottom:-125px; width:240px; height:240px; }.template-cover > * { position:relative; z-index:1; }.template-cover > span { font-family:var(--mono); font-size:8px; letter-spacing:.1em; opacity:.8; }.template-cover b,.template-cover small { display:block; }.template-cover b { max-width:210px; font-size:17px; line-height:1.3; letter-spacing:-.06em; }.template-cover small { margin-top:6px; font-size:8px; opacity:.75; }.t-story { background:linear-gradient(145deg,#5b5f93,#c28987 60%,#efcf94); }.t-talk { background:linear-gradient(145deg,#29234f,#8d6691 52%,#dfad91); }.t-memory { background:linear-gradient(145deg,#315f60,#a6bc8a 58%,#e8c488); }.t-product { background:linear-gradient(145deg,#27304d,#678b9f 50%,#d9e1d0); }.t-festival { background:linear-gradient(145deg,#b55362,#df8e68 48%,#f3d883); }.template-info { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px; }.template-info h2 { margin:0; font-size:11px; }.template-info p { margin:4px 0 0; color:#a2a39d; font-size:8px; }.template-info button { padding:7px 8px; flex:0 0 auto; color:var(--violet); border:1px solid #dedaff; border-radius:6px; background:#f7f6ff; font-size:8px; font-weight:700; }.custom-template { min-height:272px; display:grid; place-items:center; border-style:dashed; background:transparent; cursor:pointer; }.custom-template:hover { border-color:#a9a0ff; background:#faf9ff; }.custom-template div { display:flex; flex-direction:column; align-items:center; }.custom-template span { width:38px; height:38px; display:grid; place-items:center; color:var(--violet); background:#f0edff; border-radius:10px; font-size:19px; }.custom-template b { margin-top:10px; font-size:10px; }.custom-template small { margin-top:4px; color:#a2a39c; font-size:8px; }
.voice-page-grid { display:grid; grid-template-columns:minmax(0,1fr) 294px; gap:17px; margin-top:34px; }.voice-list { display:grid; gap:12px; }.voice-library-card,.create-voice-card,.voice-safety-card { border:1px solid var(--line); border-radius:12px; background:#fff; }.voice-library-card { padding:21px; }.voice-library-top { display:flex; align-items:center; gap:13px; }.voice-profile-large { position:relative; width:56px; height:56px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#9387ff,#5447d9); border-radius:13px; font-size:19px; font-weight:700; }.voice-profile-large span { position:absolute; right:-4px; bottom:-4px; width:18px; height:18px; display:grid; place-items:center; color:#fff; background:#5aae8c; border:2px solid #fff; border-radius:50%; font-size:9px; }.voice-library-top h2 { margin:0; font-size:14px; }.voice-library-top p { margin:4px 0; color:#8b8c85; font-size:9px; }.voice-verified { color:#57977f; font-size:8px; }.dots-btn { margin-left:auto; align-self:start; color:#9fa09a; background:transparent; letter-spacing:2px; }.voice-library-wave { display:flex; align-items:center; gap:3px; height:39px; margin:19px 0 13px; padding:0 12px; border-radius:8px; background:#f9f8ff; }.voice-library-wave i { width:2px; height:12px; border-radius:5px; background:#a89fff; }.voice-library-wave i:nth-child(2n){height:24px;}.voice-library-wave i:nth-child(3n){height:18px;}.voice-library-wave button { width:19px;height:19px;display:grid;place-items:center;margin-left:8px;color:#fff;background:var(--violet);border-radius:50%;font-size:7px; }.voice-library-wave span { margin-left:4px;color:#979892;font-family:var(--mono);font-size:8px; }.voice-library-bottom { display:flex;align-items:center;justify-content:space-between;gap:10px;color:#a0a19a;font-size:8px; }.voice-library-bottom div{display:flex;gap:7px;}.small-secondary,.small-primary { padding:7px 9px;border-radius:6px;font-size:8px; }.small-secondary{color:#70716b;background:#f6f6f1;}.small-primary{color:#fff;background:var(--dark);}.create-voice-card { display:flex;align-items:center;gap:14px;padding:21px; }.create-voice-symbol{width:39px;height:39px;display:grid;place-items:center;flex:0 0 auto;color:#db8e58;background:#fff0e5;border-radius:10px;font-size:20px;}.create-voice-card h2{margin:0;font-size:11px;}.create-voice-card p{margin:5px 0 0;color:#9a9b95;font-size:8px;line-height:1.6;}.create-voice-card button{margin-left:auto;flex:0 0 auto;color:var(--violet);background:transparent;font-size:9px;font-weight:700;}.voice-safety-card { align-self:start;padding:21px;background:#fbfbf8; }.safety-icon{width:32px;height:32px;display:grid;place-items:center;color:#5a9d86;background:#eaf6f0;border-radius:9px;font-size:16px;}.voice-safety-card h2{margin:13px 0 11px;font-size:13px;}.voice-safety-card ul{margin:0;padding:0;list-style:none;}.voice-safety-card li{position:relative;margin:0 0 10px;padding-left:12px;color:#85867f;font-size:9px;line-height:1.65;}.voice-safety-card li::before{content:"";position:absolute;left:0;top:.65em;width:4px;height:4px;background:#73b69b;border-radius:50%;}.voice-safety-card a{display:inline-block;margin-top:6px;color:var(--violet);font-size:8px;}
.upload-small input { display:none; }.asset-toolbar { margin-top:32px; }.asset-search { width:210px; display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#b7b8b2;font-size:15px; }.asset-search input{width:100%;padding:9px 0;border:0;outline:0;color:var(--ink);font-size:9px;}.compact-pills{justify-content:flex-end;}.asset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;}.asset-card{position:relative;min-height:194px;display:flex;flex-direction:column;justify-content:space-between;padding:11px;overflow:hidden;color:#fff;border-radius:10px;}.asset-card::before{content:"";position:absolute;inset:0;z-index:0;}.asset-card>*{position:relative;z-index:1;}.asset-card span{width:max-content;padding:4px 5px;background:rgba(11,12,16,.45);border-radius:4px;font-size:7px;}.asset-card button{position:absolute;right:9px;top:7px;color:#fff;background:transparent;letter-spacing:2px;}.asset-card div b,.asset-card div small{display:block;}.asset-card div b{font-size:10px;}.asset-card div small{margin-top:3px;opacity:.72;font-size:8px;}.a-sun::before{background:linear-gradient(155deg,#eed197,#d98575 52%,#474d56);}.a-mountain::before{background:linear-gradient(150deg,#7891a5,#355f59 54%,#1e3336);}.a-book::before{background:linear-gradient(145deg,#c3b099,#6e5b51 56%,#2e343c);}.a-sea::before{background:linear-gradient(160deg,#ecb784,#7b7eb5 47%,#24445d);}.a-portrait::before{background:linear-gradient(155deg,#c6b0a4,#986a61 48%,#392f39);}.asset-add{min-height:194px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #d3d3cc;border-radius:10px;background:#fafaf7;cursor:pointer;}.asset-add:hover{border-color:#aaa0fa;background:#faf9ff;}.asset-add span{width:34px;height:34px;display:grid;place-items:center;color:var(--violet);background:#efedff;border-radius:9px;font-size:17px;}.asset-add b{margin-top:9px;color:#6e6f69;font-size:10px;}.asset-add small{margin-top:4px;color:#aaaBA3;font-size:8px;}
.recharge-modal{text-align:left;}.recharge-modal .eyebrow{justify-content:center;}.recharge-modal h2{text-align:center;}.recharge-modal>p{text-align:center;}.credit-plans{display:grid;gap:8px;margin:17px 0;}.credit-plans button{position:relative;display:grid;grid-template-columns:1fr auto;gap:3px;padding:13px;text-align:left;border:1px solid var(--line);border-radius:8px;background:#fff;}.credit-plans button.featured{border-color:#b9b2ff;background:#faf9ff;}.credit-plans i{position:absolute;right:9px;top:-8px;padding:3px 5px;color:#fff;background:var(--violet);border-radius:4px;font-size:7px;font-style:normal;}.credit-plans span{color:#82837c;font-size:8px;}.credit-plans strong{grid-row:2;color:var(--ink);font-family:var(--mono);font-size:16px;font-weight:500;}.credit-plans strong small{color:#a2a39c;font-family:var(--sans);font-size:8px;}.credit-plans b{grid-row:1 / span 2;grid-column:2;align-self:center;color:var(--violet);font-family:var(--mono);font-size:12px;font-weight:500;}.recharge-note{display:block;margin-top:11px;color:#a0a19a;text-align:center;font-size:8px;line-height:1.6;}
@media (max-width:1040px){.page-shell{width:min(100% - 44px,900px);}.project-grid,.template-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.asset-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.voice-page-grid{grid-template-columns:1fr;}.voice-safety-card{display:none;}}
@media (max-width:720px){.page-shell{width:calc(100% - 30px);padding-top:29px;}.page-heading{align-items:flex-start;flex-direction:column;gap:16px;}.page-heading h1{font-size:35px;}.filter-row,.asset-toolbar{align-items:flex-start;flex-direction:column;margin-top:25px;}.sort-button,.asset-search{width:100%;}.compact-pills{justify-content:flex-start;}.project-grid,.template-grid{grid-template-columns:1fr;}.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.template-cover{height:195px;}.voice-library-bottom{align-items:flex-start;flex-direction:column;}.create-voice-card{align-items:flex-start;flex-wrap:wrap;}.create-voice-card button{width:100%;margin-left:52px;text-align:left;}.voice-library-wave{overflow:hidden;}.voice-library-wave i:nth-child(n+13){display:none;}}
.credit-plans button.selected { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(109,93,252,.12); }.a-user::before{background:linear-gradient(145deg,#8c7cff,#eaa28d 58%,#f0d888);} .generate-btn:disabled{cursor:not-allowed;opacity:.82;transform:none;}

/* 真实素材上传后的状态：本地开发时以 API 返回的文件 URL 作为预览源。 */
.upload-zone.is-uploading { pointer-events: none; opacity: .72; }
.asset-card.a-user::before { background-image: linear-gradient(180deg, rgba(13,14,19,.05), rgba(13,14,19,.74)), var(--asset-image); background-position: center; background-size: cover; }
.remote-asset { cursor: pointer; }
.remote-asset:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(28,27,37,.13); }
.project-source-image { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.project-cover:has(.project-source-image)::before { background: linear-gradient(180deg, rgba(10,11,16,.03) 45%, rgba(10,11,16,.48)); }

.record-button.recording { animation: songev-record-pulse 1.1s infinite; background: #d96b5b; }
.record-button:disabled { cursor: wait; opacity: .6; }
@keyframes songev-record-pulse { 50% { box-shadow: 0 0 0 12px rgba(236, 139, 124, .16); } }

/* 本人声音创建与管理：不把“待验证”伪装为已验证状态。 */
.voice-setup-modal { width: min(520px, 100%); text-align: left; }
.voice-setup-modal .eyebrow { margin-bottom: 8px; }
.voice-setup-modal > h2 { text-align: left; }
.voice-setup-modal > p { margin-bottom: 18px; text-align: left; }
.voice-setup-steps { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin: 20px 0; color: #b2b2ac; font-size: 9px; font-weight: 700; }
.voice-setup-steps i { height: 1px; background: #e5e3de; }
.voice-setup-steps span.active { color: var(--violet); }
.voice-setup-step { display: none; }
.voice-setup-step.active { display: block; }
.voice-name-field { display: grid; gap: 7px; color: #72736d; font-size: 9px; font-weight: 700; }
.voice-name-field small { color: #a2a29b; font-weight: 500; }
.voice-name-field input { width: 100%; padding: 10px 11px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; outline-color: var(--violet); font: inherit; }
.voice-sample-box { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; margin: 13px 0 11px; padding: 13px; border: 1px solid #e2ddff; border-radius: 10px; background: #faf9ff; }
.voice-sample-record { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--violet); border-radius: 50%; box-shadow: 0 5px 14px rgba(89, 70, 217, .24); }
.voice-sample-record.recording { background: #d96b5b; animation: songev-record-pulse 1.1s infinite; }
.voice-sample-record:disabled { cursor: wait; opacity: .6; }
.voice-sample-box b, .voice-sample-box small { display: block; }
.voice-sample-box b { color: var(--ink); font-size: 10px; }
.voice-sample-box small { margin-top: 4px; color: #92938c; font-size: 8px; line-height: 1.55; }
.voice-sample-box > span { color: var(--violet); font-family: var(--mono); font-size: 8px; white-space: nowrap; }
.voice-or-upload { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 17px; color: #b0b1ab; font-size: 8px; }
.voice-or-upload::before, .voice-or-upload::after { content: ''; flex: 1; height: 1px; background: #ecebe6; }
.voice-or-upload input, .voice-name-field input[type="file"] { display: none; }
.challenge-box { position: relative; margin: 5px 0 15px; padding: 15px 14px; border: 1px solid #d8d2ff; border-radius: 10px; background: linear-gradient(135deg, #f8f7ff, #fbfbff); }
.challenge-box small { display: block; color: #8c8a9d; font-size: 8px; }
.challenge-box strong { display: block; max-width: 330px; margin-top: 7px; color: #40358b; font-size: 13px; line-height: 1.6; }
.challenge-box .text-btn { position: absolute; right: 12px; top: 13px; }
.consent-check { display: flex; align-items: flex-start; gap: 7px; margin: 15px 0; color: #777870; font-size: 8px; line-height: 1.7; cursor: pointer; }
.consent-check input { margin: 2px 0 0; accent-color: var(--violet); }
.voice-verify-status { min-height: 18px; margin: 8px 0 0 !important; color: #999a94; font-size: 8px !important; text-align: left !important; }
.voice-done-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 20px auto 12px; color: #fff; background: #59a986; border-radius: 50%; box-shadow: 0 8px 22px rgba(70, 160, 122, .2); font-size: 22px; }
.voice-setup-step[data-voice-panel="3"] { text-align: center; }
.voice-setup-step[data-voice-panel="3"] h3 { margin: 0; font-size: 16px; }
.voice-setup-step[data-voice-panel="3"] p { text-align: center; }
#remoteVoiceList { display: grid; gap: 12px; }
.remote-voice-card.pending { border-color: #f1d39e; background: #fffdf8; }
.remote-voice-card .voice-pending { color: #ad7c2d; background: #fff1d8; }
.remote-voice-card .small-primary[disabled] { cursor: not-allowed; opacity: .55; }
@media (max-width: 520px) { .voice-setup-modal { padding: 25px 19px; } .voice-sample-box { grid-template-columns: 40px minmax(0, 1fr); } .voice-sample-box > span { grid-column: 2; } .challenge-box strong { padding-right: 0; } }

/* 本人声音创建与管理：不把“待验证”伪装为已验证状态。 */
.voice-setup-modal { width: min(520px, 100%); text-align: left; }
.voice-setup-modal .eyebrow { margin-bottom: 8px; }
.voice-setup-modal > h2 { text-align: left; }
.voice-setup-modal > p { margin-bottom: 18px; text-align: left; }
.voice-setup-steps { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin: 20px 0; color: #b2b2ac; font-size: 9px; font-weight: 700; }
.voice-setup-steps i { height: 1px; background: #e5e3de; }
.voice-setup-steps span.active { color: var(--violet); }
.voice-setup-step { display: none; }
.voice-setup-step.active { display: block; }
.voice-name-field { display: grid; gap: 7px; color: #72736d; font-size: 9px; font-weight: 700; }
.voice-name-field small { color: #a2a29b; font-weight: 500; }
.voice-name-field input { width: 100%; padding: 10px 11px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; outline-color: var(--violet); font: inherit; }
.voice-sample-box { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; margin: 13px 0 11px; padding: 13px; border: 1px solid #e2ddff; border-radius: 10px; background: #faf9ff; }
.voice-sample-record { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--violet); border-radius: 50%; box-shadow: 0 5px 14px rgba(89, 70, 217, .24); }
.voice-sample-record.recording { background: #d96b5b; animation: songev-record-pulse 1.1s infinite; }
.voice-sample-record:disabled { cursor: wait; opacity: .6; }
.voice-sample-box b, .voice-sample-box small { display: block; }
.voice-sample-box b { color: var(--ink); font-size: 10px; }
.voice-sample-box small { margin-top: 4px; color: #92938c; font-size: 8px; line-height: 1.55; }
.voice-sample-box > span { color: var(--violet); font-family: var(--mono); font-size: 8px; white-space: nowrap; }
.voice-or-upload { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 17px; color: #b0b1ab; font-size: 8px; }
.voice-or-upload::before, .voice-or-upload::after { content: ''; flex: 1; height: 1px; background: #ecebe6; }
.voice-or-upload input, .voice-name-field input[type="file"] { display: none; }
.challenge-box { position: relative; margin: 5px 0 15px; padding: 15px 14px; border: 1px solid #d8d2ff; border-radius: 10px; background: linear-gradient(135deg, #f8f7ff, #fbfbff); }
.challenge-box small { display: block; color: #8c8a9d; font-size: 8px; }
.challenge-box strong { display: block; max-width: 330px; margin-top: 7px; color: #40358b; font-size: 13px; line-height: 1.6; }
.challenge-box .text-btn { position: absolute; right: 12px; top: 13px; }
.consent-check { display: flex; align-items: flex-start; gap: 7px; margin: 15px 0; color: #777870; font-size: 8px; line-height: 1.7; cursor: pointer; }
.consent-check input { margin: 2px 0 0; accent-color: var(--violet); }
.voice-verify-status { min-height: 18px; margin: 8px 0 0 !important; color: #999a94; font-size: 8px !important; text-align: left !important; }
.voice-done-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 20px auto 12px; color: #fff; background: #59a986; border-radius: 50%; box-shadow: 0 8px 22px rgba(70, 160, 122, .2); font-size: 22px; }
.voice-setup-step[data-voice-panel="3"] { text-align: center; }
.voice-setup-step[data-voice-panel="3"] h3 { margin: 0; font-size: 16px; }
.voice-setup-step[data-voice-panel="3"] p { text-align: center; }
#remoteVoiceList { display: grid; gap: 12px; }
.remote-voice-card.pending { border-color: #f1d39e; background: #fffdf8; }
.remote-voice-card .voice-pending { color: #ad7c2d; background: #fff1d8; }
.remote-voice-card .small-primary[disabled] { cursor: not-allowed; opacity: .55; }
@media (max-width: 520px) { .voice-setup-modal { padding: 25px 19px; } .voice-sample-box { grid-template-columns: 40px minmax(0, 1fr); } .voice-sample-box > span { grid-column: 2; } .challenge-box strong { padding-right: 0; } }


/* 声音验证失败状态：与“验证中”的黄色状态区分，避免用户误判可用性。 */
.voice-failed {
  color: #d65a48;
  background: #fff0ed;
  border: 1px solid #f5c6bd;
}

/* 支付订单状态：未确认支付前始终不展示为积分已到账。 */
.payment-order-panel { margin: -2px 0 11px; padding: 11px; border: 1px solid #e6e2ff; border-radius: 10px; background: linear-gradient(135deg, #faf9ff, #fff); }
.payment-order-panel[hidden] { display: none; }
.payment-order-panel[data-state="paid"] { border-color: #bde1ce; background: #f4fcf7; }
.payment-order-panel[data-state="expired"] { border-color: #e7e5df; background: #faf9f7; }
.payment-order-panel-top, .payment-order-details { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.payment-live-state { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; color: #97661e; border-radius: 999px; background: #fff3dd; font-size: 8px; font-weight: 800; }
.payment-live-state::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(151, 102, 30, .11); }
.payment-live-state.paid { color: #287653; background: #eaf8ef; }
.payment-live-state.expired { color: #7f8079; background: #efeeeb; }
.payment-refresh { padding: 3px 0; color: #7564d5; border: 0; background: transparent; font: 700 8px var(--sans); cursor: pointer; }
.payment-refresh:hover { color: #5040b6; text-decoration: underline; }
.payment-refresh:disabled { cursor: default; opacity: .55; text-decoration: none; }
.payment-order-details { margin-top: 10px; color: #8d8e87; font-family: var(--mono); font-size: 8px; }
.payment-order-details b { color: #4f4e58; font-weight: 600; letter-spacing: .05em; }
.payment-order-details strong { color: #695bbd; font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums; }
.payment-order-panel[data-state="paid"] .payment-order-details strong { color: #287653; }
.payment-order-panel[data-state="expired"] .payment-order-details strong { color: #85867f; }
.payment-order-panel p { margin: 9px 0 0 !important; color: #77776f !important; font-size: 8px !important; line-height: 1.6 !important; text-align: left !important; }
.copy-pay-link, .payment-new-order { width: 100%; margin: -3px 0 10px; padding: 10px 12px; border: 1px solid #ddd9ff; border-radius: 8px; background: #faf9ff; color: #6656c5; font: 700 9px var(--sans); cursor: pointer; }
.copy-pay-link:hover, .payment-new-order:hover { border-color: #b7aff2; background: #f4f2ff; }
.copy-pay-link[hidden], .payment-new-order[hidden] { display: none; }
.payment-new-order { color: #4d4d48; border-color: #dedcd6; background: #fff; }
@media (max-width: 520px) { .payment-order-panel { padding: 10px; } .payment-order-details { align-items: flex-start; flex-direction: column; gap: 5px; } }
.payment-status { min-height: 34px; margin: -3px 0 12px !important; padding: 9px 10px; color: #76776f !important; border: 1px solid #e9e8e4; border-radius: 8px; background: #fafaf8; font-size: 8px !important; line-height: 1.6 !important; text-align: left !important; }
.payment-status[data-state="pending"] { color: #9b6b21 !important; border-color: #f0d7ab; background: #fffaf1; }
.payment-status[data-state="success"] { color: #287653 !important; border-color: #bde1ce; background: #f2fbf6; }
.payment-status[data-state="error"] { color: #b8493c !important; border-color: #f0c4bd; background: #fff4f1; }
.recharge-modal .modal-primary:disabled { cursor: wait; opacity: .68; }

.wechat-pay-qr { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; margin: -2px 0 11px; padding: 10px; border: 1px solid #d9d4ff; border-radius: 10px; background: #faf9ff; }
.wechat-pay-qr[hidden] { display: none; }
.wechat-pay-qr img { display: block; width: 104px; height: 104px; padding: 5px; border: 1px solid #ece9ff; border-radius: 7px; background: #fff; box-sizing: border-box; }
.wechat-pay-qr b, .wechat-pay-qr small { display: block; }
.wechat-pay-qr b { color: #423a77; font-size: 10px; }
.wechat-pay-qr small { margin-top: 6px; color: #8e8b9d; font-size: 8px; line-height: 1.65; }
@media (max-width: 520px) { .wechat-pay-qr { grid-template-columns: 88px minmax(0, 1fr); } .wechat-pay-qr img { width: 88px; height: 88px; } }

.wechat-pay-link { display: block; margin: -2px 0 11px; padding: 10px 12px; color: #287653; border: 1px solid #bde1ce; border-radius: 8px; background: #f2fbf6; font-size: 9px; font-weight: 700; text-align: center; text-decoration: none; }
.wechat-pay-link[hidden] { display: none; }

/* 可取消的异步生成任务：明确与已完成作品区分，避免把取消任务误当成成片。 */
.remote-generation { border-color: #e3e0ff; background: #fcfbff; }
.project-cover.processing::before { display: none; }
.generation-pulse { position: relative; z-index: 2; display: grid; width: 54px; height: 54px; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: 0 0 0 13px rgba(255,255,255,.05); font-size: 20px; animation: songev-generation-pulse 1.6s ease-in-out infinite; }
.generation-progress { position: absolute; z-index: 3; right: 12px; bottom: 13px; left: 12px; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.2); }
.generation-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b9aaff, #fff); transition: width .3s ease; }
.generation-retry-countdown { display: block; margin-top: 4px; color: #8c7be6; font-family: var(--mono); font-size: 7px; font-variant-numeric: tabular-nums; }
.status.generating { color: #705de7; background: #efedff; }
.status.cancelled { color: #857264; background: #f5f1ec; }
.project-actions .cancel-generation { color: #b44d43; border-color: #ebc8c2; background: #fff8f7; }
.project-actions .cancel-generation:hover { color: #fff; border-color: #bd5a51; background: #bd5a51; }
.job-cancelled .project-cover { background: linear-gradient(135deg, #8d8580, #504d52); }
.job-cancelled .generation-pulse { animation: none; opacity: .7; }
@keyframes songev-generation-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 20px rgba(255,255,255,.02); } }


/* 积分中心：让扣费、退款、充值到账均可被用户核对。 */
.credit-actions { display: inline-flex; gap: 5px; align-items: center; }
.credit-foot .credit-actions button:first-child { color: #b9b6ff; background: #242331; }
.credits-modal { width: min(540px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; text-align: left; }
.credits-modal .eyebrow, .credits-modal > h2, .credits-modal > p { text-align: center; justify-content: center; }
.credit-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 20px; }
.credit-summary > div { min-width: 0; padding: 11px 10px; border: 1px solid #eceae5; border-radius: 9px; background: #fafaf8; }
.credit-summary span, .credit-summary strong { display: block; }
.credit-summary span { color: #95968f; font-size: 8px; }
.credit-summary strong { overflow: hidden; margin-top: 6px; color: #393942; font-family: var(--mono); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ledger-section-heading { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.ledger-section-heading b { color: #41413d; font-size: 10px; }
.ledger-section-heading small { color: #aaa9a2; font-size: 8px; }
.ledger-list, .payment-order-list { overflow: hidden; border: 1px solid #eceae5; border-radius: 9px; background: #fff; }
.ledger-row { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 11px; border-bottom: 1px solid #f0efeb; }
.ledger-row:last-child, .payment-order-row:last-child { border-bottom: 0; }
.ledger-entry-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; font-family: var(--mono); font-size: 12px; font-weight: 700; }
.ledger-entry-icon.is-positive { color: #287653; background: #edfaf3; }
.ledger-entry-icon.is-negative { color: #9b5c2a; background: #fff5e9; }
.ledger-entry-icon.is-neutral { color: #7164c7; background: #f1efff; }
.ledger-entry-copy { min-width: 0; }
.ledger-entry-copy b, .ledger-entry-copy small, .ledger-entry-copy time { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-entry-copy b { color: #4d4d48; font-size: 9px; }
.ledger-entry-copy small, .ledger-entry-copy time { margin-top: 3px; color: #9b9b94; font-size: 8px; }
.ledger-entry-copy time { color: #b2b1aa; font-family: var(--mono); font-size: 7px; }
.ledger-amount { align-self: start; padding-top: 2px; font-family: var(--mono); font-size: 11px; font-weight: 500; }
.ledger-amount.is-positive { color: #299163; }
.ledger-amount.is-negative { color: #a66a35; }
.ledger-amount.is-neutral { color: #8b8982; }
.ledger-empty { display: grid; gap: 4px; padding: 18px 15px; color: #a1a19a; text-align: center; }
.ledger-empty b { color: #73736d; font-size: 9px; }
.ledger-empty span { font-size: 8px; line-height: 1.6; }
.ledger-empty.error b { color: #b8493c; }
.ledger-empty.compact { padding: 13px; }
.payment-order-heading { margin-top: 20px; }
.payment-order-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; border-bottom: 1px solid #f0efeb; }
.payment-order-row > div { min-width: 0; }
.payment-order-row b, .payment-order-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payment-order-row b { color: #55554f; font-size: 9px; }
.payment-order-row small { margin-top: 4px; color: #a09f98; font-size: 8px; }
.payment-order-status { flex: 0 0 auto; padding: 4px 6px; border-radius: 4px; font-size: 8px; font-weight: 700; }
.payment-order-status.paid { color: #287653; background: #eefaf3; }
.payment-order-status.pending { color: #9b6b21; background: #fff6e7; }
.payment-order-status.expired { color: #8d8d86; background: #f1f0ed; }
.credits-modal-actions { display: grid; grid-template-columns: 112px 1fr; gap: 8px; margin-top: 18px; }
.credits-modal-actions .small-outline { color: #65655f; border: 1px solid #dedcd6; border-radius: 8px; background: #fff; font-size: 9px; font-weight: 700; }
.credits-modal-actions .small-outline:disabled { cursor: wait; opacity: .65; }
@media (max-width: 520px) { .credits-modal { padding: 26px 18px; } .credit-summary { gap: 5px; } .credit-summary > div { padding: 9px 7px; } .credit-summary strong { font-size: 10px; } .ledger-entry-copy time { white-space: normal; } }

/* 账户认证：让登录入口成为工作台体验的一部分，而不是破坏创作流程的独立页面。 */
.account-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 3px 5px 3px 3px; color: var(--ink); border: 1px solid transparent; border-radius: 999px; background: transparent; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; transition: .18s ease; }
.account-trigger:hover { border-color: #e6e4df; background: #fbfaf8; }
.user-menu-btn { padding: 0; color: #8a8b84; border: 0; background: transparent; font: inherit; font-size: 8px; cursor: pointer; }
.user-menu-btn:hover { color: var(--violet); }
.auth-backdrop { z-index: 40; }
.auth-modal { width: min(420px, calc(100vw - 32px)); padding: 34px 34px 27px; }
.auth-modal > p:not(.eyebrow):not(.auth-switch) { max-width: 305px; }
.auth-modal .modal-primary { width: 100%; margin-top: 6px; }
.auth-field { display: grid; gap: 7px; margin: 13px 0 0; color: #565650; font-size: 9px; font-weight: 700; }
.auth-field input { width: 100%; height: 40px; padding: 0 12px; color: var(--ink); border: 1px solid #e5e3df; border-radius: 8px; outline: none; background: #fff; font: 500 12px var(--sans); transition: border-color .18s, box-shadow .18s; box-sizing: border-box; }
.auth-field input:focus { border-color: #978af2; box-shadow: 0 0 0 3px rgba(115, 97, 223, .10); }
.auth-field input::placeholder { color: #b5b4b0; }
.auth-field[hidden] { display: none; }
.auth-error { min-height: 18px; margin: 12px 0 0 !important; padding: 8px 10px; color: #b64d42 !important; border: 1px solid #f0c5bd; border-radius: 7px; background: #fff4f1; font-size: 9px !important; line-height: 1.5 !important; text-align: left !important; }
.auth-error[hidden] { display: none; }
.auth-error.success { color: #27714c !important; border-color: #bde5cd; background: #f1fbf5; }
.auth-forgot { display: block; margin: 12px 0 -2px auto; padding: 0; color: var(--violet); border: 0; background: transparent; font: 700 9px var(--sans); cursor: pointer; }
.auth-forgot:hover { text-decoration: underline; }
.auth-forgot[hidden], .auth-switch[hidden] { display: none; }
.auth-switch { display: flex; justify-content: center; gap: 5px; margin: 18px 0 0 !important; color: #898a84 !important; font-size: 9px !important; }
.auth-switch button { padding: 0; color: var(--violet); border: 0; background: transparent; font: inherit; font-weight: 800; cursor: pointer; }

.auth-policy { display: block; margin: 13px auto 0; color: #aaa9a3; font-size: 8px; line-height: 1.55; text-align: center; }
.account-modal { width: min(470px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); overflow-y: auto; text-align: left; }
.account-modal > h2, .account-modal > p:not(.eyebrow) { text-align: center; }
.account-modal > p:not(.eyebrow) { max-width: 320px; margin-right: auto; margin-left: auto; }
.account-form { margin-top: 22px; padding-top: 19px; border-top: 1px solid #efeee9; }
.account-form[hidden] { display: none; }
.account-completion-tip { margin: 10px 0 2px; color: #6f716c; font-size: 9px; line-height: 1.65; }
.account-form .auth-field { margin-top: 11px; }
.account-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.account-section-heading b { color: var(--ink); font-size: 11px; }
.account-section-heading small { color: #a1a19a; font-size: 8px; }
.account-readonly { display: flex; align-items: center; min-height: 40px; padding: 0 12px; color: #969791; border: 1px solid #eeece8; border-radius: 8px; background: #f8f8f5; font-size: 11px; font-weight: 500; box-sizing: border-box; }
.email-verification { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 9px 0 2px; padding: 10px 11px; border: 1px solid #f0d7ab; border-radius: 8px; background: #fffaf1; }
.email-verification b, .email-verification small { display: block; }
.email-verification b { color: #9b6b21; font-size: 9px; }
.email-verification small { max-width: 238px; margin-top: 3px; color: #9b7a4b; font-size: 8px; line-height: 1.45; }
.email-verification .small-outline { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.email-verification.verified { border-color: #bde1ce; background: #f2fbf6; }
.email-verification.verified b { color: #287653; }
.email-verification.verified small { color: #5a9277; }
.account-feedback { min-height: 17px; margin: 10px 0 0 !important; padding: 0; font-size: 9px !important; line-height: 1.5 !important; text-align: left !important; }
.account-feedback.success { color: #4b9679 !important; }
.account-feedback.error { color: #b64d42 !important; }
.account-feedback[hidden] { display: none; }
.account-modal .modal-primary, .account-modal .modal-secondary { margin-top: 3px; }
.modal-secondary { width: 100%; padding: 11px; color: #5d50d5; border: 1px solid #d8d4ff; border-radius: 8px; background: #f8f7ff; font-size: 10px; font-weight: 700; }
.account-danger { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 22px; padding: 13px; border: 1px solid #f1d8d2; border-radius: 9px; background: #fff9f7; }
.account-danger b, .account-danger small { display: block; }
.account-danger b { color: #7e4b43; font-size: 10px; }
.account-danger small { max-width: 250px; margin-top: 4px; color: #a17b74; font-size: 8px; line-height: 1.5; }
.danger-btn { flex: 0 0 auto; padding: 8px 9px; color: #b34d42; border: 1px solid #edc7bf; border-radius: 7px; background: #fff; font-size: 8px; font-weight: 700; }
.danger-btn:disabled, .modal-secondary:disabled, .account-modal .modal-primary:disabled { cursor: wait; opacity: .6; }
.account-privacy { display: block; margin-top: 15px; color: #aaa9a3; font-size: 8px; line-height: 1.6; text-align: center; }
@media (max-width: 520px) { .account-modal { padding: 28px 21px 22px; } .account-danger, .email-verification { align-items: flex-start; flex-direction: column; } .danger-btn, .email-verification .small-outline { width: 100%; } }

@media (max-width: 640px) { .top-actions .account-trigger > span:last-child { display: none; } .auth-modal { padding: 29px 22px 22px; } }

/* 微信开放平台扫码登录：保留声映的柔和紫色系统，同时用微信绿色作为单一识别色。 */
.wechat-login[hidden] { display: none; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 17px 0 14px; color: #aaa9a3; font-size: 8px; line-height: 1; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #eeece8; }
.auth-divider span { padding: 0 2px; }
.wechat-login { padding: 12px; border: 1px solid #e9e8e5; border-radius: 10px; background: linear-gradient(135deg, #fbfdfb, #f8f7ff); text-align: left; transition: border-color .2s, box-shadow .2s; }
.wechat-login[data-state="pending"], .wechat-login[data-state="completing"] { border-color: #b9dfc7; box-shadow: 0 5px 16px rgba(64, 154, 97, .08); }
.wechat-login[data-state="error"] { border-color: #f0c5bd; }
.wechat-login[data-state="disabled"] { border-color: #e7e4df; background: #fbfaf8; }
.wechat-login-unavailable { margin: 10px 0 0; padding: 8px 9px; color: #827d76; border: 1px solid #ebe7df; border-radius: 7px; background: #fffdfa; font-size: 8px; line-height: 1.45; }
.wechat-login-unavailable[hidden] { display: none; }
.wechat-login-head { display: flex; align-items: center; gap: 9px; }
.wechat-mark { width: 28px; height: 28px; display: grid; flex: 0 0 auto; place-items: center; color: #fff; border-radius: 9px; background: #32a85c; box-shadow: 0 5px 12px rgba(50, 168, 92, .22); font: 800 12px var(--sans); }
.wechat-login-head b, .wechat-login-head small { display: block; }
.wechat-login-head b { color: #34343a; font-size: 10px; }
.wechat-login-head small { margin-top: 3px; color: #989892; font-size: 8px; }
.wechat-login-qr { display: grid; justify-items: center; margin: 12px 0 9px; padding: 12px 10px 8px; border: 1px dashed #d8ddd8; border-radius: 8px; background: #fff; }
.wechat-login-qr[hidden] { display: none; }
.wechat-login-qr img { width: min(188px, 56vw); height: min(188px, 56vw); display: block; image-rendering: auto; }
.wechat-login-qr p { min-height: 14px; margin: 8px 0 0 !important; color: #6c7b6d !important; font-size: 8px !important; line-height: 1.4 !important; text-align: center !important; }
.wechat-login-start { width: 100%; margin-top: 11px; padding: 10px; color: #278149; border: 1px solid #b9dfc7; border-radius: 8px; background: #f3fbf5; font: 800 10px var(--sans); cursor: pointer; transition: background .18s, transform .18s; }
.wechat-login-start:hover:not(:disabled) { background: #e7f7ec; transform: translateY(-1px); }
.wechat-login-start:disabled { cursor: not-allowed; opacity: .62; }
@media (max-width: 520px) { .wechat-login { padding: 11px; } .wechat-login-qr img { width: min(174px, 56vw); height: min(174px, 56vw); } }

/* 手机号短信登录与绑定：只展示受控发送入口，验证码不会写入浏览器存储。 */
.auth-login-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 17px 0 -2px; padding: 4px; border: 1px solid #eceae6; border-radius: 9px; background: #f7f6f3; }
.auth-login-methods[hidden] { display: none; }
.auth-login-methods button { min-height: 31px; color: #8b8b85; border: 0; border-radius: 6px; background: transparent; font: 700 9px var(--sans); cursor: pointer; transition: .18s ease; }
.auth-login-methods button.active { color: #5547c8; background: #fff; box-shadow: 0 2px 7px rgba(49, 43, 100, .1); }
.sms-code-row { display: flex; gap: 8px; }
.sms-code-row input { min-width: 0; flex: 1; }
.sms-code-row .small-outline { flex: 0 0 auto; min-width: 82px; margin: 0; padding-right: 9px; padding-left: 9px; white-space: nowrap; }
.sms-code-row .small-outline:disabled { cursor: wait; opacity: .65; }
.phone-verification { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 11px 0 2px; padding: 10px 11px; border: 1px solid #d9d4ff; border-radius: 8px; background: #f8f7ff; }
.phone-verification b, .phone-verification small { display: block; }
.phone-verification b { color: #5d50d5; font-size: 9px; }
.phone-verification small { max-width: 280px; margin-top: 3px; color: #74709c; font-size: 8px; line-height: 1.45; }
.phone-verification.verified { border-color: #bde1ce; background: #f2fbf6; }
.phone-verification.verified b { color: #287653; }
.phone-verification.verified small { color: #5a9277; }
@media (max-width: 520px) { .sms-code-row { gap: 6px; } .sms-code-row .small-outline { min-width: 76px; font-size: 8px; } }