:root{
  /* Элегантная тёмная палитра */
  --black: #0a0a0a;
  --black-soft: #1a1a1a;
  --black-card: #242424;
  --emerald: #10b981;
  --emerald-light: #34d399;
  --emerald-glow: #6ee7b7;
  --gold: #f59e0b;
  --gold-light: #fbbf24;
  --gold-glow: #fde047;
  --white: #ffffff;
  --text: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
  --shadow-dark: 0 25px 50px -12px rgba(0, 0, 0, .8);
  --shadow-glow: 0 20px 40px rgba(16, 185, 129, .3);
  --shadow-gold: 0 20px 40px rgba(245, 158, 11, .3);
  --gradient-hero: linear-gradient(135deg, rgba(10,10,10,.7) 0%, rgba(26,26,26,.5) 50%, rgba(16,185,129,.6) 100%);
  --gradient-card: linear-gradient(145deg, rgba(26,26,26,.95) 0%, rgba(36,36,36,.9) 100%);
  --gradient-accent: linear-gradient(135deg, var(--emerald) 0%, var(--gold) 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(ellipse at top, var(--black-soft) 0%, var(--black) 70%);
  color:var(--text);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
img{max-width:100%;height:auto;display:block}
.container{width:min(1200px,95%);margin:0 auto;padding:0 20px}

/* Typography */
.h{
  font-family:'Playfair Display',serif;
  font-weight:600;
  color:var(--text);
  margin:0 0 1.5rem;
  line-height:1.2;
}

/* Hero Section */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    var(--gradient-hero),
    url('/assets/hero-bg.jpg') center/cover no-repeat;
  color:var(--white);
  text-align:center;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="g1" cx="50%" cy="30%"><stop offset="0%" stop-color="rgba(255,255,255,.15)"/><stop offset="100%" stop-color="transparent"/></radialGradient><radialGradient id="g2" cx="80%" cy="70%"><stop offset="0%" stop-color="rgba(255,255,255,.1)"/><stop offset="100%" stop-color="transparent"/></radialGradient></defs><rect width="1000" height="1000" fill="url(%23g1)"/><circle cx="800" cy="700" r="300" fill="url(%23g2)"/></svg>') center/cover;
  opacity:.6;
}
.hero__content{
  position:relative;
  z-index:2;
  max-width:800px;
  padding:3rem 2rem;
  animation:hero-fade-in 1.2s ease-out;
}
.overline{
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  margin-bottom:1rem;
  animation:slide-up .8s ease-out .3s both;
}
.names{
  font-family:'Playfair Display',serif;
  font-size:clamp(3rem,8vw,6rem);
  font-weight:600;
  line-height:1;
  margin:1rem 0;
  animation:slide-up .8s ease-out .5s both;
}
.names .amp{
  font-family:'Great Vibes',cursive;
  font-size:.8em;
  color:var(--gold-glow);
  margin:0 .2em;
  opacity:.95;
  text-shadow:0 0 20px var(--gold);
  filter:drop-shadow(0 0 10px var(--gold));
  -webkit-text-stroke:0.5px transparent;
}
.date{
  font-size:clamp(1.125rem,3vw,1.5rem);
  font-weight:300;
  font-family:'Montserrat',sans-serif;
  color:rgba(255,255,255,.9);
  margin-bottom:2rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  animation:slide-up .8s ease-out .7s both;
}
.countdown{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  padding:1.5rem 2rem;
  background:rgba(36,36,36,.8);
  backdrop-filter:blur(20px);
  border-radius:20px;
  border:1px solid var(--emerald);
  box-shadow:var(--shadow-glow);
  animation:slide-up .8s ease-out .9s both;
}
.countdown__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:70px;
}
.countdown__item span{
  font-size:clamp(1.5rem,4vw,2.25rem);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.countdown__item small{
  font-size:.75rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:rgba(255,255,255,.8);
  margin-top:.25rem;
}
.countdown__sep{
  font-size:1.5rem;
  opacity:.6;
  font-weight:300;
}
.hero__scroll{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  animation:bounce 2s infinite;
}

/* Sections */
.section{
  padding:5rem 0;
  position:relative;
}
.section--card{
  background:
    linear-gradient(135deg, rgba(10,10,10,.75) 0%, rgba(26,26,26,.85) 100%),
    url('/assets/details-bg.jpg') center/cover no-repeat;
  text-align:center;
  padding:4rem 0;
  border-top:1px solid rgba(16,185,129,.3);
  border-bottom:1px solid rgba(16,185,129,.3);
  position:relative;
}
.intro{
  text-align:center;
  padding:3rem 0;
}
.intro__lead{
  font-size:clamp(1.25rem,3vw,1.75rem);
  font-weight:400;
  color:var(--text);
  margin:0 auto 1rem;
  max-width:600px;
}
.intro__note{
  font-size:1.125rem;
  color:var(--text-muted);
  max-width:700px;
  margin:0 auto;
  line-height:1.7;
}

/* Modern Headings */
.h{
  font-size:clamp(2rem,5vw,3rem);
  font-weight:300;
  font-family:'Montserrat',sans-serif;
  letter-spacing:-0.02em;
  line-height:1.2;
  margin-bottom:2rem;
}
h1, h2, h3, h4, h5, h6{
  font-family:'Montserrat',sans-serif;
  font-weight:300;
  letter-spacing:-0.01em;
  line-height:1.3;
}
h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:200}
h2{font-size:clamp(2rem,5vw,3rem);font-weight:300}
h3{font-size:clamp(1.5rem,4vw,2.25rem);font-weight:400}
.overline{
  font-family:'Montserrat',sans-serif;
  font-size:.875rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.15em;
  opacity:.8;
}
.details{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
  margin:2rem 0;
  text-align:left;
}
.detail{
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(15px);
  padding:2rem;
  border-radius:1.5rem;
  border:1px solid rgba(16,185,129,.5);
  transition:all .3s ease;
  display:flex;
  align-items:center;
  gap:1.5rem;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.detail:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-glow), 0 12px 40px rgba(0,0,0,.6);
  background:rgba(0,0,0,.95);
  border-color:var(--emerald);
}
.detail__icon{
  color:var(--gold);
  filter:drop-shadow(0 0 10px var(--gold));
}
.detail__text{flex:1}
.detail__label{
  font-size:.875rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-muted);
  margin-bottom:.5rem;
}
.detail__value{
  font-size:1.25rem;
  font-weight:600;
  color:var(--text);
}

