.color-tool { width: 100%; box-sizing: border-box; }
.color-tool .tool-desc {
    margin-bottom: 20px; padding: 15px 16px; background: #f8f9fa;
    border-left: 4px solid #3b82f6; border-radius: 4px; color: #555;
    font-size: 14px; line-height: 1.8;
}

/* 左右布局 */
.color-tool .main-layout {
    display: flex; gap: 30px; margin-bottom: 30px;
}
.color-tool .picker-area, .color-tool .preview-area {
    flex: 1; padding: 20px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
}
.color-tool .picker-title, .color-tool .preview-title {
    font-weight: 700; font-size: 15px; color: #333; margin-bottom: 15px;
    padding-bottom: 10px; border-bottom: 2px solid #f3f4f6;
}

/* 系统原生的取色器样式（保持原样，简洁大方） */
.color-tool .native-picker-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    background: #f9fafb;
    padding: 15px;
    border-radius: 6px;
}
.color-tool .js-native-color-picker {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 6px;
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.color-tool .hint-text { font-size: 13px; color: #666; }

/* 大号自定义渐变调色盘 */
.color-tool .sub-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: #333; }
.color-tool .palette-table { display: flex; flex-direction: column; gap: 6px; }
.color-tool .palette-row {
    height: 25px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #eee;
}
.color-tool .palette-row:hover { transform: scale(1.02); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

/* 右侧预览 */
.color-tool .color-snapshot { width: 100%; height: 100px; border-radius: 6px; background: #fff; border: 1px solid #ddd; margin-bottom: 20px; transition: background-color .2s; }
.color-tool .result-list { margin-bottom: 20px; }
.color-tool .result-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.color-tool .result-item strong { width: 50px; font-size: 13px; color: #555; }
.color-tool .result-item input { flex: 1; height: 32px; padding: 0 10px; border: 1px solid #eee; border-radius: 4px; font-family: monospace; font-size: 13px; outline: none; background: #f9fafb; }
.color-tool .copy-btn { height: 32px; padding: 0 10px; background: #3b82f6; color: #fff; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; }
.color-tool .manual-input { margin-top: 10px; }
.color-tool .manual-input label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
.color-tool .js-color-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #d2d6dc; border-radius: 4px; font-size: 14px; outline: none; font-family: monospace; }

@media (max-width: 768px) { .color-tool .main-layout { flex-direction: column; } }

/* ============ 增加的 3 个专业参考区块样式 ============ */

/* ============ 140个颜色大表样式 ============ */
.color-tool .reference-title {
    font-weight: 700; font-size: 16px; color: #333; margin-bottom: 15px;
    border-left: 4px solid #3b82f6; padding-left: 10px;
}
.color-tool .full-color-name-table table {
    width: 100%; border-collapse: collapse; font-size: 12px; text-align: center;
}
.color-tool .full-color-name-table td {
    border: 1px solid #eee; padding: 4px; cursor: pointer;
}
.color-tool .full-color-name-table td:first-child {
    width: 30px; height: 20px;
}
.color-tool .full-color-name-table tr:hover td {
    background-color: #f0f7ff;
}

/* 颜色色块背景 */
.color-tool .c-aliceblue { background-color: #F0F8FF; }
.color-tool .c-antiquewhite { background-color: #FAEBD7; }
.color-tool .c-aqua { background-color: #00FFFF; }
.color-tool .c-aquamarine { background-color: #7FFFD4; }
.color-tool .c-azure { background-color: #F0FFFF; }
.color-tool .c-beige { background-color: #F5F5DC; }
.color-tool .c-bisque { background-color: #FFE4C4; }
.color-tool .c-black { background-color: #000000; }
.color-tool .c-blanchedalmond { background-color: #FFEBCD; }
.color-tool .c-blue { background-color: #0000FF; }
.color-tool .c-blueviolet { background-color: #8A2BE2; }
.color-tool .c-brown { background-color: #A52A2A; }
.color-tool .c-burlywood { background-color: #DEB887; }
.color-tool .c-cadetblue { background-color: #5F9EA0; }
.color-tool .c-chartreuse { background-color: #7FFF00; }
.color-tool .c-chocolate { background-color: #D2691E; }
.color-tool .c-coral { background-color: #FF7F50; }
.color-tool .c-cornflowerblue { background-color: #6495ED; }
.color-tool .c-cornsilk { background-color: #FFF8DC; }
.color-tool .c-crimson { background-color: #DC143C; }
.color-tool .c-cyan { background-color: #00FFFF; }
.color-tool .c-darkblue { background-color: #00008B; }
.color-tool .c-darkcyan { background-color: #008B8B; }
.color-tool .c-darkgoldenrod { background-color: #B8860B; }
.color-tool .c-darkgray { background-color: #A9A9A9; }
.color-tool .c-darkgreen { background-color: #006400; }
.color-tool .c-darkkhaki { background-color: #BDB76B; }
.color-tool .c-darkmagenta { background-color: #8B008B; }
.color-tool .c-darkolivegreen { background-color: #556B2F; }
.color-tool .c-darkorange { background-color: #FF8C00; }
.color-tool .c-darkorchid { background-color: #9932CC; }
.color-tool .c-darkred { background-color: #8B0000; }
.color-tool .c-darksalmon { background-color: #E9967A; }
.color-tool .c-darkseagreen { background-color: #8FBC8F; }
.color-tool .c-darkslateblue { background-color: #483D8B; }
.color-tool .c-darkslategray { background-color: #2F4F4F; }
.color-tool .c-darkturquoise { background-color: #00CED1; }
.color-tool .c-darkviolet { background-color: #9400D3; }
.color-tool .c-deeppink { background-color: #FF1493; }
.color-tool .c-deepskyblue { background-color: #00BFFF; }
.color-tool .c-dimgray { background-color: #696969; }
.color-tool .c-dodgerblue { background-color: #1E90FF; }
.color-tool .c-firebrick { background-color: #B22222; }
.color-tool .c-floralwhite { background-color: #FFFAF0; }
.color-tool .c-forestgreen { background-color: #228B22; }
.color-tool .c-fuchsia { background-color: #FF00FF; }
.color-tool .c-gainsboro { background-color: #DCDCDC; }
.color-tool .c-ghostwhite { background-color: #F8F8FF; }
.color-tool .c-gold { background-color: #FFD700; }
.color-tool .c-goldenrod { background-color: #DAA520; }
.color-tool .c-gray { background-color: #808080; }
.color-tool .c-green { background-color: #008000; }
.color-tool .c-greenyellow { background-color: #ADFF2F; }
.color-tool .c-honeydew { background-color: #F0FFF0; }
.color-tool .c-hotpink { background-color: #FF69B4; }
.color-tool .c-indianred { background-color: #CD5C5C; }
.color-tool .c-indigo { background-color: #4B0082; }
.color-tool .c-ivory { background-color: #FFFFF0; }
.color-tool .c-khaki { background-color: #F0E68C; }
.color-tool .c-lavender { background-color: #E6E6FA; }
.color-tool .c-lavenderblush { background-color: #FFF0F5; }
.color-tool .c-lawngreen { background-color: #7CFC00; }
.color-tool .c-lemonchiffon { background-color: #FFFACD; }
.color-tool .c-lightblue { background-color: #ADD8E6; }
.color-tool .c-lightcoral { background-color: #F08080; }
.color-tool .c-lightcyan { background-color: #E0FFFF; }
.color-tool .c-lightgoldenrodyellow { background-color: #FAFAD2; }
.color-tool .c-lightgreen { background-color: #90EE90; }
.color-tool .c-lightgrey { background-color: #D3D3D3; }
.color-tool .c-lightpink { background-color: #FFB6C1; }
.color-tool .c-lightsalmon { background-color: #FFA07A; }
.color-tool .c-lightseagreen { background-color: #20B2AA; }
.color-tool .c-lightskyblue { background-color: #87CEFA; }
.color-tool .c-lightslategray { background-color: #778899; }
.color-tool .c-lightsteelblue { background-color: #B0C4DE; }
.color-tool .c-lightyellow { background-color: #FFFFE0; }
.color-tool .c-lime { background-color: #00FF00; }
.color-tool .c-limegreen { background-color: #32CD32; }
.color-tool .c-linen { background-color: #FAF0E6; }
.color-tool .c-magenta { background-color: #FF00FF; }
.color-tool .c-maroon { background-color: #800000; }
.color-tool .c-mediumaquamarine { background-color: #66CDAA; }
.color-tool .c-mediumblue { background-color: #0000CD; }
.color-tool .c-mediumorchid { background-color: #BA55D3; }
.color-tool .c-mediumpurple { background-color: #9370DB; }
.color-tool .c-mediumseagreen { background-color: #3CB371; }
.color-tool .c-mediumslateblue { background-color: #7B68EE; }
.color-tool .c-mediumspringgreen { background-color: #00FA9A; }
.color-tool .c-mediumturquoise { background-color: #48D1CC; }
.color-tool .c-mediumvioletred { background-color: #C71585; }
.color-tool .c-midnightblue { background-color: #191970; }
.color-tool .c-mintcream { background-color: #F5FFFA; }
.color-tool .c-mistyrose { background-color: #FFE4E1; }
.color-tool .c-moccasin { background-color: #FFE4B5; }
.color-tool .c-navajowhite { background-color: #FFDEAD; }
.color-tool .c-navy { background-color: #000080; }
.color-tool .c-oldlace { background-color: #FDF5E6; }
.color-tool .c-olive { background-color: #808000; }
.color-tool .c-olivedrab { background-color: #6B8E23; }
.color-tool .c-orange { background-color: #FFA500; }
.color-tool .c-orangered { background-color: #FF4500; }
.color-tool .c-orchid { background-color: #DA70D6; }
.color-tool .c-palegoldenrod { background-color: #EEE8AA; }
.color-tool .c-palegreen { background-color: #98FB98; }
.color-tool .c-paleturquoise { background-color: #AFEEEE; }
.color-tool .c-palevioletred { background-color: #DB7093; }
.color-tool .c-papayawhip { background-color: #FFEFD5; }
.color-tool .c-peachpuff { background-color: #FFDAB9; }
.color-tool .c-peru { background-color: #CD853F; }
.color-tool .c-pink { background-color: #FFC0CB; }
.color-tool .c-plum { background-color: #DDA0DD; }
.color-tool .c-powderblue { background-color: #B0E0E6; }
.color-tool .c-purple { background-color: #800080; }
.color-tool .c-red { background-color: #FF0000; }
.color-tool .c-rosybrown { background-color: #BC8F8F; }
.color-tool .c-royalblue { background-color: #4169E1; }
.color-tool .c-saddlebrown { background-color: #8B4513; }
.color-tool .c-salmon { background-color: #FA8072; }
.color-tool .c-sandybrown { background-color: #F4A460; }
.color-tool .c-seagreen { background-color: #2E8B57; }
.color-tool .c-seashell { background-color: #FFF5EE; }
.color-tool .c-sienna { background-color: #A0522D; }
.color-tool .c-silver { background-color: #C0C0C0; }
.color-tool .c-skyblue { background-color: #87CEEB; }
.color-tool .c-slateblue { background-color: #6A5ACD; }
.color-tool .c-slategray { background-color: #708090; }
.color-tool .c-snow { background-color: #FFFAFA; }
.color-tool .c-springgreen { background-color: #00FF7F; }
.color-tool .c-steelblue { background-color: #4682B4; }
.color-tool .c-tan { background-color: #D2B48C; }
.color-tool .c-teal { background-color: #008080; }
.color-tool .c-thistle { background-color: #D8BFD8; }
.color-tool .c-tomato { background-color: #FF6347; }
.color-tool .c-turquoise { background-color: #40E0D0; }
.color-tool .c-violet { background-color: #EE82EE; }
.color-tool .c-wheat { background-color: #F5DEB3; }
.color-tool .c-white { background-color: #FFFFFF; }
.color-tool .c-whitesmoke { background-color: #F5F5F5; }
.color-tool .c-yellow { background-color: #FFFF00; }
.color-tool .c-yellowgreen { background-color: #9ACD32; }

/* 剩下两个区块样式 */
.color-tool .hex-color-table { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.color-tool .hex-row { display: contents; }
.color-tool .hex-cell { height: 35px; cursor: pointer; border: 1px solid #eee; border-radius: 4px; }
.color-tool .hex-cell:hover { transform: scale(1.05); border-color: #333; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.color-tool .eng-color-table { display: flex; flex-direction: column; gap: 10px; }
.color-tool .eng-row { display: flex; gap: 10px; }
.color-tool .eng-cell { flex: 1; height: 50px; display: flex; justify-content: center; align-items: center; color: #333; font-weight: bold; border-radius: 6px; cursor: pointer; font-family: monospace; border: 1px solid #eee; }
.color-tool .eng-cell:hover { transform: scale(1.02); box-shadow: 0 2px 5px rgba(0,0,0,0.3); }

/* ============ 140个颜色大表样式（长条显示版） ============ */

/* 表格基础设定 */
.color-tool .full-color-name-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: center;
    table-layout: fixed; /* 强制表格列宽固定，防止文字自动占满 */
}

/* 第一列（颜色条）设定成固定宽度 300px */
.color-tool .full-color-name-table td:first-child {
    width: 300px; 
    height: 27px; /* 高度不变，依然是 27px */
    border: 1px solid #eee;
    cursor: pointer;
    border-radius: 4px;
}

/* 右侧文字列设定宽度 (留出合适空间即可) */
.color-tool .full-color-name-table td:nth-child(2),
.color-tool .full-color-name-table td:nth-child(3),
.color-tool .full-color-name-table td:nth-child(4) {
    width: calc((100% - 300px) / 3); /* 剩余宽度平分给这三列文字 */
    border: 1px solid #eee;
    padding: 5px;
    cursor: pointer;
}

/* 悬浮效果 */
.color-tool .full-color-name-table tr:hover td {
    background-color: #f0f7ff;
}