/* ============================================================
 * 我的页 (个人中心) — V8.5 盒马清新型 · 克制庄重 / 单色品牌
 * 设计依据：UI_设计师 / UI-UX-Pro-Max / 知识库提示词
 * 风格：对标美团/京东「我的」——单色品牌青、轻量容器、不花哨、长者友好
 * 全程仅用 --v85-* 令牌，零硬编码色；触控≥44px；WCAG AA
 * ============================================================ */

.hd-my-main {
    width: 100%;
    margin: 0 auto;
    /* body.v85-my 已带 --v85-page-bottom + 额外呼吸间距（安全区+导航高+0.75rem），
       此处只补常规内容呼吸间距，避免双倍留白；同时用 min-height 保证短内容页也不塌陷 */
    padding: 0 var(--v85-space-md) var(--v85-space-xl);
    box-sizing: border-box;
}

/* ---------- 统一图标（美团/京东式：无色块底，纯图标本体） ---------- */
.hd-my-ic {
    width: var(--v85-icon-size);
    height: var(--v85-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--v85-icon-font);
    line-height: 1;
    flex-shrink: 0;
    background: transparent;              /* 不用四方彩色按键 */
    color: var(--v85-primary);            /* 品牌单色，庄重不花哨 */
    transition: transform var(--v85-duration-fast) var(--v85-ease-out),
                color var(--v85-duration-fast) var(--v85-ease-out);
}
.hd-my-ic i { line-height: 1; }

/* 公益红分：唯一保留的语义色（差异性卖点） */
.hd-my-ic--charity { color: var(--v85-charity); }

/* ---------- 顶部用户区 ---------- */
.hd-my-header {
    background: var(--v85-gradient-my-header);
    padding: calc(var(--v85-safe-top) + 0.75rem) var(--v85-space-md) 3.5rem;
    position: relative;
    overflow: hidden;
}
.hd-my-header::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 2.25rem;
    background: linear-gradient(to top, var(--v85-bg-page), transparent);
    pointer-events: none;
}
.hd-my-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: var(--v85-z-base);
}
.hd-my-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--v85-font-heading);
    font-weight: var(--v85-weight-bold);
    font-size: var(--v85-text-sm);
    color: var(--v85-primary-dark);
    text-decoration: none;
}
.hd-my-brand i { font-size: var(--font-size-md); }
.hd-my-top-actions { display: flex; gap: var(--v85-space-sm); }
.hd-my-icon-btn {
    width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--v85-radius-full);
    background: var(--v85-bg-card);
    color: var(--v85-primary-dark);
    font-size: var(--v85-text-lg);
    text-decoration: none;
    box-shadow: var(--v85-shadow-sm);
    cursor: pointer;
    transition: transform var(--v85-duration-fast) var(--v85-ease-out), box-shadow var(--v85-duration-fast) var(--v85-ease-out);
}
.hd-my-icon-btn:hover { transform: translateY(-0.125rem); box-shadow: var(--v85-shadow-md); }