/* Buttons */
.actions{
  display:flex;
  gap:1rem;
  margin-top:2.5rem;
  justify-content:center;
  flex-wrap:wrap;
}
.btn{
  appearance:none;
  border:2px solid transparent;
  background:var(--gradient-accent);
  color:var(--white);
  padding:1rem 2rem;
  border-radius:50px;
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:all .3s ease;
  box-shadow:var(--shadow-glow);
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  text-align:center;
  z-index:1;
  background-clip:padding-box;
  -webkit-background-clip:padding-box;
}

.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--emerald-light) 0%, var(--gold-light) 100%);
  opacity:0;
  transition:opacity .3s ease;
  z-index:-1;
  border-radius:inherit;
}

.btn:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-gold);
  border-color:var(--gold);
}

.btn:hover::before{
  opacity:1;
}

.btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.btn:disabled:hover{
  transform:none;
  box-shadow:none;
  border-color:transparent;
}
.btn--ghost{
  background:transparent;
  border:2px solid var(--gold);
  color:var(--gold);
  box-shadow:none;
}

.btn--ghost::before{
  background:var(--gold);
}

.btn--ghost:hover{
  background:transparent;
  color:var(--white);
  box-shadow:var(--shadow-gold);
  border-color:var(--gold-light);
}

.btn--ghost:hover::before{
  opacity:1;
}

/* Dress Code */
.dress{
  background:var(--gradient-card);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--emerald);
  text-align:center;
  padding:5rem 0 2rem;
}

.dress-cards{
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}

