/* =========================================================
   底部弹层：存储容量扩容
   ========================================================= */

.quota-sheet .modal-content { padding: 10px 22px 26px; }
.quota-sheet-usage { text-align: center; margin-bottom: 18px; }
.quota-big { font-size: 30px; font-weight: 700; color: var(--text-sub); line-height: 1.2; }
.quota-big b { color: var(--accent-gold); }
.quota-big .slash { font-size: 18px; color: var(--text-light); margin: 0 4px; }
.quota-hint { font-size: 12px; color: var(--text-light); margin: 8px 0 14px; line-height: 1.7; }

.quota-plans { display: flex; gap: 10px; margin-bottom: 16px; }
.quota-plan {
    flex: 1; border: 1px solid var(--border-color); border-radius: 12px;
    padding: 12px 8px; text-align: center; cursor: pointer; background: #FFFFFF;
}
.quota-plan:active { border-color: var(--accent-gold); background: #FFFDF8; }
.quota-plan span { display: block; font-size: 13px; font-weight: 600; color: var(--text-main); }
.quota-plan b { display: block; margin-top: 4px; font-size: 15px; color: var(--accent-red); }
.quota-plan i { display: block; font-style: normal; font-size: 10px; color: var(--text-light); margin-top: 3px; }

.quota-actions { display: flex; gap: 10px; }
.quota-actions button {
    flex: 1; padding: 12px 0; border-radius: 12px; border: none;
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.quota-actions .ghost { background: #F0ECE5; color: var(--text-sub); }
.quota-actions .primary { background: var(--accent-dark); color: #FFFFFF; }

.quota-expire { font-size: 10px; color: var(--accent-gold); margin: -6px 0 12px; line-height: 1.6; }

/* 扩容选择与支付 */
.quota-plan.selected {
    border-color: var(--accent-gold);
    background: #FFFDF8;
    box-shadow: 0 0 0 1px rgba(185, 154, 107, 0.25) inset;
}
.quota-pay { z-index: 1100; }
.quota-pay-summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 14px; margin-bottom: 13px;
    background: #FFFFFF; border: 1px solid #F0EBE1; border-radius: 12px;
}
.quota-pay-summary b { display: block; font-size: 14px; color: var(--text-main); margin-bottom: 3px; }
.quota-pay-summary span { font-size: 10px; color: var(--text-light); }
.quota-pay-summary strong { font-size: 22px; color: var(--accent-red); }
.quota-pay-methods { background: #FFFFFF; border: 1px solid #F0EBE1; border-radius: 12px; padding: 0 14px; margin-bottom: 8px; }
.quota-pay-methods .pay-row:first-child { border-top: none; }