.hd-my-user {
    display: flex;
    align-items: center;
    gap: var(--v85-space-md);
    margin-top: var(--v85-space-lg);
    position: relative;
    z-index: var(--v85-z-base);
}
.hd-my-avatar {
    position: relative;
    width: 4rem; height: 4rem;
    border-radius: var(--v85-radius-full);
    border: 3px solid var(--v85-bg-card);
    background: var(--v85-bg-soft);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
    box-shadow: var(--v85-shadow-md);
}
.hd-my-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-my-avatar img.is-hidden { display: none !important; }
/* 默认头像：内联 SVG，不依赖外部文件；颜色走 V8.5 token，用户可上传本地图替换 */
.hd-my-avatar-ph {
    width: 100%; height: 100%;
    display: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--v85-charity);
}
.hd-my-avatar-ph.is-visible { display: block !important; }
.hd-my-avatar-ph svg { width: 100%; height: 100%; display: block; }
.hd-my-avatar-edit {
    position: absolute;
    right: -0.125rem; bottom: -0.125rem;
    width: 1.35rem; height: 1.35rem;
    border-radius: var(--v85-radius-full);
    background: var(--v85-primary);
    color: var(--v85-bg-card);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-size-xs);
    border: 2px solid var(--v85-bg-card);
    box-shadow: var(--v85-shadow-sm);
}
.hd-my-user-main { min-width: 0; flex: 1; }
.hd-my-name {
    font-family: var(--v85-font-heading);
    font-size: var(--v85-text-2xl);
    font-weight: var(--v85-weight-bold);
    color: var(--v85-text-primary);
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-my-sub {
    display: flex; align-items: center; gap: var(--v85-space-sm);
    margin-top: 0.25rem; flex-wrap: wrap;
}
.hd-my-phone {
    font-size: var(--v85-text-xs);
    color: var(--v85-text-secondary);
}
.hd-my-level {
    font-size: var(--font-size-xs);
    font-weight: var(--v85-weight-bold);
    color: var(--v85-primary-dark);
    background: var(--v85-bg-card);
    padding: 0.125rem 0.5rem;
    border-radius: var(--v85-radius-pill);
}
.hd-my-edit {
    display: inline-flex; align-items: center; gap: 0.125rem;
    margin-top: 0.375rem;
    font-size: var(--v85-text-xs);
    color: var(--v85-primary-dark);
    text-decoration: none;
    font-weight: var(--v85-weight-medium);
    cursor: pointer;
}
.hd-my-edit i { font-size: var(--font-size-sm); }

/* 红分会员条（金色，庄重） */
.hd-my-member {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: var(--v85-space-md);
    padding: 0.5rem 0.875rem;
    background: var(--v85-gradient-gold);
    border-radius: var(--v85-radius-pill);
    text-decoration: none;
    box-shadow: var(--v85-shadow-sm);
    position: relative; z-index: var(--v85-z-base);
    cursor: pointer;
    transition: transform var(--v85-duration-fast) var(--v85-ease-out), box-shadow var(--v85-duration-fast) var(--v85-ease-out);
}
.hd-my-member:hover { transform: translateY(-0.125rem); box-shadow: var(--v85-shadow-md); }
.hd-my-member-crown { color: var(--v85-gold-ink-soft); font-size: var(--font-size-md); }
.hd-my-member-name {
    font-weight: var(--v85-weight-bold);
    font-size: var(--v85-text-sm);
    color: var(--v85-gold-ink);
}
.hd-my-member-tip {
    flex: 1; min-width: 0;
    font-size: var(--v85-text-xs);
    color: var(--v85-gold-ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-my-member-tip b { font-weight: var(--v85-weight-bold); }
.hd-my-member-arrow { color: var(--v85-gold-ink); font-size: var(--font-size-md); }

/* ---------- 我的资产 ---------- */
.hd-my-assets {
    position: relative;
    margin-top: -2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.625rem;
    z-index: var(--v85-z-card);
}
.hd-my-asset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 0.25rem;
    background: var(--v85-bg-card);
    border-radius: var(--v85-radius-2xl);
    box-shadow: var(--v85-shadow-md);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--v85-duration-fast) var(--v85-ease-out), box-shadow var(--v85-duration-fast) var(--v85-ease-out);
}
.hd-my-asset:hover { transform: translateY(-0.1875rem); box-shadow: var(--v85-shadow-lg); }
.hd-my-asset:hover .hd-my-ic { transform: scale(1.06); }
.hd-my-asset-val {
    font-family: var(--v85-font-heading);
    font-size: var(--v85-text-lg);
    font-weight: var(--v85-weight-bold);
    color: var(--v85-text-primary);
    line-height: 1.1;
    margin-top: 0.125rem;
}
.hd-my-asset-lb {
    font-size: var(--v85-text-xs);
    color: var(--v85-text-secondary);
    font-weight: var(--v85-weight-medium);
}
.hd-my-asset-hint {
    font-size: var(--font-size-xs);
    color: var(--v85-text-quaternary);
}

/* ---------- 通用区块 ---------- */
.hd-my-block {
    background: var(--v85-bg-card);
    border-radius: var(--v85-radius-2xl);
    box-shadow: var(--v85-shadow-sm);
    padding: var(--v85-space-lg) var(--v85-space-md);
    margin-top: var(--v85-space-lg);
}
.hd-my-block--plain { padding: 0; overflow: hidden; }
.hd-my-block-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--v85-space-md);
}
.hd-my-block-title {
    position: relative;
    padding-left: 0.625rem;
    font-family: var(--v85-font-heading);
    font-size: var(--v85-text-base);
    font-weight: var(--v85-weight-bold);
    color: var(--v85-text-primary);
}
.hd-my-block-title::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 0.1875rem; height: 0.875rem;
    border-radius: var(--v85-radius-pill);
    background: var(--v85-primary);
}
.hd-my-block-more {
    display: inline-flex; align-items: center; gap: 0.125rem;
    font-size: var(--v85-text-xs);
    color: var(--v85-text-tertiary);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--v85-duration-fast) var(--v85-ease-out);
}
.hd-my-block-more:hover { color: var(--v85-primary); }

