/* Custom Fonts */
@font-face {
    font-family: 'liuhuankatongshoushu';
    src: url('assets/font_liuhuankatongshoushu_liuhuankatongshoushu_1.ttf') format('truetype');
}
@font-face {
    font-family: 'liuhuankatongshoushu';
    src: url('assets/font_liuhuankatongshoushu_liuhuankatongshoushu_2.ttf') format('truetype');
}
@font-face {
    font-family: 'CHERRYBOMBONE-REGULAR';
    src: url('assets/font_CHERRYBOMBONE-REGULAR_CHERRYBOMBONE-REGULAR_2.TTF') format('truetype');
}

/* Reset and Layout */
* {
    box-sizing: border-box;
}
html {
    font-size: 37.5px; /* default for 375px width */
}
body {
    margin: 0;
    padding: 0;
    background-color: #f7f3e8;
    font-family: '微软雅黑', sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(252, 251, 242, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 77, 50, 0.2);
    border-top: 5px solid rgba(255, 77, 50, 1);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loading-screen p {
    color: rgba(160, 51, 0, 1.0);
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 18px;
    margin: 0;
}

/* Music Controller */
.music-controller {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-image: url('assets/share_icon.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    border: 3px solid rgba(255, 251, 208, 0.8);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 1000;
    cursor: pointer;
}
.rotating {
    animation: rotateCD 5s linear infinite;
}
@keyframes rotateCD {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Main Container */
.invitation-container {
    position: relative;
    width: 100vw;
    max-width: 375px;
    height: 149.4933rem;
    background-color: rgba(252, 251, 242, 1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Elements Styles */
.h5-element {
    position: absolute;
}

#el-1776336626700 {
    top: 111.6267rem;
    left: 0.6933rem;
    width: 8.3733rem;
    height: 8.3733rem;
    z-index: 10;
    transform: none;
}

#el-copy-1776336814661 {
    top: 112.0000rem;
    left: 1.0667rem;
    width: 7.6267rem;
    height: 7.6267rem;
    z-index: 11;
    transform: none;
}

#el-1776323185880 {
    top: 127.9778rem;
    left: 2.6533rem;
    width: 5.0667rem;
    height: 5.3867rem;
    z-index: 12;
    transform: none;
}

#el-copy-1776316590592 {
    top: 37.9733rem;
    left: 0.5333rem;
    width: 1.5733rem;
    height: 3.8400rem;
    z-index: 13;
    transform: none;
}

#el-copy-1776315492651 {
    top: 20.9333rem;
    left: -0.8267rem;
    width: 11.6267rem;
    height: 17.2267rem;
    z-index: 14;
    transform: none;
    background-color: rgba(255, 77, 50, 1);
    -webkit-mask-image: url('assets/shape_1776316583558.svg');
    mask-image: url('assets/shape_1776316583558.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

#el-1776316583558 {
    top: 82.4267rem;
    left: 1.3467rem;
    width: 7.3067rem;
    height: 7.3067rem;
    z-index: 15;
    transform: none;
    background-color: rgba(255, 77, 50, 1);
    -webkit-mask-image: url('assets/shape_1776316583558.svg');
    mask-image: url('assets/shape_1776316583558.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

#el-1776311141602 {
    top: -1.2000rem;
    left: -0.6133rem;
    width: 11.2000rem;
    height: 15.8400rem;
    z-index: 16;
    transform: none;
}

#el-1776309887570 {
    top: 1.8350rem;
    left: 0.9429rem;
    width: 8.1067rem;
    height: 9.8933rem;
    z-index: 17;
    transform: none;
}

#el-1776312656910 {
    top: 2.8000rem;
    left: 1.9733rem;
    width: 6.0800rem;
    height: 7.5733rem;
    z-index: 18;
    transform: rotate(357deg);
}

#el-1776311065925 {
    top: 8.9410rem;
    left: 4.5690rem;
    width: 5.3067rem;
    height: 2.2933rem;
    z-index: 19;
    transform: none;
}

#el-1776314505741 {
    top: 0.3420rem;
    left: 0.2117rem;
    width: 7.5733rem;
    height: 3.3067rem;
    z-index: 20;
    transform: none;
}

#el-1776307383791 {
    top: 8.0643rem;
    left: 0.1067rem;
    width: 6.2133rem;
    height: 5.4933rem;
    z-index: 21;
    transform: none;
}

