/* ================= Shared theme + auth/userbar/mailbox components ================= */
/* Prefixed with mxd- so it never collides with a game's own styles. */
:root{
  --mxd-void:#0a0a0d; --mxd-panel:#1c1c24; --mxd-panel-2:#28282f;
  --mxd-accent:#ff4433; --mxd-accent-bright:#ff7a5c; --mxd-accent-dim:#c73320;
  --mxd-blue:#3b82f6; --mxd-danger:#f87171;
  --mxd-ink:#f3f4f6; --mxd-ink-dim:#9aa0ac;
  --mxd-border:rgba(255,255,255,.14);
}

.mxd-smallbtn{
  padding:7px 12px;
  border-radius:8px;
  background:var(--mxd-panel-2);
  border:1px solid var(--mxd-border);
  color:var(--mxd-ink);
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}
.mxd-smallbtn.active{background:var(--mxd-accent);color:#fff;border-color:var(--mxd-accent);}

.mxd-userbar{
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:2px 4px 0;
  font-size:12px;
  color:var(--mxd-ink-dim);
  gap:8px;
}
.mxd-userbar #mxdUsernameLabel{color:var(--mxd-ink);font-weight:700;}
.mxd-userbar #mxdUsernameLabel::before{content:"歡迎, ";color:var(--mxd-ink-dim);font-weight:400;}

.mxd-mailbtn{position:relative;}
.mxd-mailbadge{
  position:absolute;top:-6px;right:-6px;
  background:var(--mxd-accent);color:#fff;
  border-radius:999px;min-width:16px;height:16px;
  font-size:10px;line-height:16px;text-align:center;padding:0 3px;
  font-weight:800;
}

.mxd-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);
  display:none;align-items:center;justify-content:center;z-index:200;padding:20px;
}
.mxd-modal-overlay.show{display:flex;}
.mxd-modal{
  width:100%;max-width:420px;max-height:80vh;overflow-y:auto;
  background:var(--mxd-panel);
  border:1px solid var(--mxd-border);border-radius:14px;padding:20px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
  font-family:'Noto Sans TC', sans-serif;
  color:var(--mxd-ink);
}
.mxd-modal h2{font-weight:800;color:var(--mxd-ink);margin:0 0 10px;font-size:17px;text-align:center;}
.mxd-modal .mxd-sub{text-align:center;font-size:11px;color:var(--mxd-ink-dim);margin:-4px 0 14px;}
.mxd-modal .mxd-closebtn{display:block;margin:14px auto 0;}

.mxd-authtabs{
  display:flex;gap:2px;margin-bottom:16px;
  background:var(--mxd-void);padding:3px;border-radius:10px;
}
.mxd-authtabs .mxd-smallbtn{flex:1;background:transparent;border:none;color:var(--mxd-ink-dim);}
.mxd-authtabs .mxd-smallbtn.active{background:var(--mxd-accent);color:#fff;}
.mxd-authform{display:flex;flex-direction:column;gap:10px;}
.mxd-authform input{
  background:var(--mxd-panel-2);
  border:1px solid var(--mxd-border);
  border-radius:8px;
  padding:11px 12px;
  color:var(--mxd-ink);
  font-size:14px;
  font-family:inherit;
  width:100%;
}
.mxd-authform input::placeholder{color:var(--mxd-ink-dim);}
.mxd-authform input:focus{outline:none;border-color:var(--mxd-accent);}
.mxd-authsubmit{width:100%;padding:12px;font-size:13.5px;margin-top:4px;background:var(--mxd-accent);color:#fff;border-color:var(--mxd-accent);box-shadow:0 8px 20px -8px rgba(255,68,51,.5);}
.mxd-autherror{min-height:16px;color:var(--mxd-danger);font-size:12px;text-align:center;margin-top:10px;}

.mxd-mail-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px;border-radius:10px;
  background:var(--mxd-panel-2);border:1px solid var(--mxd-border);
  margin-bottom:8px;
}
.mxd-mail-item.claimed{opacity:.5;}
.mxd-mail-item .mxd-info{font-size:12px;flex:1;}
.mxd-mail-item .mxd-info .mxd-amt{color:var(--mxd-accent-bright);font-weight:800;}
.mxd-mail-item .mxd-info .mxd-msg{color:var(--mxd-ink-dim);margin-top:2px;}
.mxd-mail-item .mxd-info .mxd-time{color:var(--mxd-ink-dim);font-size:10px;margin-top:2px;}
.mxd-mail-empty{text-align:center;color:var(--mxd-ink-dim);font-size:12px;padding:20px 0;}