/* Semantic surfaces and restrained materials, inspired by Apple HIG and Lobe UI. */
:root { --bg:#141416; --dot:#303034; --panel:#202023; --panel-2:#29292d; --panel-3:#343439; --line:#35353a; --line-2:#48484e; --text:#f5f5f7; --text-2:#b6b6bd; --text-3:#929299; --accent:#ededf0; --accent-2:#d8d8df; --accent-ink:#202023; --accent-bg:rgba(230,230,240,.08); --accent-glow:rgba(220,224,232,.15); --edge-hi:#b8bdc5; --glass:rgba(35,35,39,.86); --glass-line:rgba(255,255,255,.13); --focus:#64a3e7; --connection-ink:#b7bdc6; --radius:18px; --shadow:0 8px 24px #00000024,0 26px 65px #00000016; }
[data-theme=light] { --bg:#f5f5f7; --dot:#d7d7dc; --panel:#ffffff; --panel-2:#f1f1f4; --panel-3:#e7e7ec; --line:#e0e0e5; --line-2:#cbccd2; --text:#1d1d1f; --text-2:#62626b; --text-3:#85858e; --accent:#29292d; --accent-2:#44444b; --accent-ink:#fff; --accent-bg:rgba(40,40,48,.055); --accent-glow:rgba(80,85,100,.12); --edge-hi:#818995; --glass:rgba(255,255,255,.86); --glass-line:rgba(0,0,0,.075); --focus:#007aff; --connection-ink:#858d98; --shadow:0 8px 24px #14141f08,0 26px 65px #14141f0a; }
body { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,textarea,select { outline-offset:4px; }
button:focus-visible,a:focus-visible { outline:2px solid var(--accent); }
.btn { height:34px; border-radius:9px; }
.btn.primary { border-radius:12px;box-shadow:inset 0 1px 0 #ffffff18,0 3px 9px #0000000d; }
.btn.primary:hover { filter:brightness(1.08); }
#topbar { height:68px;padding:0 22px;gap:18px;background:var(--glass);border-bottom-color:var(--glass-line);backdrop-filter:blur(24px) saturate(1.12); }
.tb-left { gap:12px; }
.brand { font-size:14px; letter-spacing:-.4px; }
.brand-mark { width:25px;height:25px;background:linear-gradient(145deg,#f0f1f4 0%,#b3b8c1 34%,#606976 70%,#303742);border:1px solid #ffffff60;border-radius:8px;transform:rotate(-4deg);box-shadow:inset 0 1px 1px #ffffffa0,0 3px 8px #00000014; }
.mode-seg { padding:4px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line); }
.mode-seg button { border-radius:7px; font-size:12px; padding:5px 11px; }
.mode-seg button.on { background:var(--panel); color:var(--text); box-shadow:0 1px 5px #00000013; }
#save-state { font-size:11px; color:var(--text-3); }
#save-state[data-status=saved]::before { content:'✓ '; color:var(--ok); }
#save-state[data-status=error] { color:var(--bad); }
.proj-btn { max-width:190px; }
.chip-balance { border:none; background:var(--panel-2); padding-left:10px; }
.chip-balance .tag { background:transparent; color:var(--accent-2); }
#studio-tools { display:flex; align-items:center; gap:9px; margin-left:auto; }
#studio-tools svg { width:15px; height:15px; }
.studio-search-btn { display:flex; align-items:center; gap:8px; background:none; border:0; color:var(--text-3); cursor:pointer; padding:8px; font-size:12px; }
kbd { font-family:inherit; font-size:10px; border:1px solid var(--line-2); padding:0 5px; border-radius:4px; color:var(--text-3); }
#studio-rail { position:fixed; top:68px; bottom:0; left:0; width:76px; z-index:35; border-right:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:24px 8px 18px; }
.rail-top { display:flex; flex-direction:column; gap:12px; align-items:center; }
.rail-monogram { font-size:33px; font-weight:800; line-height:36px; letter-spacing:-5px; padding-right:6px; }
.rail-monogram span { color:var(--accent); font-size:28px; }
.rail-rule { width:26px; height:1px; background:var(--line); margin:3px 0 7px; }
#studio-rail button { width:58px; min-height:53px; border:0; border-radius:12px; color:var(--text-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:transparent; cursor:pointer; transition:background .18s,color .18s; }
#studio-rail button:hover { background:var(--accent-bg); color:var(--accent-2); }
#studio-rail button svg { width:21px; height:21px; }
#studio-rail button span { font-size:10px; white-space:nowrap; letter-spacing:-.3px; }
#studio-rail [data-studio=add] { background:var(--text); color:var(--bg); width:43px; min-height:43px; margin-bottom:8px; }
#studio-rail [data-studio=add] span { display:none; }
#viewport,#workbench { margin-left:76px; }
#canvas-meta { position:absolute; top:22px; left:24px; display:flex; gap:8px; align-items:center; color:var(--text-3); font-size:11px; pointer-events:none; }
.live-dot { width:5px; height:5px; border-radius:50%; background:var(--ok); }
#empty-hint { top:46%; width:min(680px,90%); color:var(--text-2); }
.eh-eyebrow { letter-spacing:3px; font-size:9px; font-weight:600; color:var(--text-3); margin-bottom:30px; }
#empty-hint .eh-icon { width:72px;height:72px;margin-bottom:27px;border-radius:22px;transform:rotate(-7deg);background:linear-gradient(145deg,#eef0f3,#a9afb9 48%,#4e5968);position:relative;box-shadow:inset 0 1px 2px #ffffffb0,12px 18px 45px #20253018; }
#empty-hint .eh-icon::before { content:''; position:absolute; inset:17px; border:1px solid #ffffff9c; border-radius:50%; }
#empty-hint .eh-icon::after { content:'✦'; color:white; font-size:29px; position:absolute; inset:10px; display:grid; place-items:center; }
#empty-hint .eh-title { font-size:clamp(27px,3.2vw,45px); font-weight:600; letter-spacing:-1.9px; margin-bottom:15px; }
.eh-sub { font-size:13px; line-height:1.8; }
.eh-actions { display:flex; gap:12px; justify-content:center; margin:28px 0; pointer-events:auto; }
.eh-actions .btn { height:42px; padding:0 21px; border-radius:11px; }
.eh-tips { font-size:10px; color:var(--text-3); }
.eh-tips span { margin:0 10px; }
#dock,#zoombar { background:var(--glass);border-color:var(--glass-line);box-shadow:inset 0 1px 0 #ffffff25,0 6px 18px #0000000b,0 16px 40px #0000000a;backdrop-filter:blur(24px) saturate(1.12);border-radius:20px;bottom:22px; }
#dock { padding:7px; }
.dk-add { background:var(--text); color:var(--bg); border-radius:9px; }
.dk-btn { border-radius:9px; }
#zoombar { left:24px; }
.node-card { border:1px solid var(--line); box-shadow:0 10px 25px #00000018; }
.node-label { color:var(--text-2); margin-bottom:10px; font-size:11px; }
.card-empty { background:radial-gradient(ellipse at 40% 0%,var(--accent-bg),transparent 70%),var(--panel); }
.ce-icon { color:var(--accent); }
.card-text { background:var(--panel); padding:20px; line-height:1.9; }
.ov-panel,.ov-bar { border-color:var(--line); background:var(--glass); box-shadow:var(--shadow); }
.cp-text,.wb-text { line-height:1.8; }
.mask-bg { background:#11111655;backdrop-filter:blur(7px); }
.dialog { border-radius:21px; padding:26px; }
.dialog h3 { font-size:15px; }
.studio-intro { margin:12px 0 24px; }
.studio-kicker { font-size:9px; color:var(--accent-2); letter-spacing:2px; }
.studio-intro h2 { font-size:27px; letter-spacing:-1px; margin:9px 0; font-weight:550; }
.studio-intro p,.studio-foot { color:var(--text-3); font-size:12px; line-height:1.8; }
.workflow-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.workflow-card { padding:0; text-align:left; border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; cursor:pointer; transition:transform .2s,border-color .2s; }
.workflow-card:hover { border-color:var(--accent); transform:translateY(-3px); }
.workflow-art { height:145px; position:relative; overflow:hidden; display:grid; place-items:center; isolation:isolate; }
.workflow-art span { font-family:Georgia,serif; font-size:90px; line-height:1; z-index:1; }
.workflow-art b { position:absolute; bottom:12px; right:14px; font-size:10px; letter-spacing:2px; opacity:.6; }
.workflow-art i { position:absolute; width:150px; height:150px; border:1px solid currentColor; border-radius:50%; opacity:.35; transform:translate(65px,10px); }
.product { background:#ded5c5; color:#665244; }
.product span { transform:rotate(-25deg); text-shadow:14px 13px 0 #b3a68b; }
.story { background:#343d43; color:#e3c0a1; }
.story i { border-radius:40% 40% 0 0; transform:translate(-90px,65px) rotate(30deg); width:230px; background:#a8b8b53a; }
.poster { background:#dfe4eb;color:#303a47; }
.poster span { font-size:95px; font-weight:bold; transform:rotate(-14deg); letter-spacing:-10px; }
.poster i { width:70px;height:210px;border-radius:0;background:#d6ba91;border:0;transform:translate(130px,15px) rotate(35deg);opacity:1; }
.retouch { background:linear-gradient(90deg,#858783 50%,#dde3d4 50%); color:#253b32; }
.retouch span { font-family:inherit; font-size:80px; }
.workflow-copy { padding:18px; }
.workflow-copy small { color:var(--accent-2); font-size:10px; }
.workflow-copy h3 { display:flex; justify-content:space-between; margin:8px 0!important; font-size:15px!important; }
.workflow-copy p { color:var(--text-3); font-size:11px; margin:0; line-height:1.8; }
.studio-search { width:100%; height:44px; margin-bottom:14px; }
.search-results { max-height:52vh; overflow:auto; }
.search-result { width:100%; display:flex; align-items:center; gap:14px; text-align:left; padding:14px 10px; background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer; border-radius:8px; }
.search-result:hover { background:var(--accent-bg); }
.search-result svg { width:20px; height:20px; color:var(--accent); flex:none; }
.search-result span { min-width:0; flex:1; }
.search-result b,.search-result small { display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.search-result b { font-size:12px; margin-bottom:4px; }
.search-result small { color:var(--text-3); font-size:11px; }
.search-result em { color:var(--text-3); }
.studio-empty { padding:42px 20px; text-align:center; color:var(--text-3); line-height:2; }
.studio-foot { margin-top:18px; }
.prompt-form { display:grid; gap:10px; padding:17px; border-radius:13px; background:var(--panel-2); margin-bottom:20px; }
.prompt-form textarea { resize:vertical; min-height:90px; height:auto; padding:12px; }
.prompt-form>div { display:flex; gap:10px; }
.prompt-list { display:grid; gap:12px; max-height:40vh; overflow:auto; }
.prompt-item { border:1px solid var(--line); padding:16px; border-radius:12px; }
.prompt-item>div { display:flex; align-items:center; justify-content:space-between; }
.prompt-item small { color:var(--text-3); font-size:10px; }
.prompt-item p { font-size:12px; line-height:1.8; color:var(--text-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.task-summary { display:grid; grid-template-columns:repeat(4,1fr); padding:15px 0 22px; gap:10px; }
.task-summary>div { background:var(--panel-2); border:1px solid var(--line); padding:16px; border-radius:12px; }
.task-summary b { display:block; font-size:26px; font-weight:550; line-height:1.2; margin-bottom:7px; }
.task-summary span { color:var(--text-3); font-size:11px; }
.task-filter { margin-bottom:12px; }
.studio-tasks { max-height:45vh; overflow:auto; }
.studio-task { display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); padding:16px 0; }
.studio-task>img,.task-placeholder { width:68px; height:68px; border-radius:10px; object-fit:cover; flex:none; background:var(--panel-2); }
.task-placeholder { display:grid; place-items:center; color:var(--text-3); }
.task-placeholder svg { width:24px; height:24px; }
.task-copy { flex:1; min-width:0; }
.task-copy>div { display:flex; align-items:center; gap:10px; }
.task-copy b { font-size:12px; }
.task-copy p { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:var(--text-2); font-size:12px; margin:6px 0; }
.task-copy small { color:var(--text-3); font-size:10px; }
.task-copy .err { color:var(--bad); white-space:normal; overflow-wrap:anywhere; }
.task-status { color:var(--text-3); font-size:10px; border-radius:5px; background:var(--panel-2); padding:2px 7px; white-space:nowrap; }
.task-status.succeeded { color:var(--ok); }
.task-status.running,.task-status.queued { color:var(--accent-2); }
.task-status.failed { color:var(--bad); }
.task-actions { display:flex; flex-direction:column; gap:6px; }
.batch-price { font-size:48px; font-weight:500; display:flex; align-items:baseline; gap:10px; }
.batch-price small { font-size:13px; color:var(--text-3); }
.batch-price span { font-size:20px; color:var(--accent); margin-left:auto; }
#workbench { padding:26px; gap:26px; background:var(--bg); grid-template-columns:minmax(300px,380px) 1fr; }
.wb-card { background:var(--panel); border:1px solid var(--line); border-radius:17px; box-shadow:0 10px 30px #0000000a; }
.wb-title { font-size:20px; font-weight:600; letter-spacing:-.5px; }
.wb-drop { border-radius:12px; }
.wb-item { border-radius:16px; border-color:var(--line); }
.gate { background:radial-gradient(ellipse at 18% 25%,#8f9daa18,transparent 50%),radial-gradient(ellipse at 90% 90%,#c6b99d14,transparent 50%),var(--bg); }
.gate::before { content:'IMAGINE. CONNECT. CREATE.'; position:absolute; top:11%; font-size:10px; letter-spacing:4px; color:var(--text-3); }
.gate::after { content:'你的想象力，值得一个更大的空间。'; position:absolute; bottom:10%; font-size:12px; color:var(--text-3); }
.gate .dialog { width:400px; padding:34px; background:var(--glass); box-shadow:0 30px 90px #00000018; }
.gate .g-brand { font-size:22px; letter-spacing:-.5px; margin-bottom:10px; }
.gate .g-sub { margin-bottom:28px; }
.gate input.inp { height:44px; border-radius:9px; }
.gate .btn.primary { height:43px; margin-top:6px; }
@media(min-width:1500px) { #studio-tools { gap:14px; } #topbar { padding-right:28px; } }
@media(max-width:1280px) { .studio-search-btn span,.studio-search-btn kbd,#studio-tools>.btn>span { display:none; } #studio-tools>.btn { width:34px; padding:0; } #topbar { padding:0 14px; gap:12px; } .tb-left { gap:7px; } .proj-btn { max-width:135px; } .notice { display:none; } }
@media(max-width:900px) { #topbar { height:60px; padding:0 12px; gap:8px; } #studio-rail { top:60px; width:60px; padding:18px 3px 12px; } #studio-rail button { width:50px; } #viewport,#workbench { margin-left:60px; } .brand #site-name,.tb-slash,#save-state { display:none; } .mode-seg button { padding:4px 7px; } #studio-tools { gap:3px; } #studio-tools>[data-studio=tasks] { display:none; } .chip-balance .muted,.chip-balance .tag { display:none; } .chip-balance { padding:0 9px; } #workbench { display:flex; flex-direction:column; padding:16px; overflow:auto; } .wb-left,.wb-right { overflow:visible; } #zoombar { left:12px; bottom:85px; } #dock { bottom:20px; } #canvas-meta { top:15px; left:16px; } }
@media(max-width:600px) { #project-switch { max-width:110px; } .proj-btn { max-width:110px; font-size:11px; } #tb-right>.btn { max-width:65px; overflow:hidden; } #studio-tools>[data-studio=batch] { display:none; } #studio-tools { margin-left:0; } .tb-right { margin-left:auto; gap:3px; } .brand { display:none; } .tb-left { gap:4px; } .mode-seg { padding:2px; } .mode-seg button { font-size:10px; padding:4px 5px; } #studio-rail { width:52px; } #viewport,#workbench { margin-left:52px; } #studio-rail button { width:44px; } #studio-rail button span { font-size:9px; } .rail-monogram { font-size:28px; } .workflow-grid { grid-template-columns:1fr; } .workflow-art { height:125px; } .dialog { padding:20px; } .mask-bg { padding:12px; } .eh-eyebrow { letter-spacing:1.5px; font-size:8px; } .eh-sub { font-size:11px; padding:0 16px; } .eh-actions { flex-direction:column; align-items:center; gap:10px; margin:22px 0; } .eh-actions .btn { width:200px; height:38px; } .eh-tips { font-size:9px; line-height:2; padding:0 28px; } .eh-tips span { margin:0 3px; } #empty-hint .eh-title { font-size:29px; } .task-summary { gap:6px; } .task-summary>div { padding:10px; } .task-summary b { font-size:23px; } .studio-task { flex-wrap:wrap; gap:10px; } .task-copy { min-width:100px; } .task-actions { width:100%; flex-direction:row; justify-content:flex-end; } .gate .dialog { margin:20px; padding:28px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:600px) { #studio-tools .studio-search-btn { display:none; } .zb-assets span { display:none; } .zb-assets { padding:0 7px; } #tb-right>[data-a=user] { text-overflow:ellipsis; } }