:root { --ink: #171713; --muted: #77746d; --line: #e7e2d9; --accent: #ef351f; --cream: #fff9ec; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f7f7f4; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
.voucher-header { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(28px, calc((100vw - 1120px) / 2)); background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.voucher-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; white-space: nowrap; }
.voucher-brand small { color: var(--muted); font-size: 13px; font-weight: 400; border-left: 1px solid var(--line); padding-left: 12px; }
.voucher-logo { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #ff3921, #f58a13); box-shadow: 0 0 0 4px #fff, 0 0 0 5px #f2d6a9; font-weight: 700; }
.voucher-header nav { display: flex; align-items: center; gap: 26px; color: #57544d; font-size: 14px; }
.voucher-header nav .active { color: var(--accent); }
.voucher-login, .voucher-primary, .voucher-secondary { border: 0; border-radius: 8px; padding: 11px 20px; cursor: pointer; font: inherit; }
.voucher-login, .voucher-secondary { background: #fff; border: 1px solid #cfcac0; }
.voucher-primary { color: #fff; background: var(--accent); box-shadow: 0 5px 15px rgba(239,53,31,.18); }
.voucher-main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 90px; }
.voucher-hero { min-height: 220px; display: flex; align-items: center; justify-content: space-between; padding: 38px 52px; background: linear-gradient(110deg, #fff5e6, #ffe49c); border-radius: 18px; overflow: hidden; }
.voucher-hero h1 { margin: 5px 0 10px; font-size: clamp(34px, 5vw, 56px); letter-spacing: -.04em; }
.voucher-hero p:not(.eyebrow) { margin: 0; max-width: 570px; color: #635d52; line-height: 1.8; }
.eyebrow { margin: 0; color: var(--accent); letter-spacing: .15em; font-size: 11px; font-weight: 700; }
.voucher-hero-mark { width: 140px; height: 140px; display: grid; place-items: center; border: 1px solid rgba(239,53,31,.25); border-radius: 50%; color: rgba(239,53,31,.75); font-size: 72px; transform: rotate(8deg); }
.voucher-panel { margin-top: 28px; padding: 38px; background: #fff; border: 1px solid var(--line); border-radius: 14px; text-align: center; }
.voucher-login-state h2 { margin: 0 0 8px; }
.voucher-login-state p { color: var(--muted); margin: 0 0 22px; }
.voucher-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0; }
.summary-card { padding: 20px 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.summary-card small { display: block; color: var(--muted); margin-bottom: 8px; }
.summary-card strong { font-size: 25px; }
.voucher-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 34px 0 16px; }
.voucher-toolbar h2 { margin: 0; font-size: 28px; }
.voucher-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.voucher-card { position: relative; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.voucher-card::after { content: '券'; position: absolute; right: -16px; bottom: -34px; color: #fff8e9; font-size: 130px; font-weight: 800; pointer-events: none; }
.voucher-card-top, .voucher-card-meta, .voucher-card-actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.voucher-card-top h3 { margin: 0; font-size: 18px; }
.voucher-status { padding: 4px 9px; border-radius: 999px; font-size: 12px; color: #6d675e; background: #f1eee8; }
.voucher-status.available { color: #16735a; background: #e6f6ef; }.voucher-status.pending_payment { color: #a05a00; background: #fff0d4; }.voucher-status.paid { color: #16713a; background: #e1f4e8; }.voucher-status.rejected { color: #c52b1e; background: #ffebe8; }.voucher-status.expired, .voucher-status.cancelled { color: #89837b; }
.voucher-amount { margin: 23px 0 18px; font-size: 36px; font-weight: 750; letter-spacing: -.03em; }.voucher-amount small { font-size: 16px; margin-right: 4px; }
.voucher-card-meta { justify-content: flex-start; flex-wrap: wrap; color: var(--muted); font-size: 12px; line-height: 1.7; }.voucher-card-note { position: relative; z-index: 1; margin: 14px 0 18px; padding: 10px 12px; background: #faf8f3; color: #6d675e; font-size: 13px; border-radius: 6px; }
.voucher-card-actions { justify-content: flex-end; margin-top: 20px; }.voucher-empty { margin-top: 0; }.empty-icon { margin: 0 auto 12px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #fff0e1; color: var(--accent); font-weight: 700; }
.redeem-dialog { width: min(460px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 24px 80px rgba(25,20,10,.24); }.redeem-dialog::backdrop { background: rgba(27,24,20,.55); }.redeem-dialog form { position: relative; padding: 32px; }.dialog-close { position: absolute; top: 12px; right: 16px; border: 0; background: none; font-size: 26px; color: var(--muted); cursor: pointer; }.redeem-dialog h2 { margin: 7px 0; }.redeem-amount { color: var(--accent); font-size: 25px; font-weight: 700; }.upload-box { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 22px 0 12px; padding: 28px 15px; border: 1px dashed #d4c9b8; border-radius: 10px; background: #fffcf5; cursor: pointer; }.upload-box small, .file-name { color: var(--muted); font-size: 12px; }.upload-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #ffe6df; color: var(--accent); font-size: 24px; }.form-error { color: #c52b1e; font-size: 13px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
@media (max-width: 680px) { .voucher-header { height: auto; min-height: 66px; padding: 12px 18px; gap: 14px; }.voucher-brand { font-size: 17px; }.voucher-brand small { display: none; }.voucher-header nav { gap: 12px; font-size: 13px; }.voucher-header nav > a:first-child { display: none; }.voucher-login { padding: 8px 12px; }.voucher-main { width: min(100% - 24px, 1120px); padding-top: 24px; }.voucher-hero { min-height: 0; padding: 28px 24px; }.voucher-hero-mark { width: 76px; height: 76px; font-size: 38px; }.voucher-summary, .voucher-list { grid-template-columns: 1fr; }.voucher-toolbar h2 { font-size: 23px; }.voucher-panel { padding: 28px 18px; } }