.color-detail-page{min-height:100vh;background:#fafafa;display:flex;flex-direction:column;position:relative}.color-detail-container{max-width:1000px;margin:0 auto;padding:6rem 1rem;flex:1;position:relative;z-index:1;width:100%}.color-header-simple{text-align:center;margin-bottom:4rem;padding-top:2rem}.color-name-title{font-size:2.5rem;font-weight:700;color:#1f2937;margin-bottom:.5rem;letter-spacing:-.02em}.color-hex-subtitle{font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:1rem;color:#6b7280;font-weight:500;letter-spacing:.05em}.color-display-card{width:100%;height:600px;border-radius:16px;box-shadow:0 10px 30px #0000001a;margin-bottom:3rem;margin-top:8rem;position:relative;overflow:visible;cursor:pointer;transition:transform .2s ease}.preview-controls-top{position:absolute;top:-60px;left:0;right:0;display:flex;justify-content:flex-end;align-items:flex-end;pointer-events:none;z-index:20;width:100%}.preview-controls-left{display:flex;align-items:flex-end;pointer-events:auto}.preview-controls-right{display:flex;align-items:flex-end;gap:12px;pointer-events:auto}.love-gradient-btn{background:#fff;border:1px solid #e5e7eb;border-radius:10px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:#6b7280;box-shadow:0 4px 12px #0000001a}.love-gradient-btn:hover{color:#e91e63;border-color:#e91e6366;background:#e91e630d;transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.love-gradient-btn.saved{color:#e91e63;border-color:#e91e6380;background:#e91e631a}.love-gradient-btn.saved:hover{background:#e91e6326}.love-gradient-btn:active{transform:scale(.95)}.actions-menu{position:relative}.actions-menu-toggle{background:#fff;border:1px solid #e5e7eb;border-radius:10px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:#6b7280;box-shadow:0 4px 12px #0000001a}.actions-menu-toggle:hover,.actions-menu-toggle.active{color:#374151;border-color:#37415166;background:#3741510d;transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.actions-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;box-shadow:0 8px 32px #00000026;overflow:hidden;z-index:10;min-width:180px}.actions-dropdown .dropdown-item{width:100%;padding:12px 16px;background:none;border:none;text-align:left;cursor:pointer;transition:background-color .15s ease;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;line-height:1.4;color:#374151;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,system-ui,sans-serif}.actions-dropdown .dropdown-item:hover{background:#f3f4f6}.actions-dropdown .dropdown-item:active{background:#e5e7eb}.export-dropdown-container{position:absolute;top:calc(100% + 8px);right:0;z-index:100}.color-display-area{width:100%;height:100%;position:relative}.color-name-above{position:absolute;top:-60px;left:0;font-size:2.5rem;font-weight:700;color:#1f2937;margin:0;line-height:1.1;letter-spacing:-.02em;pointer-events:auto;z-index:20}.color-hex-center-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s ease;z-index:5;pointer-events:auto}.color-hex-hover-text{font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:1.5rem;font-weight:600;letter-spacing:.1em;margin:0;text-transform:uppercase;cursor:pointer}.color-display-card:hover .color-hex-center-overlay{opacity:1}.color-details-section{margin-top:2rem}.fullscreen-color-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;cursor:pointer}.fullscreen-color-info{text-align:center;animation:fadeInUp .5s ease}.fullscreen-color-info h2{font-size:4rem;font-weight:700;margin-bottom:1rem;text-shadow:0 4px 12px rgba(0,0,0,.2)}.fullscreen-color-info p{font-size:2rem;font-family:monospace;margin-bottom:2rem;opacity:.9}.fullscreen-close-btn{background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);border-radius:50px;padding:1rem 2rem;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease}.fullscreen-close-btn:hover{background:#ffffff4d;transform:scale(1.05)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.color-tab-navigation-container{display:flex;justify-content:center;margin-bottom:4rem}.color-tab-navigation{background-color:transparent;padding:.5rem}.color-tab-list{display:flex;gap:.5rem}.color-tab-button{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;border-radius:1rem;font-size:.875rem;font-weight:600;color:#6b7280;transition:all .2s ease;background:transparent;border:2px solid transparent}.color-tab-button:hover{color:#111827;background-color:#f9fafb;border-color:#e5e7eb}.color-tab-button-active{background-color:#fff;color:#4f46e5;box-shadow:0 4px 12px #00000014;border-color:#4f46e5}.color-tab-button-active:hover{color:#4f46e5;background-color:#fff;border-color:#4f46e5}.color-tab-icon{width:1.25rem;height:1.25rem}.color-tab-count{font-size:.75rem;padding:.125rem .5rem;border-radius:9999px}.color-tab-count-active{background-color:#fff3}.color-section-header{text-align:center;margin-bottom:3rem}.color-section-title{font-size:1.875rem;font-weight:700;color:#111827;margin-bottom:1rem}@media (min-width: 1024px){.color-section-title{font-size:2.25rem}}.color-section-description{font-size:1.125rem;color:#4b5563;max-width:42rem;margin:0 auto}.color-name-highlight{font-weight:600}.color-variations-section{padding:0}.color-variation-type-section{margin-bottom:2rem}.color-variation-type-header{margin-bottom:1rem}.color-variation-type-title{font-size:1rem;font-weight:600;color:#374151;margin-bottom:.5rem}.modern-palette-preview{display:flex;height:60px;border-radius:12px;overflow:hidden;margin-bottom:2rem;box-shadow:0 4px 16px #0000001a;position:relative}.modern-preview-color{flex:1;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}.modern-preview-color:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.1) 100%);opacity:0;transition:opacity .2s ease}.modern-preview-color:hover:after{opacity:1}.modern-preview-color:hover{transform:scale(1.2);z-index:10;border-radius:8px}.modern-preview-color.current-color{outline:2px solid rgba(255,255,255,.9);outline-offset:-2px;z-index:5}.current-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:1.2rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.5);z-index:1}.swatch-info{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-weight:600;opacity:0;transition:all .2s ease;z-index:2;text-transform:uppercase;letter-spacing:.05em;pointer-events:auto}.modern-preview-color:hover .swatch-info{opacity:1}.swatch-info{display:flex;align-items:center;justify-content:center;gap:.25rem}.swatch-info:hover{background:#6366f1f2;transform:translate(-50%,-50%) scale(1.05)}.similar-colors-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}@media (min-width: 640px){.similar-colors-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1024px){.similar-colors-grid{grid-template-columns:repeat(4,1fr)}}@media (min-width: 1280px){.similar-colors-grid{grid-template-columns:repeat(6,1fr)}}.similar-color-card{background-color:#fff;border-radius:1.5rem;box-shadow:0 4px 6px #0000000d;border:1px solid #f1f5f9;overflow:hidden;transition:all .3s ease}.similar-color-card:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-4px) scale(1.05)}.similar-color-preview{height:8rem;position:relative;cursor:pointer;overflow:hidden}.similar-color-preview-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.2) 0%,transparent 100%);transition:all .3s ease}.similar-color-card:hover .similar-color-preview-overlay{background:linear-gradient(to top,rgba(0,0,0,.4) 0%,transparent 100%)}.similar-color-preview-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .3s ease}.similar-color-card:hover .similar-color-preview-content{opacity:1}.similar-color-copy-indicator{background-color:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:1rem;padding:.5rem 1rem;display:flex;align-items:center;gap:.5rem}.similar-color-copy-icon{width:1.25rem;height:1.25rem}.similar-color-copy-text{font-size:.875rem;font-weight:500}.similar-color-info{padding:1rem}.similar-color-hex{font-family:monospace;font-size:.875rem;background-color:#f1f5f9;padding:.5rem .75rem;border-radius:.5rem;font-weight:600;width:100%;text-align:left;transition:all .2s ease}.similar-color-hex:hover{background-color:#4f46e5;color:#fff}.color-info-minimal{max-width:600px;margin:0 auto;padding:0}.info-section{margin-bottom:3rem}.info-section:last-child{margin-bottom:0}.info-section-title{font-size:1.125rem;font-weight:600;color:#374151;margin-bottom:1.5rem;text-align:center}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media (min-width: 640px){.info-grid{grid-template-columns:repeat(2,1fr)}}.info-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:1.25rem;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;transition:all .2s ease}.info-item:hover{background:#f1f5f9;border-color:#cbd5e1}.info-label{font-size:.75rem;font-weight:500;color:#64748b;text-transform:uppercase;letter-spacing:.025em}.info-value{font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:.875rem;font-weight:600;color:#1e293b}.info-copy-btn{position:relative;background:none;border:none;cursor:pointer;padding:.25rem;border-radius:6px;transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.info-copy-btn:hover{background:#e2e8f0}.copy-check{color:#059669;animation:checkPop .3s ease}.info-badge{font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:12px;text-transform:uppercase;letter-spacing:.025em}.badge-aaa{background-color:#dcfce7;color:#166534}.badge-aa{background-color:#dbeafe;color:#1e40af}.badge-a{background-color:#fef9c3;color:#854d0e}.badge-fail{background-color:#fee2e2;color:#991b1b}.color-formats-row{display:flex;gap:1rem;justify-content:center;align-items:stretch}@media (max-width: 640px){.color-formats-row{flex-direction:column;gap:.75rem}}.format-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:1.25rem;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;transition:all .2s ease;flex:1;min-width:0}.format-item:hover{background:#f1f5f9;border-color:#cbd5e1}.format-label{font-size:.75rem;font-weight:500;color:#64748b;text-transform:uppercase;letter-spacing:.025em}.format-value{font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:.875rem;font-weight:600;color:#1e293b;position:relative;background:none;border:none;cursor:pointer;padding:.25rem;border-radius:6px;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;word-break:break-all}.format-value:hover{background:#e2e8f0}.color-info-examples-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1.5rem}@media (min-width: 768px){.color-info-examples-grid{grid-template-columns:repeat(2,1fr)}}.color-info-example-title{font-weight:600;color:#374151;margin-bottom:.75rem;display:flex;align-items:center}.color-info-example-icon{width:1rem;height:1rem;margin-right:.5rem}.color-info-code-block{width:100%;text-align:left;font-family:monospace;font-size:.875rem;background-color:#1e293b;color:#86efac;padding:1rem;border-radius:1rem;transition:background-color .2s ease;border:none;cursor:pointer}.color-info-code-block:hover{background-color:#0f172a}.color-info-code-comment{color:#94a3b8}.color-info-code-copied{color:#fff}.color-info-code-hint{opacity:0;font-size:.75rem;color:#94a3b8;margin-top:.5rem;transition:opacity .2s ease}.color-info-code-block:hover .color-info-code-hint{opacity:1}.harmonies-section{padding:0}.harmony-type-section{margin-bottom:2rem}.harmony-type-header{margin-bottom:1rem}.harmony-type-title{font-size:1rem;font-weight:600;color:#374151;margin-bottom:.5rem}.colorblind-section{padding:0}.colorblind-type-section{margin-bottom:2rem}.colorblind-description{font-size:.875rem;color:#6b7280;margin-bottom:1rem;line-height:1.4}.colorblind-preview{display:flex;height:80px;border-radius:12px;overflow:hidden;margin-bottom:1.5rem;box-shadow:0 4px 16px #0000001a;position:relative}.colorblind-color{flex:1;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}.colorblind-color:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.1) 100%);opacity:0;transition:opacity .2s ease}.colorblind-color:hover:after{opacity:1}.colorblind-color:hover{transform:scale(1.1);z-index:10}.colorblind-label{position:absolute;bottom:0;left:0;right:0;background:#000c;color:#fff;padding:.25rem;font-size:.625rem;font-weight:600;text-align:center;opacity:0;transition:opacity .2s ease}.colorblind-color:hover .colorblind-label{opacity:1}.colorblind-hex{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.625rem;font-family:monospace;opacity:0;transition:all .2s ease}.colorblind-color:hover .colorblind-hex{opacity:1}.color-mixing-section{padding:0}.color-mixing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:1rem}.color-mixing-item{background:#fff;border-radius:12px;padding:1rem;box-shadow:0 4px 12px #00000014;transition:all .3s ease}.color-mixing-item:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001f}.mixing-colors-preview{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem;height:60px}.mixing-color-original,.mixing-color-mix,.mixing-color-result{width:40px;height:40px;border-radius:8px;border:2px solid white;box-shadow:0 2px 8px #0000001a;transition:all .2s ease}.mixing-color-result{cursor:pointer;position:relative}.mixing-color-result:hover{transform:scale(1.1);box-shadow:0 4px 12px #0003}.mixing-plus,.mixing-equals{font-size:1.25rem;font-weight:700;color:#6b7280}.mixing-copied-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000b3;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.mixing-info{text-align:center}.mixing-name{font-size:.875rem;font-weight:600;color:#374151;display:block;margin-bottom:.5rem}.mixing-hex{font-family:monospace;font-size:.75rem;background:#f3f4f6;padding:.25rem .5rem;border-radius:4px;color:#4b5563;transition:all .2s ease;cursor:pointer}.mixing-hex:hover{background:#4f46e5;color:#fff}@keyframes blob{0%{transform:translate(0) scale(1)}33%{transform:translate(30px,-50px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}to{transform:translate(0) scale(1)}}@keyframes checkPop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}