@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500..700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --paper: #F6F7FA;
  --ink: #16324A;
  --ink-soft: #47607A;
  --gold: #E39A3B;
  --gold-soft: #FBEAD2;
  --green: #2E8B57;
  --green-soft: #E1F3E9;
  --magenta: #B8348B;
  --magenta-soft: #F5E1EF;
  --blue: #1C7EC4;
  --blue-soft: #DDEEFA;
  --grey: #8C97A8;
  --line: #DCE1E8;
  --white: #FFFFFF;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(22,50,74,0.06) 1px, transparent 0);
  background-size: 22px 22px;
  color:var(--ink);
  font-family:'Inter', sans-serif;
  min-height:100vh;
}

body::before{
  content:"";
  display:block;
  height:5px;
  width:100%;
  background:linear-gradient(90deg, var(--blue), var(--green), var(--gold), var(--magenta));
}

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:48px 20px 80px;
}

header.hero{
  margin-bottom:36px;
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}

h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(32px, 6vw, 46px);
  margin:0 0 6px;
  line-height:1.05;
}

.logo-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.logo-img{
  height:clamp(56px, 11vw, 92px);
  width:auto;
  max-width:45vw;
}

.stat#countdown-stat .num{
  color:var(--green);
}

.stat#countdown-stat.stat-ended .num{
  color:#B3432B;
}

.subtitle{
  color:var(--ink-soft);
  font-size:12.5px;
  margin:0;
}

.date-note{
  display:inline-block;
  font-size:13px;
  color:var(--ink);
  background:var(--gold-soft);
  border-radius:8px;
  padding:8px 14px;
  margin:14px 0 0;
}

.status-note{
  display:inline-block;
  font-size:12.5px;
  border-radius:8px;
  padding:7px 14px;
  margin:8px 0 0;
}
.status-note.status-warn{
  color:#8A4A1F;
  background:#FBEAE5;
}
.status-note.status-ok{
  color:var(--green);
  background:var(--green-soft);
}

.help-video-note{
  font-size:12.5px;
  color:var(--ink-soft);
  background:var(--blue-soft);
  border-radius:8px;
  padding:7px 14px;
  margin:8px 0 0;
  display:inline-block;
}
.help-video-note a{
  color:var(--blue);
  font-weight:600;
  text-decoration:underline;
}

.stats{
  display:flex;
  gap:14px;
  margin-top:22px;
  flex-wrap:wrap;
  align-items:center;
}

.stat-refresh-btn{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  width:40px;
  height:40px;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:var(--ink-soft);
  transition:transform .5s ease, background .15s ease;
  align-self:stretch;
}
.stat-refresh-btn:hover{
  background:var(--paper);
  color:var(--gold);
}
.stat-refresh-btn.is-spinning{
  animation:statRefreshSpin .6s linear;
}
@keyframes statRefreshSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.stat{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 18px;
  min-width:110px;
}

.stat .num{
  font-family:'IBM Plex Mono', monospace;
  font-size:22px;
  font-weight:500;
}

.stat .label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--grey);
  margin-top:2px;
}

.youtube-embed-wrap{
  position:relative;
  width:100%;
  max-width:640px;
  margin:24px auto 0;
  padding-top:56.25%; /* rasio 16:9 */
  border-radius:12px;
  overflow:hidden;
  background:var(--ink);
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
}
.youtube-embed-wrap iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

.search-row{
  margin:28px 0 20px;
  position:relative;
}

.search-row input{
  width:100%;
  padding:14px 16px 14px 42px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-size:15px;
  font-family:'Inter', sans-serif;
  background:var(--white);
  outline:none;
  transition:border-color .15s ease;
}

.search-row input:focus{
  border-color:var(--gold);
}

