body {
    background-color: #eef6fb;
    color: #243746;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

h1 {
    color: #123b5d;
    font-size: 36px;
}

h2 {
    color: #236487;
    font-size: 24px;
    margin-top: 36px;
}

p {
    font-size: 18px;
    line-height: 1.8;
}

.language-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    margin-bottom: 12px;
    border: 1px solid #b7d4e4;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffffff, #dceef7);
    box-shadow: 0 3px 10px rgba(18, 59, 93, 0.12);
}
.address-button {
    margin-top: 24px;
    padding: 12px 20px;
    border: 1px solid #b7d4e4;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffffff, #dceef7);
    color: #234b66;
    box-shadow: 0 3px 10px rgba(18, 59, 93, 0.12);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.address-button:hover {
    background: #d5eaf5;
}

.address-button:focus-visible {
    outline: 3px solid #77bce0;
    outline-offset: 2px;
}

#address-panel textarea,
#address-panel select,
#address-panel input[type="text"],
#address-panel input[type="tel"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    padding: 10px 12px;
    border: 1px solid #b7d4e4;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff, #eef8fc);
    color: #243746;
    font: inherit;
    box-shadow: inset 0 1px 3px rgba(18, 59, 93, 0.06);
}

#address-panel .signup-submit { min-width: 130px; }
#address-panel .signup-submit:disabled { opacity: .65; cursor: wait; }
.signup-status { min-height: 1.5em; margin: 12px 0 4px; color: #16486b; font-size: 15px; }

#address-panel textarea {
    resize: vertical;
}

#address-panel textarea:focus-visible,
#address-panel select:focus-visible,
#address-panel input[type="text"]:focus-visible,
#address-panel input[type="tel"]:focus-visible {
    outline: 3px solid #77bce0;
    outline-offset: 2px;
    border-color: #236487;
}

#address-panel {
    box-sizing: border-box;
    width: min(650px, calc(100% - 32px));
    max-height: 90vh;
    padding: 24px;
    border: 1px solid #b7d4e4;
    border-radius: 18px;
    background: #eef6fb;
    color: #243746;
}

