/* Settings modal — flat Stage-themed design, matched to the other modals.
   Surface #141417 (same as the leaderboard modal). Grouped section cards with
   rows + hairline dividers. Each control saves itself inline. Header uses the
   shared .mg-mtitle / .mg-mclose primitives. Width/height match the other modals. */

@keyframes setSpin { to { transform: rotate(360deg); } }

.settings-modal-content { scrollbar-width: none; -ms-overflow-style: none; }
.settings-modal-content::-webkit-scrollbar { display: none; }

.set-head { padding: 20px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.set-body { padding: 16px 24px 24px; max-height: calc(80vh - 80px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.set-body::-webkit-scrollbar { display: none; }

/* loading */
.set-loading { text-align: center; padding: 48px 0; }
.set-spinner { width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.1); border-top-color: rgba(255,255,255,0.5); border-radius: 50%; margin: 0 auto 12px; animation: setSpin 0.8s linear infinite; }
.set-loading-txt { color: rgba(255,255,255,0.35); font-size: 13px; }

/* section label */
.set-seclabel { color: rgba(255,255,255,0.45); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin: 22px 2px 10px; }
.set-seclabel:first-child { margin-top: 0; }

/* grouped card */
.set-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.set-row:last-child { border-bottom: 0; }
.set-row-main { flex: 1; min-width: 0; }
.set-row-label { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.25; }
.set-row-sub { color: rgba(255,255,255,0.4); font-size: 12px; margin-top: 2px; line-height: 1.4; }
.set-row-val { flex: none; color: rgba(255,255,255,0.55); font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.set-row-action { flex: none; }
.set-row-msg { font-size: 12px; margin-top: 8px; line-height: 1.4; }
.set-row-msg.err { color: #ff7a90; }
.set-row-msg.ok { color: #36d399; }

/* read-only lock note */
.set-lock { display: inline-flex; align-items: center; gap: 4px; color: rgba(255,255,255,0.3); font-size: 11.5px; margin-top: 4px; }
.set-lock svg { width: 11px; height: 11px; }

/* verified chip */
.set-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #36d399; background: rgba(54,211,153,0.12); border: 1px solid rgba(54,211,153,0.25); }
.set-chip svg { width: 11px; height: 11px; }

/* stacked field row (email) */
.set-row.stack { flex-direction: column; align-items: stretch; gap: 0; }
.set-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.set-field { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.set-input { flex: 1; min-width: 0; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 11px; padding: 10px 13px; font-family: inherit; font-size: 14px; color: #fff; outline: none; transition: border-color .16s, background .16s; }
.set-input:focus { border-color: rgba(255,200,61,0.45); background: rgba(255,255,255,0.07); }
.set-input::placeholder { color: rgba(255,255,255,0.3); }

/* read-only value display (email) */
.set-readonly { margin-top: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 11px; padding: 10px 13px; color: rgba(255,255,255,0.65); font-size: 14px; word-break: break-all; }

/* buttons — theme-proofed so Elementor can't override them */
.settings-modal-content .set-btn { flex: none; display: inline-flex !important; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,0.1) !important; background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.85) !important; border-radius: 11px !important; padding: 9px 15px !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer; transition: filter .16s, background .16s, color .16s; white-space: nowrap; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; }
.settings-modal-content .set-btn:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; }
.set-btn svg { width: 14px; height: 14px; flex: none; }
.settings-modal-content .set-btn.gold { background: #ffc83d !important; border-color: transparent !important; color: #000 !important; }
.settings-modal-content .set-btn.gold:hover { filter: brightness(1.05); background: #ffc83d !important; color: #000 !important; }
.settings-modal-content .set-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }

/* account actions */
.set-actions { display: flex; flex-direction: column; gap: 10px; }
.settings-modal-content .set-action-btn { width: 100% !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; border-radius: 14px !important; padding: 13px !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer; transition: background .16s, color .16s; box-shadow: none !important; text-transform: none !important; text-decoration: none; }
.set-action-btn svg { width: 16px; height: 16px; flex: none; }
.settings-modal-content .set-logout { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.8) !important; }
.settings-modal-content .set-logout:hover { background: rgba(255,255,255,0.09) !important; color: #fff !important; }
.settings-modal-content .set-delete { background: rgba(255,84,112,0.08) !important; border: 1px solid rgba(255,84,112,0.25) !important; color: #ff5470 !important; }
.settings-modal-content .set-delete:hover { background: rgba(255,84,112,0.14) !important; color: #ff5470 !important; }
.set-delete-note { text-align: center; color: rgba(255,255,255,0.3); font-size: 11.5px; margin-top: 2px; line-height: 1.4; }

/* two-step delete confirm */
.set-delete-confirm { margin-top: 4px; border-radius: 14px; border: 1px solid rgba(255,84,112,0.28); background: rgba(255,84,112,0.07); padding: 14px; }
.set-delete-confirm .t { color: #ff5470; font-size: 13.5px; font-weight: 800; margin-bottom: 3px; }
.set-delete-confirm .d { color: rgba(255,255,255,0.6); font-size: 12.5px; margin-bottom: 12px; line-height: 1.45; }
.set-delete-actions { display: flex; gap: 9px; }
.settings-modal-content .set-cbtn { flex: 1; border: 0 !important; cursor: pointer; font-family: inherit !important; font-weight: 800 !important; font-size: 13.5px !important; padding: 11px !important; border-radius: 12px !important; transition: filter .16s, background .16s; box-shadow: none !important; }
.settings-modal-content .set-cancel { background: rgba(255,255,255,0.07) !important; color: rgba(255,255,255,0.6) !important; }
.settings-modal-content .set-cancel:hover { background: rgba(255,255,255,0.11) !important; color: #fff !important; }
.settings-modal-content .set-yes { background: #ff5470 !important; color: #fff !important; }
.settings-modal-content .set-yes:hover { filter: brightness(1.08); }

/* responsive */
@media (max-width: 480px) {
    .set-field { flex-direction: column; align-items: stretch; }
    .set-field .set-btn { width: 100%; justify-content: center; }
    .set-row-val { max-width: 45%; }
}

/* ── Mobile fullscreen (matches the other modals) ── */
@media (max-width: 900px) {
    #settingsModal { padding: 0 !important; }
    #settingsModal > .settings-modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100svh !important;
        max-height: 100vh !important;
        max-height: 100svh !important;
        border-radius: 0 !important;
    }
    .set-head { padding: 18px 16px 0; }
    .set-body { padding: 14px 16px 20px; max-height: calc(100svh - 70px) !important; }
}