:root{--pink:#ff3ea5;--pink2:#ff6a88;--blue:#2e8bff;--ink:#111;--muted:#667085}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#fbfcff,#f3f6ff);color:var(--ink)}
a{color:var(--blue);text-decoration:none}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:10}
.topbar .brand{display:flex;align-items:center;gap:10px}
.topbar img{height:32px}.topbar .brand span{font-weight:900;letter-spacing:.2px}.topbar .nav a{margin-left:12px}
.container{max-width:1180px;margin:0 auto;padding:18px}
.hero{border-radius:24px;overflow:hidden;margin:16px 0;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{background:#fff;border:1px solid #e9ecf5;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.card img{width:100%;height:220px;object-fit:cover;display:block}
.card .p{padding:14px}
.badge{display:inline-block;background:linear-gradient(90deg,var(--pink),var(--pink2));color:#fff;padding:4px 10px;border-radius:999px;font-weight:800;font-size:12px}
.price-chip{display:inline-flex;align-items:center;gap:8px;background:#ffe600;color:#111;padding:10px 16px;border-radius:999px;font-weight:900}
.shop-cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,#74b0ff,#1a4bff);color:#fff;border-radius:999px;padding:12px 18px;font-weight:800;box-shadow:0 6px 18px rgba(42,102,255,.25)}
.card .cta-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.badge-campaign{display:inline-block;background:#f6f7ff;border:1px solid #e7e9ff;padding:5px 12px;border-radius:999px;font-size:12px}
.h-section{margin:34px 0 12px;padding:16px;border-radius:18px;background:linear-gradient(90deg,var(--pink),var(--pink2));color:#fff;font-weight:900;letter-spacing:.3px;font-size:22px;box-shadow:0 6px 20px rgba(255,80,160,.22)}
.winner-card{background:#fff;border:1px solid #e9ecf5;border-radius:24px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.06)}
.winner-card .hero img{width:100%;height:260px;object-fit:cover;display:block}
.winner-card .p{padding:18px}.winner-title{font-size:42px;font-weight:900;margin:6px 0}.winner-name{color:var(--pink);font-weight:900}.meta{color:#666}
.qty-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:16px;z-index:100}
.qty-box{background:#fff;border-radius:18px;max-width:560px;width:100%;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.circles{display:flex;gap:16px;overflow:auto;margin:14px 0 18px}
.circle{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid #e3e6f0;font-weight:800}
.circle.active{border-color:#1a4bff;color:#1a4bff;box-shadow:0 0 0 4px #e9efff}
.btn-pill{border-radius:999px;padding:12px 18px;border:none;cursor:pointer;font-weight:700}.btn-ghost{background:#f4f6fb}.btn-primary{background:linear-gradient(180deg,#74b0ff,#1a4bff);color:#fff}
label{display:block;margin:10px 0 4px;color:#333;font-weight:600}
input,select,textarea{width:100%;padding:12px;border:1px solid #e4e7f0;border-radius:10px}
.btn{display:inline-block;padding:12px 16px;border-radius:10px;background:linear-gradient(180deg,#74b0ff,#1a4bff);color:#fff;border:none;font-weight:800;cursor:pointer}
.alert{padding:12px;border-radius:10px;background:#fff5f5;color:#a40000;border:1px solid #ffd6d6;margin:10px 0}
.success{padding:12px;border-radius:10px;background:#f1fff2;color:#046e1d;border:1px solid #b7f5c1;margin:10px 0}
.footer{padding:28px 16px;text-align:center;color:#555}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:8px;border-bottom:1px solid #eee;text-align:left;font-size:14px}
.sidebar{width:240px;padding:14px;border-right:1px solid #eee}.admin-wrap{display:flex;gap:18px}.admin-main{flex:1;padding:14px}
/* Container card */
.dd-card{
  background:#fff;border:1px solid #e9ecf5;border-radius:22px;
  overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.06)
}

/* Rounded image header with soft corner top */
.dd-media{
  background:linear-gradient(135deg,#ff3ea5 0%,#2e8bff 100%);
  padding:18px 18px 0 18px; border-bottom:1px solid #eef1f8
}
.dd-media img{
  width:100%; height:380px; display:block;
  object-fit:contain; object-position:center;
  background:#f7f9ff; border-radius:18px 18px 0 0
}
/* mobile height */
@media (max-width:520px){ .dd-media img{ height:320px } }

/* Body */
.dd-body{ padding:16px }

/* “Win” label */
.dd-win{
  display:inline-block; font-weight:900; font-size:18px; letter-spacing:.3px;
  background:linear-gradient(90deg,#ff3ea5,#ff6a88); -webkit-background-clip:text;
  background-clip:text; color:transparent; margin-bottom:6px
}
/* ROW: keep on one line, center aligned */
.de-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:10px;flex-wrap:nowrap
}

/* PRICE PILL: a bit smaller & crisper */
.de-price-pill{
  flex:0 0 200px;                /* was ~220px */
  padding:12px 16px;
  border-radius:999px;
  background:#ffe200;
  border:2px solid #fff177;      /* brighter rim */
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.08),
    0 6px 18px rgba(255,208,0,.35); /* glow */
  text-align:center
}
.de-price-pill .val{
  font-weight:1000;font-size:20px; /* was 22px */
  letter-spacing:.2px;color:#101010
}
.de-price-pill .sub{
  font-size:12px;color:#2b2b2b;opacity:.8;margin-top:2px
}

/* CTA BUTTON: slight size trim, more depth */
.de-cta{
  flex:1 1 auto;                 /* fill remaining space */
  min-width:260px;               /* keeps it substantial */
  height:54px;                   /* was 56px */
  padding:0 22px;
  border-radius:999px;
  font-weight:1000;font-size:18px;color:#fff;
  background:linear-gradient(180deg,#7aa6ff 0%,#4767ff 50%,#2430e0 100%);
  box-shadow:
    0 10px 22px rgba(47,77,255,.28),
    inset 0 -4px 0 rgba(0,0,0,.15);
}
.de-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}

/* RESPONSIVE: stack neatly on very narrow screens */
@media (max-width:420px){
  .de-row{flex-wrap:wrap}
  .de-price-pill{flex:1 1 100%;max-width:none}
  .de-cta{flex:1 1 100%;min-width:0}
}