#el-1776313104842 {
    top: 3.6533rem;
    left: 6.9374rem;
    width: 2.6667rem;
    height: 2.5067rem;
    z-index: 22;
    transform: none;
}

#el-1776315929140 {
    top: 6.4178rem;
    left: 0.8159rem;
    width: 0.9067rem;
    height: 0.8800rem;
    z-index: 23;
    transform: none;
}

#el-1776310840950 {
    top: 11.3067rem;
    left: 6.0942rem;
    width: 1.2800rem;
    height: 0.9600rem;
    z-index: 24;
    transform: none;
}

#el-1776309357177 {
    top: 11.2800rem;
    left: 7.4400rem;
    width: 1.4933rem;
    height: 4.2400rem;
    z-index: 25;
    transform: none;
}

#el-1776309825826 {
    top: 2.3927rem;
    left: 8.0267rem;
    width: 0.5867rem;
    height: 0.5600rem;
    z-index: 26;
    transform: none;
}

#el-copy-1776314092990 {
    top: 4.9333rem;
    left: 0.5333rem;
    width: 0.5333rem;
    height: 0.5600rem;
    z-index: 27;
    transform: none;
}

#el-copy-1776316223045 {
    top: 7.3333rem;
    left: 8.8267rem;
    width: 0.5333rem;
    height: 0.5600rem;
    z-index: 28;
    transform: none;
}

#el-1776308567828 {
    top: 13.9467rem;
    left: 0.9333rem;
    width: 5.9733rem;
    height: auto;
    z-index: 29;
    transform: none;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 0.5067rem;
    color: rgba(0, 0, 0, 1.0);
    line-height: 1.4;
    white-space: pre-wrap;
}

#el-copy-1776310492214 {
    top: 15.4247rem;
    left: 1.0933rem;
    width: 5.9733rem;
    height: auto;
    z-index: 30;
    transform: none;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 0.3467rem;
    color: rgba(160, 51, 0, 1.0);
    line-height: 1.8;
    white-space: pre-wrap;
}

#el-1776309266468 {
    top: 15.8667rem;
    left: 7.3867rem;
    width: 1.5733rem;
    height: 3.8400rem;
    z-index: 31;
    transform: none;
}

#el-copy-1776311278254 {
    top: 21.3200rem;
    left: 0.0000rem;
    width: 10.0000rem;
    height: 15.0133rem;
    z-index: 32;
    transform: none;
}

#el-1776307920948 {
    top: 79.8400rem;
    left: 2.4667rem;
    width: 5.0667rem;
    height: 2.9067rem;
    z-index: 33;
    transform: none;
}

#el-copy-1776313332264 {
    top: 60.1333rem;
    left: 0.2800rem;
    width: 4.3467rem;
    height: 6.5333rem;
    z-index: 34;
    transform: none;
}

#el-copy-1776309988405 {
    top: 60.1333rem;
    left: 5.0933rem;
    width: 4.3467rem;
    height: 6.5333rem;
    z-index: 35;
    transform: none;
}

#el-1776315945847 {
    top: 64.6667rem;
    left: 2.6533rem;
    width: 4.6933rem;
    height: 3.6800rem;
    z-index: 36;
    transform: none;
}

#el-copy-1776316034125 {
    top: 68.8400rem;
    left: 0.0000rem;
    width: 10.0000rem;
    height: auto;
    z-index: 37;
    transform: none;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 0.3467rem;
    color: rgba(160, 51, 0, 1.0);
    line-height: 1.8;
    white-space: pre-wrap;
    text-align: center; 
}

#el-copy-1776316260269 {
    top: 58.3467rem;
    left: 0.5600rem;
    width: 1.3067rem;
    height: 1.2267rem;
    z-index: 38;
    transform: none;
}

#el-copy-1776315040855 {
    top: 58.3467rem;
    left: 8.0533rem;
    width: 1.3067rem;
    height: 1.2267rem;
    z-index: 39;
    transform: none;
}

#el-1776314789348 {
    top: 73.7333rem;
    left: 2.0533rem;
    width: 5.8667rem;
    height: 2.5067rem;
    z-index: 40;
    transform: none;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#el-copy-1776317032276 {
    top: 77.4613rem;
    left: 3.6267rem;
    width: 6.3733rem;
    height: auto;
    z-index: 41;
    transform: none;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 0.3467rem;
    color: rgba(160, 51, 0, 1.0);
    line-height: 1.8;
    white-space: pre-wrap;
}

