*,*:before,*:after{box-sizing:border-box;padding:0;margin:0;-webkit-user-select:none;user-select:none}:root{--toolbar-height: 52px;--color-bg: #1a1a2e;--color-surface: #16213e;--color-primary: #0f3460;--color-accent: #e94560;--color-text: #eee;--color-text-muted: #999;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}html,body{height:100%;overflow:hidden;background:var(--color-bg);color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}#app{display:flex;flex-direction:column;height:100dvh;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}.toolbar{position:sticky;top:0;z-index:100;display:flex;flex-shrink:0;gap:4px;align-items:center;height:var(--toolbar-height);padding:4px 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:var(--color-surface);border-bottom:1px solid rgba(255,255,255,.08)}.toolbar::-webkit-scrollbar{display:none}.toolbar-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px;color:var(--color-text);cursor:pointer;background:transparent;border:none;border-radius:8px;transition:background .15s}.toolbar-btn:active{background:#ffffff1f}.toolbar-btn:disabled{cursor:default;opacity:.35}.toolbar-btn.active{background:var(--color-primary)}.toolbar-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.toolbar-separator{flex-shrink:0;width:1px;height:28px;margin:0 2px;background:#ffffff1f}.canvas-area{position:relative;display:flex;flex:1;align-items:center;justify-content:center;overflow:hidden;touch-action:none}.canvas-container{position:relative;touch-action:none}.canvas-container canvas{position:absolute;top:0;left:0}.brush-preview{position:absolute;top:50%;left:50%;z-index:20;pointer-events:none;border:1.5px dashed rgba(255,255,255,.7);border-radius:50%;transform:translate(-50%,-50%)}.empty-state{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;color:var(--color-text-muted);pointer-events:auto;cursor:pointer}.empty-state svg{width:64px;height:64px;fill:none;stroke:var(--color-text-muted);stroke-width:1.5}.empty-state p{font-size:16px;line-height:1.5;text-align:center}.jellify-controls{position:fixed;right:0;bottom:0;left:0;z-index:200;display:flex;gap:12px;align-items:center;justify-content:center;padding:12px 16px;padding-bottom:calc(12px + var(--safe-bottom));background:var(--color-surface);border-top:1px solid rgba(255,255,255,.08)}.jellify-controls label{display:flex;flex-shrink:1;gap:10px;align-items:center;width:100%;min-width:0;font-size:13px;color:var(--color-text-muted)}.jellify-controls input[type=range]{flex:1;min-width:0;accent-color:var(--color-accent)}.crop-confirm{position:fixed;right:0;bottom:0;left:0;z-index:200;display:flex;gap:12px;align-items:center;justify-content:center;padding:12px 16px;padding-bottom:calc(12px + var(--safe-bottom));background:var(--color-surface);border-top:1px solid rgba(255,255,255,.08)}.crop-confirm button{min-width:44px;min-height:44px;padding:8px 24px;font-size:14px;font-weight:600;cursor:pointer;border:none;border-radius:8px}.crop-btn-apply{color:#fff;background:var(--color-accent)}.crop-btn-cancel{color:var(--color-text);background:#ffffff1a}.drop-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;pointer-events:none;background:#1a1a2ee6;border:3px dashed var(--color-accent)}.drop-overlay p{font-size:20px;font-weight:600;color:var(--color-accent)}