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

* {
  box-sizing: border-box;
  font-family: "Cairo", sans-serif;
}
body {
  font-family:'Cairo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f7;
  color: #111;
}

header { display: none; }

main {
  padding: 14px;
  max-width: 430px;
  margin: auto;
}

.card {
  background: #fff;
  border-radius: 22px;
  padding: 18px;
  margin-top: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

label {
  font-size: 14px;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
  display: block;
}

.field-card {
  background:#fafafa;
  padding:14px;
  border-radius:20px;
  margin-top:10px;
}

.option-input {
  width: 100%;
  padding: 12px;
  border: none;
  background: #fff;
  border-radius: 14px;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: box-shadow .2s, transform .2s;
}
.option-input:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(79,70,229,0.55);
  transform: scale(1.02);
}

button {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  margin-top: 8px;
  transition: transform .15s, box-shadow .15s, background .15s;
}
button:active {
  transform: scale(.97);
  box-shadow: 0 0 0 rgba(0,0,0,0.1);
}
.primary {
  background:#4f46e5;
  color:#fff;
  box-shadow:0 2px 8px rgba(79,70,229,.35);
}
.secondary {
  background:#e5e7eb;
  color:#111;
}

/* قائمة الخيارات بجانب التوقيت */
.options-menu{
  position:absolute;
  top:46px;
  inset-inline-end:0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:10px;
  min-width:240px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  z-index:9999;
}
.options-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:0;
  background:#f8fafc;
  cursor:pointer;
  font-weight:700;
}
.options-item:hover{ background:#eef2ff; }
.options-item i{ width:18px; text-align:center; }
.options-sep{
  height:1px;
  background:#e5e7eb;
  margin:10px 4px;
  border-radius:2px;
}

.option-input-wrapper {
  display:flex;
  gap:8px;
  align-items:center;
}
.option-input-wrapper button {
  width:auto;
  padding:10px 14px;
  font-size:13px;
}

.contest-card {
  background:#fff;
  padding:20px;
  border-radius:20px;
  margin-top:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  animation:fadeInCard .4s ease;
}

.option-row {
  background:#f7f7fb;
  padding:12px;
  margin-top:10px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  animation: fadeInRow .4s ease;
  cursor:pointer;
  transition: background .35s ease, box-shadow .35s ease, transform .2s ease;
}

.progress {
  width:100%;
  height:10px;
  background:#e5e7eb;
  border-radius:20px;
  overflow:hidden;
}
.progress-bar {
  height:100%;
  background:#4f46e5;
  width:0%;
  transition:width .4s, transform .2s;
}

.vote-count {
  transition: transform .2s;
  display:inline-block;
}

#toast {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:#ef4444;
  color:#fff;
  padding:14px 22px;
  border-radius:20px;
  opacity:0;
  pointer-events:none;
  transition:.4s;
  z-index:9999;
  font-size:14px;
}

