.studio-shell{min-height:100vh;display:flex;flex-direction:column;color:#fff;padding-bottom:60px}.studio-main{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:16px 0 0;min-height:0}.content-row{flex:1;display:grid;grid-template-columns:1fr minmax(620px,36%);gap:24px;min-height:950px;width:92%;max-width:1700px;margin:0 auto}.top-nav{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 24px;flex-shrink:0}.brand{display:inline-flex;align-items:center;gap:12px}.brand-logo{width:36px;height:36px;border-radius:9px;overflow:hidden;display:grid;place-items:center;box-shadow:0 4px 12px #8b5cf659}.brand-mark-img{width:100%;height:100%;object-fit:contain;display:block}.brand-title{font-size:15px;font-weight:600;letter-spacing:.02em;color:#fff}.top-nav-actions{display:flex;align-items:center;gap:10px}.connect-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:#ffffff14;color:#fff;font-size:13px;font-family:inherit;cursor:pointer;transition:background .15s ease,border-color .15s ease}.connect-btn:hover{background:#ffffff24;border-color:#ffffff59}.record-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:none;background:#ffffff14;color:#fff;font-size:13px;font-family:inherit;cursor:pointer;transition:background .15s ease}.record-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand-purple, #7c5cff);color:#fff;font-size:11px;font-weight:700}.tpl-btn-nav{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:#ffffff14;color:#fff;font-size:13px;font-family:inherit;cursor:pointer;transition:background .15s ease,border-color .15s ease}.tpl-btn-nav:hover{background:#ffffff24;border-color:#ffffff59}.btn-gradient{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:999px;color:#fff;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:transform .1s ease,filter .15s ease;padding:9px 16px}.btn-gradient:hover{filter:brightness(1.05)}.btn-gradient:active{transform:scale(.98)}.btn-ai-generate{background:linear-gradient(90deg,#7c5cff,#3b82f6);box-shadow:0 4px 14px #7c5cff4d}.btn-ai-imitate{background:linear-gradient(90deg,#ff7a8a,#f43f5e);box-shadow:0 4px 14px #f43f5e40}.icon-btn{width:36px;height:36px;display:grid;place-items:center;border:none;border-radius:10px;background:#f3f4f6;color:#6b7280;cursor:pointer;transition:background .15s ease}.icon-btn:hover{background:#e5e7eb}.requirement-card{background:#fff;border-radius:20px;box-shadow:0 10px 30px #00000040;padding:20px 24px;display:flex;flex-direction:column;gap:16px;flex-shrink:0;width:60%;max-width:1100px;margin:0 auto}.requirement-input-area{position:relative;background:#f8fafc;border-radius:12px;overflow:hidden}.requirement-textarea{width:100%;min-height:110px;border:none;outline:none;resize:none;padding:14px 16px;font-size:15px;line-height:1.6;color:#111827;background:transparent;font-family:inherit}.requirement-textarea::placeholder{color:transparent}.input-hints{position:absolute;top:14px;left:16px;right:16px;z-index:1;pointer-events:none;transition:opacity .2s ease}.chips-row{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.chips-row .chip{text-align:left;font-size:14px;line-height:1.6;color:#9ca3af}.uploaded-thumbs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:2px 0}.uploaded-thumb{position:relative;width:56px;height:56px;border-radius:10px;overflow:hidden;border:1px solid #e5e7eb;background:#f3f4f6;flex-shrink:0}.uploaded-thumb img{width:100%;height:100%;object-fit:cover;display:block}.uploaded-thumb-remove{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;border:none;background:#0009;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s ease}.uploaded-thumb-remove:hover{background:#dc2626e6}.uploaded-thumb-hint{font-size:12px;color:#9ca3af}.requirement-actions{display:flex;align-items:center;gap:10px}.requirement-icon-group{display:flex;align-items:center;gap:8px;flex-shrink:0}.attachment-chips{flex:1;display:flex;align-items:center;gap:8px;overflow-x:auto;min-height:36px;padding:2px 0}.attachment-chip{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:3px 4px 3px 3px;border-radius:10px;background:#f3f4f6;border:1px solid #e5e7eb;flex-shrink:0;transition:background .15s ease,border-color .15s ease}.attachment-chip:hover{background:#eceef1;border-color:#d8dbe0}.attachment-chip-thumb{width:30px;height:30px;border-radius:7px;object-fit:cover;flex-shrink:0;display:block;background:#fff}.attachment-chip-doc{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:#eef2ff;font-size:16px;flex-shrink:0}.attachment-chip-name{font-size:12px;color:#374151;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-chip-remove{width:18px;height:18px;border-radius:50%;border:none;background:transparent;color:#9ca3af;display:grid;place-items:center;cursor:pointer;flex-shrink:0;padding:0;transition:background .15s ease,color .15s ease}.attachment-chip-remove:hover{background:#ef444424;color:#ef4444}.requirement-btn-group{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}.model-select{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding:7px 30px 7px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:border-color .15s ease,background .15s ease}.model-select:hover{border-color:#8b5cf6}.model-select:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.btn-send{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 24px;border:none;border-radius:999px;background:linear-gradient(135deg,#7c5cff,#3b82f6);color:#fff;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:transform .1s ease,filter .15s ease,box-shadow .2s ease;box-shadow:0 4px 14px #7c5cff4d}.btn-send:hover:not(:disabled){filter:brightness(1.05);box-shadow:0 6px 18px #7c5cff73}.btn-send:active:not(:disabled){transform:scale(.97)}.btn-send:disabled{opacity:.7;cursor:not-allowed}.btn-send.btn-stop{background:linear-gradient(135deg,#f43f5e,#ef4444);box-shadow:0 4px 14px #f43f5e59}.btn-send.btn-stop:hover{filter:brightness(1.05);box-shadow:0 6px 18px #f43f5e80}.stop-square{display:inline-block;width:12px;height:12px;border-radius:3px;background:#fff}.gen-time{font-size:12px;font-variant-numeric:tabular-nums;color:#6b7280;min-width:54px;text-align:right;-webkit-user-select:none;user-select:none;transition:color .2s ease}.gen-time-active{color:#f43f5e;font-weight:600}.progress-wrapper{width:60%;max-width:1100px;margin:0 auto;flex-shrink:0}.progress-track{width:100%;height:6px;background:#ffffff29;border-radius:999px;position:relative;cursor:default}.progress-track:after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}.progress-flow{position:absolute;top:0;left:0;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#dbeafe,#93c5fd 25%,#60a5fa 45%,#a78bfa 70%,#7c5cff);box-shadow:0 0 12px #7c5cff80;transition:width .3s ease,opacity .4s ease}.progress-label{margin-top:8px;text-align:center;font-size:12px;color:#ffffffd9;font-variant-numeric:tabular-nums;letter-spacing:.01em}.progress-tooltip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%) translateY(4px);max-width:min(90vw,420px);padding:6px 12px;border-radius:8px;background:#111827eb;color:#fff;font-size:12px;line-height:1.4;white-space:nowrap;box-shadow:0 6px 18px #00000059;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:20}.progress-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#111827eb}.progress-track:hover .progress-tooltip{opacity:1;transform:translate(-50%) translateY(0)}@keyframes slide-in-top{0%{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}@keyframes slide-in-left{0%{opacity:0;transform:translate(-60px)}to{opacity:1;transform:none}}@keyframes slide-in-right{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:none}}.requirement-card,.progress-wrapper{animation:slide-in-top 2s ease both}.editor-card{animation:slide-in-left 2s ease both}.preview-card{animation:slide-in-right 2s ease both}.editor-card{background:#ffffff14;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15);border-radius:20px;display:flex;flex-direction:column;align-items:stretch;padding:20px;overflow:hidden;min-height:0;max-height:1200px}.editor-canvas{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px #00000040}.preview-card{background:#ffffff14;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15);border-radius:20px;display:flex;flex-direction:column;align-items:center;padding:20px;overflow:hidden;min-height:0;max-height:1200px}.phone-frame{width:393px;max-width:100%;flex:1;min-height:0;display:flex;background:#0b0b0f;border-radius:44px;padding:12px;box-shadow:0 24px 60px #00000080}.phone-screen{flex:1;display:flex;flex-direction:column;background:#fff;border-radius:32px;overflow:hidden;min-height:0}.editor-toolbar{display:flex;align-items:center;gap:8px;padding:12px 24px;border-bottom:1px solid #f3f4f6;flex-shrink:0}.toolbar-btn{width:36px;height:36px;display:grid;place-items:center;border:none;border-radius:8px;background:#f3f4f6;color:#6b7280;cursor:pointer;transition:background .15s ease,color .15s ease}.toolbar-btn:hover{background:#e5e7eb}.toolbar-btn:active{background:#8b5cf6;color:#fff}.toolbar-clear{margin-left:auto;color:#ef4444}.toolbar-clear:hover{background:#ef44441a;color:#ef4444}.toolbar-clear:active{background:#ef4444;color:#fff}.editor-body{flex:1;overflow-y:auto;padding:20px 24px 0;display:flex;flex-direction:column;gap:14px}.editor-title{width:100%;border:none;outline:none;resize:none;font-size:22px;font-weight:600;color:#111827;line-height:1.3;background:transparent;font-family:inherit}.editor-title::placeholder{color:#9ca3af}.editor-content{width:100%;flex:1;border:none;outline:none;resize:none;font-size:14px;line-height:1.7;color:#4b5563;background:transparent;font-family:inherit;min-height:160px}.editor-content::placeholder{color:#9ca3af}.editor-connectors{display:flex;align-items:center;gap:10px;padding:12px 24px;border-top:1px solid #f3f4f6;flex-shrink:0}.connector-label{font-size:12px;color:#9ca3af;flex-shrink:0}.connector-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.connector-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:none;background:#f3f4f6;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;transition:background .15s ease,color .15s ease}.connector-tag:hover{background:#e5e7eb}.connector-tag.active{background:linear-gradient(90deg,#7c5cff,#3b82f6);color:#fff}.connector-dot{width:8px;height:8px;border-radius:50%}.editor-status{display:flex;align-items:center;justify-content:flex-start;height:48px;padding:0 24px;border-top:1px solid #f3f4f6;font-size:12px;color:#9ca3af;flex-shrink:0}.preview-header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid #f3f4f6;flex-shrink:0}.preview-header-label{font-size:14px;color:#6b7280}.preview-header-actions{display:flex;align-items:center;gap:8px}.btn-publish{background:linear-gradient(90deg,#ff7a8a,#f43f5e);padding:8px 16px}.btn-save{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:999px;border:1px solid #8b5cf6;background:#fff;color:#7c5cff;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s ease,transform .1s ease}.btn-save:hover{background:#7c5cff0f}.btn-save:active{transform:scale(.98)}.btn-copy{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s ease,transform .1s ease}.btn-copy:hover{background:#f9fafb}.btn-copy:active{transform:scale(.98)}.preview-body{flex:1;overflow-y:auto;padding:20px 24px;color:#333}.editor-body::-webkit-scrollbar,.preview-body::-webkit-scrollbar{width:8px}.editor-body::-webkit-scrollbar-thumb,.preview-body::-webkit-scrollbar-thumb{background:#7c5cff59;border-radius:999px}.editor-body::-webkit-scrollbar-thumb:hover,.preview-body::-webkit-scrollbar-thumb:hover{background:#7c5cff99}.editor-body,.preview-body{scrollbar-width:thin;scrollbar-color:rgba(124,92,255,.35) transparent}.preview-title{margin:0 0 12px;font-size:20px;font-weight:600;color:#111827;line-height:1.3}.preview-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;font-size:12px;color:#9ca3af}.preview-author{color:#3370ff;cursor:pointer}.preview-account{color:#111827;font-weight:500}.preview-cover{width:100%;height:180px;border-radius:12px;overflow:hidden;margin-bottom:18px}.preview-cover img{width:100%;height:100%;object-fit:cover;display:block}.cover-toolbar{display:flex;align-items:center;gap:10px;margin:4px 0 18px;padding:10px 12px;background:#f7f8fa;border-radius:12px}.cover-toolbar-label{font-size:13px;color:#6b7280;font-weight:500}.cover-style-select{flex:1;max-width:160px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;font-size:13px;color:#1f2937;outline:none;cursor:pointer}.cover-style-select:focus{border-color:#7c5cff}.btn-cover{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 24px;border:none;border-radius:999px;background:linear-gradient(135deg,#7c5cff,#3b82f6);color:#fff;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:transform .1s ease,filter .15s ease,box-shadow .2s ease;box-shadow:0 4px 14px #7c5cff4d}.btn-cover:hover:not(:disabled){filter:brightness(1.05);box-shadow:0 6px 18px #7c5cff73}.btn-cover:active:not(:disabled){transform:scale(.97)}.btn-cover:disabled{opacity:.7;cursor:not-allowed}.preview-content{font-size:15px;line-height:1.7}.preview-content img,.preview-cover img{cursor:zoom-in}.preview-content p{margin:0 0 16px}.preview-inner{display:flex;gap:16px;flex:1;min-height:0;align-items:stretch}.theme-rail{width:132px;flex:0 0 132px;display:flex;flex-direction:column;gap:9px;align-self:flex-start;max-height:100%;overflow-y:auto}.theme-rail .rail-title{font-size:11px;color:#ffffffa8;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px;flex:0 0 auto}.theme-chip{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:12px;cursor:pointer;border:1px solid rgba(255,255,255,.14);background:#ffffff0a;transition:border-color .15s ease,background .15s ease,transform .1s ease;text-align:left}.theme-chip:hover{background:#ffffff1a}.theme-chip.active{border-color:#7c5cff;background:#7c5cff29;transform:translateY(-1px)}.theme-chip .swatches{display:flex;flex:0 0 34px;width:34px;height:34px;border-radius:9px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}.theme-chip .swatches i{display:block;width:50%;height:100%}.theme-chip .meta{display:flex;flex-direction:column;min-width:0}.theme-chip .meta b{font-size:12.5px;color:#f4f6fa;font-weight:600;white-space:nowrap}.theme-chip .meta small{font-size:10.5px;color:#ffffff6b;font-family:ui-monospace,monospace}.theme-chip.active .meta b:after{content:" ✓";color:#7c5cff}@media (max-width: 1100px){.preview-inner{flex-direction:column}.theme-rail{width:100%;flex:0 0 auto;flex-direction:row;overflow-x:auto}.theme-chip{flex:1 1 130px}}.preview-section-title{margin:22px 0 12px;font-size:16px;font-weight:600;color:#111827;display:flex;align-items:center;gap:8px}.preview-section-title:before{content:"";width:4px;height:20px;border-radius:2px;background:#8b5cf6;flex-shrink:0}.preview-section-title:nth-of-type(2n):before{background:#f43f5e}.preview-footer{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 24px;border-top:1px solid #f3f4f6;font-size:12px;color:#9ca3af;flex-shrink:0}.preview-footer>span,.preview-footer-actions>span{display:inline-flex;align-items:center;gap:5px}.preview-footer-actions{display:flex;align-items:center;gap:14px}.status-bar{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 32px;background:transparent;font-size:12px;color:#ffffff73;flex-shrink:0;pointer-events:none}.status-dot{display:inline-flex;align-items:center;gap:6px}.status-dot .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #22c55e40}.drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:49;background:#00000059;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.history-drawer{position:fixed;top:0;right:0;bottom:0;width:360px;z-index:60;display:flex;flex-direction:column;gap:14px;padding:20px;background:#bdc7f280;border-left:1px solid rgba(255,255,255,.35);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:-20px 0 60px #0003;animation:drawer-in .3s ease}@keyframes drawer-in{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-header{display:flex;align-items:center;justify-content:space-between;height:48px;flex-shrink:0}.drawer-title-group{display:inline-flex;align-items:center;gap:8px;color:var(--drawer-title, #4c3dae);font-size:16px;font-weight:600}.drawer-close{width:32px;height:32px;display:grid;place-items:center;border:none;border-radius:50%;background:transparent;color:#6b6b7b;cursor:pointer;transition:background .15s ease}.drawer-close:hover{background:#ffffff59}.drawer-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.drawer-item{text-align:left;padding:14px;border-radius:12px;background:#ffffff59;border:1px solid rgba(200,180,255,.55);cursor:pointer;transition:background .15s ease,transform .1s ease}.drawer-item:hover{background:#ffffff8c;transform:translateY(-1px)}.drawer-item-title{font-size:14px;font-weight:600;color:var(--drawer-text, #2d2a45);line-height:1.45;margin-bottom:8px}.drawer-item-meta{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--drawer-text-soft, #616176)}.drawer-item-prompt{font-size:12px;line-height:1.5;color:var(--drawer-text-soft, #616176);margin:-2px 0 6px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all}.drawer-item-dot{width:8px;height:8px;border-radius:50%}.drawer-item-duration{margin-left:4px;padding:1px 8px;border-radius:999px;background:#7c5cff1a;color:#7c5cff;font-size:11px;font-variant-numeric:tabular-nums;font-weight:600}.drawer-footer{font-size:11px;color:var(--drawer-text-soft, #616176);line-height:1.5;flex-shrink:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:grid;place-items:center;background:#0000008c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade-in .2s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.connect-modal{width:420px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);background:#fff;border-radius:20px;box-shadow:0 24px 60px #00000059;display:flex;flex-direction:column;overflow:hidden;animation:modal-in .25s ease}@keyframes modal-in{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}.connect-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #f3f4f6}.connect-modal-title{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#111827}.connect-modal-close{width:32px;height:32px;display:grid;place-items:center;border:none;border-radius:50%;background:transparent;color:#6b7280;cursor:pointer;transition:background .15s ease}.connect-modal-close:hover{background:#f3f4f6}.connect-modal-desc{margin:0;padding:16px 24px 8px;font-size:13px;color:#6b7280;line-height:1.5}.connect-modal-list{padding:0 24px 16px;display:flex;flex-direction:column;gap:8px}.connect-modal-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#f9fafb}.connect-row-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#fff;box-shadow:0 1px 2px #0000000d}.connect-row-label{flex:1;font-size:14px;color:#111827;font-weight:500}.connect-row-status{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#6b7280}.connect-row-status.authorized{color:#22c55e}.connect-ai-area{padding:0 24px 16px;display:flex;flex-direction:column;gap:10px;flex:1;overflow-y:auto}.connect-ai-label{font-size:12px;color:#6b7280;font-weight:500}.connect-ai-bubble{align-self:flex-start;padding:12px 14px;border-radius:16px 16px 16px 4px;background:#f3f4f6;color:#374151;font-size:13px;line-height:1.55;max-width:100%}.connect-ai-input{display:flex;gap:8px;padding-top:8px}.connect-ai-input input{flex:1;padding:10px 14px;border:1px solid #e5e7eb;border-radius:999px;outline:none;font-size:13px;font-family:inherit;color:#111827;background:#fff}.connect-ai-input input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.connect-ai-input button{padding:10px 18px;border-radius:999px;border:none;background:linear-gradient(90deg,#7c5cff,#3b82f6);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:filter .15s ease}.connect-ai-input button:hover{filter:brightness(1.05)}.connect-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid #f3f4f6;flex-shrink:0}.btn-text{padding:8px 16px;border:none;border-radius:999px;background:transparent;color:#6b7280;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s ease}.btn-text:hover{background:#f3f4f6}.btn-confirm{background:linear-gradient(90deg,#7c5cff,#3b82f6);padding:8px 20px}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%);z-index:100;padding:10px 18px;border-radius:999px;background:#111827eb;color:#fff;font-size:13px;box-shadow:0 8px 24px #0000004d;animation:toast-in .2s ease;cursor:pointer}@keyframes toast-in{0%{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%);opacity:1}}.error-notice{position:fixed;right:24px;bottom:28px;z-index:120;display:flex;align-items:center;gap:10px;max-width:380px;padding:12px 14px;border-radius:12px;background:#fffffff7;border:1px solid #fecaca;box-shadow:0 10px 30px #00000040;color:#b91c1c;font-size:13px;line-height:1.4;cursor:default;animation:error-in .25s ease}@keyframes error-in{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}.error-notice-icon{flex-shrink:0;font-size:16px;line-height:1}.error-notice-content{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.error-notice-close{flex-shrink:0;width:24px;height:24px;display:grid;place-items:center;border:none;border-radius:6px;background:transparent;color:#b91c1c;font-size:18px;line-height:1;cursor:pointer;transition:background .15s ease}.error-notice-close:hover{background:#b91c1c1a}@media (max-width: 1024px){.requirement-card{width:92%;max-width:none}.content-row{grid-template-columns:1fr;width:92%;min-height:0;overflow-y:visible}.editor-card,.preview-card{max-height:none;min-height:600px}}@media (max-width: 640px){.studio-main{padding:12px 0 0}.requirement-card,.content-row{width:94%}.top-nav{padding:0 16px}.brand-title{display:none}.requirement-btn-group{gap:6px}.btn-gradient span{display:none}.requirement-icon-group,.preview-header-actions{gap:6px}}.lightbox-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#000000e6;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:lightboxFadeIn .2s ease}@keyframes lightboxFadeIn{0%{opacity:0}to{opacity:1}}.lightbox-toolbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;color:#fffc;font-size:14px;z-index:10;pointer-events:none}.lightbox-actions{display:flex;align-items:center;gap:12px;pointer-events:auto}.lightbox-download{padding:6px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:#ffffff1f;color:#fff;font-size:13px;cursor:pointer;transition:background .15s ease}.lightbox-download:hover{background:#ffffff38}.lightbox-close{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:none;background:#ffffff1f;color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .15s ease}.lightbox-close:hover{background:#ffffff40}.lightbox-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 56px;box-sizing:border-box}.lightbox-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px #00000080;animation:lightboxImgIn .25s ease}@keyframes lightboxImgIn{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}.lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s ease;z-index:10}.lightbox-arrow:hover{background:#ffffff40}.lightbox-arrow-left{left:14px}.lightbox-arrow-right{right:14px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:grid;place-items:center;background:#00000059;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:fade-in .2s ease}.prompt-tpl-modal{width:760px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);background:#bdc7f280;border:1px solid rgba(255,255,255,.35);border-radius:20px;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 24px 60px #00000040;display:flex;flex-direction:column;overflow:hidden;animation:modal-in .25s ease}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.35);flex-shrink:0}.modal-title{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#fff}.modal-close{width:32px;height:32px;display:grid;place-items:center;border:none;border-radius:50%;background:transparent;color:#6b6b7b;cursor:pointer;transition:background .15s ease}.modal-close:hover{background:#ffffff59}.prompt-tpl-body{padding:16px 24px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}.tpl-group-title{font-size:13px;font-weight:600;color:#fff;margin-bottom:10px}.tpl-card{border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff;box-shadow:0 2px 8px #0000000f;transition:box-shadow .15s ease}.tpl-card:hover{box-shadow:0 4px 12px #00000014}.tpl-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.tpl-card-label{font-size:13px;font-weight:600;color:var(--drawer-text, #2d2a45);line-height:1.4}.tpl-card-text{margin:0;padding:10px 12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;color:#374151;white-space:pre-wrap;word-break:break-word;max-height:220px;overflow-y:auto}.tpl-copy-btn{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;height:26px;padding:0 12px;border-radius:999px;border:none;background:linear-gradient(135deg,#7c5cff,#3b82f6);color:#fff;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:filter .15s ease,transform .1s ease}.tpl-copy-btn:hover{filter:brightness(1.05)}.tpl-copy-btn:active{transform:scale(.97)}:root{--brand-purple: #7c5cff;--brand-purple-border: #8b5cf6;--brand-purple-deep: #4c3dae;--brand-purple-soft: #c8b4ff;--brand-coral: #f43f5e;--brand-coral-light: #f9616e;--brand-teal: #2dd4bf;--drawer-bg: rgba(189, 199, 242, .5);--drawer-border: rgba(255, 255, 255, .35);--drawer-blur: 20px;--drawer-shadow: -20px 0 60px rgba(0, 0, 0, .2);--drawer-title: #4c3dae;--drawer-text: #2d2a45;--drawer-text-soft: #616176;--drawer-item-bg: rgba(255, 255, 255, .35);--drawer-item-border: rgba(200, 180, 255, .55);--surface-white: #ffffff;--surface-glass: rgba(255, 255, 255, .72);--surface-glass-strong: rgba(255, 255, 255, .9);--text-primary: #2d2a45;--text-secondary: #6b6b7b;--text-on-dark: #ffffff;--text-on-dark-soft: rgba(255, 255, 255, .72);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-12: 48px;--space-16: 64px;--radius-sm: 12px;--radius-md: 14px;--radius-lg: 16px;--radius-pill: 999px;--shadow-card: 0 8px 30px rgba(60, 40, 120, .12);--shadow-card-hover: 0 14px 44px rgba(60, 40, 120, .2);--shadow-drawer: -20px 0 60px rgba(0, 0, 0, .2);--t-fast: .15s ease;--t-normal: .3s ease;--t-slow: .5s ease;--z-drawer: 60;--z-overlay: 50;--z-modal: 80}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;min-height:100vh;color:var(--text-on-dark);font-family:Sarasa Gothic SC,system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;background-color:#0d0b18}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:#0d0b18;background-image:url(/studio/studio-bg-4k.png);background-size:cover;background-position:center center;background-repeat:no-repeat;will-change:transform}.studio-shell{display:flex;flex-direction:column;min-height:100vh}.studio-topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-10, 40px)}.brand{display:inline-flex;align-items:center;gap:var(--space-2)}.brand-logo{font-size:20px;color:var(--brand-purple)}.brand-title{font-size:18px;font-weight:600;letter-spacing:.02em}.record-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:8px 12px;border:none;border-radius:var(--radius-pill);background:#ffffff14;color:var(--text-on-dark);font-size:13px;font-family:inherit;cursor:pointer;transition:background var(--t-fast)}.record-btn:hover{background:#ffffff24}.record-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--brand-purple);color:#fff;font-size:11px;font-weight:700}.studio-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-8)}.glass-card{background:var(--surface-glass);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);color:var(--text-primary)}.m1-card{max-width:560px;padding:var(--space-8);text-align:center}.m1-card h1{margin:0 0 var(--space-3);font-size:22px;color:var(--brand-purple-deep)}.m1-card p{margin:0 0 var(--space-2);font-size:14px;line-height:1.7;color:var(--text-secondary)}.m1-card .muted{color:#8a8a9a;font-size:13px}