#filter-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:16px;padding:22px;border-radius:14px;background:#f6f9f1}
#filter-panel.hidden{display:none}
#filter-panel>label,#filter-panel .metadata-filters>label{min-width:0!important;max-width:none;width:auto;margin:0;font-size:11px;gap:8px}
#filter-panel input,#filter-panel select{min-width:0;width:100%;height:40px;font-size:12px}
#filter-panel .filter-tag-input{grid-column:1/-1}
.filter-tag-input small{font-size:10px;color:#879780;font-weight:400;line-height:1.7}
#filter-panel .metadata-filters{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;margin:0;padding:16px 0 0;border-top:1px solid #e1e8d9}
#filter-panel .metadata-resolution{grid-column:1/-1;order:1;margin-top:0}
#filter-panel>[data-action="apply-filter"]{grid-column:2;margin:0;justify-content:center}
#filter-panel>[data-action="reset-filter"]{justify-self:start;align-self:center}
.filter-color-field{display:flex;flex-direction:column;gap:8px;min-width:0;color:#74896a;font-size:11px}
.filter-color-control{display:flex;align-items:center;gap:8px;border:1px solid #dfe8d8;border-radius:6px;background:#fff;padding:0 9px;height:40px}
.filter-color-control>#color-filter{border:0;background:transparent;box-shadow:none;padding:0;flex:1;font-size:11px;min-width:0}
#color-picker-toggle{padding:0;display:grid;place-items:center;flex:none;width:26px;height:28px}
#filter-color-preview{width:24px;height:24px;border:1px solid #00000015;border-radius:6px;background:conic-gradient(#efb6c4,#f3d594,#b9d6a2,#a0c0e0,#c1a9dd,#efb6c4)}
.filter-color-control>.text-button{font-size:10px;white-space:nowrap}
.color-picker-dialog{max-width:490px}
.color-picker-options{max-height:32vh;overflow-y:auto;padding:3px 5px 6px;scrollbar-width:thin;scrollbar-color:#c8d6bd transparent}
.color-picker-options>.color-picker-label:first-child{margin-top:0}
.color-picker-preview-row{display:flex;align-items:center;gap:17px;padding:17px;border-radius:12px;background:#f6f9f2;border:1px solid #e3ebdb;margin:23px 0}
#color-picker-preview{width:65px;height:74px;border-radius:9px;border:1px solid #00000012;flex:none}
.color-picker-preview-row>div{display:grid;gap:6px;flex:1;min-width:0}
.color-picker-preview-row label{font-size:11px;color:#728569}
#color-picker-value{width:100%;max-width:125px;padding:6px 8px;border:1px solid #dce6d3;border-radius:6px;background:white;font:13px ui-monospace,monospace;color:#506a47}
#color-picker-rgb{font-size:10px;color:#819077}
.color-picker-custom{display:flex;align-items:center;flex-direction:column;gap:9px;font-size:10px!important}
#color-picker-native{width:44px;height:36px;padding:3px;border-radius:6px;border:1px solid #dce6d3;background:white;cursor:pointer}
.color-picker-label{font-size:11px;color:#718267;margin:19px 0 11px}
.color-picker-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.color-picker-grid button{display:grid;place-items:center;border:1px solid #0000000c;border-radius:7px;height:32px;background:var(--pick-color);transition:transform .15s;position:relative}
.color-picker-grid button svg{display:none;width:18px;height:18px;background:#fff;color:#42573b;padding:2px;border-radius:50%;box-shadow:0 1px 4px #0003}
.color-picker-grid button[aria-pressed="true"]{outline:2px solid #658752;outline-offset:2px}
.color-picker-grid button[aria-pressed="true"] svg{display:block}
.color-picker-grid button:hover{transform:translateY(-2px)}
.color-picker-grid button:focus-visible{outline:2px solid #425c35;outline-offset:3px}
.color-picker-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid #e5ebde;padding-top:20px;margin-top:25px}
.color-picker-actions>.text-button{margin-right:auto;font-size:11px}
.inspiration-note-footer button:disabled{opacity:.45;cursor:default}
@media(max-width:950px){#filter-panel .metadata-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){#filter-panel{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px;gap:14px}#filter-panel>label:nth-child(3){grid-column:1/-1}#filter-panel>[data-action="apply-filter"]{grid-column:1}#filter-panel .metadata-filters{gap:14px}.filter-color-field{grid-column:1/-1;grid-row:1}.color-picker-dialog{padding:26px 19px}.color-picker-preview-row{gap:11px;padding:13px}.color-picker-grid{gap:7px}.color-picker-grid button{height:31px}.color-picker-actions{gap:8px}}