/* ============================================================
   SMASHMOUTH PROS — edit mode
   Only loaded/activated when the URL ends in ?edit
   ============================================================ */

#smp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: #141821; color: #fff;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif; font-size: 14px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.55);
}
#smp-bar .brand {
  font-family: 'Bangers', 'Arial Black', sans-serif;
  font-size: 20px; letter-spacing: 2px; color: #1e8fd5;
}
#smp-bar input[type=password] {
  background: #0b0f18; border: 1px solid #39414f; color: #fff;
  border-radius: 6px; padding: 7px 10px; font-size: 14px; width: 180px;
}
#smp-bar button {
  background: #1e8fd5; border: none; color: #fff; font-weight: 700;
  border-radius: 6px; padding: 8px 14px; font-size: 13px; cursor: pointer;
}
#smp-bar button.ghost { background: #2a313d; }
#smp-bar button:hover { filter: brightness(1.12); }
#smp-bar .spacer { flex: 1; }
#smp-bar .status { font-size: 13px; color: #9aa4b4; min-width: 150px; }
#smp-bar .status.ok   { color: #57d38c; }
#smp-bar .status.busy { color: #e8a007; }
#smp-bar .status.err  { color: #ff6b6b; }
#smp-bar label.auto { display: flex; align-items: center; gap: 6px; color: #9aa4b4; font-size: 13px; cursor: pointer; }
#smp-bar .hint { color: #6b7280; font-size: 12px; }

body.smp-editing { padding-bottom: 64px; }

/* editable regions */
body.smp-editing [data-smp-ed] {
  outline: 1px dashed rgba(30,143,213,.55);
  outline-offset: 6px;
  border-radius: 6px;
  transition: outline-color .15s ease, background .15s ease;
  cursor: text;
}
body.smp-editing [data-smp-ed]:hover { outline-color: rgba(30,143,213,.95); }
body.smp-editing [data-smp-ed]:focus {
  outline: 2px solid #1e8fd5;
  background: rgba(30,143,213,.06);
}
body.smp-editing [data-smp-ed].dirty { outline-color: #e8a007; }
body.smp-editing [contenteditable=false] { cursor: default; }

/* toast */
#smp-toast {
  position: fixed; right: 18px; bottom: 70px; z-index: 201;
  background: #141821; color: #fff; border-left: 4px solid #57d38c;
  padding: 10px 16px; border-radius: 8px; font-size: 14px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
  pointer-events: none;
}
#smp-toast.show { opacity: 1; transform: translateY(0); }
#smp-toast.err { border-left-color: #ff6b6b; }

/* the remote gets out of the way while editing */
body.smp-editing #remote { opacity: .35; }
body.smp-editing #remote:hover { opacity: 1; }

/* ---------------- formatting toolbar (player lists) ---------------- */
#smp-fmt{
  position:fixed; left:50%; transform:translateX(-50%); bottom:58px; z-index:201;
  display:none; align-items:center; gap:5px; padding:7px 9px;
  background:#141821; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.55);
  font-family:'Inter','Segoe UI',Arial,sans-serif;
}
#smp-fmt.on{ display:flex; }
#smp-fmt button{
  border:none; border-radius:6px; padding:6px 9px; font-size:12px; font-weight:800;
  letter-spacing:.04em; cursor:pointer; background:#2a313d; color:#fff;
}
#smp-fmt button:hover{ filter:brightness(1.25); }
#smp-fmt button.qb{ color:#ff8a8a } #smp-fmt button.rb{ color:#7cc4f5 }
#smp-fmt button.wr{ color:#6ee7a0 } #smp-fmt button.te{ color:#c79bf0 }
#smp-fmt button.def{ color:#e8c46a } #smp-fmt button.k{ color:#c9ced6 }
#smp-fmt button.star{ color:#e8a007; font-size:14px; padding:4px 9px }
#smp-fmt button.add{ background:#1e8fd5 }
#smp-fmt .div{ width:1px; height:20px; background:#39414f; margin:0 3px }
#smp-fmt .lbl{ color:#6b7280; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
               padding-right:2px }