#el-1776309541157 {
    top: 77.4213rem;
    left: 1.0933rem;
    width: 2.4000rem;
    height: auto;
    z-index: 42;
    transform: none;
    font-family: 'CHERRYBOMBONE-REGULAR', sans-serif;
    font-size: 0.4267rem;
    color: rgba(255, 77, 50, 1.0);
    line-height: 1.4;
    white-space: pre-wrap;
}

#el-1776310857798 {
    top: 81.7467rem;
    left: 0.6667rem;
    width: 8.6667rem;
    height: 8.6667rem;
    z-index: 43;
    transform: none;
    background-color: rgba(252, 251, 242, 1);
    font-family: 'liuhuankatongshoushu', sans-serif;
    color: #a03300;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

#el-copy-1776313216663 {
    top: 90.5080rem;
    left: 4.1600rem;
    width: 5.4667rem;
    height: auto;
    z-index: 44;
    transform: none;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 0.3467rem;
    color: rgba(160, 51, 0, 1.0);
    line-height: 1.8;
    white-space: pre-wrap;
}

#el-copy-1776313044264 {
    top: 90.9880rem;
    left: 1.2800rem;
    width: 2.4000rem;
    height: auto;
    z-index: 45;
    transform: none;
    font-family: 'CHERRYBOMBONE-REGULAR', sans-serif;
    font-size: 0.4267rem;
    color: rgba(255, 77, 50, 1.0);
    line-height: 1.4;
    white-space: pre-wrap;
}

#el-1776318631048 {
    top: 80.0000rem;
    left: 6.9067rem;
    width: 1.7067rem;
    height: 1.3067rem;
    z-index: 46;
    transform: none;
}

#el-copy-1776309426395 {
    top: 85.5200rem;
    left: 8.3200rem;
    width: 0.5867rem;
    height: 0.5600rem;
    z-index: 47;
    transform: none;
}

#el-copy-1776315066633 {
    top: 88.5733rem;
    left: 1.0667rem;
    width: 0.5333rem;
    height: 0.5600rem;
    z-index: 48;
    transform: none;
}

#el-copy-1776314423726 {
    top: 80.3867rem;
    left: 1.8667rem;
    width: 0.5333rem;
    height: 0.5600rem;
    z-index: 49;
    transform: none;
}

#el-1776310052223 {
    top: 32.6933rem;
    left: 4.5600rem;
    width: 5.8400rem;
    height: 5.8400rem;
    z-index: 50;
    transform: none;
}

#el-1776315011023 {
    top: 36.0267rem;
    left: -2.0000rem;
    width: 10.0000rem;
    height: 2.2667rem;
    z-index: 51;
    transform: none;
    font-family: 'liuhuankatongshoushu', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #a03300;
}

#el-copy-1776313106254 {
    top: 39.4533rem;
    left: 2.9867rem;
    width: 6.3733rem;
    height: auto;
    z-index: 52;
    transform: none;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 0.3467rem;
    color: rgba(160, 51, 0, 1.0);
    line-height: 1.8;
    white-space: pre-wrap;
}

#el-copy-1776312737012 {
    top: 44.2533rem;
    left: 1.6845rem;
    width: 6.6400rem;
    height: 6.6400rem;
    z-index: 53;
    transform: none;
}

#el-1776314698552 {
    top: 49.6533rem;
    left: 0.9333rem;
    width: 1.8133rem;
    height: 1.7600rem;
    z-index: 54;
    transform: none;
}

#el-copy-1776321814648 {
    top: 49.6533rem;
    left: 7.2267rem;
    width: 1.8133rem;
    height: 1.7600rem;
    z-index: 55;
    transform: none;
}

#el-copy-1776318651622 {
    top: 52.3200rem;
    left: 0.0000rem;
    width: 10.0000rem;
    height: auto;
    z-index: 56;
    transform: none;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 0.3467rem;
    color: rgba(160, 51, 0, 1.0);
    line-height: 1.8;
    white-space: pre-wrap;
    text-align: center; 
}

#el-copy-1776334839681 {
    top: 129.9921rem;
    left: 3.2133rem;
    width: 0.8267rem;
    height: auto;
    z-index: 57;
    transform: none;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 0.4267rem;
    color: rgba(251, 239, 134, 1.0);
    line-height: 1.4;
    white-space: pre-wrap;
}

