/* ============================================================
   LAVICIA GUESTBOOK V2 — App design system
   Putih dominan  hitam untuk aksi · kuning/hijau/merah/oranye
   hanya untuk badge & status.
   ============================================================ */

:root {
  --black: #272831;
  --gray: #929397;
  --gray-line: #B8B9C1;
  --off1: #EFEFF0;
  --off2: #F5F5F6;
  --white: #FFFFFF;
  --yellow: #FED415;
  --orange: #FDA014;
  --red: #E14535;
  --green: #5FC756;
}

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

body {
  font-family: 'Urbanist', sans-serif;
  background: var(--off2);
  color: var(--black);
}

a { color: inherit; }

/* ===== Shell ===== */
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.main { display: flex; flex-direction: column; min-width: 0; }

/* ===== Sidebar ===== */
.side {
  background: var(--white);
  border-right: 1px solid var(--off1);
  padding: 20px 14px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.side .logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; }
.side .logo .mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--black); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px;
}
.side .logo .nm { font-weight: 900; font-size: 15px; letter-spacing: 0.02em; }
.side .logo .nm span { display: block; font-size: 9px; color: var(--gray); font-weight: 700; letter-spacing: 0.12em; }

.side .sec {
  font-size: 9.5px; font-weight: 800; color: var(--gray-line);
  letter-spacing: 0.12em; padding: 14px 10px 6px;
}
.side > a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--gray);
  text-decoration: none; margin-bottom: 1px;
}
.side > a i { font-size: 17px; width: 18px; text-align: center; }
.side > a:hover { background: var(--off2); color: var(--black); }
.side > a.active { background: var(--black); color: var(--white); font-weight: 700; }

.side .foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--off1); }
.side .user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.side .user .ava {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--yellow); color: var(--black);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12px;
}
.side .user .who { min-width: 0; }
.side .user .who .n { font-size: 12.5px; font-weight: 800; }
.side .user .who .r { font-size: 10px; color: var(--gray); font-weight: 600; }
.side .user > a { margin-left: auto; color: var(--gray); font-size: 15px; text-decoration: none; }
.side .user > a:hover { color: var(--red); }

/* ===== Topbar ===== */
.top {
  background: var(--white);
  border-bottom: 1px solid var(--off1);
  padding: 12px 26px;
  display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 20;
}
.crumb { font-size: 12px; color: var(--gray); font-weight: 600; }
.crumb b { color: var(--black); font-weight: 800; }
.evswitch {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--off1); border-radius: 11px;
  padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--off2);
}
.evswitch .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.evswitch i { font-size: 13px; color: var(--gray); }

.content { padding: 24px 26px 60px; max-width: 100%; }

/* ===== Komponen dasar ===== */
.pghead { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.pghead h1 { font-size: 19px; font-weight: 900; }
.pghead .sub { font-size: 12px; color: var(--gray); font-weight: 600; }
.pghead .actions { margin-left: auto; display: flex; gap: 8px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--off1); background: var(--white);
  border-radius: 11px; padding: 9px 16px;
  font-family: 'Urbanist', sans-serif; font-size: 12px; font-weight: 700; color: var(--black);
  cursor: pointer; text-decoration: none;
}
.btn i { font-size: 14px; color: var(--gray); }
.btn:hover { border-color: var(--gray-line); }
.btn.dark { background: var(--black); border-color: var(--black); color: var(--white); }
.btn.dark i { color: rgba(255,255,255,0.75); }
.btn.dark:hover { opacity: 0.92; }

.card {
  background: var(--white);
  border: 1px solid var(--off1);
  border-radius: 16px;
  padding: 18px;
}
.card .chead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card .chead h3 { font-size: 13px; font-weight: 800; }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.span4 { grid-column: span 4; }
.span5 { grid-column: span 5; }
.span6 { grid-column: span 6; }
.span7 { grid-column: span 7; }
.span8 { grid-column: span 8; }
.span12 { grid-column: span 12; }

