:root{--background-color: #f8f9fa;--panel-background-color: #ffffff;--text-primary-color: #212529;--text-secondary-color: #6c757d;--border-color: #dee2e6;--accent-color: #007bff;--accent-color-hover: #0056b3;--favorite-color: #ffc107;--font-family: "Inter", sans-serif;--border-radius: 8px;--shadow: 0 4px 6px rgba(0, 0, 0, .05)}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--text-primary-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{display:flex;flex-direction:column;min-height:100vh;padding:1.5rem;width:100%}.app-container{display:flex;flex-direction:column;flex-grow:1;gap:1.5rem}.app-header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.app-header h1{font-size:1.75rem;font-weight:700}.search-container{position:relative;width:300px}.search-input{width:100%;padding:10px 40px 10px 12px;border-radius:var(--border-radius);border:1px solid var(--border-color);font-size:1rem;font-family:var(--font-family);transition:border-color .2s,box-shadow .2s}.search-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #007bff33}.search-button{position:absolute;right:1px;top:1px;bottom:1px;width:38px;background:transparent;border:none;border-radius:0 var(--border-radius) var(--border-radius) 0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary-color);transition:color .2s,background-color .2s}.search-button:hover{color:var(--accent-color);background-color:#e9ecef}.search-button svg{width:18px;height:18px}.search-hint{position:absolute;top:100%;left:0;width:100%;margin-top:4px;font-size:.75rem;color:var(--text-secondary-color);opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.search-hint.visible{opacity:1}.main-content{display:flex;flex-grow:1;gap:1.5rem;overflow:hidden}.palette-container{display:flex;flex-direction:row;flex-grow:1;gap:1.5rem;background-color:var(--panel-background-color);border-radius:var(--border-radius);box-shadow:var(--shadow);padding:1.5rem;min-width:0}.family-nav{display:flex;flex-direction:column;width:100px;flex-shrink:0}.family-list-container{display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;padding:4px;margin:-4px}.family-list-container::-webkit-scrollbar{width:6px}.family-list-container::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:3px}.family-button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:1px 4px 1px 12px;border-radius:4px;border:1px solid transparent;background-color:transparent;cursor:pointer;transition:background-color .2s;width:100%;flex-shrink:0}.family-button:hover{background-color:#f8f9fa}.family-button.active{background-color:transparent;box-shadow:none}.family-swatch{width:32px;height:14px;border-radius:2px;border:1px solid transparent;flex-shrink:0;transition:box-shadow .2s}.family-swatch.neutral-swatch{border:1px solid var(--border-color)}.family-name{line-height:1.2;font-weight:500;font-size:.85rem;color:var(--text-secondary-color);transition:color .2s,font-weight .2s}.family-button.active .family-name{color:var(--text-primary-color);font-weight:700}.family-button.active .family-swatch{box-shadow:0 0 0 1px var(--panel-background-color),0 0 0 2px var(--text-secondary-color)}.family-button.main-family-button{margin-top:8px;padding-left:4px}.family-button.main-family-button:first-child{margin-top:0}.family-button.main-family-button .family-name{font-size:1.1rem;font-weight:700;color:var(--text-primary-color)}.grid-container{display:grid;grid-template-columns:30px repeat(10,1fr);grid-template-rows:20px repeat(10,1fr);gap:4px;flex-grow:1;min-height:0}.grid-label{display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:500;color:var(--text-secondary-color);transition:all .2s ease-in-out}.grid-label.active{font-weight:700;color:var(--accent-color);background-color:#007bff1a;border-radius:4px}.color-swatch-wrapper{position:relative;width:100%;height:100%}.color-swatch{width:100%;height:100%;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease-out,box-shadow .15s ease-out;position:relative}@media (hover: hover){.color-swatch-wrapper:hover .color-swatch{transform:scale(1.1);z-index:10;box-shadow:0 4px 8px #00000026}}.color-swatch.selected{border:2px solid var(--accent-color);box-shadow:0 0 0 2px var(--panel-background-color),0 0 0 4px var(--accent-color);z-index:5}.details-panel{flex-shrink:0;width:320px;background-color:var(--panel-background-color);border-radius:var(--border-radius);box-shadow:var(--shadow);padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}@keyframes placeholder-reveal{0%{opacity:1;z-index:2}60%{opacity:1;z-index:2}to{opacity:0;z-index:-1}}@keyframes content-reveal{0%{opacity:0}60%{opacity:0}to{opacity:1}}.details-panel .details-name,.details-panel .info-item .label,.details-panel .info-item .value-container{position:relative}.details-panel .details-name:before,.details-panel .info-item .label:before,.details-panel .info-item .value-container:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:#e9ecef;border-radius:4px;animation:placeholder-reveal .3s ease-out forwards}.details-panel .details-name,.details-panel .details-header .favorite-toggle-button,.details-panel .info-item .label,.details-panel .info-item .value-container>*{animation:content-reveal .3s ease-out}.details-main{display:flex;flex-direction:column;gap:1.5rem}.details-preview{width:100%;height:150px;border-radius:var(--border-radius);border:1px solid var(--border-color)}.details-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.details-name{font-size:1.25rem;font-weight:700;word-break:break-all}.details-info{display:flex;flex-direction:column;gap:1rem}.info-item{display:flex;justify-content:space-between;align-items:center}.info-item .label{font-weight:600;color:var(--text-primary-color)}.info-item .value-container{display:flex;align-items:center;gap:8px;font-family:monospace;font-size:1rem;color:var(--text-secondary-color);background-color:#f8f9fa;padding:4px 8px;border-radius:4px}.copy-button{background:none;border:none;cursor:pointer;color:var(--text-secondary-color);display:flex;align-items:center;padding:2px;border-radius:4px}.copy-button:hover{color:var(--text-primary-color);background-color:#e9ecef}.copy-button svg{width:16px;height:16px}.favorite-toggle-button{background:none;border:none;cursor:pointer;padding:0;color:var(--text-secondary-color);transition:color .2s,transform .2s}.favorite-toggle-button:hover{color:var(--favorite-color);transform:scale(1.1)}.favorite-toggle-button svg{width:20px;height:20px;stroke:var(--favorite-color)}.favorite-toggle-button svg[fill=currentColor]{color:var(--favorite-color)}.details-header .favorite-toggle-button svg{width:24px;height:24px}.color-swatch-wrapper .favorite-toggle-button{position:absolute;top:2px;right:2px;z-index:15;background-color:#ffffffb3;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-out}@media (hover: hover){.color-swatch-wrapper:hover .favorite-toggle-button,.color-swatch-wrapper .favorite-toggle-button[aria-label*=Удалить]{opacity:1}}.color-swatch-wrapper .favorite-toggle-button svg{width:14px;height:14px}.search-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#21252980;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.search-modal-content{background:var(--panel-background-color);border-radius:var(--border-radius);box-shadow:0 8px 32px #0000001a;padding:2rem;position:relative;width:100%;max-width:600px;max-height:80vh;display:flex;flex-direction:column}.search-modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;cursor:pointer;color:var(--text-secondary-color);padding:0}.search-modal-close:hover{color:var(--text-primary-color)}.search-modal-close svg{width:24px;height:24px}.search-results-list{display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;margin-right:-1rem;padding-right:1rem}.search-result-item{display:grid;grid-template-columns:40px 1fr min-content;align-items:center;gap:1rem;padding:.5rem;border-radius:var(--border-radius);cursor:pointer;transition:background-color .2s}.search-result-item:hover{background-color:#e9ecef}.search-result-swatch{width:40px;height:40px;border-radius:4px;border:1px solid var(--border-color)}.search-result-info .name{font-weight:600}.search-result-info .hex{font-size:.875rem;color:var(--text-secondary-color)}.search-result-distance{font-size:.8rem;color:var(--text-secondary-color);font-family:monospace;white-space:nowrap}.search-empty-message{color:var(--text-secondary-color);text-align:center;padding:2rem}.favorites-panel{border-top:1px solid var(--border-color);padding-top:1.5rem;display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.favorites-panel h3{font-size:1.1rem;font-weight:600}.favorites-list{overflow-y:auto;flex-grow:1;display:flex;flex-direction:column;gap:.5rem}.favorite-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:var(--border-radius);cursor:pointer;transition:background-color .2s}.favorite-item:hover{background-color:#e9ecef}.favorite-item-swatch{width:24px;height:24px;border-radius:4px;border:1px solid var(--border-color);flex-shrink:0}.favorite-item-name{flex-grow:1;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.favorite-remove-button{background:none;border:none;cursor:pointer;color:var(--text-secondary-color);display:flex;align-items:center;padding:2px;border-radius:4px;flex-shrink:0}.favorite-remove-button:hover{color:var(--text-primary-color);background-color:#dee2e6}.favorite-remove-button svg{width:14px;height:14px}.favorites-empty-message{color:var(--text-secondary-color);font-size:.875rem;text-align:center;padding:2rem 0}@media (min-width: 1025px){.grid-container{grid-template-rows:20px repeat(10,100px)}}@media (max-width: 1024px){.main-content{flex-direction:column;overflow:visible}.palette-container{flex-direction:column;gap:1rem;min-height:580px}.grid-container{order:2}.family-nav{order:1;width:100%;flex-direction:row}.family-list-container{flex-direction:row;overflow-x:auto;overflow-y:hidden;height:auto;padding:4px;margin:-4px}.family-button{width:auto}.family-button.main-family-button{margin-top:0;margin-left:12px}.family-button.main-family-button:first-child{margin-left:0}.details-panel{width:100%}.app-header{flex-direction:column;align-items:flex-start;gap:1rem}.search-container{width:100%}}@media (max-width: 768px){#root{padding:.75rem}.app-container,.palette-container,.details-panel{gap:1rem;padding:1rem}.grid-container{display:flex;flex-wrap:wrap;gap:10px;grid-template-columns:unset;grid-template-rows:unset;align-content:flex-start}.grid-label{display:none}.color-swatch-wrapper{width:calc((100% - 50px) / 6);aspect-ratio:1 / 1;height:auto}.color-swatch-wrapper .favorite-toggle-button{opacity:.6}.color-swatch-wrapper .favorite-toggle-button[aria-label*=Удалить]{opacity:1}}@media (max-width: 480px){.grid-container{gap:8px}.color-swatch-wrapper{width:calc((100% - 24px)/4)}}