/* Placeholder-nya SENGAJA dibuat lebih kecil dari ukuran font teks yang
   diketik (15px) -- supaya kalimat placeholder yang cukup panjang
   ("Nama/grup/Asal peserta (min. 3 huruf) atau no. peserta...") tetap
   muat terbaca UTUH di kotak pencarian, terutama di layar HP yang
   sempit, tanpa perlu memotong/menyingkat kalimatnya. */
.search-row input::placeholder{
  font-size:12.5px;
  color:var(--grey);
}

.search-row::before{
  content:"⌕";
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:var(--grey);
  font-size:18px;
  pointer-events:none;
}

#list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ticket{
  display:flex;
  align-items:stretch;
  background:var(--white);
  border:1px solid var(--line);
  border-left:4px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  position:relative;
}

.ticket.hadir{
  border-color:var(--green);
  border-left-color:var(--green);
}

.ticket.cat-vip{
  border-left-color:var(--gold);
}
.ticket.cat-panitia{
  border-left-color:var(--blue);
}
.ticket.cat-umum{
  border-left-color:var(--magenta);
}
.ticket.cat-other{
  border-left-color:var(--line);
}

/* Zebra-striping khusus kartu yang BELUM check-in (2 warna bergantian
   berdasarkan urutan di antara sesama kartu belum-hadir). Kartu yang sudah
   check-in (.hadir) tidak terpengaruh -- tetap latar putih seperti biasa. */
.ticket.row-light{
  background:#F4F5F7;
}
.ticket.row-dark{
  background:#E8EAED;
}

.ticket-main{
  flex:1;
  padding:18px 20px;
  min-width:0;
}

.ticket-top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.ticket-id{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--grey);
  flex-shrink:0;
}

.ticket-name{
  font-size:18px;
  font-weight:600;
}

.action-buttons-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.btn-add-participant{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--white);
  color:var(--ink);
  border:1.5px dashed var(--gold);
  border-radius:10px;
  padding:10px 16px;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:13.5px;
  cursor:pointer;
  transition:background .12s ease;
}
.btn-add-participant:hover{
  background:var(--gold-soft);
}
.btn-add-participant.btn-danger{
  color:#B3432B;
  border-color:#B3432B;
}
.btn-add-participant.btn-danger:hover{
  background:#FBEAE5;
}

.form-auto-note-danger{
  background:#FBEAE5;
  color:#B3432B;
  border:1px solid #E8A392;
}

button.btn-danger{
  background:#B3432B;
  color:var(--white);
}
button.btn-danger:hover{ opacity:0.85; }

.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(22,50,74,0.55);
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:100;
}
.modal-overlay.open{
  display:flex;
}

.modal-box{
  background:var(--paper);
  border-radius:14px;
  max-width:560px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  padding:24px 24px 20px;
  box-shadow:0 20px 50px rgba(22,50,74,0.35);
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.modal-head h2{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:22px;
  margin:0;
}

.form-auto-note{
  font-size:12px;
  color:var(--ink-soft);
  background:var(--gold-soft);
  border-radius:8px;
  padding:8px 12px;
  margin:0 0 16px;
}

.import-file-label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:6px;
}

.import-file-label input[type="file"]{
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:400;
  padding:9px 10px;
  border:1.5px dashed var(--line);
  border-radius:8px;
  background:var(--white);
  color:var(--ink);
}

.import-summary{
  margin-top:14px;
}

.import-summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}

.import-summary-item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px;
  text-align:center;
}
.import-summary-item strong{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:18px;
  color:var(--ink);
}
.import-summary-item span{
  font-size:10.5px;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.import-summary-item.ok strong{
  color:var(--green);
}
.import-summary-item.error strong{
  color:#B3432B;
}

.import-error-list{
  margin-top:12px;
  font-size:12px;
  color:var(--ink-soft);
  background:#FBEAE5;
  border-radius:8px;
  padding:10px 14px;
  max-height:180px;
  overflow-y:auto;
}
.import-error-list ul{
  margin:6px 0 0;
  padding-left:18px;
}
.import-error-list li{
  margin-bottom:4px;
}

.cleansing-group-list{
  margin-top:12px;
  font-size:12px;
  color:var(--ink-soft);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 14px;
  max-height:220px;
  overflow-y:auto;
}
.cleansing-group-list ul{
  margin:6px 0 0;
  padding-left:18px;
}
.cleansing-group-list li{
  margin-bottom:6px;
  line-height:1.5;
}

.modal-close{
  background:none;
  border:none;
  font-size:26px;
  line-height:1;
  color:var(--grey);
  cursor:pointer;
  padding:0 4px;
}
.modal-close:hover{ color:var(--ink); }

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
}

