/* e-Guests organiser portal — demo */
:root{
  --navy:#0B1B3F; --navy-2:#132A5E; --navy-3:#1E3A7A;
  --sky:#8FCBFF; --sky-2:#BFE3FF; --sky-soft:#EEF6FF;
  --nude:#E9C3B5; --nude-soft:#FCF3EF; --pop:#FF5C8A; --sun:#FFB547; --mint:#2BB673; --grey:#A7B0C4;
  --bg:#F5F7FC; --card:#fff; --text:#1B2540; --muted:#6B7590; --line:#E6EAF3;
  --grad-btn:linear-gradient(120deg,#FF5C8A 0%,#FF8A7A 45%,#FFB547 100%);
  --shadow:0 18px 40px -22px rgba(11,27,63,.35);
  --f-display:'Cormorant Garamond',Georgia,serif; --f-sans:'Outfit',system-ui,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ overflow-x:clip; }
body{ margin:0; font-family:var(--f-sans); font-weight:300; color:var(--text); background:var(--bg); display:grid; grid-template-columns:260px 1fr; min-height:100vh; -webkit-font-smoothing:antialiased; }
svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
button,input,select{ font:inherit; color:inherit; }
h1,h2,h3{ margin:0; font-weight:500; }
p{ margin:0; }
.muted{ color:var(--muted); } .small{ font-size:.82rem; } .center{ text-align:center; } .right{ text-align:right; }

/* ---------- sidebar ---------- */
.side{ position:sticky; top:0; height:100vh; background:linear-gradient(180deg,var(--navy) 0%,#0A1633 100%); color:#DCE4F7; padding:22px 16px; display:flex; flex-direction:column; gap:18px; overflow:hidden; }
.side::before{ content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:var(--sky); filter:blur(90px); opacity:.25; top:-80px; left:-80px; pointer-events:none; }
.side > *{ position:relative; }
.side-brand img{ width:92px; height:auto; margin:0 auto; display:block; }
.side-event{ padding:16px; border-radius:18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.side-event small{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sky-2); }
.side-event b{ display:block; font-family:var(--f-display); font-size:1.7rem; font-weight:500; color:#fff; line-height:1.2; }
.side-event span{ font-size:.82rem; }
.side-count{ margin-top:10px; font-size:.78rem; color:var(--sun); font-weight:500; }
.side-nav{ display:flex; flex-direction:column; gap:4px; }
.side-nav button{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; border:0; background:none; cursor:pointer; font-size:.94rem; text-align:left; color:#C9D3EC; transition:background .2s, color .2s; }
.side-nav button svg{ font-size:1.2rem; }
.side-nav button:hover{ background:rgba(255,255,255,.07); color:#fff; }
.side-nav button.on{ background:#fff; color:var(--navy); font-weight:500; box-shadow:0 10px 24px -12px rgba(0,0,0,.5); }
.side-nav button.on svg{ color:var(--pop); }
.side-nav em,.tabs em{ margin-left:auto; min-width:22px; height:22px; padding:0 7px; border-radius:99px; background:var(--pop); color:#fff; font-style:normal; font-size:.72rem; font-weight:600; display:grid; place-items:center; }
.side-foot{ margin-top:auto; display:grid; gap:6px; }
.side-foot a,.side-foot button{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; border:0; background:none; color:#C9D3EC; text-decoration:none; font-size:.86rem; cursor:pointer; }
.side-foot a:hover,.side-foot button:hover{ background:rgba(255,255,255,.07); color:#fff; }

/* ---------- main ---------- */
.main{ padding:26px 32px 60px; min-width:0; }
.top{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; }
.top-kicker{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--pop); font-weight:500; }
.top h1{ font-family:var(--f-display); font-size:2.4rem; color:var(--navy); line-height:1.1; }
.top-right{ display:flex; align-items:center; gap:12px; }
.live{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:99px; background:#E7F8EF; color:#12804A; font-size:.8rem; font-weight:500; }
.live i{ width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(43,182,115,.6); animation:ping 1.8s infinite; }
.live.small{ padding:4px 10px; font-size:.72rem; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(43,182,115,.6); } 80%,100%{ box-shadow:0 0 0 10px rgba(43,182,115,0); } }
.tabs{ display:none; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:99px; border:1px solid transparent; font-weight:500; font-size:.86rem; cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform .2s, box-shadow .2s, background .2s; }
.btn svg{ font-size:1.05rem; }
.btn:active{ transform:scale(.97); }
.btn-pop{ background:var(--grad-btn); color:#fff; box-shadow:0 10px 24px -12px rgba(255,92,138,.9); }
.btn-pop:hover{ transform:translateY(-1px); }
.btn-ghost{ background:#fff; border-color:var(--line); color:var(--navy); }
.btn-ghost:hover{ border-color:var(--sky); }
.btn.wide{ width:100%; margin-top:18px; }
.icon-btn{ width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:#fff; display:inline-grid; place-items:center; cursor:pointer; color:var(--navy-3); font-size:1rem; transition:all .2s; }
.icon-btn:hover{ border-color:var(--sky); background:var(--sky-soft); }
.icon-btn.danger:hover{ border-color:#F5B4C5; background:#FFF0F4; color:var(--pop); }

.tip{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:18px; background:linear-gradient(120deg,#FFF0F4,#EEF6FF); border:1px solid #F8D5DF; margin-bottom:18px; }
.tip > svg{ font-size:1.6rem; color:var(--pop); }
.tip p{ flex:1; font-size:.92rem; }
.tip b{ font-weight:600; color:var(--navy); }

.card{ background:var(--card); border-radius:22px; padding:22px; box-shadow:var(--shadow); border:1px solid var(--line); min-width:0; }
.card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px; }
.card h2{ font-family:var(--f-display); font-size:1.5rem; color:var(--navy); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.stat{ position:relative; overflow:hidden; padding:18px; border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.stat::after{ content:""; position:absolute; right:-24px; top:-24px; width:90px; height:90px; border-radius:50%; background:var(--c,var(--sky)); opacity:.16; }
.stat small{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.stat b{ display:block; font-family:var(--f-display); font-size:2.5rem; font-weight:600; color:var(--navy); line-height:1.1; margin-top:4px; font-variant-numeric:tabular-nums; }
.stat span{ font-size:.8rem; color:var(--muted); }
.stat.bump b{ animation:bump .6s ease; }
@keyframes bump{ 30%{ transform:scale(1.15); color:var(--pop); } }

.donut-wrap{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
#donut svg{ width:180px; height:180px; stroke:none; }
#donut circle{ transition:stroke-dasharray .8s ease, stroke-dashoffset .8s ease; }
.legend{ list-style:none; margin:0; padding:0; display:grid; gap:10px; flex:1; min-width:160px; }
.legend li{ display:flex; align-items:center; gap:10px; font-size:.9rem; }
.legend i{ width:12px; height:12px; border-radius:4px; background:var(--c); }
.legend b{ margin-left:auto; font-weight:600; color:var(--navy); }
.deadline-big b{ font-family:var(--f-display); font-size:3rem; font-weight:600; color:var(--navy); line-height:1; }
.deadline-big span{ margin-left:8px; color:var(--muted); }
.bar{ height:10px; border-radius:99px; background:var(--sky-soft); overflow:hidden; margin:12px 0 8px; }
.bar span{ display:block; height:100%; border-radius:99px; background:var(--grad-btn); transition:width 1s ease; }
.mini-title{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:22px 0 10px; }
.hbars{ display:grid; gap:12px; }
.hbar{ display:grid; grid-template-columns:120px 1fr 34px; align-items:center; gap:12px; font-size:.88rem; }
.hbar-track{ height:10px; border-radius:99px; background:var(--sky-soft); overflow:hidden; }
.hbar-track span{ display:block; height:100%; border-radius:99px; background:var(--c,var(--navy-3)); transition:width .8s ease; }
.hbar b{ text-align:right; font-weight:600; color:var(--navy); }
.feed{ list-style:none; margin:0; padding:0; display:grid; gap:4px; max-height:320px; overflow-y:auto; }
.feed li{ display:flex; gap:12px; padding:10px 6px; border-bottom:1px solid var(--line); font-size:.88rem; }
.feed li:last-child{ border-bottom:0; }
.feed li::before{ content:""; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--sky); flex:none; }
.feed li.fresh{ animation:fresh 1.6s ease; border-radius:12px; }
.feed li.fresh::before{ background:var(--pop); }
@keyframes fresh{ from{ background:#FFF0F4; } }
.feed time{ margin-left:auto; color:var(--muted); font-size:.76rem; white-space:nowrap; padding-left:10px; }

/* ---------- guests table ---------- */
.toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:16px; }
.search{ display:flex; align-items:center; gap:10px; flex:1; min-width:220px; padding:0 14px; border-radius:14px; background:#fff; border:1px solid var(--line); }
.search svg{ color:var(--muted); }
.search input{ border:0; outline:0; padding:12px 0; width:100%; background:none; font-weight:400; }
.filters{ display:flex; flex-wrap:wrap; gap:6px; }
.filters button{ padding:9px 14px; border-radius:99px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:.82rem; }
.filters button.on{ background:var(--navy); color:#fff; border-color:var(--navy); }
.toolbar-actions{ display:flex; gap:8px; }
.table-card{ padding:0; overflow:hidden; }
.gtable{ width:100%; border-collapse:collapse; font-size:.9rem; }
.gtable th{ text-align:left; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; padding:14px 16px; background:#FAFBFE; border-bottom:1px solid var(--line); }
.gtable td{ padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.gtable tr:last-child td{ border-bottom:0; }
.gtable tbody tr{ transition:background .2s; }
.gtable tbody tr:hover{ background:#FAFBFE; }
.gtable tr.flash{ animation:fresh 1.6s ease; }
.who{ display:flex; align-items:center; gap:12px; }
.avatar{ width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:600; font-size:.82rem; color:#fff; background:var(--c,var(--navy-3)); }
.who b{ display:block; font-weight:500; color:var(--navy); }
.who small{ color:var(--muted); font-size:.78rem; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px; font-size:.76rem; font-weight:500; white-space:nowrap; }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.attending{ background:#E7F8EF; color:#12804A; }
.pill.maybe{ background:#FFF4E0; color:#B26A00; }
.pill.not_attending{ background:#FFEDF2; color:#C2185B; }
.pill.pending{ background:#EEF1F7; color:#5B6784; }
.pill.in{ background:#E4F1FF; color:var(--navy-3); }
.row-actions{ display:flex; justify-content:flex-end; gap:6px; }
.empty{ padding:40px; text-align:center; color:var(--muted); }
@media (max-width:860px){
  .gtable thead{ display:none; }
  .gtable, .gtable tbody, .gtable tr, .gtable td{ display:block; width:100%; }
  .gtable tr{ padding:14px 16px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:8px 12px; }
  .gtable td{ padding:0; border:0; }
  .gtable td[data-l]{ font-size:.82rem; color:var(--muted); }
  .gtable td[data-l]::before{ content:attr(data-l) ": "; }
  .gtable td.c-who{ grid-column:1 / -1; }
  .gtable td.c-actions{ grid-column:1 / -1; }
  .row-actions{ justify-content:flex-start; }
  .gtable.simple tr{ grid-template-columns:1fr; }
}

/* ---------- approvals ---------- */
.lead{ color:var(--muted); margin-bottom:18px; max-width:640px; }
.approvals{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.ap{ padding:20px; border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.ap h3{ font-family:var(--f-display); font-size:1.5rem; color:var(--navy); }
.ap p{ font-size:.88rem; color:var(--muted); margin-top:4px; }
.ap blockquote{ margin:12px 0 0; padding:10px 14px; border-left:3px solid var(--pop); background:var(--nude-soft); border-radius:0 12px 12px 0; font-size:.9rem; }
.ap .ap-actions{ display:flex; gap:8px; margin-top:14px; }
.ap.decided{ opacity:.6; }
.empty-state{ padding:50px 20px; text-align:center; color:var(--muted); background:#fff; border-radius:22px; border:1px dashed var(--line); }
.empty-state svg{ font-size:2.4rem; color:var(--sky); display:block; margin:0 auto 10px; }

/* ---------- check-in ---------- */
.checkin-top{ margin-top:0; margin-bottom:18px; }
.ring-card{ display:flex; align-items:center; gap:22px; }
.ring svg{ width:130px; height:130px; stroke:none; }
.ring text{ font-family:var(--f-display); font-weight:600; fill:var(--navy); }
.scan-card p{ margin:6px 0 16px; }
.checkin-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.ci{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.ci .who{ flex:1; min-width:0; }
.ci .who b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci.done{ background:linear-gradient(120deg,#F1FBF6,#fff); border-color:#CDEEDC; }
.ci-btn{ padding:9px 14px; border-radius:99px; border:0; cursor:pointer; font-size:.8rem; font-weight:500; background:var(--navy); color:#fff; white-space:nowrap; }
.ci.done .ci-btn{ background:#E7F8EF; color:#12804A; }

/* ---------- gifts & wishes ---------- */
.wish-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.wishcard{ padding:20px; border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.wishcard p{ font-family:var(--f-display); font-size:1.2rem; font-style:italic; color:var(--navy); }
.wishcard b{ display:block; margin-top:10px; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--pop); font-weight:600; }
.wishcard small{ color:var(--muted); font-size:.76rem; }

/* ---------- modals ---------- */
.modal{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; background:rgba(6,15,38,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0; } }
.modal-card{ position:relative; width:min(460px,100%); max-height:calc(100vh - 40px); overflow-y:auto; padding:28px 24px 24px; border-radius:24px; background:#fff; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); animation:pop .4s cubic-bezier(.3,1.4,.5,1); }
@keyframes pop{ from{ transform:scale(.9); opacity:0; } }
.modal-card h2{ font-family:var(--f-display); font-size:1.9rem; color:var(--navy); }
.modal-x{ position:absolute; right:14px; top:14px; width:36px; height:36px; border-radius:50%; border:0; background:var(--sky-soft); cursor:pointer; display:grid; place-items:center; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.form-grid label span{ display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; font-weight:500; }
.form-grid input,.form-grid select,.link-box input{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); outline:none; font-weight:400; background:#fff; }
.form-grid input:focus,.form-grid select:focus{ border-color:var(--sky); box-shadow:0 0 0 4px rgba(143,203,255,.3); }
@media (max-width:480px){ .form-grid{ grid-template-columns:1fr; } }
.qr-box{ width:220px; height:220px; margin:18px auto; padding:12px; border-radius:18px; background:#fff; border:1px solid var(--line); }
.qr-box svg{ width:100%; height:100%; stroke:none; }
.link-box{ display:flex; gap:8px; }
.scan-view{ position:relative; margin-top:16px; border-radius:18px; overflow:hidden; background:#000; aspect-ratio:1; }
.scan-view video{ width:100%; height:100%; object-fit:cover; }
.scan-frame{ position:absolute; inset:18%; border:3px solid rgba(255,255,255,.9); border-radius:18px; box-shadow:0 0 0 999px rgba(0,0,0,.35); }
.scan-frame::after{ content:""; position:absolute; left:6%; right:6%; top:10%; height:2px; background:var(--pop); box-shadow:0 0 12px var(--pop); animation:scan 2s ease-in-out infinite alternate; }
@keyframes scan{ to{ top:88%; } }
.toast{ position:fixed; left:50%; bottom:28px; z-index:99; transform:translate(-50%,30px); opacity:0; pointer-events:none; padding:13px 22px; border-radius:99px; background:var(--navy); color:#fff; font-size:.9rem; box-shadow:0 18px 40px -14px rgba(0,0,0,.6); transition:opacity .35s, transform .35s; max-width:calc(100vw - 40px); text-align:center; }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- responsive ---------- */
@media (max-width:1100px){ .grid-2{ grid-template-columns:1fr; } }
@media (max-width:900px){
  body{ display:block; }
  .side{ display:none; }
  .main{ padding:18px 16px 60px; }
  .top h1{ font-size:2rem; }
  .top-right .btn span{ display:none; }
  .tabs{ display:flex; gap:6px; overflow-x:auto; margin:0 -16px 18px; padding:2px 16px 6px; scrollbar-width:none; position:sticky; top:0; z-index:5; background:var(--bg); }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs button{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:99px; border:1px solid var(--line); background:#fff; font-size:.84rem; white-space:nowrap; cursor:pointer; }
  .tabs button.on{ background:var(--navy); color:#fff; border-color:var(--navy); }
  .tabs em{ min-width:20px; height:20px; }
  .tip{ flex-wrap:wrap; }
  .toolbar-actions .btn span{ display:none; }
  .hbar{ grid-template-columns:96px 1fr 30px; }
}