/* ============================================================
   Festa di Leonardo 🦕 — tema dinosauri, mobile-first
   ============================================================ */
:root {
  --green-900: #14432a;
  --green-700: #1f6e44;
  --green-600: #2f8f5b;
  --green-100: #e3f4e8;
  --leaf:      #5bb377;
  --sun:       #ffc83d;
  --volcano:   #ff7a3d;
  --cream:     #fdf6e8;
  --ink:       #20322a;
  --muted:     #6c8077;
  --card:      #ffffff;
  --danger:    #d6443c;
  --radius:    20px;
  --shadow:    0 10px 30px rgba(20, 67, 42, 0.14);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% -10%, #fff6da 0%, transparent 45%),
    radial-gradient(circle at 110% 5%, #d8f0e0 0%, transparent 50%),
    var(--cream);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 22px 18px 60px;
}

/* --- Header festa --- */
.hero {
  text-align: center;
  padding: 14px 10px 6px;
}
.hero .dino { font-size: 64px; line-height: 1; filter: drop-shadow(0 6px 8px rgba(20,67,42,.25)); }
.hero h1 {
  margin: 6px 0 2px;
  font-size: 30px;
  color: var(--green-700);
  letter-spacing: .5px;
}
.hero .age {
  display: inline-block;
  background: var(--sun);
  color: var(--green-900);
  font-weight: bold;
  padding: 3px 14px;
  border-radius: 999px;
  margin-top: 6px;
  box-shadow: var(--shadow);
}
.hero .sub { color: var(--muted); margin: 10px 0 0; font-size: 15px; }

/* --- Card --- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 20px;
  margin-top: 20px;
  border: 2px solid #fff;
}
.card h2 {
  margin: 0 0 4px;
  font-size: 20px;
  color: var(--green-700);
}
.card .lead { color: var(--muted); margin: 0 0 18px; font-size: 15px; }

/* --- Etichette + input --- */
label.field { display: block; margin-bottom: 16px; }
label.field > span { display: block; font-weight: bold; margin-bottom: 7px; font-size: 15px; }

input[type="text"], input[type="password"], textarea {
  width: 100%;
  font: inherit;
  padding: 13px 14px;
  border: 2px solid #dce9e0;
  border-radius: 14px;
  background: #fafdfb;
  color: var(--ink);
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 4px rgba(91,179,119,.2);
}
textarea { resize: vertical; min-height: 84px; }

/* --- Stepper numerico --- */
.stepper {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f3faf5;
  border: 2px solid #dce9e0;
  border-radius: 16px;
  padding: 8px;
}
.stepper button {
  width: 50px; height: 50px;
  flex: 0 0 50px;
  border: none;
  border-radius: 12px;
  background: var(--green-600);
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.stepper button:active { transform: scale(.92); }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper .value {
  flex: 1;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: var(--green-900);
}
.stepper .value small { display:block; font-size: 12px; color: var(--muted); font-weight: normal; }

/* --- Toggle partecipo / non partecipo --- */
.toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.toggle button {
  font: inherit;
  font-weight: bold;
  padding: 14px 8px;
  border-radius: 16px;
  border: 2px solid #dce9e0;
  background: #fafdfb;
  color: var(--muted);
  cursor: pointer;
}
.toggle button .ic { font-size: 24px; display: block; margin-bottom: 2px; }
.toggle button.sel-yes { border-color: var(--green-600); background: var(--green-100); color: var(--green-700); }
.toggle button.sel-no  { border-color: var(--volcano); background: #ffe9df; color: var(--volcano); }

/* --- Bottoni --- */
.btn {
  display: block;
  width: 100%;
  font: inherit;
  font-weight: bold;
  font-size: 17px;
  padding: 16px;
  border: none;
  border-radius: 16px;
  background: var(--volcano);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(255,122,61,.35);
  margin-top: 6px;
}
.btn:active { transform: translateY(1px); }
.btn.secondary {
  background: #fff;
  color: var(--green-700);
  border: 2px solid #dce9e0;
  box-shadow: none;
}
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* --- Messaggi --- */
.alert {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  margin: 14px 0;
}
.alert.ok   { background: var(--green-100); color: var(--green-700); }
.alert.err  { background: #ffe3e1; color: var(--danger); }
.alert.warn { background: #fff3d6; color: #946400; }
.hidden { display: none !important; }

/* --- Pillole info data --- */
.deadline {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 14px;
}
.deadline b { color: var(--green-700); }

/* --- Admin: statistiche --- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat .num { font-size: 32px; font-weight: bold; color: var(--green-700); line-height: 1; }
.stat .lbl { font-size: 13px; color: var(--muted); margin-top: 4px; }
.stat.big { grid-column: 1 / -1; background: var(--green-600); }
.stat.big .num, .stat.big .lbl { color: #fff; }

/* --- Admin: lista inviti --- */
.guest {
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-top: 12px;
}
.guest .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.guest .name { font-weight: bold; font-size: 16px; }
.guest .badge {
  font-size: 12px; font-weight: bold;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.badge.yes  { background: var(--green-100); color: var(--green-700); }
.badge.no   { background: #ffe9df; color: var(--volcano); }
.badge.wait { background: #eef1f0; color: var(--muted); }
.guest .meta { font-size: 14px; color: var(--ink); margin-top: 8px; }
.guest .note { font-size: 14px; color: var(--muted); margin-top: 6px; font-style: italic; }
.guest .actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.guest .actions button {
  font: inherit; font-size: 13px; font-weight: bold;
  padding: 8px 12px; border-radius: 10px; cursor: pointer; border: 2px solid #dce9e0;
  background: #fafdfb; color: var(--green-700);
}
.guest .actions button.del { color: var(--danger); border-color: #f3cfcc; }

.linkbox {
  display: flex; gap: 8px; margin-top: 10px;
}
.linkbox input { font-size: 13px; }

.section-title {
  margin: 28px 0 4px;
  color: var(--green-700);
  font-size: 18px;
}
.empty { text-align: center; color: var(--muted); padding: 24px 0; }

footer.foot {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 34px;
}
a.adminlink { color: var(--leaf); text-decoration: none; }

.spinner { text-align:center; color: var(--muted); padding: 30px 0; }