:root{

  --bg0:#070A10;

  --bg1:#0A0F1B;

  --card:#0E1526;

  --card2:#0B1120;

  --stroke:rgba(255,255,255,.08);

  --stroke2:rgba(255,255,255,.12);

  --text:#E9EEFF;

  --muted:rgba(233,238,255,.65);

  --muted2:rgba(233,238,255,.45);

  --a:#7C5CFF;

  --b:#20E3B2;

  --c:#FFB020;

  --danger:#FF4D6D;

  --shadow: 0 20px 60px rgba(0,0,0,.55);

  --radius: 16px;

}

*{box-sizing:border-box}

html,body{height:100%}

body{

  margin:0;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";

  color:var(--text);

  background: radial-gradient(1000px 600px at 20% 0%, rgba(124,92,255,.18), transparent 60%),

              radial-gradient(900px 500px at 80% 15%, rgba(32,227,178,.12), transparent 55%),

              linear-gradient(180deg, var(--bg0), var(--bg1));

  overflow-x:hidden;

}

.bg{position:fixed; inset:0; pointer-events:none; z-index:-1;}

.noise{

  position:absolute; inset:-20%;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");

  opacity:.08;

  transform:rotate(5deg);

}

.glow{

  position:absolute; inset:0;

  background:

    radial-gradient(700px 500px at 10% 30%, rgba(255,176,32,.10), transparent 60%),

    radial-gradient(800px 600px at 90% 70%, rgba(124,92,255,.12), transparent 55%);

  filter: blur(12px);

}

.topbar{

  position:sticky; top:0;

  display:flex; align-items:center; justify-content:space-between;

  padding:16px 22px;

  backdrop-filter: blur(12px);

  background: rgba(5,8,16,.55);

  border-bottom: 1px solid var(--stroke);

  z-index:5;

}

.brand{display:flex; gap:14px; align-items:center}

.logo{

  width:44px; height:44px; border-radius:14px;

  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(32,227,178,.14));

  border:1px solid var(--stroke2);

  box-shadow: 0 10px 35px rgba(0,0,0,.4);

  position:relative; overflow:hidden;

}

.logo:before{

  content:"";

  position:absolute; inset:-40%;

  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.20), transparent 55%);

  transform: rotate(25deg);

}

.spark{

  position:absolute; inset:0;

  background: radial-gradient(18px 18px at 70% 30%, rgba(255,176,32,.25), transparent 60%);

}

.brandText .title{font-weight:800; letter-spacing:.2px}

.brandText .subtitle{font-size:12px; color:var(--muted2); margin-top:2px}

.actions{display:flex; gap:10px; align-items:center}

.wrap{

  max-width: 1240px;

  margin: 18px auto 34px;

  padding: 0 16px;

  display:grid;

  grid-template-columns: 1fr 1.05fr;

  gap:16px;

}

.panel{

  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));

  border:1px solid var(--stroke);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  overflow:hidden;

}

.panelRight{min-height: 680px}

.panelHead{

  padding:18px 18px 10px;

  border-bottom:1px solid var(--stroke);

  background: rgba(0,0,0,.08);

}

.panelHead h2{margin:0; font-size:18px}

.panelHead p{margin:6px 0 0; font-size:12px; color:var(--muted2)}

.field{padding:14px 18px}

.field label{

  display:block;

  font-size:12px;

  color:var(--muted);

  margin-bottom:8px;

}

input, textarea{

  width:100%;

  color:var(--text);

  background: rgba(4,8,16,.55);

  border: 1px solid var(--stroke2);

  border-radius: 12px;

  outline:none;

  padding: 12px 12px;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);

}

textarea{resize: vertical; min-height: 180px; line-height:1.35}

input:focus, textarea:focus{

  border-color: rgba(124,92,255,.55);

  box-shadow: 0 0 0 3px rgba(124,92,255,.18);

}

.grid2{

  display:grid;

  grid-template-columns: 1fr 1fr;

}

.stepper{

  display:flex; align-items:center; gap:10px;

}

