:root{--bg:#090d16;--panel:#101724;--panel2:#141e2d;--line:#243144;--text:#edf4f6;--muted:#8391a5;--green:#38e6a5;--green2:#19b981;--red:#ff6b78;--mono:"DM Mono",monospace;--font:"Manrope",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh}button,select,textarea{font:inherit}button{cursor:pointer}.app-shell{max-width:1600px;margin:auto;min-height:100vh;padding:0 28px}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-weight:800;letter-spacing:1.5px;font-size:15px}.brand small{display:block;font:9px var(--mono);letter-spacing:3px;color:var(--muted);margin-top:3px}.brand-accent{color:var(--green)}.brand-mark{width:28px;height:28px;display:grid;grid-template-columns:1fr 1fr;gap:3px;transform:rotate(-8deg)}.brand-mark span{background:var(--green);border-radius:2px}.brand-mark span:nth-child(2),.brand-mark span:nth-child(3){opacity:.55}.topbar-center,.eyebrow,.section-title,.stage-label,.stat small,.footer{font:10px var(--mono);letter-spacing:1.2px}.topbar-center{color:#a9b6c6}.topbar-divider{color:#45536a;margin:0 8px}.top-actions{display:flex;gap:12px;align-items:center}.top-select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:11px 12px;font:10px var(--mono);letter-spacing:.5px}.btn{border:1px solid transparent;border-radius:8px;padding:11px 15px;font-size:11px;font-weight:800;letter-spacing:.3px;transition:.2s}.btn-primary{background:var(--green);color:#06140f}.btn-primary:hover{background:#68f3bd;transform:translateY(-1px)}.btn-primary span{font-size:16px;margin-right:5px}.btn-ghost{background:#172233;color:#c5d0dc;border-color:#29384c}.btn-ghost:hover{border-color:#52657e}.danger-text{color:#ff929b}.workspace{display:grid;grid-template-columns:370px minmax(0,1fr);gap:22px;padding:24px 0 18px;min-height:calc(100vh - 130px)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:13px}.left-panel{padding:20px;align-self:start}.panel-heading{display:flex;align-items:center;justify-content:space-between}.eyebrow{color:var(--green)}h2{font-size:19px;margin:5px 0 0}.live-pill,.ai-tag{font:9px var(--mono);color:var(--green);border:1px solid #225b49;background:#102a24;padding:5px 8px;border-radius:30px}.tab-row{display:flex;gap:5px;margin:20px 0 22px;border-bottom:1px solid var(--line)}.tab{background:none;color:var(--muted);border:0;padding:0 13px 12px;font-size:11px;font-weight:700;position:relative}.tab.active{color:var(--green)}.tab.active:after{content:"";height:2px;background:var(--green);position:absolute;bottom:-1px;left:10px;right:10px}.tab-content{display:none}.tab-content.active{display:block}.section-block{margin-bottom:24px}.section-title{display:flex;justify-content:space-between;color:#d5e0e8;font-size:9px;margin-bottom:12px}.muted{color:var(--muted)}.model-choice{display:grid;grid-template-columns:1fr 1fr;gap:9px}.model-card{background:#131e2c;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:12px;text-align:left;display:grid;grid-template-columns:35px 1fr;align-items:center;column-gap:9px}.model-card.selected{border-color:var(--green);background:#10251f}.model-card b{font-size:11px}.model-card small{grid-column:2;color:var(--muted);font-size:9px;margin-top:3px}.model-icon{grid-row:span 2;width:30px;height:35px;display:block;background:linear-gradient(#d4a477 0 38%,#36465d 38% 78%,#26364b 78%);clip-path:polygon(20% 0,80% 0,80% 35%,100% 35%,100% 75%,80% 75%,80% 100%,20% 100%,20% 75%,0 75%,0 35%,20% 35%)}.slim-icon{width:25px;margin-left:3px;clip-path:polygon(25% 0,75% 0,75% 35%,100% 35%,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%,0 35%,25% 35%)}.upload-box{display:flex;align-items:center;gap:12px;border:1px dashed #3b4c61;border-radius:9px;padding:13px;background:#111b29;cursor:pointer}.upload-box:hover{border-color:var(--green)}.upload-symbol{width:31px;height:31px;display:grid;place-items:center;border-radius:7px;background:#1c3440;color:var(--green);font-size:20px}.upload-box b{display:block;font-size:10px}.upload-box small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.text-button{background:none;border:0;color:var(--muted);font-size:10px;margin-top:10px;padding:0}.text-button:hover{color:var(--green)}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tool-button{background:#151f2e;border:1px solid var(--line);color:#b8c5d2;border-radius:7px;padding:9px;font-size:10px;text-align:left}.tool-button span{color:var(--green);font-size:15px;margin-right:7px}.tool-button.active{border-color:var(--green);background:#10271f;color:var(--text)}.color-row{display:flex;justify-content:space-between;align-items:center;margin:15px 0 12px;font-size:10px;color:#bdc9d5}.color-control{display:flex;align-items:center;gap:8px;background:#0d1420;border:1px solid var(--line);border-radius:7px;padding:4px 8px;font:10px var(--mono)}input[type=color]{width:23px;height:22px;padding:0;border:0;background:none;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid #ffffff33;border-radius:4px}.editor-actions{display:flex;gap:6px}.editor-actions .btn{padding:8px 10px;font-size:9px}.canvas-wrap{background-color:#111b29;background-image:linear-gradient(45deg,#182436 25%,transparent 25%),linear-gradient(-45deg,#182436 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#182436 75%),linear-gradient(-45deg,transparent 75%,#182436 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;border:1px solid var(--line);border-radius:8px;padding:9px;overflow:hidden;touch-action:pan-y}.canvas-wrap canvas{display:block;width:100%;height:auto;image-rendering:pixelated;cursor:crosshair;touch-action:none}.canvas-hint{display:flex;justify-content:space-between;color:var(--muted);font:9px var(--mono);margin-top:8px}.preview-area{min-width:0;display:flex;flex-direction:column}.preview-topline{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 15px}.preview-topline h1{font-size:25px;margin:5px 0 0;letter-spacing:-1px}.green-dot{color:var(--green)}.preview-controls{display:flex;gap:7px}.icon-btn{width:35px;height:35px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:#c5d0dc;font-size:18px}.icon-btn.active{color:var(--green);border-color:#28634f}.preview-stage{position:relative;flex:1;min-height:520px;overflow:hidden;border:1px solid #263448;border-radius:13px;background:radial-gradient(ellipse at 50% 44%,#1c3040 0,#111c2b 38%,#0c1320 78%)}.stage-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent);transform:perspective(500px) rotateX(58deg) scale(1.7) translateY(25%);transform-origin:center bottom}.stage-glow{position:absolute;width:360px;height:360px;border-radius:50%;background:#35e6a51a;filter:blur(70px);left:50%;top:48%;transform:translate(-50%,-50%)}#skinViewer{position:absolute;inset:0;width:100%;height:100%;z-index:2}.stage-label{position:absolute;z-index:3;color:#aab8c7;font-size:9px}.stage-label span:not(.status-dot){color:#65758a;margin-left:8px}.top-left{top:20px;left:22px}.bottom-left{bottom:19px;left:22px;display:flex;align-items:center;gap:8px}.bottom-left .status-dot{margin:0}.bottom-right{bottom:19px;right:22px;color:var(--green)}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px #38e6a5}.viewer-fallback{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#9eacbd;font-size:12px;gap:8px}.viewer-fallback small{font-size:10px;color:#718197}.preview-footer{display:flex;align-items:center;gap:30px;padding:17px 4px}.stat{display:flex;flex-direction:column;gap:6px}.stat small{color:var(--muted);font-size:8px}.stat b{font-size:10px;letter-spacing:.3px}.footer-export{margin-left:auto}.footer{border-top:1px solid var(--line);height:45px;display:flex;justify-content:space-between;align-items:center;color:#a8b4c3;font-size:9px}.ai-card{border:1px solid var(--line);background:#131e2c;border-radius:10px;padding:14px;margin-bottom:12px}.ai-icon{color:var(--green);font-size:20px}.ai-card h3{font-size:13px;margin:7px 0 5px}.ai-card p{font-size:10px;line-height:1.6;color:var(--muted);margin:0 0 12px}.ai-card textarea{width:100%;resize:vertical;background:#0b1320;border:1px solid #2a3b50;border-radius:7px;color:var(--text);padding:10px;font-size:10px;outline:none;margin-bottom:9px}.ai-card textarea:focus{border-color:var(--green)}.full{width:100%}.compact{padding:10px;margin-bottom:9px}.api-note{font-size:9px;line-height:1.7;color:#9aa9ba;background:#101b29;border-left:2px solid #e3b75c;padding:10px;border-radius:4px}.api-note b{color:#f0ce83}.api-note code{color:var(--green);font-family:var(--mono)}.status-message{font-size:10px;line-height:1.5;margin-top:10px;color:var(--green)}.status-message.error{color:#ff929b}.library-empty{padding:28px 12px;text-align:center;color:var(--muted)}.library-empty span{font-size:30px;color:var(--green)}.library-empty b{display:block;color:var(--text);font-size:12px;margin:12px 0 6px}.library-empty p{font-size:10px;line-height:1.6}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#e8fff6;color:#092017;border-radius:8px;padding:11px 16px;font-size:11px;font-weight:800;box-shadow:0 8px 30px #0006;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:950px){.app-shell{padding:0 16px}.workspace{grid-template-columns:330px minmax(0,1fr);gap:14px}.preview-stage{min-height:460px}.topbar-center{display:none}}@media(max-width:700px){.app-shell{padding:0 10px}.topbar{height:66px}.brand{font-size:12px}.brand-mark{width:23px;height:23px}.top-actions{gap:6px}.top-select{max-width:104px;padding:9px 5px;font-size:8px}.top-actions .btn{font-size:9px;padding:10px 8px}.workspace{display:flex;flex-direction:column;padding-top:14px}.preview-area{order:0}.left-panel{order:1;padding:15px}.preview-stage{min-height:390px}.preview-topline h1{font-size:21px}.preview-footer{gap:13px;flex-wrap:wrap}.stat{min-width:calc(33% - 10px)}.footer-export{margin-left:0;width:100%}.footer-export .btn{width:100%}.footer{font-size:8px}.section-block{margin-bottom:20px}}@media(max-width:390px){.preview-stage{min-height:330px}.top-actions .btn{font-size:0}.top-actions .btn span{font-size:16px}.preview-footer{gap:10px}.stat b{font-size:9px}}