:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #17223b; background: #f0f4ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at top left, #ffd469, transparent 36%), linear-gradient(135deg, #5a36d8, #1a96bb); }
.page-shell { width: min(100% - 32px, 570px); padding: 32px 0; }
.card { background: #fff; border-radius: 24px; padding: clamp(25px, 6vw, 44px); box-shadow: 0 22px 70px #14205169; text-align: center; }
.eyebrow { color: #6b43dc; font-size: .73rem; letter-spacing: .12em; font-weight: 800; margin: 0; }
h1 { font-size: clamp(2rem, 7vw, 3.1rem); line-height: 1.05; margin: 10px 0 12px; }
.intro { color: #65708a; line-height: 1.55; margin: 0 auto 26px; max-width: 380px; }
.code-form { text-align: left; } label { display:block; font-size:.9rem; font-weight: 700; margin-bottom: 8px; }
.input-row { display:flex; gap: 9px; } input { min-width: 0; flex:1; border: 1px solid #ccd5e8; border-radius: 11px; padding: 13px; font: inherit; text-transform: uppercase; } input:focus { outline: 3px solid #cbbcff; border-color:#7655dd; }
button { border:0; border-radius:11px; padding: 0 16px; color:#fff; font: inherit; font-weight:800; background:#6541d8; cursor:pointer; } button:hover { background:#4e2ab9; }
.notice { margin:18px 0 0; padding: 12px; border-radius: 10px; font-size: .92rem; } .success { background:#e4f8ed; color:#0c7041; } .error { background:#ffeaeb; color:#a32837; }
.scratch-area { height: 205px; position:relative; margin-top: 23px; overflow:hidden; border-radius:16px; background: #eef1f8; display:grid; place-items:center; }
.scratch-area.ready { background: linear-gradient(135deg, #ffcf5b, #ed913c); color:#4c2700; }
.reward { display:grid; gap: 3px; justify-items:center; } .reward strong { font-size: 4.5rem; line-height:1; } .reward small { font-weight:600; }
canvas { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; touch-action:none; }
.fine-print { color:#7b8497; font-size:.78rem; margin:18px 0 0; }
.wallet-total { margin: 25px 0 20px; padding: 24px; border-radius: 16px; color: #4c2700; background: linear-gradient(135deg, #ffcf5b, #ed913c); display: grid; gap: 4px; }
.wallet-total span, .wallet-total small { font-weight: 700; } .wallet-total strong { font-size: 3.8rem; line-height: 1; }
.claim-list { text-align: left; border-top: 1px solid #e2e6ef; }
.claim-row { padding: 15px 2px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-bottom: 1px solid #e2e6ef; }
.claim-row div { display: grid; gap: 3px; } .claim-row small { color: #758098; font-size: .78rem; } .claim-row b { color: #0c7041; white-space: nowrap; }
.empty-state { padding: 18px; border-radius: 13px; color: #65708a; background: #eef1f8; line-height: 1.5; }
.wallet-actions { margin: 24px 0 0; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: .9rem; }
.button-link { background: #6541d8; color: #fff; padding: 12px 16px; border-radius: 11px; font-weight: 800; text-decoration: none; } .button-link:hover { background: #4e2ab9; }
.admin-form { display: grid; gap: 8px; text-align: left; } .admin-form label { margin-top: 8px; } .admin-form input { width: 100%; } .admin-form button { min-height: 46px; margin-top: 12px; }
.admin-shell { width: min(100% - 32px, 820px); } .admin-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; text-align:left; } .admin-heading h1 { margin-bottom: 0; }
.search-form { text-align:left; margin-top:25px; }
.admin-results { margin-top:22px; border-top: 1px solid #e2e6ef; text-align:left; }
.admin-claim { display:grid; grid-template-columns: 1fr 120px auto; align-items:center; gap:12px; padding:14px 0; border-bottom: 1px solid #e2e6ef; }
.claim-details { display:grid; gap:4px; } .claim-details span { color:#758098; font-size:.8rem; } .admin-claim label { margin:0; white-space:nowrap; } .admin-claim label input { width:84px; padding:10px 7px; } .admin-claim button { min-height:40px; }
@media (max-width: 410px) { .input-row { flex-direction: column; } button { min-height:45px; } }
@media (max-width: 600px) { .admin-claim { grid-template-columns: 1fr auto; } .claim-details { grid-column: 1 / -1; } }