:root{
  --green:#14532D; --green2:#1E7A3C; --green-bg:#E9F3EC;
  --red:#C8102E; --gold:#C9A227; --gold-bg:#FBF3D9;
  --ink:#1F2A21; --grey:#7A8A7E;
  --line:#E4EAE6; --bg:#F4F6F5; --card:#FFFFFF; --footer:#1A1A1A;
  --shadow:0 1px 3px rgba(20,40,30,.08), 0 4px 14px rgba(20,40,30,.06);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); min-height:100vh;}
.app{max-width:520px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); position:relative;}
.hd{padding:16px 20px 12px; background:#fff; border-bottom:1px solid var(--line); text-align:center;}
.hd .brand{font-size:21px; font-weight:900; color:var(--red); letter-spacing:.4px;}
.hd .prize{font-size:20px; font-weight:900; font-style:italic; color:var(--gold); text-shadow:0 1px 0 rgba(0,0,0,.06);}
.hd .sub{font-size:11px; color:var(--grey); font-weight:600; letter-spacing:.5px; text-transform:uppercase; margin-top:2px;}
.hd .userline{display:flex; align-items:center; gap:10px; margin-top:10px;}
.hd .avatar{width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;}
.hd .nm{font-size:14.5px;font-weight:800;color:var(--ink);}
.hd .em{font-size:11px;color:var(--grey); word-break:break-all;}
.logout{margin-left:auto; background:none;border:none;color:var(--red);font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer;padding:4px;}
.view{display:none; flex-direction:column; flex:1;}
.view.active{display:flex;}
.body{flex:1; padding:16px 18px 24px; overflow-y:auto;}
.hero{text-align:center; padding:26px 20px 8px;}
.hero .brand{font-size:30px; font-weight:900; color:var(--red); letter-spacing:.5px;}
.hero .prize{font-size:30px; font-weight:900; font-style:italic; color:var(--gold); margin-top:2px; text-shadow:0 1px 0 rgba(0,0,0,.06);}
.hero .tagline{font-size:13px; color:var(--grey); margin-top:10px; line-height:1.45;}
.hero .tag{display:inline-block; margin-top:12px; background:var(--green-bg); color:var(--green); font-size:11px; font-weight:800; border-radius:20px; padding:5px 14px;}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:4px 0 14px;}
.stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 6px; text-align:center; box-shadow:var(--shadow);}
.stat .v{font-size:19px; font-weight:900; color:var(--green);}
.stat .k{font-size:9.5px; color:var(--grey); font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-top:3px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:var(--shadow);}
.card h3{margin:0 0 6px; font-size:13.5px; color:var(--ink);}
.card .row{display:flex; justify-content:space-between; font-size:12.5px; margin:4px 0; color:var(--ink);}
.card .row b{color:var(--green);}
.poster-card{padding:0; border:none; box-shadow:var(--shadow);}
.poster-card img{width:100%; border-radius:12px; display:block;}
.stampcard .cname{font-size:12px; font-weight:800; color:var(--green); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px;}
.stampcard .csub{font-size:11.5px; color:var(--grey); margin-bottom:12px;}
.stamps{display:grid; grid-template-columns:repeat(5,1fr); gap:12px 10px; margin-bottom:14px;}
.stamp{width:100%; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; color:#fff; background:var(--green2); overflow:hidden;}
.stamp.empty{background:#fff; border:2px dashed #BFD0C5; color:#BFD0C5; font-weight:800;}
.stamp.done{background:var(--green); border:none;}
.stamp.done img{width:64%; height:64%; object-fit:contain; display:block;}
.prizes h4{margin:16px 0 10px; font-size:12.5px; color:var(--ink); text-transform:uppercase; letter-spacing:.6px; font-weight:800;}
.prizes .prow{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.pchip{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 4px; text-align:center; box-shadow:var(--shadow);}
.pchip .ic{font-size:26px; line-height:1;}
.pchip .lb{font-size:10.5px; font-weight:800; color:var(--ink); margin-top:6px;}
.pchip .cnt{font-size:9px; color:var(--grey); font-weight:600;}
.btn{display:block; width:100%; padding:14px; border:none; border-radius:12px; background:var(--green); color:#fff; font-size:15px; font-weight:800; cursor:pointer; letter-spacing:.3px;}
.btn:active{transform:scale(.98); opacity:.92;}
.btn.sm{padding:10px 14px; font-size:13px; width:100%;}
.btn.ghost{background:#fff; color:var(--green); border:1.5px solid var(--green);}
.btn.ghost:active{background:var(--green-bg);}
/* prize list */
.pricelist{margin-top:14px; padding:16px;}
.pl-head{margin-bottom:10px;}
.pricelist .cname{font-size:12.5px; font-weight:800; color:var(--green); text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px;}
.pricelist .csub{font-size:11.5px; color:var(--grey);}
.pltbl{width:100%; border-collapse:collapse; font-size:11px;}
.pltbl th{font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--grey); text-align:left; padding:6px 4px; border-bottom:1.5px solid var(--line);}
.pltbl td{padding:6px 4px; border-bottom:1px solid #F0F4F1; vertical-align:middle;}
.pltbl .r{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
.pltbl tr.pl-grand td{background:#FBF3D9;}
.pltbl tr.pl-last td{border-bottom:2px solid var(--line);}
.pltbl tr.pl-total td{border-top:2px solid var(--green); background:var(--green-bg); color:var(--green); font-size:11.5px;}
.pl-badge{display:inline-block; background:var(--green); color:#fff; font-size:8.5px; font-weight:800; padding:2px 5px; border-radius:6px; margin-right:5px; vertical-align:middle;}
.pl-badge.g{background:var(--gold); color:#4a3a00;}
.pl-note{margin-top:10px; font-size:10px; color:var(--grey); line-height:1.5;}
.btn.gold{background:var(--gold); color:#fff;}
.btn.red{background:var(--red);}
.btn.ghost{background:#fff; color:var(--green); border:1.5px solid var(--green);}
.field{margin-bottom:13px;}
.field label{display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:5px;}
.field input{width:100%; padding:12px 13px; border:1.5px solid var(--line); border-radius:11px; font-size:14px; background:#fff;}
.field input:focus{outline:none; border-color:var(--green2);}
.field .hint{font-size:10.5px; color:var(--grey); margin-top:4px;}
.err{display:none; font-size:11px; color:var(--red); margin-top:3px; font-weight:600;}
.err.show{display:block;}
.msg{display:none; padding:11px 13px; border-radius:11px; font-size:12.5px; font-weight:600; margin-bottom:13px;}
.msg.show{display:block;}
.msg.ok{background:var(--green-bg); color:var(--green); border:1px solid #C4E0CC;}
.msg.bad{background:#FCE9EB; color:var(--red); border:1px solid #F2C3C9;}
.msg.warn{background:var(--gold-bg); color:#8a6d1a; border:1px solid #EAD89A;}
.link{background:none;border:none;color:var(--green);font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:underline;padding:6px 2px;}
.center{text-align:center;}
.small{font-size:11.5px; color:var(--grey);}
.nopw{font-size:11px; color:var(--grey); text-align:center; margin-top:12px; line-height:1.4;}
.tag{display:inline-block; background:var(--green-bg); color:var(--green); font-size:10.5px; font-weight:800; border-radius:20px; padding:3px 10px;}
.tag.gold{background:var(--gold-bg); color:#8a6d1a;}
.tag.red{background:#FCE9EB; color:var(--red);}
.drop{border:2px dashed #9FBFAB; border-radius:14px; background:var(--green-bg); text-align:center; padding:28px 14px; cursor:pointer; margin-bottom:12px;}
.drop .ic{font-size:34px;}
.drop .t{font-size:14.5px; font-weight:800; color:var(--green); margin-top:8px;}
.drop .s{font-size:11px; color:var(--grey); margin-top:4px;}
.thumbrow{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0;}
/* upload guideline tip */
.tipbox{display:flex; gap:10px; align-items:flex-start; background:var(--gold-bg); border:1px solid #EAD89A; border-radius:12px; padding:11px 13px; margin:0 0 12px; font-size:12px; color:#6b5210; line-height:1.45;}
.tipbox .tip-ic{font-size:18px; line-height:1.3;}
.tipbox .tip-txt{flex:1; min-width:0;}
.tipbox b{color:#8a6d1a;}
.tipbox .tip-my{display:block; font-size:11px; color:#8a6d1a; margin-top:2px;}
.tipbox .tip-img{width:150px; height:auto; border-radius:10px; border:1.5px solid #EAD89A; flex-shrink:0;}
.thumb{position:relative; width:76px; height:76px;}
.thumb img{width:76px;height:76px;object-fit:cover;border-radius:10px;border:1.5px solid var(--line);}
.thumb .x{position:absolute; top:-6px; right:-6px; background:var(--red); color:#fff; border-radius:50%; width:20px;height:20px; font-size:12px; line-height:20px; text-align:center; cursor:pointer; font-weight:800;}
.checkline{display:flex; gap:8px; align-items:flex-start; font-size:11.5px; color:var(--ink); margin:12px 0;}
.checkline input{margin-top:1px;}
.spin{width:46px;height:46px;border:4px solid var(--line); border-top-color:var(--green2); border-radius:50%; margin:0 auto; animation:sp 1s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}
.checkmark{width:76px;height:76px;border-radius:50%;background:var(--green);margin:0 auto;display:flex;align-items:center;justify-content:center;}
.checkmark svg{width:40px;height:40px;stroke:#fff;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.lrow{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line);}
.lrow:last-child{border-bottom:none;}
.lrow .who{flex:1; min-width:0;}
.lrow .who .nm{font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lrow .who .sp{font-size:11px; color:var(--grey);}
.tabs{display:flex; background:#fff; border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:16px; gap:4px; box-shadow:var(--shadow);}
.tab{flex:1; text-align:center; padding:10px 4px; font-size:13px; font-weight:800; color:var(--grey); border-radius:9px; cursor:pointer; background:none;border:none;}
.tab.active{background:var(--green); color:#fff;}
.rcpt{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow); cursor:pointer; display:flex; align-items:center; gap:12px;}
.rcpt:active{background:var(--green-bg);}
.rcpt .rthumb{width:52px; height:52px; object-fit:cover; border-radius:9px; border:1px solid var(--line); flex:none;}
.rcpt .chev{color:var(--grey); font-size:22px; font-weight:800; flex:none;}
.rcpt .top{display:flex; justify-content:space-between; align-items:center;}
.rcpt .outlet{font-size:13px; font-weight:800;}
.rcpt .tot{font-size:13px; font-weight:900; color:var(--green);}
.rcpt .meta{font-size:10.5px; color:var(--grey); margin-top:3px;}
.rcpt .reas{font-size:11px; color:var(--red); margin-top:4px; font-weight:600;}
.rcpt .earn{font-size:10.5px; color:var(--green); margin-top:4px; font-weight:700;}
.searchbar{margin-bottom:12px;}
.searchbar input[type=search]{width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:11px; font-size:13.5px; background:#fff;}
.searchbar input[type=search]:focus{outline:none; border-color:var(--green2);}
.footer{background:var(--footer); color:#BFBFBF; text-align:center; padding:14px; font-size:10.5px; letter-spacing:.3px; line-height:1.6;}
.footer b{color:var(--gold);}
/* ---------- modal ---------- */
.modal-bg{display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:50; align-items:flex-end; justify-content:center;}
.modal-bg.show{display:flex;}
.modal{background:#fff; width:100%; max-width:520px; border-radius:18px 18px 0 0; padding:20px 18px 28px; max-height:88vh; overflow-y:auto;}
.modal h3{margin:0 0 8px; color:var(--red);}
.modal .row{display:flex; justify-content:space-between; font-size:13px; margin:5px 0;}
.modal .row b{color:var(--green);}
.modal .warn-row{border-bottom:none; margin-top:-5px; padding-top:0;}
.modal img.rcpt-photo{width:100%; border-radius:10px; border:1px solid var(--line); display:block; margin:6px 0;}