:root {
  --bg: #071019;
  --panel: #0d1824;
  --panel-2: #122233;
  --line: #26384a;
  --text: #f4f7fb;
  --muted: #91a1b2;
  --cyan: #43d9d0;
  --blue: #5a8dff;
  --lime: #9ef36f;
  --orange: #ffb86a;
  --danger: #ff7d87;
  --shadow: 0 20px 70px rgba(0, 0, 0, 0.28);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.app-shell { min-height: 100vh; background: radial-gradient(circle at 85% 8%, rgba(61, 173, 170, .13), transparent 28rem), var(--bg); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 58px; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.18); background: rgba(5, 10, 15, .9); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.brand-mark { width: 26px; height: 26px; border: 2px solid var(--cyan); border-radius: 50%; position: relative; }
.brand-mark::after { content: ""; position: absolute; width: 8px; height: 8px; top: 7px; left: 7px; background: var(--lime); border-radius: 50%; box-shadow: 8px -6px 0 var(--blue); }
.nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; }
.nav button, .ghost-button { border: 0; background: transparent; color: #d0d5dc; padding: 9px 12px; border-radius: 0; white-space: nowrap; font-size: 14px; }
.nav button:hover, .nav button.active { color: #63ec7d; background: transparent; box-shadow: inset 0 -3px 0 #63ec7d; }
.profile-button { border: 1px solid rgba(255,255,255,.2); background: rgba(10,17,25,.7); color: var(--text); border-radius: 0; padding: 9px 14px; white-space: nowrap; }

.hero { min-height: 388px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: center; gap: 22px; padding: 56px max(32px, 7vw) 44px; overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,16,25,.98) 0%, rgba(7,16,25,.78) 47%, rgba(7,16,25,.22) 100%), linear-gradient(135deg, #071019, #162c3e 62%, #101a27); z-index: -2; }
.hero::after { content: ""; position: absolute; width: 64%; height: 140%; right: -16%; top: -20%; transform: rotate(-15deg); background: linear-gradient(125deg, transparent 0 30%, rgba(67,217,208,.3) 42%, rgba(90,141,255,.82) 50%, rgba(158,243,111,.82) 55%, rgba(190,104,255,.28) 62%, transparent 76%); filter: blur(18px); opacity: .85; z-index: -1; }
.eyebrow { color: var(--cyan); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { max-width: 850px; margin: 12px 0; font-size: clamp(42px, 5vw, 72px); line-height: 1.06; letter-spacing: -.04em; }
.hero h1 span { display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; border: 6px solid #63ec7d; border-radius: 50%; color: #fff; font-size: .72em; line-height: 1; vertical-align: .06em; }
.hero p { max-width: 620px; margin: 0; color: #f0f3f5; font-size: 21px; font-weight: 700; line-height: 1.35; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.primary-button, .secondary-button { border: 0; border-radius: 6px; padding: 13px 18px; font-weight: 700; }
.primary-button { background: var(--lime); color: #09111c; }
.secondary-button { background: transparent; border: 1px solid var(--line); color: var(--text); }
.hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 34px; max-width: 560px; }
.metric { padding: 14px 0; border-top: 1px solid rgba(145, 161, 178, .3); }
.metric strong { display: block; font-size: 24px; }
.metric span { color: var(--muted); font-size: 12px; }
.hero-panel { position: relative; min-height: 264px; border: 0; border-radius: 0; padding: 22px; background: rgba(11, 25, 39, .22); box-shadow: none; }
.orbit { position: absolute; inset: 12% 14%; border: 1px solid rgba(67, 217, 208, .26); border-radius: 50%; transform: rotate(-22deg) scaleY(.45); }
.orbit::before, .orbit::after { content: ""; position: absolute; border: 1px solid rgba(158, 243, 111, .28); border-radius: 50%; inset: 12%; }
.orbit::after { inset: 28%; border-color: rgba(90, 141, 255, .34); }
.hero-panel-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; height: 100%; justify-content: space-between; }
.hero-panel-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.signal { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.signal i { display: block; width: 12%; min-height: 20%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--lime), var(--cyan)); animation: pulse 1.8s ease-in-out infinite alternate; }
.signal i:nth-child(2) { height: 62%; animation-delay: .2s; }.signal i:nth-child(3) { height: 44%; animation-delay: .4s; }.signal i:nth-child(4) { height: 86%; animation-delay: .6s; }.signal i:nth-child(5) { height: 56%; animation-delay: .8s; }.signal i:nth-child(6) { height: 72%; animation-delay: 1s; }.signal i:nth-child(7) { height: 36%; animation-delay: 1.2s; }
@keyframes pulse { to { opacity: .52; transform: translateY(-6px); } }
.section { padding: 76px max(24px, 7vw); }
.home-feature { background: linear-gradient(120deg, #edf4ff 0%, #e5faff 100%); color: #071a42; }
.home-feature .eyebrow { color: #276df1; }.home-feature .section-header p { color: #5b6b82; }.home-feature .feature-card { min-height: 270px; position: relative; overflow: hidden; border: 1px solid #d4e1f1; border-radius: 20px; padding: 24px; background: rgba(255,255,255,.75); box-shadow: 0 18px 38px rgba(61, 105, 159, .12); }.home-feature .feature-card h3 { margin-top: 18px; font-size: 26px; }.home-feature .feature-card p { color: #60718a; }.home-feature .feature-index { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: #2e77ef; color: white; font-size: 15px; }.feature-thumb { position: absolute; right: 24px; bottom: 24px; width: 42%; height: 58%; border-radius: 4px; background: #7588a6; display: grid; place-items: center; }.feature-thumb span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid white; border-radius: 50%; color: white; background: rgba(0,0,0,.18); }.thumb-one { background: linear-gradient(135deg, #d6a978, #6a91b5 55%, #e5c5a5); }.thumb-two { background: linear-gradient(135deg, #4c5b75, #c58c72 55%, #283a61); }.thumb-three { background: linear-gradient(135deg, #a8c0d1, #e4a36c 55%, #477b75); }
.section-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.section h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.035em; }
.section-header p { max-width: 520px; color: var(--muted); line-height: 1.6; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card { min-height: 190px; border: 1px solid var(--line); border-radius: 8px; padding: 22px; background: linear-gradient(145deg, rgba(18, 34, 51, .96), rgba(10, 22, 34, .85)); }
.feature-card:nth-child(2) { background: linear-gradient(145deg, rgba(26, 43, 58, .96), rgba(11, 27, 42, .85)); }
.feature-card:nth-child(3) { background: linear-gradient(145deg, rgba(22, 47, 48, .96), rgba(10, 25, 32, .85)); }
.feature-index { color: var(--cyan); font-size: 13px; font-weight: 800; }
.feature-card h3 { margin: 28px 0 8px; font-size: 24px; }.feature-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.marquee { border-block: 1px solid var(--line); padding: 16px 0; overflow: hidden; color: var(--muted); white-space: nowrap; }
.marquee span { display: inline-block; padding-right: 50px; animation: slide 24s linear infinite; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.workspace { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: calc(100vh - 68px); }
.sidebar { border-right: 1px solid var(--line); padding: 24px 16px; background: #091521; }
.sidebar h3 { margin: 0 10px 20px; font-size: 15px; }.sidebar small { color: var(--muted); }
.tool-list { display: grid; gap: 5px; max-height: calc(100vh - 170px); overflow: auto; }
.tool-item { display: flex; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 6px; padding: 11px 10px; background: transparent; color: #b3c0cd; text-align: left; }
.tool-item:hover, .tool-item.active { border-color: rgba(67,217,208,.35); background: rgba(67,217,208,.1); color: var(--text); }.tool-num { width: 24px; color: var(--cyan); font-size: 11px; }
.workspace-main { padding: 26px; min-width: 0; }.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }.workspace-toolbar h1 { margin: 0; font-size: clamp(26px, 3vw, 42px); }
.balance { display: flex; gap: 8px; flex-wrap: wrap; }.balance span { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; color: var(--muted); font-size: 13px; }.balance b { color: var(--text); }
.work-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 18px; }.panel { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }.panel-header { display: flex; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }.panel-header h2 { margin: 0; font-size: 18px; }.panel-body { padding: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.field { display: grid; gap: 8px; }.field.full { grid-column: 1 / -1; }.field label { color: var(--muted); font-size: 12px; }.field input, .field textarea, .field select, .search-input { width: 100%; border: 1px solid var(--line); border-radius: 5px; background: #08131e; color: var(--text); padding: 12px; outline: none; }.field textarea { min-height: 180px; resize: vertical; }.field input:focus, .field textarea:focus, .field select:focus, .search-input:focus { border-color: var(--cyan); }.action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.history { display: grid; gap: 10px; max-height: 490px; overflow: auto; }.history-item { border: 1px solid var(--line); border-radius: 6px; padding: 13px; background: #0a1520; }.history-item strong { display: block; margin-bottom: 6px; }.history-item p { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }.history-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.status { color: var(--lime); }

.library-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }.chips { display: flex; flex-wrap: wrap; gap: 7px; }.chip { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: transparent; color: var(--muted); }.chip.active, .chip:hover { border-color: var(--cyan); color: var(--text); background: rgba(67,217,208,.1); }.prompt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.prompt-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }.prompt-art { height: 130px; background: linear-gradient(135deg, #1c3760, #13a5a1 55%, #d7f067); position: relative; }.prompt-art::after { content: "AI"; position: absolute; right: 16px; bottom: 10px; font-size: 54px; font-weight: 900; color: rgba(255,255,255,.25); }.prompt-copy { padding: 15px; }.prompt-copy p { margin: 0 0 12px; color: #c6d0da; line-height: 1.55; font-size: 13px; }.prompt-actions { display: flex; align-items: center; justify-content: space-between; }.like { color: var(--orange); font-size: 12px; }.small-button { border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--text); padding: 7px 10px; }

.canvas-shell { min-height: calc(100vh - 68px); padding: 24px; background: #0a111a; }.canvas-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }.canvas-top h1 { margin: 0; }.canvas-stage { position: relative; min-height: 640px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background-color: #0c1722; background-image: linear-gradient(rgba(145,161,178,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(145,161,178,.08) 1px, transparent 1px); background-size: 32px 32px; }.canvas-toolbar { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; gap: 6px; padding: 7px; border: 1px solid var(--line); border-radius: 6px; background: rgba(7,16,25,.9); }.canvas-node { position: absolute; width: 220px; border: 1px solid rgba(67,217,208,.35); border-radius: 6px; background: #0d1c2b; box-shadow: 0 14px 28px rgba(0,0,0,.3); }.canvas-node header { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--cyan); font-size: 12px; }.canvas-node p { margin: 0; padding: 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }.canvas-node button { margin: 0 12px 12px; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.price-card { border: 1px solid var(--line); border-radius: 8px; padding: 22px; background: var(--panel); }.price-card.featured { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(67,217,208,.14); }.price-card h3 { margin: 0; }.price { margin: 20px 0 6px; font-size: 34px; font-weight: 800; }.price-card p, .price-card li { color: var(--muted); line-height: 1.6; font-size: 13px; }.price-card ul { padding-left: 18px; }
.footer { border-top: 1px solid var(--line); padding: 28px max(24px, 7vw); color: var(--muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; z-index: 40; padding: 20px; background: rgba(0,0,0,.66); }.modal { width: min(520px, 100%); border: 1px solid var(--line); border-radius: 8px; background: #0d1926; box-shadow: var(--shadow); }.modal header, .modal footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }.modal footer { border-bottom: 0; border-top: 1px solid var(--line); justify-content: flex-end; gap: 8px; }.modal main { padding: 20px; }.icon-button { border: 0; background: transparent; color: var(--muted); font-size: 20px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 60; transform: translateY(20px); opacity: 0; pointer-events: none; border: 1px solid rgba(158,243,111,.45); border-radius: 6px; background: #152b22; color: #e8ffe0; padding: 12px 16px; transition: .2s ease; }.toast.show { transform: translateY(0); opacity: 1; }
.empty { padding: 30px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 6px; }

@media (max-width: 980px) { .topbar { padding: 0 18px; }.nav { display: none; }.hero { grid-template-columns: 1fr; padding-inline: 24px; }.hero-panel { min-height: 230px; }.feature-grid, .prompt-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }.workspace { grid-template-columns: 1fr; }.sidebar { border-right: 0; border-bottom: 1px solid var(--line); }.tool-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; }.work-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .topbar { height: 60px; }.profile-button { padding: 8px 10px; }.hero { min-height: auto; padding-top: 54px; }.hero h1 { font-size: 48px; }.hero-metrics { grid-template-columns: 1fr; }.section { padding-inline: 18px; }.feature-grid, .prompt-grid, .pricing-grid, .form-grid { grid-template-columns: 1fr; }.workspace-main, .canvas-shell { padding: 16px; }.workspace-toolbar, .canvas-top, .section-header { align-items: flex-start; flex-direction: column; }.tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tool-item { font-size: 12px; }.canvas-stage { min-height: 600px; }.canvas-node { width: 190px; }.footer { padding-inline: 18px; } }

/* AI workbench: the reference page is arranged as a reward deck above a two-column creation console. */
.ai-page { min-height: calc(100vh - 58px); padding: 14px 28px 42px; background: radial-gradient(circle at 68% 0%, rgba(56, 78, 255, .14), transparent 30rem), #070810; color: #f6f6ff; }
.ai-overview { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(400px, .9fr); grid-template-rows: auto auto; gap: 0 18px; border: 1px solid rgba(146, 135, 255, .22); border-radius: 26px; padding: 28px 34px 26px; overflow: hidden; background-color: #0d1021; background-image: linear-gradient(rgba(124, 109, 213, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 109, 213, .075) 1px, transparent 1px); background-size: 34px 34px; box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.ai-intro { grid-row: 1 / 3; padding-right: 22px; align-self: center; }.ai-kicker, .agent-badge, .reward-label { display: inline-flex; align-items: center; border: 1px solid rgba(148, 121, 255, .35); border-radius: 999px; padding: 7px 12px; color: #c8b6ff; background: rgba(114, 82, 211, .12); font-size: 12px; }.ai-intro h1 { max-width: 700px; margin: 18px 0 12px; font-size: clamp(30px, 4vw, 50px); line-height: 1.08; letter-spacing: -.045em; }.ai-intro p { max-width: 750px; margin: 0; color: #9c9fb6; font-size: 14px; line-height: 1.8; }.theme-switch { display: flex; align-items: center; gap: 8px; margin-top: 24px; color: #9c9fb6; font-size: 13px; }.theme-switch button { border: 1px solid #282b42; border-radius: 7px; padding: 8px 15px; background: #11152a; color: #a8abc0; }.theme-switch button.active { border-color: #6d5df4; color: #fff; background: #5141d9; box-shadow: 0 0 20px rgba(99,79,242,.28); }.ai-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }.mentor-button, .diamond-button { border: 0; border-radius: 10px; padding: 12px 17px; color: #fff; font-weight: 800; }.mentor-button { background: linear-gradient(100deg, #2aa6e9, #4a56ed); box-shadow: 0 8px 24px rgba(42, 133, 235, .22); }.diamond-button { background: linear-gradient(100deg, #e07a22, #e02b32); box-shadow: 0 8px 24px rgba(222, 68, 31, .22); }.reward-card { border: 1px solid rgba(133, 116, 255, .24); border-radius: 18px; padding: 18px; background: rgba(14, 15, 35, .88); }.reward-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: flex-start; } .reward-balances { display: flex; align-items: stretch; gap: 12px; margin-left: auto; max-width: 100%; }.reward-heading h3 { margin: 10px 0 0; font-size: 17px; }.total-points, .total-diamonds { min-width: 82px; border: 1px solid rgba(121, 96, 228, .28); border-radius: 14px; padding: 10px 12px; text-align: right; background: rgba(91, 62, 191, .13); }.total-points small, .total-diamonds small { display: block; color: #a7a7c3; font-size: 10px; }.total-points strong, .total-diamonds strong { display: block; margin-top: 4px; color: #b29bff; font-size: 22px; }.reward-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }.reward-day { min-width: 0; border: 1px solid #242743; border-radius: 10px; padding: 9px 3px; text-align: center; background: #12152b; }.reward-day.today { border-color: #6852ff; background: #27205b; }.reward-day span, .reward-day small { display: block; color: #9497b3; font-size: 10px; white-space: nowrap; }.reward-day strong { display: block; margin: 7px 0 3px; color: #efefff; font-size: 15px; }.claim-button { width: 100%; margin-top: 12px; border: 1px solid rgba(246, 192, 67, .45); border-radius: 999px; padding: 9px 12px; background: rgba(164, 107, 19, .12); color: #f6c85c; }.reward-note { display: block; margin-top: 7px; color: #676a89; text-align: center; font-size: 10px; }.invite-card { grid-column: 2; width: 100%; margin-top: 12px; border: 1px solid rgba(56, 177, 220, .35); border-radius: 14px; padding: 14px 17px; background: rgba(17, 112, 152, .2); color: #a4d8e8; line-height: 1.65; text-align: left; }
.ai-workspace { display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: 22px; margin-top: 24px; align-items: start; }.engine-sidebar { border: 1px solid rgba(122, 110, 230, .19); border-radius: 23px; padding: 16px; background: #090a18; box-shadow: 0 20px 60px rgba(0,0,0,.2); }.engine-brand { padding: 6px 8px 18px; border-bottom: 1px solid #1a1c30; }.engine-brand span { display: block; color: #a89cff; font-size: 12px; font-weight: 700; }.engine-brand strong { display: block; margin-top: 6px; font-size: 19px; }.engine-group { padding: 18px 0 2px; }.engine-group + .engine-group { border-top: 1px solid #1c1d32; }.engine-group-head span { display: block; color: #888aab; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }.engine-group-head strong { display: block; margin-top: 6px; font-size: 15px; }.engine-group-head em { display: block; margin: 8px 0 13px; color: #6c6e88; font-size: 11px; font-style: normal; line-height: 1.55; }.engine-sidebar .tool-list { display: grid; gap: 7px; max-height: none; overflow: visible; }.engine-sidebar .tool-item { min-height: 44px; border: 1px solid #1e2037; border-radius: 11px; padding: 10px; background: #0f1124; color: #b6b7cc; }.engine-sidebar .tool-item:hover, .engine-sidebar .tool-item.active { border-color: #5547eb; background: linear-gradient(100deg, rgba(78, 62, 196, .42), rgba(23, 31, 78, .65)); color: #fff; box-shadow: 0 0 18px rgba(77, 61, 202, .16); }.engine-sidebar .tool-item strong { font-size: 12px; line-height: 1.25; }.engine-sidebar .tool-num { flex: 0 0 24px; color: #8274ff; font-size: 10px; }.agent-panel { min-width: 0; border: 1px solid rgba(122, 110, 230, .17); border-radius: 23px; padding: 24px; background: #090a18; box-shadow: 0 20px 60px rgba(0,0,0,.2); }.agent-panel-top { display: flex; justify-content: space-between; gap: 22px; padding: 10px 0 20px; }.agent-panel-top h2 { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; }.agent-panel-top p { max-width: 680px; margin: 0; color: #8589a5; line-height: 1.7; }.prompt-link { border: 0; border-radius: 999px; padding: 8px 13px; background: #179eb2; color: #e8ffff; font-size: 12px; }.cost-box { flex: 0 0 174px; align-self: flex-start; border: 1px solid rgba(130, 101, 255, .32); border-radius: 16px; padding: 14px; background: rgba(67, 46, 145, .17); text-align: center; }.cost-box small { color: #8586a1; }.cost-box strong { display: block; margin: 9px 0 12px; color: #d3c6ff; font-size: 12px; }.cost-box button { border: 0; border-radius: 999px; padding: 7px 22px; background: #2b92dc; color: #fff; font-weight: 700; }.record-note { border: 1px solid #242640; border-radius: 13px; padding: 13px 15px; color: #777b9a; font-size: 12px; line-height: 1.6; }.record-note strong { color: #babada; }.record-note button { border: 0; background: transparent; color: #a995ff; }.agent-card { margin-top: 15px; border: 1px solid #242544; border-radius: 18px; padding: 22px; background: linear-gradient(145deg, #111331, #0c0d20); }.agent-card h3 { margin: 0; color: #f3f3ff; font-size: 19px; }.agent-card h3 small { margin-left: 8px; color: #878aa7; font-weight: 400; font-size: 11px; }.agent-help { margin: 10px 0 15px; color: #888ba6; font-size: 12px; line-height: 1.65; }.invite-inline { width: 100%; border: 1px solid rgba(63, 154, 230, .28); border-radius: 11px; padding: 11px 14px; background: rgba(22, 76, 126, .2); color: #88c2e3; text-align: left; font-size: 11px; }.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }.ai-page .field label { color: #a6a8c3; }.ai-page .field label small { color: #656984; font-weight: 400; }.ai-page .field input, .ai-page .field textarea, .ai-page .field select, .ai-page .search-input { border-color: #292c4b; border-radius: 9px; background: #0b0e21; color: #f3f3ff; }.ai-page .field select { min-height: 42px; }.duration-field { grid-column: span 2; }.range-row { display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 12px; }.range-row strong { color: #b6a8ff; font-size: 19px; }.range-row input { accent-color: #6c58f4; }.hint-line { margin-top: 14px; color: #8589a8; font-size: 11px; }.hint-line strong { color: #e8c26a; }.upload-zone { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px 14px; margin-top: 18px; border: 1px dashed #3c3d62; border-radius: 13px; padding: 16px; background: rgba(16, 18, 45, .7); }.upload-zone strong, .upload-zone small { display: block; }.upload-zone small { margin-top: 6px; color: #737795; font-size: 11px; line-height: 1.5; }.upload-button { border: 1px solid #4b43a4; border-radius: 8px; padding: 10px 15px; background: #221c5b; color: #d8d2ff; font-size: 12px; cursor: pointer; }.upload-button input { display: none; }.upload-zone > span { grid-column: 1 / -1; color: #6e7190; font-size: 11px; }.agent-prompt { display: block; width: 100%; min-height: 150px; margin-top: 18px; border: 1px solid #30335a; border-radius: 13px; padding: 15px; background: #080b1a; color: #f5f5ff; resize: vertical; outline: none; line-height: 1.7; }.agent-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 14px; }.generate-button, .upscale-button, .reference-button, .clear-button { border: 0; border-radius: 9px; padding: 11px 14px; font-weight: 700; }.generate-button { background: linear-gradient(100deg, #594af1, #3195ff); color: #fff; }.upscale-button { background: linear-gradient(100deg, #ed782d, #e83b2f); color: #fff; }.reference-button, .clear-button { border: 1px solid #34375b; background: #101329; color: #b5b7d1; }.cost-inline { margin-left: auto; color: #c6a3ff; font-size: 11px; }.model-summary { margin-top: 12px; color: #737694; font-size: 11px; }.history-panel { margin-top: 18px; border: 1px solid #242544; border-radius: 16px; padding: 18px; background: #0d0e21; }.history-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.history-heading strong, .history-heading small { display: block; }.history-heading small { margin-top: 6px; color: #707491; font-size: 11px; }.history-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }.history-tools input, .history-tools select { min-height: 36px; border: 1px solid #292c4b; border-radius: 8px; padding: 8px 10px; background: #0a0d1b; color: #e5e5f5; }.refresh-button { border: 1px solid #3b3d61; border-radius: 8px; padding: 8px 11px; background: #151833; color: #c1c3dd; }.history-list { display: grid; gap: 10px; margin-top: 14px; }.result-card { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid #242644; border-radius: 12px; padding: 11px; background: #11132a; }.result-thumb { display: grid; place-items: center; min-height: 76px; border-radius: 9px; background: linear-gradient(145deg, #252b68, #3c8dc9 52%, #9a54db); }.result-thumb span { color: rgba(255,255,255,.72); font-size: 28px; font-weight: 900; }.result-details { min-width: 0; }.result-details h4 { margin: 0; font-size: 14px; }.result-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; color: #8e91ad; font-size: 10px; }.result-details p { display: -webkit-box; overflow: hidden; margin: 7px 0; color: #767a98; font-size: 11px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.result-details time { color: #656983; font-size: 10px; }.result-actions { display: grid; gap: 7px; }.delete-button { border: 0; background: transparent; color: #db6e7d; font-size: 11px; }
.ai-page.bluewhite { color: #132044; background: #edf4ff; }.ai-page.bluewhite .ai-overview, .ai-page.bluewhite .engine-sidebar, .ai-page.bluewhite .agent-panel { background-color: #f8fbff; }.ai-page.bluewhite .ai-intro p, .ai-page.bluewhite .agent-panel-top p, .ai-page.bluewhite .agent-help, .ai-page.bluewhite .record-note { color: #61708c; }.ai-page.bluewhite .engine-sidebar, .ai-page.bluewhite .agent-panel, .ai-page.bluewhite .ai-overview, .ai-page.bluewhite .agent-card, .ai-page.bluewhite .history-panel { border-color: #c9d9ef; }.ai-page.bluewhite .engine-sidebar .tool-item, .ai-page.bluewhite .agent-card, .ai-page.bluewhite .history-panel { background: #eef5ff; }.ai-page.bluewhite .agent-panel-top h2, .ai-page.bluewhite .agent-card h3, .ai-page.bluewhite .engine-brand strong { color: #17254c; }
.ai-page.bluewhite .cost-box small { color: #53627f; font-weight: 700; }
.ai-page.bluewhite .cost-box strong { color: #2c4b87; }
@media (max-width: 1080px) { .ai-overview { grid-template-columns: 1fr; grid-template-rows: auto; }.ai-intro { grid-row: auto; padding: 0 0 24px; }.invite-card { grid-column: auto; }.ai-workspace { grid-template-columns: 1fr; }.engine-sidebar .tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.engine-group-head em { max-width: 700px; } }
@media (max-width: 680px) { .ai-page { padding: 10px 14px 28px; }.ai-overview, .agent-panel { padding: 18px; border-radius: 18px; }.ai-intro h1 { font-size: 32px; }.reward-days { gap: 3px; }.reward-day { padding-inline: 1px; }.reward-day span, .reward-day small { font-size: 8px; }.reward-day strong { font-size: 13px; }.ai-cta-row { display: grid; }.mentor-button, .diamond-button { width: 100%; }.agent-panel-top { display: grid; }.cost-box { width: 100%; }.agent-panel-top h2 { align-items: flex-start; flex-direction: column; }.agent-card { padding: 16px; }.agent-card h3 { line-height: 1.5; }.agent-card h3 small { display: block; margin: 4px 0 0; }.control-grid { grid-template-columns: 1fr; }.duration-field { grid-column: auto; }.upload-zone { grid-template-columns: 1fr; }.upload-zone > span { grid-column: auto; }.agent-actions { align-items: stretch; flex-direction: column; }.cost-inline { margin-left: 0; }.history-heading { align-items: stretch; flex-direction: column; }.history-tools { display: grid; grid-template-columns: 1fr 1fr; }.history-tools input { grid-column: 1 / -1; }.result-card { grid-template-columns: 80px minmax(0, 1fr); }.result-actions { grid-column: 2; grid-template-columns: 1fr 1fr; }.result-thumb { min-height: 58px; } }

.ai-intro h1 { font-size: clamp(30px, 3.3vw, 44px); letter-spacing: 0; }
.prompts-page { min-height: calc(100vh - 58px); padding: 44px max(24px, 8vw) 70px; background: #f7f9fd; color: #17264c; }.prompts-heading { max-width: 800px; margin-bottom: 26px; }.prompts-heading > span { color: #426fe6; font-size: 14px; }.prompts-heading h1 { margin: 12px 0 10px; font-size: clamp(34px, 5vw, 58px); letter-spacing: 0; }.prompts-heading p { margin: 0; color: #71809b; line-height: 1.7; }.prompt-search-wrap { max-width: 720px; }.prompt-search { width: 100%; border: 1px solid #dce4f2; border-radius: 12px; padding: 16px 18px; background: #fff; color: #17264c; outline: none; box-shadow: 0 10px 25px rgba(57,92,151,.07); }.prompt-search:focus { border-color: #477af1; }.prompt-categories, .prompt-sort { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }.prompt-categories > span, .prompt-sort > span { margin-right: 7px; color: #8190a8; font-size: 12px; }.prompt-category, .sort-tab { border: 1px solid #dce4f2; border-radius: 999px; padding: 8px 13px; background: #fff; color: #657593; font-size: 12px; }.prompt-category.active, .prompt-category:hover, .sort-tab.active, .sort-tab:hover { border-color: #4575e7; background: #eaf1ff; color: #315fc7; }.prompt-gallery { columns: 3 270px; column-gap: 18px; margin-top: 26px; }.prompt-figure { display: inline-block; width: 100%; margin: 0 0 18px; overflow: hidden; border: 1px solid #e0e7f2; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(57,92,151,.08); break-inside: avoid; }.prompt-image { display: grid; place-items: end; min-height: 220px; padding: 14px; background: linear-gradient(145deg, #1d285d, #4f8ed2 52%, #d4b574); }.prompt-image span { color: rgba(255,255,255,.42); font-size: 60px; font-weight: 900; }.prompt-image-1 { min-height: 280px; background: linear-gradient(150deg, #081c42, #1ba1ab 52%, #5f79d5); }.prompt-image-2 { min-height: 190px; background: linear-gradient(145deg, #c1a67c, #5f7399 60%, #e3cfc0); }.prompt-image-3 { min-height: 250px; background: linear-gradient(145deg, #d4f1e9, #7c61cb 54%, #e45c82); }.prompt-image-4 { min-height: 210px; background: linear-gradient(145deg, #101626, #8e3a72 55%, #e0a868); }.prompt-image-5 { min-height: 300px; background: linear-gradient(145deg, #e5b38c, #5d8bb8 54%, #f4e5c7); }.prompt-figure figcaption { padding: 14px; }.figure-meta { display: flex; align-items: center; justify-content: space-between; color: #f18b47; font-size: 12px; }.favorite-button { border: 0; background: transparent; color: #71809d; font-size: 19px; }.prompt-figure p { display: -webkit-box; overflow: hidden; margin: 10px 0 13px; color: #64738e; font-size: 12px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }.copy-prompt { width: 100%; border: 1px solid #cbd9f1; border-radius: 8px; padding: 9px; background: #f3f7ff; color: #3767d1; font-size: 12px; }.prompts-page + .footer { background: #f7f9fd; color: #71809b; border-color: #e0e7f2; }
.canvas-page { min-height: calc(100vh - 58px); padding: 28px max(24px, 6vw) 70px; background: #f7f9fd; color: #17264c; }.canvas-benefits { display: grid; grid-template-columns: 1.1fr auto 1fr; align-items: center; gap: 20px; border: 1px solid #dfe7f3; border-radius: 18px; padding: 20px 24px; background: #fff; box-shadow: 0 10px 30px rgba(57,92,151,.07); }.canvas-benefits span { display: block; color: #4775df; font-size: 12px; }.canvas-benefits strong { display: block; margin-top: 5px; font-size: 17px; }.canvas-benefits p { margin: 7px 0 0; color: #7b89a1; font-size: 12px; }.benefit-main { border: 0; border-radius: 9px; padding: 11px 18px; background: #4478ed; color: #fff; font-weight: 700; }.benefit-side { border: 1px solid #cce0f1; border-radius: 10px; padding: 12px 14px; background: #edf8ff; color: #4f7891; text-align: left; font-size: 11px; line-height: 1.55; }.canvas-page .canvas-top { margin-top: 34px; }.canvas-page .canvas-top h1 { margin-top: 8px; font-size: 42px; letter-spacing: 0; }.canvas-page .canvas-top p { margin: 7px 0 0; color: #8190a8; }.canvas-page .primary-button { background: #4276ec; color: #fff; }.canvas-page .secondary-button { border-color: #d5deed; color: #4267b6; background: #fff; }.canvas-library { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }.canvas-library-card { position: relative; display: grid; width: 240px; gap: 7px; border: 1px solid #dfe7f3; border-radius: 14px; padding: 14px; background: #fff; box-shadow: 0 10px 26px rgba(57,92,151,.07); cursor: pointer; }.canvas-card-icon { display: grid; place-items: center; height: 96px; border-radius: 10px; background: linear-gradient(145deg, #dce8ff, #a4bff5); color: #4276ec; font-size: 22px; font-weight: 900; }.canvas-library-card strong { color: #27375e; }.canvas-library-card time { color: #8794aa; font-size: 11px; }.canvas-more { position: absolute; top: 111px; right: 12px; border: 0; background: transparent; color: #8290a8; }.canvas-page .canvas-stage { min-height: 500px; border-color: #d8e2f0; background-color: #fbfdff; background-image: linear-gradient(rgba(73,117,188,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(73,117,188,.1) 1px, transparent 1px); }.canvas-page .canvas-toolbar { border-color: #d8e2f0; background: rgba(255,255,255,.95); }.canvas-page .canvas-node { border-color: #c6d8f2; background: #fff; }.canvas-page .canvas-node header { border-color: #dae4f1; color: #4775df; }.canvas-page .canvas-node p { color: #71809b; }
.recharge-page { min-height: calc(100vh - 58px); padding: 44px max(24px, 8vw) 70px; background: #f7f9fd; color: #17264c; }.recharge-heading > span { color: #476fe1; font-size: 13px; letter-spacing: .14em; }.recharge-heading h1 { margin: 12px 0 8px; font-size: clamp(34px, 5vw, 58px); letter-spacing: 0; }.recharge-heading p { margin: 0; color: #73809a; }.recharge-balances { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }.recharge-balances > div { min-width: 160px; border: 1px solid #dfe7f3; border-radius: 14px; padding: 16px; background: #fff; }.recharge-balances span { display: block; color: #7b8ba5; font-size: 12px; }.recharge-balances strong { display: block; margin-top: 6px; color: #2857c8; font-size: 25px; }.recharge-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 25px 0 18px; }.recharge-actions button { border: 1px solid #d9e3f1; border-radius: 999px; padding: 10px 15px; background: #fff; color: #60708d; }.recharge-actions button.active { border-color: #4a78e6; background: #eaf1ff; color: #3163d0; }.recharge-actions small { display: block; margin-top: 3px; color: #94a0b4; font-size: 10px; }.recharge-grid { align-items: stretch; }.recharge-card { border: 1px solid #dfe6f2; border-radius: 16px; padding: 22px; background: #fff; box-shadow: 0 12px 28px rgba(57,92,151,.07); }.recharge-card.featured { border: 2px solid #557eee; }.package-top { display: flex; justify-content: space-between; color: #4775df; font-size: 12px; }.package-top em, .recharge-card > em { color: #8b98ae; font-size: 11px; font-style: normal; }.recharge-card h3 { margin: 13px 0 0; font-size: 20px; }.recharge-card .price { margin: 10px 0; color: #1e52c8; font-size: 36px; }.recharge-card p { min-height: 46px; margin: 0; color: #71809b; font-size: 12px; line-height: 1.6; }.recharge-card > strong { display: block; margin-top: 15px; color: #2d59bd; }.recharge-card > small { display: block; margin-top: 6px; color: #8997ad; font-size: 11px; }.recharge-card ul { min-height: 83px; padding-left: 0; list-style: none; color: #6b7a94; font-size: 12px; line-height: 1.8; }.quantity { display: flex; align-items: center; gap: 7px; color: #72809a; font-size: 12px; }.quantity button, .quantity input { width: 30px; height: 30px; border: 1px solid #d6e0ee; background: #fff; color: #526b99; text-align: center; }.quantity input { border-radius: 5px; }.pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }.pay-row button { border: 0; border-radius: 8px; padding: 11px 8px; color: #fff; font-size: 12px; font-weight: 700; }.alipay { background: #2d94e2; }.wechat { background: #29b878; }.purchase-history { margin-top: 36px; }.purchase-history h2 { font-size: 24px; letter-spacing: 0; }.purchase-placeholder { border: 1px dashed #cdd9eb; border-radius: 12px; padding: 18px; color: #7c8aa2; background: rgba(255,255,255,.6); font-size: 12px; }
@media (max-width: 760px) { .prompts-page, .recharge-page, .canvas-page { padding-inline: 18px; }.canvas-benefits { grid-template-columns: 1fr; }.benefit-main, .benefit-side { width: 100%; }.canvas-page .canvas-top { align-items: flex-start; flex-direction: column; }.recharge-balances > div { flex: 1 1 140px; }.recharge-grid { grid-template-columns: 1fr; }.prompt-gallery { columns: 1; }.prompt-image { min-height: 220px; } }

/* Per-tool workspace controls */
.compact-overview { margin-bottom: 20px; }
.xy-topbar .nav { gap: 4px; }
.xy-topbar .nav button { white-space: nowrap; }
.tool-card { min-height: 420px; }
.tool-section { display: grid; gap: 16px; }
.section-number { color: #8577ff; font-size: 12px; font-weight: 800; }
.tool-section h3, .concept-step h3, .subtool-panel h3 { margin: 0; color: #f5f5ff; font-size: 18px; }
.tool-section p { margin: -8px 0 4px; color: #8589a5; font-size: 12px; }
.notice-box, .process-result { display: grid; gap: 7px; border: 1px solid #2a2d4d; border-radius: 12px; padding: 15px; background: rgba(28, 31, 68, .55); color: #9b9fba; font-size: 12px; line-height: 1.6; }
.notice-box strong, .process-result span { color: #e0c26e; }
.notice-box span, .process-result small { color: #777b98; }
.choice-field { display: grid; gap: 8px; }
.choice-field > label, .tool-textarea > label, .parameter-row label, .range-control label { color: #a6a8c3; font-size: 12px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { min-height: 40px; border: 1px solid #292d4c; border-radius: 8px; padding: 9px 13px; background: #0b0e21; color: #8589a5; font-size: 12px; }
.choice:hover, .choice.active { border-color: #6958f2; background: #25205c; color: #eceaff; }
.tool-upload { position: relative; display: grid; min-height: 124px; place-items: center; align-content: center; gap: 5px; border: 1px dashed #49466e; border-radius: 13px; padding: 16px; background: rgba(13, 16, 37, .82); color: #dad9f5; text-align: center; cursor: pointer; }
.tool-upload:hover { border-color: #6c58f4; background: rgba(31, 27, 79, .72); }
.tool-upload.has-files { border-style: solid; border-color: #6c58f4; background: rgba(31, 27, 79, .9); }
.tool-upload input { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-icon { color: #9386ff; font-size: 24px; line-height: 1; }
.tool-upload strong { font-size: 13px; }
.tool-upload small, .tool-upload em { max-width: 520px; color: #747894; font-size: 11px; font-style: normal; line-height: 1.5; }
.tool-upload .file-status { color: #9e92ff; }
.upload-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tryon-upload-slot { position: relative; min-width: 0; min-height: 180px; }
.tryon-upload-slot > .tool-upload { height: 100%; min-height: 180px; }
.tryon-upload-slot.has-preview > .tool-upload { border-style: solid; border-color: #8ea8ce; padding: 0; overflow: hidden; pointer-events: none; }
.tryon-upload-slot.has-preview > .tool-upload > :not(input) { visibility: hidden; }
.tryon-upload-preview { position: absolute; inset: 0; z-index: 1; overflow: hidden; border: 1px solid #8ea8ce; border-radius: 8px; background: #f8fbff; }
.tryon-upload-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tryon-upload-replace { position: absolute; right: 8px; bottom: 8px; border: 1px solid #fff; border-radius: 6px; padding: 6px 9px; background: rgba(21, 59, 133, .9); color: #fff; font-size: 12px; cursor: pointer; }
.tryon-upload-replace:hover { background: #123b85; }
.reverse-upload { max-width: 620px; }
.tool-textarea { display: grid; gap: 8px; margin-top: 16px; }
.tool-textarea textarea { width: 100%; min-height: 150px; border: 1px solid #30335a; border-radius: 13px; padding: 15px; background: #080b1a; color: #f5f5ff; outline: none; resize: vertical; line-height: 1.7; }
.tool-textarea textarea:focus { border-color: #6c58f4; }
.parameter-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 15px; }
.parameter-row .field input { min-height: 42px; }
.concept-step + .concept-step { margin-top: 28px; padding-top: 25px; border-top: 1px solid #242544; }
.step-title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.step-title span { border-radius: 6px; padding: 5px 8px; background: #29225f; color: #a99dff; font-size: 11px; }
.subtool-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.subtool-tabs button { border: 1px solid #2c2f4e; border-radius: 8px; padding: 10px 14px; background: #0d1024; color: #888ba7; }
.subtool-tabs button.active { border-color: #6253e7; background: #292360; color: #fff; }
.subtool-panel { display: none; }
.subtool-panel.active { display: block; }
.subtool-panel h3 { margin-bottom: 14px; }
.range-control { margin-top: 15px; }
.success-state { display: block; margin-top: 7px; color: #91d998; font-size: 10px; }
.small-button { border: 1px solid #34375b; border-radius: 7px; padding: 8px 10px; background: #151832; color: #b5b7d1; font-size: 11px; }
.chat-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 560px; border: 1px solid #242544; border-radius: 14px; overflow: hidden; background: #0b0d1c; }
.chat-history { border-right: 1px solid #242544; padding: 15px; background: #0e1022; }
.chat-history > div { display: flex; align-items: center; justify-content: space-between; color: #deddf2; font-size: 12px; }
.chat-history > div button { border: 0; background: transparent; color: #767b9d; font-size: 11px; }
.new-chat { width: 100%; margin-top: 16px; border: 1px solid #4941a0; border-radius: 8px; padding: 10px; background: #211c57; color: #dcd8ff; }
.empty-mini { margin-top: 28px; color: #626782; font-size: 11px; text-align: center; }
.chat-main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 13px; border-bottom: 1px solid #242544; }
.model-option { display: grid; gap: 3px; border: 1px solid #2b2e4c; border-radius: 9px; padding: 9px; background: #11142a; color: #888ba7; text-align: left; }
.model-option span { color: #8c7fff; font-size: 10px; }.model-option strong { color: #d8d7ee; font-size: 11px; }.model-option small { color: #676c8b; font-size: 9px; }
.model-option.active { border-color: #5d4fe0; background: #241f59; }.model-option.active strong { color: #fff; }
.chat-messages { overflow: auto; padding: 25px; }
.chat-empty { display: grid; place-items: center; gap: 10px; height: 100%; color: #8085a4; text-align: center; }.chat-empty strong { color: #d5d5e9; font-size: 17px; }.chat-empty span { font-size: 11px; }
.chat-message { max-width: 78%; margin-bottom: 12px; border-radius: 11px; padding: 11px 13px; }.chat-message.user { margin-left: auto; background: #2a2366; }.chat-message.assistant { background: #161a31; }.chat-message strong { color: #a69aff; font-size: 11px; }.chat-message p { margin: 6px 0 0; color: #c9cbe0; font-size: 12px; line-height: 1.6; }
.chat-composer { padding: 14px; border-top: 1px solid #242544; }.chat-composer textarea { width: 100%; min-height: 85px; border: 1px solid #30335a; border-radius: 10px; padding: 12px; background: #080b1a; color: #fff; resize: vertical; outline: none; }.chat-composer > div { display: flex; align-items: center; gap: 10px; margin-top: 9px; }.chat-composer .file-status { flex: 1; color: #737894; font-size: 10px; }.chat-composer input { display: none; }
.simple-page { min-height: calc(100vh - 58px); padding: 100px max(24px, 10vw); background: #0b0c18; color: #f7f7ff; }.simple-page > span { color: #8c7fff; font-size: 12px; letter-spacing: .14em; }.simple-page h1 { margin: 14px 0 10px; font-size: clamp(34px, 5vw, 58px); }.simple-page p { max-width: 620px; margin: 0 0 28px; color: #8388a5; line-height: 1.7; }
.canvas-empty { width: 280px; margin: auto; color: #71809b; text-align: center; }
@media (max-width: 900px) { .model-grid { grid-template-columns: repeat(2, 1fr); }.chat-layout { grid-template-columns: 1fr; }.chat-history { display: none; }.upload-pair, .parameter-row { grid-template-columns: 1fr; } }

/* Blue-white theme: keep every sidebar label readable against the pale panel. */
.ai-page.bluewhite .engine-sidebar { color: #17254c; background: #f8fbff; }
.ai-page.bluewhite .engine-brand { border-color: #b5c5df; }
.ai-page.bluewhite .engine-brand span, .ai-page.bluewhite .engine-group-head span { color: #52658a; }
.ai-page.bluewhite .engine-brand strong, .ai-page.bluewhite .engine-group-head strong { color: #102454; }
.ai-page.bluewhite .engine-group-head em { color: #425477; }
.ai-page.bluewhite .engine-group + .engine-group { border-color: #aebdd5; }
.ai-page.bluewhite .engine-sidebar .tool-item { border-color: #a6b6d0; background: #edf4ff; color: #253963; }
.ai-page.bluewhite .engine-sidebar .tool-item strong { color: #253963; font-weight: 700; }
.ai-page.bluewhite .engine-sidebar .tool-num { color: #526ee8; font-weight: 700; }
.ai-page.bluewhite .engine-sidebar .tool-item:hover, .ai-page.bluewhite .engine-sidebar .tool-item.active { border-color: #4c61e8; background: #dfe9ff; color: #0e245a; box-shadow: 0 0 0 1px rgba(76,97,232,.12); }
.ai-page.bluewhite .engine-sidebar .tool-item:hover strong, .ai-page.bluewhite .engine-sidebar .tool-item.active strong { color: #0e245a; }
.ai-page.bluewhite .agent-badge, .ai-page.bluewhite .ai-kicker, .ai-page.bluewhite .reward-label { color: #405899; }
.ai-page.bluewhite .ai-intro h1, .ai-page.bluewhite .reward-card h3, .ai-page.bluewhite .total-points strong, .ai-page.bluewhite .total-diamonds strong { color: #112652; }
.ai-page.bluewhite .reward-card { background: #f8fbff; border-color: #b9c9e2; }
.ai-page.bluewhite .reward-day { border-color: #b9c8de; background: #e8f0fc; }.ai-page.bluewhite .reward-day span, .ai-page.bluewhite .reward-day small { color: #4d6083; }.ai-page.bluewhite .reward-day strong { color: #152d61; }
.ai-page.bluewhite .invite-card { color: #27446e; background: #e4f3ff; border-color: #9fc9e7; }
.ai-page.bluewhite .record-note strong, .ai-page.bluewhite .record-note button { color: #183d82; }
.ai-page.bluewhite .tool-card { color: #1b2b50; background: #f5f8ff; }
.ai-page.bluewhite .tool-card h3, .ai-page.bluewhite .tool-card .tool-section h3, .ai-page.bluewhite .tool-card .concept-step h3, .ai-page.bluewhite .tool-card .subtool-panel h3 { color: #102454; }
.ai-page.bluewhite .tool-card p, .ai-page.bluewhite .tool-card .tool-section p { color: #405477; }
.ai-page.bluewhite .choice-field > label, .ai-page.bluewhite .tool-textarea > label, .ai-page.bluewhite .parameter-row label, .ai-page.bluewhite .range-control label, .ai-page.bluewhite .field label { color: #34496f; font-weight: 600; }
.ai-page.bluewhite .choice { border-color: #a7b9d5; background: #eaf2ff; color: #31466d; }.ai-page.bluewhite .choice:hover, .ai-page.bluewhite .choice.active { border-color: #435bd9; background: #d5e1ff; color: #112b67; }
.ai-page.bluewhite .tool-card input, .ai-page.bluewhite .tool-card select, .ai-page.bluewhite .tool-card textarea, .ai-page.bluewhite .agent-prompt { border-color: #9cafca; background: #fff; color: #14264d; }
.ai-page.bluewhite .tool-card input::placeholder, .ai-page.bluewhite .tool-card textarea::placeholder { color: #596b8d; opacity: 1; }
.ai-page.bluewhite .tool-upload { border-color: #8ea8ce; background: #edf4ff; color: #1e3561; }.ai-page.bluewhite .tool-upload small, .ai-page.bluewhite .tool-upload em { color: #4d6287; }.ai-page.bluewhite .tool-upload .file-status { color: #244ea7; }
.ai-page.bluewhite .tool-upload.deai-has-preview { padding: 0; overflow: hidden; border-style: solid; background: #fff; }
.ai-page.bluewhite .tool-upload.deai-has-preview > :not(input):not([data-deai-preview]) { visibility: hidden; }
.deai-upload-slot { display: flex; justify-content: center; }
.deai-upload-slot .tool-upload { width: min(300px, 100%); min-height: 180px; }
.deai-upload-preview { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: #fff; }
.deai-upload-preview img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: center; }
.ai-page.bluewhite .notice-box, .ai-page.bluewhite .process-result { border-color: #a8bbd6; background: #e8f1ff; color: #304b76; }.ai-page.bluewhite .notice-box span, .ai-page.bluewhite .process-result small { color: #4c6286; }
.process-result.live-result { box-sizing: border-box; min-width: 0; max-width: 100%; overflow: hidden; }
.process-result.live-result > video { display: block; width: 100%; max-width: 100%; height: auto; max-height: min(64vh, 620px); margin: 0; border-radius: 6px; background: #0f1b2d; object-fit: contain; }
.upscale-upload-preview { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 104px; margin-top: 12px; border: 1px solid #a8bbd6; border-radius: 8px; padding: 10px; background: #f7fbff; color: #304b76; }
.upscale-upload-preview[hidden] { display: none; }
.upscale-upload-preview video { display: block; width: 180px; max-width: 100%; height: 92px; border-radius: 6px; background: #0f1b2d; object-fit: contain; }
.upscale-upload-preview div { display: grid; gap: 5px; min-width: 0; }
.upscale-upload-preview strong { overflow: hidden; color: #173b68; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.upscale-upload-preview small { color: #607a99; font-size: 12px; }
@media (max-width: 560px) { .upscale-upload-preview { grid-template-columns: 1fr; }.upscale-upload-preview video { width: 100%; height: auto; max-height: 210px; } }
.deai-result > img { display: block; width: auto; max-width: min(360px, 100%); height: auto; max-height: 360px; margin: 10px auto 0; border-radius: 6px; background: #fff; object-fit: contain; }
.deai-result { position: relative; padding-bottom: 54px; }
.deai-view-button { position: absolute; right: 12px; bottom: 12px; border: 1px solid #2563eb; border-radius: 6px; padding: 8px 12px; background: #2563eb; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.deai-view-button:hover { background: #1d4ed8; }
.deai-image-modal { display: grid; place-items: center; min-height: 180px; max-height: 68vh; overflow: auto; background: #f4f8ff; }
.deai-image-modal img { display: block; width: auto; max-width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
.deai-modal-download { display: inline-flex; align-items: center; text-decoration: none; }
  .qh-script-studio { display: grid; gap: 16px; }
  .qh-script-studio .tool-upload { min-height: 142px; }
.qh-script-fields { display: grid; gap: 12px; }
.qh-script-fields .field { display: grid; gap: 7px; }
.qh-script-fields select { width: 100%; min-height: 46px; border: 1px solid #b8c9e1; border-radius: 10px; padding: 10px 13px; background: #fff; color: #17325f; font-size: 14px; }
.qh-script-word-slider { display: flex; align-items: center; width: min(382px, 100%); gap: 10px; min-height: 34px; }
.qh-script-word-slider input[type="range"] { flex: 1; min-width: 0; accent-color: #1478ee; }
.qh-script-word-slider output { flex: 0 0 auto; color: #122753; font-weight: 700; font-size: 14px; }
.qh-script-studio .tool-textarea { margin-top: 0; }
.qh-script-studio .tool-textarea textarea { min-height: 184px; border-color: #b8c9e1; border-radius: 12px; }
.qh-script-reference { display: flex; justify-content: flex-end; margin-top: 4px; }
.qh-script-reference-menu { display: grid; gap: 6px; max-width: 520px; margin-left: auto; border: 1px solid #cfe0f3; border-radius: 8px; padding: 7px; background: #f8fbff; }
.qh-script-reference-menu[hidden] { display: none; }
.qh-script-reference-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; width: 100%; min-height: 36px; border: 1px solid #d9e6f4; border-radius: 6px; padding: 7px 9px; background: #fff; color: #2f4359; cursor: pointer; text-align: left; }
.qh-script-reference-item:hover, .qh-script-reference-item:focus-visible { border-color: #86add7; background: #eef6ff; outline: none; }
.qh-script-reference-item strong { color: #2f5e8f; font-size: 12px; white-space: nowrap; }
.qh-script-reference-item span { min-width: 0; overflow: hidden; color: #607083; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.qh-script-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.qh-script-actions button { min-height: 46px; border-radius: 10px; padding: 10px 18px; font-weight: 700; }
.qh-script-actions .generate-button { border: 0; background: #d9af46; color: #33260a; box-shadow: none; }
.qh-script-actions .generate-button:hover { background: #c99c31; }
.qh-script-reset { border: 0; background: #e8f0ff; color: #315b9d; }
.qh-script-actions .clear-button { border: 1px solid #bfd0e7; background: #fff; color: #315478; }

/* Match the reference script studio while keeping its upload control independent. */
.agent-card.qh-script-card {
  border: 1px solid #cfe0f3;
  border-radius: 28px;
  padding: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 251, 255, .92));
  box-shadow: 0 18px 46px rgba(31, 97, 165, .08);
  color: #2f4359;
}
.qh-script-studio { gap: 18px; }
.qh-script-studio .tool-upload {
  min-height: 116px;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto;
  justify-items: start;
  align-content: center;
  column-gap: 15px;
  row-gap: 3px;
  border: 1px solid #cfe0f3;
  border-radius: 22px;
  padding: 18px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 14px 34px rgba(31, 97, 165, .08);
  color: #2f4359;
  text-align: left;
}
.qh-script-studio .tool-upload:hover,
.qh-script-studio .tool-upload.has-files {
  border-color: #9bbce1;
  background: #fff;
}
.qh-script-studio .tool-upload .upload-icon {
  grid-row: 1 / span 2;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 17px;
  background: #fff4e5;
  box-shadow: 0 12px 28px rgba(255, 165, 55, .18);
  color: #f19a26;
  font-size: 32px;
  font-weight: 650;
  line-height: 1;
}
.qh-script-studio .tool-upload strong {
  color: #102033;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.45;
}
.qh-script-studio .tool-upload small {
  max-width: none;
  color: #607083;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.7;
}
.qh-script-studio .tool-upload .file-status {
  grid-column: 2;
  color: #356a9b;
  font-size: 13px;
  font-weight: 700;
}
.qh-script-fields { gap: 14px; }
.qh-script-fields .field > label,
.qh-script-studio .tool-textarea > label {
  color: #2f4359;
  font-size: 14px;
  font-weight: 850;
}
.qh-script-fields select {
  min-height: 46px;
  border-color: #cfe0f3;
  border-radius: 13px;
  padding: 0 13px;
  background: #fff;
  color: #17263a;
  font-size: 16px;
}
.qh-script-word-slider { width: min(300px, 100%); }
.qh-script-word-slider input[type="range"] {
  flex: 0 1 230px;
  width: min(230px, 100%);
  min-height: 0;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.qh-script-word-slider input[type="range"]:focus,
.qh-script-word-slider input[type="range"]:focus-visible { outline: none !important; box-shadow: none !important; }
.qh-script-word-slider output { color: #2f4359; }
.qh-script-studio .tool-textarea textarea {
  min-height: 190px;
  border-color: rgba(120, 157, 194, .34);
  border-radius: 20px;
  padding: 13px 15px;
  background: rgba(255, 255, 255, .95);
  color: #17263a;
  font-size: 14px;
  line-height: 1.8;
}
.qh-script-studio .tool-textarea textarea::placeholder { color: #7b8b9f; }
.qh-script-reference .reference-button,
.qh-script-actions .qh-script-reset,
.qh-script-actions .clear-button {
  min-height: 44px;
  border-radius: 13px;
  padding: 0 18px;
  font-size: 14px;
}
.qh-script-reference .reference-button,
.qh-script-actions .qh-script-reset {
  border: 1px solid #cfe0f3;
  background: #f4f8fc;
  color: #2f5e8f;
}
.qh-script-actions .clear-button { border-color: #cfe0f3; color: #607083; }
.qh-script-actions .generate-button {
  min-height: 44px;
  border-radius: 13px;
  padding: 0 18px;
  background: linear-gradient(135deg, #f0d488, #caa24f);
  color: #211706;
  font-size: 16px;
  font-weight: 950;
  box-shadow: none;
}
.qh-script-actions .generate-button:hover { background: linear-gradient(135deg, #f3db96, #d2ab57); }
.qh-storyboard-studio {
  display: grid;
  gap: 16px;
  color: #2f4359;
}
.qh-storyboard-studio .tool-upload {
  min-height: 122px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed #cfe0f3;
  border-radius: 22px;
  padding: 18px 24px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  color: #2f4359;
  text-align: center;
}
.qh-storyboard-studio .tool-upload:hover,
.qh-storyboard-studio .tool-upload:focus-within {
  border-color: #8eb7e4;
  background: #fff;
}
.qh-storyboard-studio .tool-upload .upload-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: #e9f3ff;
  color: #1769c2;
  font-size: 24px;
  line-height: 1;
}
.qh-storyboard-studio .tool-upload strong,
.qh-storyboard-studio .field > label,
.qh-storyboard-studio .choice-field > label,
.qh-storyboard-studio .tool-textarea > label {
  color: #2f4359;
  font-size: 14px;
  font-weight: 800;
}
.qh-storyboard-studio .tool-upload small,
.qh-storyboard-studio .tool-upload .file-status {
  max-width: 760px;
  color: #607083;
  font-size: 13px;
  font-style: normal;
  line-height: 1.65;
}
.qh-storyboard-studio .tool-upload .file-status { color: #356a9b; font-weight: 700; }
.qh-storyboard-studio .field,
.qh-storyboard-studio .choice-field,
.qh-storyboard-studio .tool-textarea { display: grid; gap: 8px; }
.qh-storyboard-studio select,
.qh-storyboard-studio .tool-textarea textarea {
  width: 100%;
  border: 1px solid rgba(120, 157, 194, .34);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  color: #17263a;
  font-size: 14px;
}
.qh-storyboard-studio select { min-height: 46px; padding: 0 13px; }
.qh-storyboard-studio .tool-textarea textarea { min-height: 190px; padding: 13px 15px; line-height: 1.8; }
.qh-storyboard-studio .tool-textarea textarea::placeholder { color: #7b8b9f; }
.qh-storyboard-studio .choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ai-page.bluewhite .qh-storyboard-studio .choice {
  min-height: 40px;
  border: 1px solid #cfe0f3;
  border-radius: 12px;
  padding: 8px 16px;
  background: #fff;
  color: #356a9b;
  font-weight: 700;
}
.ai-page.bluewhite .qh-storyboard-studio .choice.active {
  border-color: #6ca9e4;
  background: #eaf4ff;
  color: #1769c2;
}
.qh-storyboard-studio .agent-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 2px; }
.ai-page.bluewhite .qh-storyboard-studio .agent-actions button {
  min-height: 44px;
  border-radius: 13px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 800;
}
.ai-page.bluewhite .qh-storyboard-studio .generate-button { border: 0; background: #2384e9; color: #fff; box-shadow: none; }
.ai-page.bluewhite .qh-storyboard-studio .generate-button:hover { background: #176fc9; }
.ai-page.bluewhite .qh-storyboard-studio .reference-button,
.ai-page.bluewhite .qh-storyboard-studio .small-button { border: 1px solid #cfe0f3; background: #f4f8fc; color: #2f5e8f; }
.ai-page.bluewhite .qh-storyboard-studio .clear-button { border: 1px solid #f06b9a !important; background: #f06b9a !important; color: #fff !important; }
.qh-storyboard-studio .cost-inline { display: inline-flex; align-items: center; color: #607083; font-size: 13px; font-weight: 700; }
@media (max-width: 700px) {
  .qh-storyboard-studio .tool-upload { padding: 16px; }
  .qh-storyboard-studio .agent-actions { justify-content: stretch; }
  .qh-storyboard-studio .agent-actions button { flex: 1 1 calc(50% - 5px); }
  .qh-storyboard-studio .cost-inline { width: 100%; justify-content: center; }
}
.qh-script-history { margin-top: 18px; padding: 18px; }
.qh-script-history-card { grid-template-columns: minmax(0, 1fr) auto; min-height: 106px; border-color: #c9d9ef; background: #f8fbff; }
.qh-script-history-main { min-width: 0; display: grid; gap: 7px; }
.qh-script-history-main > strong { color: #1d304c; font-size: 14px; line-height: 1.55; }
.qh-script-history-main time, .qh-script-history-main small { color: #627895; font-size: 12px; }
.qh-script-history-main p { margin: 0; color: #38567d; font-size: 13px; }
.qh-script-history-actions { display: flex; gap: 9px; align-items: center; }
.qh-script-history-actions .small-button { min-height: 42px; border: 1px solid #b9d0ec; border-radius: 10px; padding: 9px 14px; background: #fff; color: #176ac5; font-weight: 700; }
.qh-script-history-actions .small-button.is-primary { border-color: #7451f4; background: #7451f4; color: #fff; }
.qh-script-result-modal .local-modal-panel { width: min(920px, calc(100vw - 32px)); max-width: 920px; }
.qh-script-result-modal .local-modal-panel footer { justify-content: center; }
.qh-script-result-download {
  min-width: 116px;
  border: 0;
  background: #f06b9a;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(240, 107, 154, .24);
}
.qh-script-result-download:hover { background: #e6558a; }
.ai-page.bluewhite .qh-script-actions .clear-button {
  border-color: #f06b9a !important;
  background: #f06b9a !important;
  color: #fff !important;
}
.ai-page.bluewhite .qh-script-actions .clear-button:hover { border-color: #e6558a !important; background: #e6558a !important; }
.qh-script-result-view { display: grid; gap: 14px; }
.qh-script-result-meta { display: grid; gap: 8px; color: #263f60; line-height: 1.55; }
.qh-script-result-meta span { color: #66809e; font-size: 13px; }
.qh-script-result-view article { max-height: min(56vh, 560px); overflow: auto; border: 1px solid #deebf7; border-radius: 12px; padding: 18px 20px; background: #f5f9fd; color: #36516f; font-size: 16px; line-height: 1.82; }
@media (max-width: 680px) { .qh-script-history-card { grid-template-columns: 1fr; }.qh-script-history-actions { justify-content: flex-start; flex-wrap: wrap; }.qh-script-result-view article { max-height: 52vh; padding: 14px; font-size: 14px; } }
.live-task-notice { margin: 10px 0 0; border: 1px solid #64748b; border-radius: 6px; padding: 9px 11px; background: #eff6ff; color: #1e3a5f; font-size: 12px; line-height: 1.5; }.live-task-notice.is-pending { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }.live-task-notice.is-success { border-color: #16a34a; background: #f0fdf4; color: #166534; }.live-task-notice.is-warning { border-color: #d97706; background: #fffbeb; color: #92400e; }.live-task-notice.is-error { border-color: #dc2626; background: #fef2f2; color: #b91c1c; }
.live-download-title { margin: 0; color: #13295b; font-size: 15px; }.live-download-cover, .live-download-video { display: block; width: min(560px, 100%); max-height: 420px; border-radius: 8px; object-fit: contain; background: #dbeafe; }.live-download-audio { width: min(560px, 100%); }.live-download-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }.live-download-actions a { border: 1px solid #8eabe0; border-radius: 6px; padding: 7px 10px; background: #fff; color: #174ea6; font-size: 12px; text-decoration: none; }.live-download-actions a:hover { background: #eaf2ff; }.live-download-actions a.primary-download { border-color: #2563eb; background: #2563eb; color: #fff; font-weight: 700; }.live-download-actions a.primary-download:hover { background: #1d4ed8; }.live-download-playback-note { color: #b45309; }
.tryon-result { min-width: 0; overflow: hidden; }.tryon-result-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; max-height: 390px; overflow: auto; padding: 10px; border: 1px solid #a8bbd6; border-radius: 8px; background: #f8fbff; }.tryon-result-item { min-width: 0; margin: 0; padding: 6px; border-radius: 7px; background: #fff; }.tryon-result-gallery img { display: block; width: 100%; height: 220px; min-width: 0; object-fit: contain; border-radius: 6px; background: #fff; }.tryon-image-download { display: block; width: max-content; margin: 7px auto 2px; border: 1px solid #2563eb; border-radius: 6px; padding: 6px 11px; background: #2563eb; color: #fff; font-size: 12px; text-decoration: none; }.tryon-image-download:hover { background: #1d4ed8; }.tryon-result-gallery.is-single { grid-template-columns: minmax(0, 1fr); }.tryon-result-gallery.is-single img { height: 300px; }
.ai-page.bluewhite .history-panel { background: #f5f8ff; }.ai-page.bluewhite .history-heading strong, .ai-page.bluewhite .result-details h4 { color: #122753; }.ai-page.bluewhite .history-heading small, .ai-page.bluewhite .result-details p, .ai-page.bluewhite .result-details time { color: #4c6082; }.ai-page.bluewhite .result-card { border-color: #b1c2da; background: #eaf2ff; }

/* Home page aligned with the reference site's hero, capability cards and learning path. */
.xy-home { background: #f5f9ff; color: #102650; }
.xy-home-hero { position: relative; min-height: 445px; display: flex; align-items: flex-end; padding: 0 max(28px, 7vw) 46px; background-image: linear-gradient(90deg, rgba(2,8,22,.55), rgba(2,8,22,.1) 60%, rgba(2,8,22,.25)), url("assets/home/hero-cg-poster.jpg"); background-position: center; background-size: cover; }
.xy-home-hero-video { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.xy-home-hero::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(2,8,22,.42), rgba(2,8,22,.08) 54%, rgba(2,8,22,.22)); pointer-events: none; }
.xy-home-hero-copy { max-width: 1020px; color: #fff; }
.xy-home-hero-copy { position: relative; z-index: 2; }
.xy-home-hero-copy h1 { margin: 0; font-size: clamp(40px, 5.8vw, 76px); font-weight: 700; line-height: 1.08; letter-spacing: .02em; text-shadow: 0 3px 18px rgba(0,0,0,.24); }
.xy-home-hero-copy h1 span { display: inline-flex; align-items: center; justify-content: center; width: 1.12em; height: 1.12em; border: 7px solid #55e979; border-radius: 50%; font-size: .72em; }
.xy-home-hero-copy h2 { margin: 18px 0 0; color: #fff; font-size: clamp(22px, 3vw, 40px); line-height: 1.2; text-shadow: 0 3px 14px rgba(0,0,0,.35); }
.xy-home-capabilities { padding: 82px max(24px, 7vw) 92px; background: radial-gradient(circle at 12% 10%, rgba(54,128,255,.16), transparent 40%), radial-gradient(circle at 88% 18%, rgba(0,214,255,.14), transparent 42%), linear-gradient(#f4f9ff, #fff 45%, #f6faff); }
.xy-home-heading { max-width: 900px; margin: 0 auto 34px; text-align: center; }
.xy-home-heading h2 { margin: 0; color: #102a62; font-size: clamp(30px, 4vw, 48px); }
.xy-home-heading p { margin: 18px 0 8px; color: #425779; font-size: 20px; font-weight: 700; }
.xy-home-heading strong { color: #536481; font-size: 16px; }
.xy-home-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1260px; margin: 0 auto; }
.xy-home-card { position: relative; overflow: hidden; min-height: 300px; border: 1px solid #d6e2f3; border-radius: 18px; padding: 20px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,252,255,.84)); box-shadow: 0 18px 38px rgba(47,88,145,.11); }
.xy-home-card-media { position: absolute; right: 22px; bottom: 23px; width: 48%; height: 58%; overflow: hidden; border-radius: 8px; background: #27405f; }
.xy-home-card-media img { width: 100%; height: 100%; object-fit: cover; }
.xy-home-card-video { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xy-home-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,29,57,.3), transparent 55%); }
.xy-home-card-media button { position: absolute; z-index: 3; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(5,17,36,.42); color: #fff; cursor: pointer; }
.xy-video-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(3,9,21,.82); }
.xy-video-modal-inner { position: relative; width: min(980px, 94vw); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 10px; background: #071223; box-shadow: 0 24px 80px rgba(0,0,0,.48); }
.xy-video-modal video { display: block; width: 100%; max-height: 82vh; border-radius: 7px; background: #000; }
.xy-video-modal-close { position: absolute; z-index: 2; top: -15px; right: -15px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: #14264a; color: #fff; font-size: 22px; cursor: pointer; }
.xy-home-card-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg,#1268ff,#3f8cff); color: #fff; font-weight: 800; }
.xy-home-card h3 { max-width: 48%; margin: 23px 0 8px; color: #0d2a60; font-size: 24px; line-height: 1.15; }
.xy-home-card p { max-width: 48%; margin: 0; color: #576b89; font-size: 13px; line-height: 1.6; }
.xy-home-proof { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 40px; padding: 88px max(24px, 10vw); background: #fff; }
.xy-home-proof > div:first-child span { color: #3975e8; font-size: 13px; font-weight: 700; }
.xy-home-proof h2 { max-width: 660px; margin: 15px 0; color: #102a62; font-size: clamp(28px, 4vw, 44px); }
.xy-home-proof p { max-width: 650px; color: #596d8c; line-height: 1.8; }
.xy-home-proof-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 30px; border: 1px solid #d9e5f5; border-radius: 18px; background: #f3f8ff; }
.xy-home-proof-stats strong { color: #2364db; font-size: 34px; }.xy-home-proof-stats span { align-self: end; color: #53698a; font-size: 13px; }
.xy-home-path { padding: 88px max(24px, 7vw); background: linear-gradient(135deg,#eef5ff,#fff); }
.xy-home-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; max-width: 1180px; margin: 0 auto; }
.xy-home-price-grid article { display: grid; gap: 9px; border: 1px solid #d6e2f3; border-radius: 16px; padding: 25px; background: #fff; box-shadow: 0 14px 30px rgba(44,88,145,.08); }
.xy-home-price-grid article.featured { border: 2px solid #477cf0; transform: translateY(-10px); }
.xy-topbar .brand > span:not(.brand-mark) { display: none; }
.xy-topbar .brand { display: none; }
.xy-home-price-grid article > span { color: #4776e5; font-weight: 800; }.xy-home-price-grid h3 { min-height: 48px; margin: 4px 0; color: #132b5c; }.xy-home-price-grid small { color: #71829d; }.xy-home-price-grid b { color: #1759d1; font-size: 38px; }.xy-home-price-grid p { min-height: 42px; color: #657895; line-height: 1.55; }.xy-home-price-grid button { border: 0; border-radius: 8px; padding: 12px; background: #2871e9; color: #fff; font-weight: 700; }
@media (max-width: 900px) { .xy-home-card-grid, .xy-home-price-grid { grid-template-columns: 1fr 1fr; }.xy-home-proof { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .xy-home-hero { min-height: 430px; padding-bottom: 30px; }.xy-home-hero-copy h1 { font-size: 42px; }.xy-home-hero-copy h2 { font-size: 23px; }.xy-home-card-grid, .xy-home-price-grid { grid-template-columns: 1fr; }.xy-home-card { min-height: 285px; }.xy-home-proof { padding-inline: 20px; }.xy-home-price-grid article.featured { transform: none; } }

/* Keep the workbench navigation close to the reference blue-white shell. */
.xy-topbar { background: rgba(247,251,255,.94); border-bottom-color: #dce5f2; box-shadow: 0 4px 18px rgba(44,79,133,.06); }
.xy-topbar .nav { position: absolute; inset: 0 auto 0 50%; display: flex; width: calc(100% - 280px); transform: translateX(-50%); justify-content: center; align-items: center; gap: 4px; }
.xy-topbar .nav button { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.xy-topbar .nav button { color: #263758; }
.xy-topbar .nav button:hover, .xy-topbar .nav button.active { color: #3474e8; box-shadow: inset 0 -3px 0 #64dc8b; }
.xy-topbar .profile-menu-wrap { position: relative; margin-left: auto; }
.xy-topbar .profile-button { margin-left: 0; border: 0; border-radius: 999px; background: #182034; color: #fff; box-shadow: 0 6px 18px rgba(20,34,65,.16); }
.xy-topbar .profile-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: none; min-width: 148px; overflow: hidden; border: 1px solid #d5e0f0; border-radius: 6px; padding: 6px 0; background: #fff; box-shadow: 0 12px 28px rgba(23,48,91,.18); }
.xy-topbar .profile-menu-wrap:hover .profile-menu, .xy-topbar .profile-menu-wrap.open .profile-menu { display: grid; }
/* Invisible pointer bridge: preserve the existing 8px visual gap. */
.xy-topbar .profile-menu-wrap:hover::after, .xy-topbar .profile-menu-wrap.open::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; min-width: 148px; height: 8px; z-index: 30; }
.xy-topbar .profile-menu button { border: 0; padding: 12px 16px; background: #fff; color: #27395d; text-align: left; font-size: 13px; white-space: nowrap; }
.xy-topbar .profile-menu button:hover { background: #edf4ff; color: #2868dc; }
.xy-topbar .nav button { white-space: nowrap; }
@media (max-width: 980px) { .xy-topbar .nav { display: none; } }
.local-modal { z-index: 140; }
.local-modal-panel { color: #1c2d51; background: #fff; border-color: #d7e2f2; }
.local-modal-panel header { border-bottom-color: #e3eaf4; }
.local-modal-panel footer { border-top-color: #e3eaf4; }
.local-modal-panel main { color: #536887; line-height: 1.75; }
.local-modal-panel main strong { color: #1d4eaa; }
.local-modal-panel .tool-upload { margin-top: 14px; }

/* Course center: a blue-white learning workspace with lessons, prompts, and cases. */
.course-page { min-height: calc(100vh - 58px); background: #edf5ff; color: #142955; }
.course-hero { padding: 28px max(24px, 8vw) 58px; text-align: center; background-color: #f7fbff; background-image: linear-gradient(rgba(77,139,222,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(77,139,222,.08) 1px, transparent 1px), linear-gradient(135deg, #f9fcff, #e8f5ff); background-size: 32px 32px, 32px 32px, auto; }
.course-hero-badge { display: inline-flex; border: 1px solid #cde0f5; border-radius: 999px; padding: 9px 17px; background: #fff; color: #3677da; font-size: 13px; font-weight: 700; box-shadow: 0 8px 22px rgba(52,105,173,.1); }
.course-hero h1 { margin: 26px 0 8px; color: #102653; font-size: clamp(42px, 6vw, 72px); letter-spacing: 0; line-height: 1.08; }
.course-hero h1 span { color: #3289ed; }
.course-hero > p { margin: 0; color: #687c9b; font-size: 16px; }
.course-invite { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 910px; margin: 34px auto 26px; border: 1px solid #c5dcf6; border-radius: 15px; padding: 14px 17px; background: rgba(255,255,255,.86); color: #27436e; text-align: left; line-height: 1.65; box-shadow: 0 10px 25px rgba(64,112,169,.08); }
.course-invite span { color: #2d7ce3; }
.course-invite button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 10px 16px; background: #287be0; color: #fff; font-weight: 700; }
.course-stats { display: grid; grid-template-columns: repeat(3, 150px); justify-content: center; max-width: 460px; margin: 0 auto; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 16px 35px rgba(54,106,174,.13); }
.course-stats div { display: grid; gap: 5px; padding: 20px 12px; border-right: 1px solid #e0eaf5; }
.course-stats div:last-child { border-right: 0; }
.course-stats b { color: #2780e2; font-size: 30px; }
.course-stats span { color: #8292aa; font-size: 12px; }
.course-switchbar { display: grid; grid-template-columns: minmax(220px,1fr) auto minmax(220px,1fr); align-items: center; gap: 18px; padding: 14px max(24px, 6vw); background: #f5faff; border-bottom: 1px solid #dbe8f6; }
.course-ai-link, .course-contact { min-height: 48px; border: 1px solid #c8def3; border-radius: 13px; padding: 11px 18px; background: #fff; color: #3972b9; font-weight: 700; }
.course-contact { justify-self: end; }
.course-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #e5edf6; }
.course-tab { border: 0; border-radius: 10px; padding: 12px 18px; background: transparent; color: #72839a; white-space: nowrap; }
.course-tab.active, .course-tab:hover { background: #fff; color: #216bd2; box-shadow: 0 4px 13px rgba(40,97,170,.12); }
.course-learning-panel { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; max-width: 1220px; margin: 28px auto 70px; padding: 0 24px; }
.course-sidebar { min-width: 0; overflow: hidden; border: 1px solid #d9e6f4; border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(54,100,159,.08); }
.course-sidebar > input { width: calc(100% - 22px); margin: 11px; border: 1px solid #e0e8f3; border-radius: 10px; padding: 12px; background: #f8fbff; color: #1b315b; outline: none; }
.course-sidebar > input:focus { border-color: #4c8cf0; }
.course-lesson-list { max-height: 690px; overflow: auto; }
.course-lesson { display: grid; grid-template-columns: 30px minmax(0,1fr) 20px; align-items: center; gap: 7px; width: 100%; border: 0; border-top: 1px solid #edf2f8; padding: 14px 13px; background: #fff; color: #3a4d6c; text-align: left; }
.course-lesson span { color: #6f99d5; font-size: 11px; font-weight: 800; }
.course-lesson strong { font-size: 13px; font-weight: 600; line-height: 1.45; }
.course-lesson em { color: #5c9ce8; font-size: 20px; font-style: normal; text-align: right; }
.course-lesson:hover, .course-lesson.active { background: #edf6ff; color: #155bc0; box-shadow: inset 3px 0 #2994ee; }
.course-series-header { display: grid; grid-template-columns: 24px minmax(0,1fr) 26px 18px; align-items: center; gap: 7px; width: 100%; border: 0; border-top: 1px solid #edf2f8; padding: 13px; background: #f5f9ff; color: #27476e; text-align: left; }
.course-series-header:hover { background: #edf6ff; }
.course-series-icon { color: #4a83ce; font-size: 16px; }
.course-series-header strong { font-size: 13px; line-height: 1.45; }
.course-series-header em { min-width: 20px; border-radius: 10px; padding: 2px 6px; background: #eaf3ff; color: #347de0; font-size: 11px; font-style: normal; text-align: center; font-weight: 800; }
.course-series-header b { color: #5c9ce8; font-size: 18px; font-weight: 500; text-align: right; }
.course-player-column { min-width: 0; }
.course-player { overflow: hidden; border: 1px solid #d3e1f0; border-radius: 20px; padding: 12px; background: #fff; box-shadow: 0 16px 35px rgba(45,91,151,.1); }
.course-player-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #0b1a33; object-fit: cover; }
.course-player-meta { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 19px 5px 0; }
.course-player-meta span, .course-panel-heading > span { color: #397ce1; font-size: 12px; font-weight: 800; }
.course-player-meta h2 { margin: 7px 0; color: #1b315b; font-size: 23px; }
.course-player-meta p, .course-panel-heading p { margin: 0; color: #71839d; line-height: 1.6; }
.course-player-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.course-player-actions button:disabled { cursor: not-allowed; opacity: .45; }
.course-prompt-panel, .course-case-panel { max-width: 1220px; margin: 28px auto 70px; padding: 0 24px; }
.course-panel-heading { margin-bottom: 20px; }
.course-panel-heading h2 { margin: 8px 0; color: #172f5c; font-size: 34px; }
.course-prompt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.course-prompt-card { border: 1px solid #d5e3f2; border-radius: 15px; padding: 22px; background: #fff; box-shadow: 0 10px 24px rgba(54,100,159,.07); }
.course-prompt-card > span { color: #347de0; font-size: 13px; font-weight: 800; }
.course-prompt-card h3 { margin: 27px 0 9px; color: #1d3764; font-size: 20px; }
.course-prompt-card p { min-height: 48px; margin: 0 0 16px; color: #71839e; line-height: 1.6; }
.course-prompt-card button { border: 1px solid #c8dcf4; border-radius: 8px; padding: 9px 12px; background: #f3f8ff; color: #3474d6; }
.course-prompt-detail-intro { max-width: 760px; margin: 0 auto 28px; color: #71839e; text-align: center; line-height: 1.7; }
.course-prompt-detail-list { display: grid; gap: 22px; }
.course-prompt-group-detail { overflow: hidden; border: 1px solid #d5e3f2; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(54,100,159,.08); }
.course-prompt-group-header { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid #edf3fa; }
.course-prompt-icon { font-size: 28px; }
.course-prompt-step-tag { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: #eaf4ff; color: #347de0; font-size: 12px; font-weight: 800; }
.course-prompt-group-header h3 { margin: 7px 0 0; color: #1d3764; font-size: 20px; }
.course-prompt-items-detail { display: grid; gap: 14px; padding: 18px 22px 22px; }
.course-prompt-detail-card { padding: 16px; border: 1px solid #e2edf8; border-radius: 13px; background: #f8fbff; }
.course-prompt-detail-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #304b76; }
.course-prompt-copy { border: 1px solid #c8dcf4; border-radius: 8px; padding: 8px 12px; background: #fff; color: #3474d6; cursor: pointer; }
.course-prompt-text { overflow-x: auto; margin: 12px 0 0; white-space: pre-wrap; color: #536c91; font: inherit; line-height: 1.75; }
.course-prompt-tip { margin-top: 12px; padding: 10px 12px; border-left: 3px solid #77b4f3; border-radius: 8px; background: #eef7ff; color: #4d83bb; font-size: 12px; line-height: 1.65; }
.course-case-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.course-case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.course-case-card { display: grid; gap: 8px; border: 1px solid #d5e3f2; border-radius: 13px; padding: 8px; background: #fff; color: #253b62; text-align: left; }
.course-case-card img { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; object-fit: cover; }
.course-case-card strong { padding: 0 5px; font-size: 13px; }
.course-case-card span { padding: 0 5px 4px; color: #7b8ca5; font-size: 11px; }
.course-case-card.active, .course-case-card:hover { border-color: #4c8cf0; box-shadow: 0 0 0 2px rgba(76,140,240,.12); }
.course-case-player { display: grid; align-content: start; gap: 12px; border: 1px solid #d5e3f2; border-radius: 17px; padding: 12px; background: #fff; }
.course-case-player video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #0b1a33; }
.course-case-player strong { color: #1e3762; }
@media (max-width: 980px) { .course-switchbar { grid-template-columns: 1fr; }.course-contact { justify-self: stretch; }.course-tabs { justify-content: center; }.course-learning-panel { grid-template-columns: 1fr; }.course-lesson-list { max-height: 330px; }.course-prompt-grid { grid-template-columns: repeat(2, 1fr); }.course-case-layout { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .course-hero { padding-inline: 18px; }.course-hero h1 { font-size: 42px; }.course-invite { align-items: stretch; flex-direction: column; }.course-invite button { width: 100%; }.course-stats { grid-template-columns: repeat(3, 1fr); width: 100%; }.course-stats b { font-size: 24px; }.course-switchbar, .course-learning-panel, .course-prompt-panel, .course-case-panel { padding-inline: 16px; }.course-tab { flex: 1; padding-inline: 8px; font-size: 12px; }.course-player-meta { align-items: flex-start; flex-direction: column; }.course-prompt-grid, .course-case-grid { grid-template-columns: 1fr; }.course-panel-heading h2 { font-size: 28px; } }

.course-sublesson-group { margin: 2px 0 8px 15px; padding: 8px 0 2px 12px; border-left: 1px solid #cfe0f4; }
.course-sublesson-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 10px 8px; color: #7187a4; font-size: 12px; }
.course-sublesson-heading span { min-width: 20px; border-radius: 10px; padding: 2px 6px; background: #eaf3ff; color: #347de0; text-align: center; font-weight: 800; }
.course-lesson.course-sublesson { min-height: 36px; padding: 8px 10px; background: #f8fbff; }
.course-lesson.course-sublesson span { font-size: 11px; color: #7e96b2; }
.course-lesson.course-sublesson strong { font-size: 12px; font-weight: 650; }
.course-lesson.course-sublesson.active { background: #eaf3ff; border-color: #8cb8ef; color: #185fae; }
.prompt-image-real { position: relative; min-height: 0; padding: 0; background: #eef3fb; }
.prompt-gallery-image { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.prompt-like { position: absolute; left: 12px; bottom: 12px; color: #fff; font-size: 13px; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.prompt-image-real .favorite-button { position: absolute; right: 10px; bottom: 8px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.gallery-prompts-page .prompt-gallery { columns: 4 240px; column-gap: 18px; }
.gallery-prompts-page .prompt-figure p { display: block; max-height: 7.8em; -webkit-line-clamp: initial; }
.gallery-prompts-page .prompt-gallery-footer { margin-top: 34px; padding: 24px; border: 1px solid #dfe7f4; border-radius: 16px; background: #fff; color: #71809b; line-height: 1.8; text-align: center; }
.gallery-prompts-page .prompt-gallery-footer p { margin: 0 auto 14px; max-width: 860px; }
.gallery-prompts-page .prompt-cta { border: 0; border-radius: 999px; padding: 11px 18px; background: #3f72e8; color: #fff; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(63,114,232,.22); }
.gallery-prompts-page .prompt-badge { font-size: 12px; }
@media (max-width: 980px) { .gallery-prompts-page .prompt-gallery { columns: 3 220px; } }
@media (max-width: 680px) { .gallery-prompts-page .prompt-gallery { columns: 2 160px; } }

/* Prompt gallery reference-match skin: dark five-column gallery with the same spacing hierarchy as the reference page. */
.gallery-prompts-page {
  min-height: calc(100vh - 58px);
  padding: 0 22px 80px;
  background: #0e1116;
  color: #e6e9ef;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
  line-height: 22px;
}
.gallery-prompts-page .wrap { width: 100%; max-width: none; margin: 0; padding: 0; }
.gallery-prompts-page .prompts-heading {
  max-width: none;
  margin: 0 0 22px;
  padding: 40px 0 24px;
}
.gallery-prompts-page .prompts-heading > span {
  display: block;
  margin: 0 0 12px;
  color: #19c3a6;
  font-size: 13px;
  font-weight: 600;
  line-height: 20.4px;
}
.gallery-prompts-page .prompts-heading h1 {
  margin: 0 0 14px;
  color: #e6e9ef;
  font-size: 38px;
  font-weight: 800;
  line-height: 42.56px;
  letter-spacing: -0.035em;
}
.gallery-prompts-page .prompts-heading p {
  max-width: 680px;
  margin: 0;
  color: #9aa4b2;
  font-size: 16px;
  line-height: 27.2px;
}
.gallery-prompts-page .prompt-search-wrap,
.gallery-prompts-page .prompt-categories,
.gallery-prompts-page .prompt-sort {
  margin: 0;
}
.gallery-prompts-page .bar {
  margin: 0 -22px 24px;
  padding: 13px 22px;
  background: rgba(14,17,22,.9);
}
.gallery-prompts-page .bar-in {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 14px;
  row-gap: 8px;
}
.gallery-prompts-page .prompt-search-wrap {
  display: block;
  width: 440px;
}
.gallery-prompts-page .prompt-search {
  width: 440px;
  height: 44px;
  border: 1px solid #262d38;
  border-radius: 999px;
  padding: 10px 18px;
  background: #161b22;
  color: #e6e9ef;
  outline: none;
  box-shadow: none;
  font-size: 14px;
  line-height: 22px;
}
.gallery-prompts-page .prompt-search::placeholder { color: #7f8a99; }
.gallery-prompts-page .prompt-search:focus { border-color: #19c3a6; }
.gallery-prompts-page .prompt-categories,
.gallery-prompts-page .prompt-sort {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.gallery-prompts-page .prompt-categories { grid-column: 2; grid-row: 1; min-height: 44px; }
.gallery-prompts-page .prompt-sort { grid-column: 2; grid-row: 2; min-height: 30px; }
.gallery-prompts-page .prompt-categories > span,
.gallery-prompts-page .prompt-sort > span {
  margin-right: 0;
  color: #7f8a99;
  font-size: 12px;
}
.gallery-prompts-page .prompt-category,
.gallery-prompts-page .sort-tab {
  border: 1px solid #262d38;
  border-radius: 999px;
  padding: 7px 12px;
  background: #161b22;
  color: #9aa4b2;
  font-size: 12px;
  line-height: 18px;
}
.gallery-prompts-page .prompt-category.active,
.gallery-prompts-page .prompt-category:hover,
.gallery-prompts-page .sort-tab.active,
.gallery-prompts-page .sort-tab:hover {
  border-color: rgba(25,195,166,.72);
  background: rgba(25,195,166,.16);
  color: #19c3a6;
}
.gallery-prompts-page .prompt-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.gallery-prompts-page .prompt-figure {
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #262d38;
  border-radius: 14px;
  background: #1b222c;
  box-shadow: none;
  break-inside: auto;
}
.gallery-prompts-page .prompt-image-real {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #11161d;
}
.gallery-prompts-page .prompt-gallery-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
}
.gallery-prompts-page .prompt-like {
  position: absolute;
  top: 12px;
  bottom: auto !important;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  width: max-content;
  max-width: calc(100% - 24px);
  height: auto;
  min-height: 0;
  align-items: center;
  white-space: nowrap;
  box-sizing: border-box;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(22,27,34,.76);
  color: #e6b9d0;
  font-size: 12px;
  line-height: 18px;
}
.gallery-prompts-page .prompt-image-real .favorite-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(230,233,239,.18);
  border-radius: 50%;
  background: rgba(22,27,34,.72);
  color: #e6e9ef;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
}
.gallery-prompts-page .prompt-image-real .favorite-button:hover { color: #19c3a6; border-color: rgba(25,195,166,.65); }
.gallery-prompts-page .prompt-figure figcaption { padding: 14px 13px 13px; }
.gallery-prompts-page .prompt-figure p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 11px;
  color: #c7cedb;
  font-size: 13px;
  line-height: 20.8px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.gallery-prompts-page .copy-prompt {
  width: 100%;
  border: 1px solid #262d38;
  border-radius: 9px;
  padding: 9px;
  background: transparent;
  color: #19c3a6;
  font-size: 13px;
  font-weight: 700;
  line-height: 19px;
}
.gallery-prompts-page .copy-prompt:hover { border-color: rgba(25,195,166,.72); background: rgba(25,195,166,.08); }
.gallery-prompts-page .prompt-gallery-footer {
  margin-top: 34px;
  padding: 24px;
  border: 1px solid #262d38;
  border-radius: 14px;
  background: #151b23;
  color: #8994a3;
  line-height: 1.8;
  text-align: center;
}
.gallery-prompts-page .prompt-gallery-footer p { max-width: 860px; margin: 0 auto 14px; }
.gallery-prompts-page .prompt-cta {
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  background: #19c3a6;
  color: #071019;
  font-weight: 800;
}
.gallery-prompts-page + .footer { border-color: #262d38; background: #0e1116; color: #8994a3; }
@media (max-width: 1100px) {
  .gallery-prompts-page .bar-in { display: flex; flex-wrap: wrap; }
  .gallery-prompts-page .prompt-categories,
  .gallery-prompts-page .prompt-sort { margin-left: 0; margin-top: 10px; }
  .gallery-prompts-page .prompt-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .gallery-prompts-page { padding-inline: 16px; }
  .gallery-prompts-page .prompt-search-wrap,
  .gallery-prompts-page .prompt-search { width: 100%; }
  .gallery-prompts-page .prompt-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gallery-prompts-page .prompts-heading h1 { font-size: 30px; line-height: 1.15; }
  .gallery-prompts-page .prompt-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gallery-prompts-page .prompt-figure figcaption { padding: 11px; }
}

/* Video generator alignment: keep the public form readable and complete. */
.video-tool-heading { margin-bottom: 18px; }
.video-tool-heading h3 { margin: 0 0 8px; color: #172c58; font-size: 19px; line-height: 1.45; }
.video-tool-heading h3 small { display: inline-block; margin-left: 8px; border-radius: 999px; padding: 4px 8px; background: #edf2ff; color: #5368a1; font-size: 11px; font-weight: 700; vertical-align: middle; }
.video-tool-heading p { margin: 0; color: #617493; font-size: 12px; line-height: 1.65; }
.invite-note { margin: 16px 0 18px; border: 1px solid #b6c8e4; border-radius: 10px; padding: 12px 14px; background: #eef5ff; color: #38547e; font-size: 12px; line-height: 1.6; }
.video-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.video-control { display: grid; gap: 7px; min-width: 0; }
.video-control label { color: #31476d; font-size: 12px; font-weight: 700; line-height: 1.45; }
.video-control label em { display: block; color: #7688a7; font-size: 10px; font-style: normal; font-weight: 500; }
.video-control select { width: 100%; min-height: 48px; border: 1px solid #bdcde3; border-radius: 12px; padding: 0 12px; background: #fff; color: #24385c; }
.duration-control { align-content: start; }
.duration-control > strong { display: grid; min-height: 48px; place-items: center; border: 1px solid #d6dff0; border-radius: 12px; background: #fff; color: #a379d8; font-size: 14px; }
.duration-control input { width: 100%; accent-color: #408ce8; }
.aspect-control { grid-column: 1; }
.video-tip { grid-column: 2 / -1; align-self: end; border: 1px solid #cfc6ef; border-radius: 12px; padding: 14px; background: #f1efff; color: #465377; font-size: 12px; line-height: 1.55; }
.video-tip strong { margin-right: 10px; color: #4b63a8; }
.video-provider-hint { grid-column: 1 / -1; color: #2366a8; font-size: 12px; font-weight: 700; }
.video-upload { min-height: 150px; margin-top: 18px; border-radius: 16px; background: #f9fbff; }
.video-upload small { max-width: 760px; color: #4f6488; font-size: 11px; line-height: 1.55; }
.video-upload .file-status { color: #345aa4; }
.seedance-upload-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 10px; border: 1px solid #c9ddf5; border-radius: 8px; padding: 8px; background: #fbfdff; }
.seedance-upload-preview[hidden] { display: none; }
.seedance-asset-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 6px; align-items: center; min-width: 0; min-height: 46px; border: 1px solid #d8e5f3; border-radius: 8px; padding: 5px 6px; background: #f1f7ff; }
.seedance-asset-media { display: grid; width: 42px; height: 38px; place-items: center; overflow: hidden; border-radius: 6px; background: #e3effd; color: #3475b9; font-size: 10px; font-weight: 700; }
.seedance-asset-media img, .seedance-asset-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.seedance-asset-media.is-audio { background: #e7e2ff; color: #5a47bc; }
.seedance-asset-info { min-width: 0; }
.seedance-asset-info strong, .seedance-asset-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seedance-asset-info strong { color: #31537e; font-size: 11px; }
.seedance-asset-info small { margin-top: 3px; color: #6a82a2; font-size: 9px; }
.seedance-asset-remove { border: 1px solid #f0c5ca; border-radius: 6px; padding: 5px 6px; background: #fff3f4; color: #c95a65; font-size: 10px; cursor: pointer; }
.seedance-asset-more { color: #6680a2; font-size: 11px; }
.seedance-upload-warning { margin-top: 8px; border: 1px solid #f0c5ca; border-radius: 10px; padding: 9px 11px; background: #fff3f4; color: #bc4f5b; font-size: 11px; }
.ai-page.bluewhite .tool-textarea > label { display: flex; align-items: center; gap: 18px; }
.seedance-inline-message { color: #d34857; font-size: 12px; font-weight: 700; line-height: 1.35; }
.seedance-mention-remove { display: none; }
.seedance-mention-menu { position: absolute; z-index: 8; top: 34px; left: 10px; display: flex; gap: 6px; max-width: min(440px, calc(100% - 20px)); max-height: 156px; overflow: auto; border: 1px solid #9ab9e8; border-radius: 8px; padding: 6px; background: #fff; box-shadow: 0 8px 20px rgba(39,84,143,.16); }
.seedance-mention-menu[hidden] { display: none; }
.seedance-mention-option { position: relative; flex: 0 0 64px; width: 64px; height: 58px; overflow: hidden; border: 1px solid #c9ddf5; border-radius: 6px; padding: 0; background: #f5f9ff; cursor: pointer; }
.seedance-mention-option:hover { border-color: #3782db; }
.seedance-mention-media { display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; background: #eaf2ff; color: #4e64a0; font-size: 10px; font-weight: 700; }
.seedance-mention-media img, .seedance-mention-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.seedance-mention-token { position: absolute; right: 3px; bottom: 3px; border-radius: 4px; padding: 2px 3px; background: rgba(17,42,87,.78); color: #fff; font-size: 9px; line-height: 1; }
.ai-page.bluewhite .tool-textarea { position: relative; }
@media (max-width: 820px) { .seedance-upload-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .seedance-upload-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; }.seedance-asset-card { min-width: 0; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 5px; }.seedance-asset-media { width: 38px; height: 36px; } }
.video-summary { margin: 13px 0 2px; color: #5c6f90; font-size: 11px; }
.upscale-button { border: 0; border-radius: 8px; padding: 11px 14px; background: #27315f; color: #fff; font-weight: 700; }
@media (max-width: 900px) { .video-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }.video-tip { grid-column: 1 / -1; }.aspect-control { grid-column: auto; } }
@media (max-width: 560px) { .video-controls { grid-template-columns: 1fr; }.video-tip { grid-column: auto; } }

/* Chat readability and responsive sending feedback. */
.chat-main { grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-messages { min-height: 0; overscroll-behavior: contain; scroll-behavior: smooth; }
.chat-message { color: #d8dced; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message.user { background: #fff; color: #101828; border: 1px solid #d9e1ec; box-shadow: 0 5px 14px rgba(15, 23, 42, .12); }
.chat-message.user strong, .chat-message.user p { color: #101828; }
.chat-message.assistant.is-pending { color: #aab2c9; opacity: .82; }
.chat-message.assistant.is-error { border: 1px solid #e16b7a; color: #ffd9de; }
.chat-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0; }
.chat-attachment { max-width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 4px 8px; background: #f1f5f9; color: #334155; font-size: 11px; overflow-wrap: anywhere; }
.chat-image-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0; }
.chat-image-preview { display: block; width: 100%; max-width: 132px; height: 86px; border: 1px solid #cbd5e1; border-radius: 7px; background: #f8fafc; object-fit: cover; }
.chat-message-model { display: block; margin-bottom: 6px; color: #8f3f5b !important; font-size: 11px; font-weight: 700; }

/* Light chat surface: keep the model workspace readable on white. */
.chat-layout { border-color: #d7e2ef; background: #fff; color: #101828; }
.chat-history { border-right-color: #d7e2ef; background: #f8fbff; }
.chat-history > div { color: #101828; }
.chat-history > div button { color: #667085; }
.new-chat { border-color: #b9d2f5; background: #eef6ff; color: #174ea6; }
.empty-mini { color: #667085; }
.chat-main { background: #fff; color: #101828; }
.model-grid { border-bottom-color: #d7e2ef; }
.model-option { border-color: #d7e2ef; background: #fff; color: #344054; }
.model-option span { color: #2563eb; }
.model-option strong { color: #101828; }
.model-option small { color: #667085; }
.model-option.active { border-color: #6b8ff2; background: #eef4ff; }
.model-option.active strong { color: #101828; }
.chat-messages { background: #fff; }
.chat-empty { color: #667085; }
.chat-empty strong { color: #101828; }
.chat-empty span { color: #667085; }
.chat-message.assistant { border: 1px solid #dbe5f0; background: #f1f5fb; color: #101828; }
.chat-message.assistant strong, .chat-message.assistant p { color: #101828; }
.chat-message.assistant.is-pending { color: #667085; }
.chat-message.assistant.is-error { border-color: #e16b7a; color: #b42318; }
.chat-composer { border-top-color: #d7e2ef; background: #fff; }
.chat-composer textarea { border-color: #b8c7dd; background: #fff; color: #101828; }
.chat-composer textarea::placeholder { color: #667085; }
.chat-composer .file-status { color: #667085; }
.chat-composer .small-button { border-color: #b8c7dd; background: #fff; color: #344054; }
.chat-layout { height: 900px; max-height: none; }
.chat-main { min-height: 0; overflow: hidden; }
.chat-history { min-height: 0; overflow-y: auto; }
.chat-messages { min-height: 0; overflow-x: hidden; overflow-y: auto; }
.chat-main:has(.model-section-label) { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
.chat-main:has(.model-section-label) .model-grid { align-content: start; }
.model-option { border-color: #b9d2f5; background: #eef4ff; }
.model-option:hover { border-color: #8db1ed; background: #e4efff; }
.model-option.active { border-color: #733149; background: #8f3f5b; box-shadow: 0 6px 14px rgba(143, 63, 91, .2); }
.model-option.active span { color: #ffe0e8; }
.model-option.active strong { color: #fff; }
.model-option.active small { color: #f5cbd6; }

/* Drag handles for resizing the chat workspace and composer vertically. */
.chat-layout { position: relative; }
.chat-main { position: relative; }
.chat-composer { position: relative; }
.chat-resize-handle { position: absolute; z-index: 5; display: block; border: 0; padding: 0; background: transparent; touch-action: none; cursor: ns-resize; }
.chat-resize-handle::before { content: ''; position: absolute; left: 50%; top: 50%; width: 46px; height: 4px; border-top: 2px solid #9db5d7; border-bottom: 2px solid #9db5d7; border-radius: 3px; transform: translate(-50%, -50%); opacity: .9; }
.chat-resize-handle:hover::before, .chat-resize-handle:focus-visible::before { border-color: #8f3f5b; opacity: 1; }
.chat-composer-resize { top: -10px; left: 50%; width: 84px; height: 20px; transform: translateX(-50%); }
.chat-layout-resize { left: 50%; right: auto; bottom: 3px; width: 66px; height: 16px; transform: translateX(-50%); }
.is-chat-resizing, .is-chat-resizing * { user-select: none !important; cursor: ns-resize !important; }
.chat-layout-resize { display: none !important; }
.chat-composer { display: flex; flex-direction: column; }
.chat-composer textarea { order: 1; flex: 0 0 auto; }
.chat-composer-resize { position: relative; top: auto; left: auto; order: 2; width: 84px; height: 14px; margin: 1px auto 0; transform: none; }
.chat-composer > div { order: 3; }
.chat-attachment-preview-list { display: flex; flex-wrap: wrap; gap: 5px; max-height: 100px; margin: 7px 0 2px; overflow: auto; }
.chat-attachment-preview { position: relative; display: grid; width: 74px; min-width: 70px; gap: 2px; border: 1px solid #cbd5e1; border-radius: 5px; padding: 3px; background: #f8fbff; color: #101828; }
.chat-attachment-preview-media { display: block; width: 100%; height: 42px; border-radius: 3px; background: #e5edf7; object-fit: cover; }
.chat-attachment-preview-audio { width: 100%; margin: 5px 0; }
.chat-attachment-file-icon { display: grid; place-items: center; height: 42px; border-radius: 3px; background: #e8eef8; color: #31527d; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.chat-attachment-preview-name { overflow: hidden; color: #101828; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-preview-meta { overflow: hidden; color: #667085; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-remove { position: absolute; top: -6px; right: -6px; z-index: 2; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #fff; border-radius: 50%; padding: 0; background: #8f3f5b; color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.chat-attachment-remove:hover { background: #6f2944; }
.chat-message-attachment-previews { max-height: none; }

/* Keep attachment previews in the composer row and make them compact. */
.chat-composer > div { flex-wrap: nowrap; min-width: 0; gap: 8px; overflow: hidden; }
.chat-composer > div .chat-upload-button { order: 1; flex: 0 0 auto; white-space: nowrap; }
.chat-composer > div .file-status { order: 2; flex: 0 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer > div > .chat-attachment-preview-list { display: flex; position: static; order: 3; flex: 1 1 420px; width: auto; min-width: 0; max-width: none; height: 50px; max-height: 50px; margin: 0; padding: 2px 4px; align-self: center; align-items: center; justify-content: flex-start; flex-flow: row nowrap; overflow-x: auto; overflow-y: hidden; }
.chat-composer > div > .chat-attachment-preview-list:empty { display: none; }
.chat-composer > div > [data-chat-send] { order: 4; flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.chat-attachment-preview { flex: 0 0 50px; width: 50px; min-width: 50px; height: 44px; grid-template-rows: 26px 9px 7px; gap: 1px; border-radius: 4px; padding: 2px; cursor: pointer; }
.chat-attachment-preview-media { height: 26px; border-radius: 2px; }
.chat-attachment-preview-audio { width: 46px; height: 25px; margin: 0; }
.chat-attachment-file-icon { height: 26px; border-radius: 2px; font-size: 8px; }
.chat-attachment-preview-name { font-size: 8px; line-height: 9px; }
.chat-attachment-preview-meta { font-size: 6px; line-height: 7px; }
.chat-attachment-open { position: absolute; top: 2px; left: 2px; z-index: 2; display: grid; place-items: center; width: 14px; height: 14px; border: 1px solid #fff; border-radius: 50%; padding: 0; background: rgba(23, 78, 166, .88); color: #fff; font-size: 9px; line-height: 1; cursor: pointer; }
.chat-attachment-open:hover { background: #174ea6; }
.chat-attachment-remove { top: -5px; right: -5px; width: 15px; height: 15px; font-size: 11px; }
.chat-message-attachment-previews { display: flex; flex: none; width: 100%; height: auto; max-height: none; margin: 8px 0 0; padding: 0; flex-wrap: wrap; overflow: visible; }

/* In-page preview for uploaded images, video, audio, PDF, and text files. */
.chat-attachment-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, .7); }
.chat-attachment-modal-inner { position: relative; display: flex; width: min(860px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid #d7e2ef; border-radius: 10px; padding: 36px 18px 18px; background: #fff; box-shadow: 0 18px 50px rgba(15, 23, 42, .28); }
.chat-attachment-modal-close { position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #d7e2ef; border-radius: 50%; padding: 0; background: #fff; color: #344054; font-size: 20px; line-height: 1; cursor: pointer; }
.chat-attachment-modal-close:hover { background: #f1f5fb; color: #8f3f5b; }
.chat-attachment-modal-content { display: block; max-width: 100%; max-height: calc(100vh - 110px); margin: auto; object-fit: contain; }
img.chat-attachment-modal-content, video.chat-attachment-modal-content { border-radius: 6px; background: #f8fbff; }
audio.chat-attachment-modal-content { width: min(560px, 100%); }
iframe.chat-attachment-modal-content { width: min(820px, 100%); height: min(70vh, 680px); border: 1px solid #d7e2ef; background: #f8fbff; }
pre.chat-attachment-modal-content { width: 100%; max-height: calc(100vh - 110px); overflow: auto; margin: 0; padding: 14px; border-radius: 6px; background: #f8fbff; color: #101828; font: 12px/1.6 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-attachment-modal-file { max-width: 620px; margin: auto; color: #101828; line-height: 1.6; text-align: center; }
.chat-attachment-modal-file strong { display: block; overflow-wrap: anywhere; }
.chat-attachment-modal-file a { color: #174ea6; font-weight: 700; }
@media (max-width: 640px) {
  .chat-layout { height: min(900px, max(560px, calc(100vh - 24px))); }
  .chat-composer > div { gap: 5px; }
  .chat-composer > div .file-status { flex-basis: 86px; font-size: 9px; }
  .chat-composer > div > .chat-attachment-preview-list { max-width: none; }
  .chat-attachment-modal { padding: 10px; }
  .chat-attachment-modal-inner { width: calc(100vw - 20px); max-height: calc(100vh - 20px); padding: 34px 10px 10px; }
}

/* Qinghe workbench: compact blue-white tool console. */
.ai-page.bluewhite {
  padding: 20px clamp(16px, 3vw, 48px) 52px;
  background: #f5f7fa;
  color: #182b4b;
}
.ai-page.bluewhite .ai-overview {
  max-width: 1440px;
  margin: 0 auto 18px;
  border: 1px solid #dce5f0;
  border-radius: 6px;
  padding: 24px 28px;
  background: #fff;
  background-image: none;
  box-shadow: none;
}
.ai-page.bluewhite .ai-kicker,
.ai-page.bluewhite .agent-badge,
.ai-page.bluewhite .reward-label {
  border: 0;
  border-radius: 3px;
  padding: 4px 8px;
  background: #eaf3ff;
  color: #1b67b7;
  font-weight: 700;
}
.ai-page.bluewhite .ai-intro h1 {
  margin: 12px 0 10px;
  color: #172b4d;
  font-size: 30px;
  line-height: 1.28;
}
.ai-page.bluewhite .ai-intro p { color: #60708a; line-height: 1.7; }
.ai-page.bluewhite .theme-switch { margin-top: 18px; color: #5e6d84; }
.ai-page.bluewhite .theme-switch button {
  border: 1px solid #d1dbe8;
  border-radius: 4px;
  padding: 7px 12px;
  background: #fff;
  color: #4a5c76;
  box-shadow: none;
}
.ai-page.bluewhite .theme-switch button.active {
  border-color: #2f80d9;
  background: #2f80d9;
  color: #fff;
  box-shadow: none;
}
.ai-page.bluewhite .mentor-button,
.ai-page.bluewhite .diamond-button {
  border-radius: 4px;
  padding: 10px 14px;
  box-shadow: none;
  font-weight: 700;
}
.ai-page.bluewhite .mentor-button { background: #287fd8; }
.ai-page.bluewhite .diamond-button { background: #eb8a2e; }
.ai-page.bluewhite .reward-card,
.ai-page.bluewhite .invite-card {
  border-radius: 5px;
  box-shadow: none;
}
.ai-page.bluewhite .reward-card { padding: 16px; background: #f8fbff; }
.ai-page.bluewhite .invite-card { margin-top: 10px; padding: 12px 14px; background: #f0f7ff; }
.ai-page.bluewhite .reward-day { border-radius: 4px; background: #fff; }

.ai-page.bluewhite .ai-workspace {
  max-width: 1440px;
  grid-template-columns: minmax(248px, 278px) minmax(0, 1fr);
  gap: 16px;
  margin: 0 auto;
  align-items: stretch;
}
.ai-page.bluewhite .engine-sidebar,
.ai-page.bluewhite .agent-panel {
  border: 1px solid #dce5f0;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}
.ai-page.bluewhite .engine-sidebar {
  padding: 12px;
  align-self: start;
}
.ai-page.bluewhite .engine-brand { padding: 6px 8px 14px; border-color: #e2e9f1; }
.ai-page.bluewhite .engine-brand span { color: #62728b; font-size: 11px; }
.ai-page.bluewhite .engine-brand strong { margin-top: 4px; color: #1c3155; font-size: 16px; }
.ai-page.bluewhite .engine-group { padding: 14px 0 4px; }
.ai-page.bluewhite .engine-group + .engine-group { border-color: #e2e9f1; }
.ai-page.bluewhite .engine-group-head { padding: 0 8px; }
.ai-page.bluewhite .engine-group-head span { color: #7b899e; font-size: 10px; }
.ai-page.bluewhite .engine-group-head strong { margin-top: 4px; color: #253a5d; font-size: 13px; }
.ai-page.bluewhite .engine-group-head em { margin: 6px 0 10px; color: #718098; font-size: 11px; }
.ai-page.bluewhite .engine-sidebar .tool-list { gap: 3px; }
.ai-page.bluewhite .engine-sidebar .tool-item {
  min-height: 39px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 8px;
  background: transparent;
  color: #40526f;
  text-align: left;
}
.ai-page.bluewhite .engine-sidebar .tool-item:hover,
.ai-page.bluewhite .engine-sidebar .tool-item.active {
  border-color: #cbdff5;
  background: #eaf4ff;
  box-shadow: inset 3px 0 0 #2e80d8;
}
.ai-page.bluewhite .engine-sidebar .tool-item strong { color: inherit; font-size: 12px; }
.ai-page.bluewhite .engine-sidebar .tool-num { color: #2e80d8; }

.ai-page.bluewhite .agent-panel { padding: 22px 24px 26px; }
.ai-page.bluewhite .agent-panel-top { padding: 0 0 16px; border-bottom: 1px solid #e3e9f1; }
.ai-page.bluewhite .agent-panel-top h2 {
  margin: 10px 0 7px;
  color: #1b3155;
  font-size: 25px;
  letter-spacing: 0;
}
.ai-page.bluewhite .agent-panel-top p { color: #66758c; }
.ai-page.bluewhite .prompt-link {
  border-radius: 4px;
  padding: 7px 10px;
  background: #eaf4ff;
  color: #1f6cb9;
}
.ai-page.bluewhite .cost-box {
  border: 1px solid #d9e6f4;
  border-radius: 4px;
  padding: 12px;
  background: #f6faff;
}
.ai-page.bluewhite .cost-box strong { color: #2b5e96; }
.ai-page.bluewhite .cost-box button {
  border-radius: 4px;
  background: #287fd8;
}
.ai-page.bluewhite .record-note {
  margin-top: 14px;
  border: 1px solid #dce9f6;
  border-radius: 4px;
  padding: 10px 12px;
  background: #f7fbff;
  color: #60718a;
}
.ai-page.bluewhite .agent-card {
  margin-top: 14px;
  border: 1px solid #dfe7f0;
  border-radius: 5px;
  padding: 20px;
  background: #fff;
}
.ai-page.bluewhite .tool-card { min-height: 0; }
.ai-page.bluewhite .tool-card input,
.ai-page.bluewhite .tool-card select,
.ai-page.bluewhite .tool-card textarea,
.ai-page.bluewhite .agent-prompt {
  border-color: #cbd7e5;
  border-radius: 4px;
  background: #fff;
}
.ai-page.bluewhite .generate-button { border-radius: 4px; background: #287fd8; }
.ai-page.bluewhite .reference-button,
.ai-page.bluewhite .clear-button { border-color: #cbd7e5; border-radius: 4px; background: #fff; color: #48607f; }
.ai-page.bluewhite .history-panel {
  margin-top: 14px;
  border: 1px solid #dce5f0;
  border-radius: 5px;
  padding: 16px 18px;
  background: #fff;
}
.ai-page.bluewhite .result-card { border-color: #e0e7ef; border-radius: 4px; background: #fbfdff; }
.ai-page.bluewhite .result-thumb { border-radius: 3px; background: #e8f2ff; }
.ai-page.bluewhite .refresh-button { border-color: #cbd7e5; border-radius: 4px; background: #fff; color: #43607f; }

/* Prompt reverse workspace */
.reverse-studio { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }
.reverse-intro { display: grid; gap: 8px; }
.reverse-intro > span { justify-self: start; border: 1px solid #cbdcf2; border-radius: 999px; padding: 7px 12px; background: #eef6ff; color: #2563eb; font-size: 12px; }
.reverse-intro h2 { margin: 2px 0 0; color: #142748; font-size: 28px; letter-spacing: 0; }
.reverse-intro p { margin: 0; color: #607593; font-size: 14px; }
.reverse-cost-row { border: 1px solid #cbdcf2; border-radius: 14px; padding: 15px 18px; background: #f8fbff; color: #526985; font-size: 14px; }
.reverse-cost-row strong { color: #142748; }
.reverse-section-label { color: #1c304f; font-size: 14px; font-weight: 700; }
.reverse-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.reverse-mode-grid .choice { display: flex; align-items: center; gap: 13px; min-height: 84px; border: 1px solid #9cc1fb; border-radius: 16px; padding: 16px; background: #f9fcff; color: #213757; text-align: left; }
.reverse-mode-grid .choice:focus { outline: none; }
.reverse-mode-grid .choice:focus-visible { outline: 3px solid rgba(37, 99, 235, .24); outline-offset: 2px; }
.reverse-mode-grid .choice.active { border-color: #4c94ff; background: #edf6ff; box-shadow: 0 8px 18px rgba(54,119,211,.08); }
.reverse-mode-grid .choice strong, .reverse-mode-grid .choice small { display: block; }
.reverse-mode-grid .choice small { margin-top: 5px; color: #607593; font-size: 12px; }
.reverse-choice-icon { display: grid; width: 32px; height: 32px; place-items: center; flex: 0 0 32px; border: 1px solid #a9a2ff; border-radius: 50%; color: #64748b; font-size: 18px; }
.reverse-mode-grid .choice.active .reverse-choice-icon { border: 0; background: linear-gradient(135deg,#6c63ff,#45bdfa); color: #fff; }
.reverse-dropzone { min-height: 130px; border-color: #a8c4ea !important; border-radius: 18px; background: #fbfdff !important; }
.reverse-upload-symbol { color: #8068ff; font-size: 28px; line-height: 1; }
.reverse-file-card { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 14px; align-items: center; border: 1px solid #c9ddfb; border-radius: 14px; padding: 16px; background: #ebf4ff; color: #28517e; }
.reverse-file-card[hidden], .reverse-progress[hidden], .reverse-dropzone[hidden], .reverse-media-preview[hidden] { display: none !important; }
.reverse-media-preview { overflow: hidden; border: 1px solid #a8c4ea; border-radius: 18px; background: #0f1b2d; }
.reverse-media-preview video { display: block; width: 100%; max-height: 380px; background: #0f1b2d; object-fit: contain; }
.reverse-media-preview video[hidden], .reverse-media-preview img[hidden] { display: none !important; }
.reverse-media-preview:has(img:not([hidden])) { width: min(100%, 640px); margin: 0 auto; background: #edf4ff; }
.reverse-media-preview img { display: block; width: 100%; height: clamp(240px, 44vh, 340px); max-width: 100%; max-height: none; margin: 0; background: #edf4ff; object-fit: contain; }
.reverse-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; background: #ebf4ff; color: #21466e; }
.reverse-preview-footer strong, .reverse-preview-footer small { display: block; overflow-wrap: anywhere; }
.reverse-preview-footer strong { font-size: 13px; }
.reverse-preview-footer small { margin-top: 4px; color: #4e7096; font-size: 12px; }
.reverse-preview-footer > div:last-child { display: flex; flex: 0 0 auto; gap: 8px; }
.reverse-preview-footer button { border: 1px solid #b6cceb; border-radius: 7px; padding: 7px 10px; background: #fff; color: #28517e; font-size: 12px; }
.reverse-preview-footer [data-reverse-remove] { border-color: #efb7be; background: #fff5f6; color: #ce535c; }
.reverse-file-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: #ffd052; color: #233451; font-size: 25px; }
.reverse-file-card strong { display: block; color: #21466e; font-size: 14px; overflow-wrap: anywhere; }
.reverse-file-card p { margin: 6px 0 0; color: #4e7096; font-size: 12px; }
.reverse-file-card b { color: #00874d; }
.reverse-file-card button { border: 1px solid #efb7be; border-radius: 999px; padding: 7px 10px; background: #fff5f6; color: #ce535c; font-size: 12px; }
.reverse-actions { display: grid; }
.reverse-submit { width: 100%; min-height: 54px; border-radius: 18px !important; background: linear-gradient(100deg,#5c9cf4,#71d5ef) !important; font-size: 17px; }
.reverse-task-copy { color: #526985; font-size: 12px; line-height: 1.75; }
.reverse-studio .live-task-notice { margin: 0; border-color: #c9ddfb; border-radius: 14px; background: #eff7ff; color: #1970d1; }
.reverse-progress { border: 1px solid #c9ddfb; border-radius: 18px; padding: 16px; background: #f5fbff; }
.reverse-progress > div { display: flex; align-items: center; justify-content: space-between; color: #173961; }
.reverse-progress > div b { color: #1474de; }
.reverse-progress > span { display: block; height: 10px; margin-top: 13px; overflow: hidden; border-radius: 99px; background: #dbe9f9; }
.reverse-progress > span i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#267ef0,#63d2ec); transition: width .55s ease; }
.reverse-progress p { margin: 11px 0 0; color: #6680a1; font-size: 12px; }
.reverse-progress.is-pending > span i { animation: none; }
.reverse-progress.is-success > span i { animation: none; background: #38b877; }
.reverse-progress.is-error > span i { animation: none; background: #ee6f78; }
.reverse-result { margin-top: 18px; border: 1px solid #c9ddfb; border-radius: 18px; padding: 20px; background: #fbfdff; }
.reverse-result h3 { margin: 0 0 14px; color: #1d3658; font-size: 18px; }
.reverse-result-summary { border-radius: 14px; padding: 15px; background: #e8f2ff; color: #35608d; white-space: pre-line; font-size: 13px; line-height: 1.75; }
.reverse-result-content { max-height: 460px; margin-top: 16px; overflow: auto; padding: 4px 10px 4px 0; color: #243a59; white-space: pre-wrap; font-size: 14px; line-height: 1.9; }
.result-details h4 { overflow-wrap: anywhere; }

/* Reference-style AI workspace: keep the creation surface in the first viewport. */
.ai-page.bluewhite { padding: 14px clamp(14px, 3vw, 42px) 34px; background-color: #f3f8ff; background-image: linear-gradient(rgba(163, 196, 233, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(163, 196, 233, .16) 1px, transparent 1px); background-size: 20px 20px; }
.ai-page.bluewhite .ai-overview { display: grid; }
.ai-page.bluewhite .ai-workspace { max-width: 1180px; grid-template-columns: 288px minmax(0, 1fr); gap: 18px; height: calc(100dvh - 92px); min-height: 620px; max-height: 880px; }
.ai-page.bluewhite .engine-sidebar,
.ai-page.bluewhite .agent-panel { border-color: #c9ddf5; border-radius: 24px; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 28px rgba(42, 91, 152, .08); }
.ai-page.bluewhite .engine-sidebar { padding: 14px; }
.ai-page.bluewhite .engine-brand { padding: 5px 7px 12px; }
.ai-page.bluewhite .engine-group { padding: 12px 0 5px; }
.ai-page.bluewhite .engine-sidebar .tool-list { gap: 7px; }
.ai-page.bluewhite .engine-sidebar .tool-item { min-height: 48px; border-color: #d1e1f3; border-radius: 14px; padding: 9px 10px; background: #fbfdff; }
.ai-page.bluewhite .engine-sidebar .tool-item:hover,
.ai-page.bluewhite .engine-sidebar .tool-item.active { border-color: #7facf0; background: linear-gradient(100deg, #eef6ff, #e5edff); box-shadow: none; }
.ai-page.bluewhite .engine-sidebar .tool-num { display: grid; width: 28px; height: 28px; place-items: center; flex-basis: 28px; border: 1px solid #bed8fb; border-radius: 10px; background: #edf5ff; color: #1974cf; }
.ai-page.bluewhite .agent-panel { padding: 20px; }
.ai-page.bluewhite .agent-panel-top,
.ai-page.bluewhite .record-note { display: none; }
.ai-page.bluewhite .agent-card { margin: 0; border: 0; border-radius: 0; padding: 0; background: transparent; }
.ai-page.bluewhite .video-tool-heading { padding-bottom: 12px; border-bottom: 1px solid #e1ebf7; }
.ai-page.bluewhite .video-tool-heading h3 { font-size: 18px; }
.ai-page.bluewhite .video-tool-heading p { margin-bottom: 0; }
.ai-page.bluewhite .invite-note { margin-top: 12px; border-color: #a9ccfb; border-radius: 14px; background: #eff7ff; color: #245e9d; }
.ai-page.bluewhite .video-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.ai-page.bluewhite .video-control select,
.ai-page.bluewhite .duration-control > strong { min-height: 58px; border-color: #c7dcf4; border-radius: 15px; font-weight: 700; }
.ai-page.bluewhite .video-upload { min-height: 128px; margin-top: 16px; border: 1px dashed #afcff3; border-radius: 20px; background: #f8fbff; }
.ai-page.bluewhite .video-upload::before { content: ''; position: absolute; inset: 12px; border: 1px dashed #c8dcf2; border-radius: 14px; pointer-events: none; }
.ai-page.bluewhite .video-upload > :not(input) { position: relative; z-index: 1; }
.ai-page.bluewhite .tool-textarea { margin-top: 14px; }
.ai-page.bluewhite .tool-textarea textarea { min-height: 148px; border-radius: 16px; }
.ai-page.bluewhite .agent-actions { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 12px; align-items: stretch; }
.ai-page.bluewhite .agent-actions .generate-button { grid-column: 2; grid-row: 1; min-height: 74px; border-radius: 18px; background: linear-gradient(135deg, #278be8, #46c4e8); font-size: 15px; }
.ai-page.bluewhite .agent-actions .upscale-button { grid-column: 2; grid-row: 2; min-height: 62px; border: 1px solid #b9d7f7; border-radius: 16px; background: #fff; color: #1974cf; }
.ai-page.bluewhite .agent-actions .reference-button { grid-column: 1; grid-row: 1; justify-self: start; }
.ai-page.bluewhite .agent-actions .cost-inline { grid-column: 1; grid-row: 2; align-self: center; margin: 0; }
.ai-page.bluewhite .agent-actions .clear-button { grid-column: 1; grid-row: 3; justify-self: start; }
.ai-page.bluewhite .agent-actions .upscale-completed-result { grid-column: 1; grid-row: 1 / span 2; min-width: 0; width: min(520px, 100%); align-self: stretch; }
.ai-page.bluewhite .agent-actions .upscale-completed-result:empty { display: none; }
.ai-page.bluewhite .upscale-completed-result .process-result { display: grid; gap: 8px; min-height: 136px; margin: 0; padding: 10px; border-color: #a8bbd6; background: #f7fbff; }
.ai-page.bluewhite .upscale-completed-result .process-result > video { display: block; width: 100%; max-height: 248px; border-radius: 6px; background: #0f1b2d; object-fit: contain; }
.ai-page.bluewhite .history-panel { border-radius: 18px; }
.qh-download-studio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.qh-download-pane { display: grid; align-content: start; gap: 14px; min-width: 0; border: 1px solid #b8d4f4; border-radius: 16px; padding: 16px; background: #f8fbff; }
.qh-download-pane-heading { display: flex; gap: 10px; align-items: flex-start; }
.qh-download-pane-heading h3 { margin: 1px 0 5px; color: #13295b; font-size: 16px; }
.qh-download-pane-heading p { margin: 0; color: #587095; font-size: 12px; line-height: 1.55; }
.qh-download-pane-index { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid #9fc7fb; border-radius: 9px; background: #eaf4ff; color: #1974cf; font-size: 11px; font-weight: 800; }
.qh-download-pane .tool-textarea { margin: 0; }
.qh-download-pane .tool-textarea textarea { min-height: 182px; resize: vertical; }
.qh-download-upload { min-height: 255px; margin: 0; border-color: #9ec8f2; background: #fff; overflow: hidden; }
.qh-download-upload [hidden] { display: none !important; }
.qh-download-upload-empty { position: relative; z-index: 1; display: grid; place-items: center; gap: 9px; color: #1974cf; text-align: center; }
.qh-download-upload-empty .upload-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #9ec8f2; border-radius: 10px; background: #eef6ff; font-size: 30px; font-weight: 400; line-height: 1; }
.qh-download-upload-empty strong { color: #1d4e89; font-size: 13px; font-weight: 700; }
.qh-download-upload.is-previewing { border-style: solid; background: #0b1220; }
.qh-download-upload.is-previewing input { inset: auto; width: 1px; height: 1px; z-index: 0; }
.qh-download-upload-video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; background: #0b1220; object-fit: contain; }
.qh-download-upload-remove { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 6px; padding: 0; background: rgba(12, 27, 49, .78); color: #fff; font-size: 21px; line-height: 1; }
.qh-download-upload-remove:hover { background: rgba(185, 28, 28, .92); }
.qh-download-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.qh-download-actions > span { color: #6a7f9e; font-size: 11px; line-height: 1.45; }
.qh-download-actions .generate-button { flex: 0 0 auto; min-height: 44px; border-radius: 10px; padding: 10px 17px; background: linear-gradient(135deg, #267fe7, #31c0df); }
.qh-download-result[hidden] { display: none; }
.qh-download-result { min-width: 0; }.qh-download-result .process-result { margin-top: 0; }.qh-download-result .process-result.live-result > .live-download-video { width: 100%; max-height: 260px; }
.ai-page.bluewhite .agent-panel:has(.qh-motion-workflow) .agent-panel-top { display: flex; margin-bottom: 16px; }
.ai-page.bluewhite .agent-panel:has(.qh-motion-workflow) .record-note { display: block; margin-bottom: 16px; }
.qh-motion-workflow { display: grid; gap: 24px; color: #1b3656; }
.qh-motion-workflow .motion-step { display: grid; gap: 14px; padding: 0 0 24px; border-bottom: 1px solid #d9e7f5; }
.motion-step-copy h4 { margin: 0 0 5px; color: #16345a; font-size: 17px; }
.motion-step-copy p { margin: 0; color: #5d7490; font-size: 13px; line-height: 1.65; }
.motion-cost { color: #173b68; font-size: 14px; }
.qh-motion-workflow .tool-textarea { margin: 0; }
.qh-motion-workflow .tool-textarea textarea { min-height: 118px; border-color: #aac9ea; border-radius: 12px; }
.motion-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.motion-upload-grid .tool-upload { min-height: 176px; margin: 0; border: 1px solid #bdd7f1; border-radius: 18px; background: #fbfdff; }
.motion-upload-grid .tool-upload:hover { border-color: #69aaf0; background: #f7fbff; }
.motion-action-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #34577b; font-size: 13px; }
.motion-action-row .generate-button { min-width: 132px; min-height: 48px; border-radius: 13px; background: linear-gradient(135deg, #2487e8, #42c7e7); }
.motion-action-row .generate-button:disabled { cursor: not-allowed; opacity: .55; }
.motion-task-progress { display: grid; gap: 5px; border: 1px dashed #bfd6ee; border-radius: 12px; padding: 14px 16px; background: #fcfeff; color: #758ba2; font-size: 12px; }
.motion-task-progress strong { color: #496a8d; font-size: 13px; }
.motion-clear-row { display: flex; justify-content: flex-end; }
.motion-clear-row .clear-button { border-color: #bfd2e7; border-radius: 7px; background: #fff; color: #315879; }
@media (max-width: 640px) { .motion-upload-grid { grid-template-columns: 1fr; }.motion-action-row { align-items: stretch; flex-direction: column; }.motion-action-row .generate-button { width: 100%; } }
@media (min-width: 901px) {
  .qh-download-upload-pane .qh-download-result .process-result { align-content: start; }
  .qh-download-upload-pane .qh-download-actions { position: relative; top: .6px; }
}
@media (max-width: 900px) { .qh-download-studio { grid-template-columns: 1fr; }.qh-download-pane .tool-textarea textarea { min-height: 142px; } }
@media (max-width: 980px) {
  .ai-page.bluewhite .ai-workspace { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .ai-page.bluewhite .video-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ai-page.bluewhite .video-controls { grid-template-columns: 1fr; }
  .ai-page.bluewhite .agent-actions { grid-template-columns: 1fr; }
  .ai-page.bluewhite .agent-actions .generate-button,
  .ai-page.bluewhite .agent-actions .upscale-button,
  .ai-page.bluewhite .agent-actions .reference-button,
  .ai-page.bluewhite .agent-actions .cost-inline,
  .ai-page.bluewhite .agent-actions .clear-button { grid-column: auto; grid-row: auto; justify-self: stretch; }
}

/* Keep the tool navigator and active workspace independently scrollable on desktop. */
.ai-page.bluewhite .ai-workspace { height: clamp(520px, calc(100dvh - 150px), 780px); }
.ai-page.bluewhite .engine-sidebar,
.ai-page.bluewhite .agent-panel {
  border-color: #9fc2e8;
  box-shadow: 0 0 0 1px rgba(159, 194, 232, .35);
}
.ai-page .engine-sidebar,
.ai-page .agent-panel {
  border-color: #9fc2e8 !important;
  box-shadow: 0 0 0 1px rgba(159, 194, 232, .35) !important;
}
.ai-page.bluewhite .engine-sidebar,
.ai-page.bluewhite .agent-panel {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.ai-page.bluewhite .engine-sidebar { align-self: stretch; }
.ai-page.bluewhite .engine-sidebar::-webkit-scrollbar,
.ai-page.bluewhite .agent-panel::-webkit-scrollbar { width: 8px; }
.ai-page.bluewhite .engine-sidebar::-webkit-scrollbar-thumb,
.ai-page.bluewhite .agent-panel::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: #b9cbe2; background-clip: content-box; }
@media (max-width: 1080px) {
  .ai-page.bluewhite .ai-workspace { height: auto; }
  .ai-page.bluewhite .engine-sidebar,
  .ai-page.bluewhite .agent-panel { height: auto; max-height: none; overflow: visible; }
}
@media (max-width: 640px) { .reverse-intro h2 { font-size: 23px; }.reverse-mode-grid { grid-template-columns: 1fr; }.reverse-file-card { grid-template-columns: 48px minmax(0,1fr); }.reverse-file-card button { grid-column: 2; justify-self: start; }.reverse-preview-footer { align-items: flex-start; flex-direction: column; }.reverse-result { padding: 15px; }.reverse-result-content { max-height: 340px; } }

@media (max-width: 980px) {
  .ai-page.bluewhite .ai-workspace { grid-template-columns: 1fr; }
  .ai-page.bluewhite .engine-sidebar { overflow: hidden; }
  .ai-page.bluewhite .engine-group { padding: 12px 0; }
  .ai-page.bluewhite .engine-sidebar .tool-list {
    display: flex;
    overflow-x: auto;
    padding: 2px 0 6px;
    scrollbar-width: thin;
  }
  .ai-page.bluewhite .engine-sidebar .tool-item { flex: 0 0 196px; }
}
@media (max-width: 640px) {
  .ai-page.bluewhite { padding: 12px 10px 32px; }
  .ai-page.bluewhite .ai-overview,
  .ai-page.bluewhite .agent-panel { padding: 16px; }
  .ai-page.bluewhite .ai-intro h1 { font-size: 24px; }
  .ai-page.bluewhite .agent-panel-top { gap: 14px; }
  .ai-page.bluewhite .agent-panel-top h2 { font-size: 21px; }
  .ai-page.bluewhite .agent-card,
  .ai-page.bluewhite .history-panel { padding: 14px; }
}

.result-card:has(.result-view-action) {
  grid-template-columns: 112px minmax(0, 1fr) auto auto;
}
.result-view-action { justify-self: end; }
.result-view-action .small-button { white-space: nowrap; }
.reverse-history-text {
  max-width: min(760px, 76vw);
  max-height: min(65vh, 620px);
  overflow: auto;
  color: #263a65;
  font-size: 14px;
  line-height: 1.8;
}

/* History thumbnails must never inherit the original generated image dimensions. */
.history-panel .result-thumb {
  width: 112px;
  height: 76px;
  min-height: 76px;
  overflow: hidden;
}
.history-panel .result-thumb > img {
  display: block;
  width: 112px !important;
  height: 76px !important;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
@media (max-width: 680px) {
  .result-card:has(.result-view-action) { grid-template-columns: 80px minmax(0, 1fr); }
  .result-view-action { grid-column: 2; justify-self: start; }
  .reverse-history-text { max-width: 78vw; }
  .history-panel .result-thumb,
  .history-panel .result-thumb > img { width: 80px !important; height: 58px !important; min-height: 58px; }
}
 .qh-voice-studio{display:grid;gap:16px}.qh-voice-quote,.qh-voice-rule{border:1px solid #dbe6f4;border-radius:10px;padding:11px 13px;background:#fff;color:#71809b;font-size:12px}.qh-voice-quote strong{color:#315fc7}.qh-voice-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.qh-voice-options .choice-field,.qh-voice-options .field{min-width:0}.qh-voice-ref{display:grid;gap:10px}.qh-voice-ref .tool-upload{margin-top:0}.qh-voice-upload-pair{grid-template-columns:repeat(2,minmax(0,1fr))}.qh-voice-upload{min-height:148px}.qh-voice-upload small{max-width:320px}.qh-voice-prompt-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}.qh-voice-prompt-row .tool-textarea{margin:0}.qh-voice-prompt-row .generate-button{min-height:46px;white-space:nowrap}.qh-voice-output{min-height:48px;border:1px dashed #c9d9ef;border-radius:10px;padding:13px;color:#7d8ca4;background:#fbfdff;font-size:12px}.qh-voice-output audio{width:100%;margin-top:8px}@media (max-width:760px){.qh-voice-prompt-row,.qh-voice-upload-pair{grid-template-columns:1fr}.qh-voice-options{grid-template-columns:1fr 1fr}}

.ai-page.bluewhite .agent-card.qh-script-card {
  border: 1px solid #cfe0f3;
  border-radius: 28px;
  padding: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 251, 255, .92));
  box-shadow: 0 18px 46px rgba(31, 97, 165, .08);
  color: #2f4359;
}
.agent-card.tool-card.qh-script-card {
  border: 1px solid #cfe0f3 !important;
  border-radius: 28px !important;
  padding: 30px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 251, 255, .92)) !important;
  box-shadow: 0 18px 46px rgba(31, 97, 165, .08) !important;
  color: #2f4359 !important;
}
.agent-card.tool-card.qh-script-card .tool-upload {
  border-color: #cfe0f3 !important;
  background: rgba(255, 255, 255, .84) !important;
  color: #2f4359 !important;
}
.agent-card.tool-card.qh-script-card .tool-upload:hover,
.agent-card.tool-card.qh-script-card .tool-upload.has-files {
  border-color: #9bbce1;
  background: #fff;
}
.agent-card.tool-card.qh-script-card .tool-upload small { color: #607083 !important; }
.agent-card.tool-card.qh-script-card .tool-upload .file-status { color: #356a9b !important; }
.agent-card.tool-card.qh-script-card .qh-script-fields select {
  border-color: #cfe0f3;
  color: #17263a;
}
.agent-card.tool-card.qh-script-card .tool-textarea textarea {
  border-color: rgba(120, 157, 194, .34);
  background: rgba(255, 255, 255, .95);
  color: #17263a;
}
.qh-script-studio .tool-upload input[data-script-upload] {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.qh-script-studio .tool-upload.has-files .file-status {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.qh-script-upload-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  background: #f8fbff;
}
.qh-script-upload-preview[hidden] { display: none; }
.qh-script-upload-image,
.qh-script-upload-document {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #cfe0f3;
  border-radius: 7px;
  padding: 4px;
  background: #fff;
  cursor: pointer;
}
.qh-script-upload-image:hover,
.qh-script-upload-document:hover,
.qh-script-upload-image:focus-visible,
.qh-script-upload-document:focus-visible { border-color: #86add7; background: #f7fbff; outline: none; }
.qh-script-upload-image img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  object-fit: cover;
}
.qh-script-upload-document > strong {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 5px;
  background: #eef6ff;
  color: #356a9b;
  font-size: 10px;
}
.qh-script-upload-preview figcaption {
  min-width: 0;
  overflow: hidden;
  color: #2f4359;
}
.qh-script-upload-preview figcaption strong,
.qh-script-upload-preview figcaption small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qh-script-upload-preview figcaption strong {
  font-size: 12px;
  line-height: 1.35;
}
.qh-script-upload-preview figcaption small {
  margin-top: 2px;
  color: #71809b;
  font-size: 10px;
}
.qh-script-upload-remove {
  border: 1px solid #fecaca;
  border-radius: 5px;
  padding: 4px 7px;
  background: #fff7f7;
  color: #dc4b4b;
  font-size: 11px;
  cursor: pointer;
}
.qh-script-upload-remove:hover { background: #fee2e2; }
.qh-script-upload-preview figcaption {
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .qh-script-upload-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .qh-script-upload-preview { grid-template-columns: 1fr; }
  .qh-script-reference-menu { max-width: none; margin-left: 0; }
}

/* Keep the storyboard studio independent from shared tool layout overrides. */
.ai-page.bluewhite .qh-storyboard-studio .tool-textarea textarea {
  min-height: 190px !important;
  height: 190px;
  border-color: rgba(120, 157, 194, .34) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #17263a !important;
}
.ai-page.bluewhite .qh-storyboard-studio .agent-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: 100%;
  margin-top: 0;
}
.ai-page.bluewhite .qh-storyboard-studio .agent-actions .generate-button {
  order: 1;
  min-width: 128px;
  background: linear-gradient(135deg, #2384e9, #24c2db) !important;
}
.ai-page.bluewhite .qh-storyboard-studio .agent-actions .small-button { order: 2; }
.ai-page.bluewhite .qh-storyboard-studio .agent-actions .reference-button { order: 3; }
.ai-page.bluewhite .qh-storyboard-studio .agent-actions .cost-inline { order: 4; }
.ai-page.bluewhite .qh-storyboard-studio .agent-actions .clear-button {
  order: 5;
  border-color: #b9d5ef !important;
  background: #fff !important;
  color: #1769c2 !important;
}
@media (max-width: 700px) {
  .ai-page.bluewhite .qh-storyboard-studio .agent-actions .cost-inline { order: 6; }
}

.qh-storyboard-studio .tool-upload input[data-storyboard-upload] {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.qh-storyboard-history { margin-top: 18px; padding: 18px; }
.qh-storyboard-history-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 106px;
  border-color: #c9d9ef;
  background: #f8fbff;
}
.qh-storyboard-history-main { min-width: 0; display: grid; gap: 7px; }
.qh-storyboard-history-main > strong { color: #1d304c; font-size: 14px; line-height: 1.55; }
.qh-storyboard-history-main time, .qh-storyboard-history-main small { color: #627895; font-size: 12px; }
.qh-storyboard-history-main p { margin: 0; color: #38567d; font-size: 13px; }
.qh-storyboard-history-actions { display: flex; gap: 9px; align-items: center; }
.qh-storyboard-history-actions .small-button {
  min-height: 42px;
  border: 1px solid #b9d0ec;
  border-radius: 10px;
  padding: 9px 14px;
  background: #fff;
  color: #176ac5;
  font-weight: 700;
}
.qh-storyboard-history-actions .small-button.is-primary { border-color: #7451f4; background: #7451f4; color: #fff; }
@media (max-width: 680px) {
  .qh-storyboard-history-card { grid-template-columns: 1fr; }
  .qh-storyboard-history-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* Tool 15 follows the reference scene workspace: compact, pale panels and a clear two-step flow. */
.ai-page.bluewhite .tool-card:has(.qh-scene-prompt-step) {
  padding: 18px;
  border-color: #d7e7f2;
  border-radius: 20px;
  background: #f7fbff;
}
.ai-page.bluewhite .qh-scene-prompt-step,
.ai-page.bluewhite .qh-scene-image-step {
  border: 1px solid #d6e6f1;
  border-radius: 18px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(81, 127, 167, .06);
}
.ai-page.bluewhite .qh-scene-prompt-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  grid-template-areas:
    "title title"
    "upload upload"
    "label ."
    "input generate"
    "cost .";
  column-gap: 14px;
  row-gap: 10px;
}
.ai-page.bluewhite .qh-scene-prompt-step > h4 {
  grid-area: title;
  margin: 0;
  color: #1c2f47;
  font-size: 18px;
  line-height: 1.3;
}
.ai-page.bluewhite .qh-scene-prompt-step > .tool-upload {
  grid-area: upload;
  min-height: 116px;
  margin: 0;
  border-color: #cbdfea;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8fcff);
  color: #1f3550;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 8px 18px rgba(91, 143, 180, .05);
}
.ai-page.bluewhite .qh-scene-prompt-step > .tool-upload:hover { border-color: #46a5ef; background: #f5fbff; }
.ai-page.bluewhite .qh-scene-prompt-step > .tool-upload .upload-icon { color: #4e91ef; }
.ai-page.bluewhite .qh-scene-prompt-step > .tool-upload strong { color: #203a59; font-size: 14px; }
.ai-page.bluewhite .qh-scene-prompt-step > .tool-upload small,
.ai-page.bluewhite .qh-scene-prompt-step > .tool-upload em { color: #617791; }
.ai-page.bluewhite .qh-scene-prompt-step > .tool-textarea {
  display: contents;
  margin: 0;
}
.ai-page.bluewhite .qh-scene-prompt-step > .tool-textarea label {
  grid-area: label;
  color: #334f70;
  font-size: 13px;
  font-weight: 700;
  display: none;
}
.ai-page.bluewhite .qh-scene-prompt-step > .tool-textarea textarea {
  grid-area: input;
  min-height: 184px;
  height: 184px;
  border-color: #cfdfeb;
  border-radius: 12px;
  padding: 15px;
  background: #fff;
  color: #2b3e56;
  font-size: 14px;
  line-height: 1.65;
  box-shadow: none;
}
.ai-page.bluewhite .qh-scene-prompt-step > .tool-textarea textarea::placeholder { color: #7a8ba0; }
.ai-page.bluewhite .qh-scene-prompt-step > .agent-actions { display: contents; }
.ai-page.bluewhite .qh-scene-prompt-step > .agent-actions .generate-button {
  grid-area: generate;
  min-height: 184px;
  border-radius: 14px;
  padding: 16px;
  background: linear-gradient(145deg, #217ff2, #31c5dc);
  box-shadow: 0 10px 20px rgba(38, 143, 221, .22);
  color: #fff;
  font-size: 15px;
}
.ai-page.bluewhite .qh-scene-prompt-step > .agent-actions .cost-inline {
  grid-area: cost;
  margin: 0;
  color: #264560;
  font-size: 13px;
  font-weight: 700;
}
.ai-page.bluewhite .qh-scene-prompt-step > .agent-actions .clear-button,
.ai-page.bluewhite .qh-scene-prompt-step > .agent-actions .reference-button { display: none; }
.ai-page.bluewhite .qh-scene-image-step { margin-top: 18px; }
.ai-page.bluewhite .qh-scene-image-step > h4 { margin: 0; color: #1d314a; font-size: 18px; }
.ai-page.bluewhite .qh-scene-image-step > p { margin: 7px 0 18px; color: #617891; font-size: 13px; }
.ai-page.bluewhite .qh-scene-image-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  align-items: start;
  gap: 20px;
}
.ai-page.bluewhite .qh-scene-image-heading h4 {
  margin: 0;
  color: #1d314a;
  font-size: 18px;
  line-height: 1.35;
}
.ai-page.bluewhite .qh-scene-image-heading p {
  margin: 7px 0 18px;
  color: #617891;
  font-size: 13px;
  line-height: 1.55;
}
.ai-page.bluewhite .qh-scene-image-cost {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  border: 1px solid #ccdfed;
  border-radius: 14px;
  padding: 13px 15px;
  background: #f9fcff;
  color: #6b7f96;
  font-size: 12px;
}
.ai-page.bluewhite .qh-scene-image-cost strong { color: #2288e8; font-size: 25px; line-height: 1; }
.ai-page.bluewhite .qh-scene-image-cost strong small { font-size: 13px; }
.ai-page.bluewhite .qh-scene-image-cost i { grid-column: 1 / -1; height: 1px; background: #dae7f1; }
.ai-page.bluewhite .qh-scene-image-cost b { color: #267fe0; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ai-page.bluewhite .qh-scene-invite {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 18px;
  border: 1px solid #5d9cd1;
  border-radius: 11px;
  padding: 10px 14px;
  background: #f7fbff;
  color: #45627d;
  text-align: left;
  cursor: pointer;
}
.ai-page.bluewhite .qh-scene-invite:hover { background: #eef8ff; }
.ai-page.bluewhite .qh-scene-invite > span { font-size: 19px; }
.ai-page.bluewhite .qh-scene-invite em { color: #496681; font-size: 11px; font-style: normal; line-height: 1.55; }
.ai-page.bluewhite .qh-scene-invite em b { color: #ee9a4f; }
.ai-page.bluewhite .qh-scene-invite strong { color: #287fd8; font-size: 11px; white-space: nowrap; }
.ai-page.bluewhite .qh-scene-image-tip {
  margin: 14px 0 16px;
  border: 1px solid #f2e6c5;
  border-radius: 9px;
  padding: 10px 13px;
  background: #fffdf5;
  color: #8d7540;
  font-size: 12px;
  line-height: 1.55;
}
.ai-page.bluewhite .qh-scene-image-step > .tool-upload {
  margin-top: 16px;
  border-color: #c5dcee;
  border-radius: 14px;
  background: #fbfdff;
}
.ai-page.bluewhite .qh-scene-image-step > .tool-textarea textarea {
  min-height: 148px;
  border-color: #c5d9ea;
  border-radius: 12px;
}
.ai-page.bluewhite .qh-scene-image-step .choice.active,
.ai-page.bluewhite .qh-scene-image-step .generate-button {
  border-color: transparent;
  background: linear-gradient(145deg, #227ee9, #2dbddb);
  color: #fff;
}
@media (max-width: 700px) {
  .ai-page.bluewhite .qh-scene-prompt-step { grid-template-columns: 1fr; grid-template-areas: "title" "upload" "input" "generate" "cost"; }
  .ai-page.bluewhite .qh-scene-prompt-step > .agent-actions .generate-button { min-height: 54px; }
  .ai-page.bluewhite .qh-scene-image-heading { grid-template-columns: 1fr; }
  .ai-page.bluewhite .qh-scene-invite { grid-template-columns: auto minmax(0, 1fr); }
  .ai-page.bluewhite .qh-scene-invite strong { grid-column: 2; }
}

/* Tool 14 mirrors the reference image-generation studio without changing other image tools. */
.ai-page.bluewhite .tool-card:has(.qh-turnaround-studio) {
  border: 1px solid #d8e7f3;
  border-radius: 18px;
  padding: 20px;
  background: #fff;
}
.qh-turnaround-studio { display: grid; gap: 16px; color: #223b5d; }
.qh-turnaround-heading { padding-bottom: 14px; border-bottom: 1px solid #e2edf6; }
.qh-turnaround-heading h3 { margin: 0; color: #1c314c; font-size: 20px; }
.qh-turnaround-heading p,
.qh-turnaround-intro p { margin: 7px 0 0; color: #607891; font-size: 13px; line-height: 1.6; }
.qh-turnaround-intro { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; align-items: start; }
.qh-turnaround-intro h4 { margin: 0; color: #1c314c; font-size: 18px; }
.qh-turnaround-cost { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; border: 1px solid #cbdfea; border-radius: 14px; padding: 13px 15px; background: #f9fcff; color: #6a7d93; font-size: 12px; }
.qh-turnaround-cost strong { color: #267fe0; font-size: 23px; line-height: 1; }
.qh-turnaround-cost strong small { font-size: 12px; }
.qh-turnaround-cost i { grid-column: 1 / -1; height: 1px; background: #dbe8f2; }
.qh-turnaround-cost b { color: #277edb; font-size: 12px; white-space: nowrap; }
.qh-turnaround-invite { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; border: 1px solid #5e9cd1; border-radius: 11px; padding: 10px 14px; background: #f8fcff; color: #496984; text-align: left; cursor: pointer; }
.qh-turnaround-invite:hover { background: #eff8ff; }
.qh-turnaround-invite > span { font-size: 19px; }
.qh-turnaround-invite em { color: #496984; font-size: 11px; font-style: normal; line-height: 1.5; }
.qh-turnaround-invite em b { color: #ed9a50; }
.qh-turnaround-invite strong { color: #267fd8; font-size: 11px; white-space: nowrap; }
.qh-turnaround-studio > .choice-field { display: grid; gap: 8px; }
.qh-turnaround-studio .choice-field > label,
.qh-turnaround-studio .field > label,
.qh-turnaround-studio .tool-textarea > label { color: #405b78; font-size: 13px; font-weight: 700; }
.qh-turnaround-studio > .choice-field .choice-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.qh-turnaround-studio .choice { min-height: 44px; border: 1px solid #d7e4ef; border-radius: 10px; padding: 9px 12px; background: #fbfdff; color: #29445f; font-size: 13px; }
.qh-turnaround-studio .choice:hover { border-color: #75aaf1; background: #f5faff; }
.qh-turnaround-studio .choice.active { border-color: transparent; background: linear-gradient(135deg, #7555ee, #9b61e8); color: #fff; box-shadow: 0 7px 14px rgba(116, 82, 228, .18); }
.qh-turnaround-tip { border: 1px solid #f2e5c1; border-radius: 9px; padding: 10px 13px; background: #fffdf4; color: #8d7540; font-size: 12px; line-height: 1.55; }
.qh-turnaround-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.qh-turnaround-options .choice-row { display: flex; flex-wrap: wrap; gap: 9px; }
.qh-turnaround-options .choice { min-width: 64px; min-height: 42px; }
.qh-turnaround-options .choice-field:nth-child(3) .choice { flex: 1 1 70px; }
.qh-turnaround-options .field { display: grid; gap: 8px; }
.qh-turnaround-options select { min-height: 44px; border: 1px solid #c6d8ea; border-radius: 10px; padding: 0 13px; background: #fff; color: #29445f; }
.qh-turnaround-studio > .tool-upload { min-height: 122px; margin: 0; border-color: #bdd7f2; border-radius: 14px; background: #fbfdff; }
.qh-turnaround-studio > .tool-upload strong { color: #1f3d5d; font-size: 14px; }
.qh-turnaround-studio > .tool-upload small,
.qh-turnaround-studio > .tool-upload em { max-width: 680px; color: #66809c; }
.qh-turnaround-studio .tool-textarea { margin: 0; }
.qh-turnaround-studio .tool-textarea textarea { min-height: 124px; border-color: #c7d9ea; border-radius: 11px; padding: 14px; color: #26415f; line-height: 1.65; }
.qh-turnaround-studio .agent-actions { display: block; margin: 4px 0 0; }
.qh-turnaround-studio .agent-actions .generate-button { width: 100%; min-height: 55px; border-radius: 12px; background: linear-gradient(100deg, #247fe4, #37b8ef); font-size: 16px; }
.qh-turnaround-studio .agent-actions .cost-inline,
.qh-turnaround-studio .agent-actions .reference-button,
.qh-turnaround-studio .agent-actions .clear-button { display: none; }
@media (max-width: 720px) {
  .qh-turnaround-intro,
  .qh-turnaround-options { grid-template-columns: 1fr; }
  .qh-turnaround-invite { grid-template-columns: auto minmax(0, 1fr); }
  .qh-turnaround-invite strong { grid-column: 2; }
  .qh-turnaround-studio > .choice-field .choice-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tool 16 keeps its own reference-style header; this does not alter Tool 15. */
.ai-page.bluewhite[data-qh-tool="prop"] .agent-panel-top {
  display: flex !important;
  margin-bottom: 14px;
}
.ai-page.bluewhite[data-qh-tool="prop"] .record-note {
  display: block !important;
  margin-bottom: 18px;
}

/* Recharge packages use a clear pricing hierarchy without borrowing another product's branding. */
.recharge-page { max-width: 1280px; margin: 0 auto; }
.recharge-actions { justify-content: center; }
.recharge-actions button { min-width: 150px; }
.recharge-package { display: flex; flex-direction: column; min-height: 610px; border-color: #bcd9fb; border-radius: 24px; padding: 24px; box-shadow: 0 16px 36px rgba(57, 103, 166, .09); }
.recharge-package.featured { border-width: 2px; border-color: #4c84f3; box-shadow: 0 18px 42px rgba(58, 113, 214, .15); }
.recharge-package .package-top { align-items: center; color: #17264c; font-size: 20px; }
.recharge-package .package-top em { border-radius: 999px; padding: 6px 10px; background: #eaf3ff; color: #3670d9; font-size: 12px; font-weight: 700; }
.recharge-price-box { display: flex; align-items: baseline; gap: 5px; margin-top: 26px; border: 1px solid #ffe0cd; border-radius: 18px; padding: 20px 24px; background: linear-gradient(135deg, #fff8f3, #fff); color: #102038; }
.recharge-point-package .recharge-price-box { display: grid; gap: 18px; min-height: 148px; align-content: center; }
.recharge-offer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #76859a; font-size: 12px; }
.recharge-offer > span { border: 1px solid #dbe1e8; border-radius: 999px; padding: 5px 9px; background: #f3f5f8; }
.recharge-offer s { color: #68788d; font-weight: 700; }
.recharge-offer em { border-radius: 999px; padding: 6px 10px; background: #ff6a1a; color: #fff; font-style: normal; font-weight: 700; }
.recharge-offer small { border: 1px solid #ffcfab; border-radius: 7px; padding: 5px 8px; background: #fff5ec; color: #f0541d; font-size: 12px; font-weight: 700; }
.recharge-price-main { display: flex; align-items: baseline; gap: 5px; }
.recharge-price-box > span { font-size: 22px; font-weight: 800; }
.recharge-price-box strong { font-size: 52px; line-height: 1; letter-spacing: 0; }
.recharge-price-box em { color: #526176; font-size: 13px; font-style: normal; }
.recharge-package-copy { min-height: 54px !important; margin-top: 14px !important; color: #66758c !important; font-size: 13px !important; }
.recharge-reward { display: grid; gap: 7px; margin-top: 13px; border-radius: 16px; padding: 17px; background: #f3f5f8; color: #152640; }
.recharge-reward strong { margin: 0 !important; color: inherit !important; font-size: 20px; }
.recharge-reward small { margin: 0 !important; color: #6a7a91 !important; font-size: 12px !important; }
.recharge-benefits { min-height: 122px !important; margin: 18px 0 !important; color: #34465f !important; font-size: 13px !important; line-height: 2.45 !important; }
.recharge-summary { margin-top: auto; overflow: hidden; border: 1px solid #cfe2fb; border-radius: 16px; background: #f7fbff; }
.recharge-quantity-label { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; color: #52647e; font-size: 13px; }
.recharge-quantity-label .quantity { gap: 0; }
.recharge-quantity-label .quantity button, .recharge-quantity-label .quantity input { width: 40px; height: 36px; border-color: #d9e1ec; background: #fff; color: #27384f; }
.recharge-quantity-label .quantity button:first-child { border-radius: 18px 0 0 18px; }
.recharge-quantity-label .quantity button:last-child { border-radius: 0 18px 18px 0; }
.recharge-quantity-label .quantity input { border-radius: 0; border-inline-width: 0; }
.recharge-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid #dce9f8; padding: 11px 15px; color: #172841; }
.recharge-total strong { font-size: 14px; }
.recharge-total small { color: #69809c; font-size: 12px; text-align: right; }
.recharge-package .pay-row { margin-top: 16px; }
.recharge-package .pay-row button { min-height: 46px; border-radius: 12px; }
@media (max-width: 760px) { .recharge-actions { justify-content: flex-start; }.recharge-actions button { min-width: 0; flex: 1 1 130px; }.recharge-package { min-height: auto; }.recharge-price-box strong { font-size: 44px; }.recharge-point-package .recharge-price-box { min-height: 0; }.recharge-total { align-items: flex-start; flex-direction: column; }.recharge-total small { text-align: left; } }
/* Native payment QR modal */
.wechat-payment-modal { display: grid; justify-items: center; gap: 12px; text-align: center; }
.wechat-payment-modal img { width: 260px; height: 260px; max-width: min(260px, 72vw); max-height: min(260px, 72vw); background: #fff; padding: 10px; border: 1px solid #d9e1e8; }
.wechat-payment-modal strong { font-size: 24px; color: #17212b; }
.wechat-payment-modal p { margin: 0; color: #526273; line-height: 1.65; }
.wechat-payment-modal small { color: #718096; }

/* Reference workspace layout */
body{background-color:#f5faff;background-image:linear-gradient(rgba(117,164,214,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(117,164,214,.13) 1px,transparent 1px);background-size:18px 18px;color:#163452}
.chat-interface-shell{width:min(1180px,calc(100vw - 42px));margin:24px auto 42px}
.chat-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:128px;padding:22px 26px;background:#fff;border:1px solid #c7def6;border-radius:24px;box-shadow:0 12px 30px rgba(72,117,161,.08)}
.chat-hero-kicker{display:block;margin-bottom:8px;color:#1670cb;font-size:12px;font-weight:700}
.chat-hero h2{margin:0 0 7px;color:#17324e;font-size:clamp(22px,2.2vw,30px);letter-spacing:0}
.chat-hero p{max-width:760px;margin:0;color:#58728c;font-size:13px;line-height:1.75}
.chat-hero-badge{display:grid;flex:0 0 150px;gap:5px;padding:14px 13px;text-align:center;background:#f1efff;border:1px solid #c8bfff;border-radius:18px;color:#5c5a80}
.chat-hero-badge span{font-size:11px}.chat-hero-badge strong{color:#3b3567;font-size:13px}.chat-hero-badge small{color:#756ca7;font-size:11px}
.chat-layout{display:grid;grid-template-columns:232px minmax(0,1fr);height:min(760px,calc(100vh - 250px));min-height:620px;margin-top:16px;overflow:hidden;background:#fff;border:1px solid #bdd7f2;border-radius:24px;box-shadow:0 16px 36px rgba(72,117,161,.1)}
.chat-history{min-width:0;padding:18px 14px;background:#f7fbff;border-right:1px solid #d8e8f8}
.history-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 2px 14px}.history-head strong{color:#1b3b5b;font-size:13px}.history-actions{display:flex;gap:5px}
.history-actions button{min-height:30px;padding:0 8px;color:#71859a;font-size:11px;background:#fff;border:1px solid #cadff3;border-radius:8px}.history-actions .new-chat{color:#6f64e8;background:#f3f0ff;border-color:#c7bfff}
.history-list{display:grid;gap:4px}.history-item{display:grid;gap:6px;width:100%;padding:12px 10px;text-align:left;color:#35526d;background:transparent;border:1px solid transparent;border-radius:10px}.history-item:hover,.history-item.active{background:#edf6ff;border-color:#bedbfa}.history-item strong{overflow:hidden;color:#31506e;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.history-item small{color:#7990a7;font-size:10px}
.chat-main{display:grid;grid-template-rows:54px minmax(0,1fr) auto;min-width:0;min-height:0;background:#fff}.chat-session-head{display:flex;align-items:center;gap:9px;padding:0 28px;color:#153d5b;border-bottom:1px solid #e2eef9}.session-dot{width:10px;height:10px;background:#35d0a0;border-radius:50%;box-shadow:0 0 0 5px #e7fbf4}
.chat-main>.model-section-label,.chat-main>.model-grid{display:none}.chat-messages{display:flex;min-height:0;padding:24px 38px;overflow:auto;background:#fff}.chat-empty{align-self:center;width:min(560px,100%);margin:auto;text-align:center}.chat-empty strong{display:block;margin-bottom:15px;color:#173b5b;font-size:14px}.chat-empty span{display:block;margin-bottom:12px;color:#173b5b;font-size:13px;font-weight:600}.chat-empty em{display:block;color:#cbdbea;font-size:12px;font-style:normal;line-height:1.7}
.chat-composer{position:relative;margin:0 18px 18px;padding:14px 14px 12px;background:#fff;border:1px solid #c7def6;border-radius:19px;box-shadow:0 8px 24px rgba(72,117,161,.08)}.chat-composer textarea{width:100%;min-height:82px;padding:12px 14px;resize:vertical;outline:none;color:#25435d;background:#fff;border:0;border-bottom:1px solid #e0edf8;border-radius:10px;font-size:13px;line-height:1.6}.chat-composer textarea::placeholder{color:#b3c5d5}
.composer-tools{display:flex;align-items:center;gap:8px;min-height:46px;padding-top:8px}.composer-tools .file-status{flex:1;color:#7e98b2;font-size:11px}.composer-tools .generate-button{display:inline-grid;width:44px;height:44px;place-items:center;padding:0;color:#fff;background:#5571ff;border:0;border-radius:14px;box-shadow:0 5px 14px rgba(85,113,255,.28);font-size:25px;line-height:1}
.model-picker{display:grid;gap:8px;padding-top:4px}.model-picker-row{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:9px}.model-picker-row>strong{color:#254764;font-size:11px}.model-picker .model-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;min-width:0}.model-picker .model-option{display:grid;min-width:0;min-height:38px;gap:2px;padding:7px 8px;overflow:hidden;text-align:left;color:#56718b;background:#f7fbff;border:1px solid #c9def3;border-radius:9px}.model-picker .model-option span{color:#5875db;font-size:9px}.model-picker .model-option strong{overflow:hidden;color:#46637e;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.model-picker .model-option small{overflow:hidden;color:#7890a7;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.model-picker .model-option.active{background:#f0efff;border-color:#6e63f5;box-shadow:0 0 0 1px rgba(110,99,245,.1)}.model-picker .model-option.active strong{color:#493dbe}
@media(max-width:900px){.chat-interface-shell{width:min(100% - 22px,760px);margin-top:12px}.chat-hero{align-items:flex-start;flex-direction:column;padding:18px}.chat-hero-badge{width:100%;flex-basis:auto}.chat-layout{grid-template-columns:1fr;height:auto;min-height:720px}.chat-history{display:none}.chat-main{min-height:720px}.model-picker-row{grid-template-columns:1fr;gap:4px}.model-picker .model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chat-history > .history-list{display:grid;grid-template-columns:1fr;grid-auto-flow:row;align-content:start;gap:4px}.chat-composer > .model-picker{display:grid;grid-template-columns:1fr;gap:8px}.chat-composer > .model-picker .model-grid{display:grid}body:has(.chat-interface-shell){background-color:#f5f8fc;background-image:linear-gradient(rgba(125,153,181,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(125,153,181,.08) 1px,transparent 1px);background-size:26px 26px}.chat-interface-shell{width:min(1180px,calc(100vw - 48px));margin:18px auto 48px}.chat-hero{display:none}.chat-layout{grid-template-columns:248px minmax(0,1fr);gap:14px;min-height:700px;padding:0;background:transparent}.chat-history{border:1px solid #dbe7f2;border-radius:18px;background:#fff;box-shadow:0 8px 28px rgba(45,80,115,.06);padding:16px 12px}.history-head{padding:2px 6px 13px;border-bottom:1px solid #edf2f7}.history-actions button{border:1px solid #d9e6f1;border-radius:9px;background:#fff;color:#6a7e92;font-size:11px;padding:6px 8px}.history-actions .new-chat{border:0;color:#fff;background:linear-gradient(135deg,#635bff,#3fb7ff)}.history-list{gap:5px;margin-top:10px}.history-item{min-height:54px;padding:9px 10px;border:1px solid transparent;border-radius:11px;background:transparent;text-align:left}.history-item:hover,.history-item.active{background:#f0efff;border-color:#c7c0ff}.chat-main{border:1px solid #d7e4ef;border-radius:22px;background:#fff;box-shadow:0 10px 34px rgba(45,80,115,.07);overflow:hidden}.chat-session-head{height:58px;padding:0 22px;border-bottom:1px solid #edf2f7;background:#fff}.chat-messages{min-height:390px;padding:34px 44px;background:linear-gradient(180deg,#fff,#fbfdff)}.chat-composer{margin:0 20px 20px;padding:14px;border:1px solid #cbddeb;border-radius:22px;background:#fff;box-shadow:0 10px 26px rgba(47,86,126,.09)}.chat-composer textarea{min-height:88px}.composer-tools .generate-button{width:52px;height:52px;border-radius:17px;background:linear-gradient(135deg,#6957ff,#29b8f6);box-shadow:0 10px 20px rgba(83,105,245,.25);font-size:28px}.model-picker-row{grid-template-columns:50px minmax(0,1fr);gap:8px}.model-picker .model-option{min-height:36px;padding:7px 8px;border:1px solid #d4e4f1;border-radius:10px;background:#f8fbfe}.model-picker .model-option.active{border-color:#6e57ff;background:#f1efff}@media(max-width:900px){.chat-interface-shell{width:calc(100vw - 22px)}.chat-layout{grid-template-columns:1fr}.chat-history{display:none}.chat-messages{min-height:320px;padding:24px 20px}.chat-composer{margin:0 10px 10px}.model-picker .model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.chat-interface-shell{width:100%;max-width:none;margin:18px 0 48px;box-sizing:border-box}.chat-layout{width:100%;grid-template-columns:minmax(190px,248px) minmax(0,1fr)}.chat-layout,.chat-main,.chat-history,.chat-composer,.chat-messages{min-width:0}.chat-main{width:100%}.chat-composer{overflow:hidden}.model-picker,.model-picker-row,.model-picker .model-grid{min-width:0}.model-picker .model-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.model-picker .model-option{min-width:0;overflow:hidden}@media(max-width:1080px){.chat-layout{grid-template-columns:210px minmax(0,1fr)}.model-picker .model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.chat-layout{grid-template-columns:1fr}.chat-history{display:none}.model-picker .model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.chat-layout{height:790px;min-height:790px;grid-template-columns:220px minmax(0,1fr);gap:0}.chat-main{min-height:788px}.chat-composer{margin:0 10px 10px;padding:14px 14px 12px;display:block}.chat-resize-handle{display:none}.chat-composer textarea{height:72px;min-height:72px;padding:7px 3px;border-radius:0}.composer-tools{height:52px;min-height:52px;margin:0;padding:0}.composer-tools .generate-button{width:52px;height:52px;border-radius:14px}.model-picker{gap:10px;margin:8px 0 0;padding:0}.model-picker-row{height:34px;min-height:34px;grid-template-columns:50px minmax(0,1fr);align-items:center;gap:8px}.model-picker .model-grid{height:34px;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.model-picker .model-option{height:34px;min-height:34px;padding:0 6px;display:flex;align-items:center;justify-content:center;border-radius:9px}.model-picker .model-option span,.model-picker .model-option small{display:none}.model-picker .model-option strong{font-size:10px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-messages{min-height:0;flex:1;padding:24px 34px}.chat-session-head{height:48px;min-height:48px}.chat-history{padding:14px 10px}.history-item{min-height:48px;padding:7px 9px}@media(max-width:1080px){.chat-layout{grid-template-columns:210px minmax(0,1fr)}.model-picker .model-grid{grid-template-columns:repeat(2,minmax(0,1fr));height:auto}.model-picker-row{height:auto;min-height:70px}.model-picker{gap:4px}}@media(max-width:700px){.chat-layout{height:790px;min-height:790px;grid-template-columns:1fr}.chat-history{display:none}.chat-composer{margin:0 8px 8px}.chat-messages{padding:20px 16px}}.chat-layout{grid-template-columns:248px minmax(0,1fr);gap:14px}.chat-composer{padding:12px 12px 10px}.chat-composer textarea.prompt-input{height:72px !important;min-height:72px !important;max-height:72px !important;overflow:hidden}.composer-tools{margin:0}.model-picker{margin:4px 0 0}.model-picker-row{height:34px;min-height:34px}.chat-composer .composer-tools{margin:0}.chat-composer .model-picker{margin:4px 0 0}.agent-panel:has(.chat-interface-shell),.ai-workspace:has(.chat-interface-shell){height:800px;min-height:800px;overflow:hidden}.agent-card:has(.chat-interface-shell){height:790px;min-height:790px}.agent-panel:has(.chat-interface-shell),.ai-workspace:has(.chat-interface-shell){height:800px !important;min-height:800px !important;max-height:none !important;overflow:hidden !important}.agent-card:has(.chat-interface-shell){height:790px !important;min-height:790px !important;max-height:none !important}.agent-panel:has(.chat-interface-shell),.ai-workspace:has(.chat-interface-shell){height:830px !important;min-height:830px !important}.chat-interface-shell .chat-main,.chat-interface-shell .chat-composer{overflow:visible !important}.chat-interface-shell .chat-composer{position:relative;z-index:5;margin-bottom:16px}.chat-interface-shell .model-picker{position:relative;z-index:6;padding-bottom:8px}.chat-interface-shell .model-picker-row:last-child{margin-bottom:4px}.chat-interface-shell .chat-layout{overflow:visible !important}
.chat-interface-shell .chat-main{overflow:visible !important}
.chat-interface-shell .chat-composer{position:relative;z-index:5;transform:translateY(-14px);margin-bottom:16px;overflow:visible !important}
.chat-interface-shell .model-picker{position:relative;z-index:6;padding-bottom:8px;overflow:visible !important}
.chat-interface-shell .model-picker-row:last-child{margin-bottom:4px}
.chat-messages{display:flex;flex-direction:row;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:8px;overflow:auto;padding:24px 28px}.chat-messages .chat-message{align-self:flex-start;flex:0 1 auto;width:auto;max-width:none;height:auto;min-height:0;box-sizing:border-box}.chat-messages .chat-message.user{width:38px;max-width:38px;padding:10px 8px}.chat-messages .chat-message.assistant{width:calc((100% - 54px)/3);min-width:140px;max-width:220px;min-height:160px;padding:11px 12px;border-radius:12px}.chat-messages .chat-message.assistant.is-error{min-height:160px}.chat-messages .chat-message strong{font-size:12px;line-height:1.3}.chat-messages .chat-message p{font-size:11px;line-height:1.55;margin:6px 0 0}@media(max-width:900px){.chat-messages .chat-message.assistant{width:calc((100% - 8px)/2);min-width:0;max-width:none}}@media(max-width:600px){.chat-messages .chat-message.assistant{width:100%}}.chat-messages{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-content:normal;gap:10px;padding:24px 28px;overflow:auto}.chat-messages .chat-message{align-self:stretch;flex:0 0 auto;width:100% !important;max-width:none !important;height:auto !important;min-height:0 !important;box-sizing:border-box}.chat-messages .chat-message.user{width:fit-content !important;max-width:78% !important;align-self:flex-end;padding:10px 13px}.chat-messages .chat-message.assistant,.chat-messages .chat-message.assistant.is-error{width:100% !important;min-height:72px !important;padding:12px 14px;border-radius:12px}.chat-messages .chat-message.assistant .message-content{max-height:none;overflow:visible}.chat-messages .chat-message strong{font-size:12px}.chat-messages .chat-message p{font-size:11px;line-height:1.55;margin:5px 0 0}@media(max-width:600px){.chat-messages .chat-message.user{max-width:88% !important}}
/* qh-history-toggle-20260825: full-width chat when recent sessions are hidden. */
.chat-interface-shell .chat-main{position:relative}
.qh-show-history{display:none;position:absolute;top:16px;left:16px;z-index:8;min-height:34px;padding:0 12px;border:1px solid #4635a7;border-radius:8px;background:#171038;color:#fff;font-size:12px;font-weight:700;line-height:32px;box-shadow:0 8px 18px rgba(25,16,62,.28);cursor:pointer}
.qh-show-history:hover{background:#2a2060}
.chat-layout.qh-history-hidden{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
.chat-layout.qh-history-hidden>.chat-history{display:none!important}
.chat-layout.qh-history-hidden>.chat-main{grid-column:1/-1}
.chat-layout.qh-history-hidden .qh-show-history{display:block}
@media(max-width:700px){.qh-show-history{top:10px;left:10px}}

/* qh-model-brands-20260825: brand icons for model selectors. */
.chat-interface-shell .model-picker .model-option .model-brand{display:inline-flex!important;width:15px;height:15px;flex:0 0 15px;align-items:center;justify-content:center;overflow:hidden}
.chat-interface-shell .model-picker .model-option .model-brand img{display:block;width:100%;height:100%;object-fit:contain}
.chat-interface-shell .model-picker .model-option .model-brand-fallback{font-size:8px;font-weight:800;color:#58677c}
.chat-interface-shell .model-picker .model-option{gap:4px}
/* qh-model-labels-full-20260825 */
.chat-interface-shell .model-picker .model-grid{align-items:stretch;grid-auto-rows:minmax(40px,auto)}
.chat-interface-shell .model-picker .model-option{height:auto!important;min-height:40px!important;padding:4px 6px!important;align-items:center;white-space:normal!important;overflow:visible!important}
.chat-interface-shell .model-picker .model-option strong{display:block;min-width:0;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.15!important;text-align:left;font-size:10px!important;word-break:normal;overflow-wrap:anywhere}
.chat-interface-shell .model-picker .model-option .model-brand{flex:0 0 15px}
@media(max-width:700px){.chat-interface-shell .model-picker .model-option{min-height:42px!important;padding:4px 5px!important}.chat-interface-shell .model-picker .model-option strong{font-size:9px!important}}
/* qh-unified-composer-20260825 */
.chat-interface-shell .chat-composer{display:flex!important;flex-direction:column!important;gap:0!important;margin:0 10px 16px!important;padding:0!important;overflow:hidden!important;border:1px solid #cbddeb!important;border-radius:18px!important;background:#fff!important;box-shadow:0 10px 26px rgba(47,86,126,.09)!important}
.chat-interface-shell .chat-composer textarea.prompt-input{box-sizing:border-box!important;width:100%!important;height:82px!important;min-height:82px!important;max-height:82px!important;margin:0!important;padding:15px 14px 8px!important;border:0!important;border-radius:0!important;background:transparent!important;resize:none!important}
.chat-interface-shell .chat-composer .composer-tools{height:52px!important;min-height:52px!important;margin:0!important;padding:0 12px 12px!important;border:0!important;background:transparent!important}
.chat-interface-shell .chat-composer .model-picker{margin:0!important;padding:10px 12px 12px!important;border-top:1px solid #d8e5ef!important;background:#fbfdff!important}
.chat-interface-shell .chat-composer .model-picker-row{height:auto!important;min-height:40px!important}
.chat-interface-shell .chat-composer .model-picker-row+.model-picker-row{margin-top:8px!important}
.chat-interface-shell .chat-composer .model-picker-row>strong{padding-left:0!important}
@media(max-width:700px){.chat-interface-shell .chat-composer{margin:0 8px 10px!important;border-radius:14px!important}.chat-interface-shell .chat-composer textarea.prompt-input{height:76px!important;min-height:76px!important}.chat-interface-shell .chat-composer .model-picker{padding:8px!important}}

/* qh-chat-scroll-mentions-20260825 */
.chat-interface-shell .chat-composer textarea.prompt-input{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-gutter:stable}
.chat-interface-shell .chat-composer textarea.prompt-input::-webkit-scrollbar{width:7px}
.chat-interface-shell .chat-composer textarea.prompt-input::-webkit-scrollbar-thumb{background:#b8c9d8;border:2px solid transparent;border-radius:8px;background-clip:padding-box}

/* qh-attachment-mentions-on-demand-20260825 */
.chat-interface-shell .chat-composer .chat-attachment-preview-list{display:none!important}
.chat-interface-shell .chat-composer{position:relative}
.qh-attachment-mention-menu{display:flex;flex-wrap:wrap;gap:6px;max-height:112px;margin:0 12px 8px;padding:8px;border:1px solid #cbddeb;border-radius:10px;background:#fff;box-shadow:0 8px 18px rgba(47,86,126,.13);overflow:auto}
.qh-attachment-mention-menu[hidden]{display:none!important}
.qh-attachment-mention-option{max-width:100%;padding:5px 8px;border:1px solid #d5e3ef;border-radius:7px;background:#f8fbfe;color:#294b72;font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.qh-attachment-mention-option:hover{border-color:#715bff;background:#f2efff;color:#4e3bc0}

/* qh-attachments-visible-20260825 */
.chat-interface-shell .chat-composer .chat-attachment-preview-list{display:flex!important;flex-wrap:wrap;gap:6px;max-width:100%;margin:4px 0 0;overflow:auto;}
.chat-interface-shell .chat-composer .chat-attachment-preview-list:empty{display:none!important;}
.chat-interface-shell .chat-composer .chat-attachment-preview-list .chat-attachment-card{display:flex!important;align-items:center;gap:6px;max-width:100%;}

/* qh-preview-content-20260825 */
.chat-interface-shell .chat-composer .chat-attachment-preview-list{display:flex!important;align-items:flex-start;gap:8px;padding:4px 0;max-height:112px;overflow-x:auto;overflow-y:hidden;}
.chat-interface-shell .chat-composer .chat-attachment-preview{position:relative;flex:0 0 116px;width:116px;height:86px;display:flex!important;align-items:center;justify-content:center;overflow:hidden;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;cursor:pointer;}
.chat-interface-shell .chat-composer .chat-attachment-preview-media{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;background:#eef2f7;}
.chat-interface-shell .chat-composer .chat-attachment-preview-name,.chat-interface-shell .chat-composer .chat-attachment-preview-meta{display:none!important;}
.chat-interface-shell .chat-composer .chat-attachment-preview .chat-attachment-open{position:absolute;right:4px;bottom:4px;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.72);color:#fff;font-size:13px;line-height:22px;}
.chat-interface-shell .chat-composer .chat-attachment-preview .chat-attachment-remove{position:absolute;right:4px;top:4px;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:#dc2626;color:#fff;font-size:15px;line-height:18px;z-index:2;}
.chat-interface-shell .chat-composer .chat-attachment-file-icon{font-size:11px;color:#64748b;font-weight:700;}
/* qh-preview-thumbnail-20260825 */
.chat-interface-shell .chat-composer .chat-attachment-preview-list{max-height:78px;gap:6px;padding:3px 0;}
.chat-interface-shell .chat-composer .chat-attachment-preview{flex-basis:82px;width:82px;height:60px;border-radius:6px;}
.chat-interface-shell .chat-composer .chat-attachment-preview .chat-attachment-open{width:18px;height:18px;right:3px;bottom:3px;font-size:11px;line-height:18px;}
.chat-interface-shell .chat-composer .chat-attachment-preview .chat-attachment-remove{width:18px;height:18px;right:3px;top:3px;font-size:13px;line-height:16px;}
/* qh-mention-visual-20260825 */
.chat-interface-shell .qh-attachment-mention-menu{display:flex;flex-wrap:wrap;gap:6px;max-height:76px;overflow:auto;}
.chat-interface-shell .qh-attachment-mention-option{position:relative;display:flex!important;align-items:center;justify-content:center;width:74px;height:52px;padding:3px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;overflow:hidden;}
.chat-interface-shell .qh-attachment-mention-option:hover{border-color:#3b82f6;background:#eff6ff;}
.chat-interface-shell .qh-attachment-mention-media{display:block;width:100%;height:100%;object-fit:contain;background:#eef2f7;}
.chat-interface-shell .qh-attachment-mention-file{font-size:10px;font-weight:700;color:#64748b;}
/* qh-inline-mention-preview-20260825 */
.chat-interface-shell .qh-inline-mention-previews{display:flex;align-items:center;gap:5px;min-height:0;max-height:48px;padding:2px 0;overflow-x:auto;}
.chat-interface-shell .qh-inline-mention-previews[hidden]{display:none!important;}
.chat-interface-shell .qh-inline-mention-preview{display:flex;width:54px;height:40px;align-items:center;justify-content:center;overflow:hidden;border:1px solid #cbd5e1;border-radius:5px;background:#f8fafc;}
.chat-interface-shell .qh-inline-mention-media{display:block;width:100%;height:100%;object-fit:contain;background:#eef2f7;}
.chat-interface-shell .qh-inline-mention-file{font-size:9px;font-weight:700;color:#64748b;}
/* qh-prompt-inline-media-20260825 */
.chat-interface-shell .chat-composer{position:relative;}
.chat-interface-shell .chat-composer .qh-prompt-visual-layer{position:absolute;z-index:1;left:0;right:0;top:0;height:88px;box-sizing:border-box;padding:12px 14px;overflow:hidden;pointer-events:none;white-space:pre-wrap;overflow-wrap:anywhere;color:#123b67;font:inherit;line-height:1.55;background:transparent;}
.chat-interface-shell .chat-composer textarea.prompt-input{position:relative;z-index:2;background:transparent;color:transparent;caret-color:#123b67;}
.chat-interface-shell .qh-prompt-inline-attachment{display:inline-flex;width:54px;height:34px;vertical-align:middle;align-items:center;justify-content:center;overflow:hidden;margin:0 2px;border:1px solid #b8c9dc;border-radius:5px;background:#f8fafc;}
.chat-interface-shell .qh-prompt-inline-attachment-media{display:block;width:100%;height:100%;object-fit:contain;background:#eef2f7;background-position:center;background-repeat:no-repeat;background-size:contain;}
.chat-interface-shell .qh-prompt-inline-attachment-file{font-size:9px;font-weight:700;color:#64748b;}
/* qh-prompt-inline-media-revert-20260825 */
.chat-interface-shell .chat-composer .qh-prompt-visual-layer{display:none!important;}
.chat-interface-shell .chat-composer textarea.prompt-input{color:#123b67!important;caret-color:#123b67!important;}
.chat-interface-shell .chat-composer textarea.prompt-input{background:#fff!important;}/* qh-thumbnail-token-20260825 */
.chat-interface-shell .qh-inline-mention-previews{display:flex!important;align-items:center;gap:6px;min-height:0;max-height:46px;padding:3px 0;}
.chat-interface-shell .qh-inline-mention-preview{width:54px;height:40px;flex:0 0 54px;}
/* qh-rich-mention-input-20260825 */
.chat-interface-shell .chat-composer textarea.prompt-input.qh-rich-source{display:none!important;}
.chat-interface-shell .chat-composer .qh-prompt-visual-layer,.chat-interface-shell .chat-composer .qh-inline-mention-previews{display:none!important;}
.chat-interface-shell .chat-composer .qh-rich-editor{box-sizing:border-box;width:100%;height:88px;min-height:52px;max-height:180px;padding:12px 14px;overflow:auto;outline:0;color:#123b67;font:inherit;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;}
.chat-interface-shell .chat-composer .qh-rich-editor:empty:before{content:attr(data-placeholder);color:#94a3b8;pointer-events:none;}
.chat-interface-shell .qh-rich-attachment-token{display:inline-flex;width:54px;height:34px;vertical-align:middle;align-items:center;justify-content:center;overflow:hidden;margin:0 2px;border:1px solid #b8c9dc;border-radius:5px;background:#f8fafc;user-select:all;}
.chat-interface-shell .qh-rich-attachment-media{display:block;width:100%;height:100%;object-fit:contain;background:#eef2f7;background-position:center;background-repeat:no-repeat;background-size:contain;}
.chat-interface-shell .qh-rich-attachment-file{font-size:9px;font-weight:700;color:#64748b;}
/* qh-rich-mention-layout-fix-20260825 */
.chat-interface-shell .chat-composer .qh-rich-editor{display:block!important;flex:1 1 auto!important;min-width:0!important;white-space:pre-wrap!important;word-break:normal!important;overflow-wrap:break-word!important;}
/* qh-thumbnail-compact-20260825 */
.chat-interface-shell .chat-composer .chat-attachment-preview-list{max-height:56px!important;gap:5px!important;padding:2px 0!important;}
.chat-interface-shell .chat-composer .chat-attachment-preview{flex:0 0 60px!important;width:60px!important;height:44px!important;border-radius:5px!important;}
.chat-interface-shell .chat-composer .chat-attachment-preview-media{object-fit:contain!important;}
.chat-interface-shell .chat-composer .chat-attachment-preview .chat-attachment-open{width:16px!important;height:16px!important;right:2px!important;bottom:2px!important;font-size:9px!important;line-height:16px!important;}
.chat-interface-shell .chat-composer .chat-attachment-preview .chat-attachment-remove{width:16px!important;height:16px!important;right:2px!important;top:2px!important;font-size:11px!important;line-height:14px!important;}
.chat-interface-shell .qh-rich-attachment-token{width:42px!important;height:28px!important;margin:0 1px!important;border-radius:4px!important;}
.chat-interface-shell .qh-rich-attachment-media{object-fit:contain!important;}
/* qh-chat-editor-tall-20260825 */
.chat-interface-shell .chat-composer .qh-rich-editor{height:176px!important;min-height:176px!important;max-height:176px!important;}
/* qh-thumbnail-names-20260825 */
.chat-interface-shell .chat-composer .chat-attachment-preview-list{max-height:66px!important;}
.chat-interface-shell .chat-composer .chat-attachment-preview{height:54px!important;flex-basis:64px!important;width:64px!important;flex-direction:column!important;justify-content:flex-start!important;padding:2px!important;}
.chat-interface-shell .chat-composer .chat-attachment-preview-media{width:60px!important;height:34px!important;flex:0 0 34px!important;}
.chat-interface-shell .chat-composer .chat-attachment-preview-name{display:block!important;width:60px!important;min-height:12px!important;overflow:hidden!important;color:#36506f!important;font-size:8px!important;font-weight:500!important;line-height:12px!important;white-space:nowrap!important;text-align:center!important;text-overflow:ellipsis!important;}
.chat-interface-shell .chat-composer .chat-attachment-preview-meta{display:none!important;}
.chat-interface-shell .qh-rich-attachment-token{width:52px!important;height:42px!important;flex-direction:column!important;justify-content:flex-start!important;padding:1px!important;vertical-align:middle!important;}
.chat-interface-shell .qh-rich-attachment-media{width:48px!important;height:27px!important;flex:0 0 27px!important;}
.chat-interface-shell .qh-rich-attachment-token::after{content:attr(data-file-name);display:block;width:48px;overflow:hidden;color:#36506f;font-size:7px;font-weight:500;line-height:11px;white-space:nowrap;text-align:center;text-overflow:ellipsis;}
.chat-interface-shell .qh-attachment-mention-option{width:62px!important;height:58px!important;flex-direction:column!important;justify-content:flex-start!important;}
.chat-interface-shell .qh-attachment-mention-media{width:56px!important;height:40px!important;flex:0 0 40px!important;}
.chat-interface-shell .qh-attachment-mention-option::after{content:attr(data-mention-file-name);display:block;width:56px;overflow:hidden;color:#36506f;font-size:7px;font-weight:500;line-height:11px;white-space:nowrap;text-align:center;text-overflow:ellipsis;}
/* qh-send-button-text-fit-20260825 */
.chat-interface-shell .chat-composer .generate-button[data-chat-send]{width:80px!important;min-width:80px!important;height:52px!important;padding:0 10px!important;font-size:15px!important;line-height:1.2!important;white-space:nowrap!important;}


/* qh-chat-cost-badge-visible-20260825 */
.chat-interface-shell .chat-hero{
  display:flex!important;
  min-height:128px!important;
  box-sizing:border-box;
}
.ai-page .agent-panel:has(.chat-interface-shell),
.ai-page .ai-workspace:has(.chat-interface-shell){
  height:980px!important;
  min-height:980px!important;
  max-height:none!important;
}
.ai-page .agent-card:has(.chat-interface-shell){
  height:940px!important;
  min-height:940px!important;
  max-height:none!important;
}
@media(max-width:760px){
  .chat-interface-shell .chat-hero{
    align-items:stretch!important;
    flex-direction:column!important;
    gap:14px!important;
  }
  .chat-interface-shell .chat-hero-badge{
    width:100%!important;
    box-sizing:border-box;
    flex-basis:auto!important;
  }
  .ai-page .agent-panel:has(.chat-interface-shell),
  .ai-page .ai-workspace:has(.chat-interface-shell),
  .ai-page .agent-card:has(.chat-interface-shell){
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
}


/* qh-multi-chat-sessions-style-v2-20260825 */
.chat-history .history-list{display:flex;flex-direction:column;gap:6px;min-height:48px;}
.chat-history .qh-history-row{display:flex;align-items:stretch;gap:4px;width:100%;min-width:0;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;}
.chat-history .qh-history-row.active{border-color:rgba(59,130,246,.34);background:rgba(59,130,246,.08);}
.chat-history .qh-history-open{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;align-items:flex-start;gap:3px;padding:9px 8px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;}
.chat-history .qh-history-open strong,.chat-history .qh-history-open small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-history .qh-history-open strong{font-size:13px;font-weight:700;line-height:1.35;}
.chat-history .qh-history-open small{font-size:11px;line-height:1.3;color:var(--muted,#8b95a7);}
.chat-history .qh-history-actions{display:flex;align-items:center;gap:2px;padding:0 5px 0 0;opacity:.72;}
.chat-history .qh-history-row:hover .qh-history-actions,.chat-history .qh-history-row.active .qh-history-actions{opacity:1;}
.chat-history .qh-history-action{width:26px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;font-size:16px;line-height:26px;cursor:pointer;}
.chat-history .qh-history-action:hover{background:rgba(127,127,127,.14);}
.chat-history .qh-history-delete:hover{color:#dc2626;background:rgba(220,38,38,.1);}
.chat-history .qh-history-edit-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;gap:4px;width:100%;padding:7px;}
.chat-history .qh-history-edit-form input{min-width:0;width:100%;height:29px;padding:0 7px;border:1px solid rgba(127,127,127,.28);border-radius:6px;background:var(--surface,#fff);color:inherit;font-size:12px;}
.chat-history .qh-history-edit-form button{height:29px;padding:0 8px;border:1px solid rgba(127,127,127,.25);border-radius:6px;background:transparent;color:inherit;font-size:12px;cursor:pointer;white-space:nowrap;}
.chat-history .qh-history-edit-form .qh-history-save{border-color:#2563eb;background:#2563eb;color:#fff;}
@media (max-width:760px){
  .chat-history .qh-history-edit-form{grid-template-columns:1fr 1fr;}
  .chat-history .qh-history-edit-form button{width:100%;}
}



/* qh-user-message-visual-order-style-v1-20260825 */
.chat-messages .chat-message.user{display:flex;flex-direction:column;align-items:flex-end;}
.chat-messages .chat-message.user .chat-attachments{display:none!important;}
.chat-messages .chat-message.user .chat-attachment-previews{order:1;width:100%;margin:0 0 8px;}
.chat-messages .chat-message.user .chat-message-user-text{order:2;width:100%;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;}



/* qh-user-message-visual-order-style-v2-20260825 */
.chat-messages .chat-message.user{display:flex;flex-direction:column;align-items:flex-end;}
.chat-messages .chat-message.user .chat-attachments{display:none!important;}
.chat-messages .chat-message.user .chat-message-attachment-previews,
.chat-messages .chat-message.user .chat-attachment-preview-list{order:1;width:100%;margin:0 0 8px;}
.chat-messages .chat-message.user .chat-message-user-text{order:2;width:100%;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;}



/* qh-copyable-persistent-thumbnails-style-v1-20260825 */
.chat-message.user,
.chat-message.user .chat-message-user-text,
.chat-message.user .chat-attachment-preview-name,
.chat-message.user .chat-attachment-preview-meta{
  -webkit-user-select:text!important;
  user-select:text!important;
}
.chat-message.user .chat-attachment-preview-name,
.chat-message.user .chat-attachment-preview-meta{
  cursor:text!important;
}
.chat-message.user .chat-attachment-preview-media{
  display:block;
  object-fit:contain!important;
}


/* qh-chat-balance-line-style-v1-20260825 */
.chat-interface-shell .chat-hero-badge .qh-chat-balance-line{
  display:block;
  margin-top:2px;
  padding-top:5px;
  border-top:1px solid rgba(117,108,167,.22);
  color:#756ca7;
  font-size:9px;
  font-style:normal;
  font-weight:500;
  line-height:1.35;
  white-space:nowrap;
}
.chat-interface-shell .chat-hero-badge .qh-chat-balance-line b{
  color:#4b43a1;
  font-size:9px;
  font-weight:800;
}
.chat-interface-shell .chat-hero-badge .qh-chat-balance-line i{
  color:#9288bd;
  font-style:normal;
}
.ai-page.bluewhite .ai-workspace {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.ai-page.bluewhite .ai-workspace > .engine-sidebar,
.ai-page.bluewhite .ai-workspace > .agent-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}


/* qh-reverse-wallet-v1-20260826 */
.reverse-intro {
  grid-template-columns: minmax(0, 1fr) 158px;
  align-items: start;
  gap: 16px;
}
.reverse-intro-copy {
  display: grid;
  min-width: 0;
  gap: 8px;
}
.reverse-intro-copy > span {
  justify-self: start;
  border: 1px solid #cbdcf2;
  border-radius: 999px;
  padding: 7px 12px;
  background: #eef6ff;
  color: #2563eb;
  font-size: 12px;
}
.reverse-wallet-balance {
  display: grid;
  gap: 5px;
  min-width: 158px;
  border: 1px solid #c8bfff;
  border-radius: 8px;
  padding: 12px 14px;
  background: #f1efff;
  color: #5c5a80;
  text-align: center;
}
.reverse-wallet-balance > span {
  color: #756ca7;
  font-size: 11px;
}
.reverse-wallet-balance strong,
.reverse-wallet-balance small {
  display: block;
  white-space: nowrap;
}
.reverse-wallet-balance strong {
  color: #3b3567;
  font-size: 14px;
}
.reverse-wallet-balance small {
  padding-top: 5px;
  border-top: 1px solid rgba(117,108,167,.22);
  color: #756ca7;
  font-size: 11px;
}
.reverse-wallet-balance b {
  color: #4b43a1;
  font-weight: 800;
}
@media (max-width: 640px) {
  .reverse-intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .reverse-wallet-balance {
    grid-template-columns: auto 1fr 1fr;
    align-items: center;
    width: 100%;
    min-width: 0;
    text-align: left;
  }
  .reverse-wallet-balance strong,
  .reverse-wallet-balance small {
    padding: 0;
    border: 0;
    text-align: right;
  }
}

/* qh-download-wallet-card-v1-20260826 */
.qh-download-intro{position:relative;padding-right:178px;min-height:96px}
.qh-download-wallet-card{position:absolute;top:0;right:0;display:grid;width:154px;gap:5px;padding:13px 12px;text-align:center;background:#f1efff;border:1px solid #c8bfff;border-radius:16px;color:#5c5a80;box-sizing:border-box}
.qh-download-wallet-card span{font-size:11px}
.qh-download-wallet-card strong{color:#3b3567;font-size:14px}
.qh-download-wallet-card small{color:#756ca7;font-size:11px}
.qh-download-wallet-card em{display:block;margin-top:3px;padding-top:6px;border-top:1px solid rgba(117,108,167,.25);font-size:10px;font-style:normal;line-height:1.45;white-space:nowrap;color:#665f96}
.qh-download-wallet-card b{font-weight:700;color:#4f4782}
.qh-download-wallet-card i{font-style:normal;color:#9189bc}
@media(max-width:900px){.qh-download-intro{padding-right:0;min-height:0}.qh-download-wallet-card{position:static;width:100%;margin-top:12px}}

/* qh-script-reference-header-v1 */
.ai-page.bluewhite[data-qh-tool="script"] .agent-panel-top { display:flex !important; align-items:center; gap:24px; margin:0 0 16px; padding:22px 24px !important; border:1px solid #c7dcf4 !important; border-radius:28px !important; background:#fbfdff; }
.ai-page.bluewhite[data-qh-tool="script"] .agent-panel-top > div:first-child { min-width:0; flex:1; }
.ai-page.bluewhite[data-qh-tool="script"] .agent-panel-top h2 { margin:10px 0 7px; }
.ai-page.bluewhite[data-qh-tool="script"] .agent-panel-top .cost-box { flex:0 0 168px; }
.ai-page.bluewhite[data-qh-tool="script"] .record-note { display:block !important; margin:0 0 18px; padding:12px 16px; border:1px solid #c7dcf4; border-radius:18px; background:#fbfdff; }


/* storyboard header 20260828 */
.qh-storyboard-studio{display:flex;flex-direction:column;gap:16px}
.qh-tool-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:24px;border:1px solid #b9d5f5;border-radius:22px;background:#fff;box-shadow:0 10px 28px rgba(29,83,151,.06)}
.qh-tool-kicker{margin:0 0 10px;color:#006bd6;font-size:14px;font-weight:800}
.qh-tool-title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.qh-tool-title-row h2{margin:0;color:#071f45;font-size:28px;line-height:1.25;letter-spacing:0}
.qh-prompt-learn{min-height:38px;padding:0 16px;border:0;border-radius:10px;background:#0bb9cf;color:#fff;font-size:14px;font-weight:800;cursor:pointer}
.qh-tool-description{margin:8px 0 0;color:#18365f;font-size:15px;line-height:1.6}
.qh-cost-card{display:flex;min-width:170px;min-height:104px;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;border:1px solid #d7c9ff;border-radius:20px;background:#f5f1ff;color:#33405e}
.qh-cost-card strong{padding:8px 12px;border:1px solid #bca9ff;border-radius:18px;background:#fff;color:#101a35;white-space:nowrap}
.qh-record-note{padding:14px 16px;border:1px solid #bfd8f6;border-radius:15px;background:#fff;color:#284565;line-height:1.55}
.qh-record-note strong:last-child{color:#006bd6}
@media (max-width:720px){.qh-tool-hero{grid-template-columns:1fr;padding:18px;border-radius:16px}.qh-tool-title-row h2{font-size:22px}.qh-cost-card{min-width:0;min-height:84px;width:100%}}
.qh-storyboard-agent-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 16px;padding:22px 24px;border:1px solid #cfe0ff;border-radius:28px;background:#fff;box-sizing:border-box}.qh-storyboard-agent-copy{min-width:0}.qh-storyboard-eyebrow{font-size:13px;font-weight:700;color:#0969c7;margin-bottom:8px}.qh-storyboard-title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.qh-storyboard-title-row h2{margin:0;font-size:28px;line-height:1.2;color:#0f2947}.qh-storyboard-learn{border:0;border-radius:9px;padding:9px 16px;background:#12acd3;color:#fff;font-weight:700;cursor:pointer}.qh-storyboard-agent-copy p{margin:7px 0 0;color:#46627f;font-size:15px}.qh-storyboard-cost{flex:0 0 170px;padding:14px 16px;border:1px solid #cfc5ff;border-radius:18px;background:#f4f0ff;text-align:center;color:#59627a}.qh-storyboard-cost span,.qh-storyboard-cost em{display:block;font-style:normal;font-size:12px}.qh-storyboard-cost strong{display:block;margin:6px 0;color:#111d43;font-size:17px}.qh-storyboard-cost em{padding-top:7px;border-top:1px solid #ddd5ff;color:#526084}.qh-storyboard-cost b{color:#263c86}@media(fk.qh-storyboard-agent-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 16px;padding:22px 24px;border:1px solid #cfe0ff;border-radius:28px;background:#fff;box-sizing:border-box}.qh-storyboard-agent-copy{min-width:0}.qh-storyboard-eyebrow{font-size:13px;font-weight:700;color:#0969c7;margin-bottom:8px}.qh-storyboard-title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.qh-storyboard-title-
/* qh-wallet-balance-layout-v1 */
.cost-box .qh-wallet-balance{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:12px;font-style:normal;color:#64748b;line-height:1.4}.cost-box .qh-wallet-balance span{white-space:nowrap}.cost-box .qh-wallet-balance b{color:#0f172a;font-weight:700}

/* qh-script-cost-reference-style-v2 */
.cost-box.qh-script-cost-box{width:170px;min-width:170px;box-sizing:border-box;padding:14px 16px;background:#f0efff;border:1px solid #d7d4f7;border-radius:16px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;color:#172554}.cost-box.qh-script-cost-box small{font-size:12px;color:#334155}.cost-box.qh-script-cost-box>strong{font-size:20px;line-height:1.15;color:#0f172a}.cost-box.qh-script-cost-box .qh-wallet-balance{display:flex;flex-direction:column;gap:2px;margin-top:1px;font-size:12px;font-style:normal;color:#334155;line-height:1.35}.cost-box.qh-script-cost-box .qh-wallet-balance span{white-space:nowrap}.cost-box.qh-script-cost-box .qh-wallet-balance b{font-weight:700;color:#1e3a8a}@media(max-width:760px){.cost-box.qh-script-cost-box{width:100%;min-width:0}}

/* qh-storyboard-cost-reference-v3 */
.qh-storyboard-cost.qh-script-cost-box{width:170px;min-width:170px;box-sizing:border-box;padding:14px 16px;background:#f0efff;border:1px solid #d7d4f7;border-radius:16px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;color:#172554}
.qh-storyboard-cost.qh-script-cost-box>span{display:block;font-size:12px;color:#334155}
.qh-storyboard-cost.qh-script-cost-box>strong{display:block;margin:2px 0 4px;font-size:20px;line-height:1.15;color:#0f172a}
.qh-storyboard-cost.qh-script-cost-box>em{display:flex;flex-direction:column;gap:2px;width:100%;padding-top:7px;border-top:1px solid #ddd5ff;font-style:normal;font-size:12px;color:#334155;line-height:1.35}
.qh-storyboard-cost.qh-script-cost-box em span{white-space:nowrap}
.qh-storyboard-cost.qh-script-cost-box em b{font-weight:700;color:#1e3a8a}
@media(max-width:760px){.qh-storyboard-cost.qh-script-cost-box{width:100%;min-width:0}}

/* qh-deai-static-hide-badge */
main[data-qh-tool="deai"] .agent-panel-top .agent-badge{display:none!important}

/* qh-deai-static-hide-badge-v2 */
main[data-qh-tool="deai"] .agent-panel-top .agent-badge{display:none!important}

/* qh-deai-static-hide-badge-v3 */
body main.ai-page[data-qh-tool="deai"] .agent-panel-top .agent-badge{display:none!important;visibility:hidden!important}

/* qh-deai-hide-agent-badge-v2 */
.ai-page[data-qh-tool="deai"] .agent-panel-top .agent-badge{display:none!important}

/* qh-tryon-hide-marked-v1 */
.ai-page[data-qh-tool="tryon"] .agent-panel-top .agent-badge,
.ai-page[data-qh-tool="tryon"] .agent-panel-top .cost-box,
.ai-page[data-qh-tool="tryon"] .agent-card .qh-tryon-intro{display:none!important}

/* Tool 01 scroll stability */
.ai-page[data-qh-tool="text"]{overflow-anchor:none;}

/* qh-instant-tool-top-v1 */
#app .ai-page.bluewhite[data-qh-tool="image"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="download"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="tryon"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="deai"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="script"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="storyboard"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="character"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="scene"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="prop"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="upscale"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="replace"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="lipsync"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="caption"] .agent-panel-top,#app .ai-page.bluewhite[data-qh-tool="watermark"] .agent-panel-top{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:24px!important;margin:0 0 14px!important;padding:20px 24px!important;border:1px solid #c8ddf8!important;border-radius:18px!important;background:#f9fcff!important}
/* qh-instant-tool-top-v2 */#app .ai-page.bluewhite .agent-panel-top:has(.cost-box){display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:24px!important;margin:0 0 14px!important;padding:20px 24px!important;border:1px solid #c8ddf8!important;border-radius:18px!important;background:#f9fcff!important}
/* qh-balance-value-parity-v2: tools 2,3,5,7,9-22 only; 1,4,6,8 stay unchanged. */
.ai-page.bluewhite[data-qh-tool="image"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="download"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="seedance"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="tryon"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="motion"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="deai"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="script"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="storyboard"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="character"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="turnaround"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="scene"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="prop"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="video"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="upscale"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="replace"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="lipsync"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="caption"] .agent-panel-top .qh-cost-ledger > b > span,
.ai-page.bluewhite[data-qh-tool="watermark"] .agent-panel-top .qh-cost-ledger > b > span {
  font-size: 20px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: #15284b !important;
}

/* qh-character-result-v2-20260907 */
.process-result.character-result{display:block;min-width:0}
.character-result .character-result-text{display:block;box-sizing:border-box;width:100%;min-width:0;max-height:65vh;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;margin:12px 0 0;padding:16px;border:1px solid #dbe7f6;border-radius:12px;background:#f8fbff;font:inherit;line-height:1.8;text-align:left;color:inherit}