.badge { font-size: 9.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.badge.vip { background: #FFF7DA; color: #B08900; }
.badge.hadir { background: #EAF8EA; color: var(--green); }
.badge.tidak { background: #FDEAE7; color: var(--red); }
.badge.ragu { background: #FFF1DB; color: var(--orange); }

.field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--gray); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--off1);
  background: var(--off2);
  border-radius: 11px;
  padding: 11px 13px;
  font-family: 'Urbanist', sans-serif;
  font-size: 13px; font-weight: 600; color: var(--black);
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gray-line); background: var(--white);
}

/* ===== Mobile ===== */
.mobilebar { display: none; }
.tabbar { display: none; }

@media (max-width: 1024px) {
  .shell { grid-template-columns: 1fr; }

  .side {
    position: fixed; left: -270px; top: 0; bottom: 0; z-index: 60;
    width: 260px;
    transition: left .22s ease;
    box-shadow: 0 0 40px rgba(39,40,49,0.2);
  }
  .side.open { left: 0; }

  .mobilebar {
    display: flex; position: sticky; top: 0; z-index: 30;
    background: var(--white); border-bottom: 1px solid var(--off1);
    padding: 12px 16px; align-items: center; gap: 12px;
  }
  .mobilebar .ham { font-size: 19px; cursor: pointer; }
  .mobilebar .nm { font-weight: 900; font-size: 14px; }
  .mobilebar .nm .sub { color: var(--gray); font-size: 10px; }

  .top { display: none; }
  .content { padding: 18px 16px 96px; }
  .grid { grid-template-columns: 1fr; }
  .span4, .span5, .span6, .span7, .span8 { grid-column: span 1; }

  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    background: var(--white); border-top: 1px solid var(--off1);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .tabbar a {
    flex: 1; text-align: center; text-decoration: none; color: var(--gray);
    font-size: 9px; font-weight: 700;
  }
  .tabbar a i { display: block; font-size: 19px; margin-bottom: 2px; }
  .tabbar a.active { color: var(--black); }
  .tabbar a.scan { position: relative; top: -16px; }
  .tabbar a.scan .fab {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--black); color: var(--yellow);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin: 0 auto 2px;
    box-shadow: 0 10px 22px -8px rgba(39,40,49,0.5);
  }
}


/* ============================================================
   MODUL EVENTS
   ============================================================ */

.ev-search {
  display: flex; gap: 8px; margin-bottom: 16px; max-width: 420px;
}
.ev-search input {
  flex: 1;
  border: 1px solid var(--off1); background: var(--white);
  border-radius: 11px; padding: 10px 14px;
  font-family: 'Urbanist', sans-serif; font-size: 13px; font-weight: 600;
  outline: none;
}
.ev-search input:focus { border-color: var(--gray-line); }