.dress-women,
.dress-men{
  text-align:center;
  padding:3rem 0;
  margin:0 1rem 2rem;
  border:1px solid rgba(16,185,129,.3);
  border-radius:16px;
  background:rgba(36,36,36,.6);
  backdrop-filter:blur(10px);
  position:relative;
  overflow:hidden;
  transition:all .3s ease;
}

.dress-women:hover,
.dress-men:hover{
  transform:translateY(-4px);
  border-color:var(--emerald);
  box-shadow:var(--shadow-glow);
}

.dress-women::before,
.dress-men::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.1;
  z-index:1;
}

.dress-women::before{
  background:linear-gradient(135deg, rgba(16,185,129,.4) 0%, rgba(16,185,129,.2) 100%);
}

.dress-men::before{
  background:linear-gradient(135deg, rgba(245,158,11,.4) 0%, rgba(245,158,11,.2) 100%);
}

.dress-women .container,
.dress-men .container{
  position:relative;
  z-index:2;
}

.dress-title{
  font-family:'Montserrat',sans-serif;
  font-size:1.5rem;
  font-weight:500;
  color:var(--emerald-light);
  margin:0 0 1.5rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  position:relative;
}

.dress-women .dress-title{
  color:var(--emerald-light);
}

.dress-women .dress-title::after{
  content:'';
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:2px;
  background:var(--emerald);
  border-radius:1px;
}

.dress-men .dress-title{
  color:var(--gold-light);
}

.dress-men .dress-title::after{
  content:'';
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:2px;
  background:var(--gold);
  border-radius:1px;
}
.palette{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:2rem;
  margin:2rem 0;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}
.swatch--img{
  padding:0;
  background:transparent;
  border:none;
  text-align:center;
  transition:transform .3s ease;
}
.swatch--img:hover{transform:scale(1.05)}
.swatch__img{
  width:120px;
  height:120px;
  border-radius:50%;
  background-color:var(--black-card);
  background-size:cover;
  background-position:center;
  margin:0 auto 1rem;
  box-shadow:0 15px 35px rgba(0,0,0,.5), 0 0 0 3px var(--black), 0 0 0 5px var(--gold), 0 0 20px var(--gold);
  transition:all .3s ease;
}
.swatch--img:hover .swatch__img{
  box-shadow:0 25px 50px rgba(0,0,0,.7), 0 0 0 3px var(--black), 0 0 0 5px var(--emerald), 0 0 30px var(--emerald);
  transform:scale(1.05);
}

/* Program Timeline */
.program{text-align:center}
.timeline{
  list-style:none;
  padding:0;
  margin:2rem 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
}
.timeline li{
  background:rgba(36,36,36,.8);
  backdrop-filter:blur(10px);
  padding:2rem;
  border-radius:1.5rem;
  border:1px solid rgba(16,185,129,.3);
  transition:all .3s ease;
  position:relative;
}
.timeline li::before{
  content:'';
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  height:20px;
  background:var(--gradient-accent);
  border-radius:50%;
  border:3px solid var(--black);
  box-shadow:0 0 15px var(--emerald);
}
.timeline li:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-glow);
  border-color:var(--emerald);
}
.timeline time{
  display:block;
  font-size:1.5rem;
  font-weight:700;
  color:var(--gold);
  margin-bottom:.5rem;
  text-shadow:0 0 10px var(--gold);
}
.timeline span{
  font-size:1.125rem;
  color:var(--text);
  font-weight:500;
}

/* Gifts Section */
.gifts{
  position:relative;
  background:
    linear-gradient(135deg, rgba(6,95,70,.9) 0%, rgba(180,83,9,.85) 100%),
    url('/assets/gifts-bg.jpg') center/cover no-repeat;
  color:var(--white);
  text-align:center;
  padding:5rem 0;
  overflow:hidden;
}

.gifts::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(10,10,10,.5) 0%, rgba(6,95,70,.3) 50%, rgba(180,83,9,.4) 100%);
  z-index:1;
}

.gifts .container{
  position:relative;
  z-index:2;
}

.gifts__content{
  max-width:800px;
  margin:2rem auto 0;
}

