#pj-picnic-spot-manager { font-family: inherit; }
#pj-picnic-spot-manager .pj-spot-launch {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.75rem 1.05rem;
  border: 1px solid rgba(94, 234, 212, 0.42);
  border-radius: 9999px;
  background: linear-gradient(135deg, #0f766e, #0d9488);
  color: #fff;
  box-shadow: 0 12px 30px rgba(2, 44, 48, 0.45);
  cursor: pointer;
}
#pj-picnic-spot-manager.is-active .pj-spot-launch { display: inline-flex; }
#pj-picnic-spot-manager .pj-spot-launch span { font-size: 1.35rem; line-height: 1; }
#pj-picnic-spot-manager .pj-spot-launch strong { font-size: 0.92rem; }
#pj-picnic-spot-manager .pj-spot-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: rgba(2, 8, 23, 0.7);
  backdrop-filter: blur(5px);
}
#pj-picnic-spot-manager .pj-spot-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 101;
  display: none;
  width: min(920px, calc(100vw - 2rem));
  max-height: min(760px, calc(100vh - 2rem));
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 1.25rem;
  background: #101923;
  color: #e2e8f0;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}
#pj-picnic-spot-manager.is-open .pj-spot-backdrop,
#pj-picnic-spot-manager.is-open .pj-spot-modal { display: block; }
body.pj-spot-modal-open { overflow: hidden; }
.pj-spot-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(15, 23, 42, 0.35));
}
.pj-spot-modal header small { color: #5eead4; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.pj-spot-modal header h2 { margin: 0.18rem 0 0; color: #fff; font-size: 1.55rem; font-weight: 900; }
.pj-spot-modal header p { margin: 0.25rem 0 0; color: #94a3b8; font-size: 0.9rem; }
.pj-spot-close { width: 2.35rem; height: 2.35rem; border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 0.7rem; background: rgba(15, 23, 42, 0.72); color: #cbd5e1; font-size: 1.45rem; cursor: pointer; }
.pj-spot-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr); gap: 1.1rem; max-height: calc(100vh - 12rem); overflow: auto; padding: 1.2rem; }
.pj-spot-body > div,
.pj-spot-body form { min-width: 0; padding: 1rem; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 1rem; background: rgba(15, 23, 42, 0.72); }
.pj-spot-body h3 { margin: 0 0 0.9rem; color: #fff; font-size: 1.02rem; font-weight: 900; }
.pj-spot-list { display: grid; gap: 0.65rem; }
.pj-spot-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.85rem; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 0.8rem; background: rgba(30, 41, 59, 0.72); }
.pj-spot-row > div { display: grid; gap: 0.18rem; min-width: 0; }
.pj-spot-row strong { overflow: hidden; color: #f8fafc; text-overflow: ellipsis; white-space: nowrap; }
.pj-spot-row span { color: #99f6e4; font-size: 0.88rem; }
.pj-spot-row small { width: fit-content; padding: 0.15rem 0.45rem; border-radius: 9999px; background: rgba(16, 185, 129, 0.14); color: #6ee7b7; font-weight: 800; }
.pj-spot-row small[data-status='inactive'] { background: rgba(244, 63, 94, 0.13); color: #fda4af; }
.pj-spot-edit { padding: 0.5rem 0.75rem; border: 1px solid rgba(94, 234, 212, 0.32); border-radius: 0.65rem; background: rgba(13, 148, 136, 0.14); color: #99f6e4; font-weight: 800; cursor: pointer; }
.pj-spot-body form { display: grid; align-content: start; gap: 0.8rem; }
.pj-spot-body label { display: grid; gap: 0.35rem; color: #cbd5e1; font-size: 0.82rem; font-weight: 800; }
.pj-spot-body input,
.pj-spot-body select,
.pj-spot-body textarea { width: 100%; min-height: 2.75rem; padding: 0.68rem 0.75rem; border: 1px solid rgba(148, 163, 184, 0.27); border-radius: 0.7rem; outline: none; background: #0b1420; color: #f8fafc; font: inherit; }
.pj-spot-body textarea { min-height: 5.3rem; resize: vertical; }
.pj-spot-body input:focus,
.pj-spot-body select:focus,
.pj-spot-body textarea:focus { border-color: rgba(45, 212, 191, 0.8); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12); }
.pj-spot-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pj-spot-message { min-height: 1.25rem; margin: 0; font-size: 0.82rem; font-weight: 800; }
.pj-spot-message[data-type='error'] { color: #fda4af; }
.pj-spot-message[data-type='success'] { color: #6ee7b7; }
.pj-spot-message[data-type='info'] { color: #93c5fd; }
.pj-spot-actions { display: flex; justify-content: flex-end; gap: 0.65rem; }
.pj-spot-actions button { min-height: 2.7rem; padding: 0.65rem 0.9rem; border-radius: 0.7rem; font-weight: 900; cursor: pointer; }
.pj-spot-cancel { border: 1px solid rgba(148, 163, 184, 0.25); background: transparent; color: #cbd5e1; }
.pj-spot-save { border: 0; background: #0d9488; color: #fff; }
.pj-spot-save:disabled { cursor: wait; opacity: 0.6; }
.pj-spot-empty { margin: 0; padding: 1rem; border: 1px dashed rgba(148, 163, 184, 0.25); border-radius: 0.8rem; color: #94a3b8; text-align: center; }
@media (max-width: 720px) {
  .pj-spot-body { grid-template-columns: 1fr; }
}