:root{--glass-dark: rgba(20, 20, 20, .65);--glass-light: rgba(255, 255, 255, .55);--glass-border: rgba(255, 255, 255, .1);--blur-strength: 40px;--modal-radius: 24px;--pill-radius: 50px;--ease-elastic: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.25, .8, .25, 1)}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif}.app-container{height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;position:relative;background:radial-gradient(circle at 20% 50%,rgba(138,92,245,.08) 0%,transparent 50%),radial-gradient(circle at 80% 50%,rgba(59,130,246,.06) 0%,transparent 50%),linear-gradient(135deg,#0a0a0a,#1a1a1a);backdrop-filter:blur(60px) saturate(180%);-webkit-backdrop-filter:blur(60px) saturate(180%)}.glass-panel{backdrop-filter:blur(var(--blur-strength));-webkit-backdrop-filter:blur(var(--blur-strength));border:1px solid var(--glass-border);box-shadow:0 20px 50px #0000004d}.anim-entry{opacity:0;transform:scale(.9) translateY(20px);animation:springUp .6s var(--ease-elastic) forwards}@keyframes springUp{to{opacity:1;transform:scale(1) translateY(0)}}.tap-effect:active{transform:scale(.92)!important;transition:.1s}.top-ui-layer{position:absolute;top:0;left:0;width:100%;padding:24px 32px;display:flex;justify-content:space-between;z-index:100;pointer-events:none}.nav-pill,.share-btn,.center-tools{pointer-events:auto;background:#fffffff2;color:#000}.nav-pill{padding:10px 20px;border-radius:var(--pill-radius);display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;cursor:pointer}.nav-pill svg{stroke:#000!important;fill:none!important}.center-tools{position:absolute;left:50%;transform:translate(-50%);top:24px;padding:12px 24px;border-radius:var(--pill-radius);display:flex;gap:28px;animation:springUpCenter .6s var(--ease-elastic) forwards .2s;opacity:0}@keyframes springUpCenter{0%{opacity:0;transform:translate(-50%) scale(.8) translateY(20px)}to{opacity:1;transform:translate(-50%) scale(1) translateY(0)}}.center-tools svg{width:22px;height:22px;cursor:pointer;transition:.2s;opacity:.7;stroke:#000!important;fill:none!important}.center-tools svg:hover{opacity:1;transform:scale(1.1)}.center-tools svg.disabled{opacity:.2;cursor:default}.share-btn{border:none;padding:10px 20px;border-radius:var(--pill-radius);display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}.share-btn svg{stroke:#000!important;fill:none!important}.canvas-container{position:relative;z-index:50;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;align-items:center}.image-modal{background:var(--glass-dark);border-radius:var(--modal-radius);position:relative;overflow:hidden;cursor:crosshair;display:inline-block;max-width:90vw;max-height:80vh}canvas{display:block;max-width:90vw;max-height:80vh;object-fit:contain}.temp-input{position:absolute;background:#fffffffa!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:3px solid #fff!important;outline:2px solid rgba(0,0,0,.2)!important;border-radius:8px;color:#1a1a1a!important;font-size:24px;font-weight:700;padding:8px 12px;z-index:60;min-width:120px;box-shadow:0 4px 16px #0000004d,0 0 0 4px #fff9!important;transition:all .2s var(--ease-smooth);cursor:move}.temp-input:focus{box-shadow:0 6px 20px #0006,0 0 0 4px #fffc!important;transform:scale(1.02)}.temp-input::placeholder{color:#1a1a1a66!important}.bottom-actions{margin-top:24px;display:flex;gap:16px}.action-btn{padding:12px 36px;border-radius:var(--pill-radius);border:none;font-weight:600;cursor:pointer}.btn-cancel{background:var(--glass-light);color:#000}.btn-save{background:#000000d9;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.right-tools-wrapper{position:absolute;right:32px;top:50%;transform:translateY(-50%);display:flex;gap:16px;z-index:100;align-items:center}.column{display:flex;flex-direction:column;align-items:center;gap:16px}.preset-strip{background:var(--glass-light);border-radius:36px;padding:16px 8px;display:flex;flex-direction:column;gap:12px}.color-dot{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.6);transition:.3s var(--ease-elastic);position:relative}.color-dot:hover{transform:scale(1.15)}.color-dot.active{transform:scale(1.25);border-color:#000;z-index:2;box-shadow:0 4px 12px #00000026}.c-rainbow{background:conic-gradient(from 0deg,#ff3b30,#fc0,#34c759,#007aff,#af52de,#ff3b30);border:2px solid #fff}.tool-strip{background:var(--glass-light);border-radius:36px;padding:16px 10px;width:64px;position:relative}.sliding-active-bg{position:absolute;left:10px;top:16px;width:44px;height:44px;background:#000;border-radius:14px;box-shadow:0 4px 12px #0000001a;z-index:1;transition:transform .4s var(--ease-elastic)}.tool-icon{width:44px;height:44px;margin-bottom:16px;display:flex;justify-content:center;align-items:center;cursor:pointer;position:relative;z-index:2;color:#00000080;transition:color .2s}.tool-icon.active{color:#fff}.tool-icon:last-child{margin-bottom:0}.tool-icon svg{width:24px;height:24px}.trash-btn{width:64px;height:64px;border-radius:50%;background:var(--glass-light);display:flex;justify-content:center;align-items:center;color:#333;cursor:pointer;margin-top:auto;transition:.3s var(--ease-elastic)}.trash-btn:hover{color:#ff3b30;transform:scale(1.1) rotate(10deg);background:#fff}.trash-btn svg{fill:currentColor}.picker-popover{position:absolute;right:160px;bottom:-50px;width:240px;background:#ffffffe6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;padding:16px;box-shadow:0 10px 40px #0003;opacity:0;transform:scale(.8) translate(20px);pointer-events:none;transition:all .4s var(--ease-elastic);transform-origin:right center;z-index:200}.picker-popover.show{opacity:1;transform:scale(1) translate(0);pointer-events:auto}.sat-val-canvas{width:100%;height:160px;border-radius:12px;cursor:crosshair;box-shadow:inset 0 0 0 1px #0000001a;margin-bottom:12px}.hue-slider{width:100%;height:24px;border-radius:12px;cursor:pointer;position:relative;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.hue-thumb{position:absolute;top:-2px;left:0;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.1);box-shadow:0 2px 5px #0003;transform:translate(-50%);pointer-events:none}.color-preview{margin-top:12px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#666;font-weight:600}.hex-code{font-family:monospace;letter-spacing:1px}.pen-tip{transition:fill .3s ease}