/* 订单行 */
.hd-my-order-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--v85-space-xs);
}
.hd-my-order {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: var(--v85-space-sm) var(--v85-space-xs);
    border-radius: var(--v85-radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--v85-duration-fast) var(--v85-ease-out);
}
.hd-my-order:hover { background: var(--v85-primary-50); }
.hd-my-order:hover .hd-my-ic { transform: translateY(-0.125rem); }
.hd-my-order-lb {
    font-size: var(--font-size-sm);   /* 14px，长者友好 */
    color: var(--v85-text-secondary);
    font-weight: var(--v85-weight-medium);
    text-align: center;
    line-height: 1.25;
}
@media (max-width: 359px) {
    .hd-my-order-lb { font-size: var(--font-size-xs); }
}
.hd-my-badge {
    position: absolute;
    top: -0.35rem; right: -0.4rem;
    min-width: 1rem; height: 1rem;
    padding: 0 0.22rem;
    background: var(--v85-charity);
    color: var(--v85-bg-card);
    font-size: var(--font-size-xs); font-weight: var(--v85-weight-bold);
    border-radius: var(--v85-radius-pill);
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    border: 1.5px solid var(--v85-bg-card);
    box-shadow: var(--v85-shadow-sm);
}

/* 金刚区网格：固定 5 列，10 个服务正好 2 行 5 列 */
.hd-my-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--v85-space-md) var(--v85-space-xs);
}
.hd-my-tool {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 0.5rem;
    min-height: 4.5rem;
    padding: var(--v85-space-sm) 0.125rem;
    border-radius: var(--v85-radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--v85-duration-fast) var(--v85-ease-out);
}
.hd-my-tool:hover { background: var(--v85-primary-50); }
.hd-my-tool:hover .hd-my-ic { transform: translateY(-0.1875rem); }
.hd-my-tool-lb {
    font-size: var(--font-size-sm);   /* 14px，长者友好 */
    font-weight: var(--v85-weight-medium);
    color: var(--v85-text-primary);
    text-align: center;
    line-height: 1.25;
}
/* 极窄屏（<360px）标签自动缩小，避免换行溢出，但仍保持 5 列 */
@media (max-width: 359px) {
    .hd-my-tool-lb { font-size: var(--font-size-xs); }
    .hd-my-grid { gap: var(--v85-space-sm) 0.125rem; }
}

/* ---------- 弘度特色：公益红分（唯一保留语义红） ---------- */
.hd-my-charity {
    margin-top: var(--v85-space-lg);
    background: var(--v85-charity-light);
    border: 1px solid var(--v85-charity-border);
    border-radius: var(--v85-radius-2xl);
    padding: var(--v85-space-md);
    box-shadow: var(--v85-shadow-sm);
}
.hd-my-charity-head {
    display: flex; align-items: center; gap: var(--v85-space-sm);
}
.hd-my-charity-badge {
    width: 2.25rem; height: 2.25rem;
    border-radius: var(--v85-radius-full);
    background: var(--v85-gradient-charity-banner);
    color: var(--v85-bg-card);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-size-md);
    box-shadow: var(--v85-shadow-charity);
    flex-shrink: 0;
}
.hd-my-charity-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hd-my-charity-title {
    font-family: var(--v85-font-heading);
    font-size: var(--v85-text-base);
    font-weight: var(--v85-weight-bold);
    color: var(--v85-charity-dark);
}
.hd-my-charity-sub {
    font-size: var(--v85-text-xs);
    color: var(--v85-charity-dark);
    opacity: 0.9;
    margin-top: 0.125rem;
}
.hd-my-charity-more {
    display: inline-flex; align-items: center;
    font-size: var(--v85-text-xs);
    color: var(--v85-charity-dark);
    text-decoration: none;
    font-weight: var(--v85-weight-medium);
    cursor: pointer;
}
.hd-my-charity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--v85-space-sm);
    margin-top: var(--v85-space-md);
}
.hd-my-charity-cell {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: var(--v85-space-md) var(--v85-space-xs);
    background: var(--v85-bg-card);
    border-radius: var(--v85-radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--v85-duration-fast) var(--v85-ease-out), box-shadow var(--v85-duration-fast) var(--v85-ease-out);
    box-shadow: var(--v85-shadow-sm);
}
.hd-my-charity-cell:hover { transform: translateY(-0.125rem); box-shadow: var(--v85-shadow-md); }
.hd-my-charity-cell span {
    font-size: var(--v85-text-xs);
    font-weight: var(--v85-weight-medium);
    color: var(--v85-text-primary);
}
.hd-my-charity-new {
    position: absolute; top: 0.4rem; right: 0.4rem;
    background: var(--v85-cta); color: var(--v85-bg-card);
    font-size: var(--font-size-xs); font-style: normal; font-weight: var(--v85-weight-bold);
    padding: 0 0.3rem; border-radius: var(--v85-radius-pill);
}

