:root{
  --bg:#0a0b12; --bg2:#11131d; --panel:#151826; --panel2:#1c2032;
  --line:rgba(232,198,116,.16); --line2:rgba(232,198,116,.32);
  --ink:#f7f2e7; --muted:#bcb4a4; --dim:#8d8677;
  --accent:#e8c674; --accent2:#e79bb0; --gold:#e8c674; --gold2:#f4e3b6; --ok:#7fd6a8;
  --glow:rgba(232,198,116,.42);
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(120% 62% at 50% -6%, rgba(232,198,116,.22) 0%, transparent 52%),
    radial-gradient(80% 44% at 50% 8%, rgba(255,240,200,.10) 0%, transparent 60%),
    radial-gradient(90% 50% at 90% 110%, rgba(231,155,176,.10) 0%, transparent 60%),
    var(--bg);
  color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
img,video{max-width:100%; display:block}
a{color:var(--accent)}
button{font-family:inherit}

/* marca d'agua: foto da Lisie no fundo (com veu escuro para legibilidade) */
#bgphoto{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
#bgphoto::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(180deg,rgba(10,11,18,.5),rgba(10,11,18,.72) 62%,rgba(10,11,18,.92)), url('/lisie.jpg');
  background-size:cover; background-position:50% 18%; background-repeat:no-repeat;
  transform:scale(1.32); transform-origin:50% 16%;}

.wrap{position:relative; z-index:1; max-width:560px; margin:0 auto; padding:0 16px 96px}

/* ---- tabs (bottom nav, mobile-first) ---- */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; justify-content:center; gap:6px; padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(14,11,20,0),rgba(14,11,20,.92) 30%);}
.tabbar button{flex:1; max-width:200px; border:1px solid var(--line); background:var(--panel);
  color:var(--muted); border-radius:999px; padding:11px 8px; font-size:14px; font-weight:600; cursor:pointer}
.tabbar button.on{color:#1a0a18; background:linear-gradient(92deg,var(--accent),var(--accent2)); border-color:transparent}

.view{display:none} .view.on{display:block}

/* ---- hero / convite (elegante) ---- */
:root{ --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif; }
.hero{text-align:center; padding:4px 6px 6px; animation:rise .9s ease both}
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.chandelier{display:block; width:min(84%,320px); height:auto; margin:-8px auto 8px;
  filter:drop-shadow(0 6px 30px rgba(232,198,116,.3))}
.chandelier .flame{transform-box:fill-box; transform-origin:center; animation:tw 3.4s ease-in-out infinite}
.chandelier .bead{animation:shimmer 3.8s ease-in-out infinite}
.chandelier .drop{transform-box:fill-box; transform-origin:center; animation:shimmer 4.4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.8; transform:scale(.92)} 50%{opacity:1; transform:scale(1.1)}}
@keyframes shimmer{0%,100%{opacity:.58} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero{animation:none} .chandelier .flame,.chandelier .bead,.chandelier .drop{animation:none}}

.seal{width:82px; height:82px; margin:0 auto 20px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(150deg, var(--accent), var(--accent2));
  box-shadow:0 0 0 1px rgba(233,201,138,.5), 0 14px 34px -12px var(--glow);}
