:root{--pul:#e5f4ec;--ani:#f8eadf;--pen:#efe9fb;--col:#e4f0fb;--con:#f8ecd6;--bro:#f3e7ee;--pie:#eef0e8;--cch:#e3f6f4;--ink:#25221f;--muted:#776f66;--line:#e2d9cf;--paper:#fffdf9;--wash:#f5f0ea;--gold:#9b7a37}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--wash);color:var(--ink)}
header{position:sticky;top:0;z-index:3;background:rgba(255,253,249,.96);border-bottom:1px solid var(--line);padding:18px 24px;backdrop-filter:blur(10px)}
header p{margin:0;color:var(--gold);font-weight:900}h1{margin:4px 0 14px;font-family:Georgia,serif;font-size:clamp(30px,5vw,54px);letter-spacing:0}
.controls{display:flex;gap:10px;flex-wrap:wrap}input,select{border:1px solid var(--line);border-radius:8px;padding:11px 12px;background:white;font:inherit;min-width:220px}
main{padding:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}.card{background:white;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.empty-state{grid-column:1/-1;min-height:260px;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--muted)}.empty-state strong{font-family:Georgia,serif;font-size:32px;color:var(--ink)}.empty-state span{max-width:420px;line-height:1.4}
.image{background:white;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}.image img{width:100%;height:100%;object-fit:contain;transition:transform .22s ease;transform-origin:center}.card:hover .image>img{transform:scale(1.18)}
@media(max-width:720px){header{position:static;padding:16px}main{padding:14px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}input,select{min-width:100%;width:100%}}

.card.type-PUL{background:linear-gradient(180deg,var(--pul),var(--paper) 48%)}.card.type-ANI{background:linear-gradient(180deg,var(--ani),var(--paper) 48%)}.card.type-PEN{background:linear-gradient(180deg,var(--pen),var(--paper) 48%)}.card.type-COL{background:linear-gradient(180deg,var(--col),var(--paper) 48%)}.card.type-CON{background:linear-gradient(180deg,var(--con),var(--paper) 48%)}.card.type-BRO{background:linear-gradient(180deg,var(--bro),var(--paper) 48%)}.card.type-PIE{background:linear-gradient(180deg,var(--pie),var(--paper) 48%)}.card.type-CCH{background:linear-gradient(180deg,var(--cch),var(--paper) 48%)}