.ev-empty { text-align: center; padding: 44px 22px; }
.ev-empty h3 { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.ev-empty p { font-size: 12.5px; color: var(--gray); font-weight: 500; margin-bottom: 16px; }

.ev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.ev-card {
  background: var(--white);
  border: 1px solid var(--off1);
  border-radius: 16px;
  padding: 18px;
  position: relative;
}
.ev-card.is-active { border-color: var(--black); box-shadow: 0 0 0 1px var(--black); }

.ev-flag {
  position: absolute; top: 14px; right: 14px;
  background: var(--black); color: var(--white);
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: 999px;
}

.ev-lbl {
  font-size: 10px; color: var(--gray); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.ev-nama { font-size: 17px; font-weight: 900; margin: 4px 0 2px; padding-right: 80px; }
.ev-tgl { font-size: 11.5px; color: var(--gray); font-weight: 600; }

.ev-stat {
  display: flex; gap: 24px;
  margin: 14px 0;
  padding: 12px 0;
  border-top: 1px solid var(--off1);
  border-bottom: 1px solid var(--off1);
}
.ev-stat b { display: block; font-size: 18px; font-weight: 900; line-height: 1.1; }
.ev-stat b.g { color: var(--green); }
.ev-stat span { font-size: 9px; color: var(--gray); font-weight: 700; letter-spacing: 0.04em; }

.ev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

.ev-act { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-act .btn { padding: 8px 14px; font-size: 11.5px; }
.ev-del { color: var(--red) !important; border-color: #FBDAD4 !important; }
.ev-del i { color: var(--red) !important; }

/* ===== Modal ===== */
.ev-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(39, 40, 49, 0.5);
  display: none; align-items: center; justify-content: center;
  padding: 20px 16px;
  overflow-y: auto;
}
.ev-overlay.show { display: flex; }

.ev-modal {
  width: 100%; max-width: 440px;
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  margin: auto;
}
.ev-mhead {
  background: var(--black); color: var(--white);
  padding: 15px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.ev-mhead h3 { font-size: 14px; font-weight: 800; }
.ev-mhead button {
  background: transparent; border: none; color: rgba(255,255,255,0.7);
  font-size: 16px; cursor: pointer;
}
.ev-mbody { padding: 20px; }
.ev-mbody .field { margin-bottom: 14px; }

.ev-seg {
  display: flex; background: var(--off2);
  border: 1px solid var(--off1); border-radius: 11px; padding: 3px;
}
.ev-seg button {
  flex: 1; border: none; background: transparent;
  padding: 9px; border-radius: 9px;
  font-family: 'Urbanist', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--gray); cursor: pointer;
}
.ev-seg button.active { background: var(--black); color: var(--white); }

.ev-hint {
  display: block; font-size: 10.5px; color: var(--gray);
  font-weight: 500; margin-top: 7px; line-height: 1.5;
}

.ev-check { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 4px; }
.ev-check label {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ev-check input { width: 16px; height: 16px; accent-color: var(--black); }

.ev-mfoot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

.ev-msg { margin-top: 12px; font-size: 12px; font-weight: 700; text-align: center; }
.ev-msg.err { color: var(--red); }
.ev-msg.ok { color: var(--green); }

/* Event switcher di topbar jadi link ke halaman events */
.evswitch { text-decoration: none; color: var(--black); }


/* ============================================================
   MODUL DATA TAMU
   ============================================================ */

.gt-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 14px; max-width: 520px;
}
.gt-stat {
  background: var(--white); border: 1px solid var(--off1);
  border-radius: 14px; padding: 14px 12px; text-align: center;
}
.gt-stat b { display: block; font-size: 20px; font-weight: 900; line-height: 1.1; }
.gt-stat b.g { color: var(--green); }
.gt-stat b.y { color: #B08900; }
.gt-stat span { font-size: 9px; color: var(--gray); font-weight: 700; letter-spacing: 0.04em; }

.gt-note {
  display: flex; align-items: center; gap: 10px;
  background: #FFF7DA; border: 1px solid #F5E4A8;
  border-radius: 12px; padding: 11px 14px; margin-bottom: 14px;
  font-size: 12px; font-weight: 500; color: #6B5600;
}
.gt-note i { font-size: 16px; flex-shrink: 0; }

/* Toolbar */
.gt-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.gt-search {
  flex: 1; min-width: 200px;
  display: flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--off1);
  border-radius: 11px; padding: 10px 14px;
}
.gt-search i { color: var(--gray); font-size: 15px; }
.gt-search input {
  border: none; outline: none; background: transparent; width: 100%;
  font-family: 'Urbanist', sans-serif; font-size: 13px; font-weight: 600;
}
.gt-toolbar select {
  border: 1px solid var(--off1); background: var(--white);
  border-radius: 11px; padding: 10px 12px;
  font-family: 'Urbanist', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--black); outline: none; cursor: pointer;
}

/* Bar aksi massal */
.gt-bulk {
  display: none; align-items: center; gap: 14px;
  background: var(--black); color: var(--white);
  border-radius: 12px; padding: 10px 16px; margin-bottom: 12px;
  font-size: 12.5px; font-weight: 600;
}
.gt-bulk.show { display: flex; }
.gt-bulk b { font-weight: 900; }
.gt-bulk .btn { margin-left: auto; padding: 7px 14px; font-size: 11.5px; }
.gt-danger { color: var(--red) !important; border-color: #FBDAD4 !important; background: var(--white) !important; }
.gt-danger i { color: var(--red) !important; }

.gt-empty { text-align: center; padding: 40px 22px; }
.gt-empty h3 { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.gt-empty p { font-size: 12.5px; color: var(--gray); font-weight: 500; margin-bottom: 16px; }

/* Kartu (mobile) */
.gt-cards { display: flex; flex-direction: column; gap: 8px; }
.gt-card {
  background: var(--white); border: 1px solid var(--off1);
  border-radius: 12px; padding: 12px 14px;
  display: flex; align-items: flex-start; gap: 10px;
}
.gt-chk { padding-top: 2px; }
.gt-chk input { width: 17px; height: 17px; accent-color: var(--black); }
.gt-cbody { flex: 1; min-width: 0; }
.gt-crow { display: flex; align-items: center; gap: 8px; }
.gt-nama { font-size: 13.5px; font-weight: 800; }
.gt-cmeta { font-size: 11px; color: var(--gray); font-weight: 500; margin-top: 3px; }
.gt-ctags { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.gt-time { font-size: 10px; color: var(--gray); font-weight: 600; }
.gt-cact { display: flex; gap: 5px; }

.gt-ibtn {
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--off1); background: var(--white);
  color: var(--gray); font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.gt-ibtn:hover { border-color: var(--gray-line); color: var(--black); }
.gt-ibtn.danger { color: var(--red); border-color: #FBDAD4; }

/* Tabel (desktop) */
.gt-tablewrap { display: none; }

.gt-pagination {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 16px; font-size: 12px; color: var(--gray); font-weight: 600;
}
.gt-pagination b { color: var(--black); font-weight: 900; }
.gt-pagination a {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--off1); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  color: var(--black); text-decoration: none; font-size: 14px;
}
.gt-pagination a.off { opacity: 0.35; pointer-events: none; }

/* Form 2 kolom */
.gt-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Modal grup */
.gt-grupform { display: flex; gap: 8px; }
.gt-grupform input {
  flex: 1;
  border: 1px solid var(--off1); background: var(--off2);
  border-radius: 11px; padding: 11px 13px;
  font-family: 'Urbanist', sans-serif; font-size: 13px; font-weight: 600;
  outline: none;
}
.gt-gruplist { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.gt-grupitem {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--off1); border-radius: 11px; padding: 10px 13px;
}
.gt-grupitem b { font-size: 12.5px; font-weight: 800; display: block; }
.gt-grupitem span { font-size: 10.5px; color: var(--gray); font-weight: 600; }
.gt-grupempty { font-size: 12px; color: var(--gray); font-weight: 500; line-height: 1.6; }

@media (min-width: 1024px) {
  .gt-cards { display: none; }

  .gt-tablewrap {
    display: block;
    background: var(--white); border: 1px solid var(--off1);
    border-radius: 14px; overflow: hidden;
  }
  .gt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .gt-table thead th {
    text-align: left; padding: 12px 16px;
    font-size: 10.5px; color: var(--gray); font-weight: 800;
    letter-spacing: 0.04em; background: var(--off2);
    border-bottom: 1px solid var(--off1);
  }
  .gt-table tbody td {
    padding: 12px 16px; border-bottom: 1px solid var(--off1);
    font-weight: 500; vertical-align: middle;
  }
  .gt-table tbody tr:last-child td { border-bottom: none; }
  .gt-table tbody tr:hover { background: var(--off2); }
  .gt-table td.nm { font-weight: 800; }
  .gt-table .gt-sub {
    display: block; font-size: 10.5px; color: var(--gray); font-weight: 500; margin-top: 2px;
  }
  .gt-table .gt-muted { color: var(--gray-line); font-weight: 600; font-size: 12px; }
  .gt-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--black); }
}



/* ============================================================
   DATA TAMU  BAGIAN B (share undangan & impor)
   ============================================================ */

/* ===== Modal share ===== */
.sh-modal { max-width: 400px; }

.sh-ticket {
  background: var(--off2);
  border: 1px solid var(--off1);
  border-radius: 16px;
  padding: 20px 18px;
  text-align: center;
  margin-bottom: 16px;
}
.sh-eyebrow {
  font-size: 9.5px; color: var(--gray); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.sh-nama { font-size: 17px; font-weight: 900; margin-top: 6px; line-height: 1.25; }
.sh-desk { font-size: 11px; color: var(--gray); font-weight: 500; margin-top: 2px; }
.sh-qr {
  width: 168px; height: 168px;
  display: block; margin: 14px auto 10px;
  background: var(--white);
  border-radius: 12px;
  padding: 8px;
  border: 1px solid var(--off1);
}
.sh-meta { font-size: 11px; color: var(--gray); font-weight: 700; }

.sh-link label {
  display: block; font-size: 11.5px; font-weight: 700;
  color: var(--gray); margin-bottom: 6px;
}
.sh-copyrow { display: flex; gap: 8px; }
.sh-copyrow input {
  flex: 1; min-width: 0;
  border: 1px solid var(--off1); background: var(--off2);
  border-radius: 11px; padding: 10px 12px;
  font-family: 'Urbanist', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--black); outline: none;
}

.ev-mbody textarea {
  width: 100%;
  border: 1px solid var(--off1); background: var(--off2);
  border-radius: 11px; padding: 11px 13px;
  font-family: 'Urbanist', sans-serif; font-size: 12.5px; font-weight: 500;
  color: var(--black); outline: none; resize: vertical; line-height: 1.55;
}
.ev-mbody textarea:focus { border-color: var(--gray-line); background: var(--white); }

.sh-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sh-act .btn { flex: 1; justify-content: center; min-width: 120px; }

.ev-hint code {
  background: var(--off1); border-radius: 4px;
  padding: 1px 5px; font-size: 10px; font-weight: 700;
  font-family: ui-monospace, monospace;
}

/* ===== Halaman impor ===== */
.im-wrap { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 900px; }

.im-p { font-size: 12.5px; color: var(--gray); font-weight: 500; margin-bottom: 12px; }

.im-table { overflow-x: auto; margin-bottom: 14px; }
.im-table table { width: 100%; border-collapse: collapse; font-size: 11.5px; min-width: 460px; }
.im-table th {
  background: var(--black); color: var(--white);
  padding: 8px 10px; text-align: left; font-weight: 800;
  font-size: 10.5px; letter-spacing: 0.03em;
}
.im-table th:first-child { border-radius: 8px 0 0 0; }
.im-table th:last-child { border-radius: 0 8px 0 0; }
.im-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--off1);
  font-weight: 500; color: var(--gray);
}

.im-list { margin: 0 0 16px; padding-left: 18px; }
.im-list li { font-size: 12px; color: var(--gray); font-weight: 500; line-height: 1.7; }
.im-list b { color: var(--black); font-weight: 800; }
.im-list code {
  background: var(--off1); border-radius: 4px; padding: 1px 5px;
  font-size: 10.5px; font-weight: 700; font-family: ui-monospace, monospace; color: var(--black);
}

.im-wrap input[type=file] {
  width: 100%;
  border: 1px dashed var(--gray-line); background: var(--off2);
  border-radius: 11px; padding: 14px;
  font-family: 'Urbanist', sans-serif; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}

.im-hasil { margin-top: 14px; font-size: 12.5px; font-weight: 600; line-height: 1.6; }
.im-hasil.ok { color: var(--green); }
.im-hasil.err { color: var(--red); }
.im-lewat {
  margin-top: 10px; background: #FFF7DA; border: 1px solid #F5E4A8;
  border-radius: 10px; padding: 10px 12px; color: #6B5600;
  font-size: 11.5px; font-weight: 500;
}
.im-lewat ul { margin: 6px 0 0; padding-left: 16px; }
.im-lewat li { line-height: 1.6; }

@media (min-width: 900px) {
  .im-wrap { grid-template-columns: 1.15fr 1fr; align-items: start; }
}


/* ============================================================
   MODUL CHECK-IN STATION
   ============================================================ */

.ck-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.ck-head h1 { font-size: 19px; font-weight: 900; }
.ck-head .sub { font-size: 12px; color: var(--gray); font-weight: 600; }
.ck-counter {
  background: var(--black); color: var(--white);
  border-radius: 13px; padding: 8px 16px; text-align: right;
}
.ck-counter b { display: block; font-size: 17px; font-weight: 900; }
.ck-counter b i { font-style: normal; color: var(--yellow); font-size: 13px; }
.ck-counter > span { font-size: 8.5px; font-weight: 700; color: rgba(255,255,255,0.6); letter-spacing: 0.06em; }

.ck-tabs {
  display: flex; gap: 5px;
  background: var(--white); border: 1px solid var(--off1);
  border-radius: 13px; padding: 5px; margin-bottom: 14px;
  max-width: 460px;
}
.ck-tabs button {
  flex: 1; border: none; background: transparent;
  padding: 10px 8px; border-radius: 9px;
  font-family: 'Urbanist', sans-serif; font-size: 12px; font-weight: 800;
  color: var(--gray); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ck-tabs button i { font-size: 15px; }
.ck-tabs button.active { background: var(--black); color: var(--white); }

.ck-layout { display: grid; grid-template-columns: 1fr; gap: 14px; }

.ck-mode { display: none; }
.ck-mode.active { display: block; }

/* Scanner */
.ck-scanner { padding: 14px; }
#reader {
  border-radius: 14px; overflow: hidden;
  background: #1B1C21;
  max-width: 420px; margin: 0 auto;
}
#reader video { border-radius: 14px; }
.ck-scannote {
  text-align: center; font-size: 12px; color: var(--gray);
  font-weight: 600; margin-top: 10px;
}

/* Cari */
.ck-search { margin-bottom: 10px; max-width: 460px; }
.ck-sresult { display: flex; flex-direction: column; gap: 8px; }
.ck-hint { font-size: 12px; color: var(--gray); font-weight: 500; }
.ck-sitem {
  background: var(--white); border: 1px solid var(--off1);
  border-radius: 12px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.ck-sitem .who { flex: 1; min-width: 0; }
.ck-sitem .who .n { font-size: 13px; font-weight: 800; }
.ck-sitem .who .m { font-size: 11px; color: var(--gray); font-weight: 500; margin-top: 2px; }
.ck-sitem.done { opacity: 0.6; }
.ck-sitem .btn { padding: 8px 16px; font-size: 11.5px; }

/* Feed */
.ck-feed { }
.ck-fhead {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ck-fhead h4 { font-size: 12.5px; font-weight: 800; }
.ck-live { font-size: 9.5px; font-weight: 800; color: var(--green); }
.ck-live::before { content: '●'; margin-right: 4px; animation: ckBlink 1.6s infinite; }
@keyframes ckBlink { 50% { opacity: 0.3; } }

#ckFeed { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
#ckFeed li {
  background: var(--white); border: 1px solid var(--off1);
  border-radius: 11px; padding: 9px 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  transition: background .5s, border-color .5s;
}
#ckFeed li.new { border-color: var(--green); background: #F4FBF4; }
#ckFeed li.ck-fempty { color: var(--gray); font-weight: 500; justify-content: center; }
#ckFeed .ava {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--off2); color: var(--gray);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; flex-shrink: 0;
}
#ckFeed .who { flex: 1; min-width: 0; }
#ckFeed .who .n { font-weight: 800; font-size: 12px; }
#ckFeed .who .m { font-size: 10px; color: var(--gray); font-weight: 500; }

/* Popup tiket */
.ck-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(39, 40, 49, 0.6);
  display: none; align-items: center; justify-content: center;
  padding: 18px 14px; overflow-y: auto;
}
.ck-overlay.show { display: flex; }

