:root { color-scheme:dark; --bg:#0e1116; --panel:#151920; --line:#292f39; --muted:#8992a1; --text:#f2f3f6; --accent:#bc7599; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
button,textarea,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.studio-shell { min-height:100vh; display:grid; grid-template-columns:260px minmax(440px,1fr) 360px; }
.studio-sidebar,.draft-panel { position:relative; z-index:2; min-width:0; padding:24px 20px; background:#11151b; }
.studio-sidebar { display:flex; flex-direction:column; border-right:1px solid var(--line); }
.draft-panel { overflow:auto; border-left:1px solid var(--line); background:#12161c; }
.studio-brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.studio-brand > span { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:linear-gradient(145deg,#ce789f,#758db6); font-weight:800; }
.studio-brand div { display:flex; flex-direction:column; }.studio-brand small,.studio-header small { color:var(--muted); font-size:9px; letter-spacing:.16em; }
.side-heading { display:flex; align-items:center; justify-content:space-between; margin:32px 0 12px; color:#b9c0ca; font-size:12px; }
.side-heading button,.studio-header button { border:1px solid #3a414d; border-radius:10px; padding:8px 10px; color:#e7e9ed; background:#252b34; cursor:pointer; font-size:11px; }
.session-list { display:grid; gap:7px; overflow:auto; }
.session-item { width:100%; display:grid; gap:5px; padding:12px; border:1px solid transparent; border-radius:13px; text-align:left; color:#c5cad3; background:#181d24; cursor:pointer; }
.session-item.active { border-color:#755266; background:#251d24; }.session-item strong{font-size:12px}.session-item small{color:var(--muted);font-size:10px}
.studio-note { margin-top:auto; padding:15px; border:1px solid #292f39; border-radius:14px; color:#c4c9d1; background:#171b22; }.studio-note strong{font-size:12px}.studio-note p{margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.6}
.back-link { margin-top:14px; color:#929baa; text-decoration:none; font-size:11px; }
.designer-panel { min-width:0; display:grid; grid-template-rows:auto 1fr auto; height:100vh; background:radial-gradient(circle at 15% 0,rgba(151,91,125,.11),transparent 32%),var(--bg); }
.studio-header { display:flex; justify-content:space-between; gap:20px; padding:28px 34px 20px; border-bottom:1px solid var(--line); }.studio-header h1{margin:7px 0 6px;font-size:24px}.studio-header p{margin:0;color:var(--muted);font-size:12px}
.designer-messages { overflow:auto; padding:30px max(28px,8vw); }
.design-message { display:grid; gap:6px; max-width:720px; margin:0 auto 20px; }.design-message.user{justify-items:end}.design-message small{color:#717b8b;font-size:9px;letter-spacing:.12em}.design-message p{max-width:86%;margin:0;padding:13px 15px;border-radius:16px;line-height:1.65;font-size:14px;white-space:pre-wrap}.design-message.assistant p{background:#1d222a;border:1px solid #2e3540}.design-message.user p{background:#70485f}
.studio-empty { height:100%; display:grid; place-content:center; justify-items:center; color:var(--muted); text-align:center; }.studio-empty span{font-size:28px;color:#bb7598}.studio-empty h2{margin:12px 0 5px;color:#d9dce2;font-size:18px}.studio-empty p{margin:0;font-size:12px}
.designer-composer { display:grid; grid-template-columns:1fr auto; gap:10px; margin:0 max(24px,6vw) 24px; padding:9px; border:1px solid #353c48; border-radius:17px; background:#171c23; box-shadow:0 15px 40px rgba(0,0,0,.28); }.designer-composer textarea{resize:none;border:0;outline:0;padding:9px;color:#f1f2f5;background:transparent;line-height:1.5}.designer-composer button{align-self:end;border:0;border-radius:12px;padding:11px 18px;color:#fff;background:linear-gradient(135deg,#b96f94,#7189b1);cursor:pointer}.designer-composer button:disabled{opacity:.5;cursor:wait}
.readiness-card { padding:18px; border:1px solid #303743; border-radius:17px; background:#191e25; }.readiness-card>div:first-child{display:flex;align-items:end;justify-content:space-between;color:#aab1bd;font-size:12px}.readiness-card strong{color:#fff;font-size:25px}.readiness-track{height:7px;margin:14px 0 10px;border-radius:99px;overflow:hidden;background:#292f38}.readiness-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ac668a,#7b91b9);transition:width .35s}.readiness-card p{margin:0;color:var(--muted);font-size:10px}
.draft-panel section { margin-top:22px; }.draft-panel section>header{display:flex;justify-content:space-between;color:#c7ccd4;font-size:11px}.draft-panel section>header small{color:var(--muted)}
.draft-fields { display:grid; gap:9px; margin-top:10px; }.draft-field{padding:11px 12px;border:1px solid #292f39;border-radius:12px;background:#171b21}.draft-field span{display:block;margin-bottom:5px;color:#7f8999;font-size:9px;letter-spacing:.1em}.draft-field p{margin:0;color:#d7dae0;font-size:11px;line-height:1.55;white-space:pre-wrap}.unresolved-list{display:grid;gap:7px;margin-top:10px}.unresolved-item{padding:9px 11px;border-radius:10px;color:#d5b8c7;background:#2a2027;font-size:10px}.usage-line{margin-top:10px;padding:10px;border-radius:10px;color:#99a3b3;background:#181d24;font-size:10px}
.confirm-button { width:100%; margin-top:24px; border:0; border-radius:13px; padding:13px; color:#fff; font-weight:700; background:linear-gradient(135deg,#b96f94,#7189b1);cursor:pointer}.confirm-button:disabled{color:#777f8d;background:#252b34;cursor:not-allowed}.confirm-note{color:#727c8c;font-size:9px;line-height:1.55}
dialog { border:1px solid #343b47;border-radius:18px;padding:0;color:#edf0f4;background:#191e25;box-shadow:0 25px 80px rgba(0,0,0,.55)}dialog::backdrop{background:rgba(4,6,9,.7);backdrop-filter:blur(5px)}.key-form{display:grid;gap:13px;width:min(420px,calc(100vw - 30px));padding:22px}.key-form header{display:flex;justify-content:space-between}.key-form h2{margin:4px 0}.key-form header small{color:var(--muted);font-size:9px;letter-spacing:.14em}.key-form header button{border:0;color:#aaa;background:transparent;font-size:20px}.key-form p{margin:0;color:var(--muted);font-size:11px}.key-form label{display:grid;gap:6px;color:#aeb5c0;font-size:11px}.key-form input{border:1px solid #373e49;border-radius:10px;padding:11px;color:#fff;background:#11151a}.key-form footer{display:flex;justify-content:flex-end;gap:8px}.key-form footer button{border:1px solid #3a414d;border-radius:10px;padding:9px 13px;color:#fff;background:#272d36}
.studio-toast { position:fixed;left:50%;bottom:24px;z-index:9999;transform:translate(-50%,15px);padding:10px 14px;border-radius:12px;color:#fff;background:#333b47;opacity:0;pointer-events:none;transition:.2s;font-size:11px}.studio-toast.show{opacity:1;transform:translate(-50%,0)}.studio-toast.error{background:#773f49}
@media(max-width:1050px){.studio-shell{grid-template-columns:210px 1fr}.draft-panel{position:fixed;right:0;top:0;bottom:0;width:min(370px,90vw);box-shadow:-20px 0 60px rgba(0,0,0,.35)}}
@media(max-width:720px){.studio-shell{display:block}.studio-sidebar{display:none}.designer-panel{height:100dvh}.studio-header{padding:20px}.studio-header h1{font-size:20px}.studio-header p{display:none}.designer-messages{padding:22px 14px 180px}.designer-composer{position:fixed;left:10px;right:10px;bottom:8px;margin:0;z-index:4}.draft-panel{top:auto;height:145px;width:100%;padding:11px 14px;border-top:1px solid var(--line);overflow:hidden}.draft-panel section,.confirm-note{display:none}.readiness-card{padding:10px 12px}.confirm-button{margin-top:8px;padding:9px}.designer-panel{padding-bottom:140px}}