:root{
  --black:#0a0a0a;
  --asphalt:#161616;
  --asphalt-light:#211f1f;
  --red:#e10600;
  --red-dark:#8f0400;
  --white:#f5f5f0;
  --silver:#9a9a95;
  --amber:#ffb100;
  --green:#2ecc71;

  --font-display:'Teko', sans-serif;
  --font-body:'Barlow', sans-serif;
  --font-mono:'Space Mono', monospace;
  --font-wheel:'Rajdhani', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--black);
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(225,6,0,0.12), transparent 55%),
    radial-gradient(ellipse at 90% 110%, rgba(225,6,0,0.10), transparent 55%);
  color:var(--white);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

.kerb{
  height:14px;
  width:100%;
  background:repeating-linear-gradient(
    -45deg,
    var(--red) 0 18px,
    var(--white) 18px 36px
  );
  flex-shrink:0;
}

header{
  padding:28px 20px 18px;
  text-align:center;
  position:relative;
}
.wordmark{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:0.04em;
  font-size:clamp(2.4rem, 8vw, 3.6rem);
  line-height:0.9;
  text-transform:uppercase;
  color:var(--white);
  margin:0;
}
.wordmark span{color:var(--red);}
.tagline{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--silver);
  margin-top:6px;
}

main{
  max-width:560px;
  margin:0 auto;
  padding:10px 20px 60px;
  width:100%;
  flex:1;
}

.view{display:none;}
.view.active{display:block; animation:fadeUp 0.4s ease both;}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}

.card{
  background:linear-gradient(180deg, var(--asphalt-light), var(--asphalt));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,0.55);
  overflow:hidden;
}
.card-inner{padding:30px 26px;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--red);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:8px;height:8px;
  background:var(--red);
  border-radius:50%;
  box-shadow:0 0 8px var(--red);
  flex-shrink:0;
}
.card-title{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin:0 0 6px;
}
.card-copy{
  color:var(--silver);
  font-size:0.95rem;
  line-height:1.5;
  margin:0 0 24px;
}

.field-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.field-input{
  flex:1 1 160px;
  background:var(--black);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:6px;
  padding:14px 16px;
  font-family:var(--font-mono);
  font-size:0.95rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--white);
  outline:none;
  transition:border-color 0.2s ease;
  min-width:0;
}
.field-input::placeholder{color:#5a5a58; letter-spacing:0.05em;}
.field-input:focus{border-color:var(--red);}

.btn{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.1rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  border:none;
  border-radius:6px;
  padding:14px 24px;
  cursor:pointer;
  color:var(--white);
  background:linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow:0 8px 20px rgba(225,6,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  transition:transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(225,6,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none;}

.btn-ghost{
  background:transparent;
  box-shadow:none;
  border:1px solid rgba(255,255,255,0.18);
  color:var(--silver);
}
.btn-ghost:hover{border-color:var(--red); color:var(--white); box-shadow:none;}

.btn-small{
  font-size:0.85rem;
  padding:9px 14px;
  border-radius:5px;
}

.form-error{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--red);
  margin-top:12px;
  min-height:16px;
  letter-spacing:0.02em;
}

.hint{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:0.7rem;
  color:#5a5a58;
  letter-spacing:0.04em;
}
.hint b{color:var(--silver);}

/* ---------- wheel ---------- */
#view-wheel{text-align:center;}

.section-title{
  font-family:var(--font-display);
  font-size:1.9rem;
  font-weight:600;
  text-transform:uppercase;
  margin:0 0 26px;
}

.wheel-wrap{
  position:relative;
  width:min(320px, 82vw);
  aspect-ratio:1/1;
  margin:0 auto 30px;
}
.wheel-wrap.small{width:min(190px, 60vw); margin-bottom:14px;}

.pointer{
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:22px solid var(--white);
  z-index:5;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,0.5));
}
.small .pointer{border-left-width:9px; border-right-width:9px; border-top-width:14px;}

.tread-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      var(--black) 0deg 6deg,
      #1c1c1c 6deg 12deg
    );
  box-shadow:
    inset 0 0 0 10px var(--asphalt),
    0 14px 34px rgba(0,0,0,0.6);
}
.small .tread-ring{box-shadow:inset 0 0 0 6px var(--asphalt), 0 8px 20px rgba(0,0,0,0.6);}

.wheel-disc{
  position:absolute;
  top:16px; left:16px; right:16px; bottom:16px;
  border-radius:50%;
  box-shadow:0 0 0 3px var(--asphalt), 0 0 0 6px rgba(255,255,255,0.08);
  overflow:hidden;
}
.small .wheel-disc{top:10px; left:10px; right:10px; bottom:10px;}

#wheel, #wheel-preview{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
}

.slice-divider{
  position:absolute;
  bottom:50%; left:50%;
  width:2px;
  margin-left:-1px;
  height:50%;
  background:rgba(245,245,240,0.85);
  transform-origin:50% 100%;
  pointer-events:none;
}

.slice-label{
  position:absolute;
  top:50%; left:50%;
  width:50%;
  height:2px;
  transform-origin:0% 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.slice-label span{
  display:inline-block;
  font-family:var(--font-wheel);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--white);
  -webkit-text-stroke:0.6px rgba(0,0,0,0.8);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.9),
    0 0 3px rgba(0,0,0,0.7);
  max-width:76px;
  line-height:1.1;
  text-align:center;
}
.small .slice-label span{font-size:0.74rem; max-width:46px; -webkit-text-stroke:0.4px rgba(0,0,0,0.75);}