.ck-ticket {
  width: 100%; max-width: 340px;
  background: var(--white);
  border-radius: 22px;
  padding: 24px 22px 18px;
  position: relative;
  margin: auto;
  animation: tkPop .22s ease;
}
@keyframes tkPop { from { transform: scale(.93); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.tk-eyebrow { text-align: center; font-size: 10px; color: var(--gray); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tk-vip {
  display: block; width: fit-content; margin: 10px auto 0;
  padding: 5px 18px; background: var(--yellow); color: var(--black);
  border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
}
.tk-name { text-align: center; font-size: 20px; font-weight: 900; margin-top: 10px; line-height: 1.25; }
.tk-desc { text-align: center; font-size: 11px; color: var(--gray); font-weight: 500; margin-top: 3px; }
.tk-evlbl { text-align: center; font-size: 10px; color: var(--gray); font-weight: 500; margin-top: 14px; }
.tk-evname { text-align: center; font-size: 13.5px; font-weight: 800; margin-top: 2px; }

.tk-perf { position: relative; border-top: 2px dashed var(--off1); margin: 16px -22px 0; }
.tk-perf::before, .tk-perf::after {
  content: ''; position: absolute; top: -10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(39, 40, 49, 0.6);
}
.tk-perf::before { left: -10px; }
.tk-perf::after { right: -10px; }

.tk-meja { text-align: center; margin-top: 14px; }
.tk-meja .l { font-size: 10px; color: var(--gray); font-weight: 500; }
.tk-meja .v { font-size: 16px; font-weight: 900; margin-top: 2px; }

.tk-warn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #FFF1DB; border: 1px solid #F5D8A8;
  color: #8a5a00; border-radius: 11px;
  padding: 10px 14px; margin-top: 14px;
  font-size: 12px; font-weight: 600;
}
.tk-warn i { font-size: 15px; }
.ck-ticket.is-dup { border: 2px solid var(--orange); }

.tk-stepper { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.tk-stepper button {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--black); color: var(--white);
  border: none; font-size: 17px; font-weight: 700; cursor: pointer;
}
.tk-stepper .c { text-align: center; min-width: 84px; }
.tk-stepper .c .l { font-size: 9px; color: var(--gray); font-weight: 700; letter-spacing: .04em; }
.tk-stepper .c .v { font-size: 16px; font-weight: 900; margin-top: 1px; }

.tk-btn {
  width: 100%; margin-top: 16px; padding: 15px;
  border: none; border-radius: 999px;
  background: var(--black); color: var(--white);
  font-family: 'Urbanist', sans-serif; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
}
.tk-btn:hover { opacity: .93; }
.tk-btn:disabled { opacity: .6; }
.tk-cancel {
  width: 100%; margin-top: 8px; padding: 10px;
  border: none; border-radius: 999px; background: transparent;
  color: var(--gray); font-family: 'Urbanist', sans-serif;
  font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.tk-brand { text-align: center; font-size: 8.5px; color: var(--gray-line); font-weight: 700; letter-spacing: .1em; margin-top: 6px; }

@media (min-width: 1024px) {
  .ck-layout { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .ck-feed { position: sticky; top: 76px; }
}


/* ============================================================
   MODUL KEHADIRAN
   ============================================================ */

.at-mut { font-size: 11px; color: var(--gray); font-weight: 700; }

/* Donut kehadiran */
.at-donutrow { display: flex; align-items: center; gap: 20px; }
.at-donut {
  width: 116px; height: 116px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--off1) 0);
  display: flex; align-items: center; justify-content: center;
}
.at-donut .hole {
  width: 82px; height: 82px; border-radius: 50%;
  background: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.at-donut .hole b { font-size: 20px; font-weight: 900; }
.at-donut .hole span { font-size: 8.5px; color: var(--gray); font-weight: 700; letter-spacing: .04em; }
.at-legend { flex: 1; }
.at-legend .row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--gray); margin-bottom: 9px; }
.at-legend .row:last-child { margin-bottom: 0; }
.at-legend .sw { width: 11px; height: 11px; border-radius: 3px; }
.at-legend .sw.g { background: var(--green); }
.at-legend .sw.o { background: var(--off1); }
.at-legend .sw.y { background: var(--yellow); }
.at-legend b { color: var(--black); font-weight: 900; margin-left: auto; }

/* Bar per grup */
.at-bars { display: flex; flex-direction: column; gap: 13px; }
.at-bar .lbl { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.at-bar .lbl span:last-child { color: var(--gray); font-weight: 600; }
.at-bar .track { height: 8px; border-radius: 999px; background: var(--off1); overflow: hidden; }
.at-bar .track i { display: block; height: 100%; border-radius: 999px; transition: width .4s; }

/* Tab hadir/belum */
.at-tabs {
  display: inline-flex; gap: 4px;
  background: var(--white); border: 1px solid var(--off1);
  border-radius: 12px; padding: 4px; margin-bottom: 14px;
}
.at-tabs a {
  padding: 9px 18px; border-radius: 9px;
  font-size: 12px; font-weight: 700; color: var(--gray);
  text-decoration: none;
}
.at-tabs a.active { background: var(--black); color: var(--white); }

.at-table td.nm .badge { vertical-align: middle; }

@media (max-width: 1023px) {
  .at-donutrow { justify-content: center; }
  .gt-tablewrap.at-wrap { overflow-x: auto; }
  .at-table { min-width: 560px; }
}


/* ============================================================
   MODUL SETTINGS
   ============================================================ */

.st-users { display: flex; flex-direction: column; gap: 8px; }
.st-user {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--off1); border-radius: 12px; padding: 11px 14px;
}
.st-user .ava {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--black); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px; flex-shrink: 0;
}
.st-user .info { flex: 1; min-width: 0; }
.st-user .info .n { font-size: 13.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.st-user .info .n .badge { text-transform: capitalize; }
.st-user .info .m { font-size: 11px; color: var(--gray); font-weight: 500; margin-top: 2px; }
.st-user .act { display: flex; gap: 5px; }

.st-evlist { display: flex; flex-direction: column; gap: 7px; max-height: 320px; overflow-y: auto; }
.st-evitem {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--off1); border-radius: 11px; padding: 11px 13px;
  cursor: pointer;
}
.st-evitem:hover { border-color: var(--gray-line); }
.st-evitem input { width: 17px; height: 17px; accent-color: var(--black); }
.st-evitem b { font-size: 12.5px; font-weight: 800; display: block; }
.st-evitem span { font-size: 10.5px; color: var(--gray); font-weight: 600; }