.step{

  width:42px; height:42px;

  border-radius:12px;

  border:1px solid var(--stroke2);

  background: rgba(4,8,16,.55);

  color:var(--text);

  cursor:pointer;

}

.step:active{transform: translateY(1px)}

#winnerCount{height:42px}

.hintRow{

  display:flex; justify-content:space-between; align-items:center;

  gap:10px; margin-top:10px;

}

.hint{display:flex; align-items:center; gap:8px; color:var(--muted2); font-size:12px}

.dot{

  width:10px; height:10px; border-radius:999px;

  background: linear-gradient(135deg, var(--a), var(--b));

  box-shadow: 0 0 0 4px rgba(124,92,255,.12);

}

.miniBtns{display:flex; gap:8px}

.divider{

  height:1px; background: var(--stroke);

  margin: 2px 18px;

}

.toggleRow{display:flex; align-items:center; justify-content:space-between; gap:10px}

.toggle{

  padding:10px 12px;

  border-radius: 999px;

  border:1px solid var(--stroke2);

  background: rgba(4,8,16,.55);

  color:var(--text);

  cursor:pointer;

  display:flex; align-items:center; gap:10px;

  font-weight:700;

}

.toggle.on{

  border-color: rgba(32,227,178,.55);

  box-shadow: 0 0 0 3px rgba(32,227,178,.12);

}

.toggle.off{

  border-color: rgba(255,77,109,.45);

  box-shadow: 0 0 0 3px rgba(255,77,109,.10);

  opacity:.95;

}

.pill{

  font-size:11px; font-weight:700;

  padding:4px 8px;

  border-radius:999px;

  border:1px solid var(--stroke);

  background: rgba(255,255,255,.04);

  color: var(--muted);

}

.toggleHelp{font-size:12px; color:var(--muted2)}

.rangeRow{

  display:flex; align-items:center; gap:12px;

}

input[type="range"]{accent-color: var(--a)}

.rangeVal{font-size:12px; color:var(--muted2); width:52px; text-align:right}

.btn{

  border:1px solid var(--stroke2);

  background: rgba(4,8,16,.55);

  color:var(--text);

  padding: 11px 14px;

  border-radius: 12px;

  cursor:pointer;

  font-weight:800;

  letter-spacing:.2px;

  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;

}

.btn:hover{border-color: rgba(255,255,255,.18)}

.btn:active{transform: translateY(1px)}

.btn.primary{

  background: linear-gradient(135deg, rgba(124,92,255,.30), rgba(32,227,178,.20));

  border-color: rgba(255,255,255,.20);

  box-shadow: 0 10px 40px rgba(0,0,0,.35);

}

.btn.ghost{background: rgba(255,255,255,.03)}

.btn.mini{padding:8px 10px; border-radius: 10px; font-size:12px; font-weight:800}

.btn.file{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center}

.btn.file input{

  position:absolute; inset:0; opacity:0; cursor:pointer;

}

.ctaRow{

  padding: 6px 18px 16px;

  display:grid;

  grid-template-columns: 1fr 1.2fr;

  gap:10px;

}

.smallRow{

  padding: 0 18px 18px;

  display:flex; gap:10px; flex-wrap:wrap;

}

.glowBtn{

  position:relative;

}

.glowBtn:before{

  content:"";

  position:absolute; inset:-2px;

  background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(255,176,32,.18));

  filter: blur(14px);

  opacity:.55;

  z-index:-1;

  border-radius: 14px;

}

.drawCard{padding: 16px 18px 18px}

.drawMeta{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}

.tag{

  font-size:12px;

  padding:8px 10px;

  border-radius:999px;

  border:1px solid var(--stroke2);

  background: rgba(255,255,255,.03);

  color:var(--text);

}

.tag.dim{color:var(--muted2)}

.roulette{

  position:relative;

  height: 160px;

  border-radius: 18px;

  border:1px solid var(--stroke2);

  background:

    radial-gradient(300px 150px at 20% 30%, rgba(124,92,255,.14), transparent 60%),

    radial-gradient(280px 160px at 80% 70%, rgba(32,227,178,.10), transparent 60%),

    rgba(4,8,16,.55);

  overflow:hidden;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

}

