:root{--bg-color: #0d0d14;--panel-bg: #16162a;--panel-bg-light: #1e1e38;--text-color: #e0e0e0;--text-muted: #7a7a9a;--accent-color: #bb86fc;--accent-hover: #9965f4;--accent-glow: rgba(187, 134, 252, .18);--border-color: #2a2a42;--shadow-md: 0 4px 20px rgba(0, 0, 0, .45);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3)}*{box-sizing:border-box}body{margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background-color:var(--bg-color);color:var(--text-color);min-height:100vh;line-height:1.5;overflow-x:hidden}header{text-align:center;padding:3rem 1rem 2.5rem;background:linear-gradient(180deg,#1a0a38 0%,var(--panel-bg) 100%);border-bottom:1px solid var(--border-color)}header h1{margin:0 0 .5rem;font-size:2.75rem;font-weight:800;color:var(--accent-color);letter-spacing:-1px;text-shadow:0 0 40px rgba(187,134,252,.5)}header p{margin:0;color:var(--text-muted);font-size:1rem;font-weight:400;letter-spacing:.5px}main{max-width:1200px;margin:0 auto;padding:2.5rem 1.5rem;display:flex;flex-direction:column;gap:1.5rem}section{background-color:var(--panel-bg);padding:1.75rem 2rem;border-radius:14px;border:1px solid var(--border-color);box-shadow:var(--shadow-md)}section h2{margin:0 0 1.25rem;font-size:.8rem;font-weight:700;color:var(--accent-color);text-transform:uppercase;letter-spacing:1.5px;opacity:.9}section h3{margin:0 0 1rem;font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.hidden{display:none!important}button,.file-upload{background:linear-gradient(135deg,var(--accent-color) 0%,#9965f4 100%);color:#0d0d14;border:none;padding:.7rem 1.5rem;font-size:.9rem;font-weight:700;border-radius:50px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;display:inline-block;box-shadow:0 4px 14px #bb86fc59;letter-spacing:.2px;touch-action:manipulation;min-height:44px}button:hover,.file-upload:hover{transform:translateY(-2px);box-shadow:0 8px 22px #bb86fc80}button:active,.file-upload:active{transform:translateY(0);box-shadow:0 3px 10px #bb86fc4d}.file-upload input[type=file]{display:none}.palette-options{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.palette-options span{color:var(--text-muted);font-size:.875rem}.palette-display{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.25rem}.palette-color{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.08);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:pointer;position:relative}.palette-color:hover{transform:scale(1.3);border-color:#fff6;box-shadow:0 2px 8px #00000080;z-index:1}.palette-color.disabled{transform:scale(.9)}.palette-color.disabled:hover{transform:scale(1.1)}.palette-color.disabled:before,.palette-color.disabled:after{content:"";position:absolute;top:50%;left:-15%;right:-15%;height:4px;background-color:red;border-radius:2px;box-shadow:0 0 4px #000c}.palette-color.disabled:before{transform:translateY(-50%) rotate(45deg)}.palette-color.disabled:after{transform:translateY(-50%) rotate(-45deg)}#btn-add-color{padding:0;width:30px;height:30px;border-radius:50%;border:none;background:var(--accent-color);color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;overflow:hidden}#color-picker-input{visibility:hidden;position:absolute;width:0;height:0}.editor-section{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem}@media (max-width: 900px){.editor-section{grid-template-columns:1fr}}.crop-container img{max-width:100%;max-height:400px}.controls-container{display:flex;flex-direction:column;gap:1rem}.controls-container label{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;color:var(--text-color)}.label-row{display:flex;justify-content:space-between;align-items:baseline}.slider-value{font-size:.78rem;font-weight:600;color:var(--accent-color);min-width:2.5rem;text-align:right}.controls-container hr{border:none;border-top:1px solid var(--border-color);margin:.25rem 0}.controls-container input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--border-color);outline:none;cursor:pointer;touch-action:manipulation}.controls-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-color);cursor:pointer;box-shadow:0 0 0 3px var(--accent-glow);transition:box-shadow .2s ease,transform .2s ease}.controls-container input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--accent-glow);transform:scale(1.15)}.controls-container input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-color);cursor:pointer;border:none;box-shadow:0 0 0 3px var(--accent-glow)}.controls-container input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--border-color)}.preview-container{display:flex;flex-direction:column;align-items:center;gap:1.25rem}#canvas-result{border:1px solid var(--border-color);border-radius:6px;background-color:#000;image-rendering:pixelated;width:290px;height:290px;aspect-ratio:1;box-shadow:0 0 0 1px #ffffff0a,var(--shadow-md)}@media (max-width: 600px){header{padding:1.5rem 1rem 1.25rem}header h1{font-size:1.75rem;letter-spacing:-.5px}main{padding:1rem;gap:1rem}section{padding:1.25rem 1rem;border-radius:10px}#canvas-result{width:100%;height:auto;max-width:290px}.palette-options{flex-direction:column;align-items:flex-start}.controls-container input[type=range]{height:6px}.controls-container input[type=range]::-webkit-slider-thumb{width:24px;height:24px}.controls-container input[type=range]::-moz-range-thumb{width:24px;height:24px}}