*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Trebuchet MS','Helvetica Neue',Arial,sans-serif;background:#f9f6f3;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.container{background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.06);width:100%;max-width:1200px;height:80vh;display:flex;overflow:hidden}.sidebar{width:300px;background:linear-gradient(180deg,#fdf9f7 0%,#f5efe9 100%);padding:30px;display:flex;flex-direction:column;border-right:1px solid #e8ddd1;overflow-y:auto;max-height:100%}.title{font-size:26px;font-weight:600;color:#3e3832;margin-bottom:8px;letter-spacing:-.5px}.subtitle{font-size:14px;color:#7c6f65;margin-bottom:30px;line-height:1.5}.upload-area{background:#d4a574;color:#fff;border:none;border-radius:10px;padding:16px 24px;text-align:center;cursor:pointer;transition:all .3s ease;margin-bottom:30px;font-size:16px;font-weight:500;box-shadow:0 2px 12px rgba(212,165,116,.3)}.upload-area:hover{background:#c89562;transform:translateY(-2px);box-shadow:0 4px 16px rgba(212,165,116,.4)}.upload-text{margin:0}.file-input{display:none}.palette-section{flex:1}.palette-title{font-size:18px;font-weight:600;color:#3e3832;margin-bottom:20px;letter-spacing:-.3px}.color-list{display:flex;flex-direction:column;gap:12px}.color-item{display:flex;align-items:center;background:#fff;border-radius:10px;border:1px solid #ede5dd;padding:12px;transition:all .3s ease;cursor:pointer;position:relative}.color-item:hover{background-color:#fffbf8;border-color:#d4a574;transform:translateX(2px)}.color-item.selected{background-color:#d4a574;border-color:#c89562;transform:translateX(4px);box-shadow:0 2px 8px rgba(212,165,116,.3)}.color-item.selected .color-hex{color:#fff}.color-item.selected .color-rgb{color:rgba(255,255,255,.85)}.copy-feedback{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:14px;height:14px;opacity:0;transition:opacity .2s ease;pointer-events:none;display:flex;align-items:center;justify-content:center}.copy-icon{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}.color-item:hover .copy-feedback{opacity:.5;color:#6b7280}.copy-feedback.copied{opacity:1!important;color:#10b981}.color-swatch{width:40px;height:40px;border-radius:8px;margin-right:12px;border:1px solid #ede5dd;box-shadow:0 2px 4px rgba(0,0,0,.05)}.color-info{flex:1}.color-hex{font-size:14px;font-weight:600;color:#3e3832;margin-bottom:2px}.color-rgb{font-size:12px;color:#7c6f65}.main-content{flex:1;display:flex;flex-direction:column;position:relative}.image-container{flex:1;display:flex;align-items:center;justify-content:center;position:relative;margin:30px;background:#fffbf8;border:2px dashed #d4a574;border-radius:16px;overflow:hidden;min-height:400px;transition:all .3s ease;cursor:pointer}.image-container:hover{border-color:#c89562;background:rgba(212,165,116,.08)}.image-container.dragover{border-color:#c89562;background:rgba(212,165,116,.12)}.image-container.has-image{background:#fff;border:none;cursor:default}.image-container.has-image:hover{border:none;background:#fff}.placeholder{text-align:center;color:#a8988b;padding:40px}.placeholder-icon{font-size:64px;margin-bottom:20px;opacity:.6}.loader{width:32px;height:32px;border:3px solid #f5efe9;border-top:3px solid #d4a574;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px auto}@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }.placeholder.loading .placeholder-icon{display:none}.placeholder.loading .loader{display:block}.loader{display:none}.placeholder-text{font-size:18px;margin-bottom:8px;color:#6b5f54;font-weight:500}.placeholder-hint{font-size:14px;color:#a8988b}.placeholder-icon{font-size:64px;margin-bottom:20px}.placeholder-text{font-size:18px;margin-bottom:10px}.image-display{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;position:relative}.color-indicator{position:absolute;width:32px;height:32px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 12px rgba(0,0,0,.15);cursor:grab;z-index:10;transition:all .3s ease}.color-indicator:hover{transform:scale(1.2);box-shadow:0 4px 16px rgba(0,0,0,.2)}.color-indicator:active{cursor:grabbing}.color-indicator.selected{border-color:#d4a574;border-width:4px;box-shadow:0 0 0 3px rgba(212,165,116,.3);transform:scale(1.15)}.pixel-zoom{position:absolute;width:120px;height:120px;border:3px solid #fff;border-radius:50%;box-shadow:0 4px 20px rgba(0,0,0,.2);pointer-events:none;z-index:1000;display:none;overflow:hidden}.pixel-zoom canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.pixel-zoom::after{content:'';position:absolute;top:50%;left:50%;width:2px;height:2px;background:rgba(0,0,0,.8);transform:translate(-50%,-50%);border:1px solid #fff}canvas{display:none}@media (max-width:768px){.container{flex-direction:column;height:auto}.sidebar{width:100%;order:2}.main-content{order:1;min-height:400px}}