/* ============================================================
   MODUL RSVP & UCAPAN
   ============================================================ */

.rs-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.rs-card {
  background: var(--white); border: 1px solid var(--off1);
  border-radius: 14px; padding: 15px 16px;
  display: flex; flex-direction: column;
}
.rs-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rs-nama { font-size: 14px; font-weight: 800; }
.rs-ucapan {
  font-size: 12.5px; color: var(--black); font-weight: 500;
  font-style: italic; line-height: 1.6;
  background: var(--off2); border-radius: 10px; padding: 10px 12px;
  margin-bottom: 10px;
}
.rs-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
}
.rs-foot span { font-size: 10.5px; color: var(--gray); font-weight: 600; }

/* ===== Kode tamu di Data Tamu (tombol salin) ===== */
.gt-kode {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  color: var(--black);
  background: var(--off2);
  border: 1px dashed var(--gray-line, #d9d9de);
  border-radius: 8px; padding: 4px 10px;
  cursor: pointer; transition: all .15s;
}
.gt-kode:hover { background: var(--off1); border-color: var(--gray); }
.gt-kode.ok { background: #E8F7E6; border-color: #5FC756; color: #2f9127; border-style: solid; }
.gt-kode i { font-size: 13px; }


/* ===== Dashboard ===== */
.db-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.db-stat {
  display: flex; align-items: center; gap: 13px;
  background: var(--white); border: 1px solid var(--off1);
  border-radius: 14px; padding: 16px; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.db-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.db-stat .ic {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.db-stat .tx b { display: block; font-size: 24px; font-weight: 900; color: var(--black); line-height: 1; }
.db-stat .tx span { font-size: 11.5px; color: var(--gray); font-weight: 600; }

.db-mini {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px;
}
.db-minicard {
  background: var(--off2); border-radius: 12px; padding: 13px;
  text-align: center;
}
.db-minicard span { display: block; font-size: 10.5px; color: var(--gray); font-weight: 700; letter-spacing: .03em; margin-bottom: 5px; }
.db-minicard b { font-size: 22px; font-weight: 900; color: var(--black); }

.db-links { display: flex; gap: 8px; flex-wrap: wrap; }

.db-feed { display: flex; flex-direction: column; gap: 4px; }
.db-fitem { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--off1); }
.db-fitem:last-child { border-bottom: none; }
.db-fitem .ava {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--black); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12px;
}
.db-fitem .who .n { font-size: 13.5px; font-weight: 800; }
.db-fitem .who .m { font-size: 11px; color: var(--gray); font-weight: 500; margin-top: 1px; }

@media (max-width: 1023px) {
  .db-stats { grid-template-columns: repeat(2, 1fr); }
  .db-mini { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Overlay Sukses Check-in ===== */
.ck-success {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(39,40,49,.55); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.ck-success.show { opacity: 1; }
.cks-card {
  background: var(--white); border-radius: 24px;
  padding: 40px 48px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  transform: scale(.85); transition: transform .3s cubic-bezier(.2,.9,.3,1.3);
}
.ck-success.show .cks-card { transform: scale(1); }
.cks-check {
  width: 92px; height: 92px; margin: 0 auto 18px;
  border-radius: 50%; background: #E8F7E6;
  display: flex; align-items: center; justify-content: center;
}
.cks-check svg { width: 60px; height: 60px; }
.cks-check circle { stroke: #5FC756; stroke-width: 3; }
.cks-check path {
  stroke: #5FC756; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: cksDraw .5s .1s forwards;
}
@keyframes cksDraw { to { stroke-dashoffset: 0; } }
.cks-title {
  font-size: 13px; font-weight: 800; color: #5FC756;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px;
}
.cks-name { font-size: 26px; font-weight: 900; color: var(--black); line-height: 1.2; }
.cks-badge {
  margin-top: 12px; display: inline-block;
  background: var(--yellow); color: var(--black);
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  padding: 5px 16px; border-radius: 999px;
}