/* 信封动画样式 */
.envelope-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #8e0000 0%, #be1313 50%, #d32f2f 100%);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out;
    overflow: hidden;
}

/* 信封显示时隐藏主容器并禁止滚动 */
.envelope-overlay:not(.hidden)~.container {
    display: none;
}

.envelope-overlay:not(.hidden)~.music-control {
    display: none;
}

body.envelope-active {
    overflow: hidden;
}

.envelope-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.envelope {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.envelope-front {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #be1313;
    background-image: url("data:image/webp;base64,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");
    background-size: contain;
    border: 3px solid #d32f2f;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    position: relative;
}

.envelope-seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.seal-text-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 16%;
    color: #ffe0d9 !important;
    font-size: 2.5rem !important;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.seal-button {
    background-color: #be1313;
    border: 0.25rem solid #ffe0d9;
    border-radius: 50%;
    width: 9rem;
    height: 9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
    animation: pulse 2s infinite;
    position: relative;
}

.seal-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

.seal-text {
    color: white;
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.seal-icon {
    margin-top: 4px;
    height: 2.8rem;
    width: 2.8rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.open-hint {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1rem;
    text-align: center;
    animation: bounce 2s infinite;
}

.arrow-up {
    font-size: 1.5rem;
    color: #ffe0d9;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hint-text {
    font-size: 1rem;
    color: #ffe0d9;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.1rem;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-0.5rem);
    }
    60% {
        transform: translateX(-50%) translateY(-0.25rem);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.envelope-flap {
    position: absolute;
    width: 50%;
    height: 100%;
    border: 2px solid #ffe0d9;
    transform-origin: center;
    transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.envelope-flap-left {
    top: 0;
    left: 0;
    transform: translateX(0);
}

.envelope-flap-right {
    top: 0;
    right: 0;
    transform: translateX(0);
}

.envelope-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #d0d0d0;
    z-index: -1;
}

/* 信封打开动画 - 左右分开 */
.envelope.opening .envelope-flap-left {
    transform: translateX(-100%);
}

.envelope.opening .envelope-flap-right {
    transform: translateX(100%);
}

.envelope.opening .seal-button {
    opacity: 0;
    transform: scale(0.5);
}

/* 移动端适配 */
@media (max-width: 400px) {
    .seal-button {
        width: 6rem;
        height: 6rem;
    }

    .seal-text {
        font-size: 1rem;
    }

    .seal-icon {
        font-size: 1.5rem;
    }

    .seal-text-right {
        font-size: 1.5rem !important;
        height: 120px;
        right: 12%;
    }

    .open-hint {
        margin-top: 0.75rem;
    }

    .arrow-up {
        font-size: 1.25rem;
    }

    .hint-text {
        font-size: 0.875rem;
    }
}

/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 根元素字体大小设置 - 基于400px设计稿 */
html {
    font-size: 16px;
    /* 基准字体大小 */
}

/* 移动端适配 - 400px设计稿 */
@media (max-width: 400px) {
    html {
        font-size: 14px;
        /* 400px设备下的基准字体大小 */
    }
}

/* 平板设备 */
@media (min-width: 401px) and (max-width: 768px) {
    html {
        font-size: 16px;
    }
    
    .seal-text-right {
        font-size: 2rem !important;
        height: 150px;
        right: 14%;
    }
}

/* 桌面设备 */
@media (min-width: 769px) {
    html {
        font-size: 18px;
    }
}

body {
    font-family: 'Noto Serif SC', serif;
    background: linear-gradient(135deg, #be1313 0%, #be1313 100%);
    color: white;
    line-height: 1.6;
    overflow-x: hidden;
    font-size: 1rem;
    /* 使用rem单位 */
}

.container {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

/* 音乐控制 */
.music-control {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1000;
}

.music-icon {
    width: 3.125rem;
    height: 3.125rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.music-icon:hover {
    transform: scale(1.1);
}

.music-note {
    font-size: 1.5rem;
    color: #be1313;
    animation: musicRotate 2s linear infinite;
}

@keyframes musicRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.music-icon.paused .music-note {
    animation-play-state: paused;
}

/* 头部区域 */
.header {
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.status-bar {
    background: #000;
    color: white;
    padding: 0.25rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

.status-icons {
    display: flex;
    gap: 0.5rem;
}

.nav-bar {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.close-btn {
    font-size: 1.125rem;
    cursor: pointer;
    padding: 0.5rem;
}

.title {
    text-align: center;
    flex: 1;
}

.title h1 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.125rem;
}

.url {
    font-size: 0.625rem;
    color: #666;
}

.nav-icons {
    display: flex;
    gap: 0.75rem;
}

.nav-icons .icon {
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* 新人照片区域 */
.couple-photo {
    background: #be1313;
    text-align: center;
    position: relative;
}

.couple-photo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.1875rem;
    background: #ffe0d9;
}

.photo-container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.couple-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 请帖内容区域 */
.invitation-content {
    background: #be1313;
    background-image: url("data:image/webp;base64,UklGRiYeAABXRUJQVlA4WAoAAAAgAAAA7QIAmAUASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggOBwAALCnAZ0BKu4CmQU+7WauVSmqrjGi8BuqMB2JZ25z5mpvk9EGIPPW1zXqXC6qF7nl8FW+3/8LsVbdubis8b4RK1v+wmLm6SdzR5Du2e/0fPwlwfGQvyRb+9vUf7+bVbF3RvhRv5tP7v0Z0gAUcRN08wXxE3TzBfETdPB4iEr5AlCISvjTnatkuolrrGAXdt+UBa+b3MBjzAC86+pyRICSH/oA1gCcvmJqSVTDAfmHdjAO2GlR6ij8Up/n6HCSs3xWlwWtkmAAUmxPD473ZQ6GP0HSxWv8FVuho6GNFv8sCzT6iYlKZElQnF3VoE5wTDl8zr3tjbrplGmIkgZKf7BFmh7AesMXn46k3cqa7GcvkF58TllHK51CK2G2BVG6YoSUC1rVaQQZWu14n4HnRf2oZrbcT+agP1WcUhxMyJRtA/eaHddy/jecDYYlEtIII1MB8V99t4mms3M6C4hH0UAO7bw9dO28FzDU9YiPsjiKBJqQJAOaD8cZqJ2/X3ugiRZJ+F/10a03S44JCc9sxeizoW4HOcFB5AlCJ6vHqQ5cSkdAV0X8d1t5KKbd8ud8F3lXFuv2gfa9OZokyQKlhTCvN0dwgRww513hQRFfl/omp70gMl1ovelycCrB05PCgCT8uI7HuOD7tcOTEqxbecqjaZnq5YPuw6IWntcxZpUOa3olCLmMKUDWuZYbZ6czoHTUZtaOYceH0QxqluOcnoWr84GnFSIryYBX5NOZZrcVAmhrbjXvQvSFxpZ78ALpOCX7f4/bzJjcuyyShevyaMP7b4KQBBlhWL0HAKa7k3YVK8Cqj1ninng1hbR4+UEq03TzBfETdPMGGmsKQBJheYfhOoPcCJAt8kgLra8HP1gR9oiP5k4S6ayR3zA2LUUwTUjH6UdpoQIfynvQ7NI04D2z5Apym76x0oO2ibHRIUyG6GrJzHQ0pq6lYoZphTQUZOx2BVerH0Egm7V2SurKWVxTo4s3k13kqKdJiTwL+g4ipNRU+J9bB2s5hErxIWxM0hkoTkjS7sTyi4byoxqs5dGRf3Vbuo7hrDbvgvtysdh0+NgJDxXqAzADg7GkCHRi4mg0HIATIasmghT1P9JRlRmYATsg37wZRbKGzEWzMFNzmhkwY2JV8x//5+AVFbLjstIsL2ZkL0gghKUFwBoY+btLF8aR/07sNsdOx/oiuvqqr3PBFS3++peWzQR0QBcIsDdg65a0uZN5S0avTrn+TabzmAppACTddBPzEQO7JQ4iVsRTVLU38VWo6dpH3w8BPOJUCPdl4gJY8TYKyLfkAJfdB4FaK3Tcni6l0Ty3jIhLwGErjQfIa92fpko2cExQlHSdgY/SeDAyBUqGhZ0nJnIErQ1zVR1I7sfwCS9/o+iePprpLTG8O0Rm3jDviFLfOtp+ETm687U5uxipznq6pymJriL3oiF5aYEOHnmjJP7MvSWo7Xxvshqssc2LxipCAooL0uNkkMUal37SZ8RDhl4vm9ErQ6ZC0LWy4U0E++FEYZQeQbJXezbtx2nQcMh3NKcw7PSdrOx9dJ6F5/pokvwQFydZ8flPehPAuey4YSqDhhIzy/Y/B9O8gOOuB9Nko170L7cGmSnX7LuXTM65hWDMuJDzm06d/cY9PHDfyyS74z/tZ2TRlOcHaQeQMU1tzXLCBNcbE2qw844jH3s2i7w9N/xQUhPJHUQYGKH32nNfBDL4eM+E9+AcbBPvcxsKO+j5RWe6FH3dJO6uV1mcBKK10bxEAEoh3hWyrJ3AEGgo1dAQTzVJmCArOOouVLRNyAPg8MhjeOR1f96JNTGyDrUrYiZAtO5LiU5YQsS0c/dGsd6C2Whw0OYG8qFtthmA9MBh+KqTKitdLnwtbFBZy4CLrZo2ng8rijuuQIszHZdabp5gviJy3AowaudfK7W04CCBH+IzM8DxD0iubBLj4GAZv/aob8l5YkQyly2JNp0DIGLJ+r5Z42SRP1Uw+DGH1wuRH8ycWg5H8svinpdQD0J7h3IMF0I4xgR3QdFwbzjb9egiFhViWDjrlpmdnLbnuuqRw2sQnRNtihZidc3k+NRvXaLeoPdU0zBcwv2Q2oPrzehADbWFCW9AYN8lxIAk3D5QKGxavKXvZU5z1ToArIBMMwtwuPwhnoYFNaPJ9DVv578MB+bMAn2tMlEQXx8flRNcf3tqY4qH4QFd77u2iHtyTlUcxCIb7LZnwgBafprDbLaZAiSoJrjKbWBZtxkjONjeBMyqrBaAIE6uZKIMHp1r+ATwCS+bxEAVOBW89PbgXlJvMGSV+6CmgZkBUOzTB/z37M+9xZ/GfS6E0XfBYalyu7XXo2GIGPjBDpfnzQ5LF0IEKKzBgZkBDNECZkB1tTeYTLcJXyH6DpTggAlE14EIQPiQKMzFBZLMudlK/gmP0yB8r1cWRRw9sl7OPHPIc2Hk214bgwhsB/yjfxXOM2jmZcwvANTQnz4sh2StFssn2c0OcUFxOby+IEiutB3YrCrlS7wtb7a7Oi8DwYgWhwGw5trQcq7NNzfH93USvgH87DzFcVRQ/gSE81vioM3WhTTTakX5pfwGV37CIK8tf5RFIpxPk/6G9c86mlxNYW8v+Tff2ANoAkQGQLTfs4zHl4UNwTjzt3wpnObBI6OaMoDj7f1CsClDXLhS1GYgo270Yb+uLXVE9ULY366wFbn++Dur5fW/J43v0PcKtIrcFpXZgA+7xozrQoBu6w7tRKjCYs+EinQMfNbi4UNIc8sHvf6GBkGvIrb3H0ezxW/wMUm6LceRAaLUIMB/Z1tsBSxw+mZgFP4VsqXepDYBefxoXzMhn4UysWF+yU2ZMRjYYKIzCn8oEMqgx+lHZPoGZYQaPfDpuKWRPMGS06tp2qmvOncgJJAoPfhkTXEtOgpRR05f5O9MfXLT2dHgLxbs2QCv78vCsGK5x1sQYGKNSRzpy2Z9s2Ip97gXLXE7R8B8CASdPYuW4euRGBiRJAWiysME7m298Wja2kfJTrnQEhMUJRWvDgsttEBSIbR8so+vrc8u/vyeDAx+lHm4k4SAvZbg+iXGhyiQ0x9dMtQRatLhoN8eNC7to0CYK9pNKbY/nUlstvlIAQjvaBJP2/hgFRr3jT82bgV/UNdkpLXY3nGy5E9E0oN4pJ1fDSW5MGe3NV0P2Bd3MJ4BTVmbNEeJA7HyMVD7N9lG3MNb4/i1KF0DQzHUbWgvOwH29x/zpM6UNP0nKcbY313862aM31ZjAWaxrMYxS7iW/1gu05Qo3/66gKIYJHQJAGFFlSRBolQ8lhZDOjT5sT7J7XIEJM6qOif0JXU7rdq40Enx/2m4DpwTbm0ySc1zH1mzAlQ2QZ+ASvEw88vMJXyBKEQlfIbEKXnDInzBQYDornqA3lkfCZ0XyU2OLIy9EH/rCCGSScTdDRxjWOnCEvW4jmR90rOXQu+uz6NknSaBEW7gpdeTlRzpr7CXQTHFP74zNXi+ImbHBKeRE3Ty6n3ssqbz3PzihRSAtKBefLCTCijZQhuZEqsR1FqVight3ysD9hvrEbQJ7MiUg9P+YpdbDDgdGZpZRu7ngt6Rls7A7tI8hcNwpEttrL6w/bcVrMRMvxT8ktNKr6hNuVYLapqfRSDC7Q9rQykK5EKYkZg1d+bBPBkadBx2iAdNiARSAGcYBSPtC2/kkaB3xpzHvQvvM8G6q3s0md+2L7uJqkn4Vv0jHTPNcRCj9ODIhH7eyMhCE3CeQEpG4I+7EA1CiLcOzMvaxUoXPZb2PE0Yj8Wnli5ugXlXDKCIum91gBfQaiuRcp/cwXxE3Tz3/iG/SX+Bf8Ai8Id859q8bTGaycxEQE+YnMp26i6/dc2ajezauakhuV1rwWTMTYgZkBfP/pnGAaCS+AGxj2rDKyfwqe5mVMTgHkysSlOPenO84B1lJOD3jqZqgfxXS9R6XXDXAGHYG03TzCX8ntK+fOptdh0RfJKrd2HRLkCUUTK18XXcEoee4JDCl8ZF+VzNfMzyFOlCwTwY7NjO7g10mvSPtOgHQXoBi5gvKTXccLRZV+n6+b0nXznrjghTa45OjtL12HTQpoGZB3As6nBOnmDI1RAeTU1GF/YLUpU97Kl3jRmh5QBJuugZIGPhbidEtIBGvLSAo/Wyt6p4UP7bRxuH7PFba0ug+BgZlunb4vwBWFEag6TgLP6d25A/KwKxyO5N1mAVEAjZ7rKMA7dIGCfe4GBoMlXJg0fcxD+8+GcaKzBmKAIFPwfRF71c7dm09CeBcGwXQgQo2IcJCSGP0o7i51AXS4oUxNcRc7R1eFXsV15H75ypSoJxaPYPuugn6QmvYL4kedmVZPprD9KRCyJT5Siz+GlpYfVIrmtPZ1RjM2a6fmbyLaC+zrPkpyo6UhzPI+0dOtgTELwynz4MG1krDNNtD7rQe+ATgURfFNsbCA7uI/eh3WAFS3KPwzKuNHa3DAJN10FMRrnLt3SjYkPwqzDRcm7EBeAVc3HxLc05nVCF7xdz1xgy+5C87KuXLnPf85Lezncops0Ke9lpbXqBTP+RUJgAAP7vaA/4N9gfXsv//8EF/6Yf/iCwP33ESpx2DB6/EK8E85R/bSujLrSc+JAmHN2AK/FhI9yLjY2GNrj3tVcBSM9QHl40IG5KKSk0w/C4ylrptcSuocbvvsNEpjw41/82AM/dUtp9uJUiObbrfm5kIRQD3s8sjCu7IqhNqIWZvZd5roTn8j6K9BfDnXa9JA6eIlqItHl0+Pa5I+3MqAQl/KPsCALPV9RpSp1pJEL9F4HxVWpW983j2wYT52kZgvVWZsKiKdOJibcpSaVqGOrpFqNj50woLj1A5GkD7mjzLZ3VQH5OHST1bAPcZ2oLxxtdPe1+60q+NdubN1KIUV6YcDF4Nr/aN7cCNIqwR6mC+8Ccy4UP16SC+PcBDU3WmPqHbK3Y0w+vmRlpCSHv4i38H5paCAYyoFyJi3FDXnyYwU1/WKUO7sXzPrrbZRou4LAy9FQ5pqS9IM9MDxZm8AQO1uFxUkd3Op+Baq8/MBZm+oIvKpfEppJUKuUS/SUSf+3i5NpqHVN2PszJwVnIiF2kjxni8h+iJ71+GTQgZ5hH6NiZTUA6qdR1d8Q4Sbu+0GqOuxKNzRFmZJgSRR+l8DV10PLRM6l+BzcHxYxfs7oluuAqlwNnzOtwzhYEORVIHjHuoGZdvgATYCzRMoBtXpE+kUDgFJw+NQWYJUGPl5QmRz+Fwj97VzH914V7oNzY3PmsAQtiZTW9m8mTM8uKjeDv8DrdiQJADpY4IAGFcOxnf8RaBz/kX3ngxxOhAMpDeJkIYgDE58E3F1BBptN7K9rKoUbkCoK1DUgDRex0P5ikogYFH/ML7N1kDd2GI4Vegd6+264jZu1ExrJYaRjhHK/iHaIIRon3R5eOYSAVQJDGDtJoCpWSAnJ5k7GFovxmMTFg3QAGNaezjqQB322f3oMQAJ4Brmej2uIcKiBwFoFGmv2aLSFRIhBc/InuJ8Lbz1b/dNQfRsP6esjgC9nRor5RWEQIQMjWOmDwOb5b3YZoyuti8r8WZAryaUrKknrbvd1JJ5EnBIziqGIpanFvsMaTCBVfmY9XKFjZqTcUTkIDf32MEoqWPkRyIBwcJrQxRFdxt/sLETjXYjALgpeUybeDhQuKM/PCNh+5v8pLcBKrkuSIubhJ/31zPxjxJ5hGyPMt3lWo5eLFoaQWbP/WqnLLLhaabIMwt8n8AgFsRvDP/F32db6l8BAai/fiYlVOL6GhO4YNRaY5iuerOlmmGQY1oZ+F1s+7L5gtVqxg8gPTsZq3Q1KjEfaZquQmMSDIcjIYNShhh3WAQNXHMblp7w99gTUgEXbNhnI+VvdkULuEi3yODLpA0y2KrNxg9EzdH8K5l89qo/1cZKR2NR0CNKsYKoRcfvqwrec3nfw4qmn92YD4g6BsgXADi3vpOC76fqKka5FIATb4wyzFjANl+GoQhKBnLiH3lkmuZvo732JQV0YdtuL+L5/mni09W2L13eMCOwaqVvl1nJmY6+XIG0JK9NwIVQ7CtC8XaFIzScoK7K5CLEMOIBMZr5/UELpUKTBdYVvDz9DKkmIulaVVeDgkuNGzSXYhQ4ttbdb1yfW0TXwI1w/xF5sG4jZfeR8kBwyaEc5x8WnrbqWxSUetITPLtEgOEqkgmvoII/i+Je9sRM8ubKh/DVyMvug1d1kMfrYcMB12behVLOMsWRXEOPFhcwSrRETOIZl4HFj9659x/pYMhuN8PfWUZ/f+mpAAEDF6PneceIYkfWOPqzjQEZm0FvvWGT+IyPpDmbSuL4JyMHwkY1pIWehdL0Zv+YNPiFxs0wFVLqCHW11MS/kYS22D050SuZ5nJXLZoVcOatfJP6/hB9o/iCPQskG3EAdvsxa97qRxOmBwG+ifeIep4AU1IgaQLx7i+vROLBftLSe2TSEdvQNk3hp59c3mBMFQACDo6sTONlWtEDrOvVMvkaeUwLp5G3iQ9b0IZAgyPMa3g6C+UiW8rHpY2LIDoRXlnbNJuf591kdoV2WEShYaSg/UP7kT3CgkPv8RE1vnNa+2QCphf0SK44fRo+AQAm3FAU1EhP74GBA/t54kpUQBlhDLlahriQJ4ObDvh09/6YLHBAFKmCNes7pEyZbNBEkEQWPnHvhJaa56Juxrz6gfejXFU3D3M/N/Cx4AgRJRkEf3o124m3va4wkGE8h2fAm8NcKuY4O7EUw0Xe0X7afNMAx7XxwUwQBJuX7J/om1Iw4r9tvv84D7OrPbztHiskzen7KxRhP2LbZBBMN3IS3jCnznET0UxrwR/dkiAF3z5UpwD+fAWsotbalfJ3Acf4BJ7kQFOuEw3CrLs/p8LKldC86AzpHwTyZYq6Yxvv469pIpr5BEu0dOOstNYdMu5G4NkUg5keV/NQI3778X50x2SvNTWzvlkCIZqtr2k3gjJXlXR+9d0CvUqNk3b2KG/SqWt7c3RsCe7FgAzM5d7QXlyOufpWMsfA1ID1UPXAGlTWg8k+fjS5Q32EHdlNbOGERn3lXdt5avGUAoxAGl8dcq5yCgZKKE3s9/tn0LcDP7i7ti/8RLSl0sMCHFKyhENx+prvUzw6t+k62QFZJ5NsRzNZnf/QG85HkjA8/jSdidF4kRuQnSBpWbORjerEw7NeecYCkTxn83YvWt8e8p8hoKjvBvowYvwQH0dW7v7GZS2ecnpWSYBno8GvX+b0yTHO1dVCv0FrRdHlo6+VqRRcA/vc8w06y6o6yteF/a75nf3MbnIdDWzKJiq0d82mYs2OD8+g7NGb6UeuXLhawK7IjOziAVfEyM1jrrjBtBZyEoEtKLgp21pySUxU8sI4QhzpHa0vz2+p9G6tn/a1Eahmf0ir6dYq03tWFinvvsDxD+s8Itel9dikirU87Y9VJfY2j2ojP06lDJVtNZcHHUtw1Ro8n/tL2ZJVu93PDIF8xXI7jaywVALXHsFJoc1dqBY17/yuB/mraIrpLxhQzmwj4qR/usTGtfdKB85JwK5dkCsh+AgkwIbbIgkOMMCyN1YrD6kRM+HvMf+KLxtYSFt3w+x61T6gfZau8/4LbhGoWwECwQDf7DWpJ+1xQhlfcDa5uMRrDotRr5T/SIxS6jXsd580KcH2xrvufrFwDsA1JIG8rLD+tt9APGYzDtPbCzCRpxZbGhNy9xzN57ejix3qnTS141G3bSmta+N8hIz00R4at2CNnkXWieAhRrOuF/bLeMf5byrlmPdBmcGWMfPbeVdGrArlXOozpoEClQXGCvltkHVQ7UVbfji+VnyJ59ehGjl/i3PCeYCRrYt8/t2EwzoubZF89qESm+gJmHj332Bwj3ja92xF09DXGAuL3U+bvF3ykR+AEvA/tpemKVKEypf6od3K8t7rTT4rbHxaPYe1gssdelkhBryyLYgX097JBaZEg43X49b8pvtwya1NhPsOXE4Oc1KN4Dc+TYsonq0FrZtHX+r8gxDPMibAuq0EkBLxPx/PrNStmamI4hwRbqXfb2Fk1dg7T5DnVNP8DWUHg9EhBfFru3odXr7LS5pueToadtIoxSXP+EVD3ryxRE+lWW2KkzJ23PbHovPcglrQEAPBxfB58N3+a+NCXHfwgGvJCmRu6vfBY/up/kMGr8a2BHntRWxAtKHlgo/bJIj25Cv2OB8fyhv3Evz0YJHeVqQaKp0NWvweB+G63HQSTHVGOFAt2fNjw7Fb7+RI5AOtkQqi2O0OBsKM4g2t3OhttX+QDlOg+Zt850pxzNWgYDgADN48JAEieNhmUYAo+bp5CVD/Jp+X2QvPAgxvfeSEeD/BgOPZh03xqKDx9VncNKbhfsvWooSMLvjDhOjGy9AgKZqWfI6jrJJ2A4zwFAfiZjoPcf7m9dIf4namdlnsa7CTGI7AbeV1Phhu/Szj1fhDG22BsBtHAM3YJdLSeC1BW5GZsq0KFZyIm3AwFNfUrZdK7Ks8mr7raPi8kkUERQeewT51ytqK/cwqxauZZU/pP8VbGF7N/v45/VFK34h835F4rjZdpdytfIGe21FiJ1dBixd3Di/yyh4JGGQXUHIcLbLq2hwEkzTnySCnOA4yN73DcxRkpQuFkdCIN3h5xjNDQiRdc6N3UphwU3k9hCV+rXtXCqiBtqQKgPiDmFlW+FyLyoFd2/IsDQOIoqLtpZbIA8Htw3MOvfz5sAAPG5ip3LFiz+GbYHfB5hL6+tKbdiltJ/bihz2dwmi4pNOV5BS/6ZxCFE1kuoKsrT5x2YX2OAmUzRrZoLhqPY1picKCbopNCJOx8Bueq2rns5d+GdhzIDB5YQwoqjiOnhMa+qlfwgRIlLIgADXY81Is5NBAOosrN7WJc4jUVbqiaRITR94S/gTq7asxo+3C9UIlPEHsC+r1k0wDHqX3ZKRakKuW86JFOF2+Arre2cAtYiBzZcAJmivGSwiSaOQwAh+h97g/Qn08qdTea1AJiHfFBXxPnTbBTZufJPfGZiMw22VASkS3RxodHJ7QywqOIXuk0+MteLEcjB8vQ92votA9ILYTOmVAUk4qlschTSv7/pRpuYFd5wiBJYvfCoWwaI+ekMYQJlAzL85HeSSnLpPCvSJ1U3RqA+tDWG5nFHhrX2l1SYd+I8MYiMxI95ibtNarBmBb6W6PO8N7LpqqCBdcdThdivt4+nip66za81HKWQQpAlDFtvBRAXYhCD2qpP6dDRqGdGy23duxBcjJNe4HafVnItevtzIALeVasMVKDTkexZID2PHRs6nCxvoAx4v59JEtfon+pVvjbOj9PiSkb1qDMMUyGWpxIGkMJ78TKqxZUgNDaDKmhwb/Rpar9+QJ86hZZq8Y9AoYKpSpU+xtkj9A2sVa15hPWe5GpuB+zxqHZuyBdhRN81bewjmB7+dd9YbxiC3xrx0/XUkCHiKDzfIhRMwCd+vzkIMxh0gfQPsoIVNEDFnlMBDi8HuRcVYmorKfw8iZFTXHkFaHsm8ZNwZqSbe0dGB/wVz+K2DZRtsGQOcTnv9U3QMLk6ERzzv8+mmvjjmyM7dOEeqb16VmxLPqCWPAa/egJyUv6Jf59NNeGjTkK4TkXA9FncTrdMwSdPDKwxRzZigEiHPSm9RTaFTLPIZ5VPtiDAHUya2SDiMMJ2D+/jIAAAAA==");
    background-size: contain;
    padding: 2.5rem 1.25rem;
    text-align: center;
    position: relative;
}


.invitation-content>* {
    position: relative;
    z-index: 1;
}

.double-happiness {
    background-color: #be1313;
    border: 0.25rem solid #ffe0d9;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.6875rem;
    width: 4.6875rem;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}

.double-happiness-img {
    height: 3.125rem;
    width: 3.125rem;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes glow {
    from {
        transform: scale(1);
        opacity: 0.5;
    }

    to {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.invitation-title {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
    font-style: italic;
    letter-spacing: 0.125rem;
    color: #ffe0d9;
}

.couple-names {
    color: rgb(251, 216, 197);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 2.5rem;
    letter-spacing: 0.0625rem;
}

/* 婚礼时间安排 */
.wedding-schedule {
    color: #ffe0d9;
    margin-bottom: 2.5rem;
}

.wedding-schedule-title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.wedding-schedule-title::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 0.125rem;
    background: linear-gradient(90deg, transparent, #ffe0d9, transparent);
}

.schedule-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    backdrop-filter: blur(10px);
    border: 0.0625rem solid rgba(255, 255, 255, 0.2);
}

.schedule-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.schedule-content {
    text-align: left;
    flex: 1;
}

.schedule-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.schedule-content .time {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.schedule-content .lunar {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.schedule-content .arrival {
    font-size: 0.875rem;
    opacity: 0.8;
    color: #ffe0d9;
}

/* 诚挚邀请 */
.sincere-invitation-section {
    margin-bottom: 2.5rem;
}

.sincere-invitation {
    background: #fff;
    color: #333;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    border: 0.0625rem solid rgba(190, 19, 19, 0.1);
}

.sincere-invitation .sincere-invitation-title {
    text-align: left;
    font-size: 1.25rem;
    margin-bottom: 2rem;
    font-weight: 600;
    color: #be1313;
    border-bottom: 0.125rem solid #be1313;
    padding-bottom: 0.5rem;
}

.sincere-invitation .sincere-invitation-content {
    margin-bottom: 2rem;
}

.sincere-invitation .invitation-text {
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 0.75rem;
    text-align: left;
    color: #333;
    font-family: 'SimSun', '宋体', serif;
}

.sincere-invitation .invitation-text:last-of-type {
    margin-bottom: 0;
}

.sincere-invitation .sincere-invitation-signature {
    text-align: right;
    font-size: 1.25rem;
    font-weight: 600;
    color: #be1313;
    font-style: italic;
    font-family: 'Brush Script MT', cursive;
    margin-top: 1.5rem;
    border-top: 0.0625rem solid #be1313;
    padding-top: 0.75rem;
}

/* 婚礼地点 */
.wedding-location {
    color: #ffe0d9;
    margin-bottom: 2.5rem;
}

.wedding-location h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.wedding-location h3::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 0.125rem;
    background: linear-gradient(90deg, transparent, #ffe0d9, transparent);
}


.location-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 1.25rem;
    padding: 1.875rem;
    backdrop-filter: blur(15px);
    border: 0.125rem solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}


.venue-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.2);
}

.venue-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.venue-info {
    flex: 1;
}

.venue-name {
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #ffe0d9;
}

.venue-subtitle {
    font-size: 0.875rem;
    opacity: 0.8;
    font-style: italic;
}

.address-section {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.15);
}

.address-icon {
    font-size: 1.25rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.address-content {
    flex: 1;
}

.address {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.address-detail {
    font-size: 0.875rem;
    opacity: 0.8;
    line-height: 1.4;
}

.navigation-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.nav-options {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.nav-btn {
    flex: 1;
    max-width: 8rem;
    border: 0.125rem solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    text-decoration: none;
    position: relative;
}

.nav-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.nav-btn.primary {
    color: #ffe0d9;
    border-color: rgba(255, 235, 59, 0.4);
}

.nav-btn.primary:hover {
    border-color: rgba(255, 235, 59, 0.8);
    background: rgba(255, 235, 59, 0.1);
    transform: translateY(-0.0625rem);
}

.nav-btn.secondary {
    color: #ffe0d9;
    border-color: rgba(79, 195, 247, 0.4);
}

.nav-btn.secondary:hover {
    border-color: rgba(79, 195, 247, 0.8);
    background: rgba(79, 195, 247, 0.1);
    transform: translateY(-0.0625rem);
}

.nav-icon {
    font-size: 1rem;
    opacity: 0.9;
}

.nav-text {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.025rem;
}

.quick-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    opacity: 0.9;
}

.info-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.info-text {
    line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 400px) {
    .location-card {
        padding: 1.25rem;
    }

    .venue-header {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .venue-icon {
        font-size: 2rem;
    }

    .nav-options {
        flex-direction: column;
        align-items: center;
    }

    .nav-btn {
        max-width: 100%;
        width: 100%;
        justify-content: center;
    }

    .quick-info {
        padding: 0.75rem;
    }

    .info-item {
        font-size: 0.8rem;
    }
}

/* 祝福语 */
.blessing {
    margin-top: 1.25rem;
    text-align: center;
    color: rgb(251, 216, 197);
    font-style: italic;
    line-height: 1.8;
    opacity: 0.9;
    margin-bottom: 1.25rem;
}

.blessing p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

/* 婚礼日历展示 */
.calendar-section {
    color: #ffe0d9;
    padding: .5rem 1.25rem 0 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}


.calendar-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.875rem;
    color: #ffe0d9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
}

.calendar-section h2::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 0.125rem;
    background: linear-gradient(90deg, transparent, #ffe0d9, transparent);
}

.calendar-container {
    max-width: 25rem;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    border: 0.125rem solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.3);
}

.wedding-date {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.date-number {
    font-size: 3rem;
    font-weight: 700;
    color: #ffe0d9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

.date-info {
    text-align: left;
}

.month {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.year {
    font-size: 1rem;
    opacity: 0.8;
}

.wedding-info {
    text-align: right;
}

.day-of-week {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.lunar-date {
    font-size: 0.875rem;
    opacity: 0.8;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.2);
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3rem;
}

.countdown-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffe0d9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    min-width: 2.5rem;
    text-align: center;
    margin-bottom: 0.25rem;
}

.countdown-label {
    font-size: 0.75rem;
    opacity: 0.8;
    font-weight: 500;
}

.countdown-separator {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffe0d9;
    margin-top: -0.5rem;
}

.wedding-schedule-mini {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.3);
}

.schedule-mini-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.2);
    flex: 1;
}

.schedule-time {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffe0d9;
    margin-bottom: 0.25rem;
}

.schedule-event {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 400px) {
    .calendar-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .wedding-date {
        justify-content: center;
    }

    .wedding-info {
        text-align: center;
    }

    .countdown-timer {
        gap: 0.25rem;
    }

    .countdown-item {
        min-width: 2.5rem;
    }

    .countdown-number {
        font-size: 1.25rem;
        padding: 0.375rem 0.5rem;
        min-width: 2rem;
    }

    .wedding-schedule-mini {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* 祝福留言墙 */
.wishes-section {
    background: linear-gradient(135deg, #be1313 0%, #be1313 100%);
    color: #ffe0d9;
    padding: 2.5rem 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.wishes-section::before {
    content: '💝';
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 2rem;
    opacity: 0.1;
}

.wishes-section::after {
    content: '💕';
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 2rem;
    opacity: 0.1;
}

.wishes-section h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.875rem;
    color: #ffe0d9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
}

.wishes-section h2::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 0.125rem;
    background: linear-gradient(90deg, transparent, #ffe0d9, transparent);
}

.wishes-container {
    max-width: 50rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.wish-form-container {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    border: 0.125rem solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

.wish-form {
    text-align: left;
}

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

.wish-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #ffe0d9;
    font-size: 1.125rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.wish-form input,
.wish-form textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 0.125rem solid rgba(255, 255, 255, 0.3);
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.wish-form textarea {
    resize: vertical;
    min-height: 6rem;
    font-family: inherit;
}

.wish-form input:focus,
.wish-form textarea:focus {
    outline: none;
    border-color: #ffe0d9;
    box-shadow: 0 0 0 0.25rem rgba(255, 235, 59, 0.2);
    transform: translateY(-0.0625rem);
}

.char-count {
    text-align: right;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.25rem;
}

.wish-submit-btn {
    background: linear-gradient(45deg, #ffe0d9, #ffc107, #ffe0d9);
    color: #333;
    border: none;
    border-radius: 2rem;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 0.5rem 1rem rgba(255, 235, 59, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.wish-submit-btn:hover {
    background: linear-gradient(45deg, #ffc107, #ffe0d9, #ffc107);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.75rem 1.5rem rgba(255, 235, 59, 0.4);
}

.wish-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 0.25rem 0.5rem rgba(255, 235, 59, 0.4);
}

.wishes-display {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    border: 0.125rem solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    max-height: 30rem;
    overflow-y: auto;
}

.wishes-display h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #ffe0d9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

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

.wish-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 0.75rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.2);
    animation: wishFadeIn 0.5s ease-out;
}

.wish-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.wisher-name {
    font-weight: 600;
    color: #ffe0d9;
    font-size: 1rem;
}

.wish-time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.wish-message {
    color: #ffe0d9;
    line-height: 1.5;
    font-size: 0.875rem;
}

.loading-message,
.no-wishes-message {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    padding: 2rem;
}

@keyframes wishFadeIn {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .wishes-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .wishes-display {
        max-height: 25rem;
    }
}

/* 参加婚礼表单 */
.rsvp-section {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0d9 50%, #ffebee 100%);
    color: #333;
    padding: 2.5rem 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.rsvp-section::before {
    content: '囍';
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 2rem;
    color: rgba(190, 19, 19, 0.1);
    font-weight: bold;
}

.rsvp-section::after {
    content: '囍';
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 2rem;
    color: rgba(190, 19, 19, 0.1);
    font-weight: bold;
}

.rsvp-section h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.875rem;
    color: #be1313;
    text-shadow: 0 2px 4px rgba(190, 19, 19, 0.2);
    position: relative;
}

.rsvp-section h2::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 0.125rem;
    background: linear-gradient(90deg, transparent, #be1313, transparent);
}

.rsvp-form {
    max-width: 25rem;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.9);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(190, 19, 19, 0.1);
    border: 0.125rem solid rgba(190, 19, 19, 0.2);
    position: relative;
}


.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #be1313;
    font-size: 1.125rem;
    text-shadow: 0 1px 2px rgba(190, 19, 19, 0.1);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 0.125rem solid #e0e0e0;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #be1313;
    box-shadow: 0 0 0 0.25rem rgba(190, 19, 19, 0.1);
    transform: translateY(-0.0625rem);
}

.checkbox-group {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.7);
    padding: 1rem;
    border-radius: 0.75rem;
    border: 0.0625rem solid rgba(190, 19, 19, 0.2);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.5);
    border: 0.0625rem solid transparent;
}

.checkbox-item:hover {
    background: rgba(190, 19, 19, 0.1);
    border-color: rgba(190, 19, 19, 0.3);
}

.checkbox-item input[type="checkbox"] {
    width: auto;
    margin: 0;
    transform: scale(1.2);
    accent-color: #be1313;
}

.checkbox-item span {
    font-weight: 500;
    color: #333;
}

/* 参加人姓名容器 */
#guestNamesContainer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    padding: 1rem;
    border-radius: 0.75rem;
    border: 0.0625rem solid rgba(190, 19, 19, 0.2);
}

.guest-name-item {
    position: relative;
}

.guest-name-item::before {
    content: '👤';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    z-index: 1;
    pointer-events: none;
}

.guest-name-item input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.5rem;
    border: 0.125rem solid #e0e0e0;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.guest-name-item input:focus {
    outline: none;
    border-color: #be1313;
    box-shadow: 0 0 0 0.25rem rgba(190, 19, 19, 0.1);
    transform: translateY(-0.0625rem);
}

/* 参加人数选择器样式 */
.form-group select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 0.125rem solid #e0e0e0;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    position: relative;
}

.form-group select:focus {
    outline: none;
    border-color: #be1313;
    box-shadow: 0 0 0 0.25rem rgba(190, 19, 19, 0.1);
    transform: translateY(-0.0625rem);
}

.form-group select::after {
    content: '🎉';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.875rem;
}

.submit-btn {
    background: linear-gradient(45deg, #be1313, #d32f2f, #be1313);
    color: white;
    border: none;
    border-radius: 2rem;
    padding: 1.25rem 2rem;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 0.5rem 1rem rgba(190, 19, 19, 0.3);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.submit-btn:hover::before {
    left: 100%;
}

.submit-btn:hover {
    background: linear-gradient(45deg, #be1313, #be1313, #be1313);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.75rem 1.5rem rgba(190, 19, 19, 0.4);
}

.submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 0.25rem 0.5rem rgba(190, 19, 19, 0.4);
}

/* Loading状态样式 */
.submit-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.submit-btn.loading .submit-text {
    display: none;
}

.submit-btn.loading .loading-spinner {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.loading-spinner .spinner {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.loading-spinner .spinner circle {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        stroke-dasharray: 0 31.416;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 15.708 15.708;
        stroke-dashoffset: -15.708;
    }

    100% {
        stroke-dasharray: 0 31.416;
        stroke-dashoffset: -31.416;
    }
}

/* 底部导航 */
.footer {
    background: #333;
    color: white;
    padding: 1.25rem;
    text-align: center;
}

.footer-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 0.75rem;
}

.nav-item {
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: opacity 0.3s ease;
}

.nav-item:hover {
    opacity: 0.7;
}

.footer-text {
    font-size: 0.875rem;
    opacity: 0.8;
    letter-spacing: 0.125rem;
}

/* 响应式设计 - 使用rem单位实现真正的响应式 */
@media (max-width: 400px) {

    /* 400px设备下，根元素字体大小为14px */
    html {
        font-size: 14px;
    }

    /* 表单在小屏设备下垂直排列 */
    .checkbox-group {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* 音乐控制按钮位置调整 */
    .music-control {
        top: 0.75rem;
        right: 0.75rem;
    }

    .music-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .music-note {
        font-size: 1.25rem;
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 0.375rem;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.1875rem;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 主容器动画 - 重新设计 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-3rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(3rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(1rem) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 主容器初始状态 */
.container {
    opacity: 0;
    transform: translateY(1rem);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 页面加载完成后的状态 */
body.loaded .container {
    opacity: 1;
    transform: translateY(0);
}

/* 邀请内容区域动画 - 移除自动动画，改为可见性控制 */
.invitation-content>* {
    opacity: 0;
    animation: none;
    animation-delay: 0s;
}

/* 移除原有的自动动画，改为可见性控制 */
.invitation-content>.invitation-title,
.invitation-content>.couple-names,
.invitation-content>.wedding-schedule,
.invitation-content>.wedding-location,
.invitation-content>.calendar-section,
.blessing,
.sincere-invitation-section,
.rsvp-form,
.wishes-section,
.music-control {
    animation: none;
    animation-delay: 0s;
}

/* 信封覆盖层隐藏时的过渡效果 */
.envelope-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 响应式动画调整 */
@media (max-width: 768px) {
    .invitation-content>* {
        animation-duration: 0.8s;
    }

    /* 可见性动画在移动端的延迟调整 */
    .animate-visible {
        animation-delay: 0.1s !important;
    }
}

/* 可见性动画样式 - 元素只有在添加animate-visible类时才执行动画 */
.couple-photo,
.invitation-content .double-happiness,
.invitation-content .invitation-title,
.invitation-content .couple-names,
.wedding-schedule,
.wedding-location,
.calendar-section,
.sincere-invitation-section,
.blessing,
.rsvp-form,
.rsvp-section,
.wishes-section,
.music-control {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 当元素可见时执行动画 */
.couple-photo.animate-visible,
.invitation-content .double-happiness.animate-visible,
.invitation-content .invitation-title.animate-visible,
.invitation-content .couple-names.animate-visible,
.wedding-schedule.animate-visible,
.wedding-location.animate-visible,
.calendar-section.animate-visible,
.sincere-invitation-section.animate-visible,
.blessing.animate-visible,
.rsvp-form.animate-visible,
.rsvp-section.animate-visible,
.wishes-section.animate-visible,
.music-control.animate-visible {
    opacity: 0;
    transform: translateY(0);
}

/* 特殊动画效果 */
.couple-photo.animate-visible {
    animation: scaleIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.invitation-content .double-happiness.animate-visible {
    animation: bounceIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.invitation-content .invitation-title.animate-visible {
    animation: slideInLeft 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.invitation-content .couple-names.animate-visible {
    animation: slideInRight 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.wedding-schedule.animate-visible {
    animation: floatIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.wedding-location.animate-visible {
    animation: slideInRight 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.calendar-section.animate-visible {
    animation: scaleIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.blessing.animate-visible {
    animation: fadeInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rsvp-section.animate-visible {
    animation: fadeInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.sincere-invitation-section.animate-visible {
    animation: slideInLeft 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rsvp-form.animate-visible {
    animation: floatIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.wishes-section.animate-visible {
    animation: slideInRight 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.music-control.animate-visible {
    animation: scaleIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 子元素动画 - 当父容器可见时，子元素依次动画 */
.invitation-content.animate-visible>* {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.invitation-content.animate-visible>*.animate-visible {
    opacity: 1;
    transform: translateY(0);
}