.form-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12.5px;
  font-family:'IBM Plex Mono', monospace;
  color:var(--ink-soft);
}

.field-wide{
  grid-column:1 / -1;
}

.form-grid input{
  font-family:'Inter', sans-serif;
  font-size:14px;
  padding:10px 12px;
  border:1.5px solid var(--line);
  border-radius:8px;
  outline:none;
  background:var(--white);
  color:var(--ink);
  transition:border-color .12s ease;
}
.form-grid input:focus{
  border-color:var(--gold);
}

.form-grid select{
  font-family:'Inter', sans-serif;
  font-size:14px;
  padding:10px 12px;
  border:1.5px solid var(--line);
  border-radius:8px;
  outline:none;
  background:var(--white);
  color:var(--ink);
  transition:border-color .12s ease;
}
.form-grid select:focus{
  border-color:var(--gold);
}

.form-grid label{
  position:relative;
}

.group-suggestions{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:2px;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:8px;
  box-shadow:0 4px 16px rgba(22,50,74,0.12);
  z-index:20;
  max-height:180px;
  overflow-y:auto;
}
.group-suggestions.open{ display:block; }
.group-suggestion-item{
  padding:9px 12px;
  font-family:'Inter', sans-serif;
  font-size:13px;
  color:var(--ink);
  cursor:pointer;
}
.group-suggestion-item:hover,
.group-suggestion-item.active{
  background:var(--paper);
}
.group-suggestion-item + .group-suggestion-item{
  border-top:1px solid var(--line);
}

.form-msg{
  min-height:18px;
  font-size:13px;
  margin-top:14px;
}
.form-msg.error{ color:#B3432B; }
.form-msg.success{ color:var(--green); }

.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}

.btn-secondary{
  background:var(--white);
  color:var(--ink-soft);
  border:1.5px solid var(--line);
}
.btn-secondary:hover{ background:var(--paper); }

@media (max-width:480px){
  .form-grid{ grid-template-columns:1fr; }
  .action-buttons-row{ flex-direction:column; }
  .btn-add-participant{ justify-content:center; }
  .import-summary-grid{ grid-template-columns:1fr; }
}

.age-chip{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  color:var(--ink-soft);
  background:var(--gold-soft);
  border-radius:20px;
  padding:3px 10px;
  flex-shrink:0;
}

.cat-chip{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  color:var(--white);
  background:var(--ink);
  border-radius:20px;
  padding:3px 10px;
  flex-shrink:0;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.ticket-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 20px;
  padding-top:12px;
  border-top:1px dashed var(--line);
}

.meta-item{
  font-size:13.5px;
  color:var(--ink);
  min-width:0;
  overflow-wrap:anywhere;
}

.meta-wide{
  grid-column:1 / -1;
}

.meta-label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--grey);
  margin-bottom:2px;
}

.reg-days-ago{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
  font-style:italic;
}

.wa-lupa-hp-link{
  display:inline-block;
  margin-left:6px;
  font-size:11px;
  color:#1F8A47;
  text-decoration:none;
  border-bottom:1px dashed #1F8A47;
}

.wa-lupa-hp-link:hover{
  color:#166534;
  border-bottom-color:#166534;
}

.checkin-info{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--line);
}

