html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}body{background:#0a0d14;color:#e6e8eb;overflow:hidden;-webkit-tap-highlight-color:transparent}.sr-only{position:absolute!important;width:1px;height:1px;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;touch-action:none}#app{position:fixed;inset:0}canvas{display:block}.ui{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:12px;z-index:10;max-width:180px}.panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f141ed9;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;box-shadow:0 20px 40px #0006;transition:all .2s ease}.panel:hover{background:#0f141ee6;border-color:#ffffff1f}.panel h3{margin:0 0 12px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;opacity:.9;color:#64b5f6}.controls{display:flex;flex-direction:column;gap:12px}.controls label{font-size:12px;opacity:.8;font-weight:500;margin-bottom:6px;display:block}.controls input[type=number]{width:100%;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#ffffff0f;color:#fff;font-size:13px;transition:all .2s ease;max-width:120px}.controls input[type=number]:focus{outline:none;border-color:#64b5f6;background:#ffffff1a}.btns{display:flex;flex-direction:column;gap:6px}button,.file-label{appearance:none;border:1px solid rgba(255,255,255,.12);background:#ffffff14;color:#fff;padding:10px 14px;border-radius:12px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s ease;display:flex;align-items:center;gap:6px;width:100%}button:hover,.file-label:hover{background:#64b5f626;border-color:#64b5f64d;transform:translateY(-1px)}button:active,.file-label:active{transform:translateY(0)}button:disabled{opacity:.4;cursor:not-allowed;transform:none!important;background:#ffffff0a!important}.file-input{display:none}.footer{position:fixed;right:16px;bottom:16px;opacity:.7;font-size:12px;background:#0f141ecc;padding:8px 12px;border-radius:8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hint{opacity:.75;font-size:12px;margin-top:8px;line-height:1.4;font-style:italic}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:none;z-index:1000;overflow:auto;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-overlay.show{display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}.modal{background:#0f141ef2;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:28px;min-width:380px;max-width:90vw;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 30px 80px #0009;max-height:90vh;overflow-y:auto;position:relative;margin:auto}.modal h3{margin:0 0 20px;color:#fff;font-size:20px;font-weight:600}.modal-form{display:flex;flex-direction:column;gap:20px}.modal-input-group{display:flex;gap:16px;align-items:end}.modal-input-group>div{flex:1}.modal-input-group label{display:block;font-size:13px;color:#ccc;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em;font-weight:500}.modal-input-group input{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:#ffffff14;color:#fff;font-size:16px;box-sizing:border-box;transition:all .2s ease}.modal-input-group input:focus{outline:none;border-color:#64b5f6;background:#ffffff1f;box-shadow:0 0 0 3px #64b5f61a}.modal-buttons{display:flex;gap:12px;margin-top:8px}.modal-buttons button{flex:1;padding:14px;font-size:15px;font-weight:600}.crop-modal{min-width:600px;max-width:85vw;max-width:min(900px,85vw)}.crop-info{background:#001e3c66;padding:16px;border-radius:12px;margin-bottom:20px;font-size:13px;line-height:1.5;border:1px solid rgba(100,181,246,.2)}.crop-controls{display:flex;align-items:center;gap:16px;margin-bottom:20px;background:#001e3c33;padding:14px;border-radius:12px}.crop-controls label{font-size:13px;color:#ccc;font-weight:500}.crop-controls input[type=range]{flex:1;margin:0 12px;height:6px;border-radius:3px;background:#ffffff1a;outline:none;-webkit-appearance:none;appearance:none}.crop-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#64b5f6;cursor:pointer;border:2px solid #fff}.crop-controls span{font-size:13px;color:#64b5f6;min-width:50px;font-weight:600}.crop-container{position:relative;width:100%;max-height:450px;overflow:hidden;border:2px solid rgba(255,255,255,.2);border-radius:12px;margin-bottom:20px;display:flex;justify-content:center;align-items:center;background:#000;touch-action:none}.crop-image{max-width:none;max-height:none;display:block;position:relative;transform-origin:center}.crop-overlay{position:absolute;border:3px solid #64b5f6;background:#64b5f626;cursor:move;pointer-events:none;box-sizing:border-box;box-shadow:0 0 0 2px #0000004d;touch-action:none}.crop-handle{position:absolute;width:12px;height:12px;background:#64b5f6;border:2px solid #fff;cursor:pointer;pointer-events:all;border-radius:50%;transition:all .2s ease}.crop-handle:hover{background:#42a5f5;transform:scale(1.2)}.crop-handle.nw{top:-6px;left:-6px;cursor:nw-resize}.crop-handle.ne{top:-6px;right:-6px;cursor:ne-resize}.crop-handle.sw{bottom:-6px;left:-6px;cursor:sw-resize}.crop-handle.se{bottom:-6px;right:-6px;cursor:se-resize}.status{position:fixed;top:16px;right:16px;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:500;opacity:0;transition:opacity .3s ease;z-index:100}.status.show{opacity:1}.status.success{background:#4caf50e6;color:#fff}.status.error{background:#f44336e6;color:#fff}.ui.compact .panel{padding:8px 10px;border-radius:12px}.ui.compact .panel h3{margin-bottom:8px;font-size:11px}.ui.compact .btns button{padding:6px 8px;font-size:11px;border-radius:8px}.ui.compact .controls{gap:8px}.ui.compact .controls label{font-size:11px}.ui.compact input[type=number]{padding:6px 8px;font-size:12px}.ui.compact .hint{display:none}.ui.hidden{transform:translate(-120%);opacity:0;pointer-events:none}.ui{transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s ease}.ui-toggle{position:fixed;top:50%;left:env(safe-area-inset-left);z-index:50;width:16px;height:140px;border-radius:0 6px 6px 0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f141ebf;border:1px solid rgba(255,255,255,.15);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12px;padding:0;transition:background .25s ease}.ui-toggle:before{content:"▶";display:block;font-size:14px;line-height:1;writing-mode:vertical-rl;transform:rotate(180deg);transition:transform .35s}.ui-toggle.collapsed:before{transform:rotate(0)}.ui-toggle:hover{background:#64b5f640}@media (max-width: 900px){.ui-toggle{top:auto;bottom:max(50px,env(safe-area-inset-bottom));transform:none}}@media (max-width: 768px){.ui{max-width:min(68vw,160px)}.btns{flex-direction:row;flex-wrap:wrap}.btns button{flex:1 1 calc(50% - 6px);min-width:120px}.controls{grid-template-columns:1fr}.crop-modal{min-width:auto;width:100vw;max-width:100vw;padding:16px;border-radius:14px}.crop-info{font-size:12px;padding:12px}.crop-controls{gap:12px;padding:12px}.crop-controls input[type=range]{height:8px}.crop-container{max-height:none;height:60vh}.crop-image{max-width:100%;max-height:100%}}@media (orientation: landscape) and (max-height: 500px){.crop-modal{width:100vw;max-width:100vw;padding:12px}.crop-info{display:none}.crop-container{height:52vh}.crop-controls{margin-bottom:12px}}@media (orientation: landscape) and (max-width: 950px){.ui{inset:8px auto auto 8px;max-width:min(48vw,160px);display:flex;flex-direction:column;gap:8px}.ui>.panel:nth-of-type(2){position:fixed;right:8px;top:8px;z-index:11}.ui>.panel:nth-of-type(3){position:fixed;right:8px;bottom:8px;z-index:11}.ui.right-hidden>.panel:nth-of-type(2),.ui.right-hidden>.panel:nth-of-type(3){display:none}.ui.compact .controls label{font-size:10px}.texture-input-group button{font-size:10px!important;padding:6px!important}.color-picker-container,.texture-upload-container{margin-bottom:2px!important;margin-top:2px!important}}.texture-upload-container{margin-top:12px}.texture-input-group{display:flex;gap:8px;align-items:center;margin-top:6px;flex-direction:column}.texture-input-group button{flex:1;padding:8px 12px;font-size:12px}.color-picker-container,.texture-upload-container{margin-bottom:8px}.color-picker-container label,.texture-upload-container label{display:block;font-size:11px;font-weight:500;margin-bottom:6px;color:#a0a4aa}.color-input-group{display:flex;gap:8px;align-items:center}.color-input-group input[type=color]{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;background:none}.color-input-group span{font-family:Monaco,Menlo,monospace;font-size:11px;color:#a0a4aa;background:#ffffff0d;padding:4px 8px;border-radius:4px;min-width:60px;text-align:center}.texture-overlay{border:2px solid #ff9800!important;background:#ff98001a!important}.texture-overlay:before{content:"Texture Area";position:absolute;top:-20px;left:0;font-size:10px;color:#ff9800;font-weight:600}