.overlay {
                position: absolute;
                inset: 0;
                z-index: 20;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 18px;
                background:
                    radial-gradient(
                        circle at 50% 18%,
                        rgba(255, 255, 255, 0.62),
                        rgba(252, 244, 232, 0.52) 42%,
                        rgba(215, 198, 174, 0.62) 100%
                    ),
                    linear-gradient(
                        135deg,
                        rgba(255, 255, 255, 0.28),
                        rgba(255, 255, 255, 0.05)
                    );
                backdrop-filter: blur(20px) saturate(1.28) brightness(1.03);
                -webkit-backdrop-filter: blur(20px) saturate(1.28)
                    brightness(1.03);
            }
            .pillRow {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 8px;
                margin: 10px 0 16px;
            }
            .pill {
                padding: 6px 10px;
                border-radius: 999px;
                background: rgba(255, 214, 84, 0.48);
                font-weight: 900;
                font-size: 13px;
            }
            .pressureBox {
                margin: 2px auto 18px;
                width: min(520px, 88%);
                font-weight: 1000;
                color: #36536b;
            }
            .pressureBar {
                height: 18px;
                margin: 8px 0 6px;
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.68);
                box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.12);
                overflow: hidden;
            }
            .pressureFill {
                width: 0%;
                height: 100%;
                border-radius: inherit;
                background: linear-gradient(90deg, #78e3bc, #ffe66b, #ff7b98);
            }
            .pressureRemain {
                font-size: 13px;
                color: #654d3d;
            }

            .agreementOverlay {
                z-index: 32;
                background:
                    radial-gradient(
                        circle at 50% 22%,
                        rgba(255, 255, 255, 0.66),
                        rgba(250, 243, 233, 0.54) 40%,
                        rgba(207, 190, 166, 0.66) 100%
                    ),
                    linear-gradient(
                        135deg,
                        rgba(255, 255, 255, 0.3),
                        rgba(255, 255, 255, 0.04)
                    );
                backdrop-filter: blur(22px) saturate(1.35) brightness(1.04);
                -webkit-backdrop-filter: blur(22px) saturate(1.35)
                    brightness(1.04);
                touch-action: auto;
                user-select: none;
            }
            .detentionCard {
                position: relative;
                width: min(760px, 94vw);
                max-height: 92vh;
                overflow-y: auto;
                scrollbar-width: thin;
                scrollbar-color: rgba(80,100,120,0.36) transparent;
                padding: clamp(14px, 2vw, 22px);
                border-radius: 32px;
                background:
                    linear-gradient(
                        150deg,
                        rgba(255, 255, 255, 0.72),
                        rgba(244, 248, 250, 0.48)
                    ),
                    linear-gradient(
                        320deg,
                        rgba(255, 255, 255, 0.34),
                        rgba(255, 255, 255, 0.06)
                    );
                box-shadow:
                    0 38px 104px rgba(25, 35, 47, 0.44),
                    0 16px 44px rgba(255, 255, 255, 0.5) inset,
                    0 -16px 36px rgba(82, 113, 145, 0.18) inset,
                    0 0 0 1.5px rgba(255, 255, 255, 0.76) inset,
                    0 0 0 4px rgba(47, 59, 72, 0.12);
                border: 3px solid rgba(54, 67, 80, 0.34);
                outline: 1px solid rgba(255, 255, 255, 0.6);
                outline-offset: -8px;
                backdrop-filter: blur(36px) saturate(1.5) brightness(1.06);
                -webkit-backdrop-filter: blur(36px) saturate(1.5)
                    brightness(1.06);
                text-align: left;
            }
            .detentionCard::before {
                content: "";
                position: absolute;
                left: 22px;
                right: 22px;
                top: 14px;
                height: 26%;
                border-radius: 28px;
                background: linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.5),
                    rgba(255, 255, 255, 0)
                );
                pointer-events: none;
                mix-blend-mode: screen;
            }
            .detentionCard::-webkit-scrollbar {
                width: 6px;
            }
            .detentionCard::-webkit-scrollbar-track {
                background: transparent;
            }
            .detentionCard::-webkit-scrollbar-thumb {
                background: rgba(80, 100, 120, 0.36);
                border-radius: 999px;
            }
            .detentionCard::-webkit-scrollbar-thumb:hover {
                background: rgba(80, 100, 120, 0.55);
            }
            .detentionTitle {
                margin: 0 0 4px;
                font-size: clamp(22px, 3.6vw, 36px);
                line-height: 1.08;
                color: #42505c;
                text-align: center;
                text-shadow: 0 2px 0 rgba(255, 255, 255, 0.85);
            }
            .detentionSub {
                margin: 0 0 12px;
                text-align: center;
                font-size: clamp(12px, 1.7vw, 15px);
                font-weight: 900;
                color: #64788c;
            }
            .agreementScroll {
                height: min(48vh, 330px);
                overflow-y: auto;
                overscroll-behavior: contain;
                touch-action: pan-y;
                padding: 12px 14px;
                border-radius: 22px;
                background: linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.62),
                    rgba(241, 247, 252, 0.42)
                );
                border: 2.5px solid rgba(67, 84, 101, 0.32);
                box-shadow:
                    inset 0 6px 24px rgba(38, 58, 78, 0.18),
                    inset 0 1px 0 rgba(255, 255, 255, 0.94),
                    0 10px 26px rgba(36, 56, 76, 0.1);
                backdrop-filter: blur(24px) saturate(1.32);
                -webkit-backdrop-filter: blur(24px) saturate(1.32);
                font-size: 13px;
                line-height: 1.65;
                color: #405366;
                scrollbar-width: thin;
                scrollbar-color: rgba(80, 100, 120, 0.36) transparent;
            }
            .agreementScroll::-webkit-scrollbar {
                width: 6px;
            }
            .agreementScroll::-webkit-scrollbar-track {
                background: transparent;
            }
            .agreementScroll::-webkit-scrollbar-thumb {
                background: rgba(80, 100, 120, 0.36);
                border-radius: 999px;
            }
            .agreementScroll::-webkit-scrollbar-thumb:hover {
                background: rgba(80, 100, 120, 0.55);
            }
            /* 非协议卡片：去掉内框，直接显示内容 */
            .agreementScroll.simple {
                height: auto;
                max-height: none;
                overflow-y: auto;
                padding: 0;
                border-radius: 0;
                background: transparent;
                border: none;
                box-shadow: none;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
            .agreementScroll.simple .agreementBottom {
                display: none;
            }
            .agreementScroll.simple .taskBox {
                margin: 0;
                padding: 0;
                border-radius: 0;
                background: transparent;
                border: none;
                box-shadow: none;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
            .agreementScroll.simple .popupField {
                background: transparent;
                border: none;
                box-shadow: none;
            }
            .agreementScroll.simple .rejectField {
                background: transparent;
                border: none;
                box-shadow: none;
            }
            .agreementArticle p {
                margin: 0 0 14px;
            }
            .imageCaptchaGrid {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 10px;
                margin: 12px 0;
            }
            .imageCaptchaTile {
                min-height: 76px;
                border: 2px solid rgba(67, 84, 101, 0.26);
                border-radius: 18px;
                background: rgba(255, 255, 255, 0.68);
                color: #405366;
                font-weight: 1000;
                box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.86);
            }
            .imageCaptchaTile.selected {
                border-color: rgba(255, 91, 127, 0.78);
                background: linear-gradient(180deg, #fff2a8, #ffd0dc);
                color: #273849;
            }
            .imageCaptchaIcon {
                font-size: 28px;
                line-height: 1.05;
            }
            .imageCaptchaLabel {
                margin-top: 4px;
                font-size: 12px;
            }
            .captchaError,
            .textCaptchaError {
                min-height: 24px;
                margin: 6px 0;
                color: #e33f67;
                font-weight: 1000;
                text-align: center;
            }
            .textCaptchaCode {
                width: fit-content;
                margin: 8px auto 14px;
                padding: 12px 22px;
                border-radius: 18px;
                background: linear-gradient(135deg, #fff2a8, #d9f0ff);
                border: 2px dashed rgba(67, 84, 101, 0.34);
                color: #273849;
                font-size: 34px;
                font-weight: 1000;
                letter-spacing: 6px;
                user-select: text;
            }
            .textCaptchaInput {
                display: block;
                width: min(320px, 90%);
                margin: 0 auto;
                padding: 12px 14px;
                border: 2px solid rgba(67, 84, 101, 0.34);
                border-radius: 16px;
                background: rgba(255, 255, 255, 0.82);
                color: #273849;
                font-size: 22px;
                font-weight: 900;
                text-align: center;
                letter-spacing: 4px;
            }
            .shareButton {
                display: block;
                margin: 10px auto 0;
            }
            .sharePosterFallback {
                position: absolute;
                inset: 0;
                z-index: 3;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 18px;
                background: rgba(36, 45, 55, 0.42);
            }
            .sharePosterPanel {
                width: min(360px, 88vw);
                max-height: 88vh;
                padding: 14px;
                border-radius: 22px;
                background: rgba(255, 255, 255, 0.94);
                text-align: center;
                box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
                overflow: auto;
            }
            .sharePosterPanel img {
                width: min(260px, 70vw);
                border-radius: 14px;
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
            }
            @media (orientation: landscape) and (max-height: 430px) {
                .overlay {
                    padding: max(6px, env(safe-area-inset-top))
                        max(8px, env(safe-area-inset-right))
                        max(6px, env(safe-area-inset-bottom))
                        max(8px, env(safe-area-inset-left));
                }
                .card {
                    max-height: calc(100dvh - 16px);
                    padding: 12px;
                }
                .pillRow {
                    gap: 6px;
                    margin: 6px 0 8px;
                }
                .pressureBox {
                    margin-bottom: 10px;
                }
                .agreementOverlay {
                    align-items: center;
                }
                .detentionCard {
                    width: min(760px, 96vw);
                    max-height: calc(100dvh - 12px);
                    overflow-y: auto;
                    padding: 10px 12px;
                    border-radius: 24px;
                }
                .detentionTitle {
                    font-size: clamp(18px, 6vh, 28px);
                }
                .detentionSub {
                    margin-bottom: 8px;
                    font-size: clamp(11px, 3.4vh, 13px);
                }
                .agreementScroll {
                    height: auto;
                    max-height: calc(100dvh - 138px);
                    padding: 9px 10px;
                }
                .agreementScroll.simple {
                    max-height: none;
                }
                .agreementBottom {
                    min-height: 250px;
                    padding-top: 150px;
                }
                .taskBox {
                    margin: 6px 0;
                    padding: 9px;
                }
                .popupField,
                .rejectField {
                    min-height: 220px;
                    height: 220px;
                }
                .agreementScroll.simple .popupField {
                    min-height: auto;
                    height: auto;
                }
                .agreementScroll.simple .rejectField {
                    min-height: auto;
                    height: auto;
                }
                .imageCaptchaGrid {
                    gap: 7px;
                    margin: 8px 0;
                }
                .imageCaptchaTile {
                    min-height: 58px;
                }
                .imageCaptchaIcon {
                    font-size: 22px;
                }
                .textCaptchaCode {
                    margin-bottom: 10px;
                    padding: 8px 16px;
                    font-size: 26px;
                }
                .textCaptchaInput {
                    padding: 9px 12px;
                    font-size: 18px;
                }
            }
            .errorBox {
                position: fixed;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 100;
                display: none;
                width: min(420px, 86vw);
                padding: 18px 22px;
                border-radius: 22px;
                background: rgba(255, 255, 255, 0.95);
                color: #e33f67;
                font-weight: 1000;
                text-align: center;
                box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
            }
            @media (max-height: 420px) {
                .rules {
                    grid-template-columns: repeat(4, minmax(0, 1fr));
                }
                .rule {
                    padding: 9px;
                    font-size: 12px;
                }
                .card {
                    max-height: 94vh;
                    padding: 16px;
                }
                .pillRow {
                    margin: 6px 0 10px;
                }
            }