.time-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--green);
  background:var(--green-soft);
  border-radius:6px;
  padding:4px 9px;
}

.loc-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--ink-soft);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:6px;
  padding:4px 9px;
  transition:border-color .12s ease;
}

.loc-tag:hover{
  border-color:var(--gold);
}

.loc-tag.loc-none{
  color:var(--grey);
}

.loc-tag.loc-far{
  background:#B3432B;
  border-color:#B3432B;
  color:var(--white);
  font-weight:600;
}
.loc-tag.loc-far:hover{
  background:#9A3823;
  border-color:#9A3823;
}

.ip-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:9.5px;
  color:var(--grey);
  border:1px solid var(--line);
  border-radius:6px;
  padding:3px 7px;
  white-space:nowrap;
}

.perforation{
  width:0;
  border-left:2px dashed var(--line);
  position:relative;
  flex-shrink:0;
}
.perforation::before,
.perforation::after{
  content:"";
  position:absolute;
  left:-8px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line);
}
.perforation::before{ top:-9px; }
.perforation::after{ bottom:-9px; }

.ticket-action-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
}

.ticket-action{
  padding:18px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.checkin-form{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
  min-width:150px;
}

.phone-input{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  outline:none;
  width:100%;
  transition:border-color .12s ease;
}

.phone-input:focus{
  border-color:var(--gold);
}

.checkin-error{
  font-size:11.5px;
  color:#B3432B;
  background:#FBEAE5;
  border-radius:6px;
  padding:6px 8px;
  line-height:1.4;
}

button.btn{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:13px;
  border:none;
  border-radius:8px;
  padding:10px 16px;
  cursor:pointer;
  transition:opacity .12s ease, transform .08s ease;
  white-space:nowrap;
}
button.btn:active{ transform:scale(0.97); }

.btn-checkin{
  background:var(--ink);
  color:var(--white);
}
.btn-checkin:hover{ opacity:0.85; }

.secondary-actions{
  padding:0 16px 14px;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
button.btn-winner{
  background:var(--gold-soft);
  color:var(--ink);
  border:1.5px solid var(--gold);
  font-size:11.5px;
  padding:5px 12px;
  border-radius:20px;
}
button.btn-winner:hover{ background:var(--gold); color:var(--white); }

button.btn-edit{
  background:var(--white);
  color:var(--ink-soft);
  border:1.5px solid var(--line);
  font-size:11.5px;
  padding:5px 12px;
  border-radius:20px;
}
button.btn-edit:hover{ background:var(--paper); color:var(--ink); }

button.btn-lineup{
  background:var(--blue-soft);
  color:var(--ink);
  border:1.5px solid var(--blue);
  font-size:11.5px;
  padding:5px 12px;
  border-radius:20px;
}
button.btn-lineup:hover{ background:var(--blue); color:var(--white); }

.lineup-badge{
  display:inline-block;
  background:var(--blue-soft);
  color:var(--blue);
  border-radius:20px;
  padding:2px 10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  font-weight:600;
}

.gladi-resik-badge{
  display:inline-block;
  background:var(--green-soft);
  color:var(--green);
  border-radius:20px;
  padding:2px 10px;
  font-size:11.5px;
  font-weight:600;
}

.lineup-area-summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:14px;
}

.lineup-area-row{
  display:flex;
  justify-content:space-between;
  font-size:12.5px;
}

.lineup-area-name{
  font-weight:600;
  color:var(--ink);
}

.lineup-area-count{
  font-family:'IBM Plex Mono', monospace;
  color:var(--ink-soft);
}

.lineup-area-summary-page{
  margin-bottom:28px;
}

.lineup-grid-legend{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:11.5px;
  color:var(--ink-soft);
  margin-bottom:10px;
}
.lineup-grid-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.lineup-swatch{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:3px;
  border:1px solid var(--line);
}
.lineup-swatch-available{ background:var(--white); }
.lineup-swatch-taken{ background:var(--grey); border-color:var(--grey); }
.lineup-swatch-selected{ background:var(--blue); border-color:var(--blue); }

.lineup-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(38px, 1fr));
  gap:5px;
  max-height:280px;
  overflow-y:auto;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  margin-bottom:6px;
}