#el-copy-1776334767385 {
    top: 129.9921rem;
    left: 6.3200rem;
    width: 0.8267rem;
    height: auto;
    z-index: 58;
    transform: none;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 0.4267rem;
    color: rgba(251, 239, 134, 1.0);
    line-height: 1.4;
    white-space: pre-wrap;
}

#el-1776333745035 {
    top: 137.1909rem;
    left: 1.8667rem;
    width: 6.2667rem;
    height: 1.1467rem;
    z-index: 59;
    transform: none;
    background-color: #fff;
    border: 1px solid rgba(255, 77, 50, 1);
    border-radius: 6px;
    padding: 0 15px;
    color: rgba(255, 77, 50, 1);
    font-size: 12px;
    font-family: 'liuhuankatongshoushu', sans-serif;
    outline: none;
}

#el-1776330995294 {
    top: 138.7109rem;
    left: 1.8667rem;
    width: 6.2667rem;
    height: 1.1467rem;
    z-index: 60;
    transform: none;
    background-color: #fff;
    border: 1px solid rgba(255, 77, 50, 1);
    border-radius: 6px;
    padding: 0 15px;
    color: rgba(255, 77, 50, 1);
    font-size: 12px;
    font-family: 'liuhuankatongshoushu', sans-serif;
    outline: none;
}

#el-1776329909602 {
    top: 140.2309rem;
    left: 1.8667rem;
    width: 6.2667rem;
    height: 1.1467rem;
    z-index: 61;
    transform: none;
    background-color: rgba(255, 77, 50, 1);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    font-family: 'liuhuankatongshoushu', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(255, 77, 50, 0.3);
    transition: transform 0.1s ease;
}

#el-1776335840290 {
    top: 93.1245rem;
    left: 3.3067rem;
    width: 3.3867rem;
    height: 1.0667rem;
    z-index: 62;
    transform: none;
    background-color: rgba(255, 77, 50, 1);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-family: 'liuhuankatongshoushu', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(255, 77, 50, 0.3);
}

#el-copy-1776331188129 {
    top: 125.4977rem;
    left: 1.4800rem;
    width: 1.6800rem;
    height: 1.5733rem;
    z-index: 63;
    transform: none;
}

#el-copy-1776332284397 {
    top: 125.4977rem;
    left: 6.9374rem;
    width: 1.6800rem;
    height: 1.5733rem;
    z-index: 64;
    transform: none;
}

#el-copy-1776332140578 {
    top: 142.9688rem;
    left: 0.0000rem;
    width: 10.0000rem;
    height: auto;
    z-index: 65;
    transform: none;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 0.3467rem;
    color: rgba(160, 51, 0, 1.0);
    line-height: 1.8;
    white-space: pre-wrap;
    text-align: center; 
}

#el-copy-1776335567632 {
    top: 146.2893rem;
    left: 0.0000rem;
    width: 10.0000rem;
    height: auto;
    z-index: 66;
    transform: none;
    font-family: 'CHERRYBOMBONE-REGULAR', sans-serif;
    font-size: 0.4267rem;
    color: rgba(255, 77, 50, 1.0);
    line-height: 1.4;
    white-space: pre-wrap;
    text-align: center; 
}

#el-copy-1776334058326 {
    top: 95.7810rem;
    left: 0.9245rem;
    width: 6.2578rem;
    height: 9.4045rem;
    z-index: 67;
    transform: none;
}

#el-1776336569392 {
    top: 99.6012rem;
    left: 6.3200rem;
    width: 1.5467rem;
    height: 6.0533rem;
    z-index: 68;
    transform: none;
}

#el-1776335147210 {
    top: 98.1867rem;
    left: 7.7600rem;
    width: 1.8400rem;
    height: 1.4133rem;
    z-index: 69;
    transform: none;
}

#el-copy-1776338506414 {
    top: 105.9225rem;
    left: 1.6000rem;
    width: 4.8000rem;
    height: auto;
    z-index: 70;
    transform: none;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 0.3467rem;
    color: rgba(160, 51, 0, 1.0);
    line-height: 1.8;
    white-space: pre-wrap;
}

#el-copy-1776332188910 {
    top: 107.8334rem;
    left: 4.9333rem;
    width: 4.1867rem;
    height: auto;
    z-index: 71;
    transform: none;
    font-family: 'CHERRYBOMBONE-REGULAR', sans-serif;
    font-size: 0.4267rem;
    color: rgba(255, 77, 50, 1.0);
    line-height: 1.4;
    white-space: pre-wrap;
}

