:root { color-scheme:dark; --ink:var(--sws-text); --muted:var(--sws-text-muted); --line:var(--sws-line); --soft:var(--sws-surface-raised); --panel:var(--sws-surface); --dark:var(--sws-surface-strong); --orange:var(--sws-accent); --orange-dark:var(--sws-accent); --danger:var(--sws-danger); font-family:Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing:border-box; }
html,body { min-width:320px; min-height:100%; }
body { margin:0; overflow:hidden; background:var(--sws-canvas); color:var(--ink); }
button,input,textarea,select { font:inherit; }
button,a { color:inherit; -webkit-tap-highlight-color:transparent; }
a { text-decoration:none; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.spatial-topbar { height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); padding:0 24px; background:var(--sws-surface-strong); color:#f7f8fa; }
.spatial-identity,.topbar-actions,.spatial-brand { min-width:0; display:flex; align-items:center; }
.spatial-identity { gap:12px; }
.spatial-brand { gap:9px; padding-right:14px; border-right:1px solid var(--line-strong); font-weight:650; }
.spatial-brand img { border-radius:7px; }
.product-name { color:var(--sws-text-soft); font-size:13px; }
.project-heading { min-width:0; display:grid; gap:3px; margin-left:12px; }
.project-heading strong { max-width:320px; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.project-heading small { color:var(--muted); font-size:12px; }
.topbar-actions { gap:8px; }
.topbar-actions a,.topbar-actions button { min-height:40px; display:inline-flex; align-items:center; border:1px solid var(--line); padding:0 14px; background:transparent; color:#e5e7ea; font-size:13px; cursor:pointer; border-radius:12px; transition:background var(--sws-motion-fast) ease, border-color var(--sws-motion-fast) ease; }
.topbar-actions .primary,.primary { border-color:var(--orange); background:var(--orange); color:#18120a; font-weight:750; }
button:disabled { opacity:.43; cursor:not-allowed; }
.spatial-shell { height:calc(100svh - 72px); }
.studio-state { height:100%; display:grid; place-content:center; justify-items:start; padding:clamp(24px,7vw,100px); background:radial-gradient(ellipse at 70% 25%,rgba(255,157,92,.07),transparent 40%),var(--sws-canvas); }
.studio-state > span { width:34px; height:34px; justify-self:center; border:2px solid var(--sws-line-strong); border-top-color:var(--orange); border-radius:50%; animation:studio-spin .8s linear infinite; }
.studio-state h1 { max-width:780px; margin:0; font-family:Inter, "PingFang SC", "Microsoft YaHei", sans-serif; font-size:clamp(36px,5vw,64px); font-weight:600; line-height:1.12; letter-spacing:-.04em; }
.studio-state p { max-width:680px; margin:20px 0 0; color:var(--muted); line-height:1.8; }
.studio-state a,.studio-state button { min-height:48px; display:inline-flex; align-items:center; margin-top:26px; border:1px solid var(--orange); padding:0 20px; background:var(--orange); cursor:pointer; border-radius:12px; color:#20150d; font-size:14px; font-weight:650; }
.eyebrow { margin-bottom:10px!important; color:var(--orange-dark)!important; font-size:12px; font-weight:800; letter-spacing:.18em; }
.spatial-dialog fieldset label:has(input:checked) { border-color:var(--orange); background:var(--sws-accent-soft); }
:where(button, a, input, textarea, select, summary):focus-visible { outline:2px solid var(--sws-focus); outline-offset:3px; }
:where(button, input, select, textarea):disabled { opacity:.45; cursor:not-allowed; }
@keyframes studio-spin { to { transform:rotate(1turn); } }
.spatial-editor { height:100%; display:grid; grid-template-columns:304px minmax(360px,1fr) 288px; gap:16px; background:var(--sws-canvas); padding:16px; }
.input-panel,.generation-panel { min-width:0; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:20px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.panel-heading { min-height:80px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:20px; }
.panel-heading span { display:block; margin-bottom:4px; color:var(--orange-dark); font-size:12px; font-weight:800; letter-spacing:.12em; }
.panel-heading h2 { margin:0; font-size:17px; letter-spacing:-.02em; }
.input-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:16px 16px 4px; }
.input-modes button { min-height:36px; border:1px solid var(--line); padding:0 4px; background:var(--sws-surface-raised); color:var(--sws-text-soft); font-size:12px; cursor:pointer; border-radius:10px; }
.input-modes button.is-active { border-color:var(--orange); background:var(--sws-accent-soft); color:var(--orange); font-weight:750; }
.field { display:grid; gap:8px; margin:14px 16px 0; color:var(--sws-text-soft); font-size:12px; }
.field input,.field textarea { width:100%; border:1px solid var(--line-strong); padding:12px; background:var(--sws-canvas); color:var(--ink); outline:none; resize:vertical; line-height:1.55; border-radius:12px; font-size:13px; }
.field input:focus,.field textarea:focus { border-color:var(--orange); }
.upload-box { margin-top:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 16px 16px; }
.upload-box > p { margin:0 0 10px; color:var(--muted); font-size:12px; line-height:1.6; }
.upload-button { min-height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-strong); padding:0 12px; background:var(--sws-surface-raised); font-size:12px; cursor:pointer; border-radius:10px; }
.upload-button input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.upload-status { min-height:18px; margin-top:8px; color:var(--orange-dark); font-size:12px; }
.input-list { display:grid; gap:6px; }
.input-file { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; border:1px solid var(--line); padding:12px; background:var(--soft); border-radius:10px; }
.input-file strong,.input-file small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.input-file strong { font-size:12px; }
.input-file small { margin-top:4px; color:var(--muted); font-size:12px; }
.input-file button { border:0; background:transparent; color:var(--danger); font-size:12px; cursor:pointer; }
.project-settings { padding-bottom:24px; }
.project-settings h3,.result-actions h3 { margin:18px 16px 0; font-size:13px; }
.preview-panel { position:relative; min-width:0; overflow:hidden; background:#111419; border-radius:20px; border:1px solid var(--line); }
.preview-panel iframe { width:100%; height:100%; border:0; background:#07090c; }
.preview-empty { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; padding:34px; background:radial-gradient(ellipse at 50% 30%,rgba(255,157,92,.08),transparent 55%),var(--sws-surface-strong); color:#f5f6f7; text-align:center; }
.preview-empty .orb { width:124px; height:124px; margin-bottom:28px; border:1px solid rgba(255,166,79,.45); border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffc78e,var(--sws-line-strong) 20%,#632500 48%,#111419 70%); box-shadow:0 0 56px rgba(255,155,91,.12); }
.preview-empty strong { font-family:Inter, "PingFang SC", "Microsoft YaHei", sans-serif; font-size:28px; font-weight:600; letter-spacing:-.035em; }
.preview-empty p { max-width:560px; margin:14px 0 0; color:var(--sws-text-soft); font-size:12px; line-height:1.75; }
.progress-card { position:absolute; z-index:5; left:50%; bottom:20px; width:min(520px,calc(100% - 36px)); transform:translateX(-50%); border:1px solid rgba(255,255,255,.16); padding:18px; background:rgba(20,23,28,.94); color:var(--sws-text); backdrop-filter:blur(14px); border-radius:16px; }
.progress-card > div { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.progress-card progress { width:100%; height:6px; margin-top:11px; accent-color:var(--orange); }
.progress-card p { margin:9px 0 0; color:var(--sws-text-soft); font-size:12px; line-height:1.5; }
.provider-state { margin:14px 16px; border-left:3px solid #aab0b8; padding:12px; background:var(--soft); color:var(--sws-text-soft); font-size:12px; line-height:1.6; border-radius:0 10px 10px 0; }
.provider-state.is-ready { border-color:var(--sws-positive); color:var(--sws-positive); }
.provider-state.is-blocked { border-color:var(--sws-warning); color:var(--sws-warning); }
.model-list { display:grid; gap:10px; padding:0 16px; }
.model-list button { display:grid; gap:4px; border:1px solid var(--line); padding:16px; background:var(--sws-surface-raised); text-align:left; cursor:pointer; border-radius:12px; transition:border-color var(--sws-motion-fast) ease, background var(--sws-motion-fast) ease; }
.model-list button.is-active { border-color:var(--orange); background:var(--sws-accent-soft); box-shadow:inset 2px 0 var(--orange); }
.model-list span { color:var(--orange-dark); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.model-list strong { font-size:14px; }
.model-list small { color:var(--muted); font-size:12px; }
.quote-card { margin:16px; border:1px solid var(--line); padding:18px; background:var(--sws-surface-raised); border-radius:16px; }
.quote-card p { margin:0; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.quote-card strong { display:block; margin-top:7px; font-size:28px; letter-spacing:-.04em; }
.quote-card span,.quote-card small { display:block; margin-top:7px; color:var(--muted); font-size:12px; line-height:1.75; }
.generate-button { width:calc(100% - 32px); min-height:48px; margin:0 16px; border:1px solid var(--orange); background:var(--orange); color:#1a130b; font-weight:800; cursor:pointer; border-radius:12px; font-size:14px; }
.generation-error { min-height:34px; margin:10px 16px; color:var(--danger); font-size:12px; line-height:1.5; }
.result-actions { border-top:1px solid var(--line); padding-bottom:22px; }
.result-actions button { width:calc(100% - 32px); min-height:42px; margin:10px 16px 0; border:1px solid #ced3d9; background:var(--sws-surface-raised); font-size:12px; cursor:pointer; border-radius:12px; }
.result-actions p { margin:10px 16px 0; color:var(--muted); font-size:12px; line-height:1.5; }
.spatial-dialog { width:min(640px,calc(100vw - 28px)); max-height:calc(100svh - 32px); overflow:auto; border:1px solid var(--line-strong); padding:0; background:var(--sws-surface-strong); color:var(--ink); box-shadow:0 36px 100px rgba(0,0,0,.55); border-radius:24px; }
.spatial-dialog::backdrop { background:rgba(12,14,17,.64); backdrop-filter:blur(8px); }
.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding:20px 22px; }
.dialog-heading span { color:var(--orange-dark); font-size:12px; font-weight:800; letter-spacing:.16em; }
.dialog-heading h2 { margin:5px 0 0; font-family:Inter, "PingFang SC", "Microsoft YaHei", sans-serif; font-size:27px; font-weight:600; letter-spacing:-.025em; }
.dialog-heading > button { width:40px; height:40px; border:1px solid var(--sws-line-strong); background:var(--sws-surface-raised); color:var(--sws-text-soft); cursor:pointer; border-radius:12px; }
.spatial-dialog form > p,.spatial-dialog form > label,.spatial-dialog fieldset,.cost-summary { margin:18px 22px 0; }
.spatial-dialog form > p { color:var(--muted); font-size:12px; line-height:1.7; }
.spatial-dialog form > label { display:grid; gap:7px; color:var(--sws-text-soft); font-size:12px; }
.spatial-dialog input,.spatial-dialog textarea { width:100%; border:1px solid var(--line-strong); padding:10px 11px; background:var(--sws-canvas); color:var(--ink); outline:none; border-radius:12px; }
.dialog-footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:22px; border-top:1px solid var(--line); padding:16px 22px; }
.dialog-footer button { min-height:44px; border:1px solid #cfd4da; padding:0 16px; background:var(--sws-surface-raised); cursor:pointer; border-radius:12px; font-size:13px; }
.dialog-footer .primary { border-color:var(--orange); background:var(--orange); color:#20150d; }
.dialog-footer [data-unpublish] { margin-right:auto; color:var(--danger); }
.dialog-error { min-height:18px; color:var(--danger)!important; }
.cost-summary { display:grid; grid-template-columns:1fr auto; gap:9px 20px; align-items:end; border:1px solid var(--line); padding:18px; background:var(--soft); border-radius:16px; }
.cost-summary p { margin:0; color:var(--muted); font-size:12px; }
.cost-summary strong { font-size:16px; }
.confirm-check { grid-template-columns:auto minmax(0,1fr)!important; align-items:start; border:1px solid rgba(255,157,92,.4); padding:12px; background:var(--sws-accent-soft); border-radius:12px; font-size:13px; }
.confirm-check input { width:auto; margin-top:2px; accent-color:var(--orange); }
.spatial-dialog fieldset { display:grid; gap:8px; border:0; padding:0; }
.spatial-dialog legend { margin-bottom:9px; color:var(--sws-text-soft); font-size:12px; }
.spatial-dialog fieldset label { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; border:1px solid var(--line); padding:13px; cursor:pointer; border-radius:12px; background:var(--sws-surface); }
.spatial-dialog fieldset input { width:auto; margin-top:2px; accent-color:var(--orange); }
.spatial-dialog fieldset strong,.spatial-dialog fieldset small { display:block; }
.spatial-dialog fieldset strong { font-size:12px; }
.spatial-dialog fieldset small { margin-top:5px; color:var(--muted); font-size:12px; line-height:1.5; }
.spatial-toast { position:fixed; z-index:50; right:18px; bottom:18px; max-width:min(420px,calc(100vw - 36px)); border-left:3px solid var(--orange); padding:13px 16px; background:var(--sws-surface-strong); color:var(--sws-text); box-shadow:0 18px 55px rgba(0,0,0,.24); font-size:13px; border-radius:12px; border:1px solid var(--line-strong); }
@media (max-width:1050px) {
 body { overflow:auto; }
 .spatial-shell { height:auto; min-height:calc(100svh - 72px); }
 .spatial-editor { height:auto; grid-template-columns:280px minmax(0,1fr); grid-template-rows:minmax(560px,70svh) auto; }
 .preview-panel { min-height:560px; }
 .generation-panel { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; align-content:start; padding:0 0 20px; }
 .generation-panel > .panel-heading, .generation-error, .result-actions { grid-column:1 / -1; }
 .generation-panel > .provider-state { grid-column:1 / -1; }
 .generation-panel > .model-list { grid-column:1; grid-row:3 / span 3; }
 .generate-button { align-self:start; } }
@media (max-width:800px) {
 .spatial-topbar { position:sticky; top:0; z-index:20; height:auto; min-height:72px; padding:12px; flex-wrap:wrap; gap:12px; }
 .product-name { display:none; }
 .project-heading { margin-left:0; }
 .project-heading strong { max-width:160px; }
 .project-heading small { display:none; }
 .topbar-actions { width:100%; justify-content:flex-end; }
 .spatial-shell { height:auto; }
 .spatial-editor { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(420px,60svh) auto auto; padding:12px; gap:12px; }
 .input-panel,.generation-panel { overflow:visible; }
 .preview-panel { min-height:420px; grid-row:1; }
 .generation-panel { grid-column:auto; grid-template-columns:1fr; display:block; }
 .input-modes { grid-template-columns:repeat(5,minmax(0,1fr)); }
 .spatial-dialog { max-height:calc(100svh - 24px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
@media (hover: hover) and (pointer: fine) {
 .topbar-actions :is(a,button):hover:not(:disabled) { border-color:var(--sws-accent); background:var(--sws-accent-soft); }
 .upload-button:hover { border-color:var(--sws-accent); } }