:root{
  /* palette Emerals Park — solo blu, giallo, rosa (niente nero/rosso/toni cupi) */
  --blue:#2f6fed;
  --blue-dark:#1b4fc9;
  --blue-pale:#eaf1ff;
  --yellow:#ffd23f;
  --yellow-dark:#e0a600;
  --pink:#ff4f9e;
  --pink-dark:#d6317e;

  --paper:#ffffff;      /* sfondo pagina */
  --panel:#f4f7ff;      /* sfondo carte/pannelli */
  --panel-light:#ffffff;
  --ink:#16264a;         /* testo principale (blu molto scuro, non nero) */
  --muted:#5c6b8a;       /* testo secondario */

  /* alias mantenuti per compatibilità con i riferimenti in app.js */
  --red: var(--pink);
  --red-dark: var(--pink-dark);
  --green: var(--blue);
  --black: var(--paper);
  --asphalt: var(--panel);
  --asphalt-light: var(--panel-light);
  --white: var(--ink);
  --silver: var(--muted);
  --amber: var(--yellow-dark);

  --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(--paper);
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(47,111,237,0.10), transparent 55%),
    radial-gradient(ellipse at 90% 110%, rgba(255,79,158,0.10), transparent 55%);
  color:var(--ink);
  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(--blue) 0 18px,
    var(--yellow) 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(--ink);
  margin:0;
}
.wordmark span{color:var(--blue);}
.tagline{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--muted);
  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(--panel-light), var(--panel));
  border:1px solid rgba(22,38,74,0.08);
  border-radius:10px;
  box-shadow:0 20px 50px rgba(22,38,74,0.12);
  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(--blue);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:8px;height:8px;
  background:var(--blue);
  border-radius:50%;
  box-shadow:0 0 8px rgba(47,111,237,0.5);
  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(--muted);
  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(--paper);
  border:1px solid rgba(22,38,74,0.16);
  border-radius:6px;
  padding:14px 16px;
  font-family:var(--font-mono);
  font-size:0.95rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink);
  outline:none;
  transition:border-color 0.2s ease;
  min-width:0;
}
.field-input::placeholder{color:#9aa7c4; letter-spacing:0.05em;}
.field-input:focus{border-color:var(--blue);}

.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:#ffffff;
  background:linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);
  box-shadow:0 8px 20px rgba(47,111,237,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  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(47,111,237,0.45), inset 0 1px 0 rgba(255,255,255,0.3);}
.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(22,38,74,0.18);
  color:var(--muted);
}
.btn-ghost:hover{border-color:var(--blue); color:var(--ink); 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(--pink);
  margin-top:12px;
  min-height:16px;
  letter-spacing:0.02em;
}

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

.demo-divider{
  display:flex;
  align-items:center;
  text-align:center;
  margin:22px 0 16px;
  color:#8a97b8;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
}
.demo-divider::before,
.demo-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(22,38,74,0.1);
}
.demo-divider span{padding:0 12px;}

.wheel-name{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--yellow-dark);
  margin:-16px 0 22px;
}

