:root{--bg:#f4f1ec;--paper:#fffdfa;--ink:#24221f;--muted:#746e67;--accent:#9a7859;--line:rgba(36,34,31,.12);--shadow:0 18px 55px rgba(44,36,29,.09);--ok:#2f7b58;--danger:#a84747;--warn:#9b6b24}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit}
.wrap{max-width:1240px;margin:auto;padding:26px 18px 70px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.brand{font-size:23px;font-weight:900;letter-spacing:-.04em}.muted{color:var(--muted)}.tiny{font-size:11px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:17px}.stat{padding:18px}.stat b{display:block;font-size:29px;letter-spacing:-.05em}.stat span{font-size:11px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:15px}.col-12{grid-column:span 12}.col-9{grid-column:span 9}.col-8{grid-column:span 8}.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-3{grid-column:span 3}
label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:7px}input,select,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 13px;font:500 14px inherit;outline:none;color:var(--ink)}textarea{min-height:108px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(154,120,89,.10)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:11px;padding:11px 15px;text-decoration:none;font-weight:800;font-size:12px;cursor:pointer}.primary{background:var(--ink);color:#fff}.light{background:#eee9e2}.ok{background:#e7f3ec;color:var(--ok)}.danger{background:#fae9e9;color:var(--danger)}.warn{background:#f7efdf;color:var(--warn)}.small{padding:8px 10px;font-size:10px}.actions{display:flex;gap:7px;flex-wrap:wrap}
.notice{padding:12px 14px;border-radius:12px;margin-bottom:14px;background:#e7f3ec;color:var(--ok);font-size:12px;font-weight:700}.error{background:#fae9e9;color:var(--danger)}
.sep{height:1px;background:var(--line);margin:21px 0}.section-title{font-size:15px;font-weight:900;margin:4px 0 14px}.help{font-size:10px;color:var(--muted);margin-top:5px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px 9px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:top}th{font-size:9px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}.tablewrap{overflow:auto}.thumb{width:54px;height:54px;border-radius:11px;object-fit:cover;background:#eee}.badge{display:inline-flex;padding:5px 8px;border-radius:99px;font-size:9px;font-weight:900;background:#eee}.published{background:#e4f3ea;color:#2a6c4c}.draft{background:#f4ecdc;color:#8c6328}.archived{background:#ececec;color:#666}
.login{min-height:100vh;display:grid;place-items:center;padding:20px}.login .card{width:min(430px,100%)}.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.theme-option input{display:none}.theme-option span{display:block;padding:17px 8px;border:1px solid var(--line);border-radius:13px;text-align:center;font-size:11px;font-weight:900;cursor:pointer}.theme-option input:checked+span{border-color:var(--accent);box-shadow:0 0 0 3px rgba(154,120,89,.11)}.preview{max-width:180px;border-radius:12px;margin-top:7px}
.range-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.music-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.col-9,.col-8,.col-6,.col-4,.col-3{grid-column:span 12}.topbar{align-items:flex-start;flex-direction:column}.theme-grid{grid-template-columns:repeat(2,1fr)}}

/* Public */
.invite{--pbg:#f7f2eb;--paper:#fffdfa;--ink:#2c2824;--accent:#a07e61;--muted:#71675d;background:var(--pbg);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;overflow-x:hidden}
.invite.theme-rose{--pbg:#fbf1f3;--paper:#fffafb;--ink:#422f34;--accent:#b87986;--muted:#806d72}
.invite.theme-night{--pbg:#151515;--paper:#222;--ink:#f4efe8;--accent:#c5a16a;--muted:#b7aea3}
.invite.theme-sage{--pbg:#f0f3ec;--paper:#fafcf8;--ink:#283129;--accent:#71816d;--muted:#6e776e}
.invite.theme-blue{--pbg:#edf3f7;--paper:#f9fcff;--ink:#26323d;--accent:#728fa6;--muted:#687984}
.hero{min-height:100svh;display:grid;place-items:end center;text-align:center;padding:54px 20px 72px;background:radial-gradient(circle at 50% 16%,rgba(255,255,255,.85),transparent 36%),linear-gradient(var(--pbg),var(--paper));position:relative;overflow:hidden}.hero.has-photo{background-size:cover;background-repeat:no-repeat}.hero.has-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.62))}.hero-content{position:relative;z-index:2;max-width:760px}.hero.has-photo .hero-content{color:white;text-shadow:0 3px 25px rgba(0,0,0,.35)}.eyebrow,.plabel{font-size:10px;letter-spacing:.33em;font-weight:900;color:var(--accent)}.hero.has-photo .eyebrow{color:#fff}.hero h1,.pub h2{font-family:Georgia,"Times New Roman",serif;font-weight:400}.hero h1{font-size:clamp(69px,18vw,165px);line-height:.82;margin:23px 0 27px;letter-spacing:-.055em}.hero p{font-family:Georgia,serif;font-size:clamp(19px,4vw,28px);line-height:1.5;margin:0}
.pub{padding:88px 20px;text-align:center;background:var(--pbg)}.pub.paper{background:var(--paper)}.inner{max-width:690px;margin:auto}.pub h2{font-size:clamp(48px,9vw,82px);line-height:.96;margin:21px 0}.pub p{line-height:1.8;color:var(--muted)}
.datecard{max-width:720px;margin:auto;background:var(--paper);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);box-shadow:0 22px 60px rgba(0,0,0,.08);padding:50px 23px}.dateflex{display:flex;justify-content:center;align-items:center;gap:16px;margin:29px 0}.day{font-family:Georgia,serif;font-size:clamp(94px,23vw,168px);line-height:.72}.dateside{border-left:1px solid color-mix(in srgb,var(--ink) 15%,transparent);padding-left:16px;text-align:left}.dateside b{display:block;font-family:Georgia,serif;font-size:34px;font-weight:400}.dateside span{font-size:13px;letter-spacing:.1em}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:29px}.countdown div{border-top:1px solid color-mix(in srgb,var(--ink) 15%,transparent);padding-top:17px}.countdown strong{display:block;font-family:Georgia,serif;font-size:43px;font-weight:400}.countdown span{font-size:9px;color:var(--muted)}
.venue{background:color-mix(in srgb,var(--accent) 9%,var(--pbg))}.pbtn{display:inline-flex;text-decoration:none;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:99px;padding:13px 21px;margin-top:11px;font-weight:800;font-size:12px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:24px}.gallery img{width:100%;aspect-ratio:1/1.12;object-fit:cover;border-radius:6px}.rsvp{text-align:left;max-width:520px;margin:34px auto 0}.rsvp .radio{display:block;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);padding:12px;border-radius:11px;margin:8px 0}.rsvp .radio input{width:auto;margin-right:8px}.rsvp button{width:100%;background:var(--ink);color:var(--pbg);border:0;border-radius:11px;padding:15px;font-weight:900;margin-top:10px}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.float-actions{position:fixed;right:15px;bottom:15px;z-index:30;display:grid;gap:8px}.fab{width:47px;height:47px;border:0;border-radius:50%;background:var(--ink);color:var(--pbg);display:grid;place-items:center;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.2);font-size:17px}.thanks{min-height:100svh;display:grid;place-items:center;text-align:center;padding:28px;background:var(--pbg)}.thanks h1{font-family:Georgia,serif;font-size:clamp(52px,11vw,96px);font-weight:400;margin:15px 0}
.qr{width:180px;height:180px;background:white;padding:8px;border-radius:11px;margin-top:16px}footer{text-align:center;padding:58px 20px 82px;background:var(--pbg);color:var(--muted);font-size:11px;letter-spacing:.12em}
@media(max-width:600px){.gallery{grid-template-columns:repeat(2,1fr)}.countdown strong{font-size:35px}.mini-grid{grid-template-columns:1fr}}


/* ===== PREMIUM VISUAL UPGRADE ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@300;400;500;600;700&display=swap');

.invite{
  font-family:"Manrope",system-ui,sans-serif;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 30%),
    var(--pbg);
}
.invite::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  opacity:.15;
  background-image:radial-gradient(rgba(60,45,30,.2) .45px, transparent .45px);
  background-size:6px 6px;
}
.hero{
  min-height:100svh;
  padding:56px 20px 80px;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  width:560px;height:560px;border:1px solid color-mix(in srgb,var(--accent) 25%, transparent);
  border-radius:50%;left:-340px;top:-170px;z-index:0;
}
.hero::after{
  content:"";
  position:absolute;
  width:460px;height:460px;border:1px solid color-mix(in srgb,var(--accent) 22%, transparent);
  border-radius:50%;right:-290px;bottom:-180px;z-index:0;
}
.hero.has-photo::after{
  width:auto;height:auto;border:0;border-radius:0;left:0;right:0;top:0;bottom:0;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.20) 45%,rgba(0,0,0,.70)),
    radial-gradient(circle at 50% 25%,transparent 0,rgba(0,0,0,.08) 60%,rgba(0,0,0,.26) 100%);
}
.hero-content{
  animation:heroEnter 1.2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes heroEnter{
  from{opacity:0;transform:translateY(28px) scale(.985)}
  to{opacity:1;transform:none}
}
.eyebrow,.plabel{
  font-family:"Manrope",sans-serif;
  letter-spacing:.38em;
}
.hero h1,.pub h2,.day,.dateside b{
  font-family:"Cormorant Garamond",Georgia,serif;
}
.hero h1{
  font-size:clamp(76px,20vw,190px);
  font-weight:500;
  line-height:.76;
  margin:26px 0 35px;
}
.hero p{
  max-width:650px;
  margin-inline:auto;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(21px,4.5vw,31px);
  font-weight:400;
}
.pub{
  position:relative;
  overflow:hidden;
}
.pub .inner{
  position:relative;
  z-index:2;
}
.pub h2{
  font-weight:500;
  letter-spacing:-.035em;
}
.pub h2 em{
  font-weight:400;
}
.pub p{
  font-size:15px;
  line-height:1.95;
}
.pub.paper{
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 5%, transparent),
             inset 0 -1px 0 color-mix(in srgb,var(--ink) 5%, transparent);
}
.datecard{
  position:relative;
  border-radius:2px;
  padding:62px 28px;
}
.datecard::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid color-mix(in srgb,var(--accent) 22%, transparent);
  pointer-events:none;
}
.datecard::after{
  content:"✦";
  position:absolute;
  left:50%;top:18px;transform:translateX(-50%);
  color:var(--accent);
  font-size:13px;
  background:var(--paper);
  padding:0 8px;
}
.dateflex{
  margin:38px 0 32px;
}
.day{
  font-weight:500;
}
.dateside b{
  font-size:43px;
}
.countdown{
  gap:12px;
}
.countdown div{
  padding:20px 8px 0;
}
.countdown strong{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:52px;
}
.gallery{
  gap:12px;
}
.gallery img{
  border-radius:2px;
  transition:transform .6s ease, filter .6s ease;
}
.gallery img:hover{
  transform:scale(1.025);
  filter:brightness(1.03);
}
.venue::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 28%),
    radial-gradient(circle at 90% 80%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 30%);
}
.pbtn{
  min-height:50px;
  padding-inline:24px;
  backdrop-filter:blur(8px);
  transition:all .25s ease;
}
.pbtn:hover{
  transform:translateY(-2px);
  background:var(--ink);
  color:var(--pbg);
}
.rsvp{
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  padding:22px;
  border-radius:18px;
  box-shadow:0 18px 45px rgba(0,0,0,.05);
}
.rsvp input,.rsvp textarea{
  background:color-mix(in srgb,var(--paper) 96%,white);
}
.rsvp .radio{
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.rsvp .radio:has(input:checked){
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--paper));
  transform:translateX(2px);
}
.rsvp button{
  min-height:52px;
  letter-spacing:.03em;
  transition:transform .25s ease, box-shadow .25s ease;
}
.rsvp button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.13);
}
.float-actions{
  right:18px;bottom:18px;
}
.fab{
  backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb,var(--pbg) 25%,transparent);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fab:hover{transform:translateY(-2px) scale(1.03)}
footer{
  font-family:"Manrope",sans-serif;
}

/* reveal animations */
.reveal-premium{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal-premium.visible{
  opacity:1;
  transform:none;
}

/* Admin polish */
body:not(.invite){
  background:
    radial-gradient(circle at 5% 0%,rgba(154,120,89,.07),transparent 25%),
    var(--bg);
}
.card{
  backdrop-filter:saturate(120%);
}
.brand{
  letter-spacing:-.045em;
}
.stat{
  position:relative;
  overflow:hidden;
}
.stat::after{
  content:"";
  position:absolute;
  width:70px;height:70px;border-radius:50%;
  background:rgba(154,120,89,.06);
  right:-18px;bottom:-22px;
}
.btn{
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{
  transform:translateY(-1px);
}
.primary:hover{
  box-shadow:0 8px 20px rgba(36,34,31,.14);
}

@media(max-width:600px){
  .hero{
    padding:48px 18px 66px;
    min-height:100svh;
  }
  .hero h1{
    font-size:clamp(74px,24vw,128px);
    margin:23px 0 30px;
  }
  .hero p{
    font-size:22px;
    line-height:1.45;
  }
  .pub{
    padding:74px 17px;
  }
  .pub h2{
    font-size:clamp(49px,14vw,72px);
  }
  .datecard{
    padding:52px 18px;
  }
  .countdown{
    gap:5px;
  }
  .countdown strong{
    font-size:39px;
  }
  .gallery{
    gap:7px;
  }
  .rsvp{
    padding:18px;
    margin-top:28px;
  }
}


/* ===== TOI PRO V2: MOBILE FIT + ANIMATION + PROGRAM ===== */
.invite,.invite *{max-width:100%}
.invite h1,.invite h2,.invite p,.invite .plabel,.invite .eyebrow,.invite label,.invite footer{overflow-wrap:anywhere;word-break:normal;hyphens:auto}
.invite .hero h1{font-size:clamp(54px,17vw,150px)!important;line-height:.84!important;max-width:min(96vw,760px);margin-inline:auto}
.invite .pub h2{font-size:clamp(38px,10vw,76px)!important;line-height:.98!important;max-width:100%;margin-inline:auto}
.invite .pub h2.title-fit{font-size:clamp(36px,9.3vw,70px)!important}
.invite .pub h2.rsvp-title{font-size:clamp(36px,9.5vw,72px)!important}
.invite .pub h2.rsvp-title em{display:block;font-size:.93em}
.invite .pub .inner{width:min(100%,720px);padding-inline:2px}
.invite .plabel,.invite .eyebrow{line-height:1.6;letter-spacing:clamp(.16em,1.5vw,.34em)!important}
.invite .rsvp{width:min(100%,560px);overflow:hidden}
.invite .rsvp input,.invite .rsvp textarea,.invite .rsvp select{min-width:0;font-size:16px}
.invite .rsvp .radio{white-space:normal;line-height:1.45}
.program-list{margin:36px auto 0;max-width:560px;text-align:left;position:relative}
.program-list:before{content:"";position:absolute;left:69px;top:6px;bottom:6px;width:1px;background:color-mix(in srgb,var(--accent) 38%,transparent)}
.program-item{display:grid;grid-template-columns:54px 30px minmax(0,1fr);gap:0 8px;align-items:start;padding:12px 0}
.program-time{font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;line-height:1;text-align:right;padding-top:2px}
.program-dot{width:9px;height:9px;margin:5px auto 0;background:var(--accent);border:3px solid var(--pbg);outline:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:50%;position:relative;z-index:2}
.paper .program-dot{border-color:var(--paper)}
.program-name{font-size:14px;line-height:1.55;color:var(--muted)}
.story-ornament{width:80px;height:22px;margin:24px auto;position:relative;text-align:center}.story-ornament:before,.story-ornament:after{content:"";position:absolute;top:50%;width:28px;height:1px;background:color-mix(in srgb,var(--accent) 45%,transparent)}.story-ornament:before{left:0}.story-ornament:after{right:0}.story-ornament span{color:var(--accent);font-size:15px}
.fx-reveal{opacity:0;transform:translateY(30px);filter:blur(5px);transition:opacity .9s cubic-bezier(.2,.75,.2,1),transform .9s cubic-bezier(.2,.75,.2,1),filter .9s ease}.fx-reveal.fx-visible{opacity:1;transform:none;filter:blur(0)}.fx-delay-1{transition-delay:.08s}.fx-delay-2{transition-delay:.16s}.fx-delay-3{transition-delay:.24s}.fx-delay-4{transition-delay:.32s}
.invite .hero-content>*{opacity:0;transform:translateY(18px);animation:toiHeroIn .9s cubic-bezier(.2,.75,.2,1) forwards}.invite .hero-content>*:nth-child(1){animation-delay:.12s}.invite .hero-content>*:nth-child(2){animation-delay:.24s}.invite .hero-content>*:nth-child(3){animation-delay:.38s}.invite .hero-content>*:nth-child(4){animation-delay:.52s}.invite .hero-content>*:nth-child(5){animation-delay:.66s}@keyframes toiHeroIn{to{opacity:1;transform:none}}
.music-control{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:1000;width:54px;height:54px;border-radius:50%;border:1px solid color-mix(in srgb,var(--pbg) 25%,transparent);background:color-mix(in srgb,var(--ink) 92%,transparent);color:var(--pbg);box-shadow:0 12px 32px rgba(0,0,0,.22);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(12px)}.music-control.is-playing .music-note{animation:musicSpin 4s linear infinite}.music-control .music-note{font-size:22px;line-height:1}.music-control .music-off{display:none;position:absolute;width:28px;height:2px;background:currentColor;transform:rotate(-45deg);border-radius:3px}.music-control.is-muted .music-off{display:block}@keyframes musicSpin{to{transform:rotate(360deg)}}
.couple-name{font-size:clamp(50px,14vw,130px)!important;line-height:.84!important}
@media(max-width:430px){.invite .hero{min-height:100svh;padding:46px 16px 58px}.invite .hero h1{font-size:clamp(50px,16vw,80px)!important}.invite .hero p{font-size:clamp(19px,5.2vw,23px)!important;line-height:1.48}.invite .pub{padding:66px 15px}.invite .pub h2,.invite .pub h2.title-fit,.invite .pub h2.rsvp-title{font-size:clamp(34px,9.4vw,49px)!important;line-height:1!important;letter-spacing:-.03em}.invite .datecard{padding:46px 13px}.invite .dateflex{gap:10px}.invite .day{font-size:clamp(76px,24vw,105px)}.invite .dateside b{font-size:30px}.invite .dateside span{font-size:10px;letter-spacing:.06em}.invite .countdown{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.invite .countdown strong{font-size:clamp(29px,9.5vw,39px)}.program-list:before{left:61px}.program-item{grid-template-columns:47px 28px minmax(0,1fr)}.program-time{font-size:20px}.music-control{width:52px;height:52px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}}
@media(max-width:350px){.invite .pub h2,.invite .pub h2.title-fit,.invite .pub h2.rsvp-title{font-size:32px!important}.invite .hero h1{font-size:47px!important}}
@media(prefers-reduced-motion:reduce){.fx-reveal,.invite .hero-content>*{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}}


/* TOI PRO V3 visibility hotfix */
.reveal-premium{opacity:1 !important;transform:none !important;}
.reveal-premium.visible{opacity:1 !important;transform:none !important;}
/* If JavaScript fails, content becomes visible after a short grace period via no-js fallback below. */
html:not(.js-ready) .fx-reveal{opacity:1 !important;transform:none !important;filter:none !important;}