.gifts__content p{
  font-size:1.1rem;
  line-height:1.8;
  margin:0 0 1.5rem;
  text-shadow:0 2px 4px rgba(0,0,0,.3);
}

.gifts__content p:last-child{
  margin-bottom:0;
}

/* Interactive Section */
.interactive{
  background:var(--gradient-card);
  padding:5rem 0;
  text-align:center;
}

.interactive-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:2rem;
  margin:3rem 0 0;
}

.interactive-card{
  background:rgba(36,36,36,.6);
  border:1px solid rgba(16,185,129,.3);
  border-radius:16px;
  padding:2.5rem 2rem;
  text-decoration:none;
  color:inherit;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
}

.interactive-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(16,185,129,.1) 0%, rgba(245,158,11,.05) 100%);
  opacity:0;
  transition:opacity .3s ease;
  z-index:1;
}

.interactive-card:hover::before{
  opacity:1;
}

.interactive-card:hover{
  transform:translateY(-8px);
  border-color:var(--emerald);
  box-shadow:var(--shadow-glow);
}

.interactive-icon{
  position:relative;
  z-index:2;
  width:80px;
  height:80px;
  margin:0 auto 1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--emerald) 0%, var(--gold) 100%);
  border-radius:50%;
  transition:all .3s ease;
}

.interactive-card:hover .interactive-icon{
  transform:scale(1.1);
  box-shadow:0 10px 30px rgba(16,185,129,.4);
}

.interactive-icon svg{
  color:var(--white);
  transition:transform .3s ease;
}

.interactive-card:hover .interactive-icon svg{
  transform:scale(1.1);
}

.interactive-title{
  position:relative;
  z-index:2;
  font-family:'Montserrat',sans-serif;
  font-size:1.5rem;
  font-weight:600;
  color:var(--text);
  margin:0 0 1rem;
  letter-spacing:-0.01em;
  transition:color .3s ease;
}

.interactive-card:hover .interactive-title{
  color:var(--emerald-light);
}

.interactive-description{
  position:relative;
  z-index:2;
  font-size:1rem;
  color:var(--text-muted);
  margin:0;
  line-height:1.6;
  transition:color .3s ease;
}

.interactive-card:hover .interactive-description{
  color:var(--text-secondary);
}

/* Page Styles */
.hero--page{
  min-height:50vh;
  background:var(--gradient-hero);
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  color:var(--emerald-light);
  text-decoration:none;
  font-size:1rem;
  font-weight:500;
  margin-bottom:2rem;
  transition:all .2s ease;
}

.back-link:hover{
  color:var(--emerald);
  transform:translateX(-4px);
}

.back-link svg{
  transition:transform .2s ease;
}

.back-link:hover svg{
  transform:translateX(-2px);
}

.page-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,5vw,4rem);
  font-weight:600;
  color:var(--gold);
  text-shadow:0 0 30px var(--gold);
  margin:0 0 1rem;
  letter-spacing:-0.02em;
}

.page-subtitle{
  font-size:1.2rem;
  color:var(--text-secondary);
  margin:0;
  font-weight:300;
}

.page-main{
  padding:4rem 0;
}

.empty-gallery{
  grid-column:1/-1;
  text-align:center;
  padding:4rem 2rem;
  color:var(--text-muted);
}

.empty-gallery svg{
  color:var(--emerald);
  margin-bottom:1.5rem;
  opacity:0.7;
}

.empty-gallery h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.5rem;
  font-weight:500;
  color:var(--text-secondary);
  margin:0 0 1rem;
}

.empty-gallery p{
  font-size:1rem;
  margin:0;
  max-width:400px;
  margin:0 auto;
  line-height:1.6;
}

/* Music Page */
.music-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}

