.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.18);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:9997}.drawer-backdrop.show{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;right:0;height:100vh;width:360px;max-width:90vw;background:#fff;box-shadow:-12px 0 32px rgba(0,0,0,.12);transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);z-index:9998;display:flex;flex-direction:column}.drawer.show{transform:translateX(0)}.drawer-header{padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.08);justify-content:space-between}.drawer-header,.drawer-title{display:flex;align-items:center}.drawer-title{font-weight:700;font-size:14px;gap:6px}.drawer-search{padding:6px 10px;border-radius:10px;border:1px solid rgba(0,0,0,.12);font-size:13px}.drawer-list{padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.palette-item{border-radius:12px;padding:10px;background:#f7f7f8;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.palette-item:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12)}.palette-preview{display:flex;height:26px;border-radius:8px;overflow:hidden;margin-bottom:6px}.palette-preview div{flex:1 1}.palette-name{font-size:13px;font-weight:600}.heart-btn{transition:transform .15s ease}.heart-btn.active{color:#ff3b6b}.heart-btn:active{transform:scale(.88)}