.image-control-panel{position:fixed;top:20px;left:50%;transform:translate(-50%);background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.1);border-radius:12px;box-shadow:0 8px 32px #0000001a;z-index:1000;padding:16px;min-width:600px;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.panel-content{display:flex;gap:24px;align-items:center}.panel-section{display:flex;flex-direction:column;gap:8px;align-items:center;position:relative}.section-label{font-size:12px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.button-group{display:flex;gap:8px;align-items:center}.control-button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:11px;color:#333;min-width:60px;text-align:center}.control-button:hover{background:#f5f5f5;border-color:#007acc;transform:translateY(-1px);box-shadow:0 4px 12px #007acc26}.control-button:active{transform:translateY(0);box-shadow:0 2px 6px #007acc33}.control-button.delete-button{border-color:#ff4757;color:#ff4757}.control-button.delete-button:hover{background:#ff4757;color:#fff;border-color:#ff4757;box-shadow:0 4px 12px #ff47574d}.button-icon{width:18px;height:18px;fill:currentColor;flex-shrink:0}.delete-button .button-icon{fill:currentColor}@media (max-width: 768px){.image-control-panel{min-width:auto;width:calc(100% - 40px);left:20px;right:20px;transform:none;padding:12px}.panel-content{flex-wrap:wrap;gap:16px;justify-content:center}.panel-section{flex:1;min-width:120px}.button-group{flex-wrap:wrap;justify-content:center}.control-button{min-width:50px;padding:6px 8px;font-size:10px}.button-icon{width:16px;height:16px}}.panel-section:not(:last-child):after{content:"";position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:1px;height:40px;background:#0000001a}.panel-section{position:relative}.control-button.active{background:#007acc;color:#fff;border-color:#007acc}.opacity-slider-container{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:8px;background:#fffffffa;border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:12px;box-shadow:0 4px 16px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:200px;z-index:1001;animation:slideDown .2s ease-out}.opacity-slider-wrapper{display:flex;align-items:center;gap:12px;margin-bottom:8px}.opacity-label{font-size:11px;color:#666;font-weight:500;min-width:25px;text-align:center}.opacity-slider{flex:1;height:6px;border-radius:3px;background:linear-gradient(to right,transparent 0%,#007acc 100%);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#007acc;cursor:pointer;border:2px solid white;box-shadow:0 2px 6px #0003;transition:all .2s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 3px 8px #007acc66}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#007acc;cursor:pointer;border:2px solid white;box-shadow:0 2px 6px #0003;transition:all .2s ease}.opacity-value{text-align:center;font-size:12px;color:var(--text-color);font-weight:500;margin-top:8px}.effect-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:8px;background:#fffffffa;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:16px;box-shadow:0 8px 32px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:480px;z-index:1001;animation:slideDown .3s ease-out}.effect-panel-header{margin-bottom:12px;text-align:center}.effect-panel-title{font-size:13px;font-weight:600;color:#333;letter-spacing:.5px}.effect-options{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:center}.effect-option{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:#fff;border:2px solid #e0e0e0;border-radius:10px;cursor:pointer;transition:all .2s ease;text-align:center;min-height:80px;position:relative;overflow:hidden}.effect-option:hover{border-color:#007acc;transform:translateY(-2px);box-shadow:0 6px 20px #007acc26}.effect-option.active{background:linear-gradient(135deg,#007acc,#06a);border-color:#007acc;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #007acc4d}.effect-preview{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);margin-bottom:2px;transition:all .2s ease;position:relative}.effect-option.active .effect-preview{background:#fff3}.effect-icon{width:20px;height:20px;fill:currentColor;transition:all .2s ease}.effect-name{font-size:11px;font-weight:500;color:inherit;letter-spacing:.3px}.no-effect{background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.grayscale-effect{background:linear-gradient(135deg,#6c757d,#495057);filter:grayscale(100%)}.sepia-effect{background:linear-gradient(135deg,#d4a574,#b8956b);filter:sepia(100%)}.blur-effect{background:linear-gradient(135deg,#007acc,#06a);filter:blur(1px)}.brightness-effect{background:linear-gradient(135deg,gold,#ffed4e);filter:brightness(1.3)}.contrast-effect{background:linear-gradient(135deg,#000,#fff);filter:contrast(1.5)}.saturate-effect{background:linear-gradient(135deg,#ff6b6b,#4ecdc4);filter:saturate(1.5)}.hue-rotate-effect{background:linear-gradient(135deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4);filter:hue-rotate(45deg)}@media (max-width: 768px){.effect-panel{min-width:calc(100vw - 40px);max-width:calc(100vw - 40px);left:20px;right:20px;transform:none;padding:12px}.effect-options{grid-template-columns:repeat(3,1fr);gap:8px}.effect-option{padding:8px 4px;min-height:70px}.effect-preview{width:28px;height:28px}.effect-icon{width:16px;height:16px}.effect-name{font-size:10px}}@media (max-width: 480px){.effect-options{grid-template-columns:repeat(2,1fr)}}.control-button.active{background:#007acc;color:#fff;border-color:#007acc;box-shadow:0 0 0 2px #007acc33}.color-display{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;background:#fffc;border:1px solid rgba(0,0,0,.1);border-radius:6px;font-size:12px}.color-preview{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px #ffffff80}.color-value{font-family:Courier New,monospace;font-weight:600;color:#333;text-transform:uppercase}.eyedropper-cursor{position:fixed;pointer-events:none;z-index:9999;animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.crosshair{position:relative}.crosshair-horizontal{position:absolute;width:40px;height:1px;background:#ffffffe6;box-shadow:0 0 2px #000c;top:0;left:-20px}.crosshair-horizontal:before{content:"";position:absolute;width:40px;height:1px;background:#0009;top:-.5px;left:0}.crosshair-vertical{position:absolute;width:1px;height:40px;background:#ffffffe6;box-shadow:0 0 2px #000c;top:-20px;left:0}.crosshair-vertical:before{content:"";position:absolute;width:1px;height:40px;background:#0009;top:0;left:-.5px}.center-dot{position:absolute;width:6px;height:6px;background:#ffffffe6;border:1px solid rgba(0,0,0,.8);border-radius:50%;top:-3px;left:-3px;box-shadow:0 0 4px #00000080}.magnifier-circle{position:absolute;width:60px;height:60px;border:2px solid rgba(255,255,255,.9);border-radius:50%;top:-30px;left:-30px;box-shadow:0 0 0 1px #0009,0 0 8px #0000004d;animation:pulse 2s ease-in-out infinite}.magnifier-inner{position:absolute;width:50px;height:50px;border:1px solid rgba(255,255,255,.5);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes pulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}}.coordinates{position:absolute;top:-45px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-family:Courier New,monospace;white-space:nowrap;box-shadow:0 2px 8px #0000004d}.coordinates:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:#000c}.color-preview-tooltip{position:absolute;top:-85px;left:50%;transform:translate(-50%);background:#fffffff2;border:1px solid rgba(0,0,0,.2);border-radius:6px;padding:6px 10px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 12px #0003;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.preview-color-swatch{width:20px;height:20px;border-radius:3px;border:1px solid rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px #ffffff4d}.preview-color-text{font-size:11px;font-family:Courier New,monospace;font-weight:600;color:#333;text-transform:uppercase}.color-preview-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:#fffffff2}@media (max-width: 768px){.magnifier-circle{width:50px;height:50px;top:-25px;left:-25px}.magnifier-inner{width:40px;height:40px}.crosshair-horizontal,.crosshair-horizontal:before{width:30px}.crosshair-horizontal{left:-15px}.crosshair-vertical,.crosshair-vertical:before{height:30px}.crosshair-vertical{top:-15px}.coordinates{font-size:11px;padding:3px 6px}}.toolbar{position:fixed;top:20px;right:20px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.1);border-radius:12px;box-shadow:0 8px 32px #0000001a;z-index:1000;padding:12px;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.toolbar-content{display:flex;flex-direction:column;gap:12px;align-items:center}.tool-section{display:flex;flex-direction:column;align-items:center}.tool-button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;background:#fffc;border:1px solid rgba(0,0,0,.1);border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:60px}.tool-button:hover{background:#f0f8ffe6;border-color:#007acc4d;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.tool-button.active{background:#007acc;color:#fff;border-color:#007acc;box-shadow:0 0 0 2px #007acc33}.tool-button.active:hover{background:#005a9e}.tool-icon{width:20px;height:20px;fill:currentColor}.tool-label{font-size:11px;font-weight:500;text-align:center}.color-result{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#ffffffe6;border:1px solid rgba(0,0,0,.1);border-radius:8px;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.color-info{display:flex;align-items:center;gap:8px}.color-swatch{width:24px;height:24px;border-radius:4px;border:1px solid rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px #ffffff4d;flex-shrink:0}.color-details{display:flex;flex-direction:column;gap:2px}.color-label{font-size:10px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.color-code{font-size:12px;font-family:Courier New,monospace;font-weight:600;color:#333;text-transform:uppercase}.copy-color-btn{padding:4px;background:transparent;border:1px solid rgba(0,0,0,.1);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.copy-color-btn:hover{background:#007acc1a;border-color:#007acc4d}.copy-icon{width:14px;height:14px;fill:#666}.copy-color-btn:hover .copy-icon{fill:#007acc}@media (max-width: 768px){.toolbar{top:10px;right:10px;padding:10px}.tool-button{padding:10px;min-width:50px}.tool-icon{width:18px;height:18px}.tool-label{font-size:10px}.color-result{padding:6px 10px}.color-swatch{width:20px;height:20px}.color-code{font-size:11px}}@media (max-width: 480px){.toolbar{position:fixed;bottom:20px;right:20px;top:auto}.toolbar-content{flex-direction:row}.color-result{flex-direction:column;gap:4px;text-align:center}.color-info{flex-direction:column;gap:4px}}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}