.lineup-grid-loading{
  grid-column:1 / -1;
  text-align:center;
  color:var(--ink-soft);
  font-size:12.5px;
  padding:20px 0;
}

.lineup-cell{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  padding:6px 0;
  text-align:center;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
}
.lineup-cell:hover:not([disabled]){
  border-color:var(--blue);
}
.lineup-cell.taken{
  background:var(--grey);
  border-color:var(--grey);
  color:var(--white);
  cursor:not-allowed;
  opacity:0.6;
}
.lineup-cell.selected{
  background:var(--blue);
  border-color:var(--blue);
  color:var(--white);
  font-weight:600;
}

.stamp{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.06em;
  color:var(--green);
  border:1.5px solid var(--green);
  border-radius:6px;
  padding:4px 8px;
  transform:rotate(-6deg);
  display:inline-block;
  cursor:pointer;
}

.undo-btn-row{
  display:flex;
  gap:6px;
}

.undo-remaining{
  font-size:11px;
  color:var(--grey);
  font-family:'IBM Plex Mono', monospace;
}

.btn-undo-confirm{
  background:#B3432B;
  color:var(--white);
  flex:1;
}
.btn-undo-confirm:hover{ opacity:0.85; }

/* Pagination memakai komponen Bootstrap (.pagination, .page-item, .page-link) --
   di-theme ulang lewat CSS variable Bootstrap 5.3 supaya senada dengan desain. */
#pagination-nav{
  margin-top:20px;
}

.pagination{
  --bs-pagination-font-size: 13px;
  --bs-pagination-color: var(--ink);
  --bs-pagination-bg: var(--white);
  --bs-pagination-border-color: var(--line);
  --bs-pagination-border-radius: 8px;
  --bs-pagination-hover-color: var(--ink);
  --bs-pagination-hover-bg: var(--gold-soft);
  --bs-pagination-hover-border-color: var(--gold);
  --bs-pagination-focus-color: var(--ink);
  --bs-pagination-focus-bg: var(--gold-soft);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(227,154,59,0.25);
  --bs-pagination-active-color: var(--white);
  --bs-pagination-active-bg: var(--ink);
  --bs-pagination-active-border-color: var(--ink);
  --bs-pagination-disabled-color: var(--grey);
  --bs-pagination-disabled-bg: var(--paper);
  --bs-pagination-disabled-border-color: var(--line);
  font-family:'Inter', sans-serif;
  margin:0;
}

.pagination .page-link{
  font-weight:500;
}

.page-info-text{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
  text-align:center;
  margin-top:8px;
}

@media (max-width:560px){
  .pagination{
    flex-wrap:wrap;
    justify-content:center;
    row-gap:6px;
  }
  .pagination .page-text{
    display:none;
  }
  .pagination{
    --bs-pagination-font-size: 12px;
    --bs-pagination-padding-x: 0.55rem;
    --bs-pagination-padding-y: 0.3rem;
  }
}

.empty{
  text-align:center;
  color:var(--grey);
  padding:48px 20px;
  font-size:14px;
}

footer.note{
  margin-top:36px;
  text-align:center;
  font-size:12px;
  color:var(--grey);
}

.winners-link-row{
  display:flex;
  justify-content:center;
  margin-top:14px;
}

.winners-link{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  font-weight:500;
  color:var(--gold);
  text-decoration:none;
  border:1px solid var(--gold);
  border-radius:20px;
  padding:6px 16px;
}
.winners-link:hover{
  background:var(--gold-soft);
}

