:root{--ink:#050a12;--line:#213043;--cyan:#44e5ef;--blue:#1582ff;--white:#f4f8fb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--white);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}button,textarea{font:inherit}button{color:inherit}.hidden{display:none!important}.app-shell{min-height:100vh;background:radial-gradient(circle at 72% 17%,rgba(21,130,255,.14),transparent 31%),linear-gradient(rgba(18,30,44,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(18,30,44,.22) 1px,transparent 1px),var(--ink);background-size:auto,64px 64px,64px 64px,auto}.topbar{height:76px;padding:0 max(28px,calc((100vw - 1280px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(94,116,143,.22);background:rgba(5,10,18,.82);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none;font-size:14px;letter-spacing:.16em}.brand b{color:var(--cyan);font-weight:600}.brand-mark{width:32px;height:32px;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:8px 6px;border:1px solid #2b4057;transform:skew(-8deg)}.brand-mark i{width:4px;background:var(--cyan);box-shadow:0 0 14px rgba(68,229,239,.7)}.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:16px}.brand-mark i:nth-child(3){height:11px}.topbar nav{display:flex;gap:28px;align-items:center;font-size:13px}.topbar nav a{color:#8fa0b5;text-decoration:none}.topbar nav a:hover,.topbar nav a.active{color:#fff}.api-badge{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #23364b;color:#a8b5c4}.api-badge i,.status-chip i{width:6px;height:6px;border-radius:50%;background:#46eaa4;box-shadow:0 0 10px #46eaa4}.workspace,.history-section{width:min(1280px,calc(100% - 48px));margin:0 auto}.workspace{padding:70px 0 54px}.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}.eyebrow{margin:0 0 17px;color:#7990a7;font-size:11px;letter-spacing:.24em;font-weight:700}.eyebrow span{color:var(--cyan);margin-right:10px}h1{margin:0;font-size:clamp(40px,5vw,70px);line-height:1.03;letter-spacing:-.045em;font-weight:650}h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #7beaf1;text-shadow:0 0 30px rgba(68,229,239,.12)}.intro-copy{max-width:390px;color:#91a0b2;font-size:14px;line-height:1.9;margin:0 0 6px}.studio-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr);border:1px solid var(--line);box-shadow:0 32px 90px rgba(0,0,0,.3)}.control-panel,.result-panel{min-width:0;padding:30px;background:rgba(8,16,27,.9)}.control-panel{border-right:1px solid var(--line)}.result-panel{background:linear-gradient(145deg,rgba(12,27,43,.94),rgba(6,13,23,.96))}.panel-heading{display:flex;align-items:center;justify-content:space-between;min-height:30px;margin-bottom:28px}.panel-heading>div{display:flex;align-items:center;gap:12px}.panel-heading h2{font-size:15px;letter-spacing:.04em;margin:0}.panel-index{color:var(--cyan);font-family:monospace;font-size:11px}.model-chip,.status-chip{border:1px solid #28445a;padding:7px 10px;color:#a5b9c9;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.status-chip{display:flex;align-items:center;gap:7px}.status-chip.running i,.status-chip.queued i{background:#ffc75d;box-shadow:0 0 10px #ffc75d}.status-chip.failed i,.status-chip.expired i{background:#ff667a;box-shadow:0 0 10px #ff667a}.field-label,fieldset legend{display:block;color:#b9c5d2;font-size:12px;margin-bottom:10px}.field-label span{color:#627487;margin-left:8px;font-size:10px;letter-spacing:.1em}.prompt-box{border:1px solid #26374b;background:#070e18;transition:.2s}.prompt-box:focus-within{border-color:#3e9ead;box-shadow:0 0 0 3px rgba(68,229,239,.06)}textarea{width:100%;min-height:150px;resize:vertical;padding:18px;border:0;outline:0;background:transparent;color:#eef8fb;line-height:1.75;font-size:14px}textarea::placeholder{color:#536274}.prompt-tools{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid #172536;color:#5f7185;font-size:10px}.text-button{border:0;background:transparent;color:#68dce5;cursor:pointer;padding:0}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;margin-top:25px}fieldset{border:0;margin:0;padding:0}.segmented{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #27384b}.segmented.two{grid-template-columns:repeat(2,1fr)}.segmented button{height:39px;border:0;border-right:1px solid #27384b;background:#09121e;color:#75869b;font-size:11px;cursor:pointer}.segmented button:last-child{border-right:0}.segmented button.selected{background:linear-gradient(135deg,rgba(68,229,239,.18),rgba(21,130,255,.16));color:#e9feff;box-shadow:inset 0 -2px var(--cyan)}.sound-toggle{height:41px;width:100%;padding:0 12px;display:flex;align-items:center;gap:10px;border:1px solid #27384b;background:#09121e;color:#75869b;font-size:11px;cursor:pointer}.sound-toggle.on{color:#dffcff}.switch{width:31px;height:16px;border-radius:20px;background:#263447;padding:2px;transition:.2s}.switch i{display:block;width:12px;height:12px;border-radius:50%;background:#738399;transition:.2s}.sound-toggle.on .switch{background:rgba(68,229,239,.35)}.sound-toggle.on .switch i{transform:translateX(15px);background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.generate-button{width:100%;height:58px;margin-top:28px;border:0;background:linear-gradient(100deg,#22dce7,#198cf4);color:#03111b;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:0 18px 0 23px;text-align:left;cursor:pointer;font-weight:800;box-shadow:0 12px 34px rgba(24,162,218,.17);transition:.2s}.generate-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.generate-button:disabled{opacity:.6;cursor:wait}.generate-button small{font-size:10px;font-weight:600;opacity:.65}.generate-button b{font-size:22px}.secure-note{text-align:center;color:#56687b;font-size:10px;margin:12px 0 0}.secure-note span{color:#5acbd5}.error-message{color:#ff91a0;background:rgba(255,77,99,.08);border:1px solid rgba(255,77,99,.26);padding:10px 12px;font-size:12px;margin:18px 0 -10px}.empty-state{min-height:468px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.frame-corners{width:210px;aspect-ratio:16/10;display:grid;place-items:center;position:relative;background:linear-gradient(135deg,rgba(31,68,96,.25),rgba(8,19,31,.65));border:1px solid #1e3347;overflow:hidden}.frame-corners:before,.frame-corners:after{content:"";position:absolute;width:32px;height:32px;border-color:var(--cyan)}.frame-corners:before{left:-1px;top:-1px;border-left:2px solid;border-top:2px solid}.frame-corners:after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid}.play-symbol{width:49px;height:49px;border-radius:50%;display:grid;place-items:center;padding-left:3px;background:rgba(68,229,239,.08);border:1px solid rgba(68,229,239,.5);color:var(--cyan);font-size:15px}.scan-line{position:absolute;left:0;right:0;top:30%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 12px var(--cyan)}.empty-state h3,.generating-visual h3,.mock-success h3{font-size:14px;margin:26px 0 9px}.empty-state p,.generating-visual p,.mock-success p{color:#64768a;font-size:11px;margin:0;line-height:1.7}.task-state video{width:100%;max-height:400px;background:#030609;border:1px solid #23384d}.generating-visual,.mock-success{min-height:305px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.orbit{width:108px;height:108px;border:1px solid #24445c;border-radius:50%;display:grid;place-items:center;position:relative;animation:spin 7s linear infinite}.orbit:before{content:"";position:absolute;inset:12px;border:1px dashed #287487;border-radius:50%}.orbit span{font-family:monospace;color:var(--cyan);font-size:15px}.orbit i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);top:-4px}.orbit i:nth-child(2){top:auto;bottom:10px;right:4px;background:var(--blue)}@keyframes spin{to{transform:rotate(360deg)}}.mock-success>span{width:58px;height:58px;border:1px solid #3ce6a0;color:#3ce6a0;display:grid;place-items:center;border-radius:50%;font-size:25px}.mock-success.failed>span{border-color:#ff667a;color:#ff667a}.progress-steps{list-style:none;padding:20px 0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #1d2c3d;border-bottom:1px solid #1d2c3d}.progress-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;color:#526579;font-size:9px}.progress-steps li:not(:last-child):after{content:"";position:absolute;height:1px;background:#27384a;width:calc(100% - 30px);left:calc(50% + 15px);top:10px}.progress-steps i{width:21px;height:21px;border:1px solid #32465a;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:monospace;background:#0a1420;z-index:1}.progress-steps li.done{color:#bbf8f6}.progress-steps li.done i{color:#062026;background:var(--cyan);border-color:var(--cyan)}.progress-steps li.done:not(:last-child):after{background:var(--cyan)}.task-meta{display:grid;grid-template-columns:auto 1fr;gap:8px 15px;margin-top:18px;font-size:10px}.task-meta span{color:#64768a}.task-meta code,.task-meta b{font-size:10px;color:#acbac8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.result-actions button,.result-actions a{height:42px;display:grid;place-items:center;border:1px solid #2b4258;background:#0c1825;color:#b4c2d0;text-decoration:none;font-size:11px;cursor:pointer}.result-actions a{border-color:#269ab1;color:#8af5f1}.history-section{padding:60px 0 80px;border-top:1px solid rgba(63,83,104,.2)}.history-title{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px}.history-title h2{font-size:25px;margin:0}.history-title .eyebrow{margin-bottom:10px}.history-title button{border:1px solid #26394d;background:#0a131f;color:#8497ab;font-size:11px;padding:9px 13px;cursor:pointer}.history-empty{border:1px dashed #26384a;color:#617388;padding:28px;text-align:center;font-size:12px}.history-empty.error{color:#ff91a0}.history-list{border:1px solid #213043}.history-row{width:100%;display:grid;grid-template-columns:12px minmax(260px,1fr) 60px 50px 90px 100px;gap:18px;align-items:center;text-align:left;border:0;border-bottom:1px solid #1e2d3e;background:rgba(9,17,28,.86);padding:17px 18px;color:#7f91a5;font-size:11px;cursor:pointer}.history-row:last-child{border-bottom:0}.history-row:hover{background:#0d1a28}.history-prompt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c3ced9}.history-row b{color:#8bcfcf}.history-row time{text-align:right}.mini-status{width:6px;height:6px;border-radius:50%;background:#ffc75d}.mini-status.succeeded{background:#48e6a4}.mini-status.failed,.mini-status.expired{background:#ff667a}footer{padding:25px max(28px,calc((100vw - 1280px)/2));border-top:1px solid #172536;display:flex;justify-content:space-between;color:#53677a;font-size:10px;letter-spacing:.05em}footer span{color:#7890a4}footer p{margin:0}@media(max-width:900px){.topbar nav a{display:none}.studio-grid{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid var(--line)}.intro{align-items:flex-start;flex-direction:column}.intro-copy{max-width:620px}.history-row{grid-template-columns:12px 1fr 70px 90px}.history-row span:nth-child(3),.history-row span:nth-child(4){display:none}}@media(max-width:600px){.topbar{height:66px;padding:0 18px}.api-badge{display:none}.workspace,.history-section{width:calc(100% - 28px)}.workspace{padding-top:42px}.intro{margin-bottom:28px}.intro-copy{font-size:12px}.studio-grid{border-left:0;border-right:0}.control-panel,.result-panel{padding:22px 18px}.settings-grid{grid-template-columns:1fr}.empty-state{min-height:390px}.history-row{grid-template-columns:10px 1fr 70px;padding:15px 12px;gap:10px}.history-row b{display:none}.history-row time{font-size:9px}footer{padding:22px 18px;flex-direction:column;gap:8px}}