/* المراكز الثلاثة الأولى */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.rank-first {
  border:2px solid #facc15 !important;
  box-shadow:0 0 18px #facc15 !important;
  background: linear-gradient(90deg, #fff 0%, #fff7cc 50%, #fff 100%);
  background-size: 200px 100%;
  animation: shimmer 2s infinite linear;
}
.rank-second {
  border:2px solid #c0c0c0 !important;
  box-shadow:0 0 18px #c0c0c0 !important;
  background: linear-gradient(90deg, #fff 0%, #e8e8e8 50%, #fff 100%);
  background-size: 200px 100%;
  animation: shimmer 2.2s infinite linear;
}
.rank-third {
  border:2px solid #cd7f32 !important;
  box-shadow:0 0 18px #cd7f32 !important;
  background: linear-gradient(90deg, #fff 0%, #f5d2b0 50%, #fff 100%);
  background-size: 200px 100%;
  animation: shimmer 2.4s infinite linear;
}

/* بقية المراكز (أزرق وبنفس فخامة الثلاثة الأوائل) */
.rank-blue {
  border:2px solid #3b82f6 !important;
  box-shadow:0 0 18px rgba(59,130,246,.55) !important;
  background: linear-gradient(90deg, #ffffff 0%, #dbeafe 50%, #ffffff 100%);
  background-size: 200px 100%;
  animation: shimmer 2.35s infinite linear;
}

.option-row.disabled{
  cursor:not-allowed !important;
  opacity: 100;
  filter:saturate(.85);
}

/* شريط الوقت + تنبيهات */
.countdown-text{
  font-weight:800;
  font-size:14px;
  line-height:1.35;
  display:block;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
}

/* سطر العداد الأساسي */
.countdown-line{
  display:block;
}

/* أخضر حتى آخر ساعة */
.countdown-text.is-green{
  color:#16a34a;
  background:linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.06));
  border-color:rgba(34,197,94,.28);
  box-shadow:0 10px 26px rgba(34,197,94,.12);
}

/* برتقالي حتى آخر 10 دقائق + أثناء مهلة الدفع */
.countdown-text.is-orange{
  color:#c2410c;
  background:linear-gradient(180deg, rgba(251,146,60,.14), rgba(245,158,11,.08));
  border-color:rgba(245,158,11,.38);
  box-shadow:0 10px 26px rgba(245,158,11,.14);
}

/* أحمر حتى نهاية التصويت */
.countdown-text.is-red{
  color:#e11d48;
  background:linear-gradient(180deg, rgba(244,63,94,.14), rgba(244,63,94,.07));
  border-color:rgba(244,63,94,.34);
  box-shadow:0 10px 26px rgba(244,63,94,.14);
}

/* بعد انتهاء كل شيء */
.countdown-text.is-ended{
  color:#334155;
  background:rgba(255,255,255,.75);
  border-color:rgba(15,23,42,.10);
  box-shadow:none;
}

/* التنبيه يظهر بسطر جديد */
.countdown-warn{
  display:block;
  width:100%;
  margin-top:6px;
  padding:6px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:800;
  color:#c2410c;
  background:linear-gradient(90deg, rgba(251,146,60,.18), rgba(245,158,11,.22));
  border:1px solid rgba(245,158,11,.45);
  box-shadow:0 10px 22px rgba(245,158,11,.18);
}

.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9998;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:18px 12px;
}
.modal {
  background:#fff;
  width:90%;
  max-width:380px;
  border-radius:20px;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  animation:fadeInCard .3s ease;
  margin:auto;
  max-height:calc(100dvh - 36px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.modal h3 {
  margin:0 0 10px;
  font-size:18px;
}

.leader-badge {
  display:inline-block;
  background:#facc15;
  color:#78350f;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  margin-right:4px;
}

@keyframes fadeTitle {
  0%{opacity:0;transform:translateY(-6px);}
  100%{opacity:1;transform:translateY(0);}
}
@keyframes fadeDesc {
  0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes fadeInCard {
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeInRow {
  from{opacity:0;transform:translateY(4px);}
  to{opacity:1;transform:translateY(0);}
}

/* تأثير إعادة الترتيب */
@keyframes reorderAnim {
  from{transform:translateY(10px);opacity:0.4;}
  to{transform:translateY(0);opacity:1;}
}
.option-row.reordered{
  animation:reorderAnim .5s ease;
}

/* تحديثات تفاعلية لقائمة المتسابقين (قائمة ثابتة + FLIP) */
@keyframes voteBump {
  0%{transform:scale(1);}
  35%{transform:scale(1.04);}
  100%{transform:scale(1);}
}
.option-row.vote-bump{
  animation:voteBump .52s ease;
}

/* نبضة ناعمة عند تغيّر الأصوات (لكل المتسابقين) */
@keyframes votePulse {
  0%{transform:translateY(0);}
  40%{transform:translateY(-1px);}
  100%{transform:translateY(0);}
}
.option-row.vote-pulse{
  animation:votePulse .62s ease;
}

/* تلوين أخضر مؤقت عند زيادة/تغيّر الأصوات (مع نبضة انسيابية) */
.option-row.vote-greenflash{
  background:rgba(16,185,129,.10);
  box-shadow:0 10px 26px rgba(16,185,129,.18);
}
.option-row.vote-greenflash .vote-count{
  color:#059669 !important;
}
.option-row.vote-greenflash .progress-bar{
  background:#10b981;
}

@keyframes barPulse {
  0%{transform:scaleY(1);}
  45%{transform:scaleY(1.18);}
  100%{transform:scaleY(1);}
}
.progress-bar.bar-pulse{
  transform-origin:center;
  animation:barPulse .62s ease;
}

@keyframes rankUpGlow {
  0%{box-shadow:0 0 0 rgba(16,185,129,0);}
  40%{box-shadow:0 0 0 6px rgba(16,185,129,.18);}
  100%{box-shadow:0 0 0 rgba(16,185,129,0);}
}
.option-row.rank-up{
  animation:rankUpGlow .7s ease;
}

@keyframes rankDownDim {
  0%{opacity:1;}
  35%{opacity:.82;}
  100%{opacity:1;}
}
.option-row.rank-down{
  animation:rankDownDim .7s ease;
}

@keyframes listShift {
  0%{transform:translateY(0);}
  40%{transform:translateY(-1px);}
  100%{transform:translateY(0);}
}
#options-list.list-shift{
  animation:listShift .4s ease;
}

.bundles-scroll {
  max-height:260px;
  overflow-y:auto;
  padding-left:4px;
  padding-right:4px;
}
.bundle-item:active{
  transform:scale(.96);
  transition:transform .15s;
}

@media (max-width:600px){
  main{padding:10px;}
  .card{padding:16px;}
}

/* ==============================
   تقرير PDF (client-side)
   ============================== */
.pdf-report{
  direction: rtl;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial;
  background: #0b1220;
  color: #e5e7eb;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* صفحات PDF: منع تقطيع الكتل بين الصفحات */
.pdf-page{
  padding-bottom: 2px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.pdf-page.break-after{
  break-after: page;
  page-break-after: always;
}
.pdf-hero{
  padding: 22px 22px 16px;
  background: radial-gradient(900px 300px at 20% 10%, rgba(59,130,246,.45), transparent 55%),
              radial-gradient(900px 300px at 90% 0%, rgba(16,185,129,.35), transparent 55%),
              linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pdf-title{
  font-size: 20px;
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: .2px;
  color:#ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.pdf-subtitle{
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,.88);
}
.pdf-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 22px 12px;
}
.pdf-kpi{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 64px;
}
.pdf-kpi .kpi-label{ font-size: 11px; color: rgba(229,231,235,.75); }
.pdf-kpi .kpi-value{ font-size: 18px; font-weight: 800; margin-top: 4px; }
.pdf-section{
  padding: 10px 22px 16px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.pdf-section h4{
  margin: 10px 0 10px;
  font-size: 14px;
  color: #ffffff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  padding: 8px 10px;
  border-radius: 12px;
}
.pdf-panels{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.pdf-panel{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.pdf-table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
}
.pdf-table th, .pdf-table td{
  padding: 8px 10px;
  font-size: 12px;
}
.pdf-table th{
  text-align: right;
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.10);
}
.pdf-table thead{ display: table-header-group; }
.pdf-table tr{ break-inside: avoid; page-break-inside: avoid; }
.pdf-table tr:nth-child(even) td{
  background: rgba(255,255,255,.03);
}
.pdf-footer{
  padding: 10px 22px 18px;
  font-size: 11px;
  color: rgba(255,255,255,.80);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* تحسين مظهر التقرير عند التحويل إلى PDF (html2canvas) */
.pdf-report *{
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@media (max-width: 600px){
  .pdf-grid{ grid-template-columns: repeat(2, 1fr); }
  .pdf-panels{ grid-template-columns: 1fr; }
}



/* نافذة التحقق من متابعة الزائر */
.watch-modal.hidden{ display:none; }
.watch-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; font-family: inherit; }
.watch-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.watch-modal-card{
  position:relative;
  width:min(520px, 92vw);
  border-radius: 18px;
  padding: 18px 18px 14px;
  background: linear-gradient(180deg, rgba(14,18,40,.95), rgba(10,12,26,.95));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
}
.watch-modal-title{ font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.watch-modal-sub{ font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.78); margin-bottom: 14px; }
.watch-modal-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.watch-btn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}
.watch-btn:hover{ background: rgba(255,255,255,.10); }
.watch-btn.primary{
  border-color: rgba(46,204,113,.35);
  background: rgba(46,204,113,.16);
}
.watch-modal-timer{ margin-top: 10px; font-size: 12px; color: rgba(255,193,7,.95); text-align:left; }

.poll-paused-note{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,193,7,.14);
  border: 1px solid rgba(255,193,7,.25);
  color: rgba(255,193,7,.95);
  font-weight: 800;
  cursor:pointer;
}


/* Online users badge */
.online-count-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(16,185,129,.12);
  color:#047857;
  font-weight:800;
  font-size:13px;
  line-height:1;
  border:1px solid rgba(16,185,129,.28);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* Floating online counter (top-left) */
.online-floating{
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(16,185,129,.14);
  color: #047857;
  border: 1px solid rgba(16,185,129,.28);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.online-floating .online-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(16,185,129,.18);
}

.online-floating .online-count-number{
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  min-width: 14px;
  text-align: center;
}

.online-floating:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

/* Floating update paused banner (top-right) */
.update-paused-floating{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 220px;
  max-width: min(92vw, 420px);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(239,68,68,.14);
  color: #991b1b;
  border: 1px solid rgba(239,68,68,.32);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select: none;
}

.update-paused-floating.hidden{ display:none; }

.update-paused-floating .upd-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.update-paused-floating .upd-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(239,68,68,.18);
}

.update-paused-floating .upd-text{ min-width: 0; }
.update-paused-floating .upd-title{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.update-paused-floating .upd-sub{
  font-weight: 700;
  font-size: 11px;
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.update-paused-floating .upd-btn{
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: #fff;
  background: #ef4444;
  box-shadow: 0 10px 18px rgba(239,68,68,.26);
  transition: transform .12s ease, filter .12s ease;
}

.update-paused-floating .upd-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.update-paused-floating .upd-btn:active{ transform: translateY(0); filter: brightness(.98); }


/* ===== تتويج الفائز النهائي + ألعاب نارية ===== */
body.contest-finished{
  background:inherit;
}

.winner-fireworks-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s ease;
  z-index:9996;
}
.winner-fireworks-canvas.active{ opacity:1; }

.option-row{
  position:relative;
  overflow:hidden;
}

.winner-ribbon-below{
  display:none;
  padding:4px 10px;
  border-radius:999px;
  background:linear-gradient(90deg, #92400e, #f59e0b, #facc15);
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(245,158,11,.22);
}

.option-row.winner-final{
  border:2px solid #facc15 !important;
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,247,204,.98));
  box-shadow:0 14px 36px rgba(250,204,21,.24);
  z-index:2;
}
.option-row.winner-final .option-photo{
  border:3px solid rgba(250,204,21,.95);
  box-shadow:0 10px 24px rgba(250,204,21,.18);
}
.option-row.winner-final .progress{
  background:rgba(250,204,21,.16);
}
.option-row.winner-final .progress-bar{
  background:linear-gradient(90deg, #f59e0b, #facc15 55%, #fde68a);
  box-shadow:0 0 14px rgba(250,204,21,.35);
}
.option-row.winner-final .vote-count{
  color:#92400e !important;
  font-weight:800;
}
.option-row.winner-final .winner-ribbon-below{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (max-width:600px){
  .winner-ribbon-below{ font-size:11px; padding:4px 9px; }
}


/* ===== تسجيل المتسابق مع معاينة مباشرة ===== */
.register-modal{ max-width:720px !important; }
.reg-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(250px,.9fr);
  gap:16px;
  align-items:start;
}
.reg-fields{ min-width:0; }
.reg-text-input{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.reg-text-input:focus{
  outline:none;
  border-color:#6366f1;
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
  transform:translateY(-1px);
}
.reg-upload-dropzone{
  margin-top:0;
  width:100%;
  min-height:152px;
  border:2px dashed rgba(99,102,241,.28);
  background:linear-gradient(180deg, rgba(238,242,255,.8), rgba(255,255,255,.96));
  border-radius:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:18px;
  color:#312e81;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.reg-upload-dropzone.is-dragging,
.reg-upload-dropzone:hover{
  border-color:#4f46e5;
  box-shadow:0 14px 30px rgba(79,70,229,.12);
  transform:translateY(-1px);
}
.reg-upload-dropzone.has-file{
  border-style:solid;
  background:linear-gradient(180deg, rgba(236,253,245,.96), rgba(255,255,255,.98));
  border-color:rgba(16,185,129,.45);
  color:#065f46;
}
.reg-upload-icon{
  width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(79,70,229,.10);
  font-size:22px;
}
.reg-upload-title{ font-weight:800; font-size:15px; }
.reg-upload-sub{ font-size:12px; color:#64748b; }
.reg-upload-file{
  font-size:12px;
  color:#0f172a;
  background:rgba(255,255,255,.9);
  padding:6px 10px;
  border-radius:999px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.reg-preview-wrap{
  background:linear-gradient(180deg, #f8fafc, #ffffff);
  border:1px solid #e2e8f0;
  border-radius:22px;
  padding:14px;
}
.reg-preview-label{
  font-size:13px;
  font-weight:800;
  color:#334155;
  margin-bottom:10px;
}
.reg-preview-card{
  background:#fff;
  padding:12px;
  border-radius:18px;
  border:2px solid #3b82f6;
  box-shadow:0 10px 24px rgba(59,130,246,.10);
}
.reg-preview-inner{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.reg-preview-image{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
  border:2px solid rgba(59,130,246,.18);
  background:#fff;
}
.reg-preview-main{ flex:1; min-width:0; }
.reg-preview-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.reg-preview-name{
  font-size:16px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.reg-preview-votes{ flex:0 0 auto; }
.reg-preview-progress{ margin-top:10px; }
.reg-preview-phone{
  margin-top:8px;
  font-size:12px;
  color:#64748b;
  line-height:1.7;
  word-break:break-word;
}
@media (max-width:640px){
  .reg-layout{ grid-template-columns:1fr; }
}


@media (max-width:640px){
  #register-overlay{
    align-items:flex-start;
    padding:10px;
  }
  #register-overlay .register-modal{
    width:100%;
    max-height:calc(100dvh - 20px);
    padding:14px;
  }
}