/* ============================================================
   0. 变量 & 基础
   ============================================================ */
:root{
    --g-brand: linear-gradient(135deg,#5b7cfa 0%,#9b5cf6 100%);
    --g-gold: linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
    --ink-1:#0f172a;
    --ink-2:#475569;
    --ink-3:#94a3b8;
    --line:rgba(226,232,240,.9);
    --glass:rgba(255,255,255,.68);
    --glass-brd:rgba(255,255,255,.85);
    --radius-xl:26px;
    --radius-lg:20px;
    --radius-md:16px;
    --shadow-soft:0 10px 30px -14px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.04);
    --shadow-hi:0 20px 50px -20px rgba(15,23,42,.32);
    --glass-card-bg: linear-gradient(155deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
    --glass-modal-bg: linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,255,255,.80));
}

body{
    background:
        radial-gradient(1100px 520px at 8% -12%, rgba(99,102,241,.14), transparent 62%),
        radial-gradient(900px 480px at 108% 4%, rgba(168,85,247,.13), transparent 60%),
        radial-gradient(700px 420px at 50% 110%, rgba(56,189,248,.10), transparent 65%),
        #f4f6fb !important;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
.fs-sm{ font-size:13.5px !important; }
.d-none{ display:none !important; }

/* ============================================================
   1. 玻璃卡片 / Hero
   ============================================================ */
.acct-card,
.dash-hero{
    position:relative;
    background: var(--glass-card-bg);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border:1px solid var(--glass-brd);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    overflow:hidden;
}
.dash-hero{ padding: 18px 18px 16px; margin-bottom: 18px; }
.dash-hero::after{
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(420px 180px at 100% 0%, rgba(155,92,246,.14), transparent 70%);
    pointer-events:none;
}
.acct-card::before{
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg,#e2e8f0,#94a3b8);
}
.acct-card.bar-brand::before { background: var(--g-brand); }
.acct-card.bar-gold::before  { background: var(--g-gold); }
.acct-card.bar-blue::before  { background: linear-gradient(90deg,#93c5fd,#3b82f6); }
.acct-card.bar-indigo::before{ background: linear-gradient(90deg,#a5b4fc,#6366f1); }
.acct-card.bar-violet::before{ background: linear-gradient(90deg,#c4b5fd,#8b5cf6); }
.acct-card.bar-emerald::before{ background: linear-gradient(90deg,#6ee7b7,#10b981); }

/* --- Hero 头部 --- */
.hero-row{
    position:relative; z-index:1;
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; flex-wrap:nowrap;
}
.hero-left{ display:flex; align-items:center; gap:11px; min-width:0; flex:1 1 auto; }
.hero-icon{
    width:44px; height:44px; flex-shrink:0;
    border-radius:14px;
    background: var(--g-brand);
    color:#fff;
    display:grid; place-items:center;
    font-size:17px;
    box-shadow: 0 8px 20px -8px rgba(99,102,241,.9);
}
.hero-title{
    font-size:1.02rem; font-weight:750; color:var(--ink-1);
    margin:0; letter-spacing:.2px; line-height:1.25;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hero-sub{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }

/* --- VIP / 状态胶囊 --- */
.vip-chip{
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 12px; border-radius:14px;
    font-size:12.5px; font-weight:600; white-space:nowrap;
    flex-shrink:0; text-decoration:none;
    transition: transform .2s cubic-bezier(.34,1.5,.64,1);
}
.vip-chip:active{ transform:scale(.95); }
.vip-chip.ok{
    background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(5,150,105,.10));
    border:1px solid rgba(16,185,129,.32);
    color:#047857;
}
.vip-chip.ok i{ color:#10b981; }
.vip-chip.no{
    background: linear-gradient(135deg, rgba(249,115,22,.15), rgba(234,88,12,.10));
    border:1px solid rgba(249,115,22,.32);
    color:#c2410c;
}
.vip-chip.no i{ color:#f97316; }

/* --- Hero 统计条 --- */
.hero-stats{
    position:relative; z-index:1;
    display:flex; align-items:center; gap:9px; flex-wrap:wrap;
    margin-top:14px; padding-top:14px;
    border-top:1px solid rgba(226,232,240,.7);
    justify-content:flex-start;
}
.stat-item{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; border-radius:14px;
    font-size:12.5px; font-weight:600;
    background: rgba(255,255,255,.62);
    border:1px solid rgba(226,232,240,.85);
    color:var(--ink-2);
    box-shadow: 0 2px 8px -4px rgba(15,23,42,.10);
    white-space:nowrap;
}
.stat-item .stat-num{
    font-size:16px; font-weight:800; letter-spacing:.2px;
    color:var(--ink-1); font-variant-numeric: tabular-nums;
}
.stat-item .stat-lbl{ font-size:12px; color:var(--ink-3); font-weight:500; }
.stat-item.is-run .stat-num{ color:#16a34a; }
.stat-item.is-stop .stat-num{ color:#94a3b8; }
.stat-item.is-quota{
    background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.10));
    border-color: rgba(129,140,248,.45);
}
.stat-item.is-quota .stat-num{ color:#4f46e5; }
.stat-item.is-vip{
    background: linear-gradient(135deg, rgba(251,191,36,.14), rgba(245,158,11,.10));
    border-color: rgba(245,158,11,.32);
    color:#92400e;
}
.stat-item.is-vip i{ color:#f59e0b; }
.stat-item.is-vip-off{
    background: linear-gradient(135deg, rgba(148,163,184,.14), rgba(100,116,139,.08));
    border-color: rgba(148,163,184,.35);
    color:#64748b;
}

/* Hero 操作按钮 */
.btn-hero-action{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px;
    font-size:13px; font-weight:650; letter-spacing:.2px;
    border:none; border-radius:13px;
    cursor:pointer;
    transition: all .22s cubic-bezier(.34,1.5,.64,1);
    white-space:nowrap;
    -webkit-tap-highlight-color: transparent;
}
.btn-hero-action:active{ transform: scale(.95); }
.btn-hero-action i{ font-size:11.5px; }
.btn-sync-account{
    margin-left:auto;
    color:#4f46e5;
    background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(168,85,247,.10));
    border:1px solid rgba(129,140,248,.4);
    box-shadow: 0 4px 12px -8px rgba(99,102,241,.7);
}
.btn-add-account{
    color:#fff;
    background: var(--g-brand);
    box-shadow: 0 8px 20px -10px rgba(99,102,241,.9);
}

/* ============================================================
   2. iOS 按钮
   ============================================================ */
.ios-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    border:none; cursor:pointer;
    border-radius:12px;
    padding: 9px 14px;
    font-size:13px; font-weight:650; letter-spacing:.2px;
    font-family: inherit;
    transition: all .22s cubic-bezier(.34,1.5,.64,1);
    -webkit-tap-highlight-color: transparent;
}
.ios-btn:active{ transform: scale(.96); }
.ios-btn.primary{
    background: linear-gradient(135deg, rgba(99,102,241,.78), rgba(168,85,247,.72));
    color:#fff;
    border:1px solid rgba(255,255,255,.28);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow:
        0 8px 20px -12px rgba(99,102,241,.7),
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -1px 0 rgba(0,0,0,.05);
}
.ios-btn.primary:hover{
    background: linear-gradient(135deg, rgba(99,102,241,.88), rgba(168,85,247,.82));
    box-shadow:
        0 10px 24px -12px rgba(99,102,241,.85),
        inset 0 1px 0 rgba(255,255,255,.4);
}
.ios-btn.ghost{
    background: rgba(255,255,255,.68);
    color:#475569;
    border:1px solid rgba(226,232,240,.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px -6px rgba(15,23,42,.2);
}
.ios-btn.ghost:hover{ background: rgba(255,255,255,.9); color:#334155; }
.ios-btn.danger{
    background: linear-gradient(135deg, rgba(244,63,94,.84), rgba(239,68,68,.74));
    color:#fff;
    box-shadow: 0 8px 20px -10px rgba(244,63,94,.95), inset 0 1px 0 rgba(255,255,255,.42);
}
.ios-btn.block{ width:100%; padding: 12px 16px; font-size:14px; border-radius:14px; }
.ios-btn[disabled],
.ios-btn:disabled{
    opacity:.45; pointer-events:none; filter:grayscale(.55); box-shadow:none;
}

/* ============================================================
   3. 状态胶囊 / 小标签
   ============================================================ */
.status-chip{
    display:inline-flex; align-items:center; gap:3px;
    height:18px; padding:0 7px;
    border-radius:6px;
    font-size:11px; font-weight:700; letter-spacing:.1px;
    line-height:1; white-space:nowrap; flex-shrink:0;
    transition: all .3s;
}
.status-chip i{ font-size:7px; line-height:1; }
.status-run-timing{
    background: rgba(16,185,129,.14);
    border:1px solid rgba(16,185,129,.32);
    color:#047857;
}
.status-run-timing i{ animation: pulseDot 1.8s ease-in-out infinite; }
.status-run-sim{
    background: rgba(168,85,247,.14);
    border:1px solid rgba(168,85,247,.32);
    color:#7c3aed;
}
.status-run-sim i{ animation: pulseDot 1.8s ease-in-out infinite; }
.status-stop{
    background: rgba(148,163,184,.16);
    border:1px solid rgba(148,163,184,.36);
    color:#64748b;
}
.status-chip.chip-blue  { background: rgba(99,102,241,.14); color:#4f46e5; }
.status-chip.chip-green { background: rgba(16,185,129,.14); color:#059669; }
@keyframes pulseDot{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ============================================================
   4. 玻璃弹窗（bootstrap modal 皮肤）
   ============================================================ */
.modal-dialog { margin-left:auto !important; margin-right:auto !important; }
.modal-dialog-centered{
    display:flex !important; align-items:center !important;
    min-height: calc(100% - 2rem) !important;
}
#addAccountModal  .modal-dialog { max-width: 460px; width: calc(100% - 1.5rem); }
#manualStepModal  .modal-dialog { max-width: 380px; width: calc(100% - 1.5rem); }
#stepSettingModal .modal-dialog { max-width: 500px; width: calc(100% - 1.5rem); }
#bindWxModal      .modal-dialog { max-width: 380px; width: calc(100% - 1.5rem); }
#syncStepModal    .modal-dialog { max-width: 460px; width: calc(100% - 1.5rem); }

.glass-modal{
    background: var(--glass-modal-bg);
    -webkit-backdrop-filter: blur(34px) saturate(190%);
    backdrop-filter: blur(34px) saturate(190%);
    border:1px solid rgba(255,255,255,.9);
    border-radius: 26px;
    box-shadow: 0 40px 90px -30px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.9);
    overflow:hidden;
    transition: height .35s cubic-bezier(.22,1,.36,1);
}
.gm-head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 18px 10px;
}
.gm-title{
    font-size:15px; font-weight:750; color:var(--ink-1);
    margin:0; display:flex; align-items:center; gap:8px;
}
.gm-title .t-icon{
    width:28px; height:28px; border-radius:10px;
    background: var(--g-brand); color:#fff;
    display:grid; place-items:center; font-size:12px;
    box-shadow: 0 6px 14px -6px rgba(99,102,241,.9);
}
.gm-close{
    width:30px; height:30px; border-radius:50%;
    border:none; cursor:pointer;
    background: rgba(241,245,249,.95);
    color:#64748b; font-size:12px;
    display:grid; place-items:center;
    transition: all .2s;
}
.gm-close:hover{ background:#e2e8f0; color:#334155; }
.gm-close:active{ transform:scale(.9); }
.gm-body{ padding: 0 18px 4px; }
.gm-foot{ display:flex; gap:8px; padding: 12px 18px 16px; }
.gm-foot .ios-btn{ flex:1 1 0; }

/* ============================================================
   5. 灵动岛通知
   ============================================================ */
.dynamic-island{
    position: fixed;
    top: 14px; left: 50%;
    z-index: 99999;
    display: inline-flex; align-items: center;
    gap: 0; padding: 0;
    max-width: 92vw;
    background: #05060a;
    color: #fff;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        0 18px 48px -16px rgba(0,0,0,.65),
        0 4px 12px -4px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.06);
    font-size: 13px; font-weight: 650; letter-spacing: .2px;
    white-space: nowrap; overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) scale(.55) translateY(-8px);
    transform-origin: top center;
    transition:
        transform .55s cubic-bezier(.22,1.4,.36,1),
        opacity .35s ease,
        padding .45s cubic-bezier(.22,1.4,.36,1),
        gap .35s ease;
}
.dynamic-island.is-show{
    opacity: 1;
    padding: 9px 16px 9px 11px;
    gap: 9px;
    transform: translateX(-50%) scale(1) translateY(0);
}
.dynamic-island.is-hide{
    opacity: 0; padding: 0; gap: 0;
    transform: translateX(-50%) scale(.6) translateY(-6px);
}
.di-icon{
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 10px; color: #fff;
    transform: scale(0);
    transition: transform .35s cubic-bezier(.34,1.6,.64,1) .1s;
}
.dynamic-island.is-show .di-icon{ transform: scale(1); }
.di-icon.is-success{ background: linear-gradient(135deg,#34d399,#10b981); box-shadow: 0 0 12px rgba(16,185,129,.6); }
.di-icon.is-warning{ background: linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow: 0 0 12px rgba(245,158,11,.6); }
.di-icon.is-danger { background: linear-gradient(135deg,#f87171,#ef4444); box-shadow: 0 0 12px rgba(239,68,68,.6); }
.di-icon.is-info   { background: linear-gradient(135deg,#818cf8,#6366f1); box-shadow: 0 0 12px rgba(99,102,241,.6); }
.di-msg{
    line-height: 1.25;
    max-width: 70vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: 0; transform: translateX(-6px);
    transition: opacity .3s ease .12s, transform .3s ease .12s;
}
.dynamic-island.is-show .di-msg{ opacity: 1; transform: translateX(0); }
.di-msg b{ color:#a5b4fc; font-weight:800; }

/* ============================================================
   6. 居中玻璃确认框
   ============================================================ */
.ios-dialog-overlay{
    position:fixed; inset:0; z-index:99999;
    background: rgba(15,23,42,.32);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display:flex; align-items:center; justify-content:center;
    padding: 20px;
    animation: iosDialogIn .22s ease-out;
}
@keyframes iosDialogIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes iosDialogOut{ from{ opacity:1; } to{ opacity:0; } }

.ios-dialog-card{
    width: 100%; max-width: 340px;
    background: linear-gradient(160deg, rgba(255,255,255,.97), rgba(255,255,255,.86));
    -webkit-backdrop-filter: blur(38px) saturate(190%);
    backdrop-filter: blur(38px) saturate(190%);
    border:1px solid rgba(255,255,255,.95);
    border-radius: 24px;
    box-shadow: 0 40px 80px -28px rgba(15,23,42,.5), inset 0 1px 0 rgba(255,255,255,.95);
    padding: 22px 20px 16px;
    text-align: center;
    animation: iosDialogPop .36s cubic-bezier(.34,1.5,.64,1);
    max-height: 82vh; overflow-y: auto;
}
@keyframes iosDialogPop{ from{ transform: scale(.88); opacity:0; } to{ transform: scale(1); opacity:1; } }

.ios-dialog-icon{
    width: 52px; height: 52px; border-radius: 18px;
    margin: 0 auto 12px;
    display: grid; place-items: center;
    font-size: 22px;
    background: rgba(99,102,241,.13);
    color:#6366f1;
}
.ios-dialog-icon.success{ background: rgba(16,185,129,.13); color:#10b981; }
.ios-dialog-icon.warning{ background: rgba(245,158,11,.14); color:#f59e0b; }
.ios-dialog-icon.danger { background: rgba(239,68,68,.12);  color:#ef4444; }
.ios-dialog-icon.info   { background: rgba(99,102,241,.13); color:#6366f1; }

.ios-dialog-title{
    font-size:16px; font-weight:750; letter-spacing:-.2px;
    color: var(--ink-1);
    margin-bottom: 8px;
}
.ios-dialog-msg{
    font-size:14px; line-height:1.6;
    color: var(--ink-1);
    font-weight:550;
    margin-bottom: 16px;
    word-break: break-word;
    text-align:center;
}
.ios-dialog-msg p{ margin:0 0 8px; }
.ios-dialog-msg p:last-child{ margin-bottom:0; }
.ios-dialog-btns {
    display: flex;
    flex-direction: row;   /* 关键：水平排列 */
    gap: 10px;            /* 按钮之间的间距 */
    justify-content: center;
}

.ios-dialog-btns .ios-btn {
    flex: 1;              /* 关键：两个按钮平分宽度 */
    width: auto;          /* 取消之前可能设置的 100% 宽度 */
}
/* ============================================================
   7. 玻璃 Loading
   ============================================================ */
.ios-loading-overlay{
    position:fixed; inset:0; z-index:100000;
    background: rgba(15,23,42,.20);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display:flex; align-items:center; justify-content:center;
    opacity:0;
    transition: opacity .2s ease;
}
.ios-loading-overlay.is-show{ opacity:1; }
.ios-loading-card{
    display:flex; align-items:center; gap:10px;
    padding: 14px 20px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,255,255,.80));
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border:1px solid rgba(255,255,255,.9);
    box-shadow: 0 20px 50px -20px rgba(15,23,42,.45);
    font-size: 13px; font-weight:650; color: var(--ink-2);
}
.ios-spinner{
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2.5px solid rgba(99,102,241,.22);
    border-top-color: #6366f1;
    animation: iosSpin .7s linear infinite;
}
@keyframes iosSpin{ to{ transform: rotate(360deg); } }

/* ============================================================
   8. 表单输入
   ============================================================ */
.gx-input,
.gm-body .form-control{
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border-radius: 15px;
    border: 1.5px solid rgba(226,232,240,.95);
    background: rgba(255,255,255,.78);
    color: var(--ink-1);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.gx-input::placeholder,
.gm-body .form-control::placeholder{ color: var(--ink-3); }
.gx-input:focus,
.gm-body .form-control:focus{
    border-color: rgba(139,92,246,.65);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(99,102,241,.13);
}
.gx-input[readonly]{ background: rgba(241,245,249,.72); color: var(--ink-3); cursor: not-allowed; }
.gm-body .input-group-text{
    background: rgba(241,245,249,.95);
    border: 1.5px solid rgba(226,232,240,.95);
    color:#64748b;
    font-size:12.5px;
    border-radius: 15px 0 0 15px;
}
.gm-body .input-group .form-control{
    border-radius: 0 15px 15px 0;
    border-left: none;
}
.gm-body .input-group .form-control:focus{ border-left: none; }

/* ============================================================
   9. Tabs（iOS 胶囊）
   ============================================================ */
.ios-tabs-wrap{ margin-bottom: 18px; }
.ios-tabs{
    display:flex; gap:5px;
    padding:5px;
    border-radius: 18px;
    background: rgba(255,255,255,.62);
    border:1px solid rgba(226,232,240,.9);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-soft);
    overflow-x:auto;
    scrollbar-width: none;
}
.ios-tabs::-webkit-scrollbar{ display:none; }
.ios-tab{
    flex:1 1 0; min-width:100px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding: 11px 14px;
    border:none; cursor:pointer;
    border-radius: 14px;
    font-size: 13.5px; font-weight: 700; letter-spacing:.2px;
    color:#64748b;
    background: transparent;
    white-space:nowrap;
    transition: all .3s cubic-bezier(.34,1.4,.64,1);
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.ios-tab:active{ transform: scale(.97); }
.ios-tab i{ font-size:12px; }
.ios-tab.is-on{
    background: #fff;
    color:#4f46e5;
    /*box-shadow: 0 8px 20px -10px rgba(15,23,42,.35), inset 0 1px 0 rgba(255,255,255,.9);*/
    box-shadow: 0 8px 20px -10px rgb(114 70 220 / 87%), inset 0 1px 0 rgb(232 220 255 / 32%);
}

.tab-pane{ display:none; }
.tab-pane.is-on{
    display:block;
    animation: tabFadeIn .34s cubic-bezier(.22,1,.36,1);
}
@keyframes tabFadeIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform: none; } }

.tab-note{
    display:flex; align-items:flex-start; gap:8px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(99,102,241,.06);
    border:1px solid rgba(129,140,248,.2);
    color:#4f46e5;
    font-size:12.5px; line-height: 1.6;
    margin-bottom: 14px;
}
.tab-note i{ color:#6366f1; margin-top:2px; font-size:12px; }
.tab-note p{ margin:0; }
.tab-note strong{ color: var(--ink-1); font-weight:750; }

/* ============================================================
   10. 套餐卡片（页面 2）
   ============================================================ */
.plan-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
}
@media (max-width: 991.98px){ .plan-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 359.98px){ .plan-grid{ grid-template-columns: 1fr; } }

.plan-card{
    position:relative;
    display:flex; flex-direction:column;
    padding: 12px 13px;
    cursor:default;
    color:inherit;
    height: 100%;
    transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s;
}
.plan-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-hi); }
.plan-card.is-gold{
    border-color: rgba(245,158,11,.42);
    box-shadow: 0 12px 30px -18px rgba(245,158,11,.75), inset 0 1px 0 rgba(255,255,255,.85);
}
.plan-card.is-gold:hover{
    box-shadow: 0 20px 44px -20px rgba(245,158,11,.95), inset 0 1px 0 rgba(255,255,255,.9);
}
.plan-name-row{
    display:flex; align-items:center; gap:6px;
    margin-bottom: 9px;
}
.plan-icon{
    width: 22px; height: 22px; flex-shrink:0;
    border-radius: 8px;
    display:grid; place-items:center;
    font-size: 10.5px; color:#fff;
    background: var(--g-brand);
    box-shadow: 0 5px 12px -7px rgba(99,102,241,.9);
}
.plan-icon.gold{ background: var(--g-gold); box-shadow: 0 5px 12px -7px rgba(245,158,11,.9); }
.plan-icon.emerald{ background: linear-gradient(135deg,#34d399,#10b981); }
.plan-icon.blue{ background: linear-gradient(135deg,#60a5fa,#3b82f6); }
.plan-name{
    font-size:13px; font-weight:750; color:var(--ink-1);
    letter-spacing:.2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    min-width:0;
}
.plan-duration{
    font-size:10px; font-weight:600;
    color:#64748b;
    padding:2px 6px;
    border-radius:7px;
    background: rgba(241,245,249,.9);
    white-space:nowrap; flex-shrink:0; line-height:1.5;
}
.plan-pick{
    margin-left:auto;
    flex-shrink:0;
    width: 22px; height: 22px;
    padding:0;
    border-radius:50%;
    border:1.5px solid rgba(148,163,184,.55);
    background: rgba(255,255,255,.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display:grid; place-items:center;
    cursor:pointer; outline:none;
    -webkit-appearance:none; appearance:none;
    transition: all .25s cubic-bezier(.34,1.5,.64,1);
}
.plan-pick:hover{ border-color: rgba(99,102,241,.7); background: rgba(99,102,241,.10); }
.plan-pick::after{
    content:'';
    display:block;
    width:4px; height:8px;
    margin-top:-3px;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    transform: rotate(45deg) scale(0);
    transition: transform .28s cubic-bezier(.34,1.6,.64,1);
}
.plan-pick.is-on{
    border-color: transparent;
    background: var(--g-brand);
    box-shadow: 0 6px 14px -6px rgba(99,102,241,.95);
}
.plan-pick.is-on::after{ transform: rotate(45deg) scale(1); }
.plan-card.is-gold .plan-pick.is-on{
    background: var(--g-gold);
    box-shadow: 0 6px 14px -6px rgba(245,158,11,.95);
}
.plan-price-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:6px; flex-wrap:nowrap; min-height: 22px;
}
.plan-price-left{ display:flex; align-items:baseline; gap:1px; flex-shrink:0; }
.plan-price-symbol{ font-size:11.5px; font-weight:750; color: var(--ink-2); margin-top:2px; }
.plan-price{
    font-size:22px; font-weight:800; letter-spacing:-.5px;
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
    line-height:1;
}
.plan-price-unit{ font-size:10.5px; color:var(--ink-3); font-weight:600; margin-left: 2px; }
.plan-features{
    display:flex; flex-wrap:nowrap; gap:3px;
    justify-content:flex-end; flex-shrink:0; overflow:hidden;
}
.plan-feature{
    display:inline-flex; align-items:center; gap:2px;
    padding:2px 6px;
    border-radius:6px;
    font-size:9.5px; font-weight:650;
    background: rgba(99,102,241,.07);
    border:1px solid rgba(129,140,248,.18);
    color:#4f46e5;
    white-space:nowrap; line-height:1;
}
.plan-feature i{ font-size:7.5px; color:#6366f1; }

/* ============================================================
   11. 支付弹窗
   ============================================================ */
.pay-modal-head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 20px 10px;
}
.pay-modal-title{
    font-size:15.5px; font-weight:750; color:var(--ink-1);
    margin:0; display:flex; align-items:center; gap:8px;
}
.pay-modal-title .t-icon{
    width:28px; height:28px; border-radius:10px;
    background: var(--g-brand); color:#fff;
    display:grid; place-items:center; font-size:12px;
    box-shadow: 0 6px 14px -6px rgba(99,102,241,.9);
}
.pay-modal-close{
    width:30px; height:30px; border-radius:50%;
    border:none; cursor:pointer;
    background: rgba(241,245,249,.95);
    color:#64748b; font-size:12px;
    display:grid; place-items:center;
    transition: all .2s;
}
.pay-modal-close:hover{ background:#e2e8f0; color:#334155; }
.pay-modal-close:active{ transform:scale(.9); }
.pay-modal-body{ padding: 0 20px 6px; }
.pay-modal-foot{ display: flex; gap: 8px; padding: 10px 20px 18px; }
.pay-modal-foot .ios-btn{ flex: 1 1 0; }
.pay-summary{
    display:flex; align-items:center; justify-content:space-between;
    padding: 10px 14px;
    margin: 0 0 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(168,85,247,.06));
    border: 1px solid rgba(129,140,248,.25);
}
.pay-summary-label{ font-size:12.5px; color:#64748b; font-weight:600; }
.pay-summary-value{ font-size:16px; font-weight:800; color:#4f46e5; font-variant-numeric: tabular-nums; }
.pay-summary-value small{ font-size:11px; font-weight:600; color:#94a3b8; margin-left: 4px; }
.pay-options{ display:flex; flex-direction:column; gap:8px; }
.pay-option{
    position:relative;
    display:flex; align-items:center; gap:12px;
    padding: 12px 14px;
    border-radius: 16px;
    cursor:pointer;
    background: rgba(255,255,255,.62);
    border:1.5px solid rgba(226,232,240,.95);
    transition: all .25s cubic-bezier(.34,1.4,.64,1);
    -webkit-tap-highlight-color: transparent;
}
.pay-option:active{ transform: scale(.985); }
.pay-option:hover{
    background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(168,85,247,.05));
    border-color: rgba(129,140,248,.4);
}
.pay-option.is-selected{
    background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.10));
    border-color: rgba(129,140,248,.75);
    box-shadow: 0 8px 22px -12px rgba(99,102,241,.65), inset 0 1px 0 rgba(255,255,255,.6);
}
.pay-icon{
    width: 40px; height: 40px; flex-shrink:0;
    border-radius: 12px; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size: 18px;
    box-shadow: 0 6px 14px -8px rgba(15,23,42,.35);
}
.pay-icon.qq     { background: linear-gradient(135deg,#12b7f5,#0a8fc2); }
.pay-icon.wx     { background: linear-gradient(135deg,#22c55e,#07c160); }
.pay-icon.alipay { background: linear-gradient(135deg,#2f95ff,#1677ff); }
.pay-icon.wallet { background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.pay-label{ flex:1; min-width:0; font-size:14px; font-weight:650; color: var(--ink-1); letter-spacing:.2px; }
.pay-check{
    width: 20px; height: 20px; flex-shrink:0;
    border-radius: 50%;
    border: 1.5px solid rgba(148,163,184,.5);
    display: grid; place-items: center;
    background: rgba(255,255,255,.9);
    transition: all .22s cubic-bezier(.34,1.5,.64,1);
}
.pay-check::after{
    content: '';
    width: 5px; height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) scale(0);
    margin-top: -2px;
    transition: transform .22s cubic-bezier(.34,1.5,.64,1);
}
.pay-option.is-selected .pay-check{
    background: var(--g-brand);
    border-color: transparent;
    box-shadow: 0 4px 10px -4px rgba(99,102,241,.9);
}
.pay-option.is-selected .pay-check::after{ transform: rotate(45deg) scale(1); }

/* ============================================================
   12. 移动端适配
   ============================================================ */
@media (max-width: 767.98px){
    .dash-hero{ padding: 15px 15px 14px; }
    .hero-icon{ width:42px; height:42px; font-size:16px; }
    .hero-title{ font-size:.98rem; }
    .hero-stats{ gap:7px; }
    .stat-item{ padding:5px 10px; }
    .stat-item .stat-num{ font-size:15px; }
    .btn-hero-action{ padding:8px 12px; font-size:12.5px; }
    .btn-sync-account, .btn-add-account{
        flex: 1 1 0; margin-left: 0;
        justify-content: center;
    }
    .acct-card{
        background: linear-gradient(155deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
        -webkit-backdrop-filter: blur(28px) saturate(200%);
        backdrop-filter: blur(28px) saturate(200%);
    }
    .glass-modal{ border-radius:22px; }
    .gm-head{ padding: 13px 15px 8px; }
    .gm-title{ font-size:14px; gap:7px; }
    .gm-title .t-icon{ width:26px; height:26px; font-size:11px; border-radius:9px; }
    .gm-close{ width:28px; height:28px; font-size:11px; }
    .gm-body{ padding: 0 15px 2px; }
    .gm-foot{ padding: 10px 15px 14px; gap:7px; }
    .ios-btn{ padding: 8px 12px; font-size:12.5px; border-radius:11px; gap:4px; }
    .ios-tab{ padding: 10px 10px; font-size:12.5px; min-width:80px; }
    .ios-tab i{ font-size:11px; }
    .plan-card{ padding: 10px 11px; }
    .plan-price{ font-size:16px; letter-spacing:-.4px; }
    .plan-price-symbol{ font-size:10px; }
    .plan-price-unit{ font-size:9px; margin-left: 1px; }
    .plan-feature{ font-size: 9px; padding: 2px 5px; border-radius: 5px; }
    .plan-feature i{ font-size: 7px; }
    .plan-name{ font-size:12px; }
    .plan-icon{ width:18px; height:18px; font-size:9px; border-radius:6px; }
    .plan-duration{ font-size:9px; padding:2px 5px; border-radius:6px; }
    .plan-pick{ width:20px; height:20px; }
    .dynamic-island{ top: 10px; font-size: 12.5px; }
    .dynamic-island.is-show{ padding: 8px 14px 8px 10px; gap: 8px; }
    .di-icon{ width: 20px; height: 20px; font-size: 9px; }
    .di-msg{ max-width: 78vw; }
    .ios-dialog-overlay{ padding: 16px; }
    .ios-dialog-card{ max-width: 85%; padding: 20px 16px 14px; border-radius: 22px; }
    .ios-dialog-icon{ width:46px; height:46px; font-size:20px; border-radius:16px; margin-bottom:10px; }
    .ios-dialog-msg{ font-size:13.5px; margin-bottom:14px; }
}
@media (max-width: 575.98px){
    .modal-dialog{ max-width: 85% !important; width: 85% !important; }
    .hero-row{ gap:8px; }
}
@media (max-width: 380px){
    .plan-price{ font-size: 15px; }
    .plan-feature{ font-size: 8.5px; padding: 2px 4px; }
    .plan-name{ font-size: 11.5px; }
}