.roller{

  height:100%;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:14px;

}

.name.big{

  font-size:32px;

  font-weight:900;

  letter-spacing:.3px;

}

.sub{

  margin-top:6px;

  font-size:12px;

  color:var(--muted2);

}

.scanline{

  position:absolute; inset:0;

  background: linear-gradient(180deg,

    transparent,

    rgba(255,255,255,.05),

    transparent);

  opacity:.35;

  transform: translateY(-60%);

  animation: scan 5s linear infinite;

}

@keyframes scan{

  0%{transform: translateY(-70%)}

  100%{transform: translateY(70%)}

}

.frame{

  position:absolute; inset:10px;

  border-radius: 14px;

  border:1px solid rgba(255,255,255,.10);

  pointer-events:none;

}

.resultBox{

  margin-top:14px;

  border:1px solid var(--stroke2);

  border-radius: 16px;

  background: rgba(255,255,255,.02);

  overflow:hidden;

}

.resultHead{

  display:flex; justify-content:space-between; align-items:center;

  padding: 12px 12px;

  border-bottom:1px solid var(--stroke);

}

.resultTitle{font-weight:900}

.resultNote{font-size:12px; color:var(--muted2)}

.winners{

  padding: 10px 12px 14px;

  display:flex;

  flex-wrap:wrap;

  gap:10px;

}

.wChip{

  display:flex; align-items:center; gap:10px;

  padding: 10px 12px;

  border-radius: 14px;

  border:1px solid var(--stroke2);

  background: rgba(4,8,16,.55);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

}

.wIndex{

  width:26px; height:26px;

  border-radius: 10px;

  display:flex; align-items:center; justify-content:center;

  background: linear-gradient(135deg, rgba(255,176,32,.18), rgba(124,92,255,.18));

  border:1px solid rgba(255,255,255,.14);

  font-weight:900;

  font-size:12px;

  color: var(--text);

}

.wName{font-weight:900}

.empty{color:var(--muted2); font-size:13px}

.empty.small{font-size:12px}

.history{

  border-top:1px solid var(--stroke);

  padding: 12px 18px 18px;

}

.historyHead{

  display:flex; align-items:center; justify-content:space-between;

  gap:10px;

}

.historyHead h3{margin:0; font-size:14px}

.historyList{

  margin-top:10px;

  display:flex;

  flex-direction:column;

  gap:10px;

}

.hItem{

  border:1px solid var(--stroke2);

  border-radius: 14px;

  background: rgba(4,8,16,.55);

  padding: 10px 12px;

}

.hTop{

  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;

}

.hTitle{font-weight:900}

.hMeta{font-size:12px; color:var(--muted2)}

.hWinners{margin-top:8px; font-size:13px; color:var(--text)}

.hWinners span{color:var(--muted2)}

.foot{

  padding: 12px 18px 18px;

  border-top:1px solid var(--stroke);

  display:flex; justify-content:space-between; align-items:center;

  gap:10px; flex-wrap:wrap;

}

.badge{

  font-size:12px;

  padding:6px 10px;

  border-radius:999px;

  border:1px solid var(--stroke2);

  background: rgba(255,255,255,.03);

}

.muted{color:var(--muted2); font-size:12px}

.kbd{

  display:inline-flex;

  padding:2px 7px;

  border-radius:8px;

  border:1px solid var(--stroke2);

  background: rgba(0,0,0,.25);

  font-size:12px;

  font-weight:900;

}

.toast{

  position:fixed;

  left:50%;

  bottom:20px;

  transform: translateX(-50%);

  background: rgba(4,8,16,.85);

  border:1px solid var(--stroke2);

  border-radius: 999px;

  padding: 10px 14px;

  color:var(--text);

  box-shadow: 0 20px 60px rgba(0,0,0,.5);

  opacity:0;

  pointer-events:none;

  transition: opacity .25s ease, transform .25s ease;

  z-index: 50;

  font-weight:800;

}

.toast.show{

  opacity:1;

  transform: translateX(-50%) translateY(-6px);

}

@media (max-width: 980px){

  .wrap{grid-template-columns: 1fr; }

}