/* ---------- 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(--ink);
  z-index:5;
  filter:drop-shadow(0 3px 4px rgba(22,38,74,0.35));
}
.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(--blue-pale) 0deg 6deg,
      #dbe6ff 6deg 12deg
    );
  box-shadow:
    inset 0 0 0 10px var(--panel),
    0 14px 34px rgba(22,38,74,0.18);
}
.small .tread-ring{box-shadow:inset 0 0 0 6px var(--panel), 0 8px 20px rgba(22,38,74,0.18);}

.wheel-disc{
  position:absolute;
  top:16px; left:16px; right:16px; bottom:16px;
  border-radius:50%;
  box-shadow:0 0 0 3px var(--panel), 0 0 0 6px rgba(22,38,74,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(255,255,255,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:#ffffff;
  -webkit-text-stroke:0.6px rgba(22,38,74,0.85);
  text-shadow:
    0 1px 2px rgba(22,38,74,0.9),
    0 0 3px rgba(22,38,74,0.5);
  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(22,38,74,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(--blue) 0deg 20deg,
    var(--yellow) 20deg 40deg
  );
  box-shadow:0 0 0 3px var(--panel), 0 6px 14px rgba(22,38,74,0.2);
  z-index:4;
}
.hub::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--paper);
}
.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(--panel-light), var(--panel));
  border:1px solid rgba(47,111,237,0.3);
  border-radius:10px;
  padding:22px 24px;
  box-shadow:0 16px 40px rgba(22,38,74,0.12);
}
.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(--muted);
  margin-bottom:6px;
}
.result-prize{
  font-family:var(--font-display);
  font-size:1.8rem;
  font-weight:600;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 20px;
}
.result-note{
  color:var(--muted);
  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(--panel);
  padding:5px;
  border-radius:8px;
  border:1px solid rgba(22,38,74,0.08);
}
.tab-btn{
  flex:1;
  background:transparent;
  border:none;
  color:var(--muted);
  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(--blue); color:#ffffff;}

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

.slice-card{
  background:var(--panel);
  border:1px solid rgba(22,38,74,0.1);
  border-radius:8px;
  padding:12px 14px;
  margin-bottom:10px;
  transition:opacity 0.2s ease, border-color 0.2s ease;
}
.slice-card.paused{opacity:0.6; border-color:rgba(224,166,0,0.4);}

.slice-card-top{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}
.slice-card-top input[type="text"]{
  flex:1;
  background:var(--paper);
  border:1px solid rgba(22,38,74,0.14);
  border-radius:6px;
  padding:11px 12px;
  font-family:var(--font-body);
  font-size:0.88rem;
  color:var(--ink);
  outline:none;
  min-width:0;
}
.slice-card-top input[type="text"]:focus{border-color:var(--blue);}

.row-del{
  background:transparent;
  border:1px solid rgba(22,38,74,0.16);
  color:var(--muted);
  border-radius:6px;
  height:38px;
  width:38px;
  flex-shrink:0;
  cursor:pointer;
  font-size:1rem;
  line-height:1;
}
.row-del:hover{border-color:var(--pink); color:var(--pink);}

.slice-card-bottom{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--muted);
}
.slice-random-note{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--muted);
  letter-spacing:0.02em;
}

.slice-pause-btn{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.04em;
  text-transform:none;
  padding:7px 12px;
}
.slice-pause-btn.is-paused{color:var(--yellow-dark); border-color:rgba(224,166,0,0.45);}

.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:0 0 16px;
  padding:12px 14px;
  border-radius:6px;
  background:var(--panel);
  border:1px solid rgba(22,38,74,0.1);
}
.total-bar.ok{color:var(--blue); border-color:rgba(47,111,237,0.35);}
.total-bar.bad{color:var(--pink); border-color:rgba(255,79,158,0.35);}

.row-add{
  width:100%;
  background:transparent;
  border:1px dashed rgba(22,38,74,0.22);
  color:var(--muted);
  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(--blue); color:var(--ink);}

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

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

.employee-card{
  background:var(--panel);
  border:1px solid rgba(22,38,74,0.09);
  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(--muted);
  letter-spacing:0.05em;
}

.code-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-top:1px solid rgba(22,38,74,0.07);
  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(--ink);}
.code-row .code-date{color:var(--muted); font-size:0.72rem; letter-spacing:0.03em;}
.code-row .code-wheel{
  color:var(--yellow-dark);
  font-size:0.7rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.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(--yellow-dark); background:rgba(224,166,0,0.12); border:1px solid rgba(224,166,0,0.3);}
.code-status.used{color:var(--muted); background:rgba(22,38,74,0.04); border:1px solid rgba(22,38,74,0.08);}
.code-status.expired{color:var(--pink-dark); background:rgba(255,79,158,0.08); border:1px solid rgba(255,79,158,0.22);}
.code-prize{
  width:100%;
  color:var(--pink);
  font-size:0.8rem;
  letter-spacing:0.02em;
}

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

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

/* --- SCHERMATA MANUTENZIONE / LICENZA --- */
.maintenance-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--paper);
    color: var(--ink);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 999999; /* Sovrapposto a tutto il resto */
    padding: 20px;
}

.maintenance-content h1 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--ink);
    font-family: 'Barlow', sans-serif;
}

.maintenance-content p {
    font-size: 16px;
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
}