.seal::after{content:""; position:absolute; inset:7px; border:1px dashed rgba(255,255,255,.6); border-radius:50%}
.seal span{font-family:var(--serif); font-weight:700; font-size:30px; color:#fff; letter-spacing:.04em}

.eyebrow{font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 10px}
.name{font-size:clamp(26px,7.5vw,36px); font-weight:700; margin:0; line-height:1.15; letter-spacing:.01em; text-wrap:balance;
  background:linear-gradient(92deg,var(--gold2),var(--gold) 55%,var(--accent2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

.orn{display:flex; align-items:center; justify-content:center; gap:12px; color:var(--gold); font-size:13px; margin:16px 0}
.orn span{display:block; height:1px; width:56px; background:linear-gradient(90deg,transparent,var(--gold))}
.orn span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}

.celebra{color:var(--muted); font-size:13px; font-weight:300; margin:10px auto 0; max-width:30ch}
.fifteen{font-size:clamp(104px,36vw,164px); font-weight:800; line-height:.82; margin:4px 0 0;
  color:#fff; text-shadow:0 0 40px var(--glow), 0 0 90px rgba(255,220,150,.2)}
.anos{letter-spacing:.5em; text-transform:uppercase; color:var(--gold); font-size:12px; margin:6px 0 16px; padding-left:.5em}
.lead{color:#d8d1c3; font-weight:300; font-size:15.5px; line-height:1.6; max-width:32ch; margin:0 auto}

/* faixa de data */
.datebar{display:flex; align-items:stretch; gap:0; margin:22px 0 14px; border:1px solid var(--line);
  border-radius:16px; overflow:hidden; background:var(--panel)}
.datebar>div{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 8px}
.datebar .db-mid{flex:1.4; border-left:1px solid var(--line); border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(199,125,255,.08),transparent)}
.db-num{font-size:40px; font-weight:800; line-height:1; color:#fff}
.db-time{position:relative}
.db-h{font-size:16px; color:var(--gold); margin-top:2px}
.db-mon{font-size:20px; font-weight:600; color:var(--ink)}
.db-yr{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:6px}

.place{text-align:center}
.place .k{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin:0 0 5px}
.place .v{font-size:21px; font-weight:700; margin:0}
.place .s{color:var(--muted); font-size:14px; margin:4px 0 10px}
.dot-sep{color:var(--dim); margin:0 8px}

.ct-label{text-align:center; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); margin:0 0 10px}
.foot-seal{text-align:center; color:var(--gold); font-size:14px; font-weight:600; letter-spacing:.3em; margin:28px 0 4px}

/* ===== convite em UMA tela (sem rolagem) ===== */
html{overflow-x:hidden}
.wrap{padding:0 16px}
#view-mural{padding-bottom:100px}
#view-convite.on{display:flex; flex-direction:column; justify-content:center; gap:0;
  height:100dvh; padding:6px 0 74px; overflow:hidden}
#view-convite > *{flex-shrink:0}
#view-convite .hero{padding:0}
#view-convite .chandelier{width:min(50%,180px); max-height:13vh; margin:0 auto 2px}
#view-convite .eyebrow{margin-bottom:6px}
#view-convite .name{font-size:clamp(21px,5vh,32px)}
#view-convite .orn{margin:7px 0}
#view-convite .celebra{margin-top:6px; font-size:clamp(11px,1.7vh,14px); max-width:28ch}
#view-convite .fifteen{font-size:clamp(56px,13vh,120px)}
#view-convite .anos{margin:2px 0 10px}
#view-convite .datebar{margin:8px 0}
#view-convite .datebar>div{padding:9px 6px}
#view-convite .db-num{font-size:clamp(23px,4.2vh,36px)}
#view-convite .place{padding:10px 11px; margin:8px 0 0}
#view-convite .place .k{display:none}
#view-convite .place .v{font-size:clamp(16px,2.5vh,21px)}
#view-convite .place .s{font-size:12.5px; margin:3px 0 8px}
#view-convite #goRsvp{margin-top:12px}
/* itens que saem da tela do convite (ficam no Mural) */
#view-convite .lead, #view-convite .ct-label, #view-convite #count, #view-convite .orn2,
#view-convite .sub, #view-convite .foot, #view-convite .foot-seal{display:none}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:14px 0}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0}
.fact{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 13px}
.fact.full{grid-column:1/-1}
.fact .k{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0 0 4px}
.fact .v{font-size:18px; font-weight:700; margin:0}
.fact .s{font-size:13px; color:var(--muted); margin:2px 0 0}
.maplink{display:inline-block; margin-top:8px; font-size:13px; font-weight:600; text-decoration:none}

.count{display:flex; justify-content:center; gap:8px; margin:6px 0 2px}
.count .u{min-width:62px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 4px; text-align:center}
.count .n{font-size:26px; font-weight:800; font-variant-numeric:tabular-nums}
.count .l{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px}

/* ---- forms ---- */
h2.sec{font-size:19px; font-weight:700; margin:6px 0 2px; text-align:center}
p.sub{color:var(--muted); font-size:13.5px; text-align:center; margin:0 0 14px}
label.fl{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:0 0 6px}
input[type=text],textarea{width:100%; background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:12px;
  color:var(--ink); font-family:inherit; font-size:16px; padding:13px; outline:none}
input[type=text]:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(199,125,255,.16)}
textarea{resize:vertical; min-height:80px}

.person{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.person input{flex:1}
.person .kid{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); white-space:nowrap}
.person .rm{border:1px solid var(--line); background:var(--panel2); color:var(--muted); border-radius:10px;
  width:40px; height:44px; flex:none; font-size:18px; cursor:pointer}
.linkbtn{background:none; border:0; color:var(--accent); font-weight:600; font-size:14px; cursor:pointer; padding:6px 0}

.btn{width:100%; border:0; cursor:pointer; border-radius:13px; padding:15px; font-weight:700; font-size:16px;
  color:#1a0a18; background:linear-gradient(92deg,var(--accent),var(--accent2)); box-shadow:0 12px 26px -12px var(--glow)}
.btn.ghost{background:var(--panel); color:var(--ink); border:1px solid var(--line); box-shadow:none}
.btn[disabled]{opacity:.5}
.btn.sm{width:auto; padding:9px 14px; font-size:14px}

.msg{border-radius:12px; padding:12px 14px; font-size:14px; margin:12px 0}
.msg.ok{background:rgba(90,209,154,.12); border:1px solid rgba(90,209,154,.4); color:#bff0d8}
.msg.err{background:rgba(255,100,179,.12); border:1px solid rgba(255,100,179,.4); color:#ffc3e0}
.hint{color:var(--dim); font-size:12px; text-align:center; margin-top:10px}

/* ---- quiz ---- */
.quiz{margin-top:24px}
.qhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.qeyebrow{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:700}
.qprog{display:flex; gap:6px}
.qprog span{width:8px; height:8px; border-radius:50%; background:var(--line2); transition:.2s}
.qprog span.on{background:var(--gold); transform:scale(1.2)}
.qprog span.done{background:var(--accent2)}
.qtitle{font-size:21px; font-weight:700; margin:0 0 4px; line-height:1.25; text-wrap:balance}
.qsub{color:var(--muted); font-size:13.5px; margin:0 0 14px}
.qnav{display:flex; gap:10px; margin-top:16px}
.qnav #qnext{flex:1}
.choices{display:flex; flex-direction:column; gap:8px}
.choice{text-align:left; border:1px solid var(--line); background:var(--panel2); color:var(--ink);
  border-radius:12px; padding:13px 14px; font-size:15px; cursor:pointer; font-family:inherit; transition:.15s}
.choice.on{border-color:var(--gold); background:linear-gradient(92deg,rgba(232,198,116,.16),rgba(231,155,176,.10));
  box-shadow:0 0 0 2px rgba(232,198,116,.22)}
.challenge-hero{text-align:center; padding:8px 4px 4px}
.challenge-hero .ch-emoji{font-size:52px; margin-bottom:6px}
.challenge-hero p{font-size:16px; color:var(--ink); max-width:28ch; margin:0 auto; line-height:1.5}
.challenge{border-color:var(--line2); background:linear-gradient(180deg,rgba(232,198,116,.10),var(--panel))}

/* ---- feed ---- */
.me{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:16px 0 6px}
.me .hi{font-weight:600} .me .hi small{display:block; color:var(--dim); font-weight:400; font-size:12px}

.composer .row{display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap}
.filebtn{border:1px solid var(--line); background:var(--panel2); color:var(--muted); border-radius:11px;
  padding:10px 12px; font-size:13px; font-weight:600; cursor:pointer}
.filebtn input{display:none}
.fname{font-size:12px; color:var(--muted); flex:1; min-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.post{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin:12px 0}
.post.host{border-color:var(--line2); background:linear-gradient(180deg,rgba(199,125,255,.10),var(--panel))}
.post .top{display:flex; align-items:center; gap:9px; margin-bottom:8px}
.avatar{width:36px; height:36px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#1a0a18; background:linear-gradient(135deg,var(--accent),var(--accent2))}
.post .who{font-weight:600; font-size:14px} .post .when{color:var(--dim); font-size:11px}
.badge-host{font-size:10px; font-weight:700; color:var(--gold); border:1px solid var(--gold); border-radius:999px; padding:1px 7px; margin-left:6px}
.pin{font-size:10px; color:var(--gold); margin-left:auto}
.post .body{white-space:pre-wrap; word-wrap:break-word; margin:6px 0}
.post .media{border-radius:12px; overflow:hidden; margin:8px 0; border:1px solid var(--line)}
.post .media img,.post .media video{width:100%}
.actions{display:flex; gap:16px; align-items:center; margin-top:8px; border-top:1px solid var(--line); padding-top:10px}
.actions button{background:none; border:0; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; display:flex; gap:6px; align-items:center}
.actions button.liked{color:var(--accent2)}
.comments{margin-top:10px; display:flex; flex-direction:column; gap:8px}
.comment{background:var(--panel2); border-radius:10px; padding:8px 11px; font-size:13.5px}
.comment b{font-weight:600}
.cform{display:flex; gap:8px; margin-top:8px}
.cform input{flex:1; padding:10px}
.cform button{border:0; border-radius:10px; padding:0 14px; font-weight:700; background:var(--panel2); color:var(--ink); cursor:pointer}
.empty{text-align:center; color:var(--dim); padding:30px 10px}
.foot{text-align:center; color:var(--dim); font-size:11px; margin-top:20px}
@media (prefers-reduced-motion:no-preference){ .view.on{animation:fade .3s ease} @keyframes fade{from{opacity:0}to{opacity:1}} }