*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary:#ffffff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--text-primary:#333333;--text-secondary:#666666;--text-muted:#999999;--border-color:#dee2e6;--shadow-color:rgba(0, 0, 0, 0.1);--gradient-primary:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary:linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)}[data-theme="dark"]{--bg-primary:#1a1a1a;--bg-secondary:#2d2d2d;--bg-tertiary:#3a3a3a;--text-primary:#ffffff;--text-secondary:#b0b0b0;--text-muted:#888888;--border-color:#404040;--shadow-color:rgba(0, 0, 0, 0.3);--gradient-primary:linear-gradient(135deg, #4a5568 0%, #2d3748 100%);--gradient-secondary:linear-gradient(135deg, #2d3748 0%, #1a202c 100%)}[data-theme="light"]{--bg-primary:#ffffff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--text-primary:#333333;--text-secondary:#666666;--text-muted:#999999;--border-color:#dee2e6;--shadow-color:rgba(0, 0, 0, 0.1);--gradient-primary:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary:linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:var(--text-primary);background:var(--gradient-primary);min-height:100vh;transition:all 0.3s ease}.container{max-width:1200px;margin:0 auto;padding:0 20px}header{background:var(--bg-primary);backdrop-filter:blur(10px);box-shadow:0 2px 20px var(--shadow-color);position:sticky;top:0;z-index:1000;transition:all 0.3s ease}.header-content{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}.logo{display:flex;align-items:center;text-decoration:none;color:var(--text-primary)}.logo-icon{width:40px;height:40px;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);border-radius:50%;margin-right:10px;position:relative;overflow:hidden}.logo-icon::before{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}.logo-icon::after{content:'';position:absolute;top:50%;left:50%;width:10px;height:10px;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);border-radius:50%;transform:translate(-50%,-50%)}.logo h1{font-size:1.5rem;font-weight:700;color:var(--text-primary)}nav ul{display:flex;list-style:none;gap:2rem}nav a{text-decoration:none;color:var(--text-primary);font-weight:500;transition:color 0.3s}nav a:hover{color:#667eea}.header-actions{display:flex;gap:1rem}.btn{padding:.5rem 1rem;border:none;border-radius:25px;cursor:pointer;font-weight:500;transition:all 0.3s;text-decoration:none;display:inline-block}.btn-primary{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff}.btn-secondary{background:rgb(102 126 234 / .1);color:#667eea;border:1px solid #667eea}.btn-theme{background:rgb(102 126 234 / .1);color:#667eea;border:1px solid #667eea;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all 0.3s ease;padding:0}.btn-theme:hover{background:#667eea;color:#fff;transform:translateY(-2px) scale(1.05)}.theme-icon{transition:transform 0.3s ease}.btn-theme:hover .theme-icon{transform:rotate(20deg)}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgb(0 0 0 / .2)}main{background:var(--bg-primary);margin:2rem 0;border-radius:20px;box-shadow:0 10px 40px var(--shadow-color);overflow:hidden;transition:all 0.3s ease}.hero{text-align:center;padding:3rem 2rem;background:var(--gradient-secondary)}.hero h2{font-size:2.5rem;color:var(--text-primary);margin-bottom:1rem}.hero p{font-size:1.1rem;color:var(--text-secondary);max-width:600px;margin:0 auto}.tool-intro{padding:2rem}.intro-card{background:var(--bg-primary);border-radius:15px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 5px 15px var(--shadow-color);border-left:4px solid #667eea;transition:all 0.3s}.intro-card:hover{transform:translateX(10px);box-shadow:0 10px 30px var(--shadow-color)}.intro-card h3{color:var(--text-primary);margin-bottom:1rem;font-size:1.3rem}.intro-card p{color:var(--text-secondary);line-height:1.8}.color-converter{padding:2rem;background:var(--bg-secondary)}.converter-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}.color-picker-section{background:var(--bg-primary);border-radius:15px;padding:2rem;box-shadow:0 5px 15px var(--shadow-color)}.color-picker{width:100%;height:200px;border:none;border-radius:10px;cursor:pointer;margin-bottom:1rem}.color-display{width:100%;height:100px;border-radius:10px;border:2px solid var(--border-color);margin-bottom:1rem}.color-formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}.format-group{background:var(--bg-primary);border-radius:10px;padding:1.5rem;box-shadow:0 3px 10px var(--shadow-color);position:relative}.format-group label{display:block;font-weight:600;margin-bottom:.5rem;color:var(--text-primary)}.format-input-container{position:relative;display:flex;align-items:center}.format-group input{width:100%;padding:.75rem;padding-right:3rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;transition:border-color 0.3s;background:var(--bg-primary);color:var(--text-primary)}.format-group input:focus{outline:none;border-color:#667eea}.copy-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:#667eea;color:#fff;border:none;border-radius:6px;padding:.5rem;cursor:pointer;font-size:.9rem;transition:all 0.3s}.copy-btn:hover{background:#5a67d8;transform:translateY(-50%) scale(1.05)}.copy-btn:active{transform:translateY(-50%) scale(.95)}.detailed-info{padding:2rem}.info-card{background:var(--bg-primary);border-radius:15px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 5px 15px var(--shadow-color);transition:all 0.3s}.info-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px var(--shadow-color)}.info-card h3{color:var(--text-primary);margin-bottom:1rem;font-size:1.3rem;display:flex;align-items:center;gap:.5rem}.info-card p{color:var(--text-secondary);line-height:1.8;margin-bottom:1rem}.info-card .features{background:var(--bg-secondary);padding:1rem;border-radius:8px;margin-top:1rem}.info-card .features h4{color:var(--text-primary);margin-bottom:.5rem;font-size:1rem}.info-card .features ul{list-style:none;padding-left:0}.info-card .features li{color:var(--text-secondary);padding:.25rem 0;position:relative;padding-left:1.5rem}.info-card .features li::before{content:'✓';position:absolute;left:0;color:#4caf50;font-weight:700}.alpha-example{background:#f0f8ff;padding:1rem;border-radius:8px;margin-top:1rem;border-left:4px solid #667eea}.alpha-example h4{color:var(--text-primary);margin-bottom:.5rem;font-size:1rem}.alpha-example p{color:var(--text-secondary);font-size:.9rem;line-height:1.6}.mb-1{margin-bottom:.25rem}.title{font-weight:600;font-size:18px;color:var(--text-primary);margin-bottom:15px}.color-table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:14px;box-shadow:0 2px 8px var(--shadow-color);background:var(--bg-primary)}.color-table th{background-color:var(--bg-secondary);border:1px solid var(--border-color);padding:12px 15px;text-align:left;font-weight:600;color:var(--text-primary);position:sticky;top:0}.color-table td{border:1px solid var(--border-color);padding:10px 15px;vertical-align:middle;color:var(--text-primary)}.color-table tr:nth-child(even){background-color:var(--bg-secondary)}.color-table tr:hover{background-color:var(--bg-tertiary)}.color-sample{width:40px;height:25px;border-radius:4px;border:1px solid #ccc;display:inline-block}.color-name{font-weight:500;color:var(--text-primary)}.color-description{color:var(--text-secondary)}.color-hex{font-family:'Courier New',monospace;font-weight:700;color:#007bff}.color-rgb{font-family:'Courier New',monospace;color:#28a745}.section-title{background-color:var(--bg-tertiary);font-weight:700;text-align:center;color:var(--text-primary)}.scroll-buttons{position:fixed;right:2rem;bottom:2rem;display:flex;flex-direction:column;gap:1rem;z-index:1000}.scroll-btn{width:50px;height:50px;border-radius:50%;background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all 0.3s;box-shadow:0 4px 15px rgb(0 0 0 / .2)}.scroll-btn:hover{transform:scale(1.1);box-shadow:0 6px 20px rgb(0 0 0 / .3)}footer{background:#2c3e50!important;color:white!important;padding:2rem 0;text-align:center;margin-top:2rem;width:100%;position:relative;z-index:1}.footer-links{display:flex;justify-content:center;gap:2rem;margin-bottom:1rem}.footer-links a{color:#bdc3c7!important;text-decoration:none;transition:color 0.3s}.footer-links a:hover{color:white!important}footer p{color:white!important;margin:0}[data-theme="dark"] footer{background:#1a1a1a!important;color:white!important}[data-theme="dark"] .footer-links a{color:#b0b0b0!important}[data-theme="dark"] .footer-links a:hover{color:white!important}.toast{position:fixed;top:20px;right:20px;background:#4caf50;color:#fff;padding:1rem 2rem;border-radius:10px;box-shadow:0 4px 15px rgb(0 0 0 / .2);z-index:10000;transform:translateX(400px);transition:transform 0.3s}.toast.show{transform:translateX(0)}.toast.error{background:#f44336}[data-theme="dark"] .toast{background:#2d2d2d;color:#fff;border:1px solid #404040}[data-theme="dark"] .toast.error{background:#dc3545}.mobile-menu-toggle{display:none;flex-direction:column;justify-content:space-around;width:30px;height:30px;background:#fff0;border:none;cursor:pointer;padding:0;z-index:1001}.mobile-menu-toggle span{width:100%;height:3px;background:var(--text-primary);border-radius:2px;transition:all 0.3s ease;transform-origin:center}.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}.mobile-menu-toggle.active span:nth-child(2){opacity:0}.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}@media (max-width:768px){.header-content{flex-direction:row;justify-content:space-between;align-items:center;position:relative}.mobile-menu-toggle{display:flex;order:3}.favorite-btn{display:none}.nav-menu{position:absolute;top:100%;left:0;right:0;background:var(--bg-primary);box-shadow:0 4px 20px var(--shadow-color);border-radius:0 0 15px 15px;transform:translateY(-100%);opacity:0;visibility:hidden;transition:all 0.3s ease;z-index:1000}.nav-menu.active{transform:translateY(0);opacity:1;visibility:visible}.nav-menu ul{flex-direction:column;gap:0;padding:1rem 0}.nav-menu li{border-bottom:1px solid var(--border-color)}.nav-menu li:last-child{border-bottom:none}.nav-menu a{display:block;padding:1rem 2rem;color:var(--text-primary);transition:background-color 0.3s}.nav-menu a:hover{background-color:var(--bg-secondary)}.header-actions{order:2;gap:.5rem}.header-actions .btn{padding:.4rem .8rem;font-size:.9rem}.color-table{font-size:12px;display:block;overflow-x:auto;white-space:nowrap}.color-table thead,.color-table tbody,.color-table th,.color-table td,.color-table tr{display:block}.color-table thead tr{position:absolute;top:-9999px;left:-9999px}.color-table tr{border:1px solid var(--border-color);margin-bottom:10px;padding:10px;border-radius:8px;background:var(--bg-primary)}.color-table td{border:none;position:relative;padding:8px 8px 8px 35%;text-align:left;white-space:normal}.color-table td:before{content:attr(data-label);position:absolute;left:8px;width:30%;text-align:left;font-weight:700;color:var(--text-primary)}.color-sample{width:30px;height:20px}.converter-grid{grid-template-columns:1fr}.color-formats{grid-template-columns:1fr}.hero h2{font-size:2rem}.scroll-buttons{right:1rem;bottom:1rem}.footer-links{flex-direction:column;gap:1rem}}@media (max-width:480px){.container{padding:0 10px}.hero{padding:2rem 1rem}.hero h2{font-size:1.5rem}.tool-intro,.color-converter,.detailed-info{padding:1rem}.intro-card,.info-card{padding:1.5rem}.color-table{font-size:11px}.color-table td{padding:6px 6px 6px 40%}.color-table td:before{width:35%;font-size:10px}.header-actions .btn{padding:.3rem .6rem;font-size:.8rem}}.copy-success-tip{position:absolute;right:-120px;top:50%;transform:translateY(-50%);background:#4CAF50;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:1000;animation:fadeInOut 2s ease-in-out}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-50%) translateX(10px)}15%{opacity:1;transform:translateY(-50%) translateX(0)}85%{opacity:1;transform:translateY(-50%) translateX(0)}100%{opacity:0;transform:translateY(-50%) translateX(-10px)}}.color-hex:hover,.color-rgb:hover{background-color:var(--bg-secondary);transition:background-color 0.2s ease}@media (max-width:768px){.copy-success-tip{right:-100px;font-size:11px;padding:3px 6px}}.color-count{float:right;background:var(--bg-secondary);color:var(--text-secondary);padding:4px 12px;border-radius:15px;font-size:14px;font-weight:400}.search-container{position:relative;margin-bottom:20px}.search-input{width:100%;padding:12px 40px 12px 16px;border:2px solid var(--border-color);border-radius:25px;font-size:16px;background:var(--bg-primary);color:var(--text-primary);transition:all 0.3s ease;box-sizing:border-box}.search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgb(102 126 234 / .1)}.search-input::placeholder{color:var(--text-secondary)}.search-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:18px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;opacity:0;visibility:hidden}.search-clear.show{opacity:1;visibility:visible}.search-clear:hover{background:var(--bg-secondary);color:var(--text-primary)}.highlight{background-color:#ffeb3b;color:#000;padding:1px 2px;border-radius:2px}.color-table tbody tr.hidden{display:none}.no-results{text-align:center;padding:40px 20px;color:var(--text-secondary);font-style:italic}@media (max-width:768px){.color-count{float:none;display:block;margin-top:10px;text-align:center}.search-input{font-size:16px}}.tab-container{width:100%;margin-top:20px}.tab-nav{display:flex;background:var(--bg-secondary);border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 2px 10px var(--shadow-color)}.tab-btn{flex:1;padding:15px 20px;background:#fff0;border:none;color:var(--text-secondary);font-size:16px;font-weight:500;cursor:pointer;transition:all 0.3s ease;position:relative}.tab-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.tab-btn.active{background:var(--bg-primary);color:var(--text-primary);font-weight:600}.tab-btn.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#667eea,#764ba2)}.tab-content{display:none;background:var(--bg-primary);border-radius:0 0 10px 10px;box-shadow:0 2px 20px var(--shadow-color);min-height:500px}.tab-content.active{display:block;animation:fadeIn 0.3s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.tab-nav{flex-direction:column}.tab-btn{text-align:center;border-bottom:1px solid var(--border-color)}.tab-btn:last-child{border-bottom:none}}.clickable-code{cursor:pointer;transition:background-color 0.2s ease;padding:4px 8px;border-radius:4px}.clickable-code:hover{background-color:var(--bg-tertiary);color:var(--accent-color)}.clickable-code:active{background-color:var(--accent-color);color:#fff}.copy-success{background-color:var(--success-color)!important;color:white!important;transition:all 0.3s ease}.category-header{background-color:var(--bg-secondary)!important}.category-title{font-weight:700;font-size:1.1em;color:var(--text-primary);text-align:center;padding:12px 8px;border-bottom:2px solid var(--border-color);background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary))}.dark-theme .category-title{background:linear-gradient(135deg,#2a2a2a,#333333)}.category-header:hover{background-color:var(--bg-secondary)!important}.color-sample{width:230px;height:110px;border-radius:6px;border:1px solid #ccc;display:inline-block}.color-table td{border:1px solid var(--border-color);padding:15px 15px;vertical-align:middle;color:var(--text-primary)}.color-table td:nth-child(1){text-align:center;min-width:100px}.color-table th:nth-child(1){text-align:center;min-width:100px}.color-table th{background-color:var(--bg-secondary);border:1px solid var(--border-color);padding:15px 15px;text-align:left;font-weight:600;color:var(--text-primary);position:sticky;top:0}.gradient-sample{width:230px;height:110px;border-radius:6px;border:2px solid var(--border-color);cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 4px rgb(0 0 0 / .1);margin:0 auto}.gradient-sample:hover{transform:scale(1.05);box-shadow:0 4px 8px rgb(0 0 0 / .2)}.gradient-hex{cursor:pointer;transition:background-color 0.3s ease;font-family:'Courier New',monospace;font-weight:700;text-align:center;padding:10px 15px}.gradient-hex:hover{background-color:var(--hover-bg);color:var(--primary-color)}#gradientTable th:first-child{width:120px;text-align:center}#gradientTable th:nth-child(2),#gradientTable th:nth-child(3),#gradientTable th:nth-child(4){width:calc((100% - 120px) / 3);text-align:center}#gradientTable td:first-child{text-align:center;vertical-align:middle}// 配色方案数据 (No.1-No.100) const colorSchemes=[{id:1,colors:['#eeeeee','#00adb5','#393e46','#222831']},{id:2,colors:['#6a2c70','#b83b5e','#f08a5d','#f9ed69']},{id:3,colors:['#95e1d3','#eaffd0','#fce38a','#f38181']},{id:4,colors:['#eaeaea','#ff2e63','#252a34','#08d9d6']},{id:5,colors:['#fc5185','#f5f5f5','#3fc1c9','#364f6b']},{id:6,colors:['#ffffd2','#fcbad3','#aa96da','#a8d8ea']},{id:7,colors:['#71c9ce','#a6e3e9','#cbf1f5','#e3fdfd']},{id:8,colors:['#40514e','#11999e','#30e3ca','#e4f9f5']},{id:9,colors:['#8785a2','#f6f6f6','#ffe2e2','#ffc7c7']},{id:10,colors:['#112d4e','#3f72af','#dbe2ef','#f9f7f7']},{id:11,colors:['#abedd8','#46cdcf','#3d84a8','#48466d']},{id:12,colors:['#ffde7d','#f6416c','#f8f3d4','#00b8a9']},{id:13,colors:['#53354a','#903749','#e84545','#2b2e4a']},{id:14,colors:['#61c0bf','#bbded6','#fae3d9','#ffb6b9']},{id:15,colors:['#311d3f','#522546','#88304e','#e23e57']},{id:16,colors:['#a5dee5','#e0f9b5','#fefdca','#ffcfdf']},{id:17,colors:['#14ffec','#0d7377','#323232','#212121']},{id:18,colors:['#ffaaa5','#ffd3b6','#dcedc1','#a8e6cf']},{id:19,colors:['#cca8e9','#c3bef0','#cadefc','#defcf9']},{id:20,colors:['#3e4149','#444f5a','#ff9999','#ffc8c8']},{id:21,colors:['#ff165d','#ff9a00','#f6f7d7','#3ec1d3']},{id:22,colors:['#355c7d','#6c5b7b','#c06c84','#f67280']},{id:23,colors:['#521262','#6639a6','#3490de','#6fe7dd']},{id:24,colors:['#ffd460','#f07b3f','#ea5455','#2d4059']},{id:25,colors:['#99ddcc','#f6f6f6','#ffe2e2','#bad7df']},{id:26,colors:['#edb1f1','#d59bf6','#9896f1','#8ef6e4']},{id:27,colors:['#cabbe9','#ffcef3','#fdfdfd','#a1eafb']},{id:28,colors:['#c4edde','#7ac7c4','#f73859','#384259']},{id:29,colors:['#ff5722','#eeeeee','#00adb5','#303841']},{id:30,colors:['#ff8c94','#ffaaa6','#ffd3b5','#dcedc2']},{id:31,colors:['#283c63','#928a97','#fbe8d3','#f85f73']},{id:32,colors:['#1e2022','#52616b','#c9d6df','#f0f5f9']},{id:33,colors:['#fecea8','#ff847c','#e84a5f','#2a363b']},{id:34,colors:['#ff7e67','#fafafa','#a2d5f2','#07689f']},{id:35,colors:['#e8ffe8','#a6fff2','#74f9ff','#00e0ff']},{id:36,colors:['#a56cc1','#a6acec','#ace7ef','#cefff1']},{id:37,colors:['#ff9de2','#8c82fc','#b693fe','#7effdb']},{id:38,colors:['#f57170','#f5f5f5','#10ddc2','#15b7b9']},{id:39,colors:['#625772','#f9a1bc','#fefaec','#a9eee6']},{id:40,colors:['#769fcd','#b9d7ea','#d6e6f2','#f7fbfc']},{id:41,colors:['#ffaaa5','#ffd3b6','#fdffab','#a8e6cf']},{id:42,colors:['#0dceda','#6ef3d6','#c6fce5','#ebfffa']},{id:43,colors:['#878ecd','#b9bbdf','#dde7f2','#dff4f3']},{id:44,colors:['#f25d9c','#b61aae','#590d82','#0c056d']},{id:45,colors:['#d7fbe8','#9df3c4','#62d2a2','#1fab89']},{id:46,colors:['#a6d0e4','#f9ffea','#ffecda','#d4a5a5']},{id:47,colors:['#fbafaf','#f2c6b4','#f3e8cb','#99e1e5']},{id:48,colors:['#fc85ae','#9e579d','#574b90','#303a52']},{id:49,colors:['#eeeeee','#d72323','#3a4750','#303841']},{id:50,colors:['#dbedf3','#f73859','#404b69','#283149']},{id:51,colors:['#c5e3f6','#fc5c9c','#fccde2','#fcefee']},{id:52,colors:['#ed8d8d','#8d6262','#4d4545','#393232']},{id:53,colors:['#004a7c','#005691','#e8f1f5','#fafafa']},{id:54,colors:['#ffc93c','#ff9a3c','#ff6f3c','#155263']},{id:55,colors:['#7e6bc4','#c79ecf','#d6c8ff','#fef0ff']},{id:56,colors:['#fa4659','#f0fff3','#c6f1e7','#11cbd7']},{id:57,colors:['#f5c7f7','#a393eb','#5e63b6','#27296d']},{id:58,colors:['#fff5a5','#ffaa64','#ff8264','#ff6464']},{id:59,colors:['#537780','#11d3bc','#55e9bc','#fffcca']},{id:60,colors:['#7098da','#6eb6ff','#90f2ff','#e0fcff']},{id:61,colors:['#625772','#f38181','#fefaec','#a9eee6']},{id:62,colors:['#e3e3e3','#f95959','#455d7a','#233142']},{id:63,colors:['#c86b85','#e6a4b4','#f3d7ca','#f5eee6']},{id:64,colors:['#ffbd39','#e61c5d','#930077','#3a0088']},{id:65,colors:['#f76b8a','#fcfefe','#eaf6f6','#66bfbf']},{id:66,colors:['#bfcfff','#c8e7ed','#ffffc2','#ffa5a5']},{id:67,colors:['#f3f798','#eab4f8','#fcc8f8','#c7f5fe']},{id:68,colors:['#d9faff','#00bbf0','#005792','#00204a']},{id:69,colors:['#f5f5f5','#d3d4d8','#3fbac2','#4d606e']},{id:70,colors:['#6c5b7c','#c06c84','#f67280','#f8b595']},{id:71,colors:['#f2f4c3','#ffdcf5','#fdc7ff','#c7f3ff']},{id:72,colors:['#aedefc','#fff6f6','#ffdfdf','#fb929e']},{id:73,colors:['#7c7575','#b8b0b0','#dfd3d3','#fbf0f0']},{id:74,colors:['#e67a7a','#ffebb7','#fff4e1','#9ddcdc']},{id:75,colors:['#d2ecf9','#1891ac','#1f5f8b','#253b6e']},{id:76,colors:['#f67280','#c06c84','#6c5b7b','#35477d']},{id:77,colors:['#8971d0','#7dace4','#95e8d7','#adf7d1']},{id:78,colors:['#649dad','#66c6ba','#a4e5d9','#c8f4de']},{id:79,colors:['#163172','#1e56a0','#d6e4f0','#f6f6f6']},{id:80,colors:['#fbac91','#fbe1b6','#7fdfd4','#a7efe9']},{id:81,colors:['#fecea8','#ff847b','#e84a5f','#2a363b']},{id:82,colors:['#4a266a','#7f4a88','#de95ba','#ffd9e8']},{id:83,colors:['#a7ff83','#17b978','#086972','#071a52']},{id:84,colors:['#ff7c38','#e03e36','#b80d57','#700961']},{id:85,colors:['#2f9296','#46b7b9','#87dfd6','#dff5f2']},{id:86,colors:['#c0ffc2','#fdffba','#ffeab6','#f69d9d']},{id:87,colors:['#537791','#c1c0b9','#f7f6e7','#e7e6e1']},{id:88,colors:['#8f8787','#ebcbae','#f9f9f9','#a6e4e7']},{id:89,colors:['#f2bbbb','#ed93cb','#ca82f8','#a1d9ff']},{id:90,colors:['#ba52ed','#ff99fe','#a4f6f9','#e4fffe']},{id:91,colors:['#00fff5','#00adb5','#393e46','#222831']},{id:92,colors:['#eeeeee','#4ecca3','#393e46','#232931']},{id:93,colors:['#1f4e5f','#79a8a9','#aacfd0','#f4f7f7']},{id:94,colors:['#355c7d','#c06c84','#f67280','#f8b195']},{id:95,colors:['#f8ecfd','#c264fe','#a82ffc','#7a08fa']},{id:96,colors:['#80d6ff','#edf798','#fab57a','#f06868']},{id:97,colors:['#70a1d7','#a1de93','#f7f48b','#f47c7c']},{id:98,colors:['#2eb872','#a3de83','#feffe4','#fa4659']},{id:99,colors:['#756c83','#f38181','#b9e1dc','#fbfbfb']},{id:100,colors:['#d988bc','#ffa8b8','#ffd2a5','#ffffc1']}];// 生成配色方案表格 function generateColorSchemes(){const tableBody=document.getElementById('colorschemeTableBody');if (!tableBody) return;tableBody.innerHTML='';colorSchemes.forEach(scheme=>{const row=document.createElement('tr');// 创建颜色预览列 - 4个独立的颜色块 const colorPreviewHtml=scheme.colors.map(color=>`<div class="color-block" style="background-color: ${color};" onclick="copyColorSchemeCode('${color}', this)" title="点击复制 ${color}"></div>`).join('');row.innerHTML=` <td class="color-preview-cell"><div class="color-blocks-container">${colorPreviewHtml}</div></td><td class="color-hex" onclick="copyColorSchemeCode('${scheme.colors[0]}', this)" title="点击复制">${scheme.colors[0]}</td><td class="color-hex" onclick="copyColorSchemeCode('${scheme.colors[1]}', this)" title="点击复制">${scheme.colors[1]}</td><td class="color-hex" onclick="copyColorSchemeCode('${scheme.colors[2]}', this)" title="点击复制">${scheme.colors[2]}</td><td class="color-hex" onclick="copyColorSchemeCode('${scheme.colors[3]}', this)" title="点击复制">${scheme.colors[3]}</td>`;tableBody.appendChild(row)});// 更新计数 const countElement=document.getElementById('colorschemeCount');if (countElement){countElement.textContent=`共 ${colorSchemes.length}种配色`}}// 复制配色方案代码 function copyColorSchemeCode(hexCode,element){navigator.clipboard.writeText(hexCode).then(()=>{showCopySuccess(element)}).catch(err=>{console.error('复制失败:',err)})}// 配色方案搜索功能 function setupColorSchemeSearch(){const searchInput=document.getElementById('colorschemeSearch');const clearButton=document.getElementById('colorschemeClear');const table=document.getElementById('colorschemeTable');if (!searchInput || !clearButton || !table) return;function performSearch(){const searchTerm=searchInput.value.toLowerCase().trim();const rows=table.querySelectorAll('tbody tr');rows.forEach(row=>{const cells=row.querySelectorAll('td');let shouldShow=false;cells.forEach(cell=>{const text=cell.textContent.toLowerCase();if (text.includes(searchTerm)){shouldShow=true}});row.style.display=shouldShow ? '':'none'})}searchInput.addEventListener('input',performSearch);clearButton.addEventListener('click',()=>{searchInput.value='';performSearch();searchInput.focus()})}// 修改 initTabs 函数，添加配色方案标签 function initTabs(){const tabButtons=document.querySelectorAll('.tab-btn');const tabContents=document.querySelectorAll('.tab-content');tabButtons.forEach(button=>{button.addEventListener('click',()=>{const targetTab=button.getAttribute('data-tab');// 移除所有活动状态 tabButtons.forEach(btn=>btn.classList.remove('active'));tabContents.forEach(content=>content.classList.remove('active'));// 添加活动状态 button.classList.add('active');const targetContent=document.getElementById(targetTab+'-tab');if (targetContent){targetContent.classList.add('active')}// 懒加载内容 if (targetTab==='websafe' && !document.querySelector('#websafeTableBody tr')){generateWebSafeColors();setupWebSafeColorSearch()}else if (targetTab==='cssnames' && !document.querySelector('#cssnamesTableBody tr')){generateCSSColorNames();setupCSSColorSearch()}else if (targetTab==='traditional' && !document.querySelector('#traditionalTableBody tr')){generateTraditionalColors();setupTraditionalColorSearch()}else if (targetTab==='japanese' && !document.querySelector('#japaneseTableBody tr')){generateJapaneseColors();setupJapaneseColorSearch()}else if (targetTab==='gradient' && !document.querySelector('#gradientTableBody tr')){generateGradientColors();setupGradientColorSearch()}else if (targetTab==='colorscheme' && !document.querySelector('#colorschemeTableBody tr')){generateColorSchemes();setupColorSchemeSearch()}})})}.color-preview-cell{text-align:center;padding:10px;min-width:200px}.color-blocks-container{display:flex;gap:4px;justify-content:center;align-items:center;flex-wrap:wrap}.color-block{width:45px;height:45px;border-radius:6px;border:1px solid var(--border-color);cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 4px rgb(0 0 0 / .1);flex-shrink:0}.color-block:hover{transform:scale(1.1);box-shadow:0 4px 8px rgb(0 0 0 / .2);border-color:var(--text-primary)}#colorschemeTable .color-hex{cursor:pointer;font-family:'Courier New',monospace;font-weight:600;text-align:center;transition:all 0.3s ease;padding:12px 8px}#colorschemeTable .color-hex:hover{background-color:var(--bg-tertiary);color:var(--text-primary);transform:translateY(-1px)}#colorschemeTable th:nth-child(1),#colorschemeTable td:nth-child(1){width:200px;min-width:200px}#colorschemeTable th:nth-child(2),#colorschemeTable th:nth-child(3),#colorschemeTable th:nth-child(4),#colorschemeTable th:nth-child(5),#colorschemeTable td:nth-child(2),#colorschemeTable td:nth-child(3),#colorschemeTable td:nth-child(4),#colorschemeTable td:nth-child(5){width:120px;min-width:120px}@media (max-width:768px){.color-blocks-container{gap:2px}.color-block{width:35px;height:35px}.color-preview-cell{min-width:150px}#colorschemeTable th:nth-child(1),#colorschemeTable td:nth-child(1){width:150px;min-width:150px}#colorschemeTable th:nth-child(2),#colorschemeTable th:nth-child(3),#colorschemeTable th:nth-child(4),#colorschemeTable th:nth-child(5),#colorschemeTable td:nth-child(2),#colorschemeTable td:nth-child(3),#colorschemeTable td:nth-child(4),#colorschemeTable td:nth-child(5){width:100px;min-width:100px}}.faq-section{padding:60px 0;background:var(--bg-secondary)}.faq-container{max-width:800px;margin:0 auto}.faq-item{background:var(--bg-primary);border-radius:12px;margin-bottom:20px;box-shadow:0 4px 15px var(--shadow-color);overflow:hidden;transition:all 0.3s ease;border:1px solid var(--border-color)}.faq-item:hover{transform:translateY(-5px);box-shadow:0 8px 25px var(--shadow-color);border-color:#667eea}.faq-header{padding:20px 25px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);transition:all 0.3s ease;user-select:none}.faq-header:hover{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%)}.faq-header h3{margin:0;color:var(--text-primary);font-size:1.2rem;font-weight:600;transition:color 0.3s ease}.faq-toggle{font-size:1.5rem;font-weight:700;color:#667eea;transition:all 0.3s ease;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgb(102 126 234 / .1)}.faq-item.active .faq-toggle{transform:rotate(45deg);background:rgb(102 126 234 / .2)}.faq-content{padding:0 25px;max-height:0;overflow:hidden;transition:all 0.4s ease;background:var(--bg-primary)}.faq-item.active .faq-content{padding:20px 25px;max-height:500px}.faq-content p{margin-bottom:15px;color:var(--text-secondary);line-height:1.7}.faq-content p:last-child{margin-bottom:0}.faq-content strong{color:var(--text-primary);font-weight:600}@media (max-width:768px){.faq-section{padding:40px 0}.faq-header{padding:15px 20px}.faq-header h3{font-size:1.1rem}.faq-content{padding:0 20px}.faq-item.active .faq-content{padding:15px 20px}.faq-item:hover{transform:translateY(-2px)}}.design-guide-section{padding:80px 0;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-primary) 100%)}.guide-intro{text-align:center;max-width:800px;margin:0 auto 60px;padding:30px;background:var(--bg-primary);border-radius:15px;box-shadow:0 8px 25px var(--shadow-color);border:1px solid var(--border-color)}.guide-intro p{font-size:1.1rem;line-height:1.8;color:var(--text-secondary);margin:0}.guide-section{margin-bottom:60px;background:var(--bg-primary);border-radius:15px;padding:40px;box-shadow:0 6px 20px var(--shadow-color);border:1px solid var(--border-color);transition:all 0.3s ease}.guide-section:hover{transform:translateY(-5px);box-shadow:0 12px 35px var(--shadow-color)}.guide-section-title{color:var(--text-primary);font-size:1.8rem;font-weight:700;margin-bottom:20px;padding-bottom:15px;border-bottom:3px solid #667eea;position:relative}.guide-section-title::after{content:'';position:absolute;bottom:-3px;left:0;width:60px;height:3px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px}.guide-description{font-size:1.1rem;color:var(--text-secondary);margin-bottom:30px;line-height:1.7}.color-psychology-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;margin-bottom:30px}.psychology-card{background:var(--bg-secondary);border-radius:12px;padding:25px;text-align:center;transition:all 0.3s ease;border:1px solid var(--border-color);position:relative;overflow:hidden}.psychology-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2)}.psychology-card:hover{transform:translateY(-8px);box-shadow:0 15px 30px var(--shadow-color)}.color-sample{width:80px;height:80px;border-radius:50%;margin:0 auto 20px;box-shadow:0 4px 15px rgb(0 0 0 / .2);transition:all 0.3s ease}.psychology-card:hover .color-sample{transform:scale(1.1);box-shadow:0 8px 25px rgb(0 0 0 / .3)}.psychology-card h4{color:var(--text-primary);font-size:1.3rem;font-weight:600;margin-bottom:15px}.psychology-card p{color:var(--text-secondary);line-height:1.6;margin-bottom:10px;font-size:.95rem}.psychology-card p:last-child{margin-bottom:0}.color-schemes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}.scheme-card{background:var(--bg-secondary);border-radius:12px;padding:25px;transition:all 0.3s ease;border:1px solid var(--border-color)}.scheme-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px var(--shadow-color)}.scheme-card h4{color:var(--text-primary);font-size:1.2rem;font-weight:600;margin-bottom:15px}.scheme-preview{display:flex;gap:8px;margin-bottom:20px;justify-content:center}.scheme-color{width:50px;height:50px;border-radius:8px;box-shadow:0 2px 8px rgb(0 0 0 / .15);transition:all 0.3s ease}.scheme-color:hover{transform:scale(1.1);box-shadow:0 4px 15px rgb(0 0 0 / .25)}.scheme-card p{color:var(--text-secondary);line-height:1.6;margin-bottom:10px;font-size:.95rem}.design-tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}.tip-card{background:var(--bg-secondary);border-radius:12px;padding:25px;transition:all 0.3s ease;border:1px solid var(--border-color);text-align:center}.tip-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px var(--shadow-color)}.tip-icon{font-size:2.5rem;margin-bottom:15px}.tip-card h4{color:var(--text-primary);font-size:1.2rem;font-weight:600;margin-bottom:15px}.tip-card ul{list-style:none;padding:0;margin:0;text-align:left}.tip-card li{color:var(--text-secondary);line-height:1.6;margin-bottom:8px;padding-left:20px;position:relative;font-size:.95rem}.tip-card li::before{content:'•';color:#667eea;font-weight:700;position:absolute;left:0}.case-studies-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px}.case-card{background:var(--bg-secondary);border-radius:12px;padding:25px;transition:all 0.3s ease;border:1px solid var(--border-color)}.case-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px var(--shadow-color)}.case-card h4{color:var(--text-primary);font-size:1.2rem;font-weight:600;margin-bottom:15px}.case-colors{display:flex;gap:10px;margin-bottom:20px;justify-content:center}.case-color{width:40px;height:40px;border-radius:8px;box-shadow:0 2px 8px rgb(0 0 0 / .15);transition:all 0.3s ease;cursor:pointer}.case-color:hover{transform:scale(1.2);box-shadow:0 4px 15px rgb(0 0 0 / .25)}.case-card ul{list-style:none;padding:0;margin:0}.case-card li{color:var(--text-secondary);line-height:1.6;margin-bottom:8px;padding-left:20px;position:relative;font-size:.95rem}.case-card li::before{content:'▶';color:#667eea;font-size:.8rem;position:absolute;left:0;top:2px}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.summary-item{background:var(--bg-secondary);border-radius:12px;padding:20px;text-align:center;transition:all 0.3s ease;border:1px solid var(--border-color)}.summary-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px var(--shadow-color)}.summary-icon{font-size:2rem;margin-bottom:10px}.summary-item p{color:var(--text-secondary);line-height:1.6;margin:0;font-size:.95rem}.guide-conclusion{text-align:center;padding:30px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;color:#fff}.guide-conclusion p{font-size:1.2rem;font-weight:600;margin:0}.guide-note{background:rgb(102 126 234 / .1);border-left:4px solid #667eea;padding:20px;border-radius:8px;margin-top:20px}.guide-note p{color:var(--text-secondary);margin:0;font-style:italic}@media (max-width:768px){.design-guide-section{padding:40px 0}.guide-section{padding:25px 20px;margin-bottom:40px}.guide-section-title{font-size:1.5rem}.color-psychology-grid,.color-schemes-grid,.design-tips-grid,.case-studies-grid{grid-template-columns:1fr;gap:20px}.psychology-card,.scheme-card,.tip-card,.case-card{padding:20px}.color-sample{width:60px;height:60px}.scheme-color{width:40px;height:40px}.case-color{width:35px;height:35px}.summary-grid{grid-template-columns:1fr}}.ai-tools-section{margin:20px 0;display:flex;gap:15px;flex-wrap:wrap;justify-content:center;align-items:center}.ai-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:500;transition:all 0.3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgb(0 0 0 / .1);border:1px solid #fff0;position:relative;overflow:hidden}.ai-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left 0.5s}.ai-btn:hover::before{left:100%}.ai-btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.ai-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgb(102 126 234 / .4);color:#fff}.ai-btn-secondary{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff}.ai-btn-secondary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgb(240 147 251 / .4);color:#fff}.ai-btn-tertiary{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff}.ai-btn-tertiary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgb(79 172 254 / .4);color:#fff}.btn-icon{font-size:16px;display:inline-block}.btn-text{white-space:nowrap}@media (max-width:768px){.ai-tools-section{flex-direction:column;gap:10px}.ai-btn{width:100%;max-width:280px;justify-content:center}}@media (max-width:480px){.ai-btn{padding:10px 16px;font-size:13px}.btn-icon{font-size:14px}}