.mj-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 12px; }
.mj-list, .mj-board { display: grid; gap: 10px; }
.mj-row { display: flex; align-items: center; gap: 10px; border: 1px solid #ddd; border-radius: 10px; padding: 10px; background: #fff; }
.mj-main { flex: 1; min-width: 0; }
.mj-title { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-artist { opacity: 0.75; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-btn { padding: 10px 14px; border: 1px solid #333; background: #f7f7f7; border-radius: 10px; cursor: pointer; font-weight: 700; }
.mj-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.mj-toast { margin-top: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 10px; }
.mj-row-board .mj-rank { width: 30px; text-align: center; font-weight: 800; }
.mj-row-board .mj-votes { width: 40px; text-align: right; font-weight: 800; }
.mj-small { margin-top: 10px; font-size: 12px; opacity: 0.7; }

.mj-sub{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.mj-tag{ font-size:12px; padding:4px 8px; border:1px solid #ddd; border-radius:999px; opacity:.8; background:#fafafa; }

/* FULLSCREEN modal */
.mj-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: stretch; justify-content: stretch; padding: 0; z-index: 9999; }
.mj-modal-card { background: #fff; border-radius: 0; width: 100vw; height: 100vh; max-height: none; overflow: hidden; padding: 14px; display: flex; flex-direction: column; }
.mj-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; background: #fff; padding: 10px 0 12px; }
.mj-modal-title { font-weight: 900; font-size: 18px; flex: 1; min-width: 0; padding-right: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-done { flex: 0 0 auto; white-space: nowrap; }
.mj-modal-body { flex: 1; overflow: auto; }

.mj-block { margin-top: 10px; }
.mj-label { font-weight: 800; margin-bottom: 6px; opacity: 0.8; }
.mj-notes, .mj-lyrics { border: 1px solid #ddd; border-radius: 10px; padding: 10px; white-space: pre-wrap; }
.mj-lyrics { max-height: 58vh; overflow-y: auto; }

/* Fixed toast for request feedback (always visible, TOP centre) */
.mj-fixed-toast{
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 2147483647; /* max-ish: beats most themes */
  padding: 14px 18px;
  border: 3px solid #111;
  border-radius: 14px;
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  max-width: min(680px, 92vw);
  text-align: center;
}

/* Dedications (Mick modal) */
.mj-dedications { border: 1px solid #ddd; border-radius: 10px; padding: 10px; }

/* ===========================
   NEW: Requester chooser UI
   =========================== */
.mj-chooser{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px;
  background:#fff;
  margin: 10px 0 14px;
}

.mj-search-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.mj-search{
  flex:1;
  min-width:0;
  padding:12px 14px;
  border:1px solid #cfcfcf;
  border-radius:12px;
  font-size:16px;
}

.mj-tabs{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

.mj-tab{
  padding:10px 12px;
  border:1px solid #333;
  background:#f7f7f7;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
}

.mj-tab.is-active{
  background:#111;
  color:#fff;
}

.mj-panel{
  display:none;
  margin-top:10px;
  border-top:1px dashed #e5e7eb;
  padding-top:10px;
}

.mj-panel.is-active{ display:block; }

.mj-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.mj-panel-title{
  font-weight:900;
  opacity:.9;
}

.mj-artist-search{
  width:100%;
  padding:12px 14px;
  border:1px solid #cfcfcf;
  border-radius:12px;
  font-size:15px;
  margin-bottom:10px;
}

.mj-pill-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.mj-pill{
  padding:10px 12px;
  border:1px solid #333;
  background:#f7f7f7;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  font-size:14px;
}

.mj-pill.is-active{
  background:#111;
  color:#fff;
}

.mj-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.mj-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid #ddd;
  border-radius:999px;
  background:#fafafa;
  font-weight:800;
  font-size:13px;
}

.mj-chip button{
  border:1px solid #333;
  background:#f7f7f7;
  border-radius:999px;
  padding:2px 8px;
  cursor:pointer;
  font-weight:900;
}

.mj-meta{
  margin-top:10px;
  font-size:12px;
  opacity:.8;
}
/* ===== MJ Control modal hard-fixes (force) ===== */

/* Make sure modal sizing behaves and nothing clips the header button */
.mj-modal-card {
  box-sizing: border-box !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 14px !important;
  overflow: hidden !important;
}

/* Header: keep it visible and ensure DONE never gets pushed off-screen */
.mj-modal-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px 12px 0 !important; /* right padding gives DONE breathing room */
}

/* Title must shrink/ellipsis so DONE stays on-screen */
.mj-modal-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* DONE must never shrink */
.mj-done {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Body can scroll if needed, but lyrics must ALWAYS be its own scroll viewport */
.mj-modal-body {
  flex: 1 1 auto !important;
  overflow: auto !important;
}

/* Force lyrics to be a fixed-height internal scroller (this creates the scrollbar) */
.mj-lyrics {
  box-sizing: border-box !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 220px) !important; /* tweakable */
  min-height: 280px !important;
}

/* ---- Tips Modal Overlay ---- */
body.mj-modal-open { overflow: hidden; }

.mj-tip-backdrop{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.55);
  z-index:99999;
}

.mj-tip-modal{ width:100%; max-width:720px; }

.mj-tip-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  padding:16px;
}

.mj-tip-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.mj-tip-title{ font-size:20px; font-weight:800; }

.mj-tip-x{
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.mj-tip-lead{ margin:6px 0 14px; color:#111; }

.mj-tip-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}

.mj-tip-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:54px;
  font-weight:800;
  text-decoration:none;
}

.mj-tip-btn.is-disabled{
  opacity:.5;
  pointer-events:auto; /* allow our preventDefault handler */
  cursor:not-allowed;
}

.mj-tip-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.mj-tip-no{
  height:44px;
  border-radius:12px;
  padding:0 14px;
}

.mj-tip-note{ opacity:.7; }

@media (max-width:560px){
  .mj-tip-grid{ grid-template-columns:1fr; }
}
.mj-tips .mj-tip-lead{
  font-family: inherit;
  font-size: 1.15rem;
  line-height: 1.5;
  font-weight: 400;
  color: #111827;
  margin: 0 0 20px 0;
  letter-spacing: 0;
  text-transform: none;
}

.mj-tips .mj-tip-lead p{
  margin: 0;
  font: inherit;
  color: inherit;
}

.mj-tips .mj-tip-foot,
.mj-tips .mj-small{
  font-family: inherit;
  color: #6b7280;
}

/* ===== Session management bar (control page) ===== */
.mj-session-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.mj-btn-danger {
  background: #fff0f0;
  border-color: #c0392b;
  color: #c0392b;
}

.mj-btn-danger:hover:not(:disabled) {
  background: #c0392b;
  color: #fff;
}

/* ===== Manage Gig modal ===== */
.mj-manage-gig-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}

.mj-manage-gig-modal .mj-modal-card {
  width: 100%;
  max-width: 480px;
  height: auto;
  min-height: unset;
  border-radius: 16px !important;
}

.mj-gig-type-toggle {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.mj-gig-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

.mj-gig-option input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.mj-gig-desc {
  font-weight: 400;
  opacity: 0.7;
  font-size: 13px;
}

.mj-action-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}