:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #153934; background: #f4f5ef; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, textarea, select { font: inherit; }
button, .file-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 7px; padding: 11px 15px; font-weight: 650; cursor: pointer; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
button:hover, .file-trigger:hover { transform: translateY(-1px); }
.spin { animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
button:disabled { cursor: wait; opacity: .6; transform: none; }
button svg, .file-trigger svg, .brand svg, .workflow-key svg { width: 17px; height: 17px; stroke-width: 2; }
.topbar { height: 64px; border-bottom: 1px solid #dde3dc; background: rgba(253, 253, 248, .92); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: space-between; padding: 0 max(22px, calc((100% - 1120px) / 2)); position: sticky; top: 0; z-index: 10; }.topbar-actions { display: flex; align-items: center; gap: 17px; }.account-area { display: flex; align-items: center; gap: 10px; color: #536b65; font-size: 12px; }.account-button { padding: 7px 10px; color: #45635d; background: #edf3ee; font-size: 12px; }.account-button:hover { background: #e0ece5; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #163b35; font-size: 17px; font-weight: 760; text-decoration: none; }
.brand-mark { width: 31px; height: 31px; border-radius: 7px; background: #0d6458; color: #fff; display: grid; place-items: center; }
.connection { display: flex; align-items: center; gap: 8px; color: #62736f; font-size: 13px; }
.connection-dot { width: 8px; height: 8px; border-radius: 50%; background: #d9a934; box-shadow: 0 0 0 3px #faf1d6; }
main { max-width: 1120px; margin: 0 auto; padding: 52px 22px 82px; }
.workspace-intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin: 0 0 31px; }
.eyebrow, .step-number { margin: 0; color: #0d8070; font-size: 12px; font-weight: 760; letter-spacing: 0; text-transform: uppercase; }
h1 { font-size: 35px; line-height: 1.16; letter-spacing: 0; margin: 7px 0 11px; color: #153934; }
.workspace-intro > div > p:last-child { max-width: 600px; color: #677773; font-size: 15px; line-height: 1.7; margin: 0; }
.workflow-key { color: #45635d; border: 1px solid #d9e5dd; background: #edf5ef; padding: 10px 13px; border-radius: 7px; display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.panel { background: #fffefa; border: 1px solid #dce4dc; border-radius: 8px; padding: 26px; margin-bottom: 17px; box-shadow: 0 2px 8px rgba(20, 57, 52, .025); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
.section-heading h2 { color: #153934; font-size: 20px; letter-spacing: 0; margin: 4px 0 5px; }
.section-heading p:not(.step-number) { margin: 0; color: #6d7c78; font-size: 13px; line-height: 1.5; }
.status-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.status-chip.neutral { background: #eff2ed; color: #66736f; }.status-chip.ready { background: #e4f4ee; color: #0b725e; }.status-chip.running { background: #fff4d7; color: #96670e; }.status-chip.failed { background: #fde9e5; color: #ac3e2e; }
.project-row { display: grid; grid-template-columns: 105px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.input-label { color: #39534e; font-size: 13px; font-weight: 700; }
input, textarea, select { width: 100%; color: #183e38; border: 1px solid #d5dfd7; outline: none; border-radius: 6px; background: #fff; padding: 11px 12px; transition: border-color .18s, box-shadow .18s; }
textarea { display: block; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { border-color: #0b8a78; box-shadow: 0 0 0 3px rgba(13, 128, 112, .12); }
.primary { color: #fff; background: #0d6c5e; box-shadow: 0 1px 1px rgba(0,0,0,.05); }.primary:hover { background: #095d51; box-shadow: 0 5px 14px rgba(13, 108, 94, .17); }
.secondary { color: #16675b; background: #eaf3ee; }.secondary:hover { background: #deeee7; }
.danger { color: #a74538; background: #fdebe7; }.assist-text { margin: 12px 0 0; color: #74817e; font-size: 13px; line-height: 1.55; }
.progress-steps { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 11px; color: #7c8986; font-size: 13px; margin: 4px 2px 21px; }.progress-steps span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }.progress-steps b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #dfe7e1; color: #6a7773; font-size: 11px; }.progress-steps .active { color: #0b7061; font-weight: 720; }.progress-steps .active b { background: #0d7061; color: #fff; }.progress-steps i { height: 1px; background: #dce4dc; }
.asset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.asset-card { min-height: 214px; padding: 18px; border: 1px solid #d9e4df; border-radius: 7px; display: flex; flex-direction: column; align-items: flex-start; background: #fff; }.asset-card h3 { color: #294a43; font-size: 15px; margin: 11px 0 5px; }.asset-card p { color: #71807c; font-size: 12px; line-height: 1.55; margin: 0 0 auto; }.asset-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 7px; }.asset-icon svg { width: 18px; height: 18px; }.image-card .asset-icon { color: #0c806e; background: #e4f4ed; }.video-card .asset-icon { color: #7359a8; background: #eee9f8; }.audio-card .asset-icon { color: #b85938; background: #fbece3; }.voice-card .asset-icon { color: #307c9b; background: #e6f3f7; }.file-input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }.file-trigger { margin-top: 15px; width: 100%; border: 1px dashed #b8ccc3; background: #fafdfb; color: #38645b; font-size: 13px; }.file-status { margin-top: 8px !important; min-height: 19px; color: #80908b !important; font-size: 11px !important; }.inline-actions { margin-top: 15px; }.icon-text { font-size: 13px; }.upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid #e6ebe5; margin-top: 18px; padding-top: 17px; }.asset-list { list-style: none; padding: 0; margin: 17px 0 0; }.asset-list:empty { display: none; }.asset-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #eef1ec; color: #405953; font-size: 13px; }.asset-list li:first-child { border-top: 0; }.asset-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.asset-meta { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: #82908c; font-size: 12px; }.asset-type { padding: 3px 7px; border-radius: 999px; background: #edf3ee; color: #528075; font-size: 11px; }
.brief-panel { margin-top: 17px; }.intent-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 17px; }.intent { background: #f3f5f1; color: #61716d; border: 1px solid #e1e6e0; padding: 7px 11px; font-size: 12px; }.intent.active { color: #0c7464; border-color: #91c9bb; background: #e7f4ed; }.plan-row, .generation-controls, .panel-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 13px; }.plan-row select, .generation-controls select { width: min(330px, 100%); }.panel-actions { border-top: 1px solid #e7ece6; padding-top: 17px; }.action-status { color: #68817b; font-size: 13px; }.action-status.ok { color: #0b735f; }.action-status.error { color: #b44636; }.progress { height: 7px; overflow: hidden; border-radius: 999px; background: #e8ede8; margin: 20px 0 10px; }.progress i { display: block; width: 0; height: 100%; background: #11937d; transition: width .35s ease; }.result-area { display: flex; justify-content: space-between; gap: 16px; align-items: center; border: 1px solid #c5dfd5; border-radius: 7px; background: #eff8f3; margin: 17px 0; padding: 15px; }.result-area h3 { margin: 3px 0 0; color: #205448; font-size: 16px; }.download { text-decoration: none; }.download.hidden { display: none; }video { display: block; width: min(100%, 420px); border-radius: 7px; background: #10201d; margin: 18px auto; }.task-details { margin-top: 14px; color: #657774; font-size: 13px; }.task-details summary { cursor: pointer; }.task-details pre { max-height: 230px; overflow: auto; padding: 13px; background: #18312c; border-radius: 6px; color: #d5e6df; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }.hidden { display: none !important; }
@media (max-width: 860px) { .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.asset-card { min-height: 190px; }.workspace-intro { align-items: flex-start; flex-direction: column; }.workflow-key { white-space: normal; } }
@media (max-width: 620px) { .topbar { padding: 0 16px; }.connection { font-size: 11px; } main { padding: 31px 14px 54px; } h1 { font-size: 30px; }.panel { padding: 18px; }.project-row { grid-template-columns: 1fr; gap: 8px; }.asset-grid { grid-template-columns: 1fr; }.progress-steps { grid-template-columns: auto 1fr auto 1fr auto; font-size: 11px; gap: 5px; }.progress-steps span { gap: 5px; }.progress-steps b { width: 19px; height: 19px; }.section-heading { gap: 12px; }.section-heading h2 { font-size: 18px; }.result-area { align-items: flex-start; flex-direction: column; }.plan-row select, .generation-controls select { width: 100%; } }
.model-field { display: grid; gap: 5px; min-width: min(220px, 100%); color: #526b65; font-size: 11px; font-weight: 700; }.model-field select { width: 100%; }.model-status { align-self: center; color: #72847f; font-size: 12px; max-width: 270px; }.model-status.ready { color: #0b735f; }.model-status.warning { color: #a36c13; }
.auth-gate { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 35px 18px 70px; background: #f4f5ef; }.auth-card { width: min(430px, 100%); padding: 31px; border: 1px solid #dce4dc; border-radius: 9px; background: #fffefa; box-shadow: 0 8px 28px rgba(20, 57, 52, .06); }.auth-brand { margin-bottom: 30px; }.auth-card h1 { margin: 6px 0 10px; font-size: 28px; }.auth-intro { margin: 0 0 23px; color: #6d7c78; font-size: 13px; line-height: 1.6; }.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 21px; border-radius: 7px; background: #edf2ed; }.auth-tab { padding: 9px; color: #657774; background: transparent; font-size: 13px; }.auth-tab.active { color: #0b7061; background: #fffefa; box-shadow: 0 1px 4px rgba(20, 57, 52, .08); }.auth-card .input-label { display: block; margin: 13px 0 7px; }.auth-submit { width: 100%; margin-top: 21px; }.auth-card .action-status { min-height: 20px; margin: 11px 0 0; }.auth-card .action-status:empty { display: none; }
.settings-model-list { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 16px; }.settings-model { padding: 5px 8px; border-radius: 999px; background: #f0f2ef; color: #71807c; font-size: 11px; }.settings-model.available { background: #e3f4ec; color: #0b735f; }
.workflow-key { cursor: pointer; font: inherit; }.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; }.modal-backdrop { position: absolute; inset: 0; background: rgba(18, 40, 35, .32); backdrop-filter: blur(3px); }.modal-card { position: relative; width: min(560px, 100%); padding: 25px; border: 1px solid #d7e2da; border-radius: 9px; background: #fffefa; box-shadow: 0 18px 60px rgba(20, 57, 52, .2); }.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.modal-heading h2 { margin: 5px 0 0; color: #153934; font-size: 22px; }.modal-intro { margin: 13px 0 20px; color: #6d7c78; font-size: 13px; line-height: 1.6; }.icon-button { width: 34px; height: 34px; padding: 0; color: #60726d; background: #edf3ee; }.icon-button:hover { background: #e2ece6; }.settings-control { margin: 7px 0 14px; }.key-row { display: flex; align-items: stretch; gap: 9px; margin-top: 7px; }.key-row .settings-control { margin: 0; }.key-row .primary { white-space: nowrap; }.saved-credentials { margin-top: 21px; border-top: 1px solid #e5ebe5; padding-top: 16px; }.saved-heading { display: flex; justify-content: space-between; gap: 12px; color: #405953; font-size: 13px; }.saved-heading span { color: #82908c; font-size: 11px; }.saved-credentials ul { list-style: none; padding: 0; margin: 9px 0 0; }.saved-credentials li { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid #eef1ec; color: #536b65; font-size: 13px; }.credential-state { color: #0b735f; }.credential-empty { color: #82908c !important; }