.music-form{
  background:rgba(36,36,36,.6);
  border:1px solid rgba(16,185,129,.3);
  border-radius:16px;
  padding:2rem;
  backdrop-filter:blur(10px);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.form-group{
  margin-bottom:1.5rem;
}

.form-group:last-child{
  margin-bottom:0;
}

.form-group label{
  display:block;
  font-weight:500;
  color:var(--text-secondary);
  margin-bottom:0.5rem;
  font-size:0.9rem;
}

.music-form input[type="text"]{
  width:100%;
  padding:1rem;
  border:1.5px solid rgba(16,185,129,.3);
  border-radius:12px;
  background:rgba(26,26,26,.8);
  font-size:1rem;
  color:var(--text);
  transition:all .2s ease;
  outline:none;
  font-family:inherit;
}

.music-form input[type="text"]:focus{
  border-color:var(--emerald);
  box-shadow:0 0 0 3px rgba(16, 185, 129, .2);
  background:rgba(26,26,26,.95);
}

.music-form input[type="text"]::placeholder{
  color:var(--text-muted);
}

.music-form .btn{
  width:100%;
  justify-content:center;
  gap:0.5rem;
  margin-top:1rem;
}

.empty-queue{
  text-align:center;
  padding:3rem 2rem;
  color:var(--text-muted);
  background:rgba(36,36,36,.3);
  border:1px solid rgba(16,185,129,.2);
  border-radius:16px;
}

.empty-queue svg{
  color:var(--emerald);
  margin-bottom:1.5rem;
  opacity:0.7;
}

.empty-queue h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.5rem;
  font-weight:500;
  color:var(--text-secondary);
  margin:0 0 1rem;
}

.empty-queue p{
  font-size:1rem;
  margin:0;
  line-height:1.6;
}

.songs-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.song-item{
  display:flex;
  align-items:center;
  gap:1rem;
  background:rgba(36,36,36,.6);
  border:1px solid rgba(16,185,129,.2);
  border-radius:12px;
  padding:1.5rem;
  transition:all .2s ease;
}

.song-item:hover{
  border-color:var(--emerald);
  background:rgba(36,36,36,.8);
}

.song-number{
  flex-shrink:0;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gradient-accent);
  color:var(--white);
  border-radius:50%;
  font-weight:600;
  font-size:1.1rem;
}

.song-details{
  flex:1;
}

.song-title{
  font-weight:600;
  color:var(--text);
  font-size:1.1rem;
  margin-bottom:0.25rem;
}

.song-artist{
  color:var(--text-secondary);
  font-size:1rem;
  margin-bottom:0.25rem;
}

.song-requester{
  color:var(--text-muted);
  font-size:0.9rem;
  font-style:italic;
}

.song-time{
  flex-shrink:0;
  color:var(--text-muted);
  font-size:0.9rem;
  font-variant-numeric:tabular-nums;
}

/* Congratulations Page */
.congratulations-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}

.congrats-form{
  background:rgba(36,36,36,.6);
  border:1px solid rgba(16,185,129,.3);
  border-radius:16px;
  padding:2rem;
  backdrop-filter:blur(10px);
}

.congrats-form textarea{
  width:100%;
  min-height:120px;
  padding:1rem;
  border:1.5px solid rgba(16,185,129,.3);
  border-radius:12px;
  background:rgba(26,26,26,.8);
  font-size:1rem;
  color:var(--text);
  transition:all .2s ease;
  outline:none;
  font-family:inherit;
  resize:vertical;
}

.congrats-form textarea:focus{
  border-color:var(--emerald);
  box-shadow:0 0 0 3px rgba(16, 185, 129, .2);
  background:rgba(26,26,26,.95);
}

.congrats-form textarea::placeholder{
  color:var(--text-muted);
}

.empty-congrats{
  text-align:center;
  padding:3rem 2rem;
  color:var(--text-muted);
  background:rgba(36,36,36,.3);
  border:1px solid rgba(16,185,129,.2);
  border-radius:16px;
}

.empty-congrats svg{
  color:var(--emerald);
  margin-bottom:1.5rem;
  opacity:0.7;
}

.empty-congrats h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.5rem;
  font-weight:500;
  color:var(--text-secondary);
  margin:0 0 1rem;
}

.empty-congrats p{
  font-size:1rem;
  margin:0;
  line-height:1.6;
}

.congrats-list{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  max-height:600px;
  overflow-y:auto;
  padding-right:1rem;
}

