:root{
  --reward-orange:#f97316;
  --reward-yellow:#f59e0b;
  --reward-text:#34373c;
  --reward-muted:#64748b;
  --reward-line:#e2e8f0;
}

*{box-sizing:border-box}
body{margin:0;background:#f7f8fa;color:var(--reward-text);font-family:"Kanit",sans-serif}
body.reward-modal-open{overflow:hidden}
.reward-page{min-height:100vh;padding:28px 0 80px;background:radial-gradient(circle at 29% 4%,#fffdf6 0,transparent 26%)}
.reward-container{width:min(1200px,calc(100% - 40px));margin:0 auto}
.reward-topbar{display:flex;justify-content:flex-end;min-height:46px}
.reward-back{display:inline-flex;padding:10px 18px;border:1px solid var(--reward-line);border-radius:999px;background:#fff;color:#334155;text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(15,23,42,.08)}
.reward-heading{text-align:center;margin:2px auto 12px}
.reward-heading p{margin:0;color:var(--reward-yellow);font-weight:600}
.reward-heading h1{margin:6px 0 16px;font-size:clamp(32px,4vw,46px);line-height:1.12}
.reward-heading>span{display:block;width:60px;height:4px;margin:auto;border-radius:99px;background:var(--reward-orange)}
.reward-tools{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:8px 115px 34px 0}
.reward-tools label{font-size:20px;font-weight:700;color:#51555b}
.reward-tools input{width:210px;height:38px;padding:7px 14px;border:1px solid var(--reward-line);border-radius:999px;background:#e5e7eb;font:500 14px "Kanit",sans-serif}
.reward-tools input:focus{outline:3px solid rgba(249,115,22,.15);border-color:var(--reward-orange);background:#fff}
.reward-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.reward-card{min-width:0;padding:10px 10px 14px;border-radius:12px;background:#fff;text-align:center;box-shadow:0 10px 28px rgba(15,23,42,.08);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.reward-card:hover,.reward-card:focus-visible{transform:translateY(-4px);box-shadow:0 14px 34px rgba(15,23,42,.14);outline:none}
.reward-card-image-wrap{width:100%;aspect-ratio:1/1.13;border-radius:9px;overflow:hidden;background:#f1f5f9;display:flex;align-items:center;justify-content:center}
.reward-card-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.reward-image-empty{display:grid;place-items:center;padding:10px;color:#94a3b8;font-size:13px;background:#f1f5f9}
.reward-card h2{margin:9px 2px 0;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reward-status,.reward-empty,.reward-error{grid-column:1/-1;padding:55px 20px;text-align:center;color:var(--reward-muted)}
.reward-spinner{display:inline-block;width:30px;height:30px;margin:0 12px -9px 0;border:4px solid #fed7aa;border-top-color:var(--reward-orange);border-radius:50%;animation:reward-spin .75s linear infinite}
@keyframes reward-spin{to{transform:rotate(360deg)}}
.reward-error{color:#b91c1c}

.reward-modal[hidden]{display:none!important}
.reward-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:24px;background:rgba(15,23,42,.48);backdrop-filter:blur(2px)}
.reward-modal-dialog{position:relative;width:min(900px,100%);max-height:calc(100vh - 48px);overflow:auto;padding:24px;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.35)}
.reward-modal-close{position:absolute;top:-1px;right:-1px;z-index:2;width:43px;height:43px;border:3px solid #fff;border-radius:50%;background:#64748b;color:#fff;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 3px 12px rgba(15,23,42,.25)}
.reward-modal-layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:26px}
.reward-modal-main-image-wrap{min-height:330px;border-radius:14px;overflow:hidden;background:#f1f5f9;display:flex;align-items:center;justify-content:center}
.reward-modal-main-image{display:block;width:100%;height:100%;min-height:330px;object-fit:contain;object-position:center}
.reward-modal-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.reward-modal-info dl{width:100%;margin:0 0 15px}
.reward-modal-info dl div{margin-bottom:11px}
.reward-modal-info dt{font-weight:700;color:#475569}
.reward-modal-info dd{margin:2px 0 0;font-size:17px;color:#1f2937;overflow-wrap:anywhere}
.reward-support-section{width:100%}
.reward-support-section h3{margin:0 0 9px;text-align:center;color:#64748b;font-size:14px;font-weight:500}
.reward-support-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.reward-support-grid a{display:block;height:135px;overflow:hidden;border-radius:12px;background:#fff3ed}
.reward-support-grid img{width:100%;height:100%;display:block;object-fit:cover}
.reward-no-support-images{display:grid;place-items:center;min-height:135px;border:1px dashed #cbd5e1;border-radius:12px;color:#94a3b8;background:#f8fafc}
.reward-detail-button{align-self:center;margin-top:18px;padding:9px 22px;border-radius:999px;background:#ff8066;color:#fff;text-decoration:none;font-weight:600;box-shadow:0 7px 18px rgba(255,128,102,.25)}

@media(max-width:1050px){.reward-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.reward-tools{margin-right:0}}
@media(max-width:780px){
  .reward-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reward-modal-layout{grid-template-columns:1fr}
  .reward-modal-main-image-wrap,.reward-modal-main-image{min-height:0;max-height:390px}
  .reward-modal-main-image{aspect-ratio:4/3}
}
@media(max-width:500px){
  .reward-page{padding-top:16px}.reward-container{width:min(100% - 24px,1200px)}
  .reward-tools{display:grid;gap:5px}.reward-tools label{font-size:16px}.reward-tools input{width:100%}
  .reward-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .reward-modal{padding:10px}.reward-modal-dialog{max-height:calc(100vh - 20px);padding:16px}
  .reward-support-grid{grid-template-columns:1fr}.reward-support-grid a{height:180px}
}