.renew-card {
    max-width: 500px; margin: 120px auto; background: var(--bg2);
    border: 1px solid var(--border); border-radius: 8px; padding: 2.5rem; text-align: center;
}
.renew-icon { font-size: 2rem; color: var(--text); margin-bottom: 1rem; }
.renew-card h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.renew-card > p { color: var(--text2); margin-bottom: 2rem; font-size: 0.9rem; }

.timer { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.timer-block {
    background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
    padding: 0.8rem 1rem; min-width: 65px;
}
.timer-block span { display: block; font-size: 1.8rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.timer-block small { font-size: 0.65rem; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; }
.sep { display: flex; align-items: center; font-size: 1.2rem; color: var(--text2); }

.renew-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 1.5rem; color: var(--text2); font-size: 0.85rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.green { background: #22c55e; animation: pulse 2s infinite; }
.dot.red { background: #ef4444; animation: pulse 1s infinite; }
.dot.orange { background: #f59e0b; animation: pulse 1.5s infinite; }

.renew-btns { display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 1.5rem; }

.renew-alert {
    background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px; padding: 0.8rem; margin-bottom: 1.5rem; color: #ef4444; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

.how-to {
    background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
    padding: 1.2rem; text-align: left; margin-top: 1.5rem;
}
.how-to h3 { font-size: 0.9rem; margin-bottom: 0.8rem; color: var(--text); }
.how-to ol { padding-left: 1.2rem; color: var(--text2); font-size: 0.85rem; line-height: 1.8; }