/* ---------- 更多功能行 ---------- */
.hd-my-row {
    display: flex; align-items: center; gap: var(--v85-space-md);
    padding: var(--v85-space-md);
    background: var(--v85-bg-card);
    text-decoration: none;
    min-height: 3.25rem;
    cursor: pointer;
    transition: background var(--v85-duration-fast) var(--v85-ease-out);
    border-bottom: 1px solid var(--v85-border-color);
}
.hd-my-row:last-child { border-bottom: none; }
.hd-my-row:hover { background: var(--v85-primary-50); }
.hd-my-row-ic {
    width: 2.25rem !important; height: 2.25rem !important;
    font-size: var(--font-size-md) !important;
    border-radius: var(--v85-radius-md) !important;
}
.hd-my-row-lb {
    flex: 1;
    font-size: var(--v85-text-sm);
    font-weight: var(--v85-weight-medium);
    color: var(--v85-text-primary);
}
.hd-my-row-arrow { color: var(--v85-text-placeholder); font-size: var(--v85-text-sm); }

/* ---------- 账号操作 ---------- */
.hd-my-footer {
    display: flex;
    gap: var(--v85-space-sm);
    margin-top: var(--v85-space-lg);
    padding: 0 var(--v85-space-xs);
}
.hd-my-footer-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    min-height: 2.75rem;
    border: 1px solid var(--v85-border-color);
    border-radius: var(--v85-radius-md);
    background: var(--v85-bg-card);
    color: var(--v85-text-secondary);
    font-size: var(--v85-text-sm);
    font-weight: var(--v85-weight-medium);
    font-family: var(--v85-font-family);
    cursor: pointer;
    transition: border-color var(--v85-duration-fast) var(--v85-ease-out),
                color var(--v85-duration-fast) var(--v85-ease-out),
                background var(--v85-duration-fast) var(--v85-ease-out),
                box-shadow var(--v85-duration-fast) var(--v85-ease-out);
}
.hd-my-footer-btn:hover { border-color: var(--v85-primary); color: var(--v85-primary); background: var(--v85-primary-50); box-shadow: var(--v85-shadow-sm); }
.hd-my-footer-btn--danger:hover { border-color: var(--v85-charity); color: var(--v85-charity); background: var(--v85-charity-light); }
.hd-my-footer-btn i { font-size: var(--font-size-base); }

/* ============================================================
 *  我的页 — 通用弹层（个人信息 / 账号安全 / 关于）
 *  底部抽屉式，全程仅用 --v85-* 令牌，零硬编码色
 * ============================================================ */
