*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
:root {
  --cream:#FAF7F2; --warm:#FFFEFB; --charcoal:#1C1A17; --mid:#4A4540; --muted:#8A857E;
  --gold:#B8924A; --gold-l:#D4B07A; --gold-p:#F5EDD8; --border:#E8E2D9;
  --green:#2D7A4F; --green-p:#EAF4EE; --red:#A03030; --red-p:#FAEAEA;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif;
}
html { scroll-behavior:smooth }
body { background:var(--cream); color:var(--charcoal); font-family:var(--sans); font-size:15px; line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased }
a { text-decoration:none; color:inherit }
textarea, input, select, button { font-family:var(--sans) }

/* ===== LOGIN ===== */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; position:relative; overflow:hidden }
.ring { position:absolute; border-radius:50%; border:1px solid rgba(184,146,74,.1); pointer-events:none; top:50%; left:50%; transform:translate(-50%,-50%) }
.r1 { width:640px; height:640px } .r2 { width:400px; height:400px }
.login-card {
  background:var(--warm); border:1px solid var(--border); border-radius:14px;
  padding:3rem 2.5rem; width:100%; max-width:420px;
  position:relative; z-index:1;
  box-shadow:0 24px 64px rgba(0,0,0,.07);
  animation:fadeUp .6s ease both
}
@keyframes fadeUp { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
.logo { font-family:var(--serif); font-size:1.5rem; font-weight:300; letter-spacing:.12em; text-align:center; margin-bottom:.2rem; text-transform:lowercase }
.logo span { color:var(--gold) }
.logo-sub { font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:2rem }
.divider { height:1px; background:var(--border); margin-bottom:1.8rem }
.login-h { font-family:var(--serif); font-size:1.8rem; font-weight:300; line-height:1.2; margin-bottom:.4rem }
.login-h em { font-style:italic; color:var(--gold) }
.login-desc { font-size:.82rem; color:var(--muted); margin-bottom:1.8rem; line-height:1.75 }
.form-group { margin-bottom:1.1rem }
.form-label { display:block; font-size:.63rem; letter-spacing:.15em; text-transform:uppercase; color:var(--mid); margin-bottom:.42rem; font-weight:500 }
.form-input { width:100%; padding:.75rem 1rem; border:1px solid var(--border); border-radius:7px; font-size:.88rem; color:var(--charcoal); background:var(--cream); transition:border-color .2s, box-shadow .2s; outline:none }
.form-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,146,74,.08) }
.form-input::placeholder { color:var(--muted); opacity:.7 }
.form-hint { font-size:.67rem; color:var(--muted); margin-top:.28rem }
.error-box { background:var(--red-p); border:1px solid rgba(160,48,48,.18); color:var(--red); font-size:.8rem; padding:.75rem 1rem; border-radius:7px; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem }
.btn-submit { width:100%; padding:.85rem; background:var(--charcoal); color:var(--cream); border:none; border-radius:7px; font-size:.85rem; letter-spacing:.08em; cursor:pointer; transition:background .2s; margin-top:.3rem }
.btn-submit:hover { background:var(--gold) }
.login-help { text-align:center; margin-top:1.5rem; font-size:.7rem; color:var(--muted) }
.login-help a { color:var(--gold) }

/* ===== TOPBAR ===== */
.topbar {
  background:rgba(255,254,251,.92); border-bottom:1px solid var(--border);
  padding:.85rem 1.5rem; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:200;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)
}
.topbar-logo { font-family:var(--serif); font-size:1.15rem; font-weight:300; letter-spacing:.1em; text-transform:lowercase }
.topbar-logo span { color:var(--gold) }
.topbar-badge {
  font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  background:var(--gold-p); border:1px solid rgba(184,146,74,.2);
  padding:.15rem .55rem; border-radius:2rem; margin-left:.6rem
}
.topbar-r { display:flex; align-items:center; gap:.8rem }
.topbar-name { font-size:.78rem; color:var(--mid); font-family:var(--serif); font-style:italic }
.btn-logout {
  font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  background:none; border:1px solid var(--border); padding:.35rem .85rem;
  border-radius:2rem; cursor:pointer; transition:all .2s
}
.btn-logout:hover { color:var(--charcoal); border-color:var(--charcoal) }

/* ===== MAIN TABS ===== */
.main-tabs {
  position:sticky;
  top:58px;
  z-index:90;
  max-width:1060px;
  margin:1rem auto 0;
  display:flex;
  gap:.65rem;
  align-items:center;
  flex-wrap:wrap;
  background:rgba(255,254,251,.82);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.45rem;
  overflow-x:auto;
  scrollbar-width:none;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.main-tabs::-webkit-scrollbar { display:none }
.mtab {
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  padding:.62rem 1rem;
  border-radius:999px;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .22s ease;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.25rem;
  text-decoration:none;
}
.mtab:hover { color:var(--charcoal); background:rgba(184,146,74,.08) }
.mtab.active {
  background:var(--charcoal);
  color:var(--cream);
  border-color:var(--charcoal);
  box-shadow:0 8px 22px rgba(28,26,23,.12);
  font-weight:500;
}
@media(max-width:768px){
  .main-tabs{ position:static; border-radius:14px; gap:.4rem; margin:.7rem 1rem 0; }
  .mtab{ flex:1 1 calc(50% - .4rem); padding:.7rem .75rem; font-size:.62rem; }
}

/* ===== BODY ===== */
.dash-body { padding:2rem 1.5rem 5rem; max-width:960px; margin:0 auto }

/* ===== PAGE HEADER ===== */
.page-ey { font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:.35rem }
.page-h { font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.1rem); font-weight:300; line-height:1.15; margin-bottom:1.5rem }
.page-h em { font-style:italic; color:var(--gold) }

