.color-name-mini,.palette-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:root{--bg-main:#181a1b;--bg-secondary:#23272b;--bg-glass:rgba(36, 39, 46, 0.7);--bg-glass-strong:rgba(36, 39, 46, 0.92);--border-main:#333a40;--border-light:#444b52;--text-main:#f3f6fa;--text-secondary:#bfc9d1;--accent:#3399ff;--accent-hover:#1976d2;--shadow:0 4px 20px 3px rgba(0, 0, 0, 0.45);--shadow-strong:0 8px 32px rgba(0, 0, 0, 0.7);--shadow-soft:0 4px 20px rgba(0, 0, 0, 0.3);--primary:#3399ff;--primary-dark:#1976d2;--primary-light:#66b3ff;--secondary:#17203c;--dark-bg:#0d1117;--success:#28a745;--warning:#ffc107;--danger:#dc3545;--gray:#6c757d;--radius:16px;--radius-sm:8px;--radius-lg:24px;--transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);--transition-slow:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);--gradient-primary:linear-gradient(135deg, #3399ff 0%, #1976d2 100%);--gradient-secondary:linear-gradient(135deg, var(--secondary) 0%, #2d3748 100%)}.copy-icon,.detail-color-box{display:flex;transition:var(--transition)}.palette-detail-section{padding:40px 20px;max-width:1200px;margin:0 auto}.palette-detail-container{background:var(--bg-glass);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--border-main);box-shadow:var(--shadow-soft);border-radius:var(--radius);padding:40px;margin-bottom:40px}.palette-detail-header,.section-title{text-align:center;margin-bottom:40px}.palette-detail-header h2{font-size:2.5rem;color:var(--text-main);margin-bottom:15px;display:flex;align-items:center;justify-content:center;gap:15px}.palette-detail-header p{color:var(--text-secondary);font-size:1.1rem;max-width:800px;margin:0 auto}.palette-detail-colors{display:flex;justify-content:center;align-items:stretch;gap:20px;margin-bottom:40px;flex-wrap:wrap}.detail-color-box{flex:1;min-width:150px;max-width:200px;height:200px;border-radius:var(--radius);flex-direction:column;justify-content:space-between;padding:20px;color:#fff;position:relative;overflow:hidden;cursor:pointer;box-shadow:var(--shadow)}.detail-color-box:hover{transform:translateY(-10px);box-shadow:var(--shadow-strong)}.color-strip-item.dark-text .hex-display,.detail-color-box.dark-text{color:#333}.color-info{text-align:left}.color-hex{font-size:1.5rem;font-weight:700;margin-bottom:5px;text-shadow:0 2px 4px rgba(0,0,0,.3)}.color-name{font-size:1rem;opacity:.9;color:var(--text-secondary)}.code-value,.format-dropdown-btn{font-family:'JetBrains Mono','Fira Code',monospace;font-size:.9rem}.copy-icon{position:absolute;bottom:15px;right:15px;background:rgba(255,255,255,.2);width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;backdrop-filter:blur(10px);opacity:0}.color-strip-item:hover .color-format-dropdown,.detail-color-box:hover .copy-icon{opacity:1}.color-details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:40px}.color-detail-card{background:var(--bg-glass);backdrop-filter:blur(10px);border-radius:var(--radius);padding:20px;text-align:left;border:1px solid var(--border-main)}.color-info-mini,.format-option i,.hex-display,.loading-detail,.palette-header{text-align:center}.color-detail-card h4{color:var(--text-main);margin-bottom:15px;display:flex;align-items:center;gap:10px}.color-codes{display:flex;flex-direction:column;gap:10px}.code-item{display:flex;justify-content:space-between;align-items:center;padding:10px;background:rgba(255,255,255,.1);border-radius:var(--radius-sm)}.code-label{font-weight:600;color:var(--text-main)}.code-value{color:var(--text-secondary)}.back-button,.copy-code-btn{background:var(--gradient-primary);color:#fff;transition:var(--transition)}.copy-code-btn{border:none;padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:.8rem}.copy-code-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.related-palettes-section{margin-top:60px}.section-title h3{font-size:2rem;color:var(--text-main);margin-bottom:10px}.section-title p{color:var(--text-secondary);max-width:600px;margin:0 auto}.back-button{display:inline-flex;align-items:center;gap:10px;padding:12px 25px;text-decoration:none;border-radius:var(--radius);font-weight:600;margin-bottom:30px}.back-button:hover{transform:translateY(-3px);box-shadow:var(--shadow-strong)}.loading-detail{padding:80px;font-size:1.3rem;color:var(--text-secondary)}.loading-detail i{display:block;font-size:3rem;margin-bottom:20px;color:var(--primary)}.palette-visualization-section{margin-bottom:40px;position:relative;z-index:1}.palette-visualization-container{background:var(--bg-glass);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--border-main);box-shadow:var(--shadow-soft);border-radius:var(--radius);padding:30px}.palette-visualization-loading{text-align:center;padding:40px;color:var(--text-secondary);font-size:1.1rem}.palette-visualization-loading i{display:block;font-size:2.5rem;margin-bottom:15px;color:var(--primary)}.connected-palette{display:flex;flex-direction:column;align-items:center;gap:0;max-width:100%;margin:0 auto}.palette-header{margin-bottom:30px;width:100%}.palette-header h2{font-size:2rem;color:var(--text-main);margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:15px}.palette-header p{color:var(--text-secondary);font-size:1rem}.palette-main-container{width:100%;position:relative}.color-strip-container{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;margin:0 auto}.color-strip-row{display:flex;justify-content:flex-start;align-items:center;width:100%;position:relative}.color-strip-item{width:280px;height:500px;position:relative;display:flex;align-items:center;justify-content:center;transition:var(--transition);cursor:pointer}.color-strip-row:first-child .color-strip-item:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.color-strip-row:first-child .color-strip-item:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.color-strip-row:last-child .color-strip-item:first-child,.color-strip-row:only-child .color-strip-item:first-child{border-bottom-left-radius:8px}.color-strip-row:last-child .color-strip-item:last-child,.color-strip-row:only-child .color-strip-item:last-child{border-bottom-right-radius:8px}.color-strip-item:hover{z-index:10}.hex-display{position:absolute;bottom:50px;left:0;right:0;z-index:2;color:#fff;font-family:'JetBrains Mono','Fira Code',monospace;font-weight:600;font-size:1.2rem;letter-spacing:1px;transition:var(--transition);padding:8px;backdrop-filter:blur(10px)}.color-format-dropdown{position:absolute;top:15px;right:45px;z-index:3;opacity:0;transition:opacity .3s;display:flex;align-items:center;gap:5px}.format-dropdown-btn{background:rgba(255,255,255,.9);border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:5px;transition:.3s;color:#333;box-shadow:0 2px 5px rgba(0,0,0,.2)}#palette-menu,.format-dropdown-menu{position:absolute;background:var(--bg-glass-strong);display:none}.color-hex-mini,.format-option{font-family:'JetBrains Mono','Fira Code',monospace;color:var(--text-main);font-size:.9rem}.color-strip-item.dark-text .format-dropdown-btn{background:rgba(0,0,0,.8);color:#fff}.format-dropdown-btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.3)}.color-strip-item.dark-text .format-dropdown-btn:hover{background:rgba(0,0,0,.9)}.format-dropdown-btn i{font-size:.8rem;transition:transform .3s}.format-dropdown-btn.active i{transform:rotate(180deg)}.format-dropdown-menu{top:45px;right:15px;backdrop-filter:blur(20px);border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.2);z-index:10000!important;min-width:180px;flex-direction:column;border:1px solid var(--border-main)}.format-dropdown-menu.show{display:flex}.format-option{padding:10px 15px;cursor:pointer;transition:.3s;border-bottom:1px solid var(--border-main);display:flex;align-items:center;gap:10px;z-index:1000!important}.menu-option,.palette-menu-toggle{cursor:pointer;transition:var(--transition)}.format-option:last-child,.menu-option:last-child{border-bottom:none}.format-option:hover,.menu-option:hover{background:var(--gradient-primary);color:#fff;transform:translateX(5px)}.format-option.active{background:var(--gradient-primary);color:#fff;font-weight:600}.format-option i{width:20px}.color-preview{width:40px;height:40px;border-radius:50%;margin:0 auto 10px;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.1)}.color-hex-mini{font-weight:600;margin-bottom:5px}.color-name-mini{font-size:.8rem;color:var(--text-secondary)}@media (max-width:1100px){.color-strip-item{width:180px}}@media (max-width:1000px){.color-strip-item{width:160px}.color-detail-item{min-width:calc(25% - 8px);max-width:calc(25% - 8px)}.format-dropdown-menu{min-width:160px}}@media (max-width:768px){.palette-detail-colors{flex-direction:column;align-items:center}.detail-color-box{min-width:100%;max-width:100%;height:150px}.palette-detail-header h2{font-size:2rem}.color-strip-item{width:120px;height:400px}.hex-display{font-size:1rem;padding:6px;bottom:40px}.format-dropdown-btn{padding:4px 8px;font-size:.8rem}.color-detail-item{min-width:calc(33.333% - 8px);max-width:calc(33.333% - 8px)}}@media (max-width:550px){.palette-detail-container{padding:25px}.palette-detail-header h2{font-size:1.8rem}.color-details-grid{grid-template-columns:1fr}.color-strip-item{width:100px;height:300px}.hex-display{font-size:.9rem;padding:5px;bottom:35px}.format-dropdown-btn{padding:3px 6px;font-size:.7rem}.color-detail-item{min-width:calc(50% - 8px);max-width:calc(50% - 8px)}.palette-header h2{font-size:1.5rem}}@media (max-width:400px){.color-strip-item{width:80px;height:250px}.hex-display{font-size:.8rem;padding:4px;bottom:30px}.format-dropdown-btn{padding:2px 4px;font-size:.6rem}}#palette-menu{width:220px;backdrop-filter:blur(30px);border-radius:var(--radius);box-shadow:0 15px 50px rgba(0,0,0,.2);z-index:1000;flex-direction:column;overflow:hidden;border:1px solid var(--border-main)}.menu-option{padding:15px 20px;border-bottom:1px solid var(--border-main);color:var(--text-main);font-weight:500;display:flex;align-items:center;gap:10px}.palette-menu-toggle{font-size:1.8rem;padding:8px;line-height:1;color:var(--text-secondary);border-radius:6px;flex-shrink:0;margin-left:10px}.palette-menu-toggle:hover{color:var(--primary);background:rgba(25,118,210,.1);transform:rotate(90deg)}.palette-title-container{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:12px}.palette-title{flex-grow:1;font-weight:700;color:var(--text-main);font-size:1.2rem;text-align:left}.section-header-wrapper{text-align:center;margin-bottom:2.5rem;padding:0 1rem}.section-header-wrapper h2{font-size:2rem;font-weight:700;color:var(--text-main);margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;gap:.75rem}.section-header-wrapper h2 i{color:var(--primary);font-size:1.75rem}.section-subtitle{font-size:1.125rem;color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:1.6}.collaboration-subsection h4,.color-usage-subsection h4,.contrast-subsection h4,.export-subsection h4,.professional-export-subsection h4,.usage-subsection h4{font-size:1.1rem;font-weight:600;color:var(--text-main);margin-top:1.25rem;margin-bottom:.75rem;line-height:1.4}.footer-column-title{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--text-main)}@media (max-width:768px){.section-header-wrapper h2{font-size:1.75rem}.section-subtitle{font-size:1rem}.footer-column-title{font-size:1.1rem}}