#address-panel::backdrop { background: rgba(18, 40, 58, 0.55); }
#address-panel fieldset { border: 1px solid #b7d4e4; border-radius: 12px; padding: 12px; }
.region-selects { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.region-selects[hidden] { display: none; }
.region-selects label { display: flex; flex-direction: column; flex: 1 1 130px; min-width: 0; gap: 5px; }
#address-panel .region-selects select {
    appearance: none;
    min-height: 44px;
    padding-right: 38px;
    border-color: #9ec8dd;
    background: linear-gradient(45deg, transparent 50%, #397a9b 50%) right 20px center / 6px 6px no-repeat,
                linear-gradient(135deg, #397a9b 50%, transparent 50%) right 14px center / 6px 6px no-repeat,
                linear-gradient(135deg, #ffffff, #e1f2fa);
    box-shadow: 0 3px 8px rgba(35, 100, 135, 0.1);
    cursor: pointer;
}
#address-panel .region-selects select:hover:not(:disabled) {
    border-color: #68a7c5;
    box-shadow: 0 4px 12px rgba(35, 100, 135, 0.18);
}
.region-selects select:disabled { opacity: 0.65; cursor: not-allowed; }
.region-selects select option { background: #f2faff; color: #234b66; }
.region-note { font-size: 14px; }
#postal-help { font-size: 14px; }
.postal-warning { margin: 4px 0 0; color: #a52f41; font-size: 14px; }
.postal-warning:has([hidden]) { display: none; }
.postal-warning-icon {
    background: linear-gradient(135deg, #df334b, #247bb4);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 20px;
    font-weight: bold;
}
.address-preview { white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px; border: 1px solid #b7d4e4; border-radius: 12px; background: #fff; font: inherit; line-height: 1.7; }

.language-switch button {
    border: 0;
    border-radius: 999px;
    padding: 9px 15px;
    background: transparent;
    color: #234b66;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.language-switch button[aria-pressed="true"] {
    background: #16486b;
    color: white;
    box-shadow: 0 2px 6px rgba(18, 59, 93, 0.2);
}

.language-switch button:hover {
    background-color: #d5eaf5;
}

.language-switch button[aria-pressed="true"]:hover {
    background-color: #16486b;
}

.language-switch button:focus-visible {
    outline: 3px solid #77bce0;
    outline-offset: 2px;
}

span[lang="en"], span[lang="fr"] {
    display: none;
}

.snowflake-burst {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    pointer-events: none;
    color: #58a9d2;
    font-size: 22px;
    line-height: 1;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.95);
    animation: snowflake-bloom 850ms ease-out forwards;
}

@keyframes snowflake-bloom {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.25) rotate(0deg); }
    25% { opacity: 1; }
    to {
        opacity: 0;
        transform: translate(calc(-50% + var(--drift-x)), calc(-50% + var(--drift-y))) scale(1.2) rotate(35deg);
    }
}

/* 滚轮向下时，从屏幕顶部飘落的雪花 */
.falling-snowflake {
    position: fixed;
    top: -16px;
    z-index: 998;
    pointer-events: none;
    color: #82b9d4;
    line-height: 1;
    opacity: 0;
    animation: snow-fall var(--duration) ease-in forwards;
}

@keyframes snow-fall {
    0% { opacity: 0; transform: translate(0, 0); }
    15% { opacity: 0.8; }
    75% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(var(--sway), 25vh); }
}

.aurora-burst {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    background: rgba(2, 19, 23, 0.68);
}

.aurora-ribbons {
    position: absolute;
    inset: -6vh 0 auto;
    width: 100%;
    height: 78vh;
    overflow: visible;
    opacity: 0;
    transform-origin: top center;
    mix-blend-mode: screen;
}
.aurora-cloud {
    fill: url(#aurora-depth);
    filter: url(#aurora-soft);
    opacity: .9;
}
.aurora-flow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: url(#aurora-soft);
}
.aurora-flow-wide { stroke: url(#aurora-depth); stroke-width: 142px; opacity: 1; }
.aurora-flow-light { stroke: url(#aurora-light); stroke-width: 68px; filter: url(#aurora-glow); opacity: .96; }
.aurora-flow-deep { stroke: url(#aurora-forest); stroke-width: 122px; opacity: .85; }
.aurora-accent {
    fill: none;
    stroke: url(#aurora-violet);
    stroke-width: 72px;
    stroke-linecap: round;
    filter: url(#aurora-soft);
    opacity: .65;
}
.aurora-star {
    position: absolute;
    left: var(--x);
    top: var(--y);
    color: #e1fff0;
    font-size: var(--size);
    line-height: 1;
    opacity: 0;
    text-shadow: 0 0 .25em #fff, 0 0 .8em #81ffc3, 0 0 1.6em #2ab977;
    transform: translate(-50%, -50%) scale(.45);
}
.aurora-star::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4em;
    height: 4em;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(101, 255, 178, .28), transparent 68%);
    transform: translate(-50%, -50%);
}

.aurora-burst.is-active {
    animation: night-flash 1s linear forwards;
}

.aurora-burst.is-active .aurora-ribbons {
    animation: aurora-drape 1s ease-out forwards;
}
.aurora-burst.is-active .aurora-star {
    animation: aurora-star-glint 850ms ease-in-out var(--delay) forwards;
}

@keyframes night-flash {
    0% { opacity: 0; }
    12%, 82% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes aurora-drape {
    0% { opacity: 0; transform: translateY(-2%) scaleY(.84); }
    22% { opacity: .76; }
    52% { opacity: 1; transform: translateY(0) scaleY(1); }
    78% { opacity: .72; }
    100% { opacity: 0; transform: translateY(3%) scaleY(1.03); }
}
@keyframes aurora-star-glint {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
    38% { opacity: .94; transform: translate(-50%, -50%) scale(1); }
    67% { opacity: .58; transform: translate(-50%, -50%) scale(.8); }
}

.zoomable-image { cursor: zoom-in; max-width: 100%; height: auto; }
.zoomable-image:focus-visible { outline: 3px solid #236487; outline-offset: 4px; }

.image-viewer {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 55px 20px 20px;
    border: 0;
    background: rgba(4, 20, 32, 0.94);
    text-align: center;
}
.image-viewer::backdrop { background: rgba(4, 20, 32, 0.8); }
.image-viewer img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.image-viewer img { cursor: grab; touch-action: none; user-select: none; }
.image-viewer img:active { cursor: grabbing; }
.image-viewer > button {
    position: absolute;
    top: 12px;
    right: 20px;
    border: 0;
    background: transparent;
    color: white;
    font-size: 32px;
    cursor: pointer;
}
.image-zoom-controls {
    position: fixed;
    z-index: 2;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid rgba(185, 216, 232, .7);
    border-radius: 999px;
    background: rgba(232, 245, 251, .94);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .25);
    transform: translateX(-50%);
}
.image-zoom-controls button {
    min-width: 42px;
    min-height: 42px;
    padding: 6px 12px;
    border: 1px solid #b7d4e4;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff, #dceef7);
    color: #234b66;
    font: inherit;
    font-size: 20px;
    cursor: pointer;
    touch-action: manipulation;
}
.image-zoom-controls button:hover { background: #d5eaf5; }

.invite-greeting[hidden] { display: none; }
.invite-greeting {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 35, 54, 0.28);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms ease, visibility 260ms ease;
    pointer-events: none;
}
.invite-greeting.is-visible {
    opacity: 1;
    visibility: visible;
}
.invite-greeting-card {
    min-width: min(280px, 75vw);
    padding: 26px 36px;
    border: 1px solid #b9d8e8;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(226,243,251,.97));
    box-shadow: 0 18px 48px rgba(24, 74, 105, .24), inset 0 1px 0 white;
    color: #244d69;
    text-align: center;
    transform: translateY(8px) scale(.97);
    transition: transform 260ms ease;
}
.invite-greeting.is-visible .invite-greeting-card { transform: translateY(0) scale(1); }
.invite-greeting-flake {
    display: block;
    color: #69a9c8;
    font-size: 30px;
    line-height: 1;
}
.invite-greeting-card p {
    margin: 12px 0 0;
    font-size: 22px;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .snowflake-burst, .aurora-burst.is-active { animation-duration: 1ms; }
    .aurora-burst.is-active .aurora-ribbons { animation-duration: 1ms; }
    .aurora-burst.is-active .aurora-star { animation-duration: 1ms; animation-delay: 0ms; }
    .invite-greeting, .invite-greeting-card { transition-duration: 1ms; }
}