.color-palette-page[data-v-66b1fdf9]{max-width:900px;margin:0 auto;padding-top:80px}.palette-container[data-v-66b1fdf9]{background:#fff;border-radius:8px;padding:30px;box-shadow:0 2px 10px rgba(0,0,0,.1)}.title[data-v-66b1fdf9]{text-align:center;color:#333;margin-bottom:30px}.color-formats[data-v-66b1fdf9]{background:rgba(0,0,0,.7);color:#fff;padding:20px;margin-bottom:20px;border-radius:8px}.color-formats-grid[data-v-66b1fdf9]{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.color-format-item[data-v-66b1fdf9]{display:flex;flex-direction:column;align-items:flex-start;cursor:pointer;padding:8px;border-radius:4px;transition:background-color .2s}.color-format-item[data-v-66b1fdf9]:hover{background-color:hsla(0,0%,100%,.2)}.color-format-item.copied[data-v-66b1fdf9]{background-color:rgba(46,204,113,.8)}.format-label[data-v-66b1fdf9]{font-size:12px;opacity:.8;margin-bottom:4px}.format-value[data-v-66b1fdf9]{font-weight:700;font-family:Courier New,monospace}.color-picker-container[data-v-66b1fdf9]{margin-bottom:30px}.browser-compatibility-tip[data-v-66b1fdf9]{background-color:#f39c12;color:#fff;padding:12px;border-radius:6px;margin-bottom:20px;display:flex;align-items:center;gap:10px;font-size:14px}.tip-icon[data-v-66b1fdf9]{font-size:20px}.no-support-message[data-v-66b1fdf9]{background-color:#e74c3c;color:#fff;padding:20px;border-radius:8px;text-align:center;margin-bottom:20px}.no-support-icon[data-v-66b1fdf9]{font-size:40px;margin-bottom:10px}.alternative-tip[data-v-66b1fdf9]{font-size:14px;margin-top:10px;opacity:.9}.color-input[data-v-66b1fdf9]{width:100%;height:60px;border:none;border-radius:8px;cursor:pointer;margin-bottom:20px;box-shadow:0 2px 6px rgba(0,0,0,.15)}.picker-buttons-container[data-v-66b1fdf9]{display:flex;justify-content:center;margin-bottom:30px}.color-picker-btn[data-v-66b1fdf9]{background-color:#3498db;color:#fff;border:none;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:16px;transition:background-color .2s;display:flex;align-items:center;gap:8px}.color-picker-btn[data-v-66b1fdf9]:hover{background-color:#2980b9}.color-picker-btn.eye-dropper-btn[data-v-66b1fdf9]{background-color:#2ecc71}.color-picker-btn.eye-dropper-btn[data-v-66b1fdf9]:hover{background-color:#27ae60}.color-picker-btn[data-v-66b1fdf9]:disabled{background-color:#95a5a6;cursor:not-allowed}.color-picker-tip[data-v-66b1fdf9]{text-align:center;color:#3498db;font-weight:700;margin-bottom:20px;font-size:16px}.status-message[data-v-66b1fdf9]{padding:12px;border-radius:6px;margin-bottom:20px;text-align:center;font-weight:700}.status-info[data-v-66b1fdf9]{background-color:#3498db;color:#fff}.status-success[data-v-66b1fdf9]{background-color:#2ecc71;color:#fff}.status-error[data-v-66b1fdf9]{background-color:#e74c3c;color:#fff}.color-history[data-v-66b1fdf9]{margin-top:30px}.history-title[data-v-66b1fdf9]{font-weight:700;margin-bottom:15px;color:#333}.history-colors[data-v-66b1fdf9]{display:flex;flex-wrap:wrap;gap:10px}.history-color[data-v-66b1fdf9]{width:50px;height:50px;border-radius:50%;cursor:pointer;transition:transform .2s,box-shadow .2s;border:2px solid #ddd}.history-color[data-v-66b1fdf9]:hover{transform:scale(1.1);box-shadow:0 4px 8px rgba(0,0,0,.2)}.add-color-btn[data-v-66b1fdf9]{background-color:#ecf0f1;display:flex;align-items:center;justify-content:center;color:#7f8c8d;font-size:24px;font-weight:700}.add-color-btn[data-v-66b1fdf9]:hover{background-color:#bdc3c7;color:#2c3e50}.add-icon[data-v-66b1fdf9]{font-size:30px;line-height:1}.permission-guide-overlay[data-v-66b1fdf9]{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:10000}.permission-guide-container[data-v-66b1fdf9]{background:#fff;border-radius:8px;padding:30px;max-width:500px;width:90%}.permission-guide-title[data-v-66b1fdf9]{text-align:center;color:#333;margin-bottom:20px;font-size:24px}.permission-guide-steps[data-v-66b1fdf9]{margin-bottom:20px}.step-item[data-v-66b1fdf9]{display:flex;align-items:center;margin-bottom:15px;gap:15px}.step-number[data-v-66b1fdf9]{width:30px;height:30px;background:#3498db;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}.step-text[data-v-66b1fdf9]{color:#555;line-height:1.5}.note-text[data-v-66b1fdf9]{font-size:14px;color:#777;margin-top:15px;line-height:1.5}.permission-guide-footer[data-v-66b1fdf9]{display:flex;justify-content:flex-end;gap:15px;margin-top:25px}.cancel-btn[data-v-66b1fdf9]{background:#ecf0f1;color:#333;border:none;padding:10px 20px;font-size:16px}.confirm-btn[data-v-66b1fdf9]{background:#3498db;border:none;padding:10px 20px;font-size:16px}.confirm-btn[data-v-66b1fdf9]:hover{background:#2980b9}.color-preview[data-v-66b1fdf9]{position:fixed;z-index:10000;background-color:#fff;border:1px solid #ccc;border-radius:4px;padding:8px;box-shadow:0 2px 10px rgba(0,0,0,.2);font-family:Arial,sans-serif;font-size:12px;pointer-events:none}.color-value[data-v-66b1fdf9]{width:100%;height:30px;border-radius:2px;margin-bottom:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5)}.rgb-value[data-v-66b1fdf9]{text-align:center;color:#333}.zoom-preview[data-v-66b1fdf9]{position:fixed;z-index:10000;width:100px;height:100px;border:2px solid #fff;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.5);pointer-events:none;image-rendering:pixelated;background-color:#fff}.crosshair[data-v-66b1fdf9]{position:fixed;z-index:9999;width:20px;height:20px;border:2px solid #fff;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.5)}video[srcObject][data-v-66b1fdf9]{position:fixed;top:0;left:0;width:100vw;height:100vh;opacity:0;pointer-events:none;z-index:9998}#color-picker-overlay[data-v-66b1fdf9]{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.3);z-index:9997;pointer-events:none}.eye-dropper-active[data-v-66b1fdf9]{cursor:crosshair;background-color:rgba(0,0,0,.1)}.preset-colors[data-v-66b1fdf9]{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.preset-color[data-v-66b1fdf9]{width:40px;height:40px;border-radius:50%;cursor:pointer;transition:transform .2s,box-shadow .2s;border:2px solid #ddd}.preset-color[data-v-66b1fdf9]:hover{transform:scale(1.1);box-shadow:0 4px 8px rgba(0,0,0,.2)}.error-message[data-v-66b1fdf9]{background-color:#e74c3c;color:#fff;padding:12px;border-radius:6px;margin-bottom:20px;text-align:center}.tips[data-v-66b1fdf9]{margin-top:20px;font-size:12px;padding:10px 30px 15px 30px;color:#ff6d6d}.tips_title[data-v-66b1fdf9]{font-size:14px;font-weight:700;line-height:2rem}.tips p[data-v-66b1fdf9]{line-height:1.2rem;font-size:12px}.traditional-picker-overlay[data-v-66b1fdf9]{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:10000}.traditional-picker-container[data-v-66b1fdf9]{background:#fff;border-radius:8px;width:400px;box-shadow:0 4px 12px rgba(0,0,0,.15);overflow:hidden}.traditional-picker-header[data-v-66b1fdf9]{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #eee}.picker-title[data-v-66b1fdf9]{margin:0;font-size:18px;color:#333}.close-btn[data-v-66b1fdf9]{background:none;border:none;font-size:24px;cursor:pointer;color:#999}.traditional-picker-body[data-v-66b1fdf9]{padding:20px}.color-input-group[data-v-66b1fdf9]{margin-bottom:20px}.color-input-group label[data-v-66b1fdf9]{display:block;margin-bottom:8px;font-size:14px;color:#666}.color-text-input[data-v-66b1fdf9]{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px}.color-input-large[data-v-66b1fdf9]{width:100%;height:80px;border:1px solid #ddd;border-radius:4px;cursor:pointer}.traditional-picker-footer[data-v-66b1fdf9]{display:flex;justify-content:flex-end;gap:10px;padding:15px 20px;border-top:1px solid #eee;background-color:#fafafa}.cancel-btn[data-v-66b1fdf9]{padding:8px 16px;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;color:#666}.confirm-btn[data-v-66b1fdf9]{padding:8px 16px;background:#1890ff;border:1px solid #1890ff;border-radius:4px;cursor:pointer;color:#fff}.confirm-btn[data-v-66b1fdf9]:hover{background:#40a9ff;border-color:#40a9ff}