/* Miracle Settings Menu — Frontend CSS v2.1.0
 * Dark mode driven by Miracle App Shell / Miracle Template.
 * Activated by:  body.dark-mode  |  html[data-theme="dark"]
 */
:root{
  --msm-bg:#f0f2f5;--msm-card:#fff;--msm-hover:#f7f8fa;
  --msm-border:#e4e6ea;--msm-text:#1c1e21;--msm-sub:#65676b;
  --msm-navy:#1a2744;--msm-gold:#D4AF37;
  --msm-danger:#dc3545;--msm-danger-bg:#fff0f1;
  --msm-green:#1d8348;
  --msm-r:12px;--msm-t:0.2s ease;
}

/* Dark mode — inherit CSS vars from App Shell / Template */
body.dark-mode .msm-wrap,
html[data-theme="dark"] .msm-wrap {
  --msm-bg: var(--c-bg, #18191a);
  --msm-card: var(--c-card, #242526);
  --msm-hover: var(--c-elevated, #3a3b3c);
  --msm-border: var(--c-border, #3e4042);
  --msm-text: var(--c-text, #e4e6eb);
  --msm-sub: var(--c-text2, #b0b3b8);
}

/* Wrap */
.msm-wrap{
  max-width:600px;margin:0 auto;padding-bottom:80px;
  background:var(--msm-bg);min-height:60vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* Section header */
.msm-section-hd{
  display:flex;align-items:center;gap:10px;
  padding:18px 16px 8px;cursor:pointer;user-select:none;
  background:var(--msm-bg);
}
.msm-hd-icon{
  width:36px;height:36px;border-radius:50%;
  background:var(--msm-navy);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.msm-hd-icon svg{width:18px;height:18px;fill:var(--msm-gold);}
.msm-hd-label{flex:1;font-size:17px;font-weight:700;color:var(--msm-text);}
.msm-chevron{width:22px;height:22px;transition:transform .3s;}
.msm-chevron svg{width:22px;height:22px;fill:var(--msm-sub);}
.msm-toggle-hd.open .msm-chevron{transform:rotate(180deg);}

/* Section body */
.msm-section-bd{
  max-height:2000px;overflow:hidden;opacity:1;
  transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s;
}
.msm-section-bd.msm-collapsed{max-height:0;opacity:0;}

/* Row */
.msm-row{
  display:flex;align-items:center;gap:14px;
  background:var(--msm-card);color:var(--msm-text);
  text-decoration:none;padding:14px 16px;
  margin:1px 0;border:none;width:100%;text-align:left;
  cursor:pointer;font-size:15px;font-family:inherit;
  transition:background var(--msm-t);
}
.msm-row:hover,.msm-row:focus-visible{background:var(--msm-hover);}
.msm-section-bd .msm-row:first-child{border-radius:var(--msm-r) var(--msm-r) 0 0;}
.msm-section-bd .msm-row:last-child{border-radius:0 0 var(--msm-r) var(--msm-r);}
.msm-section-bd .msm-row:only-child{border-radius:var(--msm-r);}

.msm-row-icon{
  width:36px;height:36px;border-radius:50%;
  background:#e4e6ea;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
body.dark-mode .msm-row-icon,
html[data-theme="dark"] .msm-row-icon{background:var(--c-elevated,#3a3b3c);}
.msm-row-icon svg{width:18px;height:18px;fill:var(--msm-navy);}
body.dark-mode .msm-row-icon svg,
html[data-theme="dark"] .msm-row-icon svg{fill:var(--c-text,#e4e6eb);}

.msm-row-label{flex:1;font-weight:500;}
.msm-row-arr{margin-left:auto;}
.msm-row-arr svg{width:18px;height:18px;fill:var(--msm-sub);}

.msm-icon-add{background:#e8f4e8!important;}
.msm-icon-add svg{fill:var(--msm-green)!important;}
.msm-icon-logout svg{fill:var(--msm-navy);}
.msm-icon-danger{background:var(--msm-danger-bg)!important;}
.msm-icon-danger svg{fill:var(--msm-danger)!important;}
.msm-danger-label{color:var(--msm-danger);}

/* Toggle row */
.msm-row-toggle{cursor:default;}
.msm-sw{
  position:relative;display:inline-block;
  width:52px;height:28px;cursor:pointer;margin-left:auto;flex-shrink:0;
}
.msm-sw input{opacity:0;width:0;height:0;position:absolute;}
.msm-sw-track{
  position:absolute;inset:0;background:#ccc;border-radius:100px;
  transition:background .25s;
}
.msm-sw input:checked~.msm-sw-track{background:var(--msm-navy);}
.msm-sw-thumb{
  position:absolute;top:3px;left:3px;width:22px;height:22px;
  background:#fff;border-radius:50%;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.msm-sw input:checked~.msm-sw-track .msm-sw-thumb{
  transform:translateX(24px);background:var(--msm-gold);
}

/* Divider */
.msm-divider{height:8px;background:var(--msm-bg);}

/* Current account */
.msm-current-account{
  display:flex;align-items:center;gap:14px;
  background:var(--msm-card);padding:16px;
  border-radius:var(--msm-r) var(--msm-r) 0 0;
  border-bottom:1px solid var(--msm-border);
}
/* Avatar — handles img from get_avatar(), MSN_Avatar, and placeholder span */
.msm-acct-av,
.msm-av-wrap img,
.msm-av-wrap .avatar {
    width:52px;height:52px;border-radius:50%;object-fit:cover;
    border:2.5px solid var(--msm-gold);display:block;
}
.msm-av-wrap,.msm-linked-av-wrap{flex-shrink:0;}
.msm-av-wrap .msm-av-ph{display:inline-flex;}
.msm-linked-av-wrap img,.msm-linked-av-wrap .avatar,.msm-linked-av{
    width:42px;height:42px;border-radius:50%;object-fit:cover;display:block;
}
.msm-acct-meta{display:flex;flex-direction:column;gap:2px;}
.msm-acct-name{font-size:15px;font-weight:700;color:var(--msm-text);}
.msm-acct-email{font-size:13px;color:var(--msm-sub);}
.msm-acct-active{font-size:11px;font-weight:700;color:var(--msm-green);text-transform:uppercase;letter-spacing:.5px;}

/* Linked rows */
#msm-linked-list{background:var(--msm-card);}
.msm-linked-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--msm-border);
  transition:background var(--msm-t);
}
.msm-linked-row:hover{background:var(--msm-hover);}
.msm-linked-av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.msm-linked-meta{flex:1;display:flex;flex-direction:column;gap:2px;}
.msm-linked-name{font-size:14px;font-weight:600;color:var(--msm-text);}
.msm-linked-email{font-size:12px;color:var(--msm-sub);}
.msm-sw-btn{
  display:flex;align-items:center;gap:5px;
  background:var(--msm-navy);color:#fff;border:none;
  border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;
  cursor:pointer;transition:opacity var(--msm-t);
}
.msm-sw-btn:hover{opacity:.85;}
.msm-sw-btn svg{width:14px;height:14px;fill:var(--msm-gold);}
.msm-rm-btn{
  background:none;border:none;cursor:pointer;padding:6px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background var(--msm-t);
}
.msm-rm-btn:hover{background:var(--msm-hover);}
.msm-rm-btn svg{width:18px;height:18px;fill:var(--msm-sub);}
.msm-add-acct-row{
  border-radius:0 0 var(--msm-r) var(--msm-r);
  border-top:1px solid var(--msm-border);
}
.msm-logout-row,.msm-delete-row{border-radius:var(--msm-r);margin-top:4px;}
.msm-delete-row:hover{background:var(--msm-danger-bg);}

/* ── MODALS ── */
.msm-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:99999;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.msm-overlay.msm-open{opacity:1;pointer-events:all;}
.msm-modal{
  background:var(--msm-card);border-radius:var(--msm-r) var(--msm-r) 0 0;
  padding:28px 24px 44px;width:100%;max-width:560px;max-height:92vh;
  overflow-y:auto;position:relative;
  transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.msm-overlay.msm-open .msm-modal{transform:translateY(0);}
@media(min-width:600px){
  .msm-overlay{align-items:center;padding:24px;}
  .msm-modal{border-radius:var(--msm-r);transform:scale(.9);}
  .msm-overlay.msm-open .msm-modal{transform:scale(1);}
}
.msm-modal-x{
  position:absolute;top:14px;right:14px;
  background:var(--msm-bg);border:none;border-radius:50%;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background var(--msm-t);
}
.msm-modal-x:hover{background:var(--msm-border);}
.msm-modal-x svg{width:18px;height:18px;fill:var(--msm-text);}
.msm-modal-warn-icon{
  width:64px;height:64px;border-radius:50%;background:var(--msm-danger-bg);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.msm-modal-warn-icon svg{width:32px;height:32px;fill:var(--msm-danger);}
.msm-modal-logo{text-align:center;margin-bottom:16px;}
.msm-modal-title{font-size:20px;font-weight:700;color:var(--msm-text);text-align:center;margin:0 0 10px;}
.msm-modal-sub{font-size:14px;color:var(--msm-sub);text-align:center;margin:0 0 22px;line-height:1.5;}
.msm-modal-msg{font-size:15px;color:var(--msm-text);text-align:center;line-height:1.6;margin:0 0 28px;}
.msm-modal-msg strong{color:var(--msm-danger);}
.msm-modal-btns{display:flex;flex-direction:column;gap:10px;}

/* Buttons */
.msm-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--msm-r);padding:14px 20px;
  font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:opacity var(--msm-t),transform .1s;
}
.msm-btn:active{transform:scale(.97);}
.msm-btn-full{width:100%;}
.msm-btn-primary{background:var(--msm-navy);color:var(--msm-gold);}
.msm-btn-primary:hover{opacity:.88;}
.msm-btn-cancel{background:var(--msm-bg);color:var(--msm-text);border:1px solid var(--msm-border);}
.msm-btn-cancel:hover{background:var(--msm-border);}
.msm-btn-danger{background:var(--msm-danger);color:#fff;}
.msm-btn-danger:hover{opacity:.88;}
.msm-btn:disabled{opacity:.55;cursor:not-allowed;}

/* Form */
.msm-fg{margin-bottom:18px;text-align:left;}
.msm-fg label{display:block;font-size:12px;font-weight:700;color:var(--msm-sub);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;}
.msm-fi{
  width:100%;padding:13px 14px;border:1.5px solid var(--msm-border);
  border-radius:10px;font-size:15px;background:var(--msm-bg);color:var(--msm-text);
  outline:none;font-family:inherit;box-sizing:border-box;transition:border-color .2s;
}
.msm-fi:focus{border-color:var(--msm-navy);}
.msm-fi-wrap{position:relative;}
.msm-fi-wrap .msm-fi{padding-right:44px;}
.msm-eye{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:4px;
}
.msm-eye svg{width:20px;height:20px;fill:var(--msm-sub);}
.msm-form-err{
  background:var(--msm-danger-bg);color:var(--msm-danger);
  border:1px solid rgba(220,53,69,.25);border-radius:8px;
  padding:11px 14px;font-size:14px;margin-bottom:16px;
}

/* Spinner + keyframe */
@keyframes msm-spin{to{transform:rotate(360deg);}}
.msm-spin{animation:msm-spin .8s linear infinite;width:18px;height:18px;fill:currentColor;flex-shrink:0;}

/* Full-screen switch overlay — hidden by default, shown via JS */
.msm-full-overlay{
  display:none; /* must be none; flex overrides [hidden] attribute */
  position:fixed;inset:0;background:rgba(26,39,68,.93);
  z-index:999999;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;
}
.msm-full-overlay.msm-visible{display:flex;}
.msm-big-spin{width:52px;height:52px;fill:var(--msm-gold);}
.msm-full-overlay p{font-size:17px;font-weight:600;color:#fff;}

/* Login notice */
.msm-login-notice{text-align:center;padding:32px;color:var(--msm-sub);}
.msm-login-notice a{color:var(--msm-navy);}

/* Data saver */
html.msm-data-saver img:not(.msm-acct-av):not(.msm-linked-av){display:none;}
html.msm-data-saver video{display:none!important;}