#el-1776334359998 {
    top: 103.0723rem;
    left: 0.2933rem;
    width: 1.3333rem;
    height: 1.3067rem;
    z-index: 72;
    transform: none;
}

#el-1776332266050 {
    top: 115.1467rem;
    left: 1.6000rem;
    width: 0.7200rem;
    height: 0.7467rem;
    z-index: 73;
    transform: none;
}

#el-copy-1776335213243 {
    top: 109.0133rem;
    left: 3.9200rem;
    width: 0.5600rem;
    height: 0.5600rem;
    z-index: 74;
    transform: none;
}

#el-copy-1776334756984 {
    top: 115.4267rem;
    left: 7.9733rem;
    width: 0.7733rem;
    height: 0.7733rem;
    z-index: 75;
    transform: none;
}

#el-1776333733179 {
    top: 66.3733rem;
    left: 1.9200rem;
    width: 0.5600rem;
    height: 0.5600rem;
    z-index: 76;
    transform: none;
}

#el-copy-1776335743495 {
    top: 64.3867rem;
    left: 5.0133rem;
    width: 0.5600rem;
    height: 0.5600rem;
    z-index: 77;
    transform: none;
}

#el-copy-1776339309643 {
    top: 66.3733rem;
    left: 7.7600rem;
    width: 0.5600rem;
    height: 0.5600rem;
    z-index: 78;
    transform: none;
}

#el-copy-1776340684280 {
    top: 48.0864rem;
    left: 1.3304rem;
    width: 0.5600rem;
    height: 0.5600rem;
    z-index: 79;
    transform: none;
}

#el-copy-1776331042817 {
    top: 47.5733rem;
    left: 8.1333rem;
    width: 0.5600rem;
    height: 0.5600rem;
    z-index: 80;
    transform: none;
}

#el-copy-1776340708539 {
    top: 43.8267rem;
    left: 5.3067rem;
    width: 0.5600rem;
    height: 0.5600rem;
    z-index: 81;
    transform: none;
}

#el-1776394355075 {
    top: 110.0805rem;
    left: 0.9333rem;
    width: 8.0000rem;
    height: 2.5600rem;
    z-index: 82;
    transform: none;
}

#el-1776396693226 {
    top: 57.8667rem;
    left: 2.2000rem;
    width: 5.6000rem;
    height: 1.5467rem;
    z-index: 83;
    transform: none;
}

/* Interactive components special styling */
.clickable-map {
    position: relative;
    overflow: hidden;
}
.map-overlay {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(255, 77, 50, 0.9);
    padding: 2px 8px;
    border-radius: 4px;
}
.map-btn {
    color: #fff;
    font-size: 10px;
    font-family: 'liuhuankatongshoushu', sans-serif;
}

/* Countdown Block styling */
.countdown-title {
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: bold;
}
.countdown-timer {
    display: flex;
    gap: 8px;
}
.time-block {
    display: flex;
    align-items: baseline;
    background-color: rgba(255, 77, 50, 0.1);
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px dashed rgba(255, 77, 50, 0.4);
}
.time-block span {
    font-size: 20px;
    font-weight: bold;
}
.time-block .unit {
    font-size: 11px;
    margin-left: 2px;
}

/* Calendar Days styling */
.calendar-weekdays {
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(160, 51, 0, 0.1);
    padding-bottom: 3px;
}
.calendar-weekdays span {
    width: 14%;
    text-align: center;
}
.calendar-days {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    font-size: 12px;
    height: 100%;
}
.calendar-day-cell {
    width: 14.28%;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 4px;
}
.highlight-day {
    background-color: rgba(255, 77, 50, 1);
    color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(255,77,50,0.4);
}
.highlight-day::after {
    content: '🎂';
    position: absolute;
    top: -6px;
    right: -4px;
    font-size: 8px;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background-color: rgba(252, 251, 242, 1);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    width: 280px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border: 3px solid rgba(255, 77, 50, 0.2);
}
.modal-content h3 {
    margin-top: 0;
    color: rgba(255, 77, 50, 1);
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 20px;
}
.modal-content p {
    color: #a03300;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 15px;
    margin: 15px 0 20px 0;
}
.modal-btn {
    background-color: rgba(255, 77, 50, 1);
    color: #fff;
    border: none;
    padding: 8px 30px;
    border-radius: 6px;
    font-family: 'liuhuankatongshoushu', sans-serif;
    font-size: 15px;
    cursor: pointer;
}