:root {
  --ink: #1d211f;
  --muted: #8b9490;
  --green: #61bf50;
  --mint: #8cded2;
  --panel: rgba(253, 254, 250, 0.64);
  --line: rgba(101, 121, 110, 0.1);
  font-family: "Manrope", "Noto Sans SC", system-ui, sans-serif;
  color: var(--ink);
  background: #fcfdf9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background: #fbfcf8; }
button, textarea, input { font: inherit; }
button { color: inherit; }
button:focus-visible, label:focus-within { outline: 3px solid rgba(78, 188, 162, .26); outline-offset: 2px; }

.ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: linear-gradient(111deg, #fbffe3 0%, #fff 42%, #f7fbfb 65%, #ecfff7 100%); }
.ambient::after { content: ""; position: absolute; inset: 0; opacity: .28; background-image: repeating-linear-gradient(104deg, transparent 0 92px, rgba(122, 204, 164, .045) 93px 95px); transform: skewY(-6deg) scale(1.2); }
.ambient__orb { position: absolute; border-radius: 50%; filter: blur(56px); opacity: .65; }
.ambient__orb--lime { width: 470px; height: 330px; left: -100px; top: -150px; background: #efff4a; }
.ambient__orb--mint { width: 610px; height: 700px; right: -220px; top: -80px; background: #9af2d0; opacity: .45; }
.ambient__orb--blue { width: 380px; height: 340px; right: 120px; top: 230px; background: #bcf2f0; opacity: .34; }
.spark { position: absolute; color: #bbdc31; text-shadow: 0 0 14px #ddf05e; }
.spark--one { left: 57%; top: 45%; font-size: 26px; }
.spark--two { left: 14%; top: 93%; font-size: 16px; }
.spark--three { right: 11%; top: 48%; font-size: 15px; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: 72px; z-index: 20; display: flex; flex-direction: column; align-items: center; background: rgba(255,255,251,.64); border-right: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(16px); }
.brand { margin-top: 25px; color: #0a0d0b; text-decoration: none; font: 700 italic 36px/1 "Manrope", sans-serif; transform: rotate(-8deg); }
.side-nav { display: flex; flex-direction: column; gap: 25px; width: 100%; margin-top: 54px; }
.nav-item { position: relative; display: grid; justify-items: center; gap: 6px; width: 100%; padding: 8px 0; border: 0; background: transparent; color: #9ca29f; font-size: 11px; cursor: pointer; transition: .2s ease; }
.nav-item svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.nav-item .icon-cut { fill: white; }
.nav-item .icon-line, .nav-item .icon-outline { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover, .nav-item.is-active { color: #161917; transform: translateY(-1px); }
.nav-item.is-active::before { content:""; position:absolute; left:0; top:12px; width:3px; height:24px; border-radius:0 3px 3px 0; background:#79cc79; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 22px; padding-bottom: 21px; }
.mini-button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: #9ca6a1; cursor: pointer; text-decoration:none; }
.mini-button svg { width: 20px; fill:none; stroke:currentColor; stroke-width:1.7; }

.topbar { position: fixed; right: 34px; top: 19px; z-index: 30; height: 42px; display: flex; align-items: center; padding: 3px 4px 3px 12px; border-radius: 22px; background: rgba(255,255,249,.7); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(70,120,100,.05); }
.credits, .upgrade { border: 0; background: transparent; cursor: pointer; }
.credits { display:flex; align-items:center; gap:6px; padding: 5px 9px 5px 0; font-size:13px; }
.credits span { color:#6eb46d; }
.upgrade { padding: 5px 12px; border-left:1px solid rgba(0,0,0,.08); font-size:13px; }
.avatar { width:38px; height:38px; margin-left:5px; padding:9px; border:0; border-radius:50%; color:#1698aa; background:#9bd2d8; cursor:pointer; transition:.2s; }
.avatar:hover { transform:scale(1.05); }
.avatar.is-guest { color:#69746f; background:#edf2ef; }
.avatar svg, .account-avatar svg { width:100%; fill:currentColor; }
.account-menu { position:absolute; right:0; top:50px; width:226px; padding:16px 14px 10px; border:1px solid rgba(255,255,255,.84); border-radius:20px; background:rgba(250,254,252,.91); box-shadow:0 22px 55px rgba(58,117,96,.15); backdrop-filter:blur(22px); opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top right; transition:.2s ease; }
.account-menu.is-open { opacity:1; visibility:visible; transform:none; }
.account-head { display:flex; align-items:center; gap:11px; padding:2px 2px 8px; }
.account-avatar { flex:0 0 35px; height:35px; padding:9px; border-radius:50%; color:#13a9ba; background:#c9f3f1; }
.account-head strong { font-size:12px; font-weight:600; }
.account-head small { display:block; margin-top:1px; color:#9aa29f; font-size:10px; }
.edit-name { border:0; background:none; color:#696f6c; cursor:pointer; }
.menu-divider { height:1px; margin:4px 0; background:rgba(45,73,62,.1); }
.menu-row { display:flex; justify-content:space-between; width:100%; padding:9px 4px; border:0; border-radius:8px; background:transparent; font-size:11px; cursor:pointer; }
.menu-row:hover { background:rgba(111,210,174,.1); }
.menu-row .coin { color:#ffba45; font-style:normal; margin-right:6px; }
.menu-row b { font-size:10px; margin-right:8px; color:#737b77; }

main { margin-left:72px; }
.hero-section { position:relative; z-index:10; min-height:473px; padding:126px 5vw 28px; overflow:visible; }
.hero-inner { position:relative; z-index:2; max-width:1166px; margin:0 auto; }
h1 { margin:0 0 31px; font-size:36px; line-height:1.35; font-weight:600; letter-spacing:-1.5px; }
h1 span, h1 em { display:block; }
h1 em { color:var(--green); font-size:43px; font-style:normal; font-weight:500; letter-spacing:-2.4px; }
.ribbon { position:absolute; right:23%; top:63px; width:255px; height:210px; opacity:.68; filter:drop-shadow(0 20px 40px rgba(87,220,169,.14)); transform:rotate(-7deg); }
.ribbon::before, .ribbon::after, .ribbon span { content:""; position:absolute; border-radius:50%; border:36px solid transparent; transform:rotate(-33deg); }
.ribbon::before { width:150px; height:86px; left:44px; top:0; border-top-color:#60efdc; border-right-color:#9af3d6; }
.ribbon::after { width:116px; height:170px; left:33px; top:36px; border-left-color:#8de966; border-top-color:#b7ff75; filter:blur(.2px); }
.ribbon span { width:130px; height:76px; left:78px; top:49px; border-bottom-color:rgba(238,255,247,.8); border-left-color:#70dcd2; }

.prompt-card { position:relative; height:172px; padding:22px 22px 17px; border:1px solid rgba(110,153,126,.12); border-radius:27px; background:var(--panel); box-shadow:0 22px 50px rgba(96,148,127,.06); backdrop-filter:blur(17px); overflow:visible; transition:.25s; }
.prompt-card:focus-within { background:rgba(255,255,252,.79); border-color:rgba(103,199,162,.26); box-shadow:0 22px 60px rgba(64,158,128,.11); }
.prompt-main { display:flex; align-items:flex-start; height:91px; }
.upload-area { display:flex; align-items:flex-start; gap:8px; flex:0 0 auto; max-width:310px; }
.upload-tile { flex:0 0 47px; height:59px; display:grid; place-items:center; border:1px dashed rgba(80,99,90,.22); border-radius:5px; background:rgba(255,255,255,.74); transform:rotate(-7deg); cursor:pointer; transition:.2s; }
.upload-tile:hover { transform:rotate(0deg) scale(1.04); border-color:#6bc5a6; }
.upload-tile input { display:none; }
.upload-tile span { font-size:24px; font-weight:300; line-height:1; }
.upload-tile small { display:block; margin-top:4px; color:#78827e; font-size:8px; white-space:nowrap; }
.upload-tile.has-file { position:relative; transform:none; overflow:hidden; border-style:solid; }
.upload-tile.has-file img { width:100%; height:100%; object-fit:cover; }
.upload-remove { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:0; border:0; color:#fff; background:rgba(20,31,27,.66); opacity:0; cursor:pointer; transition:opacity .18s ease; backdrop-filter:blur(1px); }
.upload-remove span { font-size:20px; line-height:1; font-weight:300; }
.upload-remove small { margin:0; color:#fff; font-size:8px; }
.upload-tile.has-file:hover .upload-remove,.upload-remove:focus-visible { opacity:1; }
.frame-connector { align-self:center; color:#9da6a2; font-size:14px; }
.preview-list { display:flex; gap:7px; margin-left:11px; }
.preview-item { position:relative; width:56px; height:56px; overflow:hidden; border-radius:8px; }
.preview-item img { width:100%; height:100%; object-fit:cover; }
.preview-item button { position:absolute; top:2px; right:2px; width:17px; height:17px; padding:0; border:0; border-radius:50%; color:#fff; background:rgba(20,20,20,.65); font-size:11px; cursor:pointer; }
.file-preview { display:grid; place-items:center; padding:5px; color:#5e6d67; background:#edf4f0; font-size:9px; font-weight:700; word-break:break-all; }
textarea { flex:1; height:84px; min-width:0; padding:0 11px; resize:none; border:0; outline:none; box-shadow:none; background:transparent; color:#2c3330; font-size:14px; line-height:1.6; }
textarea:focus, textarea:focus-visible { border:0; outline:none; box-shadow:none; }
textarea::placeholder { color:#adb8b4; }
.prompt-toolbar { display:flex; align-items:center; justify-content:space-between; }
.tools-left { display:flex; align-items:center; gap:11px; min-width:0; }
.mode-picker { position:relative; }
.mode-chevron { width:11px; height:7px; margin-left:1px; fill:none; stroke:#808985; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
.mode-trigger[aria-expanded="true"] .mode-chevron { transform:rotate(180deg); }
.tool-select { display:flex; align-items:center; gap:6px; padding:6px 4px; border:0; background:transparent; white-space:nowrap; font-size:12px; cursor:pointer; }
.tool-select:hover { color:#318f72; }
.tool-select i { color:#808985; font-style:normal; font-size:14px; }
.tool-icon { width:17px; height:17px; display:inline-grid; place-items:center; border-radius:4px; color:white; background:#3859c6; font-size:10px; font-weight:bold; }
.tool-icon--green { background:#6da66d; }
.parameter-icon { font-size:15px; color:#5f6a66; }
.mode-menu { position:absolute; left:-3px; top:38px; z-index:20; width:172px; padding:6px; border:1px solid rgba(99,126,114,.12); border-radius:13px; background:rgba(255,255,253,.97); box-shadow:0 15px 38px rgba(45,78,65,.16); opacity:0; visibility:hidden; transform:translateY(-7px); transition:.18s ease; }
.mode-menu.is-open { opacity:1; visibility:visible; transform:none; }
.mode-option { display:flex; align-items:center; justify-content:space-between; width:100%; padding:10px 9px; border:0; border-radius:8px; background:transparent; font-size:12px; cursor:pointer; }
.mode-option:hover { background:#f0faf5; }
.mode-option.is-active { color:#258d75; background:#eef9f5; }
.mode-option-main { display:flex; align-items:center; gap:9px; }
.mode-option-icon { width:22px; height:22px; display:grid; place-items:center; border-radius:6px; color:#4f7568; background:#e8f3ee; }
.mode-option-check { color:#35b89b; }
.video-settings { position:relative; display:flex; align-items:center; min-width:0; }
.video-settings[hidden] { display:none; }
.settings-trigger { gap:5px; }
.settings-sliders { display:inline-block; transform:rotate(90deg); font-size:14px; }
.settings-summary { padding-left:5px; color:#4e5854; white-space:nowrap; font-size:11px; }
.settings-panel { position:absolute; left:-13px; bottom:40px; z-index:30; width:min(630px,calc(100vw - 120px)); padding:19px 20px 18px; border:1px solid rgba(87,110,100,.12); border-radius:20px; background:rgba(255,255,255,.98); box-shadow:0 18px 48px rgba(35,65,52,.2); opacity:0; visibility:hidden; transform:translateY(8px) scale(.99); transform-origin:bottom left; transition:.18s ease; }
.settings-panel.is-open { opacity:1; visibility:visible; transform:none; }
.settings-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.settings-panel-head h3 { margin:0; font-size:17px; font-weight:600; }
.settings-panel-head button { width:27px; height:27px; border:0; border-radius:50%; color:#7d8783; background:transparent; cursor:pointer; font-size:19px; }
.settings-panel-head button:hover { background:#f1f3f2; }
.setting-group { min-width:0; margin:0 0 15px; padding:0; border:0; }
.setting-group:last-child { margin-bottom:0; }
.setting-group legend { margin-bottom:7px; color:#909894; font-size:12px; }
.option-grid { display:grid; overflow:hidden; padding:3px; border-radius:12px; background:#f0f1f0; }
.option-grid button { min-width:0; height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:4px; border:0; border-radius:10px; background:transparent; cursor:pointer; font-size:11px; }
.option-grid button:hover { background:rgba(255,255,255,.58); }
.option-grid button.is-selected { background:#fff; box-shadow:0 2px 8px rgba(46,62,55,.09); }
.option-grid--ratio { grid-template-columns:repeat(9,1fr); }
.option-grid--duration { grid-template-columns:repeat(11,1fr); }
.option-grid--duration button { height:44px; flex-direction:row; }
.option-grid--resolution { grid-template-columns:repeat(2,1fr); }
.option-grid--resolution button { height:44px; flex-direction:row; }
.ratio-shape { display:block; width:15px; height:11px; border:1.7px solid #65716c; border-radius:2px; }
.ratio-auto { width:17px; height:17px; border-style:dashed; }
.ratio-portrait { width:7px; height:15px; }
.ratio-landscape { width:16px; height:9px; }
.ratio-square { width:13px; height:13px; }
.ratio-four-three { width:15px; height:11px; }
.ratio-three-four { width:10px; height:14px; }
.ratio-three-two { width:16px; height:10px; }
.ratio-two-three { width:10px; height:15px; }
.ratio-cinema { width:17px; height:7px; }
.submit-button { flex:0 0 31px; width:31px; height:31px; display:grid; place-items:center; padding:7px; border:0; border-radius:50%; color:white; background:#a0a4a2; cursor:pointer; transition:.2s; }
.prompt-card:focus-within .submit-button { background:#6dc2a4; }
.submit-button:hover { transform:translateY(-2px); background:#3eaa87 !important; }
.submit-button:disabled { cursor:wait; opacity:.58; transform:none; }
.submit-button svg { width:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.status-message { height:20px; margin:5px 20px 0; color:#599d84; font-size:12px; }
.gallery-section { position:relative; z-index:1; max-width:1190px; margin:0 auto; padding:9px 12px 60px; }
.gallery-head { position:relative; height:39px; display:flex; align-items:flex-start; justify-content:center; }
.tabs { display:flex; padding:3px; border-radius:19px; background:rgba(255,255,255,.5); }
.tabs button { min-width:60px; padding:7px 15px; border:0; border-radius:17px; color:#9aa29e; background:transparent; font-size:12px; cursor:pointer; transition:.2s; }
.tabs button.is-active { color:#27443d; background:#8dd8cf; box-shadow:0 6px 15px rgba(73,183,161,.14); }
.upload-script { position:absolute; right:8px; top:4px; padding:6px 8px; border:0; background:transparent; font-size:12px; cursor:pointer; }
.masonry { column-count:4; column-gap:10px; }
.work-card { display:inline-block; width:100%; min-width:0; margin:0 0 4px; break-inside:avoid; vertical-align:top; transition:opacity .25s, transform .25s; }
.work-card.is-hidden { display:none; }
.media { position:relative; overflow:hidden; border-radius:13px; background:#e9eee8; }
.media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.work-card:hover .media img { transform:scale(1.025); }
.media--cosmic { aspect-ratio:284/160; }
.media--animation { aspect-ratio:284/128; }
.media--portrait { aspect-ratio:284/476; }
.media--romance { aspect-ratio:284/126; }
.media--hero { aspect-ratio:284/304; }
.work-card h3 { margin:5px 6px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:500; }
.work-card p { margin:1px 6px 7px; color:#8e9692; font-size:10px; }
.carousel-arrow { position:absolute; top:50%; width:25px; height:25px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:white; background:rgba(11,28,55,.58); transform:translateY(-50%); cursor:pointer; }
.carousel-arrow.left { left:10px; } .carousel-arrow.right { right:10px; }
.dots { position:absolute; right:8px; bottom:3px; color:white; font-size:16px; letter-spacing:1px; }
.video-badge { position:absolute; right:8px; top:8px; padding:4px 7px; border-radius:12px; color:white; background:rgba(20,25,23,.5); backdrop-filter:blur(4px); font-size:9px; }
.media--night { height:195px; background:radial-gradient(circle at 55% 70%,#8ca187 0 3%,transparent 4%),linear-gradient(155deg,#06111a,#15272b 58%,#05080b); }
.media--night::before { content:""; position:absolute; inset:25% 0 0; opacity:.42; background:repeating-linear-gradient(82deg,transparent 0 16px,#83a17c 17px 18px); transform:skewX(-19deg); }
.night-figure { position:absolute; left:45%; bottom:-8px; width:42px; height:75px; border-radius:50% 50% 20% 20%; background:#282426; box-shadow:0 -7px 0 -1px #bb9280; }
.play { position:absolute; left:50%; top:50%; width:31px; height:31px; display:grid; place-items:center; border-radius:50%; color:white; background:rgba(255,255,255,.24); transform:translate(-50%,-50%); font-size:10px; }
.media--abstract { height:190px; display:grid; place-items:center; color:#fff; background:radial-gradient(circle at 20% 30%,#d2ff77,transparent 25%),radial-gradient(circle at 78% 23%,#82e8df,transparent 30%),linear-gradient(145deg,#171f39,#684aca); }
.media--abstract span { font-size:58px; font-weight:700; opacity:.72; }

.assistant-fab { position:fixed; right:12px; top:33%; z-index:25; width:45px; height:45px; padding:5px; border:0; border-radius:13px; color:white; background:linear-gradient(145deg,#2679ee,#5e9fff); box-shadow:0 10px 22px rgba(27,104,226,.32); cursor:pointer; transform:rotate(45deg); }
.assistant-fab::before { content:""; position:absolute; inset:4px; border:1px solid rgba(255,255,255,.5); border-radius:9px; }
.assistant-fab span { display:block; font-size:25px; transform:rotate(-45deg); }
.toast { position:fixed; left:50%; bottom:30px; z-index:50; max-width:calc(100vw - 40px); padding:11px 17px; border-radius:12px; color:white; background:rgba(26,35,31,.88); box-shadow:0 12px 34px rgba(0,0,0,.16); opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:.25s; font-size:13px; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (hover:none) {
  .upload-remove { inset:auto 2px 2px auto; width:20px; height:20px; border-radius:50%; opacity:1; background:rgba(20,31,27,.72); }
  .upload-remove span { font-size:16px; }
  .upload-remove small { display:none; }
}

@media (max-width: 1050px) {
  .hero-section { padding-left:4vw; padding-right:4vw; }
  .masonry { column-count:3; }
  .ribbon { right:13%; }
}

@media (max-width: 760px) {
  .sidebar { inset:auto 12px 12px; width:auto; height:62px; flex-direction:row; justify-content:center; border:1px solid rgba(255,255,255,.85); border-radius:22px; box-shadow:0 14px 35px rgba(50,86,72,.15); }
  .brand, .sidebar-bottom { display:none; }
  .side-nav { width:auto; margin:0; flex-direction:row; gap:8px; }
  .nav-item { width:72px; padding:5px 0; }
  .nav-item.is-active::before { left:50%; top:auto; bottom:-7px; width:20px; height:3px; border-radius:3px; transform:translateX(-50%); }
  main { margin-left:0; padding-bottom:74px; }
  .topbar { right:14px; top:12px; }
  .hero-section { min-height:auto; padding:99px 16px 25px; }
  h1 { margin-bottom:23px; font-size:27px; }
  h1 em { font-size:34px; line-height:1.25; }
  .ribbon { width:170px; height:160px; right:-28px; top:62px; opacity:.33; transform:scale(.8); }
  .prompt-card { height:206px; padding:18px 14px 14px; }
  .prompt-main { height:116px; }
  .upload-area { max-width:145px; }
  .tool-select--hide-mobile { display:none; }
  .tools-left { gap:3px; overflow:hidden; }
  .tool-select { max-width:170px; overflow:hidden; text-overflow:ellipsis; font-size:10px; }
  .settings-summary { display:none; }
  .settings-panel { position:fixed; left:12px; right:12px; bottom:86px; width:auto; max-height:70vh; overflow:auto; transform:translateY(8px); }
  .option-grid--ratio { grid-template-columns:repeat(3,1fr); }
  .option-grid--duration { grid-template-columns:repeat(6,1fr); }
  .gallery-section { padding:6px 12px 40px; }
  .masonry { column-count:2; column-gap:8px; }
  .media--portrait { aspect-ratio:3/4.7; }
  .assistant-fab { right:7px; top:auto; bottom:91px; transform:rotate(45deg) scale(.85); }
}

@media (max-width: 430px) {
  .credits { display:none; }
  .upgrade { border-left:0; }
  h1 { font-size:24px; }
  h1 em { font-size:31px; letter-spacing:-1.5px; }
  .upload-tile { flex-basis:43px; height:53px; }
  .prompt-card { border-radius:22px; }
  .tool-select:nth-child(2) { max-width:137px; }
  .upload-script { font-size:0; }
  .upload-script::after { content:"⇧ 上传"; font-size:11px; }
  .work-card h3 { font-size:11px; }
}

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