@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Caprasimo&display=swap);:root{--color-background:#fff;--color-text:#1a1a1a;--color-text-secondary:#666;--color-border:#e5e5e5;--spacing-unit:8px}body.dark-mode{--color-background:#1a1a1a;--color-text:#fff;--color-text-secondary:#a0a0a0;--color-border:#333}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;background-color:#fff;background-color:var(--color-background);color:#1a1a1a;color:var(--color-text);flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;min-height:100vh;overflow:hidden}.App,body{display:flex}.App{flex:1 1;flex-direction:column;height:100vh}.header{align-items:center;display:flex;justify-content:space-between;padding:24px;padding:calc(var(--spacing-unit)*3);position:relative}.header-left,.header-right{align-items:center;display:flex;flex:1 1}.header-left{justify-content:flex-start}.header-right{gap:8px;gap:calc(var(--spacing-unit));justify-content:flex-end}.header-content{flex:0 0 auto;text-align:center}.header h1{font-family:Caprasimo,serif;font-size:2rem;font-weight:400;margin-bottom:8px;margin-bottom:var(--spacing-unit)}.header p{color:#666;color:var(--color-text-secondary);font-size:.875rem}.menu-button{background:none;border:none;border-radius:4px;color:#1a1a1a;color:var(--color-text);cursor:pointer;padding:8px;padding:var(--spacing-unit);position:relative;transition:background-color .2s ease;z-index:10}.menu-button:first-of-type{margin-left:auto}.menu-button:focus{outline:2px solid #1a1a1a;outline:2px solid var(--color-text);outline-offset:2px}.menu-button:hover{background-color:#0000000d}body.dark-mode .menu-button:hover{background-color:#ffffff1a}.search-filters{display:flex;gap:16px;gap:calc(var(--spacing-unit)*2);margin-bottom:16px;margin-bottom:calc(var(--spacing-unit)*2);padding:16px;padding:calc(var(--spacing-unit)*2)}.filter-select,.search-input{flex:1 1;position:relative}.search-suggestions{background:#fff;background:var(--color-background);border:1px solid #e5e5e5;border:1px solid var(--color-border);border-radius:0 0 8px 8px;border-top:none;box-shadow:0 4px 12px #0000001a;left:0;max-height:200px;overflow-y:auto;position:absolute;right:0;top:100%;z-index:10}.suggestion-item{border-bottom:1px solid #e5e5e5;border-bottom:1px solid var(--color-border);cursor:pointer;font-size:.875rem;padding:12px;padding:calc(var(--spacing-unit)*1.5);transition:background-color .2s ease}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover{background-color:#0000000d}.input-wrapper{align-items:center;display:flex;position:relative}.input-wrapper input,.input-wrapper select{background:#fff;background:var(--color-background);border:1px solid #e5e5e5;border:1px solid var(--color-border);border-radius:8px;font-size:.875rem;padding:12px;padding:calc(var(--spacing-unit)*1.5);width:100%}.clear-button{background:none;border:none;color:#666;color:var(--color-text-secondary);cursor:pointer;padding:8px;padding:var(--spacing-unit);position:absolute;right:8px;right:var(--spacing-unit)}.color-grid{display:flex;gap:0;height:calc(100vh - 200px);margin:0;padding:0}.color-grid,.color-strip{flex:1 1;position:relative}.color-strip{cursor:pointer;height:100%;transition:all .3s ease}.color-strip:hover{flex:1.5 1;min-width:280px}.color-info{background:linear-gradient(0deg,#000c 0,#0006 50%,#0000);bottom:0;color:#fff;left:0;opacity:0;padding:24px;padding:calc(var(--spacing-unit)*3);pointer-events:none;position:absolute;right:0;transition:opacity .3s ease}.color-strip:hover .color-info{opacity:1;pointer-events:all}.color-name{font-size:1.25rem;font-weight:500;margin-bottom:8px;margin-bottom:var(--spacing-unit)}.brand-name{font-size:.875rem;opacity:.8}.brand-name,.color-codes{margin-bottom:16px;margin-bottom:calc(var(--spacing-unit)*2)}.color-codes{grid-gap:4px 16px;grid-gap:calc(var(--spacing-unit)*.5) calc(var(--spacing-unit)*2);display:grid;font-size:.75rem;gap:4px 16px;gap:calc(var(--spacing-unit)*.5) calc(var(--spacing-unit)*2);grid-template-columns:auto 1fr;opacity:.9}.color-actions{margin-top:16px;margin-top:calc(var(--spacing-unit)*2)}.color-actions,.color-button{display:flex;gap:8px;gap:calc(var(--spacing-unit))}.color-button{align-items:center;background:#fff3;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.875rem;padding:8px;padding:var(--spacing-unit);transition:background-color .2s ease}.color-button:hover{opacity:.8}.color-strip.locked{position:relative}.color-strip{cursor:move}.color-strip.drag-over{box-shadow:0 0 0 3px #1a1a1a;box-shadow:0 0 0 3px var(--color-text);transform:scale(1.05)}.color-strip[draggable=true]:active{cursor:grabbing}.lock-indicator{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffffd9;border-radius:50%;box-shadow:0 2px 8px #0000004d;display:flex;height:36px;justify-content:center;left:16px;left:calc(var(--spacing-unit)*2);position:absolute;top:16px;top:calc(var(--spacing-unit)*2);width:36px;z-index:5}body.dark-mode .lock-indicator{background:#000000d9;box-shadow:0 2px 8px #fff3}.lock-indicator:after{background:#000c;border-radius:4px;bottom:-25px;color:#fff;content:"Locked";font-size:.75rem;left:50%;opacity:0;padding:4px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .2s ease;white-space:nowrap}.lock-indicator:hover:after{opacity:1}.remove-color-button{align-items:center;background:#ffffffe6;border:none;border-radius:50%;cursor:pointer;display:flex;height:36px;justify-content:center;opacity:1;position:absolute;right:16px;right:calc(var(--spacing-unit)*2);top:16px;top:calc(var(--spacing-unit)*2);transition:transform .2s ease;width:36px;z-index:5}.remove-color-button:hover{background:#fff;transform:scale(1.1)}.copy-button{background:#fff3;border:none;border-radius:4px;color:#fff;cursor:pointer;opacity:0;padding:8px;padding:var(--spacing-unit);position:absolute;right:8px;right:var(--spacing-unit);top:8px;top:var(--spacing-unit);transition:opacity .3s ease}.color-strip:hover .copy-button{opacity:1}.floating-buttons{bottom:32px;bottom:calc(var(--spacing-unit)*4);display:flex;flex-direction:column;gap:16px;gap:calc(var(--spacing-unit)*2);position:fixed;right:32px;right:calc(var(--spacing-unit)*4);z-index:10}.floating-button{align-items:center;background:#1a1a1a;background:var(--color-text);border:none;border-radius:50%;box-shadow:0 4px 12px #0000001a;color:#fff;cursor:pointer;display:flex;height:48px;justify-content:center;position:relative;transition:transform .2s ease,box-shadow .2s ease;width:48px}.floating-button:hover{box-shadow:0 6px 16px #00000026;transform:scale(1.1)}.floating-button:focus{outline:2px solid #1a1a1a;outline:2px solid var(--color-text);outline-offset:2px}.add-button{height:56px;width:56px}.export-buttons{bottom:32px;bottom:calc(var(--spacing-unit)*4);display:flex;gap:16px;gap:calc(var(--spacing-unit)*2);left:32px;left:calc(var(--spacing-unit)*4);position:fixed;z-index:10}.export-button{align-items:center;background:#fff;border:2px solid #1a1a1a;border:2px solid var(--color-text);border-radius:24px;box-shadow:0 2px 8px #0000001a;color:#1a1a1a;color:var(--color-text);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:8px;gap:calc(var(--spacing-unit));padding:12px 24px;padding:calc(var(--spacing-unit)*1.5) calc(var(--spacing-unit)*3);transition:all .2s ease}.export-button:hover{background:#1a1a1a;background:var(--color-text);box-shadow:0 4px 12px #00000026;color:#fff;transform:translateY(-2px)}.palette-count{align-items:center;background:#f44;border-radius:10px;color:#fff;display:flex;font-size:.75rem;font-weight:600;height:20px;justify-content:center;min-width:20px;position:absolute;right:-4px;top:-4px}.wave-divider{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath d='m0 96 48 16c48 16 144 48 240 48s192-32 288-48 192-16 288 0 192 48 288 48 192-32 240-48l48-16v224H0Z'/%3E%3C/svg%3E");background-size:cover;height:48px;margin-top:auto}.generate-bar{background:#000;padding:16px;padding:calc(var(--spacing-unit)*2);text-align:center}.generate-button{background:#fff;border:none;border-radius:8px;color:#000;cursor:pointer;font-size:1rem;font-weight:500;padding:16px 32px;padding:calc(var(--spacing-unit)*2) calc(var(--spacing-unit)*4);transition:transform .2s ease,box-shadow .2s ease}.generate-button:hover{box-shadow:0 4px 12px #ffffff4d;transform:translateY(-2px)}.generate-button:active{transform:translateY(0)}.desktop-text{display:inline}.mobile-text{display:none}.toast{animation:slideUp .3s ease-out;background:#000000e6;border-radius:8px;bottom:80px;bottom:calc(var(--spacing-unit)*10);color:#fff;font-size:.875rem;left:50%;padding:16px 32px;padding:calc(var(--spacing-unit)*2) calc(var(--spacing-unit)*4);position:fixed;transform:translateX(-50%);z-index:1000}@media (max-width:768px){.search-filters{flex-direction:column}.filter-select{width:100%}.color-strip{min-width:80px}.color-strip:hover{flex:1.5 1}.color-info{padding:16px;padding:calc(var(--spacing-unit)*2)}.color-name{font-size:1.1rem}.color-button{font-size:.875rem;min-height:44px;min-width:44px;padding:12px;padding:calc(var(--spacing-unit)*1.5)}.desktop-text{display:none}.mobile-text{display:inline}.export-buttons,.floating-buttons,.generate-bar,.wave-divider{display:none}.generate-text{font-size:.75rem;padding:12px;padding:calc(var(--spacing-unit)*1.5)}}@media (max-width:600px){.App{height:100vh;overflow:hidden;padding-bottom:70px}.color-grid{flex:1 1;flex-direction:column;height:auto;min-height:auto;overflow-y:auto;padding-bottom:80px}.color-strip{flex:0 0 auto;height:80px;transition:height .3s ease;width:100%}.color-strip:hover{flex:0 0 auto;height:80px;min-width:0;min-width:auto}.color-strip.expanded{flex:0 0 auto;height:240px}.color-info{background:linear-gradient(0deg,#000000b3 0,#0000004d 70%,#0000);opacity:0;padding:16px 24px;padding:calc(var(--spacing-unit)*2) calc(var(--spacing-unit)*3);transition:opacity .3s ease}.color-strip:hover .color-info{opacity:0}.color-strip.expanded .color-info{background:linear-gradient(0deg,#000c 0,#0006 70%,#0000);opacity:1}.color-name{font-size:1rem}.brand-name{font-size:.813rem}.color-codes{display:none}.color-actions{margin-top:8px;margin-top:calc(var(--spacing-unit))}.color-button .desktop-text{display:none}.header{padding:16px;padding:calc(var(--spacing-unit)*2)}.header h1{font-size:1.5rem}.header p{font-size:.813rem}.search-filters{padding:8px;padding:calc(var(--spacing-unit))}.floating-buttons,.search-filters{gap:8px;gap:calc(var(--spacing-unit))}.floating-buttons{bottom:16px;bottom:calc(var(--spacing-unit)*2);right:16px;right:calc(var(--spacing-unit)*2)}.floating-button{height:44px;width:44px}.add-button{height:52px;width:52px}.wave-divider{display:none}.generate-bar{bottom:0;left:0;padding:12px;padding:calc(var(--spacing-unit)*1.5);position:fixed;right:0;z-index:100}.generate-button{font-size:.875rem;max-width:300px;padding:12px 24px;padding:calc(var(--spacing-unit)*1.5) calc(var(--spacing-unit)*3);width:100%}.export-buttons{bottom:16px;bottom:calc(var(--spacing-unit)*2);gap:8px;gap:calc(var(--spacing-unit));left:16px;left:calc(var(--spacing-unit)*2)}.export-button{font-size:.813rem;padding:8px 16px;padding:calc(var(--spacing-unit)) calc(var(--spacing-unit)*2)}.color-expand-button{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;height:36px;justify-content:center;position:absolute;right:16px;right:calc(var(--spacing-unit)*2);top:16px;top:calc(var(--spacing-unit)*2);width:36px;z-index:5}.color-expand-button,.remove-color-button{background:#fffffff2;opacity:1}.remove-color-button.mobile{align-items:center;background:#fffffff2;border:none;border-radius:50%;cursor:pointer;display:flex;height:36px;justify-content:center;left:16px;left:calc(var(--spacing-unit)*2);position:absolute;right:auto;top:16px;top:calc(var(--spacing-unit)*2);width:36px;z-index:5}.lock-indicator{opacity:.9}}.saved-palettes-sidebar{background:#fff;background:var(--color-background);box-shadow:2px 0 10px #0000001a;display:flex;flex-direction:column;height:100vh;left:-400px;position:fixed;top:0;transition:left .3s ease-out;width:400px;z-index:1001}.saved-palettes-sidebar.open{left:0}.sidebar-header{align-items:center;border-bottom:1px solid #e5e5e5;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:24px;padding:calc(var(--spacing-unit)*3)}.sidebar-header h3{font-size:1.25rem;margin:0}.sidebar-content{flex:1 1;overflow-y:auto;padding:16px;padding:calc(var(--spacing-unit)*2)}.empty-message{color:#666;color:var(--color-text-secondary);padding:32px;padding:calc(var(--spacing-unit)*4);text-align:center}.saved-palette-item{align-items:center;background:#00000005;border-radius:8px;cursor:pointer;display:flex;gap:16px;gap:calc(var(--spacing-unit)*2);margin-bottom:16px;margin-bottom:calc(var(--spacing-unit)*2);padding:16px;padding:calc(var(--spacing-unit)*2);transition:background-color .2s ease}.saved-palette-item:hover{background:#0000000d}.palette-preview{border-radius:4px;display:flex;flex-shrink:0;gap:2px;overflow:hidden}.preview-color{height:48px;width:24px}.palette-info{flex:1 1}.palette-name{font-weight:500;margin:0 0 4px;margin:0 0 calc(var(--spacing-unit)*.5) 0}.palette-date{color:#666;color:var(--color-text-secondary);font-size:.875rem;margin:0}.palette-actions{display:flex;gap:4px;gap:calc(var(--spacing-unit)*.5)}.palette-action-button{background:none;border:none;border-radius:4px;color:#666;color:var(--color-text-secondary);cursor:pointer;opacity:.6;padding:6px;padding:calc(var(--spacing-unit)*.75);transition:opacity .2s ease}.palette-action-button:hover{background:#0000000d;opacity:1}.palette-action-button.delete:hover{color:#f44}.palette-edit-input{border:1px solid #e5e5e5;border:1px solid var(--color-border);border-radius:4px;font-size:inherit;font-weight:500;margin-bottom:4px;margin-bottom:calc(var(--spacing-unit)*.5);padding:4px;padding:calc(var(--spacing-unit)*.5);width:100%}.palette-edit-input:focus{border-color:#1a1a1a;border-color:var(--color-text);outline:none}.delete-palette-button{background:none;border:none;color:#666;color:var(--color-text-secondary);cursor:pointer;opacity:.6;padding:8px;padding:var(--spacing-unit);transition:opacity .2s ease}.delete-palette-button:hover{opacity:1}@media (max-width:768px){.saved-palettes-sidebar{left:-100%;width:100%}}.modal-overlay{align-items:center;animation:fadeIn .3s ease-out;background:#000000b3;display:flex;height:100%;justify-content:center;left:0;padding:8px;padding:var(--spacing-unit);position:fixed;top:0;width:100%;z-index:2000}.modal-content{animation:slideUp .3s ease-out;background:#fff;background:var(--color-background);border-radius:12px;display:flex;flex-direction:column;max-height:90vh;max-width:600px;overflow:hidden;width:100%}.modal-header{align-items:center;border-bottom:1px solid #e5e5e5;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:24px;padding:calc(var(--spacing-unit)*3)}.modal-header h2{font-size:1.5rem;margin:0}.modal-body{flex:1 1;overflow-y:auto;padding:24px;padding:calc(var(--spacing-unit)*3)}.modal-body h3{font-size:1.1rem;margin-bottom:16px;margin-bottom:calc(var(--spacing-unit)*2);margin-top:24px;margin-top:calc(var(--spacing-unit)*3)}.modal-body h3:first-child{margin-top:0}.modal-body p{line-height:1.6}.modal-body p,.modal-body ul{margin-bottom:16px;margin-bottom:calc(var(--spacing-unit)*2)}.modal-body ul{padding-left:24px;padding-left:calc(var(--spacing-unit)*3)}.modal-body li{line-height:1.6;margin-bottom:8px;margin-bottom:calc(var(--spacing-unit))}.modal-body kbd{background:#0000001a;border-radius:4px;font-family:monospace;font-size:.9em;padding:2px 6px}body.dark-mode .modal-body kbd{background:#ffffff1a}.palette-name-input{border:2px solid #e5e5e5;border:2px solid var(--color-border);border-radius:8px;font-family:inherit;font-size:1rem;padding:16px;padding:calc(var(--spacing-unit)*2);transition:border-color .2s ease;width:100%}.palette-name-input:focus{border-color:#1a1a1a;border-color:var(--color-text);outline:none}.modal-button{background:#fff;border:1px solid #e5e5e5;border:1px solid var(--color-border);border-radius:6px;cursor:pointer;font-size:.875rem;padding:12px 24px;padding:calc(var(--spacing-unit)*1.5) calc(var(--spacing-unit)*3);transition:all .2s ease}.modal-button:hover{background:#0000000d}.modal-button.primary{background:#1a1a1a;background:var(--color-text);border-color:#1a1a1a;border-color:var(--color-text);color:#fff}.modal-button.primary:hover{background:#000c}.color-detail-actions{display:flex;flex-wrap:wrap;gap:16px;gap:calc(var(--spacing-unit)*2);margin-top:24px;margin-top:calc(var(--spacing-unit)*3)}.color-detail-actions .modal-button{align-items:center;display:flex;flex:1 1;gap:8px;gap:calc(var(--spacing-unit));justify-content:center;min-width:150px}.color-detail-info{margin-bottom:16px;margin-bottom:calc(var(--spacing-unit)*2)}.color-detail-info p{margin-bottom:8px;margin-bottom:calc(var(--spacing-unit))}body.dark-mode .floating-button{border:1px solid #e5e5e5;border:1px solid var(--color-border);color:#1a1a1a;color:var(--color-text)}body.dark-mode .export-button,body.dark-mode .floating-button{background:#fff;background:var(--color-background)}body.dark-mode .suggestion-item:hover{background-color:#ffffff1a}body.dark-mode .saved-palette-item{background:#ffffff0d}body.dark-mode .palette-action-button:hover,body.dark-mode .saved-palette-item:hover{background:#ffffff1a}body.dark-mode .wave-divider{filter:invert(1)}body.dark-mode .generate-bar{background:#fff}body.dark-mode .generate-button{background:#000;color:#fff}body.dark-mode .generate-button:hover{box-shadow:0 4px 12px #0000004d}body.dark-mode .result-item{background:#ffffff0d}body.dark-mode .result-item:hover{background:#ffffff1a}body.dark-mode .result-button:hover{background:#1a1a1a;background:var(--color-text);border-color:#1a1a1a;border-color:var(--color-text);color:#fff;color:var(--color-background)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.mobile-footer-nav{align-items:center;background:#fff;background:var(--color-background);border-top:1px solid #e5e5e5;border-top:1px solid var(--color-border);bottom:0;box-shadow:0 -2px 10px #0000001a;display:flex;height:60px;justify-content:space-around;left:0;padding-top:8px;position:fixed;right:0;z-index:1000}.footer-nav-btn{align-items:center;background:none;border:none;color:#1a1a1a;color:var(--color-text);cursor:pointer;display:flex;flex:1 1;height:100%;justify-content:center;position:relative;transition:background-color .2s ease}.footer-nav-btn:disabled{cursor:not-allowed;opacity:.4}.footer-nav-btn:not(:disabled):active{background:#e5e5e5;background:var(--color-border)}.footer-nav-btn .generate-icon{font-size:24px}.footer-nav-btn-primary{background:#1a1a1a;background:var(--color-text);border-radius:50%;box-shadow:0 2px 8px #0003;color:#fff;color:var(--color-background);flex:0 0 auto;height:56px;margin:0 8px;position:relative;top:-8px;width:56px}.footer-nav-btn-primary:not(:disabled):active{box-shadow:0 1px 4px #0003;transform:scale(.95)}.footer-nav-btn-primary .generate-icon{font-size:28px}.footer-nav-badge{align-items:center;background:var(--color-primary);border-radius:10px;color:#fff;display:flex;font-size:.625rem;height:16px;justify-content:center;min-width:16px;padding:1px 4px;position:absolute;right:calc(50% - 16px);top:12px}.nav-drawer{background:#fff;background:var(--color-background);box-shadow:-2px 0 10px #0000001a;display:flex;flex-direction:column;height:100vh;position:fixed;right:-300px;top:0;transition:right .3s ease-out;width:300px;z-index:1001}.nav-drawer.open{right:0}.nav-overlay{animation:fadeIn .3s ease-out;background:#00000080;height:100%;left:0;position:fixed;top:0;width:100%;z-index:1000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.nav-header{align-items:center;border-bottom:1px solid #e5e5e5;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:24px;padding:calc(var(--spacing-unit)*3)}.nav-header h2{font-family:Caprasimo,serif;font-size:1.5rem;margin:0}.close-button{background:none;border:none;color:#1a1a1a;color:var(--color-text);cursor:pointer;padding:8px;padding:var(--spacing-unit)}.nav-content{display:flex;flex:1 1;flex-direction:column;gap:24px;gap:calc(var(--spacing-unit)*3);padding:24px;padding:calc(var(--spacing-unit)*3)}.nav-content a{border-bottom:1px solid #e5e5e5;border-bottom:1px solid var(--color-border);color:#1a1a1a;color:var(--color-text);font-size:1.1rem;padding:16px 0;padding:calc(var(--spacing-unit)*2) 0;text-decoration:none;transition:color .2s ease}.nav-content a:hover,.nav-footer{color:#666;color:var(--color-text-secondary)}.nav-footer{border-top:1px solid #e5e5e5;border-top:1px solid var(--color-border);font-size:.875rem;padding:24px;padding:calc(var(--spacing-unit)*3);text-align:center}.search-results{display:flex;flex:1 1;flex-direction:column;overflow:hidden;padding:16px;padding:calc(var(--spacing-unit)*2)}.results-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;margin-bottom:calc(var(--spacing-unit)*2)}.results-count{color:#666;color:var(--color-text-secondary);font-size:.875rem}.view-toggle{display:flex;gap:8px;gap:calc(var(--spacing-unit))}.view-button{align-items:center;background:none;border:1px solid #e5e5e5;border:1px solid var(--color-border);border-radius:4px;color:#666;color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:.875rem;gap:4px;gap:calc(var(--spacing-unit)*.5);padding:8px 12px;padding:calc(var(--spacing-unit)) calc(var(--spacing-unit)*1.5);transition:all .2s ease}.view-button.active{background:#1a1a1a;background:var(--color-text);border-color:#1a1a1a;border-color:var(--color-text);color:#fff}.view-button:hover:not(.active){border-color:#1a1a1a;border-color:var(--color-text);color:#1a1a1a;color:var(--color-text)}.results-list{grid-gap:32px;grid-gap:calc(var(--spacing-unit)*4);align-items:start;display:grid;flex:1 1;gap:32px;gap:calc(var(--spacing-unit)*4);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));overflow-y:auto;padding:24px;padding:calc(var(--spacing-unit)*3)}.result-item{background:#fff;background:var(--color-background);border:1px solid #e5e5e5;border:1px solid var(--color-border);border-radius:12px;cursor:pointer;display:flex;flex-direction:column;min-height:380px;overflow:hidden;position:relative;transition:all .3s ease}.result-item:hover{box-shadow:0 8px 24px #00000026;transform:scale(1.02)}.result-item:active{transform:translateY(0)}.result-item .color-swatch{border-radius:0;box-shadow:none;flex-shrink:0;height:140px;margin:0;position:relative;width:100%}.result-hex-code{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;border-radius:4px;bottom:8px;bottom:calc(var(--spacing-unit));color:#fff;font-family:monospace;font-size:.625rem;opacity:0;padding:4px 8px;padding:calc(var(--spacing-unit)*.5) calc(var(--spacing-unit));position:absolute;right:8px;right:calc(var(--spacing-unit));transition:opacity .2s ease}.result-item:hover .result-hex-code{opacity:1}.result-view-details{background:#000c;border-radius:6px;color:#fff;font-size:.875rem;font-weight:500;left:50%;opacity:0;padding:8px 16px;padding:calc(var(--spacing-unit)) calc(var(--spacing-unit)*2);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .2s ease}.result-item:hover .result-view-details{opacity:1}.result-info{display:flex;flex:1 1;flex-direction:column;gap:4px;gap:calc(var(--spacing-unit)*.5);padding:16px;padding:calc(var(--spacing-unit)*2)}.result-info h3{color:#1a1a1a;color:var(--color-text);font-size:1.125rem;font-weight:600;line-height:1.3;margin:0}.result-brand{font-size:.875rem;font-weight:500;letter-spacing:.5px;margin:0;text-transform:uppercase}.result-brand,.result-description{color:#666;color:var(--color-text-secondary)}.result-description{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;flex:1 1;font-size:.813rem;line-height:1.5;margin:8px 0 0;margin:calc(var(--spacing-unit)) 0 0 0;overflow:hidden;transition:all .3s ease}.result-item:hover .result-description{-webkit-line-clamp:unset;overflow:visible}.result-quick-actions{display:flex;gap:8px;gap:calc(var(--spacing-unit));margin-top:auto;padding-top:8px;padding-top:calc(var(--spacing-unit))}.result-quick-button{align-items:center;background:#0000000d;border:1px solid #0000;border-radius:6px;color:#1a1a1a;color:var(--color-text);cursor:pointer;display:flex;flex:1 1;font-size:.813rem;font-weight:500;gap:4px;gap:calc(var(--spacing-unit)*.5);justify-content:center;padding:12px 16px;padding:calc(var(--spacing-unit)*1.5) calc(var(--spacing-unit)*2);transition:all .2s ease}.result-quick-button:hover{background:#00000014;border-color:#e5e5e5;border-color:var(--color-border)}body.dark-mode .result-quick-button{background:#ffffff1a}body.dark-mode .result-quick-button:hover{background:#fff3}.result-actions{display:none}.result-button{align-items:center;background:none;border:1px solid #e5e5e5;border:1px solid var(--color-border);border-radius:4px;color:#1a1a1a;color:var(--color-text);cursor:pointer;display:flex;font-size:.875rem;gap:4px;gap:calc(var(--spacing-unit)*.5);padding:8px 16px;padding:calc(var(--spacing-unit)) calc(var(--spacing-unit)*2);transition:all .2s ease}.result-button:hover{background:#1a1a1a;background:var(--color-text);border-color:#1a1a1a;border-color:var(--color-text);color:#fff}@media (max-width:768px){.search-results{padding:8px;padding:calc(var(--spacing-unit))}.results-list{gap:24px;gap:calc(var(--spacing-unit)*3);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));padding:16px;padding:calc(var(--spacing-unit)*2)}.result-item{height:200px}.result-item:active,.result-item:hover{height:auto;margin-left:0;margin-right:0;min-height:280px;transform:translateY(-4px);width:100%}.result-info{padding:12px;padding:calc(var(--spacing-unit)*1.5)}.result-info h3{font-size:1rem}.result-brand{font-size:.813rem}.result-description{-webkit-line-clamp:2;font-size:.75rem}.result-quick-button{font-size:.75rem;padding:8px 12px;padding:calc(var(--spacing-unit)) calc(var(--spacing-unit)*1.5)}.result-hex-code{display:none}.result-item:active .result-hex-code,.result-item:hover .result-hex-code{display:block}}
/*# sourceMappingURL=main.431da477.css.map*/