@media (max-width:560px){
  .ticket{ flex-direction:column; }
  .perforation{
    width:auto;
    border-left:none;
    border-top:2px dashed var(--line);
    height:0;
  }
  .perforation::before,.perforation::after{
    left:auto; top:-9px;
  }
  .perforation::before{ left:16px; }
  .perforation::after{ right:16px; left:auto; }
  .ticket-action{ justify-content:flex-start; padding-top:14px; }
  .ticket-action-col{ align-items:flex-start; width:100%; }
  .secondary-actions{ justify-content:flex-start; }
  .ticket-meta{ grid-template-columns:1fr; }
}

/* ==== Halaman Analytics (Pemenang & Statistik) ==== */
.reveal-countdown{
  background:var(--white);
  border:1.5px solid var(--gold);
  border-radius:14px;
  padding:32px 24px;
  text-align:center;
  margin-bottom:24px;
}

.reveal-countdown-label{
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:10px;
}

.reveal-countdown-timer{
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(28px, 7vw, 40px);
  font-weight:600;
  color:var(--ink);
  letter-spacing:0.02em;
}

.reveal-countdown-note{
  font-size:12px;
  color:var(--grey);
  margin-top:12px;
}

.winner-highlights{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:32px;
}

.winner-card{
  background:var(--white);
  border:1.5px solid var(--gold);
  border-radius:12px;
  padding:20px;
  text-align:center;
}

.winner-card.winner-youngest{
  border-color:var(--magenta);
}

.winner-label{
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:8px;
}

.winner-name{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:22px;
  color:var(--ink);
  margin-bottom:4px;
}

.winner-name-link{
  color:inherit;
  text-decoration:none;
  border-bottom:1.5px dotted var(--grey);
  transition:border-color .12s ease, color .12s ease;
}
.winner-name-link:hover{
  color:var(--gold);
  border-color:var(--gold);
}

.winner-meta{
  font-size:13px;
  color:var(--ink-soft);
}

.winner-no{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--grey);
  margin-top:6px;
}

.winner-alternates{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--line);
  text-align:left;
}

.winner-alternates-label{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--grey);
  margin-bottom:6px;
}

.winner-alternate-row{
  font-size:12px;
  padding:4px 0;
  display:flex;
  flex-wrap:wrap;
  gap:2px 4px;
}

.winner-alternate-name{
  font-weight:600;
  color:var(--ink);
}

.winner-alternate-meta{
  color:var(--ink-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
}

.btn-confirm-winner{
  font-family:'Inter', sans-serif;
  font-size:11.5px;
  font-weight:600;
  color:var(--green);
  background:var(--green-soft);
  border:1px solid var(--green);
  border-radius:6px;
  padding:3px 9px;
  cursor:pointer;
  margin-left:8px;
  vertical-align:middle;
  transition:background .12s ease;
}

.btn-confirm-winner:hover{
  background:var(--green);
  color:var(--white);
}

.btn-confirm-winner-sm{
  font-size:10.5px;
  padding:2px 7px;
  margin-left:auto;
}

.winner-confirmed-badge{
  display:inline-block;
  font-size:11.5px;
  font-weight:600;
  color:var(--green);
  background:var(--green-soft);
  border-radius:6px;
  padding:3px 9px;
  margin-left:8px;
  vertical-align:middle;
}

.winner-confirmed-badge-sm{
  font-size:10.5px;
  padding:2px 7px;
  margin-left:auto;
}

.winner-conflict-badge{
  display:inline-block;
  font-size:11.5px;
  font-weight:600;
  color:#B3432B;
  background:#FBEAE5;
  border-radius:6px;
  padding:3px 9px;
  margin-left:8px;
  vertical-align:middle;
  cursor:help;
}
/* Modifier ukuran kecil untuk kandidat cadangan -- class
   .winner-confirmed-badge-sm (didefinisikan di atas) dipakai bareng untuk
   KEDUA jenis badge (confirmed maupun conflict, lihat
   winner_confirm_control_html() di analytics.php), jadi tidak perlu
   aturan ukuran terpisah di sini. */

.winner-card-content{
  min-height:20px;
}

.btn-reload-candidates{
  margin-top:14px;
  width:100%;
  background:var(--white);
  color:var(--ink-soft);
  border:1.5px solid var(--line);
  border-radius:20px;
  padding:7px 14px;
  font-size:11.5px;
  font-family:inherit;
  cursor:pointer;
}
.btn-reload-candidates:hover{
  background:var(--paper);
  color:var(--ink);
}
.btn-reload-candidates:disabled{
  opacity:0.6;
  cursor:default;
}

.gladi-resik-badge{
  display:inline-block;
  background:var(--blue-soft);
  color:var(--blue);
  border-radius:20px;
  padding:1px 8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  font-weight:600;
  margin-left:4px;
}

.section-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:20px;
  margin:0 0 14px;
}

