.cr-head h1{font-size:44px;margin:0}
.cr-head p{color:#5b5054;margin:4px 0 24px}
.cr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){ .cr-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:640px){ .cr-grid{grid-template-columns:repeat(2,1fr)} }

.cr-card{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;
  box-shadow:0 10px 26px -16px rgba(140,40,120,.45);background:#efe6f7;}
.cr-card img{width:100%;height:100%;object-fit:cover;display:block}
.cr-card .grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,12,18,.6))}
.cr-time{position:absolute;left:12px;bottom:12px;color:#fff;font-size:12px;font-weight:600;z-index:2}

.cr-bm, .cr-del{
  position:absolute;top:10px;width:36px;height:36px;border-radius:50%;z-index:3;
  background:rgba(20,12,18,.55);          /* dark backing — visible on white */
  backdrop-filter:blur(6px);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:background .15s,transform .15s;
}

.cr-bm{left:10px}
.cr-del{right:10px}
.cr-bm:hover, .cr-del:hover{transform:scale(1.08)}
.cr-bm.on{background:linear-gradient(100deg,#F7459B,#8B3FE8)}   /* pink when bookmarked */
.cr-del:hover{background:rgba(220,40,60,.9)}

.cr-del:hover{background:rgba(220,40,60,.85)}

.cr-empty{text-align:center;padding:80px 20px;color:#5b5054}
.cr-empty a{color:#8B3FE8;font-weight:700;text-decoration:none}

/* reuse lightbox from try-on */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(20,12,18,.85);backdrop-filter:blur(6px);padding:24px}
.lightbox.show{display:flex}
.lightbox img{max-width:92vw;max-height:90vh;border-radius:16px}
.lightbox .close{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;border:none;cursor:pointer;font-size:22px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#1c1418;color:#fff;padding:13px 22px;border-radius:999px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:.3s;z-index:300}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.cr-dl{
  position:absolute;top:10px;right:54px;width:36px;height:36px;border-radius:50%;z-index:3;
  background:rgba(20,12,18,.55);backdrop-filter:blur(6px);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.25);transition:background .15s,transform .15s;
}
.cr-dl:hover{transform:scale(1.08);background:rgba(139,63,232,.85)}