:root{
  --navy: #0a1526;
  --navy-2: #0d1c33;
  --line: oklch(90% 0.01 240 / 12%);
  --line-strong: oklch(90% 0.01 240 / 22%);
  --ink: oklch(94% 0.012 240);
  --ink-dim: oklch(74% 0.028 240);
  --ink-faint: oklch(54% 0.032 240);
  --dash: #1791dc;
  --dash-soft: color-mix(in oklch, var(--dash) 14%, transparent);
  --dash-line: color-mix(in oklch, var(--dash) 45%, transparent);
  --gold: #e0a83c;
  --gold-soft: color-mix(in oklch, var(--gold) 14%, transparent);
  --gold-line: color-mix(in oklch, var(--gold) 40%, transparent);
  --ok: #3ecb96;
  --err: #ec6a6a;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1100px 560px at 12% -8%, color-mix(in oklch, var(--dash) 16%, transparent), transparent 60%),
    var(--navy);
  color:var(--ink);
  font-family:'Public Sans', system-ui, sans-serif;
  font-size:15px;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:clamp(0px, 4vw, 56px) 0;
}

.page{
  width:100%;
  max-width:600px;
  background:linear-gradient(175deg, var(--navy-2), var(--navy) 65%);
  border:1px solid var(--line);
  border-radius:0;
  overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.6);
  position:relative;
}
@media (min-width:640px){
  .page{border-radius:20px;}
}

/* ---- header ---- */
header.hero{
  padding:var(--space-2xl) clamp(20px, 6vw, 44px) var(--space-lg);
}
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.eyebrow b{color:var(--dash); font-weight:500;}
h1{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:600;
  font-size:clamp(30px, 7vw, 42px);
  line-height:1.1;
  margin:12px 0 0;
  letter-spacing:-0.015em;
}
h1 span{color:var(--dash);}
.dek{
  color:var(--ink-dim);
  font-size:14px;
  line-height:1.6;
  margin:12px 0 0;
  max-width:46ch;
}

section.steps{
  padding:var(--space-sm) clamp(20px, 6vw, 44px) 0;
}
.step{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:var(--space-md);
  padding:var(--space-lg) 0;
  border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:none; padding-bottom:var(--space-xl);}
.num{
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
  font-size:13px;
  color:var(--dash);
  padding-top:3px;
}
.step h3{
  font-family:'Bricolage Grotesque', sans-serif;
  font-size:16.5px; font-weight:600;
  margin:0 0 6px;
  letter-spacing:-0.005em;
}
.step p{
  margin:0; color:var(--ink-dim); font-size:14px; line-height:1.6;
}

.chips{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:var(--space-sm);
  margin-top:var(--space-md);
}
.chip{
  display:flex; align-items:center; gap:9px;
  min-height:44px;
  font-size:13.5px; font-weight:500;
  color:var(--ink);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  padding:9px 13px; border-radius:10px;
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease;
}
.chip img, .chip svg{width:16px; height:16px; flex:none; opacity:0.92;}
.chip:hover, .chip:active{border-color:var(--dash-line); background:var(--dash-soft);}

.tag-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace;
  font-size:13px; color:var(--dash);
}
.wallet-btn{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px;
  margin-top:12px;
  font-weight:600; font-size:14px;
  color:var(--ink);
  background:var(--dash-soft);
  border:1px solid var(--dash-line);
  padding:10px 16px; border-radius:9px;
  text-decoration:none;
  transition:background .15s ease;
}
.wallet-btn:hover{background:color-mix(in oklch, var(--dash) 24%, transparent);}

form.entry{
  margin-top:var(--space-lg);
}
.step .hint{color:var(--ink-faint); font-size:13px; line-height:1.5; margin:6px 0 0;}
.field{margin-bottom:16px;}
.field label{
  display:block; font-size:12px; font-weight:600;
  color:var(--ink-dim); margin-bottom:7px;
  text-transform:uppercase; letter-spacing:0.05em;
}
.field input, .field select{
  width:100%;
  min-height:48px;
  background:var(--navy);
  border:1px solid var(--line);
  color:var(--ink);
  padding:12px 14px;
  border-radius:10px;
  font-size:16px;
  font-family:'Public Sans', sans-serif;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2374829a'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%2374829a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}
.field input:focus, .field select:focus{
  border-color:var(--dash);
  box-shadow:0 0 0 3px var(--dash-soft);
}
.field input::placeholder{color:var(--ink-faint);}

button.submit{
  width:100%;
  min-height:50px;
  margin-top:8px;
  background:var(--dash);
  color:#04101d;
  border:none;
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:600; font-size:15px;
  padding:14px; border-radius:10px;
  cursor:pointer;
  transition:filter .15s ease, transform .1s ease;
}
button.submit:hover{filter:brightness(1.08);}
button.submit:active{transform:scale(0.99);}
button.submit:disabled{opacity:0.6; cursor:default;}
.msg{
  margin-top:12px; font-size:13.5px; line-height:1.5; padding:11px 13px; border-radius:9px;
}
.msg.ok{background:color-mix(in oklch, var(--ok) 14%, transparent); border:1px solid color-mix(in oklch, var(--ok) 40%, transparent); color:var(--ok);}
.msg.err{background:color-mix(in oklch, var(--err) 14%, transparent); border:1px solid color-mix(in oklch, var(--err) 40%, transparent); color:var(--err);}

footer{
  text-align:center; padding:0 20px var(--space-xl); color:var(--ink-faint); font-size:12px;
}
footer a{color:var(--dash); text-decoration:none;}

/* ---- admin page ---- */
.admin-header{padding:var(--space-xl) clamp(20px, 6vw, 44px) var(--space-lg); display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); flex-wrap:wrap;}
.admin-header h1{font-family:'Bricolage Grotesque', sans-serif; font-size:22px; font-weight:600; margin:0; letter-spacing:-0.01em;}
.admin{padding:0 clamp(20px, 6vw, 44px) var(--space-xl);}
.draw-card{
  border:1px solid var(--line); border-radius:14px; padding:var(--space-lg);
  background:rgba(255,255,255,0.02); margin-bottom:var(--space-lg);
}
.draw-card h3{font-family:'Bricolage Grotesque', sans-serif; font-size:14px; font-weight:600; margin:0 0 12px;}
.winner{
  margin-top:14px; padding:14px 16px; border-radius:9px;
  background:var(--gold-soft); border:1px solid var(--gold-line);
  color:var(--gold); font-family:'JetBrains Mono', monospace; font-size:13.5px;
}
button.draw{
  min-height:44px;
  background:var(--gold);
  color:#201404; border:none; font-family:'Bricolage Grotesque', sans-serif; font-weight:600;
  font-size:13.5px; padding:11px 18px; border-radius:8px; cursor:pointer;
  transition:filter .15s ease;
}
button.draw:hover{filter:brightness(1.08);}
table.entries{width:100%; border-collapse:collapse; font-size:13.5px;}
table.entries th, table.entries td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
}
table.entries th{color:var(--ink-faint); text-transform:uppercase; font-size:10.5px; letter-spacing:0.05em; font-weight:600;}
table.entries td{font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--ink-dim);}
table.entries td a{color:var(--dash); text-decoration:none;}