/* ===== LINK BAR ===== */
.link-bar {
  background:var(--charcoal); border-radius:10px;
  padding:1.1rem 1.5rem; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap;
  box-shadow:0 4px 24px rgba(0,0,0,.1)
}
.lb-label { font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:.15rem }
.lb-url { font-family:var(--serif); font-size:.95rem; color:var(--gold-l); font-style:italic }
.btn-open {
  background:var(--gold); color:#fff; border:none; padding:.58rem 1.3rem;
  border-radius:2rem; font-size:.72rem; letter-spacing:.06em; cursor:pointer;
  white-space:nowrap; transition:all .2s; display:inline-block
}
.btn-open:hover { background:var(--gold-l); transform:translateY(-1px) }

/* ===== SUMMARY ===== */
.sum-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.85rem; margin-bottom:1.8rem }
.sum-card {
  background:var(--warm); border:1px solid var(--border); border-radius:10px;
  padding:1.3rem 1rem; text-align:center; position:relative; overflow:hidden;
  transition:transform .25s, box-shadow .25s
}
.sum-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.07) }
.sum-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px }
.s-total::before { background:var(--gold) } .s-hadir::before { background:var(--green) } .s-tidak::before { background:var(--red) }
.sum-n { font-family:var(--serif); font-size:2.6rem; font-weight:300; line-height:1; margin-bottom:.25rem }
.s-total .sum-n { color:var(--gold) } .s-hadir .sum-n { color:var(--green) } .s-tidak .sum-n { color:var(--red) }
.sum-l { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }

/* ===== RSVP CHART ===== */
.rsvp-chart-card{
  background:var(--warm);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.35rem 1.5rem;
  margin:-.6rem 0 1.8rem;
  display:grid;
  grid-template-columns:1fr 160px;
  align-items:center;
  gap:1.5rem;
}

.chart-label{
  font-size:.58rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.25rem;
}

.chart-title{
  font-family:var(--serif);
  font-size:1.25rem;
  color:var(--charcoal);
}

.chart-desc{
  font-size:.78rem;
  color:var(--muted);
  margin-top:.15rem;
}

.chart-legend{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem .9rem;
  margin-top:.85rem;
  font-size:.7rem;
  color:var(--mid);
}

.chart-legend span{
  display:inline-flex;
  align-items:center;
  gap:.38rem;
}

.chart-legend i{
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
}

.lg-hadir{ background:var(--green); }
.lg-tidak{ background:var(--red); }
.lg-belum{ background:var(--gold-l); }

