#save-qr-modal.modal-mask {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(12,16,27,.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

#save-qr-modal .modal-dialog {
    max-width: 260px;
}

.wrap-modal {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
}

.wrap-header {
    padding: .8rem 1rem;
    border: 0;
    color: #fff;
    background: linear-gradient(180deg, #ff8a00 0%, #edc8c8 50%, #ffffff 100%);
    display: flex;
    justify-content: space-between;
}

.wrap-header .modal-title {
    font-weight: 700;
    letter-spacing: .2px;
}

.wrap-header .close {
    opacity: .95;
    font: 800 2.5rem/1 "Times New Roman",serif;
}

.wrap-header .close:hover {
    opacity: 1;
}

.wrap-body {
    padding: 1rem 1rem 1rem 1rem;
}

.wrap-footer {
    background: #f7f8fb;
    border: 0;
    padding: .6rem 1rem;
}

.qr-float {
    float: right;
    width: 95px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #e9ecf5;
    box-shadow: 0 8px 24px rgba(20,24,40,.06);
    shape-outside: inset(0 round 12px);
    text-align: center;
}

.qr-img {
    display: block;
    width: 100%;
    border-radius: 2px;
    border: 1px solid #eef0f7;
    background: #fff;
    padding-top: 6px;
}

.qr-caption {
    text-align: center;
    font-size: 12px;
    color: red;
    margin: .25rem .25rem;
}

.btn-soft-primary {
    background: rgba(86,97,255,.12);
    color: red;
    border: 1px solid rgba(86,97,255,.2);
}

.btn-soft-primary:hover {
    background: rgba(86,97,255,.18);
    color: #4350ff;
}

.badge-soft-warning {
    background: rgba(255,193,7,.18);
    color: #9b6b00;
    border: 1px solid rgba(255,193,7,.28);
    padding: .25rem .5rem;
    font-weight: 600;
}

.host-link {
    color: red;
    text-decoration: none;
}

.host-link:hover {
    text-decoration: underline;
    color: #4350ff;
}

.soft-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg,transparent, #939393 10%, #898d91 90%,transparent);
    margin: .75rem 0 .9rem;
}

.wrap-tip {
    font-weight: 600;
}

.wrap-footer {
    padding: 0;
}

#btn-shot {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    font-weight: 600;
    color: #495057;
    background: #eef2f7;
    border-top: 1px solid #e5e9f2;
    border-radius: 0 0 14px 14px;
    transition: background .15s ease, color .15s ease;
    font-size: 16px;
}

#btn-shot:hover {
    background: #e7ebf3;
}

#btn-shot:active {
    background: #dde2ec;
}

/* 只有图片 + 右上角关闭（主色 #ff6b81） */
.adp-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;            /* JS 控制显示 */
    justify-content: center;
    align-items: center;
    background: rgba(12,16,27,.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity .18s ease;
    opacity: 0;
}
.adp-modal-mask.show { display: flex; opacity: 1; }

.adp-modal-dialog {
    max-width: 320px;
    width: calc(100% - 32px);
}

/* 允许关闭按钮外悬（top/right 为负值不被裁剪） */
.adp-modal-content {
    position: relative;
    border: 0;
    border-radius: 14px;
    overflow: visible; /* 原若为 hidden，请改为 visible */
    background: #fff;
    box-shadow: 0 18px 60px -18px rgba(0,0,0,.28);
}

