:root { --ink:#e9eef7; --muted:#9ba8ba; --line:#273143; --panel:#141b27; --canvas:#0c111b; --accent:#b9f55d; --accent-ink:#122000; --danger:#ff897d; --radius:8px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--canvas); }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:232px minmax(0, 1fr); }
.sidebar { border-right:1px solid var(--line); padding:26px 16px 20px; display:flex; flex-direction:column; background:#101722; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:16px; font-weight:700; text-decoration:none; margin:0 8px 44px; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; border-radius:6px; color:var(--accent-ink); background:var(--accent); font-family:Georgia,serif; }
.nav { display:grid; gap:5px; }
.nav-link { display:flex; gap:13px; padding:11px 12px; color:var(--muted); text-decoration:none; font-size:14px; border-radius:6px; }
.nav-link span { font-family:ui-monospace, monospace; font-size:11px; opacity:.65; }
.nav-link:hover, .nav-link.active { color:var(--ink); background:#1d2735; }
.nav-link.active { box-shadow:inset 2px 0 0 var(--accent); }
.sidebar-foot { margin-top:auto; padding:13px 8px 0; border-top:1px solid var(--line); }
.retention-note { color:var(--muted); font-size:12px; line-height:1.55; margin-bottom:12px; }
.key-status { font-size:11px; display:inline-flex; gap:6px; align-items:center; }
.key-status::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--muted); }
.key-status.valid { color:var(--accent); }.key-status.valid::before { background:var(--accent); }.key-status.invalid { color:var(--danger); }.key-status.invalid::before { background:var(--danger); }
.workspace { min-width:0; padding:30px clamp(20px, 4vw, 62px) 50px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:34px; }.eyebrow { color:var(--accent); font-family:ui-monospace, monospace; font-size:11px; letter-spacing:.12em; margin:0 0 7px; }.topbar h1, h2, h3 { margin:0; letter-spacing:0; }.topbar h1 { font-size:28px; }.key-button { border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:#151d2a; color:var(--ink); font-size:13px; }.key-button span { margin-left:8px; color:var(--accent); }.key-button:hover { border-color:#536074; }
.page { display:none; }.page.active { display:block; }.page-grid { display:grid; grid-template-columns:minmax(340px, 430px) minmax(0, 1fr); gap:22px; align-items:stretch; }.control-panel,.result-panel,.video-shell { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }.control-panel { padding:18px; }.mode-switch { display:grid; grid-template-columns:1fr 1fr; padding:4px; margin-bottom:20px; border:1px solid var(--line); background:#0e141e; border-radius:6px; }.mode-button { padding:9px; border:0; border-radius:4px; background:transparent; color:var(--muted); font-size:13px; }.mode-button.active { background:#273345; color:var(--ink); }
.field { margin-bottom:17px; }.field > label { display:block; color:#cdd6e3; font-size:13px; margin-bottom:8px; }.field-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }.field-heading label,.field-heading span { font-size:13px; }.field-heading span { color:var(--muted); font-size:11px; }.field textarea { resize:vertical; width:100%; min-height:172px; border:1px solid var(--line); border-radius:6px; padding:12px; background:#0d131c; color:var(--ink); line-height:1.55; outline:none; }.field textarea:focus, select:focus, input:focus { border-color:var(--accent); outline:1px solid rgba(185,245,93,.2); }.two-column { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.field select,.field input { width:100%; border:1px solid var(--line); border-radius:6px; background:#0d131c; color:var(--ink); padding:10px; font-size:13px; }.count-field { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:14px; }.count-field > p { grid-column:1 / -1; margin:8px 0 0; color:var(--muted); font-size:11px; }.count-field code { color:#dce9b9; }.stepper { display:flex; border:1px solid var(--line); border-radius:5px; overflow:hidden; }.stepper button,.stepper output { width:32px; height:30px; display:grid; place-items:center; border:0; background:#0d131c; color:var(--ink); }.stepper button:hover { background:#273345; }.stepper output { border-left:1px solid var(--line); border-right:1px solid var(--line); font-size:13px; }.generate-button,.primary-button { width:100%; border:0; border-radius:6px; padding:12px 14px; background:var(--accent); color:var(--accent-ink); font-weight:750; font-size:13px; }.generate-button:hover,.primary-button:hover { background:#cef985; }.generate-button:disabled,.primary-button:disabled { cursor:wait; opacity:.62; }
.source-field.hidden,.seedance-reference-field.hidden,.seedance-fast-image-field.hidden,.seedance-channel2-image-field.hidden { display:none; }.upload-zone { min-height:96px; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:16px; border:1px dashed #58667c; border-radius:6px; text-align:center; color:var(--ink); background:#111925; cursor:pointer; }.upload-zone:hover,.upload-zone.dragging { border-color:var(--accent); background:#182419; }.upload-zone input { display:none; }.upload-zone strong { font-size:13px; }.upload-zone span { font-size:11px; color:var(--muted); }.file-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }.file-chip { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:5px 7px; border:1px solid var(--line); border-radius:4px; color:#ccd6e7; font-size:11px; }.file-preview-list { gap:8px; }.file-preview { position:relative; width:56px; height:56px; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#0d131c; }.file-preview img { display:block; width:100%; height:100%; object-fit:cover; }.file-preview span { position:absolute; inset:auto 0 0; overflow:hidden; padding:3px 4px; background:rgba(5,8,13,.76); color:#dbe4f0; font-size:9px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }.file-remove-button { position:absolute; z-index:1; top:2px; right:2px; display:grid; place-items:center; width:18px; height:18px; padding:0; border:1px solid rgba(255,255,255,.35); border-radius:4px; background:rgba(12,17,27,.88); color:#fff; font-size:14px; line-height:1; }.file-remove-button:hover,.file-remove-button:focus-visible { border-color:var(--danger); background:var(--danger); color:#250b08; }
.result-panel { min-height:620px; padding:22px; }.result-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line); }.result-head h2 { font-size:17px; }.history-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:7px; }.history-action-button { border:1px solid var(--line); border-radius:4px; padding:6px 8px; background:#151d2a; color:var(--ink); font-size:11px; white-space:nowrap; }.history-action-button:hover:not(:disabled) { border-color:#69768b; }.history-action-button:disabled { cursor:not-allowed; opacity:.52; }.retention-badge { padding:6px 8px; border:1px solid #536435; border-radius:4px; color:#c9ef8d; font-size:11px; white-space:nowrap; }.result-grid { margin-top:18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }.result-grid.empty-state { min-height:500px; display:grid; place-items:center; grid-template-columns:1fr; }.empty-copy { max-width:300px; text-align:center; }.empty-index { display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:15px; border:1px solid var(--line); color:var(--accent); font-family:ui-monospace,monospace; font-size:11px; }.empty-copy h3 { font-size:16px; margin-bottom:8px; }.empty-copy p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }.image-card { position:relative; overflow:hidden; border:1px solid var(--line); background:#0e151f; border-radius:6px; }.image-card img { width:100%; aspect-ratio:1; display:block; object-fit:cover; background:#0a0f16; }.image-card-footer { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:8px; }.image-card-footer span { font-size:10px; color:var(--muted); }.card-actions { display:flex; align-items:center; gap:8px; }.download-link { color:var(--accent); font-size:12px; text-decoration:none; }.history-select-checkbox { position:absolute; z-index:2; top:8px; left:8px; width:18px; height:18px; margin:0; accent-color:var(--accent); cursor:pointer; }.history-delete-button { border:0; padding:0; background:transparent; color:#ffaaa1; font-size:11px; cursor:pointer; }.history-delete-button:hover,.history-delete-button:focus-visible { color:#fff; text-decoration:underline; }.result-error { grid-column:1 / -1; border:1px solid rgba(255,137,125,.4); border-radius:6px; padding:11px; color:#ffb5ad; background:rgba(255,137,125,.06); font-size:12px; }
.video-shell { max-width:880px; min-height:500px; padding:42px; }.video-shell h2 { font-size:25px; margin-bottom:12px; }.video-shell > p:not(.eyebrow) { max-width:520px; color:var(--muted); line-height:1.6; }.secondary-button { border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:#1d2734; color:var(--ink); font-size:13px; }.secondary-button:hover { border-color:#69768b; }.video-key-check { margin:14px 0 35px; }.coming-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.coming-grid span { min-height:140px; display:flex; align-items:flex-end; padding:12px; color:var(--muted); background:#0d131c; border:1px dashed #3a4658; font-family:ui-monospace,monospace; font-size:11px; }
.key-dialog { width:min(480px, calc(100vw - 32px)); padding:0; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#141b27; box-shadow:0 18px 60px rgba(0,0,0,.5); }.key-dialog::backdrop { background:rgba(4,8,14,.7); }.key-dialog form { padding:22px; }.dialog-top { display:flex; align-items:flex-start; justify-content:space-between; }.dialog-top h2 { font-size:19px; }.close-button { border:0; background:transparent; color:var(--muted); font-size:18px; }.key-dialog p { margin:15px 0 18px; color:var(--muted); font-size:13px; line-height:1.55; }.key-dialog label { display:block; margin-bottom:7px; color:#cbd4e1; font-size:13px; }.key-message { min-height:20px; padding-top:7px; color:var(--danger); font-size:12px; }.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }.dialog-actions .primary-button { width:auto; }.toast { position:fixed; bottom:24px; right:24px; transform:translateY(12px); opacity:0; pointer-events:none; transition:.2s ease; max-width:min(400px, calc(100vw - 40px)); padding:11px 13px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#1c2735; font-size:13px; }.toast.show { transform:translateY(0); opacity:1; }.toast.error { border-color:rgba(255,137,125,.5); color:#ffc0b9; }
@media (max-width:900px) { .app-shell { grid-template-columns:minmax(0, 1fr); }.sidebar { min-width:0; min-height:auto; padding:14px 18px; border-right:0; border-bottom:1px solid var(--line); }.brand { margin:0 0 14px; }.nav { display:flex; min-width:0; width:100%; overflow-x:auto; }.nav-link { flex:0 0 auto; white-space:nowrap; }.sidebar-foot { display:none; }.page-grid { grid-template-columns:1fr; }.result-panel { min-height:480px; }.workspace { min-width:0; padding:24px 18px 38px; } }
@media (max-width:520px) { .topbar { align-items:center; }.topbar h1 { font-size:23px; }.key-button { font-size:11px; }.two-column { grid-template-columns:1fr; gap:0; }.result-panel { padding:16px; }.video-shell { padding:28px 20px; }.coming-grid { grid-template-columns:1fr; }.coming-grid span { min-height:80px; } }
.download-link.hidden { display:none; }
.image-card.save-failed { border-color:rgba(255,137,125,.55); }
.image-card.save-failed .image-card-footer span { color:#ffb5ad; }
.job-preview { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px; background:#0a0f16; color:var(--ink); text-align:center; }
.job-preview img { width:100%; height:100%; object-fit:cover; }
.job-preview video { width:100%; height:100%; display:block; object-fit:contain; background:#05080d; }
.job-preview strong { font-size:13px; }
.job-preview small { color:var(--muted); font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.pending-card { border-color:#52643a; }
.pending-card .image-card-footer { background:rgba(185,245,93,.04); }
.job-spinner { width:24px; height:24px; border:2px solid #3e4d34; border-top-color:var(--accent); border-radius:50%; animation:spin .85s linear infinite; }
.job-index { color:var(--muted); font-size:10px; }
.job-diagnostics { border-top:1px solid rgba(255,137,125,.25); background:#0b1018; }
.job-diagnostics summary { padding:9px; color:#ffb5ad; cursor:pointer; font-size:11px; }
.job-diagnostics pre { max-height:220px; overflow:auto; margin:0; padding:10px; border-top:1px solid var(--line); color:#c5d0df; font:10px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.image-card img,.job-preview img { cursor:zoom-in; }
.image-preview-dialog { width:100vw; max-width:none; height:100vh; max-height:none; padding:0; border:0; background:transparent; }
.image-preview-dialog::backdrop { background:rgba(3,7,12,.9); }
.preview-stage { width:100%; height:100%; display:grid; place-items:center; padding:28px; cursor:zoom-out; }
.preview-stage img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; cursor:default; box-shadow:0 10px 44px rgba(0,0,0,.6); }
.preview-close-button { position:fixed; z-index:3; top:18px; right:18px; display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid rgba(255,255,255,.45); border-radius:4px; background:rgba(12,17,27,.9); color:#fff; font-size:24px; line-height:1; cursor:pointer; }.preview-close-button:hover,.preview-close-button:focus-visible { border-color:var(--accent); color:var(--accent); }
@keyframes spin { to { transform:rotate(360deg); } }
.grok-image-options { margin-bottom:17px; }
.grok-mode-button,.grok-image-kind-button,.seedance-mode-button,.seedance-fast-mode-button,.seedance-channel2-mode-button { padding:9px; border:0; border-radius:4px; background:transparent; color:var(--muted); font-size:13px; }
.grok-mode-button.active,.grok-image-kind-button.active,.seedance-mode-button.active,.seedance-fast-mode-button.active,.seedance-channel2-mode-button.active { background:#273345; color:var(--ink); }
.grok-image-options.hidden,.grok-image-field.hidden { display:none; }
.model-guidance { margin:-4px 0 17px; padding:9px 10px; border-left:2px solid var(--accent); background:#111924; color:var(--muted); font-size:11px; line-height:1.55; }
.model-guidance strong { color:#d9efae; font-weight:650; }
.readonly-field { width:100%; border:1px solid var(--line); border-radius:6px; padding:10px; background:#0d131c; color:#cdd6e3; font-size:13px; }
.ratio-buttons { display:flex; flex-wrap:wrap; gap:8px; }.ratio-buttons button { min-width:48px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:#0d131c; color:var(--muted); font-size:12px; }.ratio-buttons button.active { border-color:#e7af6a; background:#dca65f; color:#1e160b; font-weight:700; }
.mode-switch-four { grid-template-columns:repeat(4, 1fr); }.check-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:-2px 0 18px; color:#cdd6e3; font-size:12px; }.check-list label { display:flex; align-items:center; gap:7px; }.check-list input { accent-color:var(--accent); }.form-actions { display:grid; grid-template-columns:1fr 1.35fr; gap:10px; }.form-actions .secondary-button { width:100%; }.estimate-dialog { padding:22px; }.estimate-dialog > p { margin:15px 0; color:var(--muted); font-size:13px; line-height:1.55; }.estimate-body { overflow-x:auto; }.estimate-body table { width:100%; border-collapse:collapse; font-size:12px; }.estimate-body th,.estimate-body td { padding:9px 7px; border-top:1px solid var(--line); text-align:left; white-space:nowrap; }.estimate-body th { color:var(--muted); font-weight:500; }
.price-estimate { display:grid; grid-template-columns:1fr auto; gap:3px 10px; margin:-4px 0 18px; padding:10px; border:1px solid var(--line); border-radius:6px; background:#0d131c; }.price-estimate span { color:var(--muted); font-size:12px; }.price-estimate strong { color:var(--accent); font-size:14px; }.price-estimate small { grid-column:1 / -1; color:var(--muted); font-size:11px; }
.seedance-channel2-upload-actions { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }.seedance-channel2-upload-actions .secondary-button { display:grid; place-items:center; padding:9px 6px; cursor:pointer; text-align:center; }.seedance-channel2-upload-actions input { display:none; }.file-preview:not(.image-preview) { display:grid; place-items:center; padding:5px; color:var(--muted); font-size:10px; text-align:center; }.file-preview:not(.image-preview) span { position:static; width:100%; padding:0; background:transparent; color:inherit; white-space:normal; }.file-preview:not(.image-preview) strong { color:var(--accent); font-size:10px; }
.seedance-channel2-multimodal-control.hidden { display:none; }
.seedance-channel2-url-field { grid-template-columns:110px minmax(0, 1fr) 78px auto; gap:7px; margin-top:8px; }.seedance-channel2-url-field select,.seedance-channel2-url-field input { min-width:0; border:1px solid var(--line); border-radius:6px; padding:9px; background:#0d131c; color:var(--ink); font-size:12px; }.seedance-channel2-url-field .secondary-button { padding:9px 11px; }
@media (max-width:520px) { .mode-switch-four { grid-template-columns:1fr 1fr; }.check-list { grid-template-columns:1fr; }.form-actions { grid-template-columns:1fr; }.result-head { flex-direction:column; }.history-actions { justify-content:flex-start; }.preview-close-button { top:12px; right:12px; } }