.congrats-list::-webkit-scrollbar{
  width:8px;
}

.congrats-list::-webkit-scrollbar-track{
  background:rgba(36,36,36,.3);
  border-radius:4px;
}

.congrats-list::-webkit-scrollbar-thumb{
  background:var(--emerald);
  border-radius:4px;
}

.congrats-item{
  background:rgba(36,36,36,.6);
  border:1px solid rgba(16,185,129,.2);
  border-radius:12px;
  padding:1.5rem;
  transition:all .2s ease;
  position:relative;
}

.congrats-item:hover{
  border-color:var(--emerald);
  background:rgba(36,36,36,.8);
}

.congrats-item::before{
  content:'"';
  position:absolute;
  top:1rem;
  left:1rem;
  font-size:2rem;
  color:var(--gold);
  font-family:'Playfair Display',serif;
  opacity:0.5;
}

.congrats-message{
  color:var(--text);
  font-size:1rem;
  line-height:1.6;
  margin:0 0 1rem;
  padding-left:1.5rem;
}

.congrats-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:1rem;
  border-top:1px solid rgba(16,185,129,.1);
}

.congrats-author{
  color:var(--emerald-light);
  font-weight:500;
  font-style:italic;
}

.congrats-time{
  color:var(--text-muted);
  font-size:0.9rem;
  font-variant-numeric:tabular-nums;
}

.gallery-more{
  grid-column:1/-1;
  text-align:center;
  margin-top:2rem;
}

/* Photos Showcase */
.photos-showcase{
  background:linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
  text-align:center;
  padding:6rem 0;
  border-top:1px solid rgba(16,185,129,.2);
  border-bottom:1px solid rgba(16,185,129,.2);
}
.photos-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin:0 auto;
  max-width:1250px;
}
.photo-showcase-item{
  position:relative;
  aspect-ratio:4/5;
  border-radius:1.5rem;
  overflow:hidden;
  border:2px solid transparent;
  transition:all .5s ease;
  background:var(--black-card);
}
.photo-showcase-item:hover{
  transform:translateY(-10px) scale(1.02);
  border-color:var(--gold);
  box-shadow:
    0 20px 60px rgba(0,0,0,.8),
    0 0 0 1px var(--gold),
    0 0 30px rgba(245,158,11,.4);
}
.photo-showcase-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.photo-showcase-item:hover img{
  transform:scale(1.05);
}
.photo-showcase-item:nth-child(1){
  animation:photo-float 6s ease-in-out infinite;
}
.photo-showcase-item:nth-child(2){
  animation:photo-float 6s ease-in-out infinite 2s;
}
.photo-showcase-item:nth-child(3){
  animation:photo-float 6s ease-in-out infinite 4s;
}
@keyframes photo-float{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* Gallery */
.gallery{
  background:linear-gradient(180deg, transparent 0%, var(--black-soft) 100%);
  text-align:center;
}
.upload-section{
  margin:2rem 0;
}
.upload-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.photo-item{
  aspect-ratio:4/5;
  border-radius:1.5rem;
  overflow:hidden;
  background:var(--black-card);
  border:1px solid var(--emerald);
  transition:all .3s ease;
}
.photo-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}
.photo-item:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-glow);
  border-color:var(--gold);
}
.photo-item:hover img{
  transform:scale(1.05);
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
  margin:2rem 0;
}
.placeholder{
  aspect-ratio:4/5;
  background:linear-gradient(135deg, var(--black-card) 0%, var(--black-soft) 100%);
  border-radius:1.5rem;
  border:2px dashed var(--emerald);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-weight:500;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.placeholder::before{
  content:'📸';
  font-size:3rem;
  margin-bottom:1rem;
  display:block;
  filter:grayscale(1) brightness(0.7);
}
.placeholder::after{
  content:'Фото скоро появятся';
  position:absolute;
  bottom:2rem;
  font-size:.875rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.placeholder:hover{
  border-color:var(--gold);
  background:linear-gradient(135deg, var(--black-card) 0%, rgba(245,158,11,.1) 100%);
  box-shadow:0 0 20px rgba(245,158,11,.3);
}

/* Quote */
.section--quote{
  position:relative;
  background:
    linear-gradient(135deg, rgba(26,26,26,.9) 0%, rgba(36,36,36,.85) 100%),
    url('/assets/quote-bg.jpg') center/cover no-repeat;
  text-align:center;
  border-top:1px solid var(--emerald);
  border-bottom:1px solid var(--emerald);
  overflow:hidden;
}

.section--quote::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(10,10,10,.4) 0%, rgba(16,185,129,.2) 50%, rgba(245,158,11,.2) 100%);
  z-index:1;
}

