:root {
  --pri: #D94030; --pri2: #B8312A; --pri3: #E86A5A;
  --orange: #E09030;
  --c1: #2D2520; --c2: #5C514A; --c3: #9E9490;
  --bg: #FDF8F4; --white: #FFFFFF;
  --ok: #059669; --ok-bg: #ECFDF5;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background:var(--bg); color:var(--c1); min-height:100vh; -webkit-font-smoothing:antialiased; }

.nav { position:sticky; top:0; z-index:100; height:48px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:16px; background:var(--white); color:var(--c1); border-bottom:1px solid rgba(0,0,0,.06); }
.nav .back { position:absolute; left:4px; font-size:24px; color:var(--c3); text-decoration:none; line-height:1; width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
html.in-mp .nav { display:none; }
html.in-mp .pg { padding-top:8px; }

.pg { max-width:480px; margin:0 auto; padding:16px 16px calc(100px + env(safe-area-inset-bottom, 0px)); }

.banner { background:linear-gradient(135deg, #D94030, #E86A5A); border-radius:20px; padding:28px 22px; color:#fff; position:relative; overflow:hidden; margin-bottom:20px; }
.banner::before { content:''; position:absolute; right:-20px; top:-20px; width:120px; height:120px; background:rgba(255,255,255,.08); border-radius:50%; }
.banner::after { content:'🎪'; position:absolute; right:16px; bottom:14px; font-size:56px; opacity:.15; }
.banner h1 { font-size:22px; font-weight:800; margin-bottom:6px; letter-spacing:1px; }
.banner p { font-size:13px; line-height:1.9; opacity:.92; }
.banner .tag { display:inline-block; background:rgba(255,255,255,.2); padding:3px 12px; border-radius:20px; font-size:11px; font-weight:600; margin-top:10px; backdrop-filter:blur(4px); }

.benefits-title { font-size:13px; font-weight:700; color:var(--c1); margin-bottom:10px; display:flex; align-items:center; gap:6px; padding-left:2px; }
.benefits-title .pri { color:var(--pri); }
.benefits { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.bf { background:var(--white); border-radius:14px; padding:14px 10px; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.05); position:relative; }
.bf.lucky { background:linear-gradient(135deg, #FFF7E6, #FFF1D6); }
.bf-icon { font-size:26px; margin-bottom:4px; }
.bf h4 { font-size:13px; font-weight:700; color:var(--c1); margin-bottom:2px; }
.bf p { font-size:11px; color:var(--c2); line-height:1.5; }
.bf .num { color:var(--pri); font-weight:700; }
.market-tip { background:linear-gradient(135deg, #FFF7ED, #FFF1E6); border:1px dashed var(--orange); border-radius:12px; padding:12px 14px; margin-bottom:20px; font-size:12px; color:#9A3412; line-height:1.7; }
.market-tip strong { color:var(--pri2); font-weight:700; }

.form-card { background:var(--white); border-radius:16px; padding:22px 20px; box-shadow:0 2px 12px rgba(0,0,0,.05); margin-bottom:16px; }
.form-title { font-size:15px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.form-title::before { content:''; display:block; width:3px; height:16px; background:var(--pri); border-radius:2px; }
.fg { margin-bottom:12px; }
.fg:last-child { margin-bottom:0; }
.fl { display:block; font-size:12px; font-weight:600; color:var(--c2); margin-bottom:5px; }
.fi { width:100%; padding:12px 14px; border:1.5px solid #E8E0DA; border-radius:10px; font-size:15px; outline:none; transition:.2s; background:#FAFAF8; color:var(--c1); }
.fi:focus { border-color:var(--pri); background:#fff; box-shadow:0 0 0 3px rgba(217,64,48,.08); }
.fi.err { border-color:var(--pri); background:#FFF8F7; }
.fi.ok { border-color:var(--ok); }
.fe { color:var(--pri); font-size:12px; min-height:18px; padding:2px 0; display:none; }
.fe.show { display:block; }

.sub-btn { width:100%; padding:15px; border-radius:14px; border:none; background:linear-gradient(135deg, var(--pri), var(--pri3)); color:#fff; font-size:16px; font-weight:700; cursor:pointer; transition:.15s; box-shadow:0 4px 14px rgba(217,64,48,.3); letter-spacing:1px; }
.sub-btn:active:not(:disabled) { transform:scale(.98); opacity:.9; }
.sub-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }

.s-card { background:var(--white); border-radius:20px; padding:28px 22px; box-shadow:0 4px 20px rgba(0,0,0,.06); text-align:center; margin-bottom:16px; }
.s-icon { font-size:56px; margin-bottom:6px; }
.s-title { font-size:22px; font-weight:800; margin-bottom:2px; }
.s-badge { display:inline-block; padding:5px 16px; border-radius:20px; font-size:12px; font-weight:600; margin-bottom:16px; }
.s-badge.pending { background:#EFF6FF; color:#2563EB; }
.s-badge.done { background:var(--ok-bg); color:var(--ok); }
.s-badge.cancelled { background:#F3F4F6; color:#6B7280; }

.code-box { background:linear-gradient(135deg, #FFF7E6, #FFF1D6); border:2px dashed var(--orange); border-radius:14px; padding:14px 32px; display:inline-block; margin:8px 0; }
.code-val { font-size:28px; font-weight:800; letter-spacing:4px; color:var(--pri2); font-family:'Courier New',monospace; }

.qr-box { margin:16px auto; padding:14px; background:#fff; border-radius:14px; border:1px solid #E8E0DA; display:inline-block; }
.qr-box img { display:block; width:180px; height:180px; image-rendering:pixelated; }
.qr-tip { font-size:11px; color:var(--c3); margin-top:6px; }

.info-section { text-align:left; margin-top:18px; padding-top:14px; border-top:1px solid #F0EBE6; }
.info-r { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid #F5F0EB; font-size:13px; }
.info-r:last-child { border-bottom:none; }
.info-l { color:var(--c3); }
.info-v { font-weight:500; color:var(--c1); }

.notice { background:#F8F5F2; border-radius:14px; padding:16px 18px; margin-bottom:16px; }
.notice h4 { font-size:13px; font-weight:700; color:var(--c1); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.notice p { font-size:12px; color:var(--c2); line-height:2; }

.cancel-btn { width:100%; padding:14px; border-radius:12px; border:1.5px solid #E8E0DA; background:var(--white); color:var(--c2); font-size:14px; font-weight:600; cursor:pointer; transition:.15s; margin-bottom:12px; min-height:48px; }
.cancel-btn:active { transform:scale(.98); background:#F8F5F2; }

.back-link { display:block; text-align:center; font-size:13px; color:var(--c3); text-decoration:none; padding:14px; min-height:44px; }
.back-link:active { color:var(--pri); }
.upload-link { display:block; width:100%; padding:14px; border-radius:14px; border:2px solid var(--pri); background:var(--white); color:var(--pri); font-size:15px; font-weight:700; text-align:center; text-decoration:none; cursor:pointer; transition:.15s; letter-spacing:1px; margin-top:6px; }
.upload-link:active { background:#FFF5F4; transform:scale(.98); }

.toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8); background:rgba(0,0,0,.78); color:#fff; padding:12px 24px; border-radius:10px; font-size:14px; z-index:9999; opacity:0; transition:.3s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.loading { position:fixed; inset:0; background:rgba(255,255,255,.7); z-index:9998; display:none; align-items:center; justify-content:center; flex-direction:column; }
.loading.show { display:flex; }
.spinner { width:36px; height:36px; border:3px solid #E8E0DA; border-top-color:var(--pri); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { margin-top:12px; font-size:14px; color:var(--c2); }

@media (max-width: 380px) {
  .bf { padding: 12px 8px; }
  .bf-icon { font-size: 22px; }
  .bf h4 { font-size: 12px; }
  .bf p { font-size: 10px; }
  .banner h1 { font-size: 19px; }
  .banner p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}