.donut-chart{
  width:132px;
  height:132px;
  border-radius:50%;
  flex:0 0 132px;
  background:
    conic-gradient(
      var(--green) 0 calc(var(--hadir) * 1%),
      var(--red) calc(var(--hadir) * 1%) calc((var(--hadir) + var(--tidak)) * 1%),
      var(--gold-l) calc((var(--hadir) + var(--tidak)) * 1%) 100%
    );
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.donut-chart::after{
  content:'';
  position:absolute;
  width:86px;
  height:86px;
  background:var(--warm);
  border-radius:50%;
}

.donut-center{
  position:relative;
  z-index:1;
  text-align:center;
}

.donut-center strong{
  display:block;
  font-family:var(--serif);
  font-size:1.8rem;
  line-height:1;
  font-weight:300;
  color:var(--charcoal);
}

.donut-center span{
  display:block;
  margin-top:.25rem;
  font-size:.55rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

@media(max-width:768px){
  .rsvp-chart-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .donut-chart{
    align-self:center;
  }
}

/* ===== FILTER ===== */
.filter-row { display:flex; border-bottom:1px solid var(--border); margin-bottom:1.2rem; overflow-x:auto; scrollbar-width:none }
.filter-row::-webkit-scrollbar { display:none }
.ftab {
  font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; background:none; border:none;
  border-bottom:2px solid transparent; padding:.62rem 1rem; cursor:pointer; color:var(--muted);
  position:relative; bottom:-1px; white-space:nowrap; transition:all .18s; display:inline-block
}
.ftab:hover { color:var(--gold) }
.ftab.active { color:var(--charcoal); border-bottom-color:var(--gold); font-weight:500 }

/* ===== SEARCH ===== */
.search-wrap { position:relative; margin-bottom:1rem }
.search-input {
  width:100%; padding:.72rem 1rem .72rem 2.4rem; border:1px solid var(--border);
  border-radius:7px; font-size:.85rem; color:var(--charcoal); background:var(--warm);
  outline:none; transition:border-color .2s
}
.search-input:focus { border-color:var(--gold) }
.search-icon { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; font-size:.9rem }

/* ===== TABLE BOX ===== */
.table-box { background:var(--warm); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:1rem }
.table-top { display:flex; align-items:center; justify-content:space-between; padding:.95rem 1.4rem; border-bottom:1px solid var(--border); gap:.5rem; flex-wrap:wrap }
.table-title { font-family:var(--serif); font-size:1rem; font-weight:400 }
.table-count { font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
table { width:100%; border-collapse:collapse }
th { font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:.65rem 1.4rem; text-align:left; border-bottom:1px solid var(--border); background:rgba(245,237,216,.25); font-weight:400 }
td { padding:.88rem 1.4rem; font-size:.82rem; color:var(--mid); border-bottom:1px solid rgba(232,226,217,.5); vertical-align:top }
tr:last-child td { border-bottom:none }
tr:hover td { background:rgba(245,237,216,.15) }
.td-name { font-weight:500; color:var(--charcoal); font-size:.85rem }
.td-msg { max-width:280px; line-height:1.6 }
.td-date { font-size:.68rem; color:var(--muted); white-space:nowrap }
.badge { display:inline-block; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; padding:.22rem .65rem; border-radius:2rem; font-weight:500; white-space:nowrap }
.b-hadir { background:var(--green-p); color:var(--green) }
.b-tidak { background:var(--red-p); color:var(--red) }
.b-belum { background:var(--gold-p); color:var(--gold); border:1px solid rgba(184,146,74,.2) }
.empty { padding:2.5rem; text-align:center; color:var(--muted); font-size:.85rem; font-style:italic }

/* ===== KIRIM / CARD ===== */
.kirim-wrap { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start }
.card { background:var(--warm); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:1rem }
.card-head { padding:1rem 1.4rem; border-bottom:1px solid var(--border) }
.card-title { font-family:var(--serif); font-size:1rem; font-weight:400 }
.card-body { padding:1.4rem }

.notify-card{
  background:linear-gradient(135deg,rgba(250,247,242,.96),rgba(255,255,255,.78));
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.1rem 1.2rem;
  margin-bottom:20px;
  box-shadow:0 12px 28px rgba(0,0,0,.04);
}
.notify-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap}
.notify-title{font-family:var(--serif);font-size:1.15rem;color:var(--charcoal);line-height:1.15}
.notify-desc{font-size:.78rem;color:var(--muted);line-height:1.55;margin-top:.25rem;max-width:640px}
.notify-grid{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:end}
.notify-textarea{width:100%;min-height:88px;border:1px solid var(--border);border-radius:14px;padding:.85rem 1rem;background:rgba(255,255,255,.72);font-size:.86rem;color:var(--charcoal);resize:vertical;outline:none}
.notify-textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(184,146,74,.10)}
.notify-hint{font-size:.7rem;color:var(--muted);margin-top:.45rem;line-height:1.45}
.notify-preview{margin-top:.9rem;border:1px dashed rgba(184,146,74,.32);border-radius:14px;padding:.85rem 1rem;background:rgba(245,237,216,.28);font-size:.78rem;color:var(--mid);line-height:1.55;white-space:pre-line}
@media(max-width:720px){.notify-grid{grid-template-columns:1fr}.notify-grid .btn-primary{width:100%}}

.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:20px}
.settings-card{background:rgba(255,254,251,.82);border:1px solid var(--border);border-radius:20px;padding:1.15rem 1.2rem;box-shadow:0 14px 34px rgba(28,26,23,.045)}
.settings-card.wide{grid-column:1/-1}
.settings-title{font-family:var(--serif);font-size:1.25rem;font-weight:400;line-height:1.15;margin-bottom:.35rem}
.settings-desc{font-size:.78rem;color:var(--muted);line-height:1.6;margin-bottom:1rem}
.settings-status{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid var(--border);border-radius:16px;padding:.85rem 1rem;background:rgba(250,247,242,.6);margin-bottom:.9rem}
.status-dot{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:600;color:var(--mid)}
.status-dot::before{content:"";width:9px;height:9px;border-radius:999px;background:#b8b0a5}
.status-dot.connected::before{background:#2D7A4F}
.status-dot.connecting::before{background:#B8924A}
.status-dot.expired::before{background:#B8924A}
.status-dot.error::before,.status-dot.disconnected::before{background:#A03030}
.beta-badge{display:inline-flex;align-items:center;justify-content:center;padding:.18rem .55rem;border-radius:999px;border:1px solid rgba(184,146,74,.28);background:#FFF8E6;color:#92600A;font-family:var(--sans);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;font-style:normal;vertical-align:middle;margin-left:.45rem}
.settings-actions{display:flex;flex-wrap:wrap;gap:.55rem}
.settings-actions .btn-primary,.settings-actions .btn-open{min-height:42px}
.settings-radio{display:grid;gap:.65rem;margin-bottom:1rem}
.settings-radio label{display:flex;gap:.65rem;align-items:flex-start;border:1px solid var(--border);border-radius:16px;padding:.85rem 1rem;background:rgba(255,255,255,.66);cursor:pointer}
.settings-radio input{margin-top:.2rem;accent-color:var(--gold)}
.settings-radio strong{display:block;font-size:.86rem}
.settings-radio span{display:block;font-size:.73rem;color:var(--muted);line-height:1.45;margin-top:.12rem}
.settings-qr{display:none;margin-top:.9rem;border:1px dashed rgba(184,146,74,.34);border-radius:18px;padding:1.25rem;background:rgba(245,237,216,.24)}
.settings-qr.show{display:block}
.qr-stage{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:1.2rem;align-items:center;margin-top:.8rem}
.qr-frame{width:min(360px,100%);aspect-ratio:1/1;border:1px solid var(--border);border-radius:18px;background:#fff;padding:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 36px rgba(28,26,23,.06)}
.qr-frame img{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px;image-rendering:auto}
.qr-steps{font-size:.86rem;color:var(--mid);line-height:1.75}
.qr-steps strong{display:block;color:var(--charcoal);font-size:1rem;margin-bottom:.3rem}
.qr-error{border:1px solid rgba(160,48,48,.18);background:var(--red-p);color:var(--red);border-radius:14px;padding:.8rem 1rem;font-size:.82rem;line-height:1.5}
.token-field{margin-bottom:1rem}
.token-status{font-size:.72rem;color:var(--muted);line-height:1.45;margin-top:.35rem}
.sender-info{border:1px solid rgba(184,146,74,.22);border-radius:16px;padding:.85rem 1rem;background:rgba(245,237,216,.22);font-size:.78rem;color:var(--mid);line-height:1.55;margin-bottom:1rem}
.settings-card.is-hidden{display:none}
.risk-modal{position:fixed;inset:0;z-index:920;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(28,26,23,.46);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.risk-modal.show{display:flex}
.risk-dialog{width:min(720px,100%);max-height:88vh;overflow:auto;background:var(--warm);border:1px solid var(--border);border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.24)}
.risk-head{padding:1.35rem 1.45rem;border-bottom:1px solid var(--border)}
.risk-title{font-family:var(--serif);font-size:1.55rem;font-weight:400;line-height:1.15}
.risk-body{padding:1.2rem 1.45rem;color:var(--mid);font-size:.86rem;line-height:1.65}
.risk-list{display:grid;gap:.65rem;margin:1rem 0}
.risk-item{border:1px solid var(--border);border-radius:16px;padding:.8rem .9rem;background:rgba(250,247,242,.58)}
.risk-item strong{display:block;color:var(--charcoal);margin-bottom:.15rem}
.risk-checks{display:grid;gap:.65rem;margin-top:1rem}
.risk-checks label{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--border);border-radius:14px;padding:.75rem .85rem;background:rgba(255,255,255,.7)}
.risk-checks input{margin-top:.25rem;accent-color:var(--gold)}
.risk-actions{display:flex;justify-content:flex-end;gap:.65rem;padding:1rem 1.45rem;border-top:1px solid var(--border);background:rgba(250,247,242,.52)}
.risk-actions button:disabled{opacity:.42;cursor:not-allowed}
@media(max-width:860px){.settings-grid{grid-template-columns:1fr}.settings-card.wide{grid-column:auto}.qr-stage{grid-template-columns:1fr}.qr-frame{margin:0 auto}}


/* template buttons */
.tpl-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:.8rem }
.tpl-btn {
  padding:.58rem .8rem; border:1.5px solid var(--border); border-radius:7px;
  font-size:.75rem; cursor:pointer; background:var(--cream); color:var(--mid);
  transition:all .22s; text-align:center
}
.tpl-btn:hover { background:var(--charcoal); color:var(--cream); border-color:var(--charcoal) }
.tpl-btn.active { background:var(--charcoal); color:var(--cream); border-color:var(--charcoal) }
.tpl-btn.t-muslim.active  { background:#2D6A4F; border-color:#2D6A4F }
.tpl-btn.t-nasrani.active { background:#1a3a6b; border-color:#1a3a6b }
.tpl-btn.t-hindu.active   { background:#7B4F12; border-color:#7B4F12 }

textarea.form-input { resize:vertical; min-height:120px; line-height:1.6 }
.param-row { display:flex; gap:.5rem; margin-bottom:.8rem; align-items:center }
.param-select { padding:.62rem .85rem; border:1px solid var(--border); border-radius:7px; font-size:.82rem; color:var(--mid); background:var(--cream); outline:none; cursor:pointer; transition:border-color .2s }
.param-select:focus { border-color:var(--gold) }
.tamu-hint { font-size:.7rem; color:var(--muted); margin-bottom:.6rem; line-height:1.75 }
.hint-code { background:var(--gold-p); padding:.1rem .38rem; border-radius:3px; font-size:.68rem; color:var(--mid); font-family:monospace }

/* import area */
.import-area {
  border:2px dashed var(--border); border-radius:8px; padding:1.5rem;
  text-align:center; cursor:pointer; transition:border-color .2s, background .2s; position:relative
}
.import-area:hover { border-color:var(--gold); background:var(--gold-p) }
.import-area input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer }
.import-icon { font-size:1.8rem; margin-bottom:.4rem }
.import-text { font-size:.82rem; color:var(--mid); font-weight:500 }
.import-hint { font-size:.68rem; color:var(--muted); margin-top:.2rem }
.btn-sample {
  display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--gold);
  border:1px solid rgba(184,146,74,.3); padding:.38rem 1rem; border-radius:2rem;
  margin-top:.75rem; cursor:pointer; background:none; transition:all .2s
}
.btn-sample:hover { background:var(--gold-p) }

/* coming soon */
.cs-wrap { position:relative }
.cs-overlay { position:absolute; inset:0; background:rgba(250,247,242,.93); border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:10; backdrop-filter:blur(2px) }
.cs-badge { background:var(--charcoal); color:var(--gold-l); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; padding:.32rem 1rem; border-radius:2rem; margin-bottom:.5rem }
.cs-text { font-family:var(--serif); font-size:1.05rem; color:var(--mid); font-style:italic }

/* guest table action buttons */

.mini-action.mini-edit{ background:#f5edd8; color:#7a5b22; border-color:rgba(184,146,74,.24); }
.mini-action.mini-edit:hover{ background:var(--gold); color:#fff; }
.g-actions { display:flex; gap:.3rem; flex-wrap:wrap }
.gbtn {
  padding:.32rem .68rem; border-radius:2rem; font-size:.62rem; letter-spacing:.04em;
  border:none; cursor:pointer; transition:all .18s; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.25rem; text-decoration:none
}
.gb-wa   { background:#25D366; color:#fff }
.gb-wa:hover { background:#1DB954 }
.gb-link { background:var(--cream); color:var(--mid); border:1px solid var(--border) }
.gb-link:hover { border-color:var(--gold); color:var(--gold) }
.gb-text { background:var(--gold-p); color:var(--gold); border:1px solid rgba(184,146,74,.2) }
.gb-text:hover { background:var(--gold); color:#fff }
.gb-del  { background:var(--red-p); color:var(--red); border:1px solid rgba(160,48,48,.15) }
.gb-del:hover { background:var(--red); color:#fff }

.btn-primary {
  background:var(--charcoal); color:var(--cream); border:none; padding:.78rem 1.5rem;
  border-radius:7px; font-size:.82rem; letter-spacing:.06em; cursor:pointer;
  transition:background .2s; width:100%; margin-top:.6rem
}
.btn-primary:hover { background:var(--gold) }

.btn-export{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.5rem .9rem;
  border-radius:999px;
  background:var(--charcoal);
  color:var(--cream);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:.2s ease;
}

.btn-export:hover{
  background:var(--gold);
  color:#fff;
}

/* progress bar */
#blastProgressWrap .table-box { padding:1.2rem 1.4rem }
.prog-bar-track { height:8px; background:rgba(232,226,217,.6); border-radius:99px; overflow:hidden; margin:.75rem 0 1rem }
.prog-bar-fill { height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-l)); border-radius:99px; transition:width .35s ease }
.prog-stats { display:flex; gap:1rem; flex-wrap:wrap; font-size:.78rem; color:var(--muted) }

/* ===== TOAST ===== */
.toast {
  position:fixed; bottom:2rem; right:2rem; background:var(--charcoal); color:var(--cream);
  padding:.78rem 1.4rem; border-radius:8px; font-size:.8rem; z-index:999;
  opacity:0; transform:translateY(10px); transition:all .3s; pointer-events:none; max-width:300px
}
.toast.show { opacity:1; transform:translateY(0) }

/* ===== PAGNATION ===== */

.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:22px;
  padding:0 1rem 1.4rem;
  flex-wrap:wrap;
}

.page-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.68rem 1.15rem;
  border-radius:999px;
  text-decoration:none;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  background:var(--charcoal);
  color:var(--cream);
  border:1px solid transparent;
  transition:all .22s ease;
}

.page-btn:hover{
  background:var(--gold);
  color:#fff;
  transform:translateY(-1px);
}

.page-btn.active{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
  box-shadow:0 8px 20px rgba(184,146,74,.18);
}

.page-btn.active::after{
  content:'';
  width:4px;
  height:4px;
  border-radius:999px;
  background:#fff;
  margin-left:6px;
  opacity:.85;
}

.page-info{
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px) {
  .kirim-wrap { grid-template-columns:1fr }
  .sum-row { gap:.5rem }
  .sum-n { font-size:2rem }
  .dash-body { padding:1.5rem 1rem 4rem }
  .topbar { padding:.75rem 1rem }
  .topbar-name { display:none }
  th, td { padding:.65rem 1rem }
  .td-msg { max-width:150px }
  .link-bar { flex-direction:column; align-items:flex-start }
  .tpl-grid { grid-template-columns:1fr 1fr }
}

/* ===== UPDATE MODAL ===== */
.wr-update-overlay{
  position:fixed;
  inset:0;
  background:rgba(28,26,23,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}

.wr-update-card{
  width:100%;
  max-width:460px;
  background:var(--warm);
  border:1px solid var(--border);
  border-radius:18px;
  padding:2rem;
  box-shadow:0 28px 80px rgba(0,0,0,.18);
  animation:fadeUp .35s ease both;
}

.wr-update-badge{
  display:inline-flex;
  padding:.28rem .8rem;
  border-radius:999px;
  background:var(--gold-p);
  color:var(--gold);
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:1rem;
}

.wr-update-card h2{
  font-family:var(--serif);
  font-size:1.65rem;
  font-weight:300;
  line-height:1.2;
  margin-bottom:.5rem;
}

.wr-update-card p{
  font-size:.82rem;
  color:var(--muted);
  margin-bottom:1rem;
}

.wr-update-card ul{
  list-style:none;
  display:grid;
  gap:.55rem;
  margin:1rem 0 1.4rem;
}

.wr-update-card li{
  font-size:.82rem;
  color:var(--mid);
}

.wr-update-card li::before{
  content:'✓';
  color:var(--gold);
  margin-right:.5rem;
}

.wr-update-btn{
  width:100%;
  border:none;
  border-radius:999px;
  padding:.85rem 1rem;
  background:var(--charcoal);
  color:var(--cream);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.2s ease;
}

.wr-update-btn:hover{
  background:var(--gold);
}

.wr-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.wr-table th,
.wr-table td{
  padding:12px 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  text-align:left;
  vertical-align:top;
}

.wr-table th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#9a8564;
  font-weight:600;
}

.wr-table a{
  color:#b8893b;
  text-decoration:none;
  font-weight:600;
}



.data-retention-note{
  margin: 14px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(184,137,59,.22);
  background: #fff9ef;
  color: #7b653e;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
}
.guest-page-info{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}
.guest-pagination{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.page-ellipsis{
  color: var(--muted);
  padding: 7px 2px;
}

.guest-badge{
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
font-size:11px;
font-weight:600;
line-height:1;
}

.badge-blue{background:#eaf3ff;color:#2f6fb2;}
.badge-yellow{background:#fff3d8;color:#a36b00;}
.badge-green{background:#e8f7ef;color:#23824d;}
.badge-red{background:#fdeaea;color:#b83b3b;}
.badge-gray{background:#f1f1f1;color:#777;}



.mini-action{
  margin-left:6px;
  border:1px solid rgba(0,0,0,.12);
  background:#fffaf3;
  color:#a8752b;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}

.mini-action:hover{
  background:#f5ead8;
}

.mini-wa{
  background:#e9f8ef;
  color:#168143;
  border-color:rgba(22,129,67,.18);
}

.mini-wa:hover{
  background:#dff4e8;
}

.mini-danger{
  background:#fff0f0;
  color:#b83b3b;
  border-color:rgba(184,59,59,.2);
}

.mini-danger:hover{
  background:#fde4e4;
}


.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
}
.category-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:rgba(255,254,251,.78);
}
.cat-name{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.cat-total{
  font-family:var(--serif);
  font-size:2rem;
  line-height:1;
  color:var(--gold);
}
.cat-mini{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:8px;
  font-size:.72rem;
  color:var(--mid);
}
.manual-guest-form{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr .7fr auto;
  gap:10px;
  align-items:center;
}
.manual-guest-form input{
  width:100%;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.68rem .9rem;
  font-size:.82rem;
  background:var(--cream);
  color:var(--charcoal);
  outline:none;
}
.manual-guest-form input:focus{
  border-color:var(--gold);
}
@media(max-width:900px){
  .manual-guest-form{
    grid-template-columns:1fr;
  }
}

.th-sort{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:.18s ease;white-space:nowrap}.th-sort:hover{color:var(--gold);border-color:rgba(184,146,74,.45)}
.search-select{border:1px solid var(--border);border-radius:999px;background:var(--warm);padding:.72rem 1rem;font-size:.85rem;color:var(--charcoal);outline:none;min-width:170px}.search-wrap{gap:.6rem;align-items:center}.search-wrap .search-select{margin-left:.6rem}
.category-insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px}.category-insight-card{border:1px solid var(--border);border-radius:18px;padding:14px;background:rgba(255,255,255,.5)}.category-insight-name{font-weight:700;color:var(--charcoal);margin-bottom:5px}.category-insight-meta{font-size:.78rem;color:var(--muted);line-height:1.5}.category-insight-bar{height:8px;border-radius:999px;background:#eee;overflow:hidden;margin-top:9px}.category-insight-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#2d7a4f,#b8924a)}



/* ===== PHASE 4 POLISH: GUEST UI ===== */
.search-wrap{
  display:flex;
  align-items:center;
  gap:.7rem;
  position:relative;
  margin-bottom:1rem;
}
.search-wrap .search-input{
  flex:1;
  min-width:0;
}
.search-wrap .search-icon{
  position:absolute;
  left:.85rem;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
}
.search-wrap .search-select{
  margin-left:0 !important;
  flex:0 0 220px;
  height:44px;
}
.guest-page-info{
  text-align:center;
  margin:0;
  padding:1rem 1rem .75rem;
  color:var(--muted);
  font-size:.82rem;
  border-bottom:1px solid rgba(232,226,217,.48);
}
.wr-table th,
.wr-table td{
  padding:18px 20px !important;
  line-height:1.6;
}
.wr-table th{
  background:rgba(245,237,216,.32);
}
.wr-table td:first-child,
.wr-table th:first-child{
  padding-left:26px !important;
}
.wr-table td:last-child,
.wr-table th:last-child{
  padding-right:26px !important;
}
.guest-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 1rem;
  flex-wrap:wrap;
}
.guest-toolbar-title{
  color:var(--muted);
  font-size:.82rem;
}
.btn-add-guest{
  border:0;
  cursor:pointer;
  background:var(--charcoal);
  color:var(--cream);
  border-radius:999px;
  padding:.82rem 1.25rem;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 12px 26px rgba(28,26,23,.12);
  transition:.2s ease;
}
.btn-add-guest:hover{ background:var(--gold); transform:translateY(-1px); }
.guest-modal-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  background:rgba(28,26,23,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.guest-modal-overlay.show{ display:flex; }
.guest-modal-card{
  width:100%;
  max-width:560px;
  background:rgba(255,254,251,.86);
  border:1px solid rgba(232,226,217,.86);
  border-radius:24px;
  box-shadow:0 28px 90px rgba(0,0,0,.22);
  overflow:hidden;
  animation:modalIn .22s ease both;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(12px) scale(.98) } to{ opacity:1; transform:translateY(0) scale(1) } }
.guest-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1.35rem 1.5rem 1rem;
  border-bottom:1px solid var(--border);
}
.guest-modal-head .eyebrow{ margin-bottom:.35rem; }
.guest-modal-head h3{ margin:0; font-size:1.25rem; }
.guest-modal-close{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--border);
  background:rgba(255,255,255,.7);
  cursor:pointer;
  font-size:1.2rem;
  color:var(--muted);
}
.guest-modal-body{ padding:1.35rem 1.5rem 1.5rem; }
.manual-guest-form{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.manual-guest-form input{
  width:100%;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.86rem 1rem;
  font-size:.88rem;
  background:rgba(255,255,255,.68);
  color:var(--charcoal);
  outline:none;
}
.manual-guest-form .manual-wide{ grid-column:1 / -1; }
.manual-guest-form button{
  grid-column:1 / -1;
  width:100%;
  margin-top:.2rem;
}
.manual-format-note{
  grid-column:1 / -1;
  font-size:.74rem;
  color:var(--muted);
  line-height:1.55;
}
.category-panel-sub{
  color:var(--muted);
  font-size:.84rem;
  line-height:1.55;
  margin-top:.35rem;
}
.category-grid{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
  gap:14px !important;
  padding:0 0 .2rem;
}
.category-card{
  border-radius:20px !important;
  padding:18px !important;
  background:linear-gradient(180deg,rgba(255,254,251,.88),rgba(250,247,242,.72)) !important;
  box-shadow:0 14px 36px rgba(28,26,23,.04);
}
.cat-head-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.8rem;
  margin-bottom:.75rem;
}
.cat-name{ margin-bottom:0 !important; }
.cat-total{ font-size:2.15rem !important; }
.cat-percent{
  font-size:.7rem;
  color:var(--muted);
  background:rgba(245,237,216,.7);
  padding:.22rem .55rem;
  border-radius:999px;
  white-space:nowrap;
}
.cat-bar{
  height:8px;
  border-radius:999px;
  background:rgba(232,226,217,.65);
  overflow:hidden;
  margin:.75rem 0 .65rem;
}
.cat-bar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold-l));
}
.cat-mini{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:6px !important;
  margin-top:10px !important;
}
.cat-mini span{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(232,226,217,.7);
  border-radius:12px;
  padding:.45rem .5rem;
  font-size:.68rem;
  text-align:center;
}
.category-insight-card{
  background:linear-gradient(180deg,rgba(255,254,251,.88),rgba(250,247,242,.72)) !important;
  box-shadow:0 12px 32px rgba(28,26,23,.04);
}
.rsvp-chart-card{
  box-shadow:0 16px 42px rgba(28,26,23,.04);
}
@media(max-width:768px){
  .search-wrap{ flex-direction:column; align-items:stretch; }
  .search-wrap .search-select{ flex:auto; width:100%; }
  .manual-guest-form{ grid-template-columns:1fr; }
  .manual-guest-form .manual-wide{ grid-column:auto; }
  .cat-mini{ grid-template-columns:1fr !important; }
}

/* ===== PWA / MOBILE APP FEEL ===== */
@media (display-mode: standalone) {
  body { background:var(--cream); }
}

.mobile-bottom-nav{
  display:none;
}

.install-app-cta{
  position:fixed;
  left:1rem;
  right:1rem;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:850;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  max-width:520px;
  margin:0 auto;
  padding:.85rem .95rem;
  background:rgba(28,26,23,.96);
  color:var(--cream);
  border:1px solid rgba(212,176,122,.28);
  border-radius:18px;
  box-shadow:0 18px 46px rgba(0,0,0,.2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.install-app-cta.show{ display:flex; }
.install-app-copy strong{ display:block; font-size:.82rem; line-height:1.2; }
.install-app-copy span{ display:block; margin-top:.18rem; font-size:.68rem; color:rgba(250,247,242,.72); line-height:1.35; }
.install-app-actions{ display:flex; align-items:center; gap:.45rem; flex:0 0 auto; }
.install-app-btn{
  border:0;
  border-radius:999px;
  padding:.62rem .9rem;
  background:var(--gold);
  color:#fff;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.install-app-dismiss{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(250,247,242,.18);
  background:transparent;
  color:rgba(250,247,242,.8);
  cursor:pointer;
  font-size:1rem;
}

@media(max-width:760px){
  body{ font-size:14px; }
  .login-wrap{ padding:1rem; align-items:flex-start; padding-top:9vh; }
  .login-card{ padding:2rem 1.35rem; border-radius:18px; }
  .topbar{
    min-height:58px;
    padding:.75rem 1rem;
  }
  .topbar-badge{ display:none; }
  .btn-logout{ padding:.48rem .75rem; min-height:38px; }
  .main-tabs{ display:none; }
  .mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:700;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0;
    padding:.38rem .45rem calc(.38rem + env(safe-area-inset-bottom));
    background:rgba(255,254,251,.94);
    border-top:1px solid var(--border);
    box-shadow:0 -14px 34px rgba(28,26,23,.08);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  .mobile-bottom-nav a{
    min-width:0;
    min-height:52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.13rem;
    border-radius:14px;
    color:var(--muted);
    font-size:.56rem;
    line-height:1.1;
    text-align:center;
  }
  .mobile-bottom-nav .nav-ico{ font-size:1.05rem; line-height:1; }
  .mobile-bottom-nav a.active{
    background:var(--charcoal);
    color:var(--cream);
  }
  .dash-body{
    max-width:none;
    padding:1.2rem .9rem calc(6rem + env(safe-area-inset-bottom));
  }
  .page-h{ font-size:1.65rem; margin-bottom:1.1rem; }
  .link-bar{ border-radius:16px; padding:1rem; }
  .lb-url{ word-break:break-word; font-size:.86rem; }
  .sum-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sum-card{ border-radius:16px; padding:1rem .7rem; }
  .sum-n{ font-size:2rem; }
  .card,.table-box,.notify-card,.rsvp-chart-card{ border-radius:18px; }
  .card-head,.table-top{ padding:1rem; }
  .card-body{ padding:1rem; }
  .rsvp-chart-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:1rem;
  }
  .donut-chart{ align-self:center; }
  .filter-row{
    gap:.45rem;
    border-bottom:0;
    padding-bottom:.15rem;
  }
  .ftab{
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--warm);
    padding:.62rem .82rem;
    bottom:auto;
  }
  .ftab.active{
    background:var(--charcoal);
    color:var(--cream);
    border-color:var(--charcoal);
  }
  .search-input,.search-select,.form-input,.param-select,.notify-textarea{
    min-height:46px;
    font-size:16px;
  }
  .search-wrap .search-input{ padding-left:2.35rem; }
  .kirim-wrap{ gap:.9rem; }
  .tpl-grid{ grid-template-columns:1fr; }
  .param-row{ align-items:stretch; }
  .param-select{ flex:0 0 92px; }
  .btn-primary,.btn-open,.btn-add-guest,.page-btn,.mini-action,.gbtn{
    min-height:42px;
  }
  .guest-toolbar{ align-items:stretch; }
  .btn-add-guest{ width:100%; }
  .guest-modal-overlay{ align-items:flex-end; padding:.75rem; }
  .guest-modal-card{ max-width:none; border-radius:24px 24px 18px 18px; }
  .guest-modal-body{ padding:1rem; }
  .manual-guest-form input{ border-radius:14px; min-height:46px; }
  .guest-table-scroll{ overflow:visible !important; }
  table.responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table th,
  .responsive-table td{
    display:block;
    width:100%;
  }
  .responsive-table thead{ display:none; }
  .responsive-table tr{
    background:rgba(255,254,251,.94);
    border:1px solid var(--border);
    border-radius:16px;
    padding:.75rem;
    margin:.75rem;
    box-shadow:0 12px 28px rgba(28,26,23,.04);
  }
  .responsive-table td{
    border-bottom:1px solid rgba(232,226,217,.6);
    padding:.58rem 0 !important;
    display:grid;
    grid-template-columns:minmax(92px,34%) 1fr;
    gap:.75rem;
    align-items:start;
    font-size:.84rem;
  }
  .responsive-table td:last-child{ border-bottom:0; padding-bottom:0 !important; }
  .responsive-table td::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:.58rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    line-height:1.45;
  }
  .responsive-table .td-name{ font-size:.92rem; }
  .responsive-table .td-msg{ max-width:none; }
  .responsive-table .g-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.45rem;
  }
  .responsive-table .gbtn,
  .responsive-table .mini-action{
    justify-content:center;
    margin-left:0;
    width:100%;
    padding:.62rem .55rem;
  }
  .pagination{
    gap:.5rem;
    padding:.8rem;
  }
  .page-btn{ flex:1 1 auto; padding:.65rem .8rem; }
  .toast{
    left:1rem;
    right:1rem;
    bottom:calc(5.5rem + env(safe-area-inset-bottom));
    max-width:none;
    text-align:center;
  }
  .install-app-cta{
    bottom:calc(5.4rem + env(safe-area-inset-bottom));
  }
}

/* ===== VISIBLE UI REFRESH: PREMIUM APP SHELL ===== */
body{
  background:
    radial-gradient(circle at 12% -8%, rgba(212,176,122,.18), transparent 34rem),
    radial-gradient(circle at 94% 4%, rgba(45,122,79,.10), transparent 26rem),
    linear-gradient(180deg,#fbf7f0 0%,#f7f1e7 48%,#faf7f2 100%);
}

.topbar{
  min-height:70px;
  padding:0 1.4rem;
  background:rgba(28,26,23,.92);
  border-bottom:1px solid rgba(212,176,122,.24);
  color:var(--cream);
  box-shadow:0 16px 40px rgba(28,26,23,.12);
}
.topbar-logo{ color:var(--cream); }
.topbar-badge{
  background:rgba(212,176,122,.16);
  color:var(--gold-l);
  border-color:rgba(212,176,122,.28);
}
.topbar-name{ color:rgba(250,247,242,.82); }
.btn-logout{
  color:rgba(250,247,242,.78);
  border-color:rgba(250,247,242,.18);
}
.btn-logout:hover{
  color:#fff;
  border-color:rgba(212,176,122,.58);
  background:rgba(212,176,122,.12);
}

.main-tabs{
  top:82px;
  max-width:1180px;
  margin:1.1rem auto 0;
  justify-content:center;
  background:rgba(255,254,251,.74);
  border-color:rgba(232,226,217,.74);
  box-shadow:0 18px 52px rgba(28,26,23,.08);
}
.mtab{
  min-height:42px;
  padding:.7rem 1.1rem;
}
.mtab.active{
  background:linear-gradient(135deg,var(--charcoal),#3c3329);
  box-shadow:0 12px 30px rgba(28,26,23,.18);
}

.dash-body{
  max-width:1180px;
  padding-top:2.4rem;
}
.dash-body::before{
  content:'Wedding Communication App';
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:.24rem .74rem;
  margin-bottom:.75rem;
  border:1px solid rgba(184,146,74,.24);
  border-radius:999px;
  background:rgba(255,254,251,.65);
  color:var(--gold);
  font-size:.56rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  box-shadow:0 12px 28px rgba(184,146,74,.08);
}
.page-ey{
  color:#7a5b22;
  background:rgba(184,146,74,.12);
  border:1px solid rgba(184,146,74,.18);
  display:inline-flex;
  border-radius:999px;
  padding:.25rem .68rem;
  margin-bottom:.75rem;
}
.page-h{
  font-size:clamp(2rem,4.2vw,3.65rem);
  max-width:760px;
  letter-spacing:0;
}

.link-bar{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:1.25rem 1.35rem;
  background:
    linear-gradient(135deg,rgba(28,26,23,.96),rgba(62,51,40,.96)),
    var(--charcoal);
  border:1px solid rgba(212,176,122,.18);
  box-shadow:0 22px 55px rgba(28,26,23,.18);
}
.link-bar::after{
  content:'';
  position:absolute;
  inset:auto -6rem -8rem auto;
  width:18rem;
  height:18rem;
  border:1px solid rgba(212,176,122,.13);
  border-radius:50%;
}
.lb-label,.lb-url,.btn-open{ position:relative; z-index:1; }
.btn-open,.btn-primary,.btn-add-guest,.btn-export{
  box-shadow:0 12px 28px rgba(184,146,74,.16);
}
.btn-open{
  background:linear-gradient(135deg,var(--gold),#cda45c);
}

.notify-card,.card,.table-box,.rsvp-chart-card,.sum-card,.category-card,.category-insight-card{
  border-color:rgba(232,226,217,.78);
  background:rgba(255,254,251,.78);
  box-shadow:0 18px 48px rgba(28,26,23,.055);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.notify-card,.card,.table-box,.rsvp-chart-card{ border-radius:22px; }
.card-head,.table-top{
  min-height:72px;
  background:linear-gradient(180deg,rgba(255,254,251,.76),rgba(250,247,242,.5));
}
.card-head h3{
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:400;
}
.sum-row{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.sum-card{
  min-height:138px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  text-align:left;
  border-radius:22px;
  padding:1.25rem;
}
.sum-card::before{
  height:100%;
  width:4px;
  right:auto;
  bottom:0;
}
.sum-n{
  font-size:3.2rem;
  letter-spacing:0;
}
.sum-l{
  font-size:.64rem;
  line-height:1.35;
}

.notify-title,.table-title,.card-title{
  font-size:1.18rem;
}
.notify-grid{
  grid-template-columns:minmax(0,1fr) 180px;
}
.notify-grid .btn-primary{
  margin-top:0;
  height:48px;
}

.filter-row{
  border:0;
  gap:.5rem;
}
.ftab{
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,254,251,.72);
  bottom:auto;
  padding:.64rem .95rem;
}
.ftab.active{
  background:var(--charcoal);
  color:var(--cream);
  border-color:var(--charcoal);
}
.search-input,.search-select,.form-input,.param-select,.notify-textarea{
  border-radius:14px;
  background:rgba(255,254,251,.82);
}
.search-select,.manual-guest-form input{
  border-radius:14px;
}

.wr-table th,
th{
  color:#7d6844;
  background:rgba(245,237,216,.42);
}
.wr-table tr:hover td,
tr:hover td{
  background:rgba(184,146,74,.055);
}
.guest-badge,.badge{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
}
.mini-action,.gbtn{
  min-height:36px;
}

.mobile-bottom-nav{
  border-top-color:rgba(232,226,217,.78);
}
.mobile-bottom-nav a.active{
  background:linear-gradient(135deg,var(--charcoal),#3c3329);
  box-shadow:0 10px 24px rgba(28,26,23,.16);
}

@media(min-width:940px){
  .notify-card{
    display:block;
  }
  .sum-row + .sum-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .kirim-wrap{
    grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);
  }
}

@media(max-width:760px){
  .topbar{
    min-height:62px;
    padding:0 .95rem;
  }
  .dash-body::before{
    margin-top:.1rem;
    font-size:.52rem;
  }
  .page-h{
    font-size:2rem;
  }
  .sum-row{
    grid-template-columns:1fr 1fr;
    gap:.65rem;
  }
  .sum-card{
    min-height:118px;
    border-radius:18px;
    padding:1rem;
  }
  .sum-n{
    font-size:2.25rem;
  }
  .notify-grid{
    grid-template-columns:1fr;
  }
  .link-bar,.notify-card,.card,.table-box,.rsvp-chart-card{
    border-radius:18px;
  }
}

/* ===== PANDUAN PENGGUNA LINK ===== */
.wr-guide-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .63rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-l, #D4B07A);
  background: rgba(212,176,122,.12);
  border: 1px solid rgba(212,176,122,.32);
  padding: .35rem .85rem;
  border-radius: 2rem;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
  line-height: 1;
}
.wr-guide-link:hover {
  color: #fff;
  border-color: rgba(212,176,122,.7);
  background: rgba(212,176,122,.24);
  text-decoration: none;
}
@media(max-width:760px) {
  .wr-guide-link {
    padding: .48rem .75rem;
    min-height: 38px;
    font-size: .62rem;
  }
}