.section--quote .container{
  position:relative;
  z-index:2;
}
blockquote{
  margin:0;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.5rem,4vw,2.5rem);
  font-weight:300;
  font-style:normal;
  color:var(--white);
  max-width:800px;
  margin:0 auto;
  position:relative;
  padding:2rem 0;
  letter-spacing:-0.01em;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
  z-index:3;
}
blockquote::before{
  content:'"';
  font-size:6rem;
  color:var(--gold);
  position:absolute;
  top:-1rem;
  left:-2rem;
  font-family:'Playfair Display',serif;
  opacity:.8;
  text-shadow:0 0 20px var(--gold), 0 2px 8px rgba(0,0,0,.5);
  z-index:2;
}

/* Footer */
.footer{
  background:linear-gradient(135deg, var(--black) 0%, var(--black-soft) 100%);
  color:var(--white);
  padding:3rem 0;
  text-align:center;
  border-top:1px solid var(--emerald);
}

.footer__message{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.2rem, 3vw, 1.8rem);
  font-weight:300;
  color:var(--gold);
  margin:0;
  letter-spacing:0.05em;
  text-shadow:0 0 15px var(--gold);
}

/* Modal - Dark Elegant Design */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:1000;
  backdrop-filter:blur(12px);
}
.modal--open{display:block}
.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
  animation:fade-in .25s ease;
}
.modal__card{
  position:relative;
  z-index:1;
  width:min(480px,92%);
  margin:12vh auto;
  background:var(--gradient-card);
  border:1px solid var(--emerald);
  border-radius:16px;
  box-shadow:var(--shadow-dark), 0 0 40px rgba(16,185,129,.3);
  padding:3rem 2.5rem 2.5rem;
  animation:modal-pop .25s ease;
}
.modal__card .h{
  font-size:1.5rem;
  font-weight:600;
  color:var(--text);
  text-align:center;
  margin:0 0 .5rem;
  letter-spacing:-.01em;
}
.modal__card .intro__lead{
  font-size:1rem;
  font-weight:400;
  color:var(--text-muted);
  text-align:center;
  margin:0 0 2rem;
  line-height:1.5;
}
.modal__success{
  text-align:center;
  padding:1rem 0 0;
}
.rings{
  width:120px;
  height:120px;
  margin:0 auto 1.5rem;
}
.rings svg{width:100%;height:100%}
.modal--success .rings{animation:ring-celebration 1.2s ease}

/* RSVP Form - Minimalist */
.rsvp-form{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  margin-top:0;
}
.rsvp-form input[type="text"]{
  width:100%;
  padding:1rem 1.25rem;
  border:1.5px solid rgba(16,185,129,.3);
  border-radius:12px;
  background:rgba(36,36,36,.8);
  font-size:1rem;
  font-weight:400;
  color:var(--text);
  transition:all .2s ease;
  outline:none;
  font-family:inherit;
}
.rsvp-form input[type="text"]:focus{
  border-color:var(--emerald);
  box-shadow:0 0 0 3px rgba(16, 185, 129, .2), 0 0 20px rgba(16, 185, 129, .1);
  background:rgba(36,36,36,.95);
}
.rsvp-form input[type="text"]::placeholder{
  color:var(--text-muted);
  font-weight:400;
}
.rsvp-form .btn{
  width:100%;
  padding:1rem 2rem;
  border-radius:12px;
}

