@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito', 'Segoe UI', sans-serif;
  background: #eaf4ff;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(123, 176, 239, 0.28) 0%, transparent 35%),
    radial-gradient(circle at 92% 10%, rgba(96, 159, 233, 0.22) 0%, transparent 35%),
    radial-gradient(circle at 50% 55%, rgba(54, 104, 184, 0.10) 0%, transparent 38%),
    radial-gradient(circle at 15% 88%, rgba(164, 213, 255, 0.22) 0%, transparent 35%),
    radial-gradient(circle at 85% 82%, rgba(111, 164, 240, 0.20) 0%, transparent 35%);
  color: #163252;
  padding: 24px 16px;
  min-height: 100vh;
  position: relative;
}

body::before {
  content: "🎈 ✈️ ☁️ 🎈 ✈️ ☁️";
  position: fixed;
  top: 0; left: 0; right: 0;
  font-size: 1.5rem;
  letter-spacing: 4.5vw;
  color: rgba(95, 147, 216, 0.11);
  pointer-events: none;
  z-index: 0;
  padding: 10px;
  line-height: 3.8;
  word-break: break-all;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%2377aee7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'%3E%3Cpath d='M34 38c0-13 11-24 24-24s24 11 24 24c0 22-24 38-24 38S34 60 34 38Z'/%3E%3Cpath d='M51 76h14'/%3E%3Cpath d='M54 76l-6 12h20l-6-12'/%3E%3Cpath d='M150 48l32 9-18 10-4 18-9-13-18-4 13-9 4-18Z'/%3E%3Cpath d='M142 144c0-10 8-18 18-18s18 8 18 18c0 16-18 29-18 29s-18-13-18-29Z'/%3E%3Cpath d='M153 173h14'/%3E%3Cpath d='M156 173l-5 10h16l-5-10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.form-card {
  background: rgba(255,255,255,0.94);
  border-radius: 28px;
  padding: 30px;
  max-width: 580px;
  margin: 0 auto 32px;
  box-shadow: 0 12px 36px rgba(45, 96, 170, 0.14);
  border: 2px solid #cfe2f7;
  position: relative;
  z-index: 1;
}
.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 5px;
  background: linear-gradient(90deg, #7db7ef, #9dd0ff, #5f93d8, #8dc5ff);
  border-radius: 0 0 6px 6px;
}
.form-card h2 {
  font-size: 1.1rem;
  color: #245899;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.field-group { margin-bottom: 18px; }
.field-group label {
  display: block;
  font-weight: 800;
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: #163252;
}
.field-group .hint {
  font-size: 0.78rem;
  color: #6d88aa;
  margin-bottom: 6px;
  font-style: italic;
}
.optional { font-weight: 400; color: #8aa3c3; }

input[type="text"], textarea {
  width: 100%;
  padding: 11px 15px;
  border: 2px solid #cfe2f7;
  border-radius: 14px;
  font-size: 0.97rem;
  font-family: 'Nunito', 'Segoe UI', sans-serif;
  transition: border 0.2s, box-shadow 0.2s;
  background: #f5faff;
  color: #163252;
}
input[type="text"]::placeholder, textarea::placeholder { color: #8da4c2; }
input[type="text"]:focus, textarea:focus {
  outline: none;
  border-color: #7bb0e6;
  background: white;
  box-shadow: 0 0 0 4px rgba(123,176,230,0.18);
}
textarea { resize: vertical; min-height: 80px; }

.submit-section { text-align: center; margin-top: 8px; }
.submit-note {
  font-size: 0.82rem;
  color: #6d88aa;
  margin-bottom: 12px;
  font-style: italic;
  line-height: 1.7;
}
button[onclick="submitName()"] {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #4f86cc, #295fa9);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 1.05rem;
  cursor: pointer;
  font-weight: 800;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 5px 18px rgba(45,96,170,0.30);
  font-family: 'Nunito', 'Segoe UI', sans-serif;
}
button[onclick="submitName()"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45,96,170,0.34);
}
button[onclick="submitName()"]:active { transform: translateY(0); }
button[onclick="submitName()"]:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}

.msg { text-align: center; margin-top: 12px; font-weight: 700; font-size: 0.92rem; min-height: 24px; line-height: 1.5; }
.success { color: #2d6fb7; }
.error { color: #b14d4d; }
.loading { color: #3f72b6; animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 20;
  max-width: calc(100vw - 32px);
  min-width: min(420px, calc(100vw - 32px));
  padding: 16px 20px;
  border-radius: 18px;
  background: #fff;
  color: #163252;
  border: 2px solid #cfe2f7;
  box-shadow: 0 14px 34px rgba(45,96,170,0.24);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -14px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast.error {
  color: #9e3e3e;
  border-color: #efc3c3;
  background: #fff5f5;
}
.toast.success {
  color: #215f45;
  border-color: #a8ddc7;
  background: #f1fff7;
}
.toast.loading {
  color: #245899;
  border-color: #b9d8f7;
  background: #f4faff;
  animation: toastPulse 1.1s infinite;
}
@keyframes toastPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }

#loadingMsg {
  text-align: center;
  color: #4677b8;
  font-size: 0.95rem;
  font-style: italic;
  padding: 18px 0 6px;
  animation: pulse 1.2s infinite;
  position: relative;
  z-index: 1;
}

#panditjiWarning {
  display: none;
  max-width: 580px;
  margin: 0 auto 14px;
  background: #f1f8ff;
  border-left: 4px solid #7db7ef;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.88rem;
  color: #2d5f93;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 10px rgba(125,183,239,0.28);
}
#panditjiWarning strong { color: #245899; }

.stats-section {
  max-width: 900px;
  margin: 0 auto 24px;
  position: relative;
  z-index: 1;
  padding: 20px;
  background: rgba(255,255,255,0.96);
  border: 2px solid #bfd9f5;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(45,96,170,0.14);
}
.stats-title {
  text-align: center;
  font-size: 1.25rem;
  color: #245899;
  margin-bottom: 14px;
  font-weight: 900;
  line-height: 1.3;
}
.stats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.stat-chip {
  padding: 9px 22px;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 800;
  color: white;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  font-family: 'Nunito', 'Segoe UI', sans-serif;
}

.rashi-section {
  max-width: 900px;
  margin: 0 auto 14px;
  background: rgba(255,255,255,0.94);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 8px 22px rgba(45,96,170,0.10);
  border: 2px solid #cfe2f7;
  position: relative;
  z-index: 1;
}
.rashi-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px dotted #d7e7f8;
  color: #163252;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.rashi-letters-inline { font-size: 0.88rem; font-weight: 700; color: #6d88aa; }

.name-card {
  display: inline-block;
  margin: 5px;
  border-radius: 16px;
  overflow: hidden;
  vertical-align: top;
  width: 180px;
  box-shadow: 0 5px 14px rgba(45,96,170,0.14);
}
.name-card .name-header {
  padding: 8px 14px;
  color: white;
  font-weight: 800;
  font-size: 0.97rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.name-card .name-meta {
  padding: 7px 11px 4px;
  background: rgba(255,255,255,0.94);
  font-size: 0.75rem;
  color: #547094;
}
.name-card .name-meta .by { font-weight: 700; }
.name-card .name-meta .reason { font-style: italic; color: #6f8eb1; margin-top: 3px; line-height: 1.4; }

.vote-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 11px 8px;
  background: rgba(255,255,255,0.94);
  border-top: 1px solid #cfe2f7;
}
.vote-count { font-size: 0.78rem; font-weight: 800; color: #3d6fb0; }
.vote-actions { display: flex; gap: 6px; }
.vote-btn {
  padding: 4px 12px;
  border: 2px solid #7bb0e6;
  border-radius: 20px;
  background: white;
  color: #2f66ad;
  font-size: 0.78rem;
  font-weight: 800;
  font-family: 'Nunito', 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: all 0.18s;
  width: auto;
  box-shadow: none;
}
.vote-btn.up { border-color: #59a6e8; color: #2f66ad; }
.vote-btn.down { border-color: #e28b8b; color: #b14d4d; }
.vote-btn:hover { transform: translateY(-1px); }
.vote-btn.up:hover { background: #e8f2ff; box-shadow: 0 2px 8px rgba(45,96,170,0.18); }
.vote-btn.down:hover { background: #ffecec; box-shadow: 0 2px 8px rgba(177,77,77,0.12); }
.vote-btn.voted { color: white; border-color: transparent; cursor: default; }
.vote-btn.up.voted { background: linear-gradient(135deg, #59a6e8, #2f66ad); }
.vote-btn.down.voted { background: linear-gradient(135deg, #e28b8b, #b14d4d); }

.empty { color: #8da4c2; font-style: italic; font-size: 0.85rem; }

.footer {
  text-align: center;
  margin-top: 40px;
  font-size: 0.85rem;
  color: #6d88aa;
  padding: 16px 0 20px;
  border-top: 2px dotted #d7e7f8;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.hero-banner {
  background: linear-gradient(135deg, rgba(125,183,239,0.16) 0%, rgba(84,133,206,0.10) 45%, rgba(182,224,255,0.18) 100%);
  border: 2px solid #cfe2f7;
  border-radius: 16px;
  padding: 16px 20px;
  text-align: left;
  font-size: 0.93rem;
  line-height: 1.9;
  color: #1f436c;
}
.hero-banner strong { color: #245899; }
.hero-banner .cta { font-weight: 800; color: #245899; margin-top: 10px; display: block; font-size: 0.97rem; }

.page-title { font-size: 3rem; font-weight: 900; line-height: 1.25; margin-bottom: 16px; color: #163252; }
.t-lavender { color: #5c8fd6; }
.t-blue { color: #2f66ad; }
.t-pink { color: #7db7ef; }

.rashi-filter-host {
  max-width: 900px;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}
.rashi-filter-panel {
  background: rgba(255,255,255,0.94);
  border: 2px solid #cfe2f7;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(45,96,170,0.10);
  padding: 16px;
}
.rashi-filter-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rashi-filter-title {
  font-size: 0.9rem;
  font-weight: 900;
  color: #245899;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.rashi-filter-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rf-mode {
  padding: 9px 14px;
  border-radius: 999px;
  border: 2px solid #d3e4f8;
  background: #f5faff;
  color: #28538e;
  font-weight: 800;
  font-size: 0.84rem;
}
.rf-mode.active {
  background: linear-gradient(135deg, #4f86cc, #295fa9);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(45,96,170,0.24);
}
.rashi-filter-custom {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #d7e7f8;
}
.rashi-filter-custom.open { display: flex; }
.rashi-check-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #edf6ff;
  border: 1px solid #d3e4f8;
  color: #28538e;
  font-weight: 700;
  font-size: 0.82rem;
}
.rashi-check-pill input { accent-color: #2f66ad; }
@media (max-width: 700px) {
  .rashi-filter-top { align-items: stretch; }
  .rashi-filter-modes { width: 100%; }
  .rf-mode { flex: 1 1 100%; }
}