.staking-overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:#0009}.staking-dialog{width:min(100%,480px);max-height:90vh;overflow:auto;padding:20px;border-radius:12px;background:#111827;color:#f9fafb;box-shadow:0 12px 40px #0008}.staking-close{float:right;border:0;background:none;color:#fff;font-size:26px;cursor:pointer}.staking-dialog h2{margin:0 0 16px}.staking-dialog label{display:block;margin:12px 0;color:#d1d5db}.staking-dialog select,.staking-dialog input{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #374151;border-radius:7px;background:#1f2937;color:#fff;/* ⚠️ 必须 16px：iOS Safari 聚焦时若控件字号 <16px 会自动放大整个页面且不缩回（WebKit _zoomToFocusRect）。安卓 Chrome 不受影响，但统一 16px 两端一致。绝不用 maximum-scale=1 —— 那会禁掉安卓的双指缩放。 */font-size:16px}.staking-status{min-height:24px;color:#facc15}.staking-details{margin:14px 0;padding:12px;border-radius:8px;background:#1f2937;font-size:12px;overflow-wrap:anywhere}.staking-details div{margin:6px 0}.staking-submit{width:100%;padding:11px;border:0;border-radius:8px;background:#eab308;color:#111827;font-weight:700;cursor:pointer}.staking-submit:disabled{opacity:.6;cursor:wait}
.staking-hint{margin:-4px 0 12px;color:#9ca3af;font-size:12px}
.staking-row{margin:6px 0;color:#d1d5db}
.staking-row strong{color:#9ca3af;font-weight:600}
.staking-wallets{margin-top:10px;padding-top:10px;border-top:1px solid #374151}
.staking-wallets-title{margin:0 0 8px;color:#9ca3af;font-size:12px}
.staking-wallet,.staking-wallet-cancel{display:block;width:100%;margin:6px 0;padding:10px;border:1px solid #374151;border-radius:8px;background:#1f2937;color:#f9fafb;font:inherit;text-align:left;cursor:pointer}
.staking-wallet:hover{border-color:#eab308}
.staking-wallet-cancel{text-align:center;color:#9ca3af}

/* ============================================================
 * 自动参加流程的状态条（不弹面板时用）
 *
 * ⚠️ 为什么用底部条而不是顶部/居中浮层：
 *    钱包的 approve 确认弹窗是**钱包原生 UI**，覆盖在网页之上。
 *    我们的浮层如果也居中，会被钱包弹窗盖住 → 用户什么都看不到，
 *    以为页面卡死。底部条贴着屏幕下沿，不会被钱包弹窗遮住关键信息。
 *
 * ⚠️ 为什么要有 z-index 高于 .staking-overlay(20)：
 *    自动流程失败降级弹出手动面板时，状态条要仍可见，
 *    用户才知道「为什么突然出现了表单」。
 * ============================================================ */
.staking-statusbar{
    position:fixed;
    left:50%;
    bottom:calc(96px + env(safe-area-inset-bottom, 0px));
    z-index:30;
    transform:translateX(-50%);
    width:min(calc(100% - 32px),420px);
    padding:12px 16px;
    border-radius:10px;
    background:#1f2937;
    color:#f9fafb;
    font-size:13px;
    line-height:1.5;
    text-align:center;
    box-shadow:0 8px 24px #000a;
    animation:staking-statusbar-in .25s ease-out;
}
.staking-statusbar[hidden]{display:none}
.staking-statusbar.is-success{background:#14532d;color:#bbf7d0}
.staking-statusbar.is-error{background:#7f1d1d;color:#fecaca}

/* 顶部/底部安全区：iPhone 底部指示条区域 */
@supports (padding:max(0px)){
    .staking-statusbar{bottom:calc(96px + max(env(safe-area-inset-bottom, 0px),12px))}
}

@keyframes staking-statusbar-in{
    from{opacity:0;transform:translate(-50%,8px)}
    to{opacity:1;transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:reduce){
    .staking-statusbar{animation:none}
}