/* Animations */
@keyframes hero-fade-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}60%{transform:translateX(-50%) translateY(-5px)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-pop{from{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes ring-celebration{0%{transform:scale(.8);opacity:.7}50%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}

/* Responsive */
@media (max-width:768px){
  .container{padding:0 15px}
  .details{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .palette{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1.5rem}
  .swatch__img{width:100px;height:100px}
  .countdown{flex-wrap:wrap;gap:.5rem;padding:1rem}
  .countdown__item{min-width:60px}

  .rsvp-form{flex-direction:column}
  .rsvp-form input[type="text"]{min-width:auto}
  .photos-showcase{padding:4rem 0}
  .photos-grid{grid-template-columns:1fr;gap:1.5rem;margin:2rem 0 0}
  .photo-showcase-item{aspect-ratio:16/10}
  .gifts{padding:3rem 0}
  .gifts__content{margin:1.5rem auto 0}
  .gifts__content p{font-size:1rem;margin:0 0 1rem}
  .interactive{padding:3rem 0}
  .interactive-grid{grid-template-columns:1fr;gap:1.5rem;margin:2rem 0 0}
  .interactive-card{padding:2rem 1.5rem}
  .music-content{grid-template-columns:1fr;gap:2rem}
  .form-row{grid-template-columns:1fr}
  .congratulations-content{grid-template-columns:1fr;gap:2rem}
  .congrats-list{max-height:400px}
  .dress-women,.dress-men{margin:0 0 1.5rem}
  .btn{padding:0.875rem 1.5rem;font-size:0.95rem}
  .names .amp{
    text-shadow:none;
    filter:none;
    -webkit-text-stroke:none;
  }
}

/* Mobile specific fixes */
@media (max-width:480px){
  .names .amp{
    text-shadow:none !important;
    filter:none !important;
    -webkit-text-stroke:none !important;
    background:transparent !important;
  }
}

/* Upload Modal */
.upload-modal__card{
  max-width:600px;
  width:min(600px,95%);
}
.modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1rem;
}
.modal__close{
  background:none;
  border:none;
  color:var(--text-muted);
  cursor:pointer;
  padding:.5rem;
  border-radius:8px;
  transition:all .2s ease;
}
.modal__close:hover{
  background:rgba(16,185,129,.1);
  color:var(--emerald);
}
.upload-area{
  border:2px dashed rgba(16,185,129,.3);
  border-radius:1rem;
  padding:3rem 2rem;
  text-align:center;
  transition:all .3s ease;
  cursor:pointer;
  margin:1.5rem 0;
}
.upload-area:hover, .upload-area--dragover{
  border-color:var(--emerald);
  background:rgba(16,185,129,.05);
}
.upload-content{
  color:var(--text-muted);
}
.upload-content svg{
  color:var(--emerald);
  margin-bottom:1rem;
}
.upload-content p{
  margin:.5rem 0;
  font-size:1rem;
}
.upload-hint{
  font-size:.875rem;
  opacity:.7;
}
.preview-area{
  margin:1.5rem 0;
}
.preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:1rem;
}
.preview-item{
  position:relative;
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  background:var(--black-card);
  border:1px solid rgba(16,185,129,.3);
}
.preview-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.preview-remove{
  position:absolute;
  top:.25rem;
  right:.25rem;
  background:rgba(0,0,0,.8);
  border:none;
  color:var(--white);
  width:24px;
  height:24px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  transition:all .2s ease;
}
.preview-remove:hover{
  background:rgba(239,68,68,.8);
}
.upload-actions{
  display:flex;
  gap:1rem;
  justify-content:flex-end;
  margin-top:2rem;
}
.upload-progress{
  text-align:center;
  margin:2rem 0;
}
.progress-bar{
  width:100%;
  height:8px;
  background:rgba(16,185,129,.2);
  border-radius:4px;
  overflow:hidden;
  margin:1rem 0;
}
.progress-fill{
  height:100%;
  background:var(--gradient-accent);
  width:0%;
  transition:width .3s ease;
}
.upload-success{
  text-align:center;
  color:var(--emerald);
  margin:2rem 0;
}
.upload-success svg{
  margin-bottom:1rem;
}