@layer components{.palette-switcher,.theme-switcher{display:inline-flex!important;align-items:center;gap:.5rem;z-index:1000;visibility:visible!important;opacity:1!important}.palette-switcher-fixed{position:fixed;top:1rem;right:1rem}.palette-mode-toggle{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;background:var(--color-surface,#f5f5f5);color:var(--color-text,#333);border:1px solid var(--color-border,#ddd);border-radius:50%;font-size:1.125rem;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}.palette-mode-toggle:hover{background:var(--color-background,#fff);border-color:var(--color-primary,#6366f1);transform:scale(1.05)}.palette-mode-toggle:focus-visible{outline:2px solid var(--color-primary,#6366f1);outline-offset:2px}.mode-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}.mode-icon svg{display:block}.palette-family-wrapper{position:relative}.palette-family-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;background:var(--color-surface,#f5f5f5);color:var(--color-text,#333);border:1px solid var(--color-border,#ddd);border-radius:var(--radius,.375rem);font-size:var(--text-sm,.875rem);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;white-space:nowrap}.palette-family-btn:hover{background:var(--color-background,#fff);border-color:var(--color-primary,#6366f1)}.palette-family-btn:focus-visible{outline:2px solid var(--color-primary,#6366f1);outline-offset:2px}.palette-arrow{font-size:.625rem;opacity:.6;transition:transform .15s ease}.palette-family-btn[aria-expanded=true] .palette-arrow{transform:rotate(180deg)}.palette-family-dropdown{position:absolute;top:calc(100% + .5rem);right:0;min-width:200px;max-width:280px;max-height:60vh;background:var(--color-background,#fff);border:1px solid var(--color-border,#ddd);border-radius:var(--radius-lg,.5rem);box-shadow:0 10px 40px rgba(0,0,0,.15);overflow:hidden;display:flex;flex-direction:column;animation:dropdown-in .15s ease}.palette-family-dropdown[hidden]{display:none!important}.palette-search{padding:.5rem;border-bottom:1px solid var(--color-border,#ddd);background:var(--color-surface,#f5f5f5)}.palette-search input{width:100%;padding:.375rem .5rem;background:var(--color-background,#fff);color:var(--color-text,#333);border:1px solid var(--color-border,#ddd);border-radius:var(--radius,.375rem);font-size:var(--text-sm,.875rem)}.palette-search input:focus{outline:none;border-color:var(--color-primary,#6366f1)}.palette-search input::placeholder{color:var(--color-text-muted,#999)}.palette-family-list{overflow-y:auto;padding:.25rem}.palette-family-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem .625rem;background:0 0;color:var(--color-text,#333);border:none;border-radius:var(--radius,.375rem);font-size:var(--text-sm,.875rem);text-align:left;cursor:pointer;transition:background .1s ease}.palette-family-option:hover{background:var(--color-surface,#f5f5f5)}.palette-family-option:focus-visible{outline:2px solid var(--color-primary,#6366f1);outline-offset:-2px}.palette-family-option[hidden]{display:none}.palette-family-option.active{background:var(--color-primary,#6366f1);color:#fff}.palette-family-option.active .variant-indicator{opacity:.8}.family-name{flex:1}.variant-indicator{font-size:.75rem;opacity:.6;display:flex;gap:.125rem}.variant-indicator.both{}.variant-indicator.light{color:#f59e0b}.variant-indicator.dark{color:#6366f1}.palette-family-list::-webkit-scrollbar{width:6px}.palette-family-list::-webkit-scrollbar-track{background:var(--color-surface,#f5f5f5)}.palette-family-list::-webkit-scrollbar-thumb{background:var(--color-border,#ccc);border-radius:3px}.palette-family-list::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted,#999)}@media(max-width:640px){.palette-family-dropdown{position:fixed;top:auto;bottom:0;left:0;right:0;max-width:100%;max-height:50vh;border-radius:var(--radius-lg,.5rem)var(--radius-lg,.5rem)0 0}.palette-family-btn span:first-child{max-width:80px;overflow:hidden;text-overflow:ellipsis}}@media(max-width:480px){.palette-family-btn span:first-child{display:none}.palette-family-btn{padding:.5rem}.palette-arrow{font-size:.75rem}}@keyframes dropdown-in{from{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}.palette-notification{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%)translateY(1rem);padding:.75rem 1.5rem;background:var(--color-surface,#333);color:var(--color-text,#fff);border:1px solid var(--color-border,#444);border-radius:var(--radius-lg,.5rem);font-size:var(--text-sm,.875rem);font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:10000}.palette-notification.visible{opacity:1;transform:translateX(-50%)translateY(0)}.palette-mode-toggle::after,.palette-family-btn::after{content:attr(data-shortcut);position:absolute;bottom:-1.5rem;left:50%;transform:translateX(-50%);padding:.125rem .375rem;background:var(--color-surface,#333);color:var(--color-text-muted,#999);border-radius:.25rem;font-size:.625rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease}.palette-mode-toggle:hover::after,.palette-family-btn:hover::after{opacity:1}}