.coupon-tabs { display:grid; grid-template-columns:1fr 1fr; background:white; padding:0 24px; }
.coupon-tabs .tab { padding:20px 6px; color:#797d7e; font-size:19px; }
.coupon-tabs .tab.active { color:#303735; font-weight:700; }
.coupon-tabs .tab.active:after { width:24px; height:3px; bottom:5px; }
.coupon-list { display:grid; gap:22px; padding:22px 20px 32px; background:#f5fbff; align-content:start; min-height:calc(100vh - 240px); }
.coupon-ticket { background:linear-gradient(105deg,#ffae8b,#ff8145); border-radius:11px; padding:10px; box-shadow:0 5px 13px #71a7c527; }
.coupon-paper { display:grid; grid-template-columns:28% minmax(0,1fr); background:white; border-radius:10px; min-height:146px; overflow:hidden; }
.coupon-stub { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding:24px 12px 14px; color:#ff4526; border-right:1px solid #ffe9df; overflow:hidden; }
.coupon-stub strong { font-size:21px; }
.coupon-stub>span:last-child { font-size:17px; line-height:1.5; }
.coupon-ribbon { position:absolute; top:8px; left:-30px; transform:rotate(-45deg); width:110px; font-size:14px; line-height:24px; color:white; background:#ff471b; }
.coupon-info { position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:18px 20px 14px 30px; }
.coupon-info:before,.coupon-info:after { content:''; position:absolute; left:5px; width:20px; height:20px; border-radius:50%; background:#ff9d70; }
.coupon-info:before { top:-10px; }.coupon-info:after { bottom:-10px; }
.coupon-info h2 { margin:0 0 auto; padding-bottom:24px; font-size:19px; color:#373c3a; line-height:1.4; }
.coupon-info p { margin:4px 0 0; font-size:13px; color:#888; line-height:1.5; }
.coupon-info p:last-of-type { padding-right:40px; }
.coupon-view { position:absolute; bottom:14px; right:10px; color:#ff6758; font-size:13px; padding:0; background:none; }
.coupon-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 0 1px; color:white; font-size:16px; }
.coupon-claim { border-radius:24px; color:#ff8248; background:white; padding:8px 28px; font-size:17px; min-height:40px; white-space:nowrap; }
.coupon-claim:disabled { opacity:.72; cursor:default; }.coupon-claim.is-claimed { color:#ae6242; }
.coupon-detail { margin:20px; padding:24px; background:white; border-radius:12px; line-height:1.8; }
.coupon-detail-type { display:block; color:#ff8248; margin-top:20px; }.coupon-detail h1{font-size:24px}.coupon-detail h2{font-size:18px;margin-top:24px}
.coupon-demo-note { color:#999; font-size:13px; }.coupon-detail-action .coupon-claim { background:#ff8248; color:white; margin:14px 0; }
.coupon-claim:focus-visible,.coupon-view:focus-visible { outline:3px solid #1b73e8; outline-offset:3px; }
@media(max-width:480px){.coupon-list{padding:20px 14px}.coupon-info{padding-left:25px;padding-right:12px}.coupon-info h2{font-size:17px}.coupon-info p{font-size:11px}.coupon-stub{padding-left:8px;padding-right:8px}.coupon-stub>span:last-child{font-size:15px}.coupon-claim{font-size:16px;padding:8px 20px}.coupon-bottom{font-size:14px}}
