:root {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #142b68;
  --navy:#142b68;
  --blue: #4f5de8;
  --blue-deep: #3d43c8;
  --cyan:#13c7d7;
  --violet:#7655e8;
  --lavender: #efefff;
  --muted: #7d8bad;
  --line: #e3e7f7;
  --surface: #ffffff;
  --workbench-bg:#f7f8ff;
  --shadow: 0 13px 34px rgba(75, 85, 168, .10);
  --sidebar-width: 210px;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background:#f3f7ff; color: var(--navy); }
body:before { content: ""; position: fixed; inset: 76px 0 0; z-index: -1; background: linear-gradient(135deg, #fbfcff 0%, var(--workbench-bg) 55%, #f0f2ff 100%); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }
[v-cloak] { display: none !important; }

.topbar { height: 76px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.97); border-bottom: 1px solid #e9ecf8; position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 13px; color: var(--navy); text-decoration: none; }
.brand-logo-frame { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 12px; background: transparent; }
.brand-logo { width: 50px; height: 50px; object-fit: cover; object-position: center; border-radius: 12px; }
.brand strong { display: block; font-size: 20px; line-height: 1.1; letter-spacing: .5px; }
.brand small { display: block; margin-top: 5px; color: #8794b4; font-size: 11px; }
.top-actions { display: flex; align-items: center; gap: 8px; color: #617096; font-size: 12px; }
.top-link { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: #303542; white-space: nowrap; }
.top-link .mini-icon { width: 19px; height: 19px; }
.top-link:hover, .top-link:focus-visible { color: #434af9; background: #f2f2f4; }
.mobile-help-button { display: none; }
.link-button:hover { color: var(--blue); }
.mini-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.points-shell { height: 42px; display: flex; align-items: center; gap: 7px; padding: 4px 8px 4px 14px; border: 1px solid #e1e3ff; border-radius: 22px; color: #5948d2; background: linear-gradient(120deg, #fbfaff, #f0efff); font-weight: 700; }
.points-pill { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.points-pill .mini-icon { width: 16px; height: 16px; }
.top-recharge { min-height: 32px; padding: 0 15px; border: 0; border-radius: 17px; color: #5b45d5; background: #e9e7ff; font-size: 12px; font-weight: 700; }
.profile-button { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; color: #27396f; background: transparent; font-weight: 700; }
.profile-menu-shell { position: relative; }
.profile-button:focus-visible { outline: 2px solid #6555df; outline-offset: 3px; border-radius: 20px; }
.profile-menu { position: absolute; top: calc(100% + 11px); right: 0; z-index: 20; width: min(268px, calc(100vw - 28px)); padding: 7px; border: 1px solid #e1e5fa; border-radius: 15px; background: #fff; box-shadow: 0 18px 45px rgba(29,43,104,.18); }
.profile-menu-head { display: grid; gap: 5px; padding: 11px 12px 14px; border-bottom: 1px solid #edf0fa; }
.profile-menu-head strong { overflow: hidden; color: var(--navy); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-head small { color: #6e7fa7; font-size: 12px; }
.profile-menu button { display: block; width: 100%; min-height: 39px; padding: 9px 12px; border: 0; border-radius: 8px; color: #27396f; background: #fff; text-align: left; font-size: 13px; }
.profile-menu button:hover, .profile-menu button:focus-visible { color: #4f46d5; background: #f3f2ff; }
.profile-menu .profile-menu-logout { margin-top: 5px; border-top: 1px solid #edf0fa; border-radius: 0 0 8px 8px; color: #a54b5d; }
.profile-chevron { margin-left: 1px; color: #42517d; font-size: 16px; }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #2dcae0, #4a54df 65%, #7b52d8); box-shadow: 0 5px 12px rgba(74, 82, 221, .18); }
.login-button, .ghost-button { padding: 10px 15px; border: 1px solid #dfe3fb; border-radius: 20px; color: #5645d0; background: #faf9ff; font-weight: 700; }

.layout { display: flex; min-height: calc(100vh - 76px); }
.sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); position: sticky; top: 76px; height: calc(100vh - 76px); align-self: flex-start; overflow-y: auto; padding: 28px 17px 22px; display: flex; flex-direction: column; background: rgba(255,255,255,.72); border-right: 1px solid #e5e9f7; }
.sidebar nav { display: grid; gap: 16px; }
.nav-item { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 19px; border: 1px solid transparent; border-radius: 10px; color: #63749d; background: transparent; text-align: left; font-size: 16px; }
.nav-item .mini-icon { width: 20px; height: 20px; }
.nav-item:hover { color: var(--blue); background: #f0f1ff; }
.nav-item.active { color: #5b43dd; background: linear-gradient(110deg, #f0edff, #e9e7ff); box-shadow: 0 7px 18px rgba(93, 73, 210, .08); font-weight: 700; }
.sidebar-bottom { margin-top: auto; color: #9aa6bf; font-size: 10px; text-align: center; }
.support-card { padding: 15px 13px; margin-bottom: 18px; border: 1px solid #e0e6fa; border-radius: 12px; background: linear-gradient(145deg, #fcffff, #f7f4ff); text-align: left; }
.support-card strong { color: var(--navy); font-size: 12px; }
.support-card p { margin: 8px 0; color: #8795b2; line-height: 1.6; }
.support-card a { color: var(--blue); text-decoration: none; font-size: 10px; }
.main-content { flex: 1; min-width: 0; }
.page { width: 100%; max-width: none; margin: 0; padding: 21px 26px 70px; }

.hero-banner { min-height: 234px; display: flex; align-items: center; justify-content: space-between; overflow: visible; position: relative; padding: 28px 50px; border-radius: 15px; background: linear-gradient(112deg, #f0f2ff 0%, #ececff 56%, #e4e6ff 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.hero-banner:before { content: ""; position: absolute; width: 68%; height: 130px; right: 1%; bottom: -28px; border-top: 1px solid rgba(117, 131, 235, .34); border-radius: 50%; transform: rotate(-8deg); }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 12px; color: #4556d2; font-size: 10px; font-weight: 800; letter-spacing: 4px; }
.hero-copy h1, .page-heading h1 { margin: 0; color: var(--navy); font-size: clamp(28px, 2.7vw, 39px); letter-spacing: -1.3px; line-height: 1.16; }
.wave { display: inline-block; margin-left: 7px; font-size: .75em; transform: rotate(-8deg); }
.hero-copy p:not(.eyebrow), .page-heading p:not(.eyebrow) { margin: 14px 0 0; color: #7586ae; font-size: 13px; line-height: 1.7; }
.hero-decoration { width: 60%; height: 234px; position: absolute; right: 0; top: 0; }
.hero-decoration .visual-art { position: absolute; right: 1%; bottom: -10px; width: min(450px, 85%); height: 285px; }
.hero-banner-art { position: absolute; right: 15%; bottom: -15px; width: auto; max-width: none; height: 293px; object-fit: contain; object-position: right bottom; }
.hero-star, .hero-cube { position: absolute; z-index: 2; color: #fff; text-shadow: 0 0 12px rgba(103, 119, 237, .7); }
.hero-star-one { top: 38px; left: 12%; font-size: 27px; }
.hero-star-two { top: 71px; right: 15%; font-size: 19px; }
.hero-cube { top: 76px; left: 4%; color: #aab5ff; font-size: 42px; opacity: .8; }
.visual-art { display: block; }
.visual-art svg { width: 100%; height: 100%; display: block; overflow: visible; }

.primary-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.feature-card { min-height: 217px; display: flex; align-items: flex-start; justify-content: space-between; overflow: hidden; position: relative; padding: 27px 24px 21px; border: 0; border-radius: 14px; color: #fff; text-align: left; box-shadow: 0 13px 25px rgba(69, 75, 196, .16); transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 17px 30px rgba(69, 75, 196, .23); }
.feature-card:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(140deg, rgba(255,255,255,.08), transparent 48%); }
.feature-card.violet { background: linear-gradient(135deg, #503fda, #5a40d2 50%, #6b50db); }
.feature-card.blue { background: linear-gradient(135deg, #2854db, #2d73e8 52%, #38b9de); }
.feature-card.cyan { background: linear-gradient(135deg, #405adf, #3d79e9 52%, #3cc1df); }
.feature-card.purple { background: linear-gradient(135deg, #4e34bf, #5b44d3 55%, #7650e1); }
.feature-card-copy { position: relative; z-index: 2; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
.feature-card h2 { margin: 0 0 19px; font-size: 22px; letter-spacing: -.5px; }
.feature-card p { max-width: 185px; min-height: 45px; margin: 0; color: rgba(255,255,255,.9); font-size: 13px; line-height: 1.75; white-space: pre-line; }
.card-arrow { width: 33px; height: 33px; display: grid; place-items: center; margin-top: auto; border-radius: 50%; color: #5362d8; background: #fff; box-shadow: 0 5px 10px rgba(37,47,164,.1); }
.card-arrow .mini-icon { width: 17px; height: 17px; }
.feature-card > .visual-art { width: 51%; height: 154px; position: absolute; right: 3px; bottom: 0; z-index: 1; }
.feature-card .visual-art-document { width: 52%; height: 163px; right: -2px; }
.feature-card .visual-art-microphone { width: 54%; height: 157px; right: 0; }
.feature-card .visual-art-avatar-stage { width: 57%; height: 157px; right: -1px; }
.feature-card .visual-art-viral-video { width: 56%; height: 157px; right: -1px; }
.feature-art-image { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: fill; object-position: center; }
.feature-card .feature-art-avatar { inset: auto -5px 0 auto; width: 61%; height: 100%; object-fit: contain; object-position: center bottom; }

.home-columns { display: grid; grid-template-columns: minmax(0, .69fr) minmax(0, 1fr); gap: 16px; margin-top: 20px; }
.module-entry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.module-entry-card { min-width: 0; min-height: 217px; }
.module-entry-card .feature-card-copy { width: 72%; }
.module-entry-card h2 { margin-bottom: 12px; font-size: 27px; }
.module-entry-card p { max-width: 230px; font-size: 13px; line-height: 1.8; }
.module-entry-kicker { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 600; letter-spacing: 2px; opacity: .75; }
.module-entry-art { position: absolute; z-index: 1; right: 0; bottom: 8px; width: 42%; height: 160px; pointer-events: none; }
.module-entry-art > img { width: 100%; height: 100%; object-fit: contain; }
.feature-card .module-entry-art .visual-art { inset: 0; width: 100%; height: 100%; }
.module-page-heading { align-items: center; }
.module-page .primary-feature-grid { margin-top: 0; }
.module-entry-card:focus-visible { outline: 3px solid #434af9; outline-offset: 3px; }
@media (max-width: 1080px) {
  .module-entry-card .feature-card-copy { width: 90%; }
  .module-entry-card p { max-width: 190px; }
  .module-entry-art { width: 38%; opacity: .65; }
}
@media (max-width: 720px) {
  .module-entry-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .module-entry-card { min-height: 168px; }
  .module-entry-card .feature-card-copy { width: 72%; }
  .module-entry-card p { max-width: 230px; }
  .module-entry-art { width: 38%; height: 130px; opacity: .9; }
  .module-page-heading .ghost-button { margin-top: 14px; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .module-entry-card { transition: none; }
}
.panel { padding: 20px 23px 21px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.quick-create-panel { padding-right: 30px; padding-left: 30px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.panel-kicker { display: block; margin-bottom: 8px; color: #8593bb; font-size: 9px; font-weight: 800; letter-spacing: 2.1px; }
.panel h2 { margin: 0; color: var(--navy); font-size: 18px; letter-spacing: -.3px; }
.panel-subtitle { margin: 8px 0 0; color: #8795b3; font-size: 12px; }
.link-button, .text-link { display: inline-flex; align-items: center; gap: 5px; padding: 3px 0; border: 0; color: #5548dc; background: transparent; font-size: 11px; font-weight: 700; white-space: nowrap; }
.link-button .mini-icon, .text-link .mini-icon { width: 14px; height: 14px; }
.task-status-panel, .quick-create-panel { min-height: 344px; }
.task-tabs { display: flex; gap: 31px; margin: 25px 0 9px; border-bottom: 1px solid #edf0fa; color: #7786aa; font-size: 12px; }
.task-tabs button { position: relative; padding: 0 1px 13px; border: 0; color: inherit; background: transparent; white-space: nowrap; cursor: pointer; }
.task-tabs button:hover { color: #5b45df; }
.task-tabs button.active { color: #5b45df; font-weight: 700; }
.task-tabs button.active:after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: #5d47ed; }
.task-list { display: grid; gap: 9px; margin-top: 9px; }
.task-row { width: 100%; min-height: 74px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 48px auto 92px; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid #e9ecf8; border-radius: 12px; color: inherit; background: linear-gradient(110deg, #fff, #fbfbff); font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.task-row:hover { border-color: #c9c9f5; box-shadow: 0 7px 16px rgba(74, 69, 190, .08); transform: translateY(-1px); }
.task-row:focus-visible { outline: 3px solid rgba(93, 71, 237, .26); outline-offset: 2px; }
.task-thumb { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #7163ed, #8b76ee); }
.task-thumb .mini-icon { width: 21px; height: 21px; }
.task-main { min-width: 0; }
.task-duration { color: #7180a5; font-size: 11px; white-space: nowrap; }
.task-progress { display: grid; grid-template-columns: minmax(40px, 1fr) auto; align-items: center; gap: 8px; min-width: 92px; }
.task-progress i { display: block; grid-column: 1; grid-row: 1; height: 7px; overflow: hidden; border-radius: 7px; background: linear-gradient(90deg, #5a49e5, #7254ee); }
.task-progress:before { content: ""; grid-column: 1; grid-row: 1; height: 7px; border-radius: 7px; background: #e6e9f9; }
.task-progress b { color: #5b4fd2; font-size: 10px; font-weight: 700; white-space: nowrap; }
.task-row strong { display: block; color: var(--navy); font-size: 13px; }
.task-row small { display: block; margin-top: 5px; color: #8492b1; font-size: 10px; }
.task-symbol { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(145deg, #6957ee, #8a76f0); }
.task-symbol span { width: 15px; height: 15px; display: block; border: 2px solid #fff; border-radius: 50%; position: relative; }
.task-symbol span:after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 8px; height: 2px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
.task-row > b { color: #5b4fd2; font-size: 11px; text-align: right; }
.status { display: inline-block; padding: 5px 8px; border-radius: 6px; font-size: 10px; background: #eef2fa; color: #7483a0; white-space: nowrap; }
.status.succeeded, .status.confirmed { color: #15965d; background: #e7fbf2; }
.status.queued, .status.running, .status.user_marked_paid { color: #b8771d; background: #fff5df; }
.status.failed, .status.expired { color: #d15c6a; background: #fff0f2; }
.status.cancelled { color: #8995aa; background: #f1f4f8; }
.task-empty { min-height: 210px; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 8px; color: #9ba8c0; text-align: center; }
.task-empty strong { color: #576b99; font-size: 13px; }
.task-empty p { margin: 0 0 7px; font-size: 11px; }
.task-empty-icon { width: 53px; height: 53px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 16px; color: #7563eb; background: #f1efff; }
.task-empty-icon .mini-icon { width: 25px; height: 25px; }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 25px; }
.quick-card { min-height: 102px; height: 102px; display: flex; align-items: flex-start; gap: 11px; position: relative; padding: 15px 13px 12px; overflow: hidden; border: 1px solid #e5e8f7; border-radius: 12px; color: var(--navy); background: linear-gradient(145deg, #fff, #f7f7ff); text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.quick-card:hover { border-color: #b7b3fa; box-shadow: 0 8px 17px rgba(102,91,217,.1); transform: translateY(-2px); }
.quick-art { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: #f0eeff; }
.quick-art .visual-art { width: 43px; height: 38px; }
.quick-copy { min-width: 0; padding-top: 2px; }
.quick-copy strong { display: block; font-size: 13px; white-space: nowrap; }
.quick-copy small { display: block; min-height: 28px; margin-top: 6px; color: #8a98b6; font-size: 10px; line-height: 1.45; white-space: pre-line; }
.quick-arrow { display: block; margin-top: 1px; color: #6752eb; }
.quick-arrow .mini-icon { width: 16px; height: 16px; }

.ai-video-page { min-height: calc(100vh - 60px); padding: 28px 30px 48px; box-sizing: border-box; background: #f5f6fa; }
.creation-form .bailian-upload-composer { position:relative; box-sizing:border-box; max-width:900px; min-height:194px; margin:22px 0; padding:12px; border:1px solid transparent; border-radius:24px; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(115deg,#55ded1,#bda5ff,#e5e6ed) border-box; box-shadow:0 4px 22px rgba(111,88,180,.08); }
.creation-form .bailian-upload-composer:focus-within { box-shadow:0 3px 20px rgba(82,207,212,.13); }
.creation-form .bailian-media-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.creation-form .bailian-add-media { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:74px; height:68px; padding:0; border:0; border-radius:18px; background:#f6f6f6; color:#96969d; cursor:pointer; box-sizing:border-box; }
.creation-form .bailian-add-media input { display:none; }
.creation-form .bailian-add-media>span { font-size:23px; }
.creation-form .bailian-add-media { margin:0; font-weight:400; }
.creation-form .bailian-add-media { position:relative; }
.creation-form .bailian-add-media .bailian-media-help { display:none; position:absolute; left:-70px; bottom:calc(100% + 12px); z-index:8; box-sizing:border-box; width:250px; padding:8px; border-radius:6px; color:#fff; background:#303036; font-size:12px; font-weight:400; line-height:1.5; text-align:left; box-shadow:0 3px 15px #0002; }
.creation-form .bailian-media-help::after { content:''; position:absolute; left:100px; top:100%; border:6px solid transparent; border-top-color:#303036; }
.creation-form .bailian-add-media:hover .bailian-media-help, .creation-form .bailian-add-media:focus-within .bailian-media-help { display:block; }
@media (max-width:600px) { .creation-form .bailian-add-media .bailian-media-help { left:0; } }
.creation-form .bailian-add-media small { font-size:12px; font-weight:400; line-height:18px; }
.creation-form .bailian-add-media:disabled { cursor:not-allowed; opacity:.7; }
.creation-form .bailian-media-thumb { position:relative; width:58px; height:68px; }
.creation-form .bailian-media-thumb img { width:100%; height:100%; object-fit:contain; background:#f5f5f5; border-radius:14px; }
.creation-form .bailian-media-thumb .bailian-remove-media { position:absolute; right:2px; top:2px; width:17px; height:17px; padding:0; border:0; border-radius:50%; color:#fff; background:#aaa; cursor:pointer; }
.creation-form .bailian-media-preview { position:relative; display:grid; place-items:center; width:100%; height:100%; padding:0; border:0; border-radius:14px; overflow:hidden; background:#f5f5f5; color:#898991; cursor:pointer; }
.creation-form .bailian-media-preview video { width:100%; height:100%; object-fit:contain; }
.creation-form .bailian-media-preview>span { position:absolute; color:white; text-shadow:0 1px 3px #000; }
.creation-form .bailian-reference-preview { position:relative; width:min(640px,90vw); }
.creation-form .bailian-reference-preview video { width:100%; max-height:70vh; object-fit:contain; }
.creation-form .bailian-reference-preview audio { width:100%; }
.creation-form .bailian-mentions { position:absolute; top:-24px; left:28px; z-index:8; box-sizing:border-box; width:178px; max-height:240px; overflow-y:auto; padding:12px; border:1px solid #f0f0f2; border-radius:20px; background:#fff; box-shadow:0 4px 24px #0001; }
.creation-form .bailian-mentions small { display:block; margin-bottom:2px; color:#bdbdc3; font-size:12px; line-height:14px; }
.creation-form .bailian-mentions button { display:flex; align-items:center; gap:6px; width:100%; height:32px; padding:4px; border:0; border-radius:6px; color:#33333b; background:transparent; font-size:13px; cursor:pointer; }
.creation-form .bailian-mentions button:hover, .creation-form .bailian-mentions button:focus-visible { background:#f6f6f8; }
.creation-form .bailian-mentions img, .creation-form .bailian-mentions video, .creation-form .bailian-mentions .mini-icon { width:20px; height:20px; object-fit:contain; border-radius:4px; background:#f5f5f6; }
.creation-form .bailian-upload-composer textarea { display:block; box-sizing:border-box; width:100%; min-height:39px; height:39px; margin:12px 0; padding:3px; resize:none; border:0; outline:0; background:transparent; font:inherit; font-size:13px; color:#24242c; }
.creation-form .bailian-upload-composer textarea::placeholder { color:#bebec4; }
.creation-form .bailian-upload-composer textarea:focus { border:0; outline:0; box-shadow:none; }
.creation-form .bailian-reference-editor { box-sizing:border-box; width:100%; min-height:39px; margin:12px 0; padding:3px; border:0; outline:0; background:transparent; font-size:13px; line-height:22px; color:#24242c; white-space:pre-wrap; overflow-wrap:anywhere; }
.creation-form .bailian-reference-editor[data-empty=true]::before { content:attr(data-placeholder); color:#bebec4; pointer-events:none; }
.creation-form .bailian-reference-token { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; color:#3678ff; cursor:default; user-select:all; }
.creation-form .bailian-reference-token img, .creation-form .bailian-reference-token video { width:20px; height:20px; object-fit:contain; border-radius:4px; background:#f5f5f6; }
.creation-form .bailian-reference-token.invalid { color:#e44; }
.creation-form .bailian-composer-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px; }
.creation-form .bailian-parameters { position:relative; }
.creation-form .bailian-parameter-popover { max-height:var(--bailian-popover-height,calc(100vh - 120px)); overflow-y:auto; }
.creation-form .bailian-parameters[data-placement=below] .bailian-parameter-popover { top:calc(100% + 12px); bottom:auto; }
.creation-form .bailian-parameters summary { padding:8px 10px; border-radius:20px; background:transparent; cursor:pointer; list-style:none; color:#333; }
.creation-form .bailian-parameters summary span { color:#ddd; margin:0 7px; }
.creation-form .bailian-parameters summary svg { width:14px; height:14px; vertical-align:-3px; }
.creation-form .bailian-parameters[open] summary, .creation-form .bailian-parameters summary:hover { background:#f7f7f8; }
.creation-form .bailian-parameter-popover { position:absolute; bottom:calc(100% + 12px); left:0; z-index:5; width:360px; max-width:75vw; box-sizing:border-box; padding:18px; border:1px solid #eee; border-radius:24px; background:#fff; box-shadow:0 5px 30px #0001; }
.creation-form .bailian-parameter-popover label { display:block; margin:8px 0; color:#94949e; font-size:12px; font-weight:400; }
.creation-form .bailian-parameter-popover { padding:16px; }
.creation-form .bailian-parameter-popover label:first-child { margin-top:0; }
.creation-form .bailian-parameter-popover label:not(:first-child) { margin-top:22px; }
.creation-form .bailian-parameter-popover>div { display:flex; gap:8px; }
.creation-form .bailian-parameter-popover button { flex:1; padding:8px; border:0; border-radius:20px; color:#75809a; background:#fafafa; cursor:pointer; }
.creation-form .bailian-parameter-popover button.active { color:#15151d; background:#f0f0f2; }
.creation-form .bailian-audio-note { padding:7px 12px; border:1px solid #e0ebff; border-radius:20px; background:#f3f8ff; color:#3678ff; }
.creation-form .bailian-audio-note { display:flex; align-items:center; gap:5px; cursor:pointer; font:inherit; }
.creation-form .bailian-audio-note:not(.active) { color:#85858d; background:#f7f7f8; border-color:#eee; }
.creation-form .bailian-audio-note .mini-icon { width:14px; height:14px; }
.creation-form .bailian-upload-help { margin-left:auto; padding:7px 10px; border:1px solid #dedbff; border-radius:20px; color:#6357e9; white-space:nowrap; }
.creation-form .bailian-submit { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; color:#fff; background:#181820; font-size:23px; cursor:pointer; }
.creation-form .bailian-submit:disabled { background:#929296; cursor:not-allowed; }
.creation-form .bailian-upload-composer button:focus-visible { outline:2px solid #6a62ff; outline-offset:2px; }
.creation-form .bailian-parameter-popover .bailian-ratios { gap:6px; }
.creation-form .bailian-ratios button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:60px; padding:7px 2px; border-radius:18px; font-size:12px; }
.creation-form .bailian-ratio-icon { display:block; max-width:15px; max-height:15px; width:15px; border:1px solid currentColor; border-radius:2px; }
.creation-form .bailian-ratio-icon.automatic { height:10px; }
.creation-form .bailian-parameter-popover input[type=range] { appearance:none; display:block; width:100%; height:4px; margin:20px 0; border:0; border-radius:2px; background:linear-gradient(to right,#181820 var(--range-progress,0%),#f0f0f2 var(--range-progress,0%)); cursor:pointer; }
.creation-form .bailian-parameter-popover input[type=range]::-webkit-slider-thumb { appearance:none; width:14px; height:14px; border:0; border-radius:50%; background:#181820; }
.creation-form .bailian-parameter-popover input[type=range]::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:#181820; }
.creation-form .bailian-duration-ticks { position:relative; height:16px; color:#9696a0; font-size:12px; }
.creation-form .bailian-duration-ticks span { position:absolute; transform:translateX(-50%); }
.creation-form .bailian-duration-ticks span:first-child { transform:none; }
.creation-form .bailian-duration-ticks span:last-child { transform:translateX(-100%); }
.creation-form .bailian-parameters summary .bailian-setting-icon { color:inherit; margin:0; }
@media (max-width:1200px) and (min-width:901px) { .video-entry-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ai-video-heading { display:flex; align-items:center; justify-content:space-between; width:100%; margin:0 0 24px; }
.ai-video-heading h1 { margin: 0; color: var(--navy); font-size: 28px; letter-spacing: 0; }
.ai-video-heading p:not(.eyebrow) { margin: 7px 0 0; color: #788298; font-size: 13px; }
.video-entry-grid { display: grid; width: 100%; max-width: 1508px; margin: 0 auto; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 24px; align-items: start; }
.video-entry-card { display: block; width: 100%; overflow: hidden; position: relative; padding: 0; border: 1px solid rgba(110,118,220,.28); border-radius: 26px; background: transparent; box-shadow: 0 16px 34px rgba(74,80,160,.22), 0 2px 8px rgba(74,80,160,.12); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.video-entry-card:hover { transform: translateY(-4px); border-color: #aaa6f1; box-shadow: 0 18px 34px rgba(76,87,169,.17); }
.edit-type-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 2px; }
.edit-type-list button { padding: 9px 14px; border: 1px solid #dce5f6; border-radius: 8px; color: #6d7d9e; background: #fbfcff; font-size: 12px; cursor: pointer; }
.edit-type-list button:hover, .edit-type-list button.active { border-color: #6a5bea; color: #5b45d7; background: #f0efff; }
.video-create-options { display: grid; gap: 14px; margin: 18px 0 4px; padding: 14px; border: 1px solid #e2e7f5; border-radius: 10px; background: #fbfcff; }
.video-mode-tabs { display: flex; gap: 8px; }
.video-mode-tabs button, .video-scene-list button, .video-setting-grid button { padding: 8px 12px; border: 1px solid #dce5f6; border-radius: 8px; color: #6d7d9e; background: #fff; font-size: 12px; cursor: pointer; }
.video-mode-tabs button.active, .video-scene-list button.active, .video-setting-grid button.active, .video-mode-tabs button:hover, .video-scene-list button:hover, .video-setting-grid button:hover { border-color: #6a5bea; color: #5b45d7; background: #f0efff; }
.video-reference-picker, .video-scene-picker, .video-setting-grid { display: grid; gap: 8px; }
.video-reference-picker label, .video-scene-picker > label, .video-setting-grid > label { color: #6d7d9e; font-size: 12px; }
.video-reference-picker input { display: block; width: 100%; margin-top: 7px; box-sizing: border-box; padding: 9px; border: 1px dashed #cfd9ed; border-radius: 8px; background: #fff; color: #7685a3; font-size: 12px; }
.video-reference-list { display: flex; flex-wrap: wrap; gap: 6px; }
.video-reference-list span { max-width: 100%; overflow: hidden; padding: 5px 8px; border-radius: 6px; color: #596b94; background: #eef1ff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.video-scene-list { display: flex; flex-wrap: wrap; gap: 7px; }
.video-setting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.video-setting-grid > label > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.motion-audio-option { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: #6d7d9e; font-size: 12px; }
.video-entry-art { aspect-ratio: 440 / 643; display: grid; place-items: center; overflow: hidden; background: #f8f9ff; }
.video-entry-image { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.video-flow-panel { min-height: 150px; display: grid; grid-template-columns: 215px minmax(0,1fr); align-items: center; gap: 34px; margin-top: 26px; padding: 25px 31px; }
.video-flow-intro h2 { margin: 0; color: var(--navy); font-size: 19px; }
.video-flow-intro p { margin: 8px 0 0; color: #8a98b6; font-size: 12px; }
.video-flow-steps { display: grid; grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr); align-items: center; gap: 14px; }
.video-flow-steps > div { display: grid; grid-template-columns: 37px 1fr; column-gap: 11px; align-items: center; }
.video-flow-steps b { width: 37px; height: 37px; display: grid; grid-row: span 2; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#6659ec,#4c42d1); font-size: 16px; }
.video-flow-steps strong { color: var(--navy); font-size: 13px; }
.video-flow-steps span { margin-top: 5px; color: #8a98b7; font-size: 10px; line-height: 1.5; }
.video-flow-steps > i { color: #bac0e6; font-size: 25px; font-style: normal; text-align: center; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 25px; }
.primary-button { min-height: 43px; padding: 0 20px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(100deg, #4e5cf0, #6241d8); box-shadow: 0 9px 19px rgba(72,70,215,.22); font-size: 13px; font-weight: 700; }
.primary-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.primary-button.small { min-height: 36px; padding: 0 15px; font-size: 12px; }
.tabs { display: flex; gap: 9px; margin-bottom: 18px; }
.tabs button, .auth-tabs button { padding: 10px 18px; border: 1px solid var(--line); border-radius: 9px; color: #7a8baa; background: #fff; }
.tabs button.active, .auth-tabs button.active { border-color: #8b8df1; color: #5541d0; background: #f4f2ff; font-weight: 700; }
.tabs b { margin-left: 5px; font-size: 11px; }
.asset-grid, .work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.asset-library-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 180px)); justify-content: start; gap: 16px; }
.asset-card, .work-card { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.asset-preview, .work-cover { height: 150px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: #8992ee; background: linear-gradient(145deg, #eff5ff, #f4efff); font-size: 53px; }
.asset-preview video, .asset-preview audio { width: 100%; height: 100%; object-fit: cover; }
.work-grid { align-items:start; }
.work-cover { position:relative; width:min(100%, calc(420px * var(--work-aspect-ratio, 1.777778))); height:auto; aspect-ratio:var(--work-aspect-ratio, 1.777778); margin:0 auto; background:#161923; }
.work-cover video, .work-cover img { position:absolute; inset:0; display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; background:#161923; }
.asset-preview audio { height: 42px; }
.asset-card strong, .work-copy strong { display: block; margin-top: 12px; color: var(--navy); font-size: 13px; }
.asset-card small, .work-copy small { display: block; margin-top: 6px; color: #8b9ab6; font-size: 10px; }
.work-card.expired { background:#fbfbfd; }
.work-copy { display:flex; flex-direction:column; align-items:flex-start; }
.work-action-row { width:100%; display:flex; align-items:center; gap:8px; margin-top:12px; }
.work-preview-button, .work-download-button { min-height:36px; display:inline-flex; flex:1 1 0; align-items:center; justify-content:center; gap:6px; padding:0 13px; border-radius:9px; font:inherit; font-size:11px; font-weight:700; text-decoration:none; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.work-preview-button { border:1px solid #d8d9f8; color:#5541d0; background:#f8f7ff; }
.work-preview-button:hover:not(:disabled) { border-color:#aaa8ee; background:#f1efff; }
.work-preview-button:disabled { color:#a1a9ba; background:#f3f4f7; cursor:not-allowed; }
.work-download-button { border:0; color:#fff; background:linear-gradient(100deg,#5549e8,#6844dc); box-shadow:0 7px 15px rgba(76,67,202,.2); }
.work-download-button img { width:14px; height:14px; flex:0 0 auto; }
.work-download-button:hover:not(.disabled) { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 9px 19px rgba(76,67,202,.26); }
.work-preview-button:focus-visible, .work-download-button:focus-visible { outline:3px solid rgba(93,71,237,.24); outline-offset:2px; }
.work-download-button.disabled { color:#9da7ba; background:#edf0f5; cursor:not-allowed; }
.work-download-button.disabled img { filter:grayscale(1); opacity:.42; }
.work-preview-backdrop { z-index:40; padding:24px; }
.work-preview-modal { width:min(980px,calc(100vw - 48px)); max-height:calc(100vh - 48px); display:grid; grid-template-columns:minmax(0,1fr) 280px; overflow:hidden; position:relative; border:1px solid rgba(226,230,247,.9); border-radius:18px; background:#fff; box-shadow:0 26px 70px rgba(30,39,90,.24); }
.work-preview-stage { min-height:420px; max-height:calc(100vh - 48px); display:grid; place-items:center; overflow:hidden; background:#11141c; }
.work-preview-media { display:block; width:100%; height:100%; max-height:calc(100vh - 48px); object-fit:contain; background:#11141c; }
.work-preview-unavailable { display:grid; justify-items:center; gap:9px; padding:30px; color:#abb3c5; text-align:center; }
.work-preview-unavailable span { font-size:45px; }
.work-preview-unavailable strong { color:#e4e7ef; font-size:16px; }
.work-preview-unavailable small { max-width:260px; line-height:1.6; }
.work-preview-copy { display:flex; flex-direction:column; padding:34px 24px 24px; }
.work-preview-copy h2 { margin:0; color:var(--navy); font-size:23px; }
.work-preview-metadata { display:grid; gap:12px; margin-top:25px; }
.work-preview-metadata span { display:grid; gap:4px; color:#929cb2; font-size:10px; }
.work-preview-metadata strong { color:#475474; font-size:12px; font-weight:600; }
.work-preview-actions { display:grid; gap:9px; margin-top:auto; padding-top:28px; }
.work-preview-return { min-height:39px; border:1px solid #dde1f2; border-radius:9px; color:#687698; background:#fff; font-size:12px; font-weight:700; }
.work-download-button.prominent { min-height:43px; flex:none; font-size:13px; }
.asset-library-card { min-width: 0; padding: 9px; }
.asset-library-preview { position: relative; display: block; width: 100%; min-width: 0; height: 158px; overflow: hidden; border-radius: 9px; }
.asset-library-preview video { display: block; width: 100%; height: 100%; object-fit: cover; }
.asset-library-preview.voice { background:#f0f2ff; }
.asset-audio-source { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.asset-audio-waveform { position:absolute; top:45px; right:16px; left:16px; height:58px; display:flex; align-items:center; justify-content:center; gap:2px; }
.asset-audio-waveform i { flex:1 1 2px; min-width:1px; max-width:3px; border-radius:2px; background:#5361ff; }
.asset-audio-duration { position:absolute; right:8px; bottom:11px; z-index:2; padding:3px 5px; border-radius:4px; color:#fff !important; background:rgba(20,43,104,.78); font-size:9px; font-weight:700; line-height:1; }
.asset-library-preview > span { color: #8992ee; }
.asset-media-play { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: #fff; background: rgba(20,43,104,.78); backdrop-filter: blur(5px); cursor: pointer; }
.asset-media-play:hover { background: rgba(20,43,104,.96); transform: translateY(-1px); }
.play-button-glyph { display:block; width:0; height:0; margin-left:2px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid currentColor; }
.asset-media-actions { position:absolute; top:8px; right:8px; left:8px; z-index:2; display:flex; justify-content:space-between; pointer-events:none; }
.asset-media-action { display:grid; width:28px; height:28px; place-items:center; padding:0; border:1px solid rgba(255,255,255,.68); border-radius:7px; color:#fff; background:rgba(20,43,104,.72); backdrop-filter:blur(5px); cursor:pointer; pointer-events:auto; }
.asset-media-action:hover { background:rgba(20,43,104,.95); }
.asset-media-action-delete:hover { background:rgba(171,49,71,.9); }
.asset-media-action .mini-icon { width:16px; height:16px; }
.asset-library-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-library-actions { display: flex; align-items: center; gap: 6px; margin-top: 13px; }
.asset-action-button { min-height: 32px; padding: 0 8px; border: 1px solid #dbe1f1; border-radius: 7px; color: #657391; background: #fff; font-size: 10px; cursor: pointer; }
.asset-action-button:hover { border-color: #8b8df1; color: #5541d0; }
.asset-action-button.danger:hover { border-color: #ed9a9a; color: #d44949; background: #fff8f8; }
.asset-use-button { flex: 1; min-height: 32px; padding: 0 8px; font-size: 10px; white-space: nowrap; }
.asset-use-button:disabled { cursor: not-allowed; opacity: .55; }
.work-copy a:not(.work-download-button) { display: inline-block; margin-top: 10px; color: var(--blue); font-size: 11px; text-decoration: none; }
.creation-layout { display: grid; grid-template-columns: 1.4fr .8fr; gap: 18px; }
.panel > h2 { margin-bottom: 22px; }
.points-guide-hero { padding: 30px 34px; border-radius: 20px; color: #fff; background: linear-gradient(115deg, #122f6a 0%, #2459b1 68%, #6556db 100%); box-shadow: 0 14px 32px rgba(44,77,160,.16); }
.points-guide-hero .eyebrow { margin: 0 0 10px; color: #bcd8ff; letter-spacing: .25em; }
.points-guide-hero h1 { margin: 0; color: #fff; font-size: clamp(26px,2.4vw,38px); line-height: 1.2; }
.points-guide-hero > p:last-child { margin: 12px 0 0; color: #e4ecff; font-size: 14px; }
.points-guide-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.points-guide-card { min-width: 0; overflow: hidden; border: 1px solid #dbe4fa; border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(49,72,142,.09); }
.points-guide-card-head { min-height: 170px; display: flex; flex-direction: column; align-items: flex-start; padding: 23px 22px 18px; color: #fff; background: linear-gradient(135deg,#2977cf,#5f6ce6); }
.points-guide-card:nth-child(2) .points-guide-card-head { background: linear-gradient(135deg,#3269d5,#617dea); }
.points-guide-card:nth-child(3) .points-guide-card-head { background: linear-gradient(135deg,#485be0,#7772e6); }
.points-guide-card:nth-child(4) .points-guide-card-head { background: linear-gradient(135deg,#5a57d8,#9575e8); }
.points-guide-card-head > span:first-child { font-size: 11px; letter-spacing: .12em; opacity: .8; }
.points-guide-card-head > strong { margin-top: 9px; font-size: 32px; line-height: 1.1; }
.points-guide-card-head > p { margin: 12px 0 5px; font-size: 24px; font-weight: 750; line-height: 1.2; }
.points-guide-card-head > p small { font-size: 14px; font-weight: 500; }
.points-guide-card-head > span:not(:first-child) { font-size: 11px; color: #eef1ff; }
.points-guide-list { margin: 0; padding: 7px 20px 10px; list-style: none; }
.points-guide-list li { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 9px; border-bottom: 1px solid #e9eef9; }
.points-guide-list li:last-child { border-bottom: 0; }
.points-guide-list li > span { min-width: 0; color: #182b55; font-size: 13px; font-weight: 650; }
.points-guide-list li small { display: block; margin-top: 5px; color: #8493b2; font-size: 10px; font-weight: 400; }
.points-guide-list li > strong { flex: none; color: #225bc3; font-size: 17px; white-space: nowrap; }
.points-guide-note { margin: 17px 4px 0; color: #677897; font-size: 12px; line-height: 1.7; }
.points-guide-empty { margin-top: 20px; color: #677897; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 13px 10px; border-bottom: 1px solid #edf1fa; text-align: left; white-space: nowrap; }
th { color: #8b9ab6; font-size: 11px; font-weight: 600; }
.empty-cell { color: #a3aec1; text-align: center; }
.charge-hint { padding: 8px 12px; border-radius: 8px; color: #b67924; background: #fff5df; font-size: 11px; }
.creation-form label { display: block; margin: 17px 0 7px; color: #60749b; font-size: 12px; font-weight: 700; }
.creation-form textarea, .creation-form select, .creation-form input[type=file], .auth-modal input { width: 100%; padding: 12px; border: 1px solid #dce5f6; border-radius: 9px; outline: 0; color: var(--navy); background: #fbfcff; }
.creation-form textarea { min-height: 150px; resize: vertical; }
.voice-options-panel, .caption-options-panel { margin-top: 17px; padding: 14px; border: 1px solid #e2e7f5; border-radius: 10px; background: #fbfcff; }
.voice-options-heading, .caption-options-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.voice-options-heading strong, .caption-options-heading strong { color: #304474; font-size: 13px; }
.voice-options-heading span, .caption-options-heading span { color: #94a0ba; font-size: 10px; font-weight: 400; }
.voice-option-line { display: grid; grid-template-columns: 65px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 13px; }
.voice-option-line > span, .voice-instruction-field { color: #68789e; font-size: 11px; font-weight: 600; }
.voice-speed-rate-line { display: grid; grid-template-columns: 65px minmax(0, 1fr) 42px; align-items: center; gap: 10px; margin-top: 13px; color: #68789e; font-size: 11px; font-weight: 600; }
.voice-speed-rate-line input { width: 100%; accent-color: #625bfa; cursor: pointer; }
.voice-speed-rate-line strong { color: #5143cd; font-size: 11px; text-align: right; }
.voice-choice-list { display: flex; flex-wrap: wrap; gap: 7px; }
.voice-choice-list button, .caption-style-options button { min-height: 28px; padding: 0 10px; border: 1px solid #dfe5f4; border-radius: 7px; color: #7180a2; background: #fff; font-size: 10px; cursor: pointer; }
.voice-choice-list button:hover, .voice-choice-list button:focus-visible, .caption-style-options button:hover, .caption-style-options button:focus-visible { border-color: #8a83ec; outline: 0; }
.voice-choice-list button.active, .caption-style-options button.active { border-color: #6657e4; color: #5143cd; background: #f2f0ff; box-shadow: inset 0 0 0 1px #6657e4; }
.voice-instruction-field { display: grid; grid-template-columns: 65px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 13px; }
.voice-instruction-field input { width: 100%; min-height: 32px; box-sizing: border-box; padding: 0 9px; border: 1px solid #dce5f6; border-radius: 8px; outline: 0; color: var(--navy); background: #fff; font: inherit; font-size: 11px; }
.voice-instruction-field input:focus { border-color: #8393f6; box-shadow: 0 0 0 3px rgba(104,91,225,.1); }
.caption-options-panel { margin-top: 14px; }
.caption-switch { display: inline-flex !important; align-items: center; margin: 0 !important; cursor: pointer; }
.caption-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.caption-switch span { width: 38px; height: 21px; position: relative; display: block; border-radius: 21px; background: #dbe2f2; transition: .2s; }
.caption-switch span::after { content: ''; width: 17px; height: 17px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(42,58,105,.2); transition: .2s; }
.caption-switch input:checked + span { background: linear-gradient(90deg, #5d55e5, #796cf0); }
.caption-switch input:checked + span::after { transform: translateX(17px); }
.caption-style-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.motion-media-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.motion-media-fields label { margin-top: 0; }
.creation-form textarea:focus, .creation-form select:focus, .auth-modal input:focus { border-color: #8393f6; box-shadow: 0 0 0 4px rgba(104,91,225,.1); }
.file-chip { margin-top: 10px; padding: 9px 12px; border-radius: 8px; color: #5c4bd2; background: #f3f1ff; font-size: 11px; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; color: #8594b0; font-size: 12px; }
.creation-cost-estimate { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 18px; padding: 12px 14px; border: 1px solid #e1e6f4; border-radius: 9px; background: #f8f9ff; }
.creation-cost-estimate > div { display: flex; flex-direction: column; gap: 4px; }
.creation-cost-estimate strong { color: #304474; font-size: 12px; }
.creation-cost-estimate span { color: #8a96af; font-size: 10px; }
.task-progress-value { margin-top: 8px; color: #5b4fd2; font-size: 12px; font-weight: 700; }
.result-panel { min-height: 360px; }
.result-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.task-detail { margin-top: 75px; color: #8090ae; text-align: center; }
.task-detail strong { display: block; margin-top: 18px; color: var(--navy); }
.task-detail p { font-size: 12px; line-height: 1.7; }
.progress { height: 9px; overflow: hidden; border-radius: 9px; background: #e9edfa; }
.progress i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #5967ee, #7b43df); transition: width .3s; }
.empty-state { min-height: 150px; display: grid; place-items: center; gap: 8px; color: #a1aec5; text-align: center; }
.empty-state span { color: #a4adf5; font-size: 44px; }
.empty-state p { margin: 0; font-size: 13px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: rgba(26,39,85,.35); backdrop-filter: blur(7px); }
.auth-modal { width: min(440px, 100%); position: relative; padding: 31px; border-radius: 20px; background: #fff; box-shadow: 0 24px 80px rgba(30,48,119,.25); }
.auth-modal .auth-notice { margin: 0 0 14px; padding: 10px 12px; border-radius: 9px; color: #21765c; background: #ecf9f2; font-size: 12px; }
.info-modal { position: relative; width: min(430px, calc(100vw - 32px)); padding: 28px 28px 24px; border: 1px solid #e3e7f4; border-radius: 16px; background: #fff; box-shadow: 0 20px 55px rgba(30,48,119,.2); color: var(--navy); }
.info-modal h2 { margin: 0 0 10px; font-size: 22px; }
.info-modal p { margin: 0; color: #7382a5; font-size: 13px; line-height: 1.8; }
.info-steps { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px 9px; margin-top: 19px; color: #58689a; font-size: 12px; }
.info-steps span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #5c53e7, #7762ee); font-weight: 800; }
.tutorial-modal, .settings-modal, .transactions-modal { width: min(720px, calc(100vw - 32px)); max-height: min(88vh, 940px); overflow-y: auto; padding: 32px; }
.tutorial-modal { width: min(900px, calc(100vw - 32px)); }
.info-modal-heading { padding-right: 28px; }
.info-modal-heading .eyebrow { margin-bottom: 8px; color: #5a62e8; letter-spacing: .22em; font-size: 10px; font-weight: 800; }
.info-modal-heading h2 { margin-bottom: 8px; }
.tutorial-group { margin-top: 20px; }
.tutorial-group h4 { margin: 0 0 10px; color: var(--navy); font-size: 14px; }
.tutorial-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; }
.tutorial-entry { min-width: 0; border: 1px solid #e1e6f7; border-radius: 12px; background: #fbfcff; }
.tutorial-entry[open] { border-color: #aab4f7; background: #fff; }
.tutorial-entry summary { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 75px; padding: 12px 14px; cursor: pointer; list-style: none; }
.tutorial-entry summary::-webkit-details-marker { display: none; }
.tutorial-entry summary span { min-width: 0; }
.tutorial-entry strong, .settings-card-grid strong { display: block; color: var(--navy); font-size: 14px; }
.tutorial-entry small, .settings-card-grid small { display: block; margin-top: 5px; color: #8391af; font-size: 11px; line-height: 1.6; }
.tutorial-entry em { flex: 0 1 auto; color: #514bd4; font-size: 11px; font-style: normal; font-weight: 700; text-align: right; }
.tutorial-entry-body { padding: 0 14px 14px; border-top: 1px solid #edf0fa; }
.tutorial-entry-body ol { margin: 11px 0; padding-left: 20px; color: #4f5d7c; font-size: 12px; line-height: 1.8; }
.tutorial-entry-body li + li { margin-top: 5px; }
.tutorial-entry-body p { padding: 9px; border-radius: 8px; background: #f5f6ff; }
.settings-card-grid article { display: flex; gap: 12px; min-height: 86px; padding: 16px; border: 1px solid #e8eafa; border-radius: 14px; background: linear-gradient(145deg, #fff, #f8f8ff); }
.tutorial-step-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; padding: 13px 16px; border-radius: 12px; color: #5a62d9; background: #f4f3ff; font-size: 12px; font-weight: 700; }
.tutorial-step-strip b { color: #a0a8de; }
.settings-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.settings-card-grid article { display: block; min-height: 132px; }
.settings-card-grid span { display: block; margin-top: 13px; color: #5b55df; font-size: 13px; font-weight: 800; }
.settings-card-grid small { margin-bottom: 0; }
.tutorial-support { display: grid; grid-template-columns: minmax(0,1fr) 230px; align-items: center; gap: 25px; margin-top: 22px; padding: 20px 24px; border: 1px solid #dbe3ff; border-radius: 16px; background: linear-gradient(125deg, #f2f6ff, #f7f3ff); }
.tutorial-support-badge { display: inline-flex; padding: 5px 10px; border-radius: 20px; color: #594edb; background: #e8e7ff; font-size: 11px; font-weight: 800; }
.tutorial-support h3 { margin: 12px 0 6px; color: var(--navy); font-size: 19px; }
.tutorial-support p { max-width: 400px; }
.tutorial-support small { display: block; margin-top: 10px; color: #7b89aa; font-size: 11px; }
.tutorial-support a { display: block; border: 1px solid #dfe4f5; border-radius: 12px; overflow: hidden; background: #fff; }
.tutorial-support img { display: block; width: 100%; height: auto; }
.tutorial-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 22px; }
.tutorial-section-title h3 { margin: 0; font-size: 16px; }
.tutorial-section-title span { color: #7787a9; font-size: 11px; }
.tutorial-retention { margin-top: 16px !important; padding: 11px 14px; border-radius: 10px; background: #f5f6ff; font-size: 11px !important; }
.transactions-balance, .account-summary { margin-top: 20px; padding: 15px 18px; border: 1px solid #e1e5fa; border-radius: 12px; background: #f8f9ff; }
.transactions-balance { display: flex; justify-content: space-between; gap: 12px; color: #7280a0; font-size: 13px; }
.transactions-balance strong { color: #4f4bd7; font-size: 17px; }
.transactions-state { margin-top: 22px !important; text-align: center; }
.transactions-list { display: grid; margin-top: 12px; }
.transactions-row { display: flex; justify-content: space-between; gap: 15px; padding: 14px 2px; border-bottom: 1px solid #edf0fa; }
.transactions-row > div:first-child { min-width: 0; }
.transactions-row strong, .transactions-row small { display: block; }
.transactions-row strong { font-size: 13px; }
.transactions-row small { margin-top: 5px; color: #8592af; font-size: 11px; }
.transactions-row p { margin-top: 5px; font-size: 11px; }
.transactions-amount { flex: 0 0 auto; text-align: right; }
.transactions-amount .credit { color: #208c68; }
.transactions-amount .debit { color: #303f82; }
.transactions-amount .settled { color: #7380a3; }
.account-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-summary div { display: grid; gap: 6px; min-width: 0; }
.account-summary span { color: #8693ad; font-size: 11px; }
.account-summary strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.account-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.account-actions button { min-height: 36px; padding: 7px 13px; border: 1px solid #dce2fa; border-radius: 9px; color: #514bd0; background: #fff; font-size: 12px; font-weight: 700; }
.account-actions button:hover { background: #f2f1ff; }
.account-password-form { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #edf0fa; }
.account-password-form h3 { margin: 0; font-size: 16px; }
.account-password-form label { display: grid; gap: 6px; color: #526489; font-size: 12px; font-weight: 700; }
.account-password-form input { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid #dce2f4; border-radius: 9px; }
.account-password-form input:focus { outline: 2px solid #9994f3; }
.asset-modal { width: min(500px, 100%); }
.voice-asset-modal-choice { margin: 0 0 14px; padding: 14px; border: 1px solid #e2e7f5; border-radius: 12px; background: #fbfcff; }
.voice-asset-modal-choice > strong { display:block; margin-bottom:10px; color:var(--navy); font-size:13px; }
.voice-asset-modal-list { display:grid; gap:8px; max-height:180px; overflow:auto; }
.voice-asset-modal-item { width:100%; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 10px; border:1px solid #e1e6f4; border-radius:9px; color:var(--navy); background:#fff; text-align:left; cursor:pointer; }
.voice-asset-modal-item:hover { border-color:#8b87ef; background:#f7f6ff; }
.voice-asset-modal-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; color:#6558df; background:#efedff; }
.voice-asset-modal-icon .mini-icon { width:18px; height:18px; }
.voice-asset-modal-copy { min-width:0; display:grid; gap:2px; }
.voice-asset-modal-copy b { overflow:hidden; color:#314474; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.voice-asset-modal-copy small, .voice-asset-modal-empty { color:#8d9ab6; font-size:10px; }
.voice-asset-modal-action { color:#5e54d9; font-size:11px; font-weight:700; }
.voice-asset-modal-empty { margin:0; padding:10px 0; text-align:center; }
.voice-asset-modal-divider { display:flex; align-items:center; gap:9px; margin-top:14px; color:#a0abc1; font-size:10px; }
.voice-asset-modal-divider::before, .voice-asset-modal-divider::after { content:""; height:1px; flex:1; background:#e4e8f4; }
.voice-local-upload { display:grid; gap:12px; padding:15px; border:1px solid #cdc9ff; border-radius:13px; background:linear-gradient(145deg,#f8f7ff,#f4f7ff); box-shadow:0 7px 20px rgba(82,74,203,.08); }
.voice-local-upload-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.voice-local-upload-heading > div { display:grid; gap:3px; }
.voice-local-upload-heading strong { color:var(--navy); font-size:14px; }
.voice-local-upload-heading small { color:#7f8ca8; font-size:10px; }
.voice-local-upload-heading > span { padding:4px 8px; border-radius:999px; color:#6258d8; background:#eae7ff; font-size:9px; font-weight:700; }
.voice-local-file-picker { display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:10px; padding:12px; border:1px dashed #9c94ef; border-radius:10px; color:#6258d8; background:#fff; cursor:pointer; }
.voice-local-file-picker input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.voice-local-file-picker .mini-icon { width:22px; height:22px; }
.voice-local-file-picker span { min-width:0; display:grid; gap:3px; }
.voice-local-file-picker b { overflow:hidden; color:#48567a; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.voice-local-file-picker small { color:#8b97af; font-size:10px; }
.voice-local-name { display:grid; gap:7px; color:#59698f; font-size:11px; font-weight:700; }
.voice-local-name input { width:100%; box-sizing:border-box; }
.modal-close { position: absolute; top: 12px; right: 17px; border: 0; color: #8995ae; background: none; font-size: 25px; }
.auth-logo { width: 49px; height: 49px; }
.auth-modal h2 { margin: 18px 0 8px; color: var(--navy); font-size: 24px; }
.auth-modal > p { margin: 0 0 20px; color: #8a98b1; font-size: 12px; line-height: 1.7; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.auth-tabs button { flex: 1; }
.auth-modal form label { display: block; margin: 12px 0 7px; color: #62749a; font-size: 12px; font-weight: 700; }
.full { width: 100%; margin-top: 17px; }
.turnstile-box { min-height: 65px; margin-top: 17px; }
.verification-status { margin-top: 15px; padding: 10px 12px; border-radius: 9px; background: #f5f6ff; color: #62749a; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.verification-status.error, .verification-status.expired { background: #fff5ed; color: #a65016; }
.verification-status.verified { background: #ecf9f2; color: #21765c; }
.verification-retry { display: block; margin-top: 7px; padding: 5px 10px; border: 1px solid currentColor; border-radius: 7px; color: inherit; background: #fff; cursor: pointer; }
.auth-modal .primary-button:disabled { opacity: .55; cursor: not-allowed; }
.auth-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
.error-text { color: #da6371 !important; font-size: 11px !important; }
.toast-error { position: fixed; right: 24px; bottom: 24px; z-index: 25; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid #ffd2d8; border-radius: 10px; color: #c85163; background: #fff4f5; box-shadow: 0 12px 28px rgba(100,40,70,.12); font-size: 12px; }

/* AI 生图 reference frame: 1672px canvas, 196px rail, 1375px work area. */
body.image-view-shell { --sidebar-width: 196px; }
body.image-view-shell .topbar { height: 76px; }
body.image-view-shell .layout { min-height: calc(100vh - 76px); }
body.image-view-shell .sidebar { top: 76px; height: calc(100vh - 76px); padding-right: 16px; padding-left: 0; }
body.image-view-shell .nav-item:not(.desktop-nav-item) { padding-right: 12px; padding-left: 24px; }
body.image-view-shell .page { padding: 22px 57px 28px 29px; }
body.image-view-shell .image-page { color: var(--navy); }
.image-heading { height: 125px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.image-heading .eyebrow { margin-top: 0; margin-bottom: 12px; }
.image-heading h1 { margin: 0; color: var(--navy); font-size: 46px; font-weight: 800; letter-spacing: -1.8px; line-height: 1.08; }
.image-heading > div:first-child > p:last-child { margin: 13px 0 0; color: #7788b0; font-size: 14px; line-height: 1.6; }
.image-charge-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; padding: 8px 13px; border: 1px solid #d8d7ff; border-radius: 20px; color: #7180aa; background: rgba(250,250,255,.72); font-size: 11px; white-space: nowrap; }
.image-charge-hint .mini-icon { width: 16px; height: 16px; color: #5a4ce2; }
.image-charge-hint i { width: 14px; height: 14px; display: grid; place-items: center; border: 1px solid #9da8c7; border-radius: 50%; color: #7c89aa; font-size: 9px; font-style: normal; font-weight: 700; }
.image-tabs { height: 48px; display: flex; align-items: flex-end; gap: 0; border-bottom: 1px solid #e0e3f5; }
.image-tab { height: 47px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 29px; border: 1px solid #e0e3f5; border-bottom-color: transparent; border-radius: 13px 13px 0 0; color: #415386; background: rgba(255,255,255,.28); font-size: 16px; font-weight: 700; cursor: pointer; }
.image-tab + .image-tab { margin-left: 0; border-left: 0; border-radius: 0 13px 0 0; padding-right: 35px; padding-left: 35px; }
.image-tab.active { position: relative; z-index: 1; border-color: #6f62ed; border-bottom-color: #fff; color: #5546df; background: #fff; box-shadow: 0 -3px 13px rgba(91,82,221,.04); }
.image-tab .mini-icon { width: 16px; height: 16px; color: #6252e4; }
.tab-bag { color: #405485; font-size: 19px; line-height: 1; transform: rotate(180deg); }
.image-tab-note { align-self: center; margin-left: 14px; color: #8793b2; font-size: 12px; }
.image-workspace { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr); gap: 16px; height: 516px; }
.image-workspace > .panel { min-width: 0; height: 516px; padding: 21px 24px 20px; border-color: #e0e4f6; border-radius: 15px; background: rgba(255,255,255,.92); box-shadow: 0 10px 26px rgba(75,85,168,.08); }
.product-mode-workspace { height: auto; min-height: 690px; align-items: start; }
.product-mode-workspace > .panel { height: auto; min-height: 690px; }
.product-mode-workspace > .image-result-panel { align-self: start; }
.image-prompt-panel h2, .image-result-panel > h2 { margin: 0; color: var(--navy); font-size: 18px; letter-spacing: -.4px; }
.image-panel-intro { margin: 9px 0 0; color: #8191b2; font-size: 12px; }
.image-prompt-box { height: 125px; position: relative; margin-top: 11px; border: 1px solid #cbd5f2; border-radius: 9px; background: #fff; }
.image-prompt-box textarea { width: 100%; height: 100%; display: block; padding: 14px 14px 27px; border: 0; outline: 0; resize: none; color: var(--navy); background: transparent; font-size: 13px; line-height: 1.7; }
.image-prompt-box textarea::placeholder { color: #a0abc3; opacity: 1; }
.image-prompt-box textarea:focus { box-shadow: inset 0 0 0 1px #7d82ef, 0 0 0 3px rgba(100,91,225,.08); border-radius: 9px; }
.image-prompt-box > span { position: absolute; right: 13px; bottom: 9px; color: #8693b4; font-size: 11px; pointer-events: none; }
.image-reference-heading { display: flex; flex-direction: column; gap: 5px; margin-top: 16px; }
.image-reference-heading strong { color: #24396e; font-size: 13px; }
.image-reference-heading small { color: #98a4c1; font-size: 11px; }
.image-reference-grid { height: 91px; display: grid; grid-template-columns: 1.1fr repeat(5, 1fr); gap: 13px; margin-top: 12px; }
.image-upload-slot, .image-reference-slot { min-width: 0; height: 91px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; overflow: hidden; border: 1px solid #dce2f5; border-radius: 9px; color: #8390e9; background: linear-gradient(145deg, #fff, #f7f7ff); }
.image-upload-slot { border-style: dashed; cursor: pointer; }
.image-upload-slot:hover { border-color: #8b83ef; background: #faf9ff; }
.image-upload-slot input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.image-upload-slot .mini-icon { width: 20px; height: 20px; color: #8587ed; }
.image-upload-slot span { color: #8995b7; font-size: 10px; }
.image-reference-slot { background: linear-gradient(145deg, #f7f8ff, #f0f1fc); }
.image-reference-slot .mini-icon { width: 31px; height: 31px; color: #c6caf0; stroke-width: 1.4; }
.image-reference-slot img { width: 100%; height: 100%; object-fit: cover; }
.image-controls { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 19px; }
.image-control { position: relative; min-width: 0; }
.image-controls .image-control > button { width: 100%; min-width: 0; height: 49px; display: grid; grid-template-columns: 18px auto minmax(0,1fr) 12px; align-items: center; gap: 6px; padding: 0 13px; border: 1px solid #dfe4f5; border-radius: 9px; color: #26396c; background: #fff; text-align: left; cursor: pointer; }
.image-controls .image-control > button:hover, .image-controls .image-control > button:focus-visible { border-color: #8a83ec; outline: 0; box-shadow: 0 0 0 3px rgba(100,91,225,.08); }
.image-controls .image-control > button > span { color: #5c67a0; font-size: 19px; line-height: 1; }
.image-controls b { color: #293d70; font-size: 13px; white-space: nowrap; }
.image-controls strong { min-width: 0; overflow: hidden; color: #8190ae; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.image-controls em { color: #56668f; font-size: 16px; font-style: normal; line-height: 1; text-align: right; }
.product-plan-options { margin-top: 14px; padding-top: 13px; border-top: 1px solid #edf0f7; }
.selling-point-input { display: grid; gap: 6px; margin-bottom: 12px; }
.selling-point-input > span { color: #68779e; font-size: 11px; font-weight: 600; }
.selling-point-input > span small { margin-left: 5px; color: #a2abc0; font-size: 10px; font-weight: 400; }
.selling-point-input textarea { width: 100%; min-height: 48px; box-sizing: border-box; padding: 8px 9px; border: 1px solid #dfe4f5; border-radius: 7px; outline: 0; color: #2d4075; background: #fff; font: inherit; font-size: 11px; line-height: 1.5; resize: vertical; }
.selling-point-input textarea:focus { border-color: #8a83ec; box-shadow: 0 0 0 3px rgba(100,91,225,.08); }
.product-output-options { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; align-items: stretch; }
.product-output-options > strong { grid-column: 1 / -1; color: #26396d; font-size: 13px; }
.product-output-options button { min-width: 0; min-height: 49px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 7px 10px; border: 1px solid #dfe4f5; border-radius: 9px; color: #293b70; background: #fff; text-align: left; cursor: pointer; }
.product-output-options button:hover, .product-output-options button:focus-visible { border-color: #8a83ec; outline: 0; box-shadow: 0 0 0 3px rgba(100,91,225,.08); }
.product-output-options button.active { border-color: #6758e5; background: #f4f2ff; box-shadow: inset 0 0 0 1px #6758e5; }
.product-output-options b { font-size: 12px; }
.product-output-options small { color: #8c99b7; font-size: 10px; line-height: 1.35; }
.product-advanced-settings { margin-top: 11px; padding-top: 10px; border-top: 1px solid #edf0f7; }
.product-advanced-settings summary { color: #53628b; font-size: 11px; cursor: pointer; list-style-position: inside; }
.product-advanced-settings summary::marker { color: #6555df; }
.product-advanced-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin-top: 11px; }
.product-advanced-grid label, .product-setting-row strong, .product-module-list > strong { display: flex; flex-direction: column; gap: 5px; color: #68779e; font-size: 10px; font-weight: 600; }
.product-advanced-grid input, .product-advanced-grid select { width: 100%; height: 32px; padding: 0 8px; border: 1px solid #dfe4f5; border-radius: 7px; outline: 0; color: #2d4075; background: #fff; font: inherit; }
.product-advanced-grid input:focus, .product-advanced-grid select:focus { border-color: #8a83ec; box-shadow: 0 0 0 3px rgba(100,91,225,.08); }
.product-module-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.product-module-list > strong { grid-column: 1 / -1; }
.product-module-list button { min-width: 0; min-height: 43px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 8px; border: 1px solid #dfe4f5; border-radius: 8px; color: #344676; background: #fff; text-align: left; cursor: pointer; }
.product-module-list button:hover, .product-module-list button:focus-visible { border-color: #8a83ec; outline: 0; }
.product-module-list button.active { border-color: #7568e9; color: #4c40bd; background: #f5f3ff; box-shadow: inset 0 0 0 1px #7568e9; }
.product-module-list button b { font-size: 11px; }
.product-module-list button small { overflow: hidden; color: #919dbc; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.product-setting-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.product-setting-row .choice-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.product-setting-row button { min-height: 27px; padding: 0 8px; border: 1px solid #dfe4f5; border-radius: 7px; color: #7180a4; background: #fff; font-size: 10px; cursor: pointer; }
.product-setting-row button:hover, .product-setting-row button:focus-visible { border-color: #8a83ec; outline: 0; }
.product-setting-row button.active { border-color: #6c5de3; color: #5143ce; background: #f3f1ff; }
.product-workflow { margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf0f7; }
.product-workflow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.product-workflow-steps span { padding: 7px 6px; border-radius: 7px; color: #98a2bd; background: #f7f8fc; font-size: 10px; text-align: center; }
.product-workflow-steps span.active { color: #5143ce; background: #f0eeff; box-shadow: inset 0 0 0 1px #a49aff; }
.product-stage { display: grid; gap: 9px; }
.product-stage > p { margin: 0; color: #7785a8; font-size: 10px; line-height: 1.55; }
.product-stage > .outline-button { justify-self: start; min-height: 31px; padding: 0 13px; font-size: 10px; }
.product-fact-summary { display: flex; align-items: baseline; gap: 10px; }
.product-fact-summary strong { color: #293d77; font-size: 12px; }
.product-fact-summary span { color: #8b97b7; font-size: 10px; }
.product-confirmed-claims { display: flex; flex-wrap: wrap; gap: 6px; }
.product-confirmed-claims span { padding: 5px 7px; border-radius: 6px; color: #3c805c; background: #effaf3; font-size: 10px; }
.product-pending-claims { display: grid; gap: 6px; max-height: 128px; overflow: auto; }
.product-pending-claims label { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid #e1e5f1; border-radius: 7px; color: #59698f; background: #fcfdff; font-size: 10px; cursor: pointer; }
.product-pending-claims label:has(input:checked) { border-color: #8578ee; color: #4f45bd; background: #f7f5ff; }
.product-pending-claims input { accent-color: #6357df; }
.product-pending-claims small { color: #a0a9bf; font-size: 9px; }
.product-claims-empty { margin: 0; padding: 8px; border-radius: 6px; color: #9aa4ba; background: #f7f8fb; font-size: 10px; text-align: center; }
.product-stage-actions { display: flex; justify-content: flex-end; gap: 7px; padding-top: 4px; }
.product-stage-actions button { min-height: 30px; padding: 0 12px; font-size: 10px; }
.product-plan-editor { display: grid; gap: 8px; }
.product-plan-editor article { display: grid; grid-template-columns: 84px minmax(0, .6fr) minmax(0, 1.4fr); align-items: center; gap: 6px; padding: 6px; border: 1px solid #e5e8f2; border-radius: 7px; background: #fcfdff; }
.product-plan-editor article strong { color: #627097; font-size: 9px; }
.product-plan-editor input, .product-plan-editor textarea, .product-revision-row input, .product-revision-row select { min-width: 0; border: 1px solid #dfe4f1; border-radius: 6px; outline: 0; color: #4b5a80; background: #fff; font: inherit; font-size: 9px; }
.product-plan-editor input { height: 27px; padding: 0 7px; }
.product-plan-editor textarea { min-height: 27px; padding: 6px 7px; resize: vertical; }
.product-plan-editor input:focus, .product-plan-editor textarea:focus, .product-revision-row input:focus, .product-revision-row select:focus { border-color: #8a83ec; box-shadow: 0 0 0 3px rgba(100,91,225,.08); }
.product-revision-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px auto; gap: 6px; }
.product-revision-row input, .product-revision-row select { height: 30px; padding: 0 7px; }
.product-revision-row button { min-height: 30px; padding: 0 9px; font-size: 9px; }
.product-analysis-error { margin: 0; padding: 7px 8px; border-radius: 6px; color: #b05b68 !important; background: #fff5f6; font-size: 10px !important; }
.image-control-menu { position: absolute; right: 0; bottom: calc(100% + 7px); left: 0; z-index: 8; display: grid; gap: 3px; padding: 6px; border: 1px solid #dce2f4; border-radius: 9px; background: #fff; box-shadow: 0 12px 24px rgba(70,77,140,.14); }
.image-control-menu button { min-height: 30px; padding: 0 8px; border: 0; border-radius: 6px; color: #52618c; background: transparent; text-align: left; font-size: 11px; cursor: pointer; }
.image-control-menu button:hover, .image-control-menu button:focus-visible { color: #5546df; background: #f2f1ff; outline: 0; }
.image-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; color: #8492b1; font-size: 12px; }
.image-form-footer > div { display: flex; align-items: center; gap: 12px; }
.image-submit-button { min-width: 145px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; }
.image-submit-button .mini-icon { width: 16px; height: 16px; }
.image-cost { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 14px; color: #5a4bd2; background: #f1efff; font-size: 10px; white-space: nowrap; }
.image-cost .mini-icon { width: 13px; height: 13px; }
.image-result-panel { position: relative; }
.image-result-panel { padding-right: 20px !important; padding-left: 20px !important; }
.image-result-empty { height: 213px; position: relative; color: #99a5c5; text-align: center; }
.image-result-empty .visual-art { width: 300px; height: 160px; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); }
.image-result-empty p { position: absolute; right: 0; bottom: 33px; left: 0; margin: 0; color: #8c99ba; font-size: 12px; }
.image-recent-tasks { height: 224px; padding: 13px 13px 10px; border: 1px solid #dfe3f4; border-radius: 10px; background: linear-gradient(145deg, #fff, #fbfbff); }
.image-recent-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.image-recent-heading strong { color: var(--navy); font-size: 14px; }
.image-recent-heading button { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; color: #5e51dc; background: transparent; font-size: 10px; font-weight: 700; }
.image-recent-heading .mini-icon { width: 13px; height: 13px; }
.image-recent-empty { height: 181px; display: grid; place-items: center; color: #a6b1c8; font-size: 11px; }
.image-task-list { display: grid; gap: 7px; margin-top: 10px; }
.image-task-row { min-height: 46px; display: grid; grid-template-columns: 43px minmax(0, 1fr) 87px auto 78px; align-items: center; gap: 9px; }
.image-task-thumb { width: 43px; height: 43px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: #fff; background: linear-gradient(145deg,#8c99f3,#5f53dc); }
.image-task-thumb .mini-icon { width: 22px; height: 22px; }
.image-task-copy { min-width: 0; }
.image-task-copy strong { display: block; overflow: hidden; color: #273b70; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.image-task-copy small, .image-task-time { display: block; margin-top: 4px; overflow: hidden; color: #8997b5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.image-task-time { margin-top: 0; }
.image-task-row .status { padding: 5px 7px; font-size: 9px; }
.image-task-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; min-width: 78px; }
.image-task-progress:before, .image-task-progress i { grid-column: 1; grid-row: 1; height: 6px; border-radius: 6px; }
.image-task-progress:before { content: ''; background: #e8eafa; }
.image-task-progress i { display: block; background: linear-gradient(90deg,#5e4ded,#7651e9); }
.image-task-progress b { color: #5a4bd2; font-size: 9px; white-space: nowrap; }
.image-task-check { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #38aa66; font-size: 12px; font-weight: 700; }
.image-style-panel { height: 112px; display: grid; grid-template-columns: 229px minmax(0,1fr) 34px; align-items: center; gap: 16px; margin-top: 19px; padding: 15px 20px 15px 24px !important; }
.image-style-heading h2 { margin: 0; color: var(--navy); font-size: 18px; }
.image-style-heading p { margin: 8px 0 0; color: #8b99b7; font-size: 11px; white-space: nowrap; }
.image-style-grid { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.image-style-card { min-width: 0; height: 64px; display: flex; align-items: center; gap: 10px; padding: 4px 8px; border: 1px solid #e0e4f4; border-radius: 9px; color: var(--navy); background: linear-gradient(145deg,#fff,#fbfbff); text-align: left; cursor: pointer; }
.image-style-card:hover { border-color: #9e98ee; background: #fcfbff; }
.image-style-card.active { border-color: #6555e2; background: #f5f3ff; box-shadow: inset 0 0 0 1px #6555e2; }
.image-style-thumb { width: 55px; height: 55px; display: block; flex: 0 0 auto; overflow: hidden; position: relative; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.38); }
.style-realistic { background: linear-gradient(145deg,#d0b19d 0 35%,#755d57 36% 47%,#e6d8c8 48% 72%,#5d7285 73%); }
.style-realistic:after { content: ''; position: absolute; width: 23px; height: 34px; left: 17px; bottom: -3px; border-radius: 48% 48% 20% 20%; background: linear-gradient(90deg,#a77e6f,#f0d7c6 50%,#8a615d); }
.style-fresh { background: linear-gradient(140deg,#8cad73,#dce3b0 48%,#6eaa84 49% 67%,#c5dfb5 68%); }
.style-fresh:after { content: ''; position: absolute; width: 45px; height: 27px; left: 6px; bottom: 6px; border-radius: 50% 50% 5px 5px; background: linear-gradient(160deg,rgba(255,255,255,.7),rgba(91,151,103,.5)); transform: rotate(-8deg); }
.style-commercial { background: linear-gradient(135deg,#eceae3 0 47%,#c4b9a6 48% 62%,#6c6a68 63%); }
.style-commercial:after { content: ''; position: absolute; width: 15px; height: 30px; left: 20px; bottom: 7px; border-radius: 4px; background: linear-gradient(90deg,#2d3138,#858992 45%,#252932); box-shadow: 12px 4px 0 -3px #c1a16e; }
.style-cinematic { background: linear-gradient(135deg,#172b2d,#9a6d50 54%,#101726); }
.style-cinematic:after { content: ''; position: absolute; width: 23px; height: 37px; left: 17px; bottom: -4px; border-radius: 50% 50% 8px 8px; background: linear-gradient(90deg,#3a2b36,#b07b57 55%,#26283a); }
.style-illustration { background: linear-gradient(145deg,#dbd7c4,#9ab3a0 49%,#e9c3bd 50% 76%,#a26970); }
.style-illustration:after { content: '✦'; position: absolute; inset: 7px; display: grid; place-items: center; color: rgba(105,71,90,.65); font-size: 27px; }
.image-style-thumb { background-image: url('./assets/image/style-inspiration-sprite.png?v=20260904-27'); background-size: 500% 200%; background-repeat: no-repeat; }
.image-style-thumb:after { display: none; }
.style-realistic { background-position: 0 0; }
.style-fresh { background-position: 25% 0; }
.style-commercial { background-position: 50% 0; }
.style-cinematic { background-position: 75% 0; }
.style-illustration { background-position: 100% 0; }
.image-style-card > span:last-child { min-width: 0; }
.image-style-card strong { display: block; overflow: hidden; color: #283a70; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.image-style-card small { display: block; margin-top: 6px; overflow: hidden; color: #8b99b8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.image-style-next { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #d8daf8; border-radius: 50%; color: #6555e2; background: #f4f2ff; cursor: pointer; }
.image-style-next:hover, .image-style-next:focus-visible { border-color: #8a83ec; background: #ebe9ff; outline: 0; }
.image-style-next .mini-icon { width: 16px; height: 16px; }

.viral-workspace { max-width: 1240px; display: grid; grid-template-columns: 330px minmax(0, 1fr); align-items: start; gap: 18px; margin: 0 auto; }
.viral-source-panel, .viral-editor-panel { min-height: 620px; padding: 20px; }
.viral-source-panel h2, .viral-editor-panel h2 { margin: 0; color: var(--navy); font-size: 18px; }
.viral-transcript-tabs button { height: 38px; border: 0; border-radius: 5px; color: #70798a; background: transparent; cursor: pointer; font-size: 12px; }
.viral-source-form { margin-top: 22px; }
.viral-source-form > label:first-child { display: block; color: #303848; font-size: 14px; font-weight: 650; }
.viral-source-form p { min-height: 42px; margin: 7px 0 13px; color: #858d9c; font-size: 12px; line-height: 1.7; }
.viral-source-url { width: 100%; min-height: 108px; box-sizing: border-box; resize: vertical; border: 1px solid #dce1eb; border-radius: 6px; padding: 10px; color: #303848; line-height: 1.6; outline: none; }
.viral-source-url:focus, .viral-copy-editor:focus, .viral-custom-instruction:focus { border-color: #6570f0; box-shadow: 0 0 0 2px rgba(80,92,238,.1); }
.viral-parse-button { margin-top: 18px; }
.viral-task-status { margin-top: 20px; border-top: 1px solid #edf0f4; padding-top: 16px; }
.viral-task-status > div:first-child { display: flex; align-items: center; justify-content: space-between; color: #4c56e9; font-size: 12px; }
.viral-task-status > div:first-child span { color: #7d87a2; }
.viral-progress { height: 5px; margin: 9px 0 11px; overflow: hidden; border-radius: 4px; background: #edf0f4; }
.viral-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#5b4ded,#7560ea); transition: width .4s ease; }
.viral-task-status small, .viral-notice { color: #8b93a3; font-size: 11px; line-height: 1.6; }
.viral-notice { margin: 17px 0 0; color: #d35b68; }
.viral-editor-heading { min-height: 65px; border-bottom: 1px solid #e9ecf2; }
.viral-editor-heading p { margin: 7px 0 0; color: #858d9c; font-size: 11px; }
.viral-transcript-tabs { display: flex; gap: 18px; margin-top: 14px; border-bottom: 1px solid #e9ecf2; }
.viral-transcript-tabs button { height: 38px; border-bottom: 2px solid transparent; border-radius: 0; padding: 0 2px; }
.viral-transcript-tabs button.active { border-bottom-color: #4a54ee; color: #4049e6; }
.viral-copy-editor { width: 100%; height: 220px; box-sizing: border-box; margin-top: 14px; resize: vertical; border: 1px solid #dce1eb; border-radius: 6px; padding: 13px; color: #303848; font-size: 14px; line-height: 1.75; outline: none; }
.viral-rewrite-panel { margin-top: 14px; border: 1px solid #e1e5ee; border-radius: 7px; padding: 14px; background: #f8f9fb; }
.viral-rewrite-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.viral-rewrite-heading h3 { margin: 0; color: #303848; font-size: 14px; }
.viral-rewrite-heading p { margin: 4px 0 0; color: #8a92a1; font-size: 11px; }
.viral-rewrite-styles { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; margin-top: 13px; }
.viral-rewrite-styles button { height: 32px; overflow: hidden; border: 1px solid #dce1e9; border-radius: 5px; color: #626b7b; background: #fff; font-size: 11px; white-space: nowrap; cursor: pointer; }
.viral-rewrite-styles button.active { border-color: #626bed; color: #424ce4; background: #eef0ff; }
.viral-custom-instruction { width: 100%; height: 35px; box-sizing: border-box; margin-top: 9px; border: 1px solid #dce1e9; border-radius: 5px; padding: 0 10px; outline: none; }
.viral-rewrite-result { margin-top: 12px; }
.viral-rewrite-result > label { color: #303848; font-size: 11px; font-weight: 650; }
.viral-rewrite-result textarea { width: 100%; height: 105px; box-sizing: border-box; margin-top: 6px; resize: vertical; border: 1px solid #dce1e9; border-radius: 5px; padding: 10px; line-height: 1.7; }
.viral-rewrite-result > div { min-height: 38px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; color: #9299a7; font-size: 10px; }
.viral-editor-actions { min-height: 60px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; border-top: 1px solid #e6e9f0; margin-top: 16px; }
.viral-editor-actions button { height: 36px; border: 1px solid #d8dde8; border-radius: 5px; padding: 0 14px; color: #555f72; background: #fff; cursor: pointer; }
.viral-editor-actions .primary-button { border-color: #4c54ed; color: #fff; background: #4c54ed; }

@media (max-width: 1220px) {
  body.image-view-shell .page { padding-right: 26px; padding-left: 26px; }
  .image-workspace { height: auto; grid-template-columns: 1.35fr 1fr; }
  .image-workspace > .panel { height: auto; min-height: 516px; }
  .image-style-panel { grid-template-columns: 190px minmax(0,1fr) 32px; gap: 11px; }
  .image-style-grid { gap: 8px; }
  .image-style-card { gap: 7px; padding: 4px; }
  .image-style-thumb { width: 48px; height: 55px; }
}

@media (max-width: 980px) {
  body.image-view-shell .image-workspace { grid-template-columns: 1fr; height: auto; }
  body.image-view-shell .image-workspace > .panel { height: auto; min-height: 516px; }
  body.image-view-shell .image-style-panel { height: auto; min-height: 112px; grid-template-columns: 1fr; }
  body.image-view-shell .image-style-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.image-view-shell .image-style-next { display: none; }
}

@media (max-width: 700px) {
  body.image-view-shell .topbar { height: 68px; }
  body.image-view-shell .layout { min-height: calc(100vh - 68px); }
  body.image-view-shell .sidebar { top: 68px; height: auto; }
  body.image-view-shell .page { padding: 16px 12px 40px; }
  .image-heading { height: auto; min-height: 140px; display: block; }
  .image-heading h1 { font-size: 36px; }
  .image-charge-hint { margin-top: 20px; white-space: normal; }
  .image-tabs { overflow-x: auto; }
  .image-tab-note { min-width: 280px; }
  .image-reference-grid { gap: 7px; }
  .image-controls { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .product-output-options, .product-setting-row { grid-template-columns: 1fr; }
  .product-output-options > strong, .product-module-list > strong { grid-column: 1; }
  .product-advanced-grid { grid-template-columns: 1fr; }
  .product-module-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-plan-editor article { grid-template-columns: 1fr; }
  .product-revision-row { grid-template-columns: 1fr; }
  .image-form-footer { align-items: stretch; flex-direction: column; }
  .image-form-footer > div { justify-content: space-between; }
  .image-task-row { grid-template-columns: 40px minmax(0,1fr) auto; }
  .image-task-time, .image-task-progress { display: none; }
}

@media (max-width: 1220px) {
  :root { --sidebar-width: 180px; }
  .top-actions { gap: 15px; }
  .feature-card { padding-left: 17px; padding-right: 15px; }
  .feature-card h2 { font-size: 18px; }
  .feature-card p { max-width: 125px; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .hero-banner { min-height: 205px; padding-left: 26px; }
  .hero-decoration { width: 48%; }
  .primary-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-columns { grid-template-columns: 1fr; }
  .task-status-panel, .quick-create-panel { min-height: auto; }
  .asset-grid, .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creation-layout { grid-template-columns: 1fr; }
  .points-guide-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .video-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-flow-panel { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 700px) {
  .points-guide-grid { grid-template-columns: 1fr; }
  .points-guide-hero { padding: 24px 20px; }
  :root { --sidebar-width: 100%; }
  body:before { inset: 68px 0 0; }
  .topbar { height: 68px; padding: 0 15px; }
  .brand-logo-frame { width: 36px; height: 36px; border-radius: 10px; }
  .brand-logo { width: 29px; height: 29px; }
  .brand strong { font-size: 15px; }
  .brand small, .top-link { display: none; }
  .mobile-help-button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #e0e4fa; border-radius: 50%; color: #5552da; background: #f7f6ff; font-weight: 800; }
  .top-actions { gap: 8px; font-size: 11px; }
  .points-shell { height: 35px; padding-left: 9px; }
  .top-recharge { min-height: 27px; padding: 0 9px; }
  .avatar { width: 32px; height: 32px; }
  .profile-button span:not(.avatar):not(.profile-chevron) { display: none; }
  .layout { display: block; min-height: calc(100vh - 68px); }
  .sidebar { width: 100%; position: relative; top: auto; height: auto; align-self: auto; overflow-y: visible; padding: 7px 9px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar nav { display: flex; overflow: auto; gap: 4px; }
  .nav-item { min-width: 70px; min-height: 41px; justify-content: center; padding: 0 8px; font-size: 10px; }
  .nav-item .mini-icon { display: none; }
  .sidebar-bottom { display: none; }
  .page { padding: 16px 12px 40px; }
  .hero-banner { min-height: 185px; padding: 22px 18px; }
  .hero-copy h1 { font-size: 27px; }
  .hero-copy p:not(.eyebrow) { max-width: 245px; font-size: 11px; }
  .hero-decoration { width: 52%; opacity: .8; }
   .hero-banner-art { right: -31%; width: 125%; height: 100%; }
  .hero-cube { display: none; }
  .primary-feature-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature-card { min-height: 180px; }
  .home-columns { gap: 12px; margin-top: 12px; }
  .panel { padding: 18px 15px; }
  .quick-grid { gap: 9px; }
  .quick-card { min-height: 128px; padding: 13px 10px; }
  .quick-art { width: 36px; height: 36px; }
  .quick-copy strong { font-size: 11px; }
  .quick-copy small { font-size: 9px; }
  .task-tabs { gap: 14px; justify-content: space-between; font-size: 10px; }
   .task-row { grid-template-columns: 38px minmax(0, 1fr) auto 70px; gap: 8px; padding: 9px; }
   .task-duration { display: none; }
   .task-progress { min-width: 70px; gap: 5px; }
  .asset-grid, .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-entry-grid { grid-template-columns: 1fr; gap: 12px; max-width: 440px; }
  .video-entry-card { border-radius: 20px; }
  .video-entry-art { aspect-ratio: 440 / 643; min-height: 0; }
  .video-entry-image { width: 100%; height: 100%; object-fit: contain; }
  .video-flow-steps { grid-template-columns: 1fr; gap: 13px; }
  .video-flow-steps > i { display: none; }
  .page-heading { display: block; }
  .page-heading .primary-button { margin-top: 18px; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .result-panel { min-height: 240px; }
  .motion-media-fields { grid-template-columns: 1fr; }
  .voice-option-line, .voice-instruction-field { grid-template-columns: 1fr; gap: 7px; }
  .voice-speed-rate-line { grid-template-columns: 1fr 42px; gap: 7px; }
  .voice-speed-rate-line > span { grid-column: 1 / -1; }
  .caption-style-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-detail { margin-top: 42px; }
  .auth-modal { padding: 25px 20px; }
  .table-wrap { margin: 0 -8px; }
  .table-wrap table { font-size: 11px; }
}

@media (max-width: 420px) {
  .quick-grid { grid-template-columns: 1fr; }
  .quick-card { min-height: 88px; }
  .quick-copy small { min-height: auto; }
  .task-tabs { gap: 7px; }
}

@media (max-width: 980px) {
  .viral-workspace { grid-template-columns: 1fr; }
  .viral-source-panel, .viral-editor-panel { min-height: auto; }
  .viral-rewrite-styles { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .viral-page { padding: 16px 12px 40px; }
  .viral-rewrite-styles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .viral-rewrite-heading { align-items: stretch; flex-direction: column; }
  .viral-rewrite-heading .primary-button { width: 100%; }
  .viral-editor-actions { align-items: stretch; flex-direction: column; }
  .viral-editor-actions button { width: 100%; }
}

/* Desktop control language carried into the web workbench. */
:root {
  --control-height:44px;
  --control-radius:10px;
  --control-line:#d9dff1;
  --control-soft:#fbfcff;
  --control-active:#f2f1ff;
}

.sidebar { padding:24px 16px 22px; }
.sidebar nav { gap:8px; }
.nav-button { min-height:48px; gap:12px; padding:0 15px; border-radius:12px; color:#65749b; font-size:14px; transition:background .18s ease, color .18s ease, box-shadow .18s ease; }
.nav-button .mini-icon { width:21px; height:21px; color:#7481a5; }
.nav-button:hover { color:#5547d9; background:#f7f7ff; }
.nav-button:hover .mini-icon, .nav-button.active .mini-icon { color:#5b4be0; }
.nav-button.active { color:#5545d6; background:var(--control-active); box-shadow:none; font-weight:700; }
.nav-button:focus-visible, .top-link:focus-visible, .link-button:focus-visible, .ghost-button:focus-visible, .login-button:focus-visible { outline:3px solid rgba(91,75,224,.2); outline-offset:2px; }

.primary-button, .ghost-button, .login-button, .outline-button { min-height:var(--control-height); border-radius:var(--control-radius); }
.primary-button { border:1px solid #5951df; background:linear-gradient(135deg,#5042dc,#6655ee); box-shadow:0 8px 17px rgba(83,72,219,.18); }
.primary-button:hover { border-color:#4436c9; background:linear-gradient(135deg,#493bd2,#5c4be4); box-shadow:0 10px 20px rgba(83,72,219,.24); }
.ghost-button, .login-button { border-color:var(--control-line); color:#5a50c9; background:#fff; }
.ghost-button:hover, .login-button:hover { border-color:#aaa6ec; color:#4f43c8; background:#faf9ff; }
.outline-button { padding:0 15px; border:1px solid #b9b8f0; color:#5748d2; background:#faf9ff; font-size:12px; font-weight:700; cursor:pointer; }
.outline-button:hover { border-color:#7064e6; background:#f1efff; }
.primary-button.small { min-height:36px; padding:0 14px; border-radius:9px; }
.primary-button.full { width:100%; }

.creation-form.asset-select-grid > select.asset-select-field {
  width:min(100%,420px);
  min-height:var(--control-height);
  display:block;
  margin:0 0 2px;
  padding:0 38px 0 14px;
  border:1px solid var(--control-line);
  border-radius:var(--control-radius);
  color:#34487e;
  background-color:var(--control-soft);
  background-image:linear-gradient(45deg,transparent 50%,#6e72d9 50%),linear-gradient(135deg,#6e72d9 50%,transparent 50%);
  background-position:calc(100% - 18px) 18px,calc(100% - 12px) 18px;
  background-repeat:no-repeat;
  background-size:6px 6px,6px 6px;
  appearance:none;
  cursor:pointer;
}
.creation-form.asset-select-grid > select.asset-select-field:hover { border-color:#a9a5ed; background-color:#fff; }
.creation-form.asset-select-grid > select.asset-select-field:focus { border-color:#8379e9; box-shadow:0 0 0 3px rgba(104,91,225,.1); outline:0; }
.creation-form > label:has(+ select.asset-select-field) { max-width:420px; margin-top:17px; margin-bottom:7px; }
.creation-form > select.asset-select-field + label { max-width:420px; }

.file-upload-input {
  width:100%;
  min-height:var(--control-height);
  display:block;
  box-sizing:border-box;
  padding:5px 8px;
  border:1px dashed #c2cbed;
  border-radius:var(--control-radius);
  color:#7d89a8;
  background:linear-gradient(145deg,#fff,#fafaff);
  font-size:12px;
  cursor:pointer;
}
.file-upload-input:hover { border-color:#8884e9; background:#fbfaff; }
.file-upload-input:focus-visible { border-color:#7368e7; outline:3px solid rgba(103,92,227,.13); outline-offset:1px; }
.file-upload-input::file-selector-button {
  height:32px;
  margin-right:10px;
  padding:0 13px;
  border:1px solid #c9c9f0;
  border-radius:8px;
  color:#5547d1;
  background:#f1efff;
  font:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.file-upload-input::file-selector-button:hover { border-color:#9188e7; background:#e9e6ff; }
.file-upload-surface { display:grid; gap:8px; padding:12px; border:1px solid #e0e4f3; border-radius:12px; background:linear-gradient(145deg,#fff,#fbfbff); }
.file-upload-surface:hover { border-color:#c4c5f0; box-shadow:0 7px 16px rgba(90,83,196,.07); }
.file-upload-surface input[type=file] { margin-top:0; }
.image-upload-slot.file-upload-surface { display:flex; gap:8px; padding:0; border:1px dashed #cbd4ee; border-radius:9px; background:linear-gradient(145deg,#fff,#f7f7ff); box-shadow:none; }
.motion-media-fields .file-upload-surface { margin-top:0; color:#5f709b; font-size:12px; font-weight:700; }
.video-reference-picker .file-upload-surface { margin-top:7px; color:#68789e; font-size:12px; font-weight:700; }
.creation-form > .file-upload-input { margin-top:0; }
.avatar-creation-modal .file-upload-input, .asset-modal .file-upload-input { margin-top:0; }
.image-upload-slot .file-upload-input { position:absolute; width:1px; height:1px; min-height:1px; padding:0; overflow:hidden; border:0; opacity:0; pointer-events:none; }

.edit-type-list button, .video-mode-tabs button, .video-scene-list button, .video-setting-grid button,
.voice-choice-list button, .caption-style-options button, .choice-list button,
.product-module-list button, .product-output-options button {
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--control-line);
  border-radius:9px;
  color:#68779c;
  background:#fff;
  font-size:12px;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.edit-type-list button:hover, .edit-type-list button.active,
.video-mode-tabs button:hover, .video-mode-tabs button.active,
.video-scene-list button:hover, .video-scene-list button.active,
.video-setting-grid button:hover, .video-setting-grid button.active,
.voice-choice-list button:hover, .voice-choice-list button.active,
.caption-style-options button:hover, .caption-style-options button.active,
.choice-list button:hover, .choice-list button.active,
.product-module-list button:hover, .product-module-list button.active,
.product-output-options button:hover, .product-output-options button.active {
  border-color:#7770e8;
  color:#5346d3;
  background:var(--control-active);
  box-shadow:inset 0 0 0 1px rgba(119,112,232,.2);
}
.product-output-options button { min-height:52px; align-items:flex-start; }
.tabs button, .auth-tabs button, .viral-transcript-tabs button { transition:color .18s ease, background .18s ease, border-color .18s ease; }
.image-control > button, .image-style-next { border-radius:var(--control-radius); }
.image-control > button:focus-visible, .image-style-card:focus-visible, .image-style-next:focus-visible, .quick-card:focus-visible { outline:3px solid rgba(96,84,225,.2); outline-offset:2px; }
.task-tabs button:focus-visible, .viral-transcript-tabs button:focus-visible { outline:2px solid rgba(96,84,225,.2); outline-offset:2px; }

@media (max-width:700px) {
  .audio-drive-selected { grid-template-columns:1fr; }
  .audio-drive-actions { justify-content:flex-end; }
  .sidebar { padding:7px 9px; }
  .nav-button { min-height:41px; min-width:70px; padding:0 8px; font-size:10px; }
  .nav-button .mini-icon { display:none; }
  .creation-form.asset-select-grid > select.asset-select-field, .creation-form > label:has(+ select.asset-select-field) { max-width:none; width:100%; }
  .file-upload-input::file-selector-button { max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* Desktop-inspired asset and media pickers. Native file controls stay hidden inside these cards. */
.legacy-creation-layout { display:none !important; }
.desktop-creation-layout { align-items:start; }
.desktop-creation-layout .creation-form { min-width:0; }
.field-label-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:17px; margin-bottom:8px; }
.field-label-row label, .field-label-row strong { margin:0; color:#304474; font-size:13px; font-weight:700; }
.field-label-row > span, .field-label-row > small { color:#929db8; font-size:11px; line-height:1.5; }
.asset-manage-link { border:0; padding:0; color:#6658df; background:transparent; font-size:11px; cursor:pointer; }
.asset-manage-link:hover { color:#4235c2; text-decoration:underline; }
.asset-choice-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; align-items:stretch; }
.asset-choice-card, .asset-choice-more { position:relative; min-width:0; height:132px; overflow:hidden; border:2px solid transparent; border-radius:8px; padding:0; background:#edf0f8; color:#fff; cursor:pointer; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.asset-choice-card { display: block; box-sizing: border-box; text-align: left; }
.asset-choice-card:hover, .asset-choice-more:hover { transform:translateY(-2px); box-shadow:0 8px 16px rgba(53,64,139,.12); }
.asset-choice-card.selected { border-color:#4b57ee; box-shadow:0 0 0 2px rgba(75,87,238,.12); }
.asset-choice-preview { width:100%; height:100%; display:block; object-fit:cover; background:#e8ebf4; }
.asset-choice-audio-source { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.asset-choice-card::after { position:absolute; right:0; bottom:0; left:0; height:46%; content:""; background:linear-gradient(transparent,rgba(11,18,48,.78)); pointer-events:none; }
.asset-choice-name { position:absolute; z-index:1; right:9px; bottom:7px; left:9px; overflow:hidden; color:#fff; font-size:12px; font-weight:650; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.asset-choice-preview-button { position:absolute; z-index:3; bottom:8px; left:8px; display:grid; width:28px; height:28px; place-items:center; padding:0; border:1px solid rgba(255,255,255,.7); border-radius:50%; color:#fff; background:rgba(20,43,104,.72); cursor:pointer; }
.asset-choice-preview-button:hover { background:rgba(20,43,104,.92); }
.asset-choice-icon { width:100%; height:100%; display:grid; place-items:center; color:#707de4; background:linear-gradient(145deg,#f6f7ff,#e3e7ff); }
.asset-choice-icon .mini-icon { width:42px; height:42px; }
.asset-choice-icon-image { width:72px; height:72px; display:block; object-fit:contain; }
.asset-choice-check { position:absolute; z-index:2; top:6px; right:6px; display:grid; width:21px; height:21px; place-items:center; border-radius:50%; color:#fff; background:#4f5deb; box-shadow:0 2px 6px rgba(39,49,166,.22); }
.asset-choice-check .mini-icon { width:13px; height:13px; stroke-width:2.5; }
.asset-choice-more { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1px dashed #abb5d5; color:#5d5de1; background:linear-gradient(145deg,#fbfcff,#f3f4ff); }
.asset-choice-more:hover { border-color:#6f70e7; background:#f2f1ff; }
.asset-choice-plus { display:grid; width:38px; height:38px; place-items:center; border:1px solid #abb5f0; border-radius:50%; color:#6b67e5; background:#fff; }
.asset-choice-plus .mini-icon { width:22px; height:22px; }
.asset-choice-more strong { font-size:12px; font-weight:700; }
.asset-choice-more small { color:#9aa3bd; font-size:10px; }
.voice-asset-choice-grid { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.voice-asset-choice-grid .asset-choice-card, .voice-asset-choice-grid .asset-choice-more { height:78px; }
.asset-choice-card-voice { display:flex; align-items:center; gap:11px; padding:0 38px 0 13px; border-width:1px; color:#304474; background:linear-gradient(145deg,#fff,#f6f7ff); text-align:left; }
.asset-choice-card-voice::after { display:none; }
.asset-choice-card-voice .asset-choice-icon { flex:0 0 40px; width:40px; height:40px; border-radius:12px; color:#6657e2; background:#efedff; }
.asset-choice-card-voice .asset-choice-icon .mini-icon { width:23px; height:23px; }
.asset-choice-card-voice .asset-choice-name { position:static; overflow:hidden; color:#304474; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.asset-choice-card-voice .asset-choice-preview-button { top:auto; right:auto; bottom:8px; left:8px; color:#fff; border-color:rgba(255,255,255,.7); background:rgba(20,43,104,.72); }
.asset-choice-card-voice .asset-choice-preview-button:hover { background:rgba(20,43,104,.92); }
.asset-choice-more-symbol { display:grid; width:34px; height:34px; place-items:center; border-radius:11px; color:#6657e2; background:#efedff; }
.asset-choice-more-symbol .mini-icon { width:20px; height:20px; }
.voice-asset-choice-grid .asset-choice-more { display:grid; grid-template-columns:34px minmax(0,1fr) auto; grid-template-rows:1fr auto; align-items:center; column-gap:9px; padding:0 12px; border-width:1px; text-align:left; }
.voice-asset-choice-grid .asset-choice-more-symbol { grid-row:1 / -1; }
.voice-asset-choice-grid .asset-choice-plus { width:30px; height:30px; }
.voice-asset-choice-grid .asset-choice-plus .mini-icon { width:18px; height:18px; }
.voice-asset-choice-grid .asset-choice-more strong { align-self:end; font-size:11px; }
.voice-asset-choice-grid .asset-choice-more small { grid-column:2 / -1; align-self:start; font-size:10px; }
.asset-picker-pair { display:flex; flex-wrap:wrap; gap:16px; margin-top:17px; align-items:flex-start; }
.asset-picker-column { width:112px; min-width:112px; flex:0 0 112px; padding:0; border:0; border-radius:0; background:transparent; }
.asset-picker-pair .field-label-row { height:34px; min-height:34px; margin:0 0 8px; overflow:hidden; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; text-align:center; }
.asset-picker-pair .field-label-row label, .asset-picker-pair .field-label-row .asset-manage-link { width:100%; text-align:center; }
.asset-picker-pair .field-label-row > span { display:block; max-width:112px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:9px; line-height:1.35; }
.asset-picker-pair .asset-choice-grid { width:112px; grid-template-columns:112px; gap:10px; }
.asset-picker-pair .asset-choice-card, .asset-picker-pair .asset-choice-more,
.asset-picker-pair .voice-asset-choice-grid .asset-choice-card, .asset-picker-pair .voice-asset-choice-grid .asset-choice-more { width:112px; height:132px; min-height:132px; }
.asset-picker-pair .asset-choice-card:not(.asset-choice-card-voice) .asset-choice-name { right:8px; bottom:14px; left:44px; }
.asset-picker-pair .asset-choice-card-voice { display:block; padding:0; background:#f0f2ff; text-align:left; }
.asset-picker-pair .asset-choice-card-voice .asset-choice-icon { flex:0 0 55px; width:55px; height:55px; border-radius:14px; }
.asset-picker-pair .asset-choice-card-voice .asset-choice-icon-image { width:55px; height:55px; }
.asset-picker-pair .asset-choice-card-voice .asset-choice-name { position:absolute; top:86px; right:8px; bottom:auto; left:8px; max-width:none; color:#304474; font-size:11px; text-align:center; }
.asset-picker-pair .asset-choice-waveform { position:absolute; top:26px; right:10px; left:10px; display:flex; height:50px; align-items:center; justify-content:center; gap:1.5px; }
.asset-picker-pair .asset-choice-waveform i { flex:1 1 2px; min-width:1px; max-width:3px; border-radius:2px; background:#5361ff; }
.asset-picker-pair .asset-choice-duration { position:absolute; z-index:3; right:8px; bottom:11px; padding:3px 4px; border-radius:4px; color:#fff; background:rgba(20,43,104,.78); font-size:9px; font-weight:700; line-height:1; }
.asset-picker-pair .asset-choice-more { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 5px; }
.asset-picker-pair .asset-choice-more-symbol { width:46px; height:46px; flex:0 0 46px; background:transparent; }
.asset-picker-pair .asset-choice-more-symbol .asset-choice-icon-image { width:46px; height:46px; }
.asset-picker-pair .asset-choice-more-symbol { margin-inline:auto; }
.asset-picker-pair .asset-choice-more strong { width:100%; text-align:center; }
.asset-picker-pair .asset-choice-more small { width:100%; text-align:center; }
.asset-picker-pair .asset-choice-plus { flex:0 0 30px; width:30px; height:30px; }
.asset-picker-pair .asset-choice-plus .mini-icon { width:18px; height:18px; }
.asset-picker-pair .asset-choice-more strong { font-size:11px; line-height:1.2; }
.asset-picker-pair .asset-choice-more small { font-size:9px; line-height:1.2; }
.voice-picker-section, .audio-drive-section { margin-top:0; }
.voice-picker-section .field-label-row, .audio-drive-section .field-label-row { margin-top:0; }

.asset-picker-stack { display:grid; gap:18px; margin-top:17px; }
.asset-picker-row-section { min-width:0; }
.asset-picker-row-section .field-label-row { margin:0 0 8px; }
.asset-choice-row { display:flex; width:100%; gap:10px; overflow:hidden; }
.asset-choice-row .asset-choice-card, .asset-choice-row .asset-choice-more { flex:0 0 112px; width:112px; }
.asset-choice-row.voice-asset-choice-grid .asset-choice-card, .asset-choice-row.voice-asset-choice-grid .asset-choice-more { flex:0 0 112px; width:112px; height:132px; min-height:132px; }
.asset-choice-row .asset-choice-card:not(.asset-choice-card-voice) .asset-choice-name { right:8px; bottom:14px; left:44px; }
.asset-choice-row .asset-choice-card-voice { display:block; padding:0; background:#f0f2ff; text-align:left; }
.asset-choice-row .asset-choice-card-voice .asset-choice-icon { flex:0 0 55px; width:55px; height:55px; border-radius:14px; }
.asset-choice-row .asset-choice-card-voice .asset-choice-icon-image { width:55px; height:55px; }
.asset-choice-row .asset-choice-card-voice .asset-choice-name { position:absolute; top:86px; right:8px; bottom:auto; left:8px; max-width:none; color:#304474; font-size:11px; text-align:center; }
.asset-choice-row .asset-choice-waveform { position:absolute; top:26px; right:10px; left:10px; display:flex; height:50px; align-items:center; justify-content:center; gap:1.5px; }
.asset-choice-row .asset-choice-waveform i { flex:1 1 2px; min-width:1px; max-width:3px; border-radius:2px; background:#5361ff; }
.asset-choice-row .asset-choice-duration { position:absolute; z-index:3; right:8px; bottom:11px; padding:3px 4px; border-radius:4px; color:#fff; background:rgba(20,43,104,.78); font-size:9px; font-weight:700; line-height:1; }
.asset-choice-row .asset-choice-more { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 5px; }
.asset-choice-row .asset-choice-more-symbol { width:46px; height:46px; flex:0 0 46px; margin-inline:auto; background:transparent; }
.asset-choice-row .asset-choice-more-symbol .asset-choice-icon-image { width:46px; height:46px; }
.asset-choice-row .asset-choice-more strong, .asset-choice-row .asset-choice-more small { width:100%; text-align:center; }
.asset-choice-row .asset-choice-plus { flex:0 0 30px; width:30px; height:30px; }
.voice-options-panel > summary { cursor:pointer; list-style:none; }
.voice-options-panel > summary::-webkit-details-marker { display:none; }
.voice-options-panel > summary::after { content:'展开'; color:#6658df; font-size:11px; }
.voice-options-panel[open] > summary::after { content:'收起'; }
.audio-drive-upload { margin-top:18px; padding:16px; border:1px solid #dfe4f4; border-radius:12px; background:linear-gradient(145deg,#fbfcff,#f5f5ff); }
.audio-drive-upload .field-label-row { margin:0 0 12px; align-items:flex-start; }
.audio-drive-upload .field-label-row > div { display:grid; gap:3px; }
.audio-drive-upload .field-label-row small { color:#929db8; font-size:10px; }
.audio-source-options { display:flex; justify-content:center; gap:14px; }
.creation-form .audio-source-card { position:relative; width:220px; height:120px; min-height:120px; display:flex; flex:0 0 220px; flex-direction:column; align-items:center; justify-content:center; gap:7px; box-sizing:border-box; margin:0; padding:16px; appearance:none; border:1px solid #e6e8f0; border-radius:20px; color:#111318; background:#fff; box-shadow:0 8px 22px rgba(32,45,94,.06); cursor:pointer; font:inherit; text-align:center; transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.audio-source-card:hover { border-color:#9b98ee; box-shadow:0 11px 28px rgba(66,62,174,.12); transform:translateY(-2px); }
.audio-source-card input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.audio-source-card img { width:34px; height:34px; object-fit:contain; }
.audio-source-card strong { font-size:14px; font-weight:600; }
.audio-source-card small { color:#929bb0; font-size:10px; }
.audio-drive-processing { margin:12px 0 0; padding:10px 12px; border-radius:8px; color:#5b56d9; background:#eeedff; font-size:11px; text-align:center; }
.audio-drive-empty { position:relative; display:flex; min-height:116px; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px dashed #aeb8d8; border-radius:10px; color:#525bd8; background:#fff; cursor:pointer; }
.audio-drive-empty input, .audio-drive-actions input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.audio-drive-empty .mini-icon { width:30px; height:30px; }
.audio-drive-empty small { color:#98a2ba; font-size:10px; }
.audio-drive-selected { display:grid; grid-template-columns:minmax(180px,240px) minmax(0,1fr) auto; align-items:center; gap:16px; padding:14px; border:1px solid #e0e4f2; border-radius:10px; background:#fff; }
.audio-source-options + .audio-drive-selected, .audio-drive-processing + .audio-drive-selected { margin-top:14px; }
.audio-drive-selected audio { width:100%; }
.audio-drive-selected > div:nth-child(2) { display:grid; min-width:0; gap:5px; }
.audio-drive-selected strong { overflow:hidden; color:#304474; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.audio-drive-selected small, .audio-drive-saved { color:#7e8ba8; font-size:10px; }
.audio-drive-selected label { display:grid; gap:4px; color:#53617c; font-size:10px; }
.audio-drive-selected input { min-height:36px; padding:0 10px; border:1px solid #d9def0; border-radius:7px; }
.audio-drive-actions { display:flex; gap:7px; }
.audio-drive-actions label { position:relative; display:inline-flex; cursor:pointer; }
.audio-drive-saved { margin:9px 0 0; color:#399267; }
.audio-link-modal { width:min(520px,100%); }
.audio-link-modal .eyebrow { margin:0 0 7px; color:#5a62e8; letter-spacing:.2em; font-size:10px; font-weight:800; }
.audio-link-modal > label { display:block; margin:16px 0 7px; color:#62749a; font-size:12px; font-weight:700; }
.audio-link-progress { display:grid; gap:8px; margin:14px 0; padding:12px; border-radius:10px; background:#f5f5ff; }
.audio-link-progress > div { display:flex; align-items:center; justify-content:center; gap:8px; color:#9aa4ba; font-size:10px; }
.audio-link-progress span.active { color:#554bdd; font-weight:700; }
.audio-link-progress i { height:5px; overflow:hidden; border-radius:99px; background:#e1e3f2; }
.audio-link-progress em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5f50ea,#8b7bf3); transition:width .25s ease; }
.audio-link-progress small { color:#69769a; font-size:10px; text-align:center; }
.audio-link-flow-copy { display:block; margin-top:9px; color:#9ba5ba; font-size:10px; text-align:center; }

@media (max-width:760px) {
  .audio-source-options { display:grid; grid-template-columns:1fr; }
  .creation-form .audio-source-card { width:100%; height:104px; min-height:104px; flex:none; }
  .audio-drive-selected { grid-template-columns:1fr; }
  .work-preview-backdrop { padding:12px; }
  .work-preview-modal { width:calc(100vw - 24px); max-height:calc(100vh - 24px); grid-template-columns:1fr; overflow-y:auto; }
  .work-preview-stage { min-height:300px; max-height:62vh; }
  .work-preview-media { max-height:62vh; }
  .work-preview-copy { padding:24px 18px 18px; }
}
.creation-asset-picker-modal { width:min(900px,calc(100vw - 32px)); }
.creation-asset-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:16px; max-height:55vh; overflow:auto; }
.creation-asset-picker-item { display:grid; gap:9px; padding:10px; border:1px solid #e0e4f2; border-radius:10px; background:#fafbff; }
.creation-asset-picker-item video { width:100%; height:140px; object-fit:cover; border-radius:7px; background:#edf0f8; }
.creation-asset-picker-item audio { width:100%; }
.creation-asset-picker-item strong { overflow:hidden; color:#304474; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.creation-asset-picker-item > div { display:flex; justify-content:flex-end; gap:7px; }

.asset-preview-modal { position:relative; width:min(760px, calc(100vw - 32px)); padding:30px; border:1px solid #e3e7f4; border-radius:18px; color:var(--navy); background:#fff; box-shadow:0 24px 80px rgba(30,48,119,.25); }
.asset-preview-modal h2 { margin:7px 0 5px; font-size:22px; }
.asset-preview-modal > p:not(.eyebrow) { margin:0 0 18px; color:#7d8baa; font-size:12px; }
.selected-asset-preview { display:block; width:100%; max-height:68vh; border-radius:12px; background:#eef1fa; }
.asset-preview-modal audio.selected-asset-preview { height:54px; }
.asset-rename-modal { max-width:430px; }
.asset-rename-modal .eyebrow { margin:0 0 8px; color:#5a62e8; letter-spacing:.22em; font-size:10px; font-weight:800; }
.asset-rename-modal label { display:block; margin:16px 0 7px; color:#62749a; font-size:12px; font-weight:700; }

.media-upload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.media-upload-card { position:relative; min-width:0; min-height:170px; overflow:hidden; border:1px dashed #c4cbe0; border-radius:10px; background:linear-gradient(145deg,#fbfcff,#f4f5fc); transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.media-upload-card:hover { border-color:#8884e9; box-shadow:0 9px 20px rgba(70,76,174,.1); transform:translateY(-1px); }
.media-upload-empty { position:relative; width:100%; height:100%; min-height:170px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:22px 14px; color:#53617c; cursor:pointer; text-align:center; }
.media-upload-empty.selected { min-height:138px; }
.media-upload-empty strong { font-size:13px; font-weight:700; }
.media-upload-empty small { color:#9aa3b8; font-size:10px; }
.media-upload-plus { display:grid; width:44px; height:44px; place-items:center; border:1px solid #aab5cf; border-radius:50%; color:#5865e4; background:#fff; }
.media-upload-plus .mini-icon { width:24px; height:24px; stroke-width:1.6; }
.media-upload-input.file-upload-input, .media-upload-input { position:absolute; width:1px; height:1px; min-height:1px; margin:0; padding:0; overflow:hidden; border:0; opacity:0; pointer-events:none; }
.media-upload-selected { width:100%; height:100%; min-height:170px; display:flex; flex-direction:column; }
.media-upload-preview { min-height:0; flex:1; display:grid; place-items:center; overflow:hidden; color:#717fe5; background:#eef0ff; }
.media-upload-preview img, .media-upload-preview video { width:100%; height:100%; max-height:142px; display:block; object-fit:contain; background:#192031; }
.media-upload-preview audio { width:calc(100% - 24px); }
.media-upload-file-icon { display:grid; width:58px; height:58px; place-items:center; border-radius:17px; color:#6658df; background:#fff; box-shadow:0 7px 16px rgba(67,74,170,.12); }
.media-upload-file-icon .mini-icon { width:31px; height:31px; }
.media-upload-footer { display:flex; min-height:57px; align-items:center; gap:8px; padding:8px 10px; border-top:1px solid #e4e7f2; background:#fff; }
.media-upload-footer > div { min-width:0; flex:1; display:grid; gap:3px; }
.media-upload-footer strong { overflow:hidden; color:#304474; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.media-upload-footer small { overflow:hidden; color:#98a1b4; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.media-upload-change { position:relative; display:inline-flex; min-height:29px; align-items:center; justify-content:center; padding:0 9px; border:1px solid #a8a5ed; border-radius:7px; color:#5c50d4; background:#faf9ff; font-size:11px; font-weight:700; cursor:pointer; }
.media-upload-change:hover { border-color:#7064e6; background:#f0efff; }
.media-upload-change.file-upload-surface { display:inline-flex; margin:0; padding:0 9px; border:1px solid #a8a5ed; background:#faf9ff; box-shadow:none; }
.media-upload-clear { width:25px; height:25px; border:0; border-radius:50%; color:#8e98b2; background:#f3f4fa; font-size:17px; line-height:1; cursor:pointer; }
.media-upload-clear:hover { color:#d35b68; background:#fff0f3; }
.media-upload-card-multi { min-height:126px; aspect-ratio:auto; }
.media-upload-card-multi .media-upload-empty { min-height:126px; flex-direction:row; gap:12px; }
.media-upload-card-multi .media-upload-plus { width:37px; height:37px; }
.media-upload-card-multi .media-upload-plus .mini-icon { width:20px; height:20px; }
.media-upload-card-multi .media-upload-empty strong { text-align:left; }
.media-upload-card-multi .media-upload-empty small { margin-left:auto; }
.media-upload-grid-compact { grid-template-columns:repeat(2,132px); justify-content:start; gap:16px; }
.media-upload-card-compact { width:132px; height:132px; min-height:132px; border-radius:10px; }
.media-upload-card-compact .media-upload-empty { min-height:132px; padding:10px 6px; display:grid; grid-template-rows:36px 30px 14px 11px; align-content:center; justify-items:center; gap:4px; }
.media-upload-card-compact .media-upload-empty strong { min-height:14px; max-width:100%; overflow:hidden; font-size:11px; line-height:14px; text-overflow:ellipsis; white-space:nowrap; }
.media-upload-card-compact .media-upload-empty small { min-height:11px; max-width:100%; overflow:hidden; font-size:9px; line-height:11px; text-overflow:ellipsis; white-space:nowrap; }
.media-upload-card-compact .media-upload-type-icon { display:grid; width:36px; height:36px; place-items:center; border-radius:10px; color:#8d96a8; background:#edf0f5; }
.media-upload-card-compact .media-upload-type-icon .mini-icon { width:21px; height:21px; stroke-width:1.8; }
.media-upload-card-compact .media-upload-type-image { display:block; width:27px; height:27px; object-fit:contain; }
.media-upload-card-compact .media-upload-plus { width:30px; height:30px; color:#6673df; }
.media-upload-card-compact .media-upload-plus .mini-icon { width:17px; height:17px; stroke-width:1.6; }
.media-upload-card-compact .media-upload-selected { min-height:132px; }
.media-upload-card-compact .media-upload-preview { flex:0 0 84px; }
.media-upload-card-compact .media-upload-preview img, .media-upload-card-compact .media-upload-preview video { max-height:84px; }
.media-upload-card-compact .media-upload-preview audio { width:calc(100% - 10px); }
.media-upload-card-compact .media-upload-file-icon { width:38px; height:38px; border-radius:11px; }
.media-upload-card-compact .media-upload-file-icon .mini-icon { width:21px; height:21px; }
.media-upload-card-compact .media-upload-footer { min-height:48px; gap:4px; padding:5px 6px; }
.media-upload-card-compact .media-upload-footer strong { font-size:10px; }
.media-upload-card-compact .media-upload-footer small { font-size:8px; }
.media-upload-card-compact .media-upload-change { min-height:23px; padding:0 4px; border-radius:5px; font-size:9px; }
.media-upload-card-compact .media-upload-clear { width:20px; height:20px; font-size:14px; }
.media-upload-card-multi.media-upload-card-compact .media-upload-empty { flex-direction:column; align-items:center; gap:4px; }
.media-upload-card-multi.media-upload-card-compact .media-upload-empty strong { text-align:center; }
.media-upload-card-multi.media-upload-card-compact .media-upload-empty small { margin-left:0; }
.media-file-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.media-file-list span { display:inline-flex; max-width:100%; align-items:center; gap:5px; overflow:hidden; padding:6px 8px; border:1px solid #e0e4f2; border-radius:7px; color:#68779d; background:#fafbff; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.media-file-list .mini-icon { width:13px; height:13px; flex:0 0 auto; color:#6b60dc; }
.creation-upload-section { margin-top:3px; }
.creation-upload-section .field-label-row { margin-top:17px; }
.creation-upload-section > .media-upload-card { min-height:138px; }
.creation-upload-section .media-upload-empty, .creation-upload-section .media-upload-selected { min-height:138px; }
.audio-drive-section { margin-top: 1px; }
.task-detail-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; color:#2e3d72; }
.task-detail-summary span { color:#9aa4bd; font-size:11px; }
.task-step-list { display:grid; gap:12px; margin:18px 0 0; padding:0; list-style:none; }
.task-step-list li { display:grid; grid-template-columns:16px minmax(0,1fr); gap:9px; align-items:start; color:#a0a9bd; }
.task-step-list li > span { position:relative; width:10px; height:10px; margin-top:4px; border:2px solid #d8deee; border-radius:50%; background:#fff; }
.task-step-list li:not(:last-child) > span::after { position:absolute; top:10px; left:2px; width:2px; height:23px; content:""; background:#e4e7f2; }
.task-step-list li.done, .task-step-list li.active { color:#304474; }
.task-step-list li.done > span, .task-step-list li.active > span { border-color:#5a55df; background:#6658df; box-shadow:0 0 0 3px rgba(102,88,223,.12); }
.task-step-list strong, .task-step-list small { display:block; }
.task-step-list strong { font-size:12px; }
.task-step-list small { margin-top:3px; color:#929db5; font-size:10px; line-height:1.5; }
.task-detail-actions { display:flex; gap:9px; margin-top:17px; }
.modal-upload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.modal-upload-grid .media-upload-card { min-height:132px; }
.modal-upload-grid .media-upload-empty, .modal-upload-grid .media-upload-selected { min-height:132px; }

@media (max-width:700px) {
  .media-upload-grid, .modal-upload-grid { grid-template-columns:1fr; }
  .asset-picker-pair { grid-template-columns:1fr; }
  .asset-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .voice-asset-choice-grid { grid-template-columns:1fr; }
  .media-upload-card-multi .media-upload-empty { align-items:flex-start; flex-direction:column; }
  .media-upload-card-multi .media-upload-empty small { margin-left:0; }
}

/* Keep the web reference width, but borrow the desktop rail's quieter active state. */
.sidebar { padding:22px 14px 22px; }
.sidebar nav { gap:6px; }
.nav-button { min-height:56px; gap:12px; padding:0 14px; border:1px solid transparent; border-radius:10px; color:#64739a; background:transparent; font-size:14px; }
.nav-button .mini-icon { width:20px; height:20px; color:#7380a3; }
.nav-button:hover { color:#5143d4; background:#f7f7ff; }
.nav-button.active { color:#5545d6; background:#f2f1ff; box-shadow:none; font-weight:700; }
.nav-button.active .mini-icon { color:#5d4be0; }
@media (min-width: 769px) {
  .desktop-nav-sidebar { width: 76px; flex: 0 0 76px; padding: 0; background: #fff; border-right: 1px solid #edf0f7; }
  body.image-view-shell .desktop-nav-sidebar { padding: 0; }
  .desktop-nav-sidebar nav { display: block; padding-top: 16px; }
  .desktop-nav-item { position: relative; width: 64px; height: 72px; min-height: 72px; margin: 0 auto; padding: 6px 3px 5px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; border: 0; border-radius: 0; color: #9097a5; background: transparent; text-align: center; font-size: 12px; line-height: 14px; font-weight: 400; }
  .desktop-nav-item .desktop-nav-icon { width: 44px; height: 44px; flex: 0 0 44px; display: block; box-sizing: border-box; padding: 10px; color: #9097a5; }
  .desktop-nav-item .desktop-nav-icon svg { width: 100%; height: 100%; display: block; }
  .desktop-nav-item .desktop-nav-icon-home { position: relative; padding: 0; overflow: hidden; }
  .desktop-nav-item .desktop-nav-icon-ai-video { padding: 5px; }
  .desktop-nav-item .desktop-nav-home-icon { position: absolute; inset: 0; width: 44px; height: 44px; display: none; }
  .desktop-nav-item .desktop-nav-home-icon.visible { display: block; }
  .desktop-nav-item > .desktop-nav-icon + span { width: 100%; margin-top: 3px; line-height: 14px; white-space: nowrap; }
  .desktop-nav-item:hover { color: #434af9; background: #f6f7fb; }
  .desktop-nav-item:hover .desktop-nav-icon, .desktop-nav-item.active .desktop-nav-icon { color: #434af9; }
  .desktop-nav-item:hover .desktop-nav-home-off.visible { display: none !important; }
  .desktop-nav-item:hover .desktop-nav-home-on { display: block !important; }
  .desktop-nav-item.active { color: #434af9; background: #f2f1ff; box-shadow: none; font-weight: 400; }
}
.avatar-creation-modal > input[type="file"],
.asset-modal > input[type="file"] { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px dashed #c8c9f5; border-radius: 14px; background: linear-gradient(135deg,#fbfbff,#f4f3ff); color: #7580a8; font: inherit; }
.avatar-creation-modal > input[type="file"]::file-selector-button,
.asset-modal > input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid #b8b3ff; border-radius: 9px; color: #5545d6; background: #f0efff; font: inherit; font-weight: 700; cursor: pointer; }

.avatar-create-heading { align-items: flex-start; max-width: 1160px; margin-right: auto; margin-left: auto; }
.avatar-create-heading .ghost-button { flex: 0 0 auto; }
.avatar-guide-layout { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.avatar-guide-panel, .avatar-upload-panel { border-color: #e3e6ed; background: #fff; }
.avatar-guide-panel { padding: 26px; }
.avatar-section-title { display: flex; align-items: center; gap: 12px; }
.avatar-section-title h2, .avatar-upload-panel h2 { margin: 0; color: var(--navy); font-size: 19px; }
.avatar-section-title p, .avatar-upload-panel > p { margin: 4px 0 0; color: #8a91a0; font-size: 13px; }
.avatar-guide-icon, .avatar-upload-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: #4656ee; background: #eef0ff; }
.avatar-guide-icon .mini-icon, .avatar-upload-icon .mini-icon { width: 24px; height: 24px; }
.avatar-requirements { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid #e7e9ef; background: #e7e9ef; }
.avatar-requirements article { min-height: 104px; padding: 18px; display: grid; grid-template-columns: 28px 1fr; align-content: start; column-gap: 10px; background: #fff; }
.avatar-requirements article > .mini-icon { width: 22px; height: 22px; color: #5968ea; }
.avatar-requirements strong { color: #27386e; font-size: 14px; }
.avatar-requirements span { grid-column: 2; margin-top: 6px; color: #7c8392; font-size: 12px; line-height: 1.65; }
.avatar-recording-script { margin-top: 20px; padding: 16px; border-left: 3px solid #4656ee; background: #f5f6ff; }
.avatar-recording-script p { margin: 6px 0 0; color: #697181; font-size: 13px; line-height: 1.7; }
.avatar-upload-panel { padding: 24px; display: grid; gap: 14px; }
.avatar-upload-icon { width: 48px; height: 48px; border-radius: 8px; }
.avatar-file-picker { min-height: 74px; display: flex; align-items: center; justify-content: center; gap: 9px; overflow: hidden; padding: 14px; border: 1px dashed #cfd5e2; border-radius: 9px; color: #6e7584; background: #fafbfc; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.avatar-file-picker:hover { border-color: #8884e9; background: #f7f7ff; box-shadow: 0 8px 18px rgba(70,76,174,.08); }
.avatar-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.avatar-file-picker-icon { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #5968ea; background: #eef0ff; }
.avatar-file-picker-icon .mini-icon { width: 21px; height: 21px; }
.avatar-file-picker-content { min-width: 0; display: grid; gap: 3px; align-content: center; }
.avatar-file-picker-content strong, .avatar-file-picker-content small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-file-picker-content strong { color: #4f5b78; font-size: 12px; font-weight: 650; }
.avatar-file-picker-content small { color: #929bad; font-size: 10px; line-height: 1.3; }
.avatar-duration-hint { margin-left: 6px; color: #8d96aa; font-size: 10px; font-weight: 400; }
.avatar-name-input { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #dce5f6; border-radius: 9px; outline: 0; color: var(--navy); background: #fbfcff; }
.avatar-name-input:focus { border-color: #8393f6; box-shadow: 0 0 0 4px rgba(104,91,225,.1); }
.avatar-upload-note { padding: 12px; border: 1px solid #dfe3f0; border-radius: 8px; color: #697693; background: #f8f9ff; font-size: 12px; line-height: 1.65; }
@media (max-width:900px) { .avatar-guide-layout { grid-template-columns: 1fr; } .avatar-requirements { grid-template-columns: 1fr; } }

@media (max-width:700px) {
  .tutorial-modal, .settings-modal, .transactions-modal { padding: 24px 20px; }
  .tutorial-guide-grid, .settings-card-grid { grid-template-columns: 1fr; }
  .tutorial-support { grid-template-columns: 1fr; justify-items: center; padding: 16px; text-align: center; }
  .tutorial-support a { width: min(245px, 100%); }
  .tutorial-section-title { display: block; }
  .tutorial-section-title span { display: block; margin-top: 5px; }
  .tutorial-step-strip { flex-wrap: wrap; justify-content: center; }
}

/* Desktop AI image parity workspace. Keep this block isolated from the legacy image page rules. */
.desktop-image-page { min-height: calc(100vh - 76px); padding: 28px 28px 40px; background: #f5f6fb; color: #202532; }
.desktop-image-header, .desktop-image-mode-tabs, .desktop-image-workspace, .desktop-image-inspiration, .desktop-product-workspace { width: min(100%, 1375px); margin-right: auto; margin-left: auto; }
.desktop-image-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.desktop-image-header h1 { margin: 0; color: #152d72; font-size: 31px; font-weight: 700; letter-spacing: -.04em; }
.desktop-image-header > div:first-child > p:last-child { margin: 8px 0 0; color: #8794b3; font-size: 13px; }
.desktop-image-header .eyebrow { margin: 0 0 7px; color: #5968ea; font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.image-charge-hint { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid #dddffc; border-radius: 20px; color: #6975a1; background: #fafaff; font-size: 11px; white-space: nowrap; }
.image-charge-hint .mini-icon { width: 15px; height: 15px; color: #5547e6; }
.image-charge-hint i { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid #9ca7c7; border-radius: 50%; color: #8792ad; font-size: 9px; font-style: normal; }
.desktop-image-mode-tabs { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid #dfe3f1; }
.desktop-image-mode-tabs button { min-width: 172px; height: 45px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: 12px 12px 0 0; color: #7f8baa; background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; }
.desktop-image-mode-tabs button:hover, .desktop-image-mode-tabs button:focus-visible { color: #5143d4; background: #fafaff; outline: 0; }
.desktop-image-mode-tabs button.active { border-color: #d8d9fb; border-bottom-color: #5e51e8; color: #5143d4; background: #fff; box-shadow: 0 -2px 12px rgba(89,78,218,.04); }
.desktop-image-mode-tabs .mini-icon { width: 16px; height: 16px; }
.desktop-image-workspace { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(340px, .88fr); gap: 17px; align-items: start; padding-top: 14px; }
.desktop-image-main { min-width: 0; display: grid; gap: 14px; }
.desktop-image-main > section, .desktop-image-result-panel, .desktop-product-input-card, .desktop-product-review-card, .desktop-product-plan-card, .desktop-product-result-card { border: 1px solid #e2e6f0; border-radius: 13px; background: #fff; box-shadow: 0 9px 25px rgba(70,77,140,.05); }
.desktop-image-reference-board, .desktop-image-prompt-card, .desktop-image-edit-options, .desktop-image-style-card, .desktop-image-ratio-options { padding: 20px; }
.desktop-image-card-heading, .desktop-product-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.desktop-section-kicker { margin: 0 0 5px; color: #5968ea; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.desktop-image-card-heading h2, .desktop-product-section-heading h2 { margin: 0; color: #202f61; font-size: 17px; font-weight: 650; }
.desktop-image-card-heading small, .desktop-product-section-heading small { display: block; margin-top: 6px; color: #8a96b0; font-size: 11px; line-height: 1.55; }
.desktop-image-card-heading em, .desktop-product-section-heading em { color: #5968ea; font-size: 12px; font-style: normal; white-space: nowrap; }
.desktop-image-heading-tip { padding-top: 18px; color: #a0a9bb; font-size: 10px; white-space: nowrap; }
.desktop-image-heading-tip b { display: inline-grid; width: 15px; height: 15px; place-items: center; border: 1px solid #b0b8cc; border-radius: 50%; font-size: 9px; }
.desktop-image-reference-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.desktop-image-reference-item, .desktop-image-add-reference, .desktop-image-reference-placeholder { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; border-radius: 9px; }
.desktop-image-reference-item { background: #eef1f8; }
.desktop-image-reference-item img { width: 100%; height: 100%; object-fit: cover; }
.desktop-image-reference-item button { position: absolute; top: 5px; right: 5px; width: 21px; height: 21px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #202532aa; cursor: pointer; }
.desktop-image-add-reference { display: grid; place-content: center; gap: 4px; border: 1px dashed #aab5fb; color: #5968ea; background: #fafaff; text-align: center; cursor: pointer; }
.desktop-image-add-reference input, .desktop-product-add-image input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.desktop-image-add-reference span { font-size: 24px; line-height: 1; }
.desktop-image-add-reference strong { font-size: 10px; font-weight: 500; }
.desktop-image-add-reference small, .desktop-product-add-image small { color: #9aa4b9; font-size: 8px; }
.desktop-image-reference-placeholder, .desktop-product-image-placeholder { display: grid; place-items: center; border: 1px solid #edf0f6; color: #d5dbe7; background: #fafbfe; font-size: 10px; }
.desktop-image-prompt-card { background: linear-gradient(145deg,#fff 70%,#faf9ff); }
.desktop-image-prompt-editor { overflow: hidden; margin-top: 15px; border: 1px solid #dce2ef; border-radius: 11px; background: #fff; }
.desktop-image-prompt-editor textarea { display: block; width: 100%; min-height: 118px; box-sizing: border-box; padding: 15px; border: 0; outline: 0; resize: vertical; color: #303848; font: inherit; font-size: 13px; line-height: 1.7; }
.desktop-image-prompt-editor textarea::placeholder { color: #aab2c1; }
.desktop-image-prompt-editor > div { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: linear-gradient(90deg,#fafbff,#f3f2ff); }
.desktop-image-prompt-editor button { padding: 7px 12px; border: 0; border-radius: 7px; color: #fff; background: linear-gradient(135deg,#5e56f6,#7169ff); font-size: 12px; cursor: pointer; }
.desktop-image-prompt-editor span { color: #9aa3b4; font-size: 11px; }
.desktop-image-prompt-editor small { margin-left: auto; color: #8f99aa; font-size: 11px; }
.desktop-image-edit-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 14px; }
.desktop-image-edit-grid button { min-height: 76px; display: grid; grid-template-columns: 25px 1fr; align-content: center; column-gap: 8px; padding: 10px; border: 1px solid #e1e5f1; border-radius: 9px; color: #59657b; background: #fff; text-align: left; cursor: pointer; }
.desktop-image-edit-grid button:hover, .desktop-image-edit-grid button.selected { border-color: #625bfa; color: #5955e4; background: #f5f4ff; box-shadow: inset 0 0 0 1px #625bfa; }
.desktop-image-edit-grid button span { grid-row: span 2; color: #625bfa; font-size: 21px; }
.desktop-image-edit-grid button strong { font-size: 11px; }
.desktop-image-edit-grid button small { color: #9aa4b5; font-size: 9px; }
.desktop-image-style-card { min-height: 154px; }
.desktop-image-style-card h2 small { margin-left: 4px; color: #9aa4b5; font-size: 10px; font-weight: 400; }
.desktop-image-shuffle { padding: 6px 10px; border: 1px solid #dcdff5; border-radius: 7px; color: #5a4bd2; background: #fafaff; font-size: 10px; cursor: pointer; }
.desktop-image-style-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; margin-top: 15px; }
.desktop-image-style-grid button { position: relative; min-width: 0; display: grid; gap: 4px; overflow: hidden; padding: 0 0 9px; border: 1px solid #e2e6ef; border-radius: 9px; color: #59657b; background: #fff; text-align: left; cursor: pointer; }
.desktop-image-style-grid button:hover, .desktop-image-style-grid button.selected { border-color: #625bfa; box-shadow: inset 0 0 0 1px #625bfa; }
.desktop-image-style-grid img { display: block; width: 100%; height: 78px; object-fit: cover; }
.desktop-image-style-grid strong, .desktop-image-style-grid small { display: block; padding: 0 8px; }
.desktop-image-style-grid strong { color: #404d66; font-size: 10px; }
.desktop-image-style-grid small { overflow: hidden; color: #9aa4b5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.desktop-image-style-grid em { position: absolute; top: 5px; right: 5px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #625bfa; font-size: 10px; font-style: normal; }
.desktop-image-ratio-options { display: grid; gap: 14px; }
.desktop-image-ratio-options > div { display: flex; align-items: center; gap: 12px; }
.desktop-image-ratio-options strong { flex: 0 0 auto; color: #59657b; font-size: 11px; }
.desktop-image-ratio-options > div > span { display: flex; flex-wrap: wrap; gap: 6px; }
.desktop-image-ratio-options button { min-width: 54px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid #e0e5ef; border-radius: 7px; color: #778398; background: #fff; font-size: 10px; cursor: pointer; }
.desktop-image-ratio-options button.selected { border-color: #625bfa; color: #5955e4; background: #f5f4ff; }
.desktop-image-ratio-options button i { width: 10px; height: 10px; display: inline-block; border: 1px solid currentColor; border-radius: 2px; }
.desktop-image-ratio-options button .ratio-9-16, .desktop-image-ratio-options button .ratio-3-4 { height: 13px; }
.desktop-image-ratio-options details { border-top: 1px solid #edf0f5; padding-top: 12px; color: #59657b; font-size: 11px; }
.desktop-image-ratio-options summary { cursor: pointer; list-style: none; }
.desktop-image-ratio-options summary::-webkit-details-marker { display: none; }
.desktop-image-ratio-options summary::before { content: '＋'; display: inline-block; width: 18px; color: #625bfa; }
.desktop-image-ratio-options details[open] summary::before { content: '−'; }
.desktop-image-ratio-options summary small { margin-left: 8px; color: #9aa4b5; font-size: 10px; }
.desktop-image-ratio-options details input { width: 100%; min-height: 36px; box-sizing: border-box; margin-top: 9px; padding: 0 10px; border: 1px solid #dce2ed; border-radius: 7px; outline: 0; color: #303848; font: inherit; font-size: 11px; }
.desktop-image-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #8492b1; font-size: 12px; }
.desktop-image-form-footer .primary-button { min-width: 180px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; }
.desktop-image-form-footer .primary-button small { margin-left: 5px; opacity: .72; font-size: 10px; }
.desktop-image-result-panel { min-height: 520px; padding: 22px; }
.desktop-image-result-panel h2 { margin: 0; color: #202f61; font-size: 17px; }
.desktop-image-result-empty { min-height: 420px; display: grid; place-items: center; align-content: center; gap: 12px; color: #a0a9b9; text-align: center; }
.desktop-image-result-empty .visual-art { width: 220px; height: 145px; }
.desktop-image-result-empty p { margin: 0; color: #9aa4b9; font-size: 12px; }
.desktop-image-task-list { display: grid; gap: 10px; margin-top: 20px; }
.desktop-image-task-row { min-height: 62px; display: grid; grid-template-columns: 48px minmax(0,1fr) 88px auto minmax(75px,100px); align-items: center; gap: 9px; padding: 7px; border: 1px solid #e5e8f2; border-radius: 9px; background: #fcfdff; }
.desktop-image-task-thumb { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: linear-gradient(145deg,#8c99f3,#5f53dc); }
.desktop-image-task-thumb .mini-icon { width: 23px; height: 23px; }
.desktop-image-task-row > div { min-width: 0; }
.desktop-image-task-row strong { display: block; overflow: hidden; color: #273b70; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.desktop-image-task-row small { display: block; overflow: hidden; color: #8997b5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.desktop-image-task-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; min-width: 75px; }
.desktop-image-task-progress:before, .desktop-image-task-progress i { grid-column: 1; grid-row: 1; height: 6px; border-radius: 6px; }
.desktop-image-task-progress:before { content: ''; background: #e8eafa; }
.desktop-image-task-progress i { display: block; background: linear-gradient(90deg,#5e4ded,#7651e9); }
.desktop-image-task-progress b { color: #5a4bd2; font-size: 9px; white-space: nowrap; }
.desktop-image-task-check { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #38aa66; font-size: 12px; font-weight: 700; }
.desktop-image-inspiration { min-height: 112px; display: grid; grid-template-columns: 220px minmax(0,1fr) 32px; align-items: center; gap: 16px; margin-top: 19px; padding: 15px 20px 15px 24px; border: 1px solid #e2e6f0; border-radius: 13px; background: #fff; box-shadow: 0 9px 25px rgba(70,77,140,.05); }
.desktop-image-inspiration h2 { margin: 0; color: #202f61; font-size: 18px; }
.desktop-image-inspiration p { margin: 8px 0 0; color: #8b99b7; font-size: 11px; white-space: nowrap; }
.desktop-image-inspiration-grid { min-width: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.desktop-image-inspiration-grid button { min-width: 0; height: 66px; display: flex; align-items: center; gap: 9px; padding: 4px 7px; border: 1px solid #e0e4f4; border-radius: 9px; color: #283a70; background: linear-gradient(145deg,#fff,#fbfbff); text-align: left; cursor: pointer; }
.desktop-image-inspiration-grid button.selected, .desktop-image-inspiration-grid button:hover { border-color: #6555e2; background: #f5f3ff; }
.desktop-image-inspiration-grid img { width: 55px; height: 55px; flex: 0 0 auto; border-radius: 6px; object-fit: cover; }
.desktop-image-inspiration-grid span { min-width: 0; }
.desktop-image-inspiration-grid strong, .desktop-image-inspiration-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-image-inspiration-grid strong { font-size: 11px; }
.desktop-image-inspiration-grid small { margin-top: 6px; color: #8b99b8; font-size: 9px; }
.desktop-image-inspiration-next { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #d8daf8; border-radius: 50%; color: #6555e2; background: #f4f2ff; font-size: 22px; cursor: pointer; }

.desktop-product-workspace { display: grid; gap: 14px; padding-top: 14px; }
.desktop-product-flow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border: 1px solid #e2e6ef; border-radius: 12px; color: #8b94a7; background: #fff; box-shadow: 0 8px 22px rgba(62,72,145,.04); font-size: 12px; }
.desktop-product-flow span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.desktop-product-flow b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #707b91; background: #e4e8f1; font-size: 11px; }
.desktop-product-flow span.active, .desktop-product-flow span.done { color: #5968ea; }
.desktop-product-flow span.active b, .desktop-product-flow span.done b { color: #fff; background: #5968ea; }
.desktop-product-stage { display: grid; gap: 14px; }
.desktop-product-input-card, .desktop-product-review-card, .desktop-product-plan-card, .desktop-product-result-card { display: grid; gap: 16px; padding: 22px; }
.desktop-product-section-heading h2 { font-size: 18px; }
.desktop-product-input-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(260px,.55fr); gap: 16px; }
.desktop-product-image-picker { display: grid; grid-template-columns: repeat(6,minmax(54px,1fr)); gap: 8px; }
.desktop-product-image-item, .desktop-product-add-image { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 9px; }
.desktop-product-image-item { background: #eef1f8; }
.desktop-product-image-item img { width: 100%; height: 100%; object-fit: cover; }
.desktop-product-image-item button { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0; border-radius: 50%; color: #fff; background: #202532aa; cursor: pointer; }
.desktop-product-add-image { display: grid; place-content: center; gap: 3px; border: 1px dashed #aab5fb; color: #5968ea; background: #fafaff; text-align: center; cursor: pointer; }
.desktop-product-add-image span { font-size: 22px; line-height: 1; }
.desktop-product-add-image strong { font-size: 10px; font-weight: 500; }
.desktop-product-ai-card { display: grid; align-content: center; min-height: 120px; padding: 14px; border-radius: 10px; background: linear-gradient(135deg,#f7f7ff,#fbfcff); }
.desktop-product-ai-title { display: flex; align-items: center; gap: 7px; color: #404de0; }
.desktop-product-ai-title > span { font-size: 17px; }
.desktop-product-ai-title strong { font-size: 13px; }
.desktop-product-ai-title b { margin-left: auto; padding: 4px 7px; border-radius: 5px; color: #6470ec; background: #eef0ff; font-size: 9px; font-weight: 500; }
.desktop-product-ai-card > p { margin: 10px 0 0; color: #7b879b; font-size: 11px; line-height: 1.5; }
.desktop-product-read-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.desktop-product-read-tags span { padding: 5px 8px; border-radius: 6px; color: #5968ea; background: #eeefff; font-size: 10px; }
.desktop-product-analysis-list { display: grid; gap: 6px; margin-top: 12px; }
.desktop-product-analysis-list span { padding: 6px 8px; border-radius: 6px; color: #9aa4b5; background: #f5f6fb; font-size: 10px; }
.desktop-product-analysis-list span.active { color: #5143ce; background: #f0efff; }
.desktop-product-analysis-list span.done { color: #3c805c; background: #effaf3; }
.desktop-product-selling-point { display: grid; gap: 7px; color: #56647c; font-size: 12px; }
.desktop-product-selling-point span small { color: #9aa4b5; font-size: 10px; font-weight: 400; }
.desktop-product-selling-point textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #dce2ef; border-radius: 9px; outline: 0; color: #303848; font: inherit; font-size: 12px; resize: vertical; }
.desktop-product-output-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.desktop-product-output-row > strong { margin-right: 4px; color: #40506b; font-size: 12px; }
.desktop-product-output-row button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid #e0e5ef; border-radius: 7px; color: #748198; background: #fff; font-size: 11px; cursor: pointer; }
.desktop-product-output-row button.selected { border-color: #625bfa; color: #5955e4; background: #f5f4ff; }
.desktop-product-output-row button span { color: #625bfa; }
.desktop-product-output-row small { margin-left: auto; color: #9aa4b5; font-size: 10px; }
.desktop-product-advanced { border-top: 1px solid #edf0f5; padding-top: 14px; }
.desktop-product-advanced summary { color: #5968ea; cursor: pointer; list-style: none; font-size: 12px; }
.desktop-product-advanced summary::-webkit-details-marker { display: none; }
.desktop-product-advanced summary::before { content: '＋'; display: inline-block; width: 18px; }
.desktop-product-advanced[open] summary::before { content: '−'; }
.desktop-product-advanced summary span { margin-left: 8px; color: #a0a8b9; font-size: 10px; }
.desktop-product-settings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 14px; }
.desktop-product-settings label { display: grid; gap: 5px; color: #68758b; font-size: 11px; }
.desktop-product-settings input, .desktop-product-settings select, .desktop-product-pages input, .desktop-product-pages textarea, .desktop-product-revision input, .desktop-product-revision select { width: 100%; box-sizing: border-box; padding: 8px 9px; border: 1px solid #dce2ed; border-radius: 7px; outline: 0; color: #303848; background: #fff; font: inherit; font-size: 11px; }
.desktop-product-module-heading { display: flex; align-items: baseline; gap: 9px; margin-top: 17px; }
.desktop-product-module-heading strong { color: #42506a; font-size: 12px; }
.desktop-product-module-heading small { color: #9aa4b5; font-size: 10px; }
.desktop-product-module-heading em { margin-left: auto; color: #5968ea; font-size: 10px; font-style: normal; }
.desktop-product-module-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 10px; }
.desktop-product-module-grid button { position: relative; display: grid; gap: 4px; min-width: 0; overflow: hidden; padding: 0 0 9px; border: 1px solid #e3e7f0; border-radius: 9px; color: #59657b; background: #fff; text-align: left; cursor: pointer; }
.desktop-product-module-grid button.selected { border-color: #625bfa; box-shadow: 0 0 0 1px #625bfa; }
.desktop-product-module-grid img { width: 100%; height: 60px; object-fit: cover; }
.desktop-product-module-grid strong, .desktop-product-module-grid small { display: block; padding: 0 8px; }
.desktop-product-module-grid strong { margin-top: 6px; color: #404d66; font-size: 10px; }
.desktop-product-module-grid small { color: #9aa4b5; font-size: 9px; line-height: 1.3; }
.desktop-product-module-grid em { position: absolute; top: 5px; right: 5px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: #625bfa; font-size: 10px; font-style: normal; }
.desktop-product-choice-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 15px; }
.desktop-product-choice-row > div { display: flex; align-items: center; gap: 9px; }
.desktop-product-choice-row strong { flex: 0 0 auto; color: #59657b; font-size: 11px; }
.desktop-product-choice-row span { display: flex; flex-wrap: wrap; gap: 5px; }
.desktop-product-choice-row button, .desktop-product-revision button { padding: 7px 10px; border: 1px solid #e0e5ef; border-radius: 7px; color: #778398; background: #fff; font-size: 10px; cursor: pointer; }
.desktop-product-choice-row button.selected, .desktop-product-revision button.selected { border-color: #625bfa; color: #5955e4; background: #f5f4ff; }
.desktop-product-action { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; }
.desktop-product-action small { margin-left: 9px; opacity: .72; font-size: 10px; }
.desktop-product-error { margin: 0; padding: 9px 10px; border-radius: 7px; color: #b05b68; background: #fff5f6; font-size: 11px; }
.desktop-product-summary, .desktop-product-plan-summary { display: grid; grid-template-columns: 1.3fr .8fr 1fr; gap: 10px; }
.desktop-product-summary > div, .desktop-product-plan-summary > div { display: grid; gap: 5px; padding: 11px 12px; border-radius: 9px; background: #f7f8ff; }
.desktop-product-summary span, .desktop-product-plan-summary span { color: #8c96a9; font-size: 10px; }
.desktop-product-summary strong, .desktop-product-plan-summary strong { color: #46536b; font-size: 12px; line-height: 1.5; }
.desktop-product-claim-section { display: grid; gap: 9px; }
.desktop-product-claim-section > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.desktop-product-claim-section > div:first-child strong { color: #42506a; font-size: 13px; }
.desktop-product-claim-section > div:first-child small { color: #9aa4b5; font-size: 10px; }
.desktop-product-confirmed-claims { display: flex; flex-wrap: wrap; gap: 6px; }
.desktop-product-confirmed-claims span { padding: 5px 8px; border-radius: 6px; color: #3c805c; background: #effaf3; font-size: 10px; }
.desktop-product-confirmed-claims p, .desktop-product-pending-claims p { margin: 0; color: #9aa4b5; font-size: 10px; }
.desktop-product-pending-claims { display: grid; gap: 7px; }
.desktop-product-pending-claims label { display: grid; grid-template-columns: 18px minmax(90px,.4fr) minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 8px; border: 1px solid #e1e5f1; border-radius: 7px; color: #59698f; background: #fcfdff; font-size: 10px; cursor: pointer; }
.desktop-product-pending-claims label.selected { border-color: #8578ee; color: #4f45bd; background: #f7f5ff; }
.desktop-product-pending-claims input { accent-color: #6357df; }
.desktop-product-pending-claims small { color: #a0a9bf; font-size: 9px; }
.desktop-product-prohibited { display: grid; gap: 6px; padding: 10px; border-radius: 8px; background: #fff5f6; }
.desktop-product-prohibited strong { color: #b05b68; font-size: 11px; }
.desktop-product-prohibited span { color: #9b7479; font-size: 10px; }
.desktop-product-stage-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.desktop-product-stage-actions .primary-button, .desktop-product-stage-actions .secondary-button { width: auto; min-height: 38px; padding: 0 15px; }
.desktop-product-stage-actions a.primary-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.desktop-product-revision { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 14px; border-radius: 9px; background: #f7f8ff; }
.desktop-product-revision strong { color: #42506a; font-size: 13px; }
.desktop-product-revision small { color: #9aa4b5; font-size: 10px; }
.desktop-product-revision > div { display: flex; gap: 6px; grid-column: 1 / -1; }
.desktop-product-revision input { grid-column: 1 / 3; }
.desktop-product-revision > button { width: auto; padding: 0 10px; }
.desktop-product-pages { display: grid; gap: 9px; }
.desktop-product-pages article { display: grid; grid-template-columns: 145px minmax(160px,.7fr) minmax(0,1.3fr); align-items: center; gap: 8px; padding: 8px; border: 1px solid #e2e6ef; border-radius: 8px; background: #fcfcfe; }
.desktop-product-pages article > div { display: grid; grid-template-columns: 28px 1fr; gap: 3px 7px; align-items: center; }
.desktop-product-pages b { grid-row: span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #5d5bf4; background: #eef0ff; font-size: 11px; }
.desktop-product-pages strong { color: #303848; font-size: 11px; }
.desktop-product-pages small { color: #9099aa; font-size: 9px; }
.desktop-product-result-card { min-height: 260px; }
.desktop-product-progress { height: 7px; overflow: hidden; border-radius: 8px; background: #e9ecf4; }
.desktop-product-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#5b57f4,#6f83ff); transition: width .25s; }
.desktop-product-result-card > p { margin: 0; color: #9aa4b5; font-size: 11px; }
.desktop-product-result-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.desktop-product-result-grid article { overflow: hidden; border: 1px solid #e2e6ef; border-radius: 8px; background: #fafbfe; }
.desktop-product-result-grid img, .desktop-product-result-grid article > div { width: 100%; aspect-ratio: 3/4; display: grid; place-items: center; object-fit: cover; color: #a0a9b9; background: #eef1f7; font-size: 10px; text-align: center; }
.desktop-product-result-grid strong { display: block; padding: 8px; color: #303848; font-size: 10px; }
.desktop-product-result-grid article > a { display: block; padding: 0 8px 10px; color: #5148dc; font-size: 11px; font-weight: 700; text-decoration: none; }
.desktop-product-empty { min-height: 160px; display: grid; place-items: center; }

@media (max-width:1220px) {
  .desktop-image-workspace { grid-template-columns: minmax(0,1.25fr) minmax(310px,.9fr); }
  .desktop-image-style-grid, .desktop-image-inspiration-grid { gap: 7px; }
  .desktop-image-style-grid img { height: 68px; }
  .desktop-product-input-grid { grid-template-columns: minmax(0,1.2fr) minmax(230px,.8fr); }
}
@media (max-width:980px) {
  .desktop-image-workspace { grid-template-columns: 1fr; }
  .desktop-image-result-panel { min-height: 320px; }
  .desktop-image-result-empty { min-height: 220px; }
  .desktop-image-inspiration { grid-template-columns: 1fr; }
  .desktop-image-inspiration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .desktop-image-inspiration-next { display: none; }
  .desktop-product-input-grid, .desktop-product-summary, .desktop-product-plan-summary { grid-template-columns: 1fr; }
  .desktop-product-module-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .desktop-product-choice-row { grid-template-columns: 1fr; }
}
@media (max-width:700px) {
  .desktop-image-page { padding: 18px 12px 40px; }
  .desktop-image-header { display: block; }
  .desktop-image-header h1 { font-size: 29px; }
  .image-charge-hint { margin-top: 18px; white-space: normal; }
  .desktop-image-mode-tabs { overflow-x: auto; }
  .desktop-image-mode-tabs button { min-width: 135px; }
  .desktop-image-heading-tip { display: none; }
  .desktop-image-reference-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .desktop-image-edit-grid, .desktop-image-style-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .desktop-image-form-footer { align-items: stretch; flex-direction: column; }
  .desktop-image-form-footer .primary-button { width: 100%; }
  .desktop-product-flow { overflow-x: auto; justify-content: flex-start; }
  .desktop-product-flow span { min-width: 85px; }
  .desktop-product-module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .desktop-product-pages article { grid-template-columns: 1fr; }
  .desktop-product-revision { grid-template-columns: 1fr; }
  .desktop-product-revision > div, .desktop-product-revision input { grid-column: auto; }
  .desktop-product-revision > button { min-height: 32px; }
  .desktop-product-pending-claims label { grid-template-columns: 18px minmax(0,1fr); }
  .desktop-product-pending-claims label span, .desktop-product-pending-claims label small { grid-column: 2; }
  .desktop-product-stage-actions { align-items: stretch; flex-direction: column; }
  .desktop-product-stage-actions .primary-button, .desktop-product-stage-actions .secondary-button { width: 100%; }
}
.motion-background-options { display:flex; flex-wrap:wrap; gap:16px; margin:16px 0; }
.motion-background-options p { width:100%; color:#7285a8; font-size:13px; }
.motion-demo { max-width:540px; margin:0 0 24px; }
.motion-demo-heading { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin-bottom:12px; }
.motion-demo-heading span,.motion-demo-footer { color:#7285a8; font-size:12px; }
.motion-demo-pair { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-radius:16px; background:#10131b; }
.motion-demo-pane { position:relative; height:300px; min-width:0; }
.motion-demo-pane video { width:100%; height:100%; display:block; object-fit:contain; }
.motion-demo-tag { position:absolute; z-index:1; top:10px; left:10px; padding:5px 10px; border-radius:8px; background:#111b; color:#fff; font-size:12px; }
.motion-demo-tag.result { background:#6051f5; }
.motion-demo-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; }
.motion-demo-target { display:flex; align-items:center; gap:8px; }
.motion-demo-steps { display:flex; flex-wrap:wrap; gap:12px 24px; padding:0; margin:0; list-style:none; }
.motion-demo-steps li { display:flex; flex-direction:column; gap:4px; }
.motion-demo-steps strong { color:#6051f5; font-size:12px; }
.motion-demo-target img { width:30px; height:44px; object-fit:contain; border-radius:4px; }
@media(max-width:600px) { .motion-demo-pane { height:240px; } }

/* Text/audio creation: reference layout, isolated from AI video editors. */
.creation-studio-shell .page { background:radial-gradient(ellipse at 85% 0%,#e9e9ff 0,transparent 40%),linear-gradient(120deg,#f7f8ff,#f3f5ff); }
.creation-studio-shell .page-heading { min-height:70px;margin-bottom:12px;align-items:center; }
.creation-studio-shell .page-heading h1 { font-size:32px;letter-spacing:-1px; }
.creation-studio-shell .page-heading .charge-hint { background:transparent;color:#8b80df; }
.creation-studio.desktop-creation-layout { grid-template-columns:minmax(0,1.92fr) minmax(0,1fr);gap:16px;align-items:stretch; }
.creation-studio .creation-form { padding:18px 20px;border:0;border-radius:16px;background:rgba(255,255,255,.95); }
.creation-studio .creation-form > h2 { display:none; }
.creation-studio .asset-picker-stack { gap:12px; }
.creation-studio .asset-picker-row-section { padding-bottom:12px;border-bottom:1px solid #edf0fa; }
.creation-studio .field-label-row { margin:0 0 10px;align-items:flex-start;gap:14px; }
.creation-studio .field-label-row label { display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;color:#11245a; }
.creation-studio .field-label-row label .mini-icon { width:28px;height:28px;padding:4px;border-radius:9px;background:#efecff;color:#7061ff;flex:none; }
.creation-studio .field-label-row small { display:block;margin-top:3px;color:#8a96b5;font-size:11px;line-height:1.45; }
.asset-selector-links { display:flex;gap:5px;align-items:center;flex-shrink:0;color:#8878ee;padding-top:3px; }
.asset-selector-links button,.studio-recent-heading button { padding:0;border:0;background:none;color:#8069f7;font-size:12px;cursor:pointer; }
.creation-studio .asset-choice-row { display:grid;grid-template-columns:repeat(6,minmax(0,112px));justify-content:start;gap:12px;overflow:visible; }
.creation-studio .asset-choice-row .asset-choice-card,.creation-studio .asset-choice-row .asset-choice-more { width:100%;height:auto;min-height:0;min-width:0;flex:initial;border-radius:9px;border:2px solid #e9edf8;background:#fbfcff;overflow:hidden;box-sizing:border-box; }
.creation-studio .asset-choice-row .asset-choice-card.selected { border:2px solid #8060ff;box-shadow:none; }
.creation-studio .asset-choice-row .asset-choice-card:not(.asset-choice-card-voice) { padding:0 0 42px; }
.creation-studio .asset-choice-row .asset-choice-preview { width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center center;display:block;border-radius:7px 7px 0 0;background:#eef1f8; }
.creation-studio .asset-choice-card::after { display:none; }
.audio-creation-studio .creation-form { background:transparent;box-shadow:none;padding:0!important;display:flex;flex-direction:column;gap:12px; }
.audio-creation-studio .asset-picker-stack,.audio-creation-studio .audio-drive-upload { background:white;border-radius:16px;padding:18px 20px!important; }
.audio-creation-studio .asset-picker-row-section { padding-bottom:0;border-bottom:0; }
.audio-creation-studio .form-footer { background:white;border-radius:16px;padding:14px 20px; }
.audio-creation-studio .studio-image-unavailable { margin:0 20px; }
.creation-studio .asset-choice-row .asset-choice-name { position:absolute;left:9px!important;right:8px;bottom:23px!important;top:auto!important;max-width:calc(100% - 17px);font-size:12px!important;color:#223565;text-align:left!important;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
.creation-studio .asset-choice-row .asset-choice-aspect { position:absolute;left:9px;right:8px;bottom:7px;color:#8b95ad;font-size:10px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left; }
.asset-kind-tag { position:absolute;z-index:2;left:8px;bottom:48px;border-radius:4px;padding:3px 5px;background:#6a6d7ccf;color:white;font-size:10px;line-height:1; }
.creation-studio .asset-choice-check { top:9px;right:9px;width:23px;height:23px;border:2px solid white;background:#7b61ff; }
.creation-studio .asset-choice-preview-button { bottom:47px;left:auto;right:7px;width:22px;height:22px;background:#fff9; }
.creation-studio .asset-choice-more { border:1px dashed #c9c2ff!important;background:linear-gradient(#fafbff,#f8f7ff)!important; }
.creation-studio .asset-choice-more-symbol { display:none; }
.creation-studio .asset-choice-plus { border:0;background:#efecff;color:#7158ff;width:40px;height:40px;flex:0 0 40px; }
.creation-studio .asset-choice-more strong { margin-top:8px;font-size:12px;color:#7661fc; }
.creation-studio .asset-choice-more small { font-size:10px;line-height:1.5;color:#98a0bb;white-space:normal; }
.creation-studio .voice-asset-choice-grid { grid-template-columns:repeat(6,minmax(0,112px));justify-content:start; }
.creation-studio .asset-choice-row.voice-asset-choice-grid .asset-choice-card,.creation-studio .asset-choice-row.voice-asset-choice-grid .asset-choice-more { width:100%;height:112px;min-height:112px; }
.creation-studio .asset-choice-row .asset-choice-waveform { top:20px;height:32px;left:18px;right:18px;gap:2px; }
.creation-studio .asset-choice-row .asset-choice-card-voice:nth-child(3n) .asset-choice-waveform i { background:#ec8bb8; }
.creation-studio .asset-choice-row .asset-choice-card-voice:nth-child(4n) .asset-choice-waveform i { background:#63c9a2; }
.creation-studio .asset-choice-row .asset-choice-card-voice .asset-choice-name { bottom:11px!important; }
.creation-studio .asset-choice-card-voice .asset-choice-preview-button { left:10px;right:auto;bottom:38px;width:25px;height:25px;border-radius:50%;color:#7861ff;background:#f0ecff; }
.creation-studio .asset-choice-row .asset-choice-duration { bottom:44px;right:9px;background:none;color:#8276e6;font-size:10px;padding:0; }
.creation-studio .field-label { margin-top:12px;color:#11245a;font-size:17px;font-weight:700; }
.creation-studio .field-label textarea { margin-top:8px;min-height:78px;resize:vertical;border-color:#e0e5f8;border-radius:12px;background:#fcfdff;padding:12px;font-size:13px;font-weight:400; }
.creation-studio .form-footer { margin-top:12px;padding-top:12px;border-top:1px solid #edf0fa; }
.creation-studio .form-footer .primary-button { border-radius:12px;background:linear-gradient(110deg,#ad85ff,#5d5afb);min-height:46px;padding:0 24px;box-shadow:0 5px 14px #7b65ff35; }
.creation-studio .audio-drive-upload { margin:12px 0 0;border:0;padding:0; }
.creation-studio .audio-drive-upload .field-label-row > span { color:#8e99b5;white-space:nowrap; }
.creation-studio .audio-source-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px; }
.creation-studio .audio-source-card { width:100%;height:auto;min-height:112px;padding:14px 12px;border:1px solid #e2e7fb;border-radius:16px;background:linear-gradient(#fff,#fdfdff);box-shadow:0 8px 20px #8a88d608; }
.creation-studio .audio-source-card img { width:36px;height:36px;object-fit:contain;margin:0 auto 12px; }
.creation-studio .audio-source-card strong { font-size:16px;color:#13224c; }
.creation-studio .audio-source-card small { margin-top:8px;font-size:12px;color:#939fb9; }
.creation-studio .audio-drive-selected { margin-top:16px;flex-wrap:wrap; }
.studio-capability-notice { color:#a76622;background:#fff6e6;padding:11px 14px;border-radius:9px;font-size:12px; }
.creation-studio .studio-result-panel { padding:24px;border:0;border-radius:16px;background:rgba(255,255,255,.96);min-width:0; }
.studio-result-panel .result-heading h2 { display:flex;align-items:center;gap:8px;font-size:20px; }
.studio-result-panel .result-heading .mini-icon { color:#8970ff;width:26px;height:26px; }
.studio-result-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:330px;padding:25px 0;color:#6f7faa; }
.studio-result-placeholder { display:grid;place-items:center;width:130px;height:100px;margin:0 auto 25px;border-radius:24px;color:#a997ff;background:radial-gradient(ellipse,#efedff,transparent 72%); }
.studio-result-placeholder .mini-icon { width:65px;height:65px; }
.studio-result-empty strong { font-size:16px; }
.studio-result-empty p,.studio-current-result p { font-size:12px;line-height:1.9;color:#929fbe; }
.studio-current-result { padding:25px 0;text-align:center;min-height:300px; }
.studio-current-result > video { width:100%;max-height:280px;border-radius:12px;background:#101322;margin-bottom:14px; }
.studio-current-result > strong { display:block;color:#263561;margin-bottom:18px; }
.studio-recent-heading { border-top:1px solid #edf0f8;padding-top:20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:15px; }
.studio-recent-heading h3 { margin:0;font-size:17px;color:#142755; }
.studio-recent-task { display:flex;width:100%;gap:12px;align-items:center;text-align:left;padding:12px 0;border:0;border-bottom:1px solid #eef1f9;background:white;cursor:pointer; }
.studio-recent-task > img,.studio-recent-task > video,.studio-task-icon { width:58px;height:58px;object-fit:cover;border-radius:8px;flex:none;background:#f4f2ff; }
.studio-task-icon { display:grid;place-items:center;color:#aa98fa; }
.studio-task-copy { flex:1;min-width:0; }
.studio-task-copy strong,.studio-task-copy small { display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
.studio-task-copy strong { font-size:12px;color:#243764; }
.studio-task-copy small { font-size:11px;color:#9aa6c2;margin-top:8px; }
.studio-no-recent { font-size:13px;color:#99a4bc;text-align:center;padding:25px 0; }
.studio-action-bar { position:relative;justify-content:flex-end;gap:10px;min-height:48px;box-sizing:border-box; }
.studio-current-points { margin-right:auto;white-space:nowrap; }
.studio-current-points strong { color:#5f55dc;font-size:14px; }
.studio-footer-metric { display:flex;flex-direction:column;justify-content:center;min-width:76px;padding:0 10px;border-left:1px solid #e8ebf5;line-height:1.25;white-space:nowrap; }
.studio-footer-metric small { color:#99a3ba;font-size:10px; }
.studio-footer-metric strong { margin-top:3px;color:#24345d;font-size:12px; }
.studio-voice-control { position:relative;z-index:62; }
.voice-options-trigger { position:relative;z-index:64;display:flex;min-height:38px;align-items:center;gap:6px;padding:0 11px;border:1px solid #dfe3f5;border-radius:9px;color:#35456f;background:#fff;cursor:pointer;font:inherit;font-size:12px;white-space:nowrap; }
.voice-options-trigger:hover,.voice-options-trigger[aria-expanded="true"] { border-color:#8b76f7;color:#6554e8;background:#f7f5ff; }
.voice-options-trigger .mini-icon { width:16px;height:16px;color:#7961f5; }
.voice-options-trigger span { color:#8b95ad;font-size:10px; }
.voice-options-dismiss { position:fixed;z-index:60;inset:0;width:100vw;height:100vh;padding:0;border:0;background:transparent;cursor:default; }
.voice-options-popover { position:absolute;z-index:63;right:0;bottom:calc(100% + 10px);width:min(420px,calc(100vw - 48px));box-sizing:border-box;padding:16px;border:1px solid #e2e5f4;border-radius:13px;background:#fff;box-shadow:0 18px 45px rgba(29,34,78,.18); }
.studio-capability-notice-inline { max-width:230px;padding:7px 10px;font-size:10px;line-height:1.35; }
.creation-asset-picker-modal { width:min(780px,calc(100vw - 28px));max-height:85vh;overflow:auto; }
.creation-picker-tabs { display:flex;gap:8px;margin:18px 0; }
.creation-picker-tabs button { flex:1;padding:12px;border-radius:9px;border:1px solid #e1e4f5;background:#fafaff;color:#8c96af; }
.creation-picker-tabs button.active { background:#f0ecff;border-color:#b8a8ff;color:#7458ed; }
.creation-asset-picker-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px; }
.creation-asset-picker-item > img,.creation-asset-picker-item > video { display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:#e8ebf4;border-radius:9px; }
.creation-asset-picker-item > audio { width:100%; }
.creation-asset-picker-item > small { display:block;color:#969fb6;font-size:11px;margin:5px 0; }
.creation-picker-file { position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:155px;border:1px dashed #bfb6f5;border-radius:12px;gap:10px;background:#faf9ff;color:#7863df; }
.creation-picker-file input { position:absolute;width:100%;height:100%;inset:0;opacity:0;cursor:pointer; }
.creation-picker-file small { color:#99a2b9; }
.creation-picker-upload-preview { display:block;max-width:100%;max-height:210px;object-fit:contain;margin:15px auto;border-radius:9px; }
.creation-picker-upload > label:not(.creation-picker-file) { display:block;margin:14px 0; }
.selected-asset-preview:is(img) { display:block;max-width:100%;max-height:65vh;object-fit:contain;margin:auto; }
.asset-library-preview.avatar { height:auto;aspect-ratio:9/16; }
.asset-library-preview.avatar > img,.asset-library-preview.avatar > video { display:block;width:100%;height:100%;object-fit:contain;background:#e8ebf4; }
@media(max-width:1200px) {
 .creation-studio .asset-choice-row { grid-template-columns:repeat(3,minmax(0,112px)); }
 .creation-studio .voice-asset-choice-grid { grid-template-columns:repeat(3,minmax(0,112px)); }
 .asset-selector-links { font-size:10px; }
}
@media(max-width:900px) {
 .creation-studio.desktop-creation-layout { grid-template-columns:1fr; }
 .creation-studio .creation-form,.creation-studio .studio-result-panel { padding:20px; }
}
@media(max-width:600px) {
 .creation-studio-shell .page-heading h1 { font-size:29px; }
 .creation-studio .creation-form,.creation-studio .studio-result-panel { padding:16px; }
 .creation-studio .field-label-row { flex-wrap:wrap; }
 .creation-studio .field-label-row label { font-size:17px; }
 .creation-studio .asset-choice-row,.creation-studio .voice-asset-choice-grid { grid-template-columns:repeat(2,minmax(0,112px));gap:10px; }
 .creation-studio .audio-source-options { grid-template-columns:1fr; }
 .creation-studio .audio-source-card { min-height:125px; }
 .creation-asset-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .creation-studio .audio-drive-selected { display:flex; }
 .creation-studio .audio-drive-selected audio { width:100%; }
 .creation-studio .form-footer { flex-wrap:wrap;gap:12px; }
 .studio-current-points { width:100%;margin-right:0; }
 .studio-capability-notice-inline { order:2;max-width:none;width:100%;box-sizing:border-box; }
 .studio-voice-control { margin-right:auto; }
 .studio-footer-metric { min-width:64px;padding:0 7px; }
 .voice-options-popover { right:auto;left:0;width:min(360px,calc(100vw - 32px)); }
 .creation-studio .form-footer .primary-button { flex:1 1 150px; }
}