/* 右上角关闭按钮（粉色主色 #ff6b81） */
.adp-close {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 2;

    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;

    /* 柔和粉色系渐变背景 */
    background: linear-gradient(135deg, #ffffff 0%, #ffe8ed 60%, #ffc7d1 100%);
    color: #222;
    font: 800 20px/32px "Times New Roman", serif;
    text-align: center;
    cursor: pointer;

    /* 多层阴影 + 粉色光环（#ff6b81 -> rgba(255,107,129,*)） */
    box-shadow:
            0 10px 24px -12px rgba(0,0,0,.35),
            0 0 0 1px rgba(255,255,255,.88),
            0 0 0 4px rgba(255,107,129,.16),
            inset 0 1px 0 rgba(255,255,255,.6);
    backdrop-filter: saturate(140%) blur(1px);

    transition:
            transform .15s ease,
            opacity .15s ease,
            background .2s ease,
            box-shadow .2s ease,
            filter .2s ease;
}

/* 悬停更明亮，光环加强 */
.adp-close:hover {
    transform: translateY(-1px) scale(1.06);
    background: linear-gradient(135deg, #ffffff 0%, #ffeef2 55%, #ffd3db 100%);
    box-shadow:
            0 14px 30px -12px rgba(0,0,0,.42),
            0 0 0 1px rgba(255,255,255,.92),
            0 0 0 5px rgba(255,107,129,.22),
            inset 0 1px 0 rgba(255,255,255,.75);
}

/* 按下略压低、降低亮度 */
.adp-close:active {
    transform: translateY(0) scale(.95);
    filter: brightness(.96);
    box-shadow:
            0 8px 18px -12px rgba(0,0,0,.3),
            0 0 0 1px rgba(255,255,255,.86),
            0 0 0 3px rgba(255,107,129,.18),
            inset 0 1px 0 rgba(255,255,255,.5);
}

/* 键盘可访问性：焦点环 */
.adp-close:focus-visible {
    outline: none;
    box-shadow:
            0 0 0 2px #fff,
            0 0 0 5px rgba(255,107,129,.35),
            0 10px 24px -12px rgba(0,0,0,.35);
}

.adp-figure { display: block; }
.adp-img {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
}

@media (max-width: 420px) {
    .adp-modal-dialog { max-width: 80vw; }
}

/* 背景幕布 + 橙色蒙版（多层渐变）反馈弹窗 */
:root{
    --tab-active-bg: #ff8a00;
    --tab-active-fg: #ffffff;

    --gb-accent:#ff8a00;            /* 主色（橙） */
    --gb-accent-2:#ffb65c;          /* 渐变尾色（更浅一点的橙） */
    --gb-accent-soft:#fff2e5;       /* 柔和浅底色 */
    --gb-text:#1f2731;
    --gb-muted:#6b7785;
    --gb-border:rgba(0,0,0,.08);
}
.modal-backdrops.show{
    background:
            radial-gradient(1200px 420px at 85% -10%, rgba(255,138,0,.12), transparent 60%),
            radial-gradient(1100px 480px at -10% 100%, rgba(255,138,0,.12), transparent 62%),
            rgba(15,18,27,.72);
    -webkit-backdrop-filter: saturate(140%) blur(2.5px);
    backdrop-filter: saturate(140%) blur(2.5px);
}

/* 居中对话框小提升动效 */
.modal-backdrops.show .modal-dialog{
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
    transform: translateY(0) scale(1);
}
.modal-backdrops.fade .modal-dialog{
    transform: translateY(14px) scale(.98);
}

/* 容器（你的 modal-content 上有 vip-qiupian 类） */
.vip-qiupian.modal-content{
    position: relative;            /* 供关闭按钮相对定位 */
    border: none;
    border-radius: 16px;
    overflow: visible;             /* 允许外悬浮关闭按钮不被裁剪 */
    background: #fff;
    box-shadow:
            0 18px 60px -18px rgba(0,0,0,.28),
            0 8px 24px -12px rgba(0,0,0,.18);
}

/* 内部高光描边（质感） */
.vip-qiupian.modal-content::before{
    content:"";
    position:absolute; inset:0;
    border-radius: 16px;
    pointer-events:none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
}

/* 内容层橙色“蒙版”罩层（极浅，提升层次感） */
.vip-qiupian.modal-content::after{
    content:"";
    position:absolute; inset:0;
    border-radius: 16px;
    pointer-events:none;
    background:
            linear-gradient(180deg, rgba(255,138,0,.06), transparent 35%, rgba(255,138,0,.04) 85%);
}

/* 顶部标题栏：橙色渐变 + 细描边 */
.vip-qiupian .modal-header{
    position: relative;
    background: linear-gradient(135deg, var(--gb-accent), var(--gb-accent-2));
    color:#fff;
    border:0;
    padding:.85rem 1rem;
}
.vip-qiupian .modal-title{
    font-weight:700; letter-spacing:.2px; margin:0;
}

/* 关闭按钮（兼容 Bootstrap4 .close 与 Bootstrap5 .btn-close）
   - 相对整个 modal-content 悬浮在右上角
   - 橙色光环 + 多层阴影 + 渐变底
*/
.vip-qiupian .modal-header .close,
.vip-qiupian .modal-header .btn-close{
    position: absolute;
    top: -14px;                   /* 悬浮到容器外边缘 */
    right: -14px;
    z-index: 2;

    width: 36px;
    height: 36px;
    padding:0;
    border: none;
    border-radius: 50%;

    background: linear-gradient(135deg, #ffffff 0%, #fff0e3 58%, #ffd7ac 100%);
    color:#222;
    opacity: 1;                   /* 覆盖 Bootstrap 默认透明 */
    text-shadow: none;

    /* × 的字体（BS4 的 .close） */
    font: 800 22px/36px "Times New Roman", serif;

    cursor: pointer;

    /* 多层阴影 + 主色光环（#ff8a00） */
    box-shadow:
            0 12px 28px -14px rgba(0,0,0,.45),
            0 0 0 1px rgba(255,255,255,.92),
            0 0 0 6px rgba(255,138,0,.22),
            inset 0 1px 0 rgba(255,255,255,.65);
    -webkit-backdrop-filter: saturate(140%) blur(1px);
    backdrop-filter: saturate(140%) blur(1px);

    transition:
            transform .16s ease,
            background .2s ease,
            box-shadow .2s ease,
            filter .2s ease;
}

/* BS5 的 .btn-close 使用圆形底色替代默认 SVG */
.vip-qiupian .modal-header .btn-close{
    background-image: none;
}
.vip-qiupian .modal-header .btn-close::after{
    content:"×";
    display:block; text-align:center; color:#222; font: 800 22px/36px "Times New Roman", serif;
}

.vip-qiupian .modal-header .close:hover,
.vip-qiupian .modal-header .btn-close:hover{
    transform: translateY(-1px) scale(1.06);
    background: linear-gradient(135deg, #ffffff 0%, #fff6eb 55%, #ffe0b9 100%);
    box-shadow:
            0 16px 34px -14px rgba(0,0,0,.5),
            0 0 0 1px rgba(255,255,255,.95),
            0 0 0 7px rgba(255,138,0,.26),
            inset 0 1px 0 rgba(255,255,255,.78);
}
.vip-qiupian .modal-header .close:active,
.vip-qiupian .modal-header .btn-close:active{
    transform: translateY(0) scale(.95);
    filter: brightness(.97);
    box-shadow:
            0 10px 22px -14px rgba(0,0,0,.38),
            0 0 0 1px rgba(255,255,255,.88),
            0 0 0 5px rgba(255,138,0,.22),
            inset 0 1px 0 rgba(255,255,255,.55);
}
.vip-qiupian .modal-header .close:focus-visible,
.vip-qiupian .modal-header .btn-close:focus-visible{
    outline:none;
    box-shadow:
            0 0 0 2px #fff,
            0 0 0 6px rgba(255,138,0,.36),
            0 12px 28px -14px rgba(0,0,0,.42);
}

/* 内容区排版与留白 */
.vip-qiupian .modal-body{
    padding: 1rem 1rem 1rem 1rem;
}

/* 信息块优化（替代原先显示不合理的 qiupian-dec）
   - 桌面端把 <br> 隐藏为一段；移动端再允许换行
*/
.qiupian-dec{
    position: relative;
    display:flex;
    align-items:flex-start;
    gap:.6rem;

    color:#2e3a4a;
    background: linear-gradient(180deg, #fff 0%, #fff 40%, #fff7ee 100%);
    border:1px solid rgba(255,138,0,.28);
    border-radius: 12px;
    padding: .75rem .9rem;

    box-shadow:
            0 10px 26px -18px rgba(255,138,0,.45),
            0 6px 18px -14px rgba(0,0,0,.12);
}
.qiupian-dec::before{
    content:"!";                   /* 小图标 */
    flex:0 0 auto;
    width:22px; height:22px;
    border-radius:50%;
    background: linear-gradient(135deg, var(--gb-accent), var(--gb-accent-2));
    color:#fff;
    font: 800 14px/22px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
    text-align:center;
    box-shadow: 0 6px 16px -8px rgba(255,138,0,.6), inset 0 1px 0 rgba(255,255,255,.6);
    margin-top: 2px;
}
.qiupian-dec br{ display:none; }
@media (max-width: 520px){
    .qiupian-dec br{ display: inline; }
}

/* 表单控件统一风格 */
.gbook_form .form-control{
    border:1px solid #e5e9f2;
    border-radius: 10px;
    box-shadow: none;
    color: var(--gb-text);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.gbook_form .form-control:focus{
    border-color: var(--gb-accent);
    box-shadow: 0 0 0 3px rgba(255,138,0,.18);
}
.gbook_form textarea.form-control{
    min-height: 120px;
    resize: vertical;
}

/* 验证码行 */
.msg_code{
    display:flex; align-items:center;  color:var(--gb-muted);
}
.msg_code .form-control{
    width:120px; padding:.4rem .6rem;
}

/* 剩余字数 */
.remaining-w{
    font-size:.875rem; color:var(--gb-muted);
}
.remaining-w .remaining{
    display:inline-flex; align-items:center; justify-content:center;
    min-width: 2.2em; height: 1.8em; padding: 0 .5em;
    margin-left:.25rem;
    background: var(--gb-accent-soft);
    color: var(--gb-accent);
    border:1px solid rgba(255,138,0,.32);
    border-radius: 999px;
    font-weight:700;
    box-shadow: 0 4px 10px -8px rgba(255,138,0,.5);
}
.remaining-w.limit-hit .remaining{
    background: #ffefe9; color:#d84b00; border-color: rgba(216,75,0,.32);
}

/* 提交按钮（主色） */
.vipqp_btn.gbook_submit{
    border-radius: 12px; border:1px solid rgba(0,0,0,.04);
    background: linear-gradient(135deg, var(--gb-accent), var(--gb-accent-2));
    color:#fff; font-weight:700; letter-spacing:.3px;
    box-shadow: 0 12px 28px -14px rgba(255,138,0,.65);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, filter .2s;
    width: 80%;
}
.vipqp_btn.gbook_submit:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -14px rgba(255,138,0,.75);
}
.vipqp_btn.gbook_submit:active{
    transform: translateY(0) scale(.97);
    filter: brightness(.98);
}

/* 底部提示 */
.vip-qiupian .modal-footer{
    border:0;
    background: #fafbfe;
    color: var(--gb-muted);
    padding:.7rem 1rem;
}

/* 校验样式（可选触发 .is-invalid/.is-valid） */
.gbook_form .form-control.is-invalid{
    border-color:#e24848;
    box-shadow: 0 0 0 3px rgba(226,72,72,.18);
}
.gbook_form .form-control.is-valid{
    border-color:#3fc380;
    box-shadow: 0 0 0 3px rgba(63,195,128,.18);
}



/* 移动端细节 */
@media (max-width: 420px){
    .vip-qiupian .modal-body{ padding: .9rem .85rem; }
    .vipqp_btn.gbook_submit{ width:100%; }
}

/* 呼吸动画 */
@keyframes breathe {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}