.my-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--v85-z-modal);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background: color-mix(in srgb, var(--v85-text-primary) 45%, transparent);
    animation: v85-fadeIn var(--v85-duration-normal) var(--v85-ease-out);
    padding: 0;
}
.my-modal-panel {
    width: 100%;
    max-width: var(--v85-page-max-w);
    margin: 0 auto;
    background: var(--v85-bg-card);
    border-radius: var(--v85-radius-xl) var(--v85-radius-xl) 0 0;
    box-shadow: var(--v85-shadow-xl);
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    transform: translateY(100%);
    opacity: 0;
    transition: transform var(--v85-duration-normal) var(--v85-ease-out), opacity var(--v85-duration-normal) var(--v85-ease-out);
    overflow: hidden;
}
.my-modal-panel.show { transform: translateY(0); opacity: 1; }
.my-modal-drag {
    width: 2.25rem; height: 0.25rem;
    border-radius: var(--v85-radius-pill);
    background: var(--v85-text-placeholder);
    margin: var(--v85-space-sm) auto 0;
    flex: none;
}
.my-modal-head {
    display: flex; align-items: center; justify-content: center;
    position: relative;
    padding: var(--v85-space-md) var(--v85-space-lg) var(--v85-space-sm);
    flex: none;
}
.my-modal-title {
    font-family: var(--v85-font-heading);
    font-size: var(--v85-text-lg);
    font-weight: var(--v85-weight-bold);
    color: var(--v85-text-primary);
}
.my-modal-close {
    position: absolute; right: var(--v85-space-md); top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-lg);
    color: var(--v85-text-secondary);
    width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
}
.my-modal-close:active { color: var(--v85-text-primary); }
.my-modal-body {
    padding: var(--v85-space-md) var(--v85-space-lg) var(--v85-space-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.my-modal-foot {
    padding: var(--v85-space-md) var(--v85-space-lg) calc(var(--v85-space-lg) + var(--v85-safe-bottom));
    flex: none;
    border-top: 1px solid var(--v85-border-color);
}
.my-modal-save {
    width: 100%;
    min-height: 2.875rem;
    border: none;
    border-radius: var(--v85-radius-md);
    background: var(--v85-primary);
    color: var(--v85-text-on-primary, #FFFFFF);
    font-family: var(--v85-font-family);
    font-size: var(--v85-text-base);
    font-weight: var(--v85-weight-semibold);
    cursor: pointer;
    transition: filter var(--v85-duration-fast) var(--v85-ease-out), transform var(--v85-duration-fast) var(--v85-ease-out);
}
.my-modal-save:active { filter: brightness(0.95); transform: scale(0.99); }

/* 表单行（弹层内通用） */
.form-item { margin-bottom: var(--v85-space-md); }
.form-item label {
    display: block;
    font-size: var(--v85-text-sm);
    color: var(--v85-text-secondary);
    margin-bottom: var(--v85-space-xs);
    font-weight: var(--v85-weight-medium);
}
.form-item .form-input { width: 100%; }
.form-tip {
    margin: var(--v85-space-xs) 0 0;
    font-size: var(--v85-text-xs);
    color: var(--v85-text-tertiary);
    line-height: 1.4;
}

/* 工分 / 红分规则内容（复用 openPanel 弹层，渲染于 .my-modal-body 内） */
.score-rule-section { margin-bottom: var(--v85-space-lg); }
.score-rule-section:last-child { margin-bottom: 0; }
.score-rule-title {
    font-size: var(--v85-text-base);
    font-weight: var(--v85-weight-semibold);
    color: var(--v85-primary-dark);
    margin-bottom: var(--v85-space-sm);
    padding-left: var(--v85-space-sm);
    border-left: 3px solid var(--v85-primary);
    line-height: 1.35;
}
.score-rule-content { font-size: var(--font-size-base); color: var(--v85-text-secondary); line-height: 1.6; }
.score-rule-content p { margin: 0 0 var(--v85-space-sm); }
.score-rule-content p:last-child { margin-bottom: 0; }
.score-rule-content strong { color: var(--v85-charity); font-weight: var(--v85-weight-bold); }
.score-rule-list { margin: 0; padding-left: 1.15rem; }
.score-rule-list li { margin-bottom: var(--v85-space-xs); }
.score-rule-list li:last-child { margin-bottom: 0; }

/* 头像上传块（个人信息弹层） */
.pf-avatar-wrap {
    position: relative;
    width: 5rem; height: 5rem;
    margin: 0 auto var(--v85-space-lg);
    border-radius: var(--v85-radius-full);
    background: var(--v85-bg-soft);
    border: 2px solid var(--v85-border-color);
    overflow: visible;
    display: flex; align-items: center; justify-content: center;
}
.pf-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: var(--v85-radius-full);
    display: block;
}
.pf-avatar-ph {
    width: 100%; height: 100%;
    display: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--v85-charity);
}
.pf-avatar-ph.is-visible { display: block; }
.pf-avatar-ph svg { width: 100%; height: 100%; display: block; }
.pf-avatar-upload {
    position: absolute;
    right: -0.125rem; bottom: -0.125rem;
    width: 1.75rem; height: 1.75rem;
    border-radius: var(--v85-radius-full);
    background: var(--v85-primary);
    color: var(--v85-text-on-primary, #FFFFFF);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-size-base);
    border: 2px solid var(--v85-bg-card);
    box-shadow: var(--v85-shadow-sm);
    cursor: pointer;
}
.pf-avatar-upload:active { filter: brightness(0.95); }

/* 桌面端：抽屉改为居中对话框 */
@media (min-width: 768px) {
    .my-modal-overlay { justify-content: center; padding: var(--v85-space-lg); }
    .my-modal-panel {
        border-radius: var(--v85-radius-lg);
        max-height: 86vh;
        transform: scale(0.96);
    }
    .my-modal-panel.show { transform: scale(1); }
}