.spot-details-modal.hidden { display: none; }
.spot-details-modal { position: fixed; inset: 0; z-index: 10000; }
.spot-details-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); }
.spot-details-card { position: relative; width: min(540px, calc(100vw - 24px)); height: min(564px, calc(100vh - 24px)); margin: max(12px, calc((100vh - min(564px, calc(100vh - 24px))) / 2)) auto 0; padding: 35px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 24px; background: #000; box-shadow: 0 20px 64px rgba(0, 0, 0, 0.8); color: #fff; animation: spotTrayIn 0.22s ease-out; }
@keyframes spotTrayIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.spot-details-content { height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #555 #111; }
.spot-details-header { display: flex; align-items: flex-start; gap: 15px; }
.spot-details-heading { min-width: 0; flex: 1; }
.spot-details-title { margin: 0 0 10px; color: #fff; font-size: 24px; font-weight: 400; overflow-wrap: anywhere; }
.spot-details-meta { margin: 4px 0; color: #fff; font-size: 12px; }
.spot-details-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.spot-details-icon { width: 64px; height: 64px; object-fit: contain; filter: brightness(0) invert(1); }
.spot-details-count { min-width: 180px; min-height: 42px; padding: 8px 18px; border: 0; border-radius: 999px; background: #fff; color: #000; font: 600 12px inherit; white-space: nowrap; cursor: pointer; }
.spot-details-notes { width: 100%; min-height: 88px; margin-top: 20px; padding: 14px 12px; border: 1px solid #fff; border-radius: 8px; color: #fff; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.spot-details-notes-label { display: block; margin-top: -23px; margin-left: 8px; width: max-content; padding: 0 4px; background: #000; font-size: 12px; }
.spot-details-divider { height: 2px; margin: 20px 0 24px; background: #fff; }
.spot-details-actions { display: flex; flex-direction: column; gap: 14px; }
.spot-details-action { width: 100%; min-height: 48px; border: 1px solid #fff; border-radius: 999px; background: #000; color: #fff; font: 600 14px inherit; cursor: pointer; }
.spot-details-action:hover, .spot-details-close:hover { background: #fff; color: #000; }
.spot-details-action:disabled { opacity: 0.5; cursor: wait; }
.spot-details-subheader { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.spot-details-subheader h2 { flex: 1; margin: 0; color: #fff; font-size: 24px; font-weight: 400; }
.spot-details-close { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid transparent; border-radius: 50%; background: #000; color: #fff; font-size: 24px; cursor: pointer; }
.spot-entry-list { display: flex; flex-direction: column; }
.spot-entry-empty { padding: 18px 0 24px; color: #fff; font-size: 16px; }
.spot-entry-row { width: 100%; padding: 14px 0; border: 0; border-bottom: 2px solid #fff; background: transparent; color: #fff; text-align: left; font: 400 16px inherit; cursor: pointer; }
.spot-entry-row:hover { color: #00d4dd; }
.spot-entry-label { display: block; margin: 0 0 6px; color: #fff; font-size: 12px; }
.spot-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.spot-entry-value { color: #fff; font-size: 16px; line-height: 1.35; }
.spot-entry-input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #fff; border-radius: 8px; background: #000; color: #fff; font: 400 16px inherit; }
.spot-entry-moon { display: flex; align-items: center; gap: 10px; }
.spot-entry-moon-icon { font-size: 32px; }
.spot-entry-stars { display: flex; justify-content: space-evenly; margin: 6px 0 20px; }
.spot-entry-star { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; }
.spot-entry-star[disabled] { cursor: default; }
.spot-fish-list { max-height: 405px; overflow-y: auto; }
.spot-fish-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; color: #fff; cursor: pointer; }
.spot-fish-row input { width: 20px; height: 20px; accent-color: #fff; }
.spot-entry-status { min-height: 20px; margin-top: 10px; color: #ff6b6b; font-size: 12px; text-align: center; }
@media (max-width: 520px) {
    .spot-details-card { padding: 26px 22px; }
    .spot-details-count { min-width: 150px; }
    .spot-entry-grid { grid-template-columns: 1fr; }
}