*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:#e0e0e0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;background:#1a1a2e;height:100%;font-family:system-ui,-apple-system,sans-serif;font-size:13px}body{overflow:hidden}#root{flex-direction:column;height:100dvh;display:flex}.app-layout{flex:1;min-height:0;display:flex;overflow:hidden}.sidebar{background:#16213e;flex-direction:column;flex-shrink:0;width:260px;display:flex;overflow-y:auto}.sidebar-left{border-right:1px solid #0f3460}.sidebar-right{border-left:1px solid #0f3460;width:200px}.app-title{color:#e94560;border-bottom:1px solid #0f3460;flex-shrink:0;padding:10px 12px;font-size:14px;font-weight:700}.canvas-area{background:#0f3460;flex:1;justify-content:center;align-items:center;min-width:0;padding:8px;display:flex;overflow:hidden}.canvas-container{border:1px solid #ffffff1a;box-shadow:0 8px 32px #00000080}.toolbar{flex-direction:column;flex:1;display:flex;overflow-y:auto}.toolbar-section{border-bottom:1px solid #0f3460;flex-direction:column;gap:7px;padding:9px 11px;display:flex}.section-label{text-transform:uppercase;letter-spacing:.8px;color:#777;font-size:10px;font-weight:600}.toolbar-row{flex-wrap:wrap;align-items:center;gap:5px;display:flex}.toolbar-row label{color:#bbb;align-items:center;gap:5px;font-size:12px;display:flex}.toolbar-row input[type=number]{color:#e0e0e0;background:#0f3460;border:1px solid #1a4a8a;border-radius:4px;min-height:32px;padding:4px 6px;font-size:12px}.toolbar-row input[type=color]{cursor:pointer;background:0 0;border:1px solid #1a4a8a;border-radius:4px;width:32px;height:28px;padding:1px}.toolbar-row select{color:#e0e0e0;background:#0f3460;border:1px solid #1a4a8a;border-radius:4px;min-height:32px;padding:4px 6px;font-size:12px}.toolbar-row input[type=range]{accent-color:#e94560;flex:1}button{color:#e0e0e0;cursor:pointer;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#0f3460;border:1px solid #1a4a8a;border-radius:5px;min-height:32px;padding:6px 11px;font-size:12px;transition:background .15s}button:hover:not(:disabled),button:active:not(:disabled){background:#1a4a8a}button:disabled{opacity:.4;cursor:default}button.btn-active{color:#fff;background:#e94560;border-color:#e94560}button.btn-danger{color:#e94560;border-color:#e94560}button.btn-danger:hover,button.btn-danger:active{color:#fff;background:#e94560}.add-text-btn{color:#fff;background:#e94560;border-color:#e94560;width:100%;font-weight:600}.add-text-btn:hover,.add-text-btn:active{background:#c73652}.warn-text{color:#f0a030;background:#f0a0301a;border-radius:4px;padding:3px 5px;font-size:11px}.export-info{color:#4ec9b0;font-size:11px}.template-picker{border-bottom:1px solid #0f3460;flex-direction:column;gap:7px;padding:9px 11px;display:flex}.template-grid{grid-template-columns:1fr 1fr;gap:4px;display:grid}.tpl-btn{flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:52px;padding:7px 4px;display:flex}.tpl-icon{font-size:18px;line-height:1}.tpl-label{color:#aaa;font-size:10px}.cols-row label{color:#bbb;align-items:center;gap:5px;font-size:12px;display:flex}.cols-row input{color:#e0e0e0;background:#0f3460;border:1px solid #1a4a8a;border-radius:4px;width:50px;min-height:32px;padding:4px 6px;font-size:12px}.gallery{flex-direction:column;height:100%;min-height:0;display:flex}.gallery-status{color:#777;text-align:center;padding:14px 10px;font-size:12px}.gallery-grid{flex:1;grid-template-columns:1fr 1fr;gap:3px;padding:6px;display:grid;overflow-y:auto}.gallery-thumb{aspect-ratio:1;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#0f3460;border:2px solid #0000;border-radius:4px;transition:border-color .15s;position:relative;overflow:hidden}.gallery-thumb:hover,.gallery-thumb:active{border-color:#e94560}.gallery-thumb.in-use{opacity:.7;cursor:default;border-color:#4ec9b0}.gallery-thumb img{object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.thumb-remove{color:#fff;cursor:pointer;z-index:2;width:24px;height:24px;min-height:unset;touch-action:manipulation;background:#e94560;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:15px;line-height:1;display:flex;position:absolute;top:2px;right:2px}.thumb-add-hint{color:#ffffffb3;pointer-events:none;font-size:16px;position:absolute;bottom:2px;right:4px}.upload-btn{color:#e0e0e0;cursor:pointer;text-align:center;touch-action:manipulation;background:#0f3460;border:1px dashed #1a4a8a;border-radius:5px;flex-shrink:0;margin:6px;padding:9px;font-size:12px;display:block}.upload-btn:hover,.upload-btn:active{background:#1a4a8a}.mobile-bar{background:#16213e;border-bottom:1px solid #0f3460;flex-shrink:0;align-items:center;gap:8px;padding:6px 10px;display:none}.mobile-bar-title{color:#e94560;flex:1;font-size:13px;font-weight:700}.mobile-tab{color:#e0e0e0;cursor:pointer;touch-action:manipulation;background:#0f3460;border:1px solid #1a4a8a;border-radius:5px;min-height:34px;padding:6px 12px;font-size:12px}.mobile-tab.active{background:#e94560;border-color:#e94560}@media (width<=699px){.mobile-bar{display:flex}.app-title{display:none}.app-layout{flex-direction:column;overflow:hidden}.canvas-area{flex-shrink:0;justify-content:center;align-items:flex-start;padding:4px}.sidebar{border-top:1px solid #0f3460;border-right:none;flex:1;width:100%;display:none;overflow-y:auto}.sidebar.visible{display:flex}.sidebar-right{border-top:1px solid #0f3460;border-left:none;width:100%}.gallery-grid{grid-template-columns:repeat(4,1fr)}.template-grid{grid-template-columns:repeat(5,1fr)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#1a4a8a;border-radius:3px}