:root{--bg: #111418;--surface: #1A2130;--sidebar: #213146;--secondary: #6382A7;--accent1: #C4BAA7;--accent2: #8C9FB0;--text: #F0EDE8;--text-muted: #C4BAA7;--border: #2A3A50;--border-faint: #1E2D40;--font-heading: "Orbitron", sans-serif;--font-body: "Montserrat", sans-serif}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button{cursor:pointer;font-family:var(--font-body)}textarea,input{font-family:var(--font-body)}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}.hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbar::-webkit-scrollbar{display:none}.app-layout{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}.app-header{display:flex;align-items:center;gap:14px;padding:0 24px;height:52px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;position:sticky;top:0;z-index:20}.app-title{margin:0;font-size:16px;font-weight:700;font-family:var(--font-heading);letter-spacing:.08em;color:var(--text);text-transform:uppercase}.app-badge{font-size:10px;font-weight:600;font-family:var(--font-body);padding:2px 8px;border-radius:99px;background:var(--border);color:var(--accent2);text-transform:uppercase;letter-spacing:.08em}.app-body{flex:1;display:flex;flex-direction:row;overflow:hidden}.garment-sidebar{display:flex;flex-direction:column;background:var(--sidebar);border-right:1px solid var(--border);transition:width .2s ease;overflow:hidden;flex-shrink:0}.garment-sidebar-header{height:44px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--border-faint);flex-shrink:0}.garment-list{list-style:none;margin:0;padding:6px 0;flex:1;overflow-y:auto}.garment-item{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;border:none;border-radius:0;cursor:pointer;text-align:left;transition:background .15s,color .15s;white-space:nowrap}.garment-item-bar{position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:55%;border-radius:0 2px 2px 0;background:var(--secondary)}.garment-item-label{font-size:12px;font-weight:600;font-family:var(--font-body);display:flex;align-items:center;gap:6px;overflow:hidden;letter-spacing:.02em}.garment-sidebar-toggle{display:flex;align-items:center;justify-content:center;height:40px;border:none;border-top:1px solid var(--border-faint);background:transparent;color:var(--accent2);cursor:pointer;flex-shrink:0;transition:color .15s}.controls-panel{width:260px;min-width:260px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}.preview-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 28px;gap:16px;background:#f5f5f5;min-height:0;overflow:hidden}.collapsible-section{border-bottom:1px solid var(--border-faint)}.no-zones-msg{margin:0;font-size:11px;color:var(--accent2)}@media (max-width: 767px){.app-layout{min-height:100svh}.app-header{padding:0 16px;height:48px}.app-body{flex-direction:column;overflow:visible;height:auto;flex:0 0 auto}.garment-sidebar{width:100%!important;min-width:0!important;flex-direction:row!important;height:auto!important;order:1;border-right:none!important;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;flex-shrink:0;-webkit-mask-image:linear-gradient(to right,transparent 0px,black 12px,black calc(100% - 12px),transparent 100%);mask-image:linear-gradient(to right,transparent 0px,black 12px,black calc(100% - 12px),transparent 100%)}.garment-sidebar::-webkit-scrollbar{display:none}.garment-sidebar-header,.garment-sidebar-toggle{display:none!important}.garment-list{display:flex!important;flex-direction:row!important;flex:0 0 auto!important;padding:6px 12px!important;gap:4px;overflow:visible!important}.garment-item{flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:5px!important;padding:10px 12px!important;min-width:62px!important;min-height:62px!important;border-radius:10px!important;white-space:normal!important;border:1.5px solid transparent!important}.garment-item--active{border-color:var(--secondary)!important}.garment-item-bar{display:none!important}.garment-item-label{font-size:9px!important;font-weight:700!important;letter-spacing:.02em!important;text-align:center!important;justify-content:center!important;line-height:1.25!important;flex-direction:column!important;gap:0!important;max-width:54px;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.preview-area{order:2;flex:0 0 auto;width:100%;height:50svh;min-height:260px;padding:10px 16px;gap:8px;overflow:hidden;justify-content:center}.canvas-wrapper{width:min(calc(100vw - 32px),calc(50svh - 80px))!important;max-width:480px!important}.stole-canvas-wrapper{width:min(calc(100vw - 32px),calc((50svh - 80px)*.75))!important;height:auto!important}.controls-panel{order:3;width:100%!important;min-width:0!important;border-right:none!important;border-top:1px solid var(--border);overflow-y:visible;flex-shrink:0}.collapsible-section{margin:8px 12px;border:1px solid var(--border)!important;border-radius:10px;overflow:hidden;background:var(--surface)}.collapsible-section:last-child{margin-bottom:24px}.controls-panel button:not(.collapsible-section button[aria-label]){min-height:44px}.controls-panel textarea{width:100%;min-height:88px}.controls-panel [style*=flex-wrap] button{flex:1;min-height:44px}.controls-panel [style*="border-radius: 50%"]{min-width:32px!important;min-height:32px!important}.controls-panel [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr 1fr!important}}