*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#1d3d77 0,#071128 48%,#020611 100%);font-family:Arial,Helvetica,sans-serif;color:#fff}.app{width:min(470px,100%);margin:auto;padding:16px}.wide{width:min(1180px,100%)}.hero{text-align:center;margin:8px 0 16px}.badge{display:inline-block;padding:7px 14px;border:1px solid #d7b45a;border-radius:99px;color:#ffe6a3;font-size:12px;letter-spacing:1.6px;background:rgba(255,255,255,.07)}h1{font-size:25px;margin:12px 0 6px;color:#fff4c2}.hero p{margin:0;color:#d8e3ff}.card,.camera-card{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,215,128,.35);border-radius:24px;padding:15px;box-shadow:0 24px 70px rgba(0,0,0,.36);margin-bottom:14px}.welcome{display:flex;justify-content:space-between;gap:10px;padding:10px 6px;color:#d8e3ff}.welcome strong{color:#ffe59d}.stage{position:relative;overflow:hidden;border-radius:20px;background:#000;aspect-ratio:3/4;border:2px solid #d7b45a}video,#frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#frame{pointer-events:none;z-index:3}#countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:96px;font-weight:900;color:#fff4c2;text-shadow:0 8px 30px #000;z-index:4}.flash{position:absolute;inset:0;background:white;opacity:0;pointer-events:none;z-index:5}.flash.active{animation:flash .18s ease}@keyframes flash{0%{opacity:.95}100%{opacity:0}}input,select{width:100%;padding:12px;border-radius:14px;border:1px solid rgba(255,215,128,.35);background:rgba(0,0,0,.28);color:#fff;outline:0;margin-bottom:8px}input::file-selector-button{border:0;border-radius:10px;padding:8px 10px;margin-right:8px;background:#e8c05f;color:#071128;font-weight:bold}button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:14px;background:linear-gradient(135deg,#f7d47a,#b8842c);color:#071128;font-weight:800;padding:12px 14px;text-decoration:none;cursor:pointer}button.secondary,.btn.secondary{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.2)}button.danger,.btn.danger{background:#7d1d1d;color:white}.controls,.actions,.bottom-nav{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:12px}.notice,#status{margin-top:12px;text-align:center;color:#ffe59d}.bottom-nav a{color:#ffe59d;text-decoration:none;padding:9px 12px;border:1px solid rgba(255,215,128,.28);border-radius:999px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.stat{padding:18px;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,215,128,.25)}.stat b{display:block;font-size:34px;color:#ffe59d}.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.photo-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,215,128,.25);border-radius:18px;overflow:hidden}.photo-card img{width:100%;display:block}.photo-card div{padding:10px}.photo-card strong,.photo-card span,.photo-card small{display:block}.photo-card span{color:#d8e3ff}.photo-card small{color:#ffe59d;margin-top:4px}.table-wrap{overflow:auto;background:rgba(255,255,255,.08);border-radius:18px;border:1px solid rgba(255,215,128,.25)}table{border-collapse:collapse;width:100%;min-width:780px}th,td{padding:11px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}th{color:#ffe59d}td a{color:#ffe59d}.scan-box video{position:relative;border-radius:20px;border:2px solid #d7b45a;width:100%;height:auto;min-height:320px;object-fit:cover}.ok{color:#8cffb5}.bad{color:#ffb4b4}.slide-body{overflow:hidden;background:#020611}.slide-wrap{height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;position:relative}.slide-wrap img{max-width:100vw;max-height:100vh;object-fit:contain}.slide-caption{position:absolute;left:30px;bottom:30px;background:rgba(2,6,17,.72);border:1px solid #d7b45a;border-radius:18px;padding:14px 20px}.slide-caption strong{color:#ffe59d;font-size:24px}.qr-img{width:96px;height:96px;background:#fff;border-radius:10px;padding:6px}.login{display:grid;gap:10px}@media(max-width:520px){.app{padding:12px}h1{font-size:21px}.controls button,.actions button,.actions .btn{width:100%}}
.filter-menu{margin:8px 0 12px}.filter-menu label{display:block;color:#ffe59d;font-weight:700;margin:0 0 6px 4px}.filter-menu select{appearance:auto;background:rgba(0,0,0,.35)}

.inline-link{color:#ffe59d;font-weight:700}.actions button,.actions .btn{min-width:135px}

.invitation-page{max-width:520px}
.invite-card{text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));border:1px solid rgba(255,215,128,.42);border-radius:28px;padding:22px;box-shadow:0 30px 90px rgba(0,0,0,.38)}
.invite-card h1{font-size:34px;margin:14px 0 2px;color:#fff4c2}.invite-card h2{font-size:28px;margin:0;color:#e6bd62}.invite-card .school{color:#d8e3ff;margin-top:4px}
.guest-box,.event-box,.qr-panel{margin-top:16px;padding:16px;border-radius:20px;background:rgba(0,0,0,.24);border:1px solid rgba(255,215,128,.22)}
.guest-box strong{display:block;font-size:24px;color:#ffe59d;margin:8px 0}.guest-box small{color:#d8e3ff}.event-box p{margin:7px 0}.qr-panel img{width:210px;height:210px;background:white;border-radius:16px;padding:10px}
.mini{padding:7px 10px;border-radius:10px;font-size:12px;min-width:auto!important}

.alisa-invite{background-size:cover;background-position:center}.rsvp-form{display:grid;gap:10px;margin-top:14px}.ok{color:#8cffb5}

/* Guests page polished style */
.guests-page .hero h1{font-size:30px}
.guest-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0 0 14px}
.guest-stat-card{padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));border:1px solid rgba(255,215,128,.32);box-shadow:0 16px 45px rgba(0,0,0,.22)}
.guest-stat-card span{display:block;color:#d8e3ff;font-size:13px;margin-bottom:8px}
.guest-stat-card strong{display:block;color:#ffe59d;font-size:34px;line-height:1}
.guest-toolbar{position:sticky;top:8px;z-index:10;backdrop-filter:blur(12px)}
.guest-search{display:grid;grid-template-columns:1fr auto auto;gap:10px;margin-bottom:10px}
.guest-search input{margin:0}
.guest-list{display:grid;gap:14px}
.guest-card{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:16px;border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045));border:1px solid rgba(255,215,128,.30);box-shadow:0 20px 60px rgba(0,0,0,.26)}
.guest-card-left{display:flex;align-items:flex-start;justify-content:center}
.guest-qr{width:122px;height:122px;background:#fff;border-radius:18px;padding:8px;border:2px solid #d7b45a}
.guest-title-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.guest-code{display:inline-block;color:#071128;background:linear-gradient(135deg,#f7d47a,#b8842c);font-weight:900;letter-spacing:.5px;border-radius:999px;padding:5px 10px;font-size:12px;margin-bottom:6px}
.guest-card h2{margin:0;color:#fff4c2;font-size:23px}
.guest-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:700}
.pill.gold{background:rgba(247,212,122,.18);border-color:rgba(247,212,122,.50);color:#ffe59d}
.guest-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.guest-info-grid div{padding:10px;border-radius:16px;background:rgba(0,0,0,.23);border:1px solid rgba(255,255,255,.08)}
.guest-info-grid small{display:block;color:#d8e3ff;font-size:11px;margin-bottom:4px}
.guest-info-grid b{display:block;color:#fff;font-size:14px;word-break:break-word}
.guest-status-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.status-pill{display:inline-flex;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800;border:1px solid rgba(255,255,255,.18)}
.status-ok{background:rgba(26,188,112,.16);color:#8cffb5;border-color:rgba(140,255,181,.35)}
.status-wait{background:rgba(247,212,122,.14);color:#ffe59d;border-color:rgba(247,212,122,.35)}
.status-no{background:rgba(255,90,90,.14);color:#ffb4b4;border-color:rgba(255,90,90,.35)}
.guest-time{color:#d8e3ff;font-size:12px}
.guest-link-box{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:12px}
.guest-link-box input{margin:0;font-size:12px;color:#ffe59d}
.guest-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn.mini,button.mini{padding:8px 11px;border-radius:11px;font-size:12px;min-width:auto!important}
@media(max-width:760px){
  .guest-toolbar{position:static}
  .guest-search{grid-template-columns:1fr}
  .guest-card{grid-template-columns:1fr}
  .guest-card-left{justify-content:flex-start}
  .guest-title-row{display:block}
  .guest-badges{justify-content:flex-start;margin-top:8px}
  .guest-info-grid{grid-template-columns:repeat(2,1fr)}
  .guest-link-box{grid-template-columns:1fr}
}
@media(max-width:430px){
  .guest-info-grid{grid-template-columns:1fr}
  .guest-card h2{font-size:20px}
}

/* Export Attendance polished report */
.export-page .hero h1{font-size:30px}
.export-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0 0 14px}
.export-stat-grid.small-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.export-stat-card{padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));border:1px solid rgba(255,215,128,.32);box-shadow:0 16px 45px rgba(0,0,0,.22)}
.export-stat-card span{display:block;color:#d8e3ff;font-size:13px;margin-bottom:8px}
.export-stat-card strong{display:block;color:#ffe59d;font-size:34px;line-height:1}
.export-stat-card small{display:block;color:#d8e3ff;margin-top:7px}
.export-stat-card.ok-card{border-color:rgba(140,255,181,.35)}
.export-stat-card.wait-card{border-color:rgba(247,212,122,.35)}
.export-stat-card.no-card{border-color:rgba(255,90,90,.35)}
.export-toolbar{position:sticky;top:8px;z-index:10;backdrop-filter:blur(12px)}
.export-filter{display:grid;grid-template-columns:1.3fr repeat(3, minmax(140px, .7fr)) auto auto;gap:9px;margin-bottom:12px}
.export-filter input,.export-filter select{margin:0}
.report-card{padding:0;overflow:hidden}
.report-title{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;padding:18px 18px 8px}
.report-title h2{margin:0;color:#fff4c2}
.report-title p{margin:5px 0 0;color:#d8e3ff}
.report-date{color:#ffe59d;font-size:13px;text-align:right}
.export-table-wrap{border-radius:0;border-left:0;border-right:0;border-bottom:0}
.export-table th{position:sticky;top:0;background:#071128;z-index:2}
.export-table td strong{display:block;color:#fff4c2}
.row-note{display:block;color:#d8e3ff;margin-top:4px;font-size:11px}
.code-chip{display:inline-flex;color:#071128;background:linear-gradient(135deg,#f7d47a,#b8842c);font-weight:900;border-radius:999px;padding:5px 9px;font-size:12px;white-space:nowrap}
.empty-row{text-align:center;color:#ffe59d;padding:30px!important}
@media(max-width:980px){
  .export-filter{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .export-filter{grid-template-columns:1fr}
  .report-title{display:block}
  .report-date{text-align:left;margin-top:8px}
}
@media print{
  body{background:#fff;color:#111}
  .hero,.export-toolbar,.bottom-nav{display:none!important}
  .app,.wide{width:100%;padding:0}
  .export-stat-card,.card,.table-wrap{box-shadow:none;border:1px solid #ccc;background:#fff;color:#111}
  .export-stat-card strong,.report-title h2,.code-chip{color:#111}
  .status-pill{border:1px solid #aaa;color:#111;background:#fff}
  table{min-width:0;font-size:10px}
  th,td{color:#111;border-bottom:1px solid #ddd}
}

/* Export attendance bright centered style */
.export-bright-body{
  background:
    radial-gradient(circle at top left, rgba(255,224,142,.55), transparent 34%),
    radial-gradient(circle at top right, rgba(34,73,140,.18), transparent 32%),
    linear-gradient(180deg,#fff8df 0%,#f7f0dc 48%,#f4ead0 100%) !important;
  color:#102045 !important;
}
.export-bright-page{
  width:min(1120px,100%);
  margin:auto;
  padding:18px;
}
.export-hero-bright{
  text-align:center;
  padding:24px 14px 16px;
}
.export-hero-bright .badge{
  background:#102045;
  color:#ffe59d;
  border-color:#d7b45a;
}
.export-hero-bright h1{
  margin:14px 0 6px;
  font-size:34px;
  color:#102045;
}
.export-hero-bright p{
  margin:0;
  color:#52627d;
}
.export-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:14px;
}
.export-summary.rsvp-summary{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.summary-card{
  text-align:center;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(183,132,44,.25);
  border-radius:24px;
  padding:20px 12px;
  box-shadow:0 16px 45px rgba(16,32,69,.12);
}
.summary-card span{
  display:block;
  color:#52627d;
  font-size:13px;
  font-weight:700;
  margin-bottom:8px;
}
.summary-card strong{
  display:block;
  font-size:38px;
  line-height:1;
  color:#102045;
}
.summary-card small{
  display:block;
  margin-top:7px;
  color:#52627d;
}
.summary-card.success{border-color:rgba(16,153,91,.32)}
.summary-card.warning{border-color:rgba(183,132,44,.38)}
.summary-card.danger{border-color:rgba(195,65,65,.28)}
.export-filter-card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(183,132,44,.28);
  border-radius:26px;
  padding:16px;
  box-shadow:0 18px 55px rgba(16,32,69,.12);
  margin-bottom:16px;
}
.export-filter-clean{
  display:grid;
  grid-template-columns:1.3fr repeat(3,minmax(130px,.75fr)) auto auto;
  gap:9px;
  margin-bottom:12px;
}
.export-filter-clean input,
.export-filter-clean select{
  margin:0;
  background:#fff;
  color:#102045;
  border:1px solid rgba(16,32,69,.18);
}
.export-filter-clean button,
.export-actions-clean button,
.clean-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#f7d47a,#b8842c);
  color:#102045;
  font-weight:900;
  padding:12px 14px;
  text-decoration:none;
  cursor:pointer;
}
.clean-btn.secondary{
  background:#102045;
  color:#fff7d6;
}
.export-actions-clean{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
}
.attendance-card-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:14px;
}
.attendance-card{
  position:relative;
  text-align:center;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(183,132,44,.25);
  border-radius:26px;
  padding:20px 16px;
  box-shadow:0 18px 55px rgba(16,32,69,.12);
}
.attendance-code{
  display:inline-flex;
  background:#102045;
  color:#ffe59d;
  border:1px solid #d7b45a;
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
}
.attendance-card h2{
  color:#102045;
  font-size:22px;
  margin:12px 0 5px;
}
.attendance-sub{
  color:#52627d;
  margin:0 0 14px;
}
.attendance-info{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:13px;
}
.attendance-info div{
  background:#fff8df;
  border:1px solid rgba(183,132,44,.22);
  border-radius:16px;
  padding:10px 8px;
}
.attendance-info small{
  display:block;
  color:#52627d;
  font-size:11px;
  margin-bottom:3px;
}
.attendance-info strong{
  display:block;
  color:#102045;
  font-size:14px;
  word-break:break-word;
}
.attendance-status{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}
.soft-pill{
  display:inline-flex;
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  font-weight:900;
  border:1px solid transparent;
}
.soft-pill.ok{
  background:#e8fff1;
  color:#117344;
  border-color:#a6edc3;
}
.soft-pill.wait{
  background:#fff5d8;
  color:#8a6417;
  border-color:#ead08a;
}
.soft-pill.no{
  background:#ffecec;
  color:#9b2b2b;
  border-color:#f1b7b7;
}
.attendance-time,
.attendance-note{
  color:#52627d;
  font-size:12px;
  margin:8px 0 0;
}
.export-bottom-nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0;
}
.export-bottom-nav a{
  color:#102045;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(183,132,44,.28);
  text-decoration:none;
  padding:10px 13px;
  border-radius:999px;
  font-weight:800;
}
@media(max-width:980px){
  .export-filter-clean{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .export-bright-page{padding:12px}
  .export-filter-clean{grid-template-columns:1fr}
  .attendance-info{grid-template-columns:1fr}
  .export-hero-bright h1{font-size:28px}
}
@media print{
  .export-filter-card,.export-bottom-nav{display:none!important}
  .export-bright-body{background:#fff!important}
  .summary-card,.attendance-card{box-shadow:none;border:1px solid #ccc}
}

/* Invitation page styled like Data Undangan */
.alisa-invitation-body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at top left,rgba(247,212,122,.18),transparent 28%),
    radial-gradient(circle at top right,rgba(255,255,255,.10),transparent 26%),
    linear-gradient(180deg,#132e5f 0%,#203f77 48%,#132f61 100%) !important;
  color:#fff;
}
.invitation-dashboard-page{
  width:min(760px,100%);
  margin:auto;
  padding:18px;
}
.invitation-hero{
  text-align:center;
  padding:12px 8px 18px;
}
.invitation-hero h1{
  font-size:32px;
  color:#fff4c2;
  margin:12px 0 5px;
  line-height:1.12;
}
.invitation-hero p{
  margin:0;
  color:#d8e3ff;
}
.invitation-card-pro{
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
  border:1px solid rgba(255,215,128,.30);
  border-radius:28px;
  padding:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.invitation-top{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:18px;
  align-items:center;
}
.qr-wrapper{
  display:flex;
  justify-content:center;
}
.invitation-qr{
  width:145px;
  height:145px;
  background:#fff;
  border-radius:20px;
  padding:10px;
  border:3px solid #d7b45a;
  box-shadow:0 14px 35px rgba(0,0,0,.22);
}
.invitation-main-info{
  text-align:left;
}
.invitation-main-info h2{
  color:#fff4c2;
  font-size:30px;
  line-height:1.15;
  margin:10px 0 12px;
}
.invitation-info-grid{
  margin-top:18px;
}
.invitation-status-row{
  justify-content:center;
  margin:16px 0;
}
.invitation-event-box{
  text-align:center;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,215,128,.20);
  border-radius:20px;
  padding:14px;
  margin:12px 0;
}
.invitation-event-box p{
  margin:6px 0;
  color:#fff;
}
.small-note{
  color:#d8e3ff!important;
  font-size:13px;
}
.invitation-actions{
  justify-content:center;
  margin-top:12px;
}
.invitation-actions button.mini{
  background:linear-gradient(135deg,#f7d47a,#b8842c);
  color:#071128;
  font-weight:900;
}
@media(max-width:620px){
  .invitation-dashboard-page{padding:12px}
  .invitation-top{grid-template-columns:1fr;text-align:center}
  .invitation-main-info{text-align:center}
  .invitation-main-info h2{font-size:26px}
  .invitation-qr{width:135px;height:135px}
  .invitation-hero h1{font-size:28px}
}