/* Jarak tambahan sebelum judul section (dipakai khusus "🏆 Tandai Menang"
   di analytics.php, supaya tidak terlalu berdempetan dengan section
   "Grup dengan Peserta Terbanyak Hadir" tepat di atasnya). */
.section-title-gap{
  margin-top:48px;
}

.category-stats{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:32px;
}

.category-row{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
}

.category-row-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.category-name{
  font-size:14.5px;
  font-weight:600;
  color:var(--ink);
}

.category-total{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--ink-soft);
  white-space:nowrap;
}

.category-bar{
  height:8px;
  background:var(--paper);
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
}

.category-bar-fill{
  height:100%;
  background:var(--green);
  border-radius:20px;
  transition:width .3s ease;
}

.category-row-bottom{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  flex-wrap:wrap;
}

.category-count{
  font-size:12px;
  color:var(--ink-soft);
}
.category-count strong{
  font-family:'IBM Plex Mono', monospace;
}
.category-count-hadir{
  color:var(--green);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
}
.category-count-belum{
  color:var(--gold);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
}
.category-count-hadir strong{
  color:var(--green);
}
.category-count-belum strong{
  color:var(--gold);
}

.group-ranking{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.group-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 16px;
  flex-wrap:wrap;
}

.group-row-top{
  border-color:var(--gold);
  background:var(--gold-soft);
}

.group-rank{
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  width:28px;
  flex-shrink:0;
  text-align:center;
}

.group-name{
  flex:1;
  font-size:14.5px;
  font-weight:500;
  min-width:0;
  overflow-wrap:anywhere;
}

.group-count{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--ink-soft);
  white-space:nowrap;
}

.manual-winner-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.manual-winner-group{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
}

.manual-winner-category{
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  margin-bottom:8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}

.manual-winner-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:6px 0;
}
.manual-winner-row + .manual-winner-row{
  border-top:1px dashed var(--line);
}

.manual-winner-name{
  font-weight:600;
  font-size:14px;
  color:var(--ink);
}

.manual-winner-meta{
  font-size:12.5px;
  color:var(--ink-soft);
}

.manual-winner-no{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--ink-soft);
  background:var(--gold-soft);
  border-radius:20px;
  padding:2px 9px;
  margin-left:auto;
  white-space:nowrap;
}

@media (max-width:480px){
  .winner-highlights{
    grid-template-columns:1fr;
  }
}

/* ==== Overlay Loading Global ==== */
.global-loading-overlay{
  position:fixed;
  inset:0;
  background:rgba(22, 50, 74, 0.55);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(1px);
}

.global-loading-box{
  background:var(--white);
  border-radius:14px;
  padding:24px 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  max-width:88vw;
}

.global-loading-spinner{
  width:34px;
  height:34px;
  border:3.5px solid var(--line);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:global-spin 0.7s linear infinite;
}

@keyframes global-spin{
  to{ transform:rotate(360deg); }
}

.global-loading-text{
  font-size:13px;
  color:var(--ink);
  text-align:center;
  font-weight:500;
}