.hub{
  position:absolute;
  top:50%; left:50%;
  width:15%; height:15%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  padding:4px;
  background:repeating-conic-gradient(
    var(--red) 0deg 20deg,
    var(--white) 20deg 40deg
  );
  box-shadow:0 0 0 3px var(--asphalt), 0 6px 14px rgba(0,0,0,0.5);
  z-index:4;
}
.hub::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--black);
}
.small .hub{width:13%; height:13%; padding:3px;}
.small .hub::after{inset:3px;}

#spin-btn{font-size:1.3rem; padding:16px 40px;}

.result-card{
  display:none;
  margin-top:26px;
  background:linear-gradient(180deg, var(--asphalt-light), var(--asphalt));
  border:1px solid rgba(225,6,0,0.35);
  border-radius:10px;
  padding:22px 24px;
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
}
.result-card.visible{display:block; animation:fadeUp 0.4s ease both;}
.result-eyebrow{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--silver);
  margin-bottom:6px;
}
.result-prize{
  font-family:var(--font-display);
  font-size:1.8rem;
  font-weight:600;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 20px;
}
.result-note{
  color:var(--silver);
  font-size:0.85rem;
  margin:0 0 20px;
}

/* ---------- admin / employee shared ---------- */
.admin-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
  gap:10px;
  flex-wrap:wrap;
}
.admin-header h2{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:600;
  text-transform:uppercase;
  margin:0;
}

.sub-title{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1.3rem;
  font-weight:600;
  margin:24px 0 10px;
}

.tabs{
  display:flex;
  gap:6px;
  margin-bottom:22px;
  background:var(--black);
  padding:5px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
}
.tab-btn{
  flex:1;
  background:transparent;
  border:none;
  color:var(--silver);
  font-family:var(--font-display);
  font-size:1rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:10px 8px;
  border-radius:5px;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}
.tab-btn.active{background:var(--red); color:var(--white);}

.tab-panel{display:none;}
.tab-panel.active{display:block;}

.slice-row{
  display:grid;
  grid-template-columns:1fr 72px 34px;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}
.slice-row input[type="text"]{
  background:var(--black);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;
  padding:11px 12px;
  font-family:var(--font-body);
  font-size:0.88rem;
  color:var(--white);
  outline:none;
  min-width:0;
}
.slice-row input[type="text"]:focus{border-color:var(--red);}
.slice-row input[type="number"]{
  background:var(--black);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;
  padding:11px 8px;
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--amber);
  outline:none;
  text-align:center;
  min-width:0;
}
.slice-row input[type="number"]:focus{border-color:var(--red);}
.row-del{
  background:transparent;
  border:1px solid rgba(255,255,255,0.14);
  color:var(--silver);
  border-radius:6px;
  height:38px;
  cursor:pointer;
  font-size:1rem;
  line-height:1;
}
.row-del:hover{border-color:var(--red); color:var(--red);}

.total-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:0.8rem;
  letter-spacing:0.05em;
  margin:16px 0;
  padding:12px 14px;
  border-radius:6px;
  background:var(--black);
  border:1px solid rgba(255,255,255,0.08);
}
.total-bar.ok{color:var(--green); border-color:rgba(46,204,113,0.35);}
.total-bar.bad{color:var(--red); border-color:rgba(225,6,0,0.35);}

.row-add{
  width:100%;
  background:transparent;
  border:1px dashed rgba(255,255,255,0.2);
  color:var(--silver);
  border-radius:6px;
  padding:11px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  margin-bottom:16px;
}
.row-add:hover{border-color:var(--red); color:var(--white);}

.action-row{display:flex; gap:10px; flex-wrap:wrap;}

.preview-wrap{text-align:center; margin-bottom:24px;}

.employee-card{
  background:var(--black);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  padding:16px;
  margin-bottom:12px;
}
.employee-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.employee-name{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:600;
  text-transform:uppercase;
}
.employee-code{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--silver);
  letter-spacing:0.05em;
}

.code-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,0.06);
  font-family:var(--font-mono);
  font-size:0.82rem;
  flex-wrap:wrap;
}
.code-row:first-of-type{border-top:none;}
.code-row .code-num{letter-spacing:0.1em; color:var(--white);}
.code-row .code-date{color:var(--silver); font-size:0.72rem; letter-spacing:0.03em;}
.code-status{
  margin-left:auto;
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:20px;
  font-variant-numeric:tabular-nums;
}
.code-status.active{color:var(--amber); background:rgba(255,177,0,0.12); border:1px solid rgba(255,177,0,0.3);}
.code-status.used{color:var(--silver); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);}
.code-status.expired{color:#c97b7b; background:rgba(225,6,0,0.08); border:1px solid rgba(225,6,0,0.2);}
.code-prize{
  width:100%;
  color:var(--red);
  font-size:0.8rem;
  letter-spacing:0.02em;
}

.big-code{
  margin-top:20px;
  padding:20px;
  background:var(--black);
  border:1px dashed var(--red);
  border-radius:8px;
}
.big-code .label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--silver);
  margin-bottom:8px;
}
.big-code .code{
  font-family:var(--font-display);
  font-size:3rem;
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--amber);
  line-height:1;
}

.empty-note{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:#5a5a58;
  letter-spacing:0.04em;
  padding:10px 0;
}