body.with-header.form-page:has(.fishing-report-show-container) .main-content {align-items: flex-start}
.fishing-report-show-container {width: 100%;max-width: min(90%, 600px);max-height: calc(100vh - 80px);margin: 10px auto;padding: 16px;font-family: var(--font-family-base);background-color: #fff;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);overflow-x: hidden;overflow-y: auto;box-sizing: border-box;scrollbar-width: none;-ms-overflow-style: none}
.fishing-report-show-container::-webkit-scrollbar {display: none}
.report-back-nav {margin-bottom: 8px}
.report-back-nav-link {display: inline-flex;align-items: center;gap: 4px;font-size: 0.8125rem;font-weight: 500;color: #65676b;text-decoration: none;transition: color 0.2s}
.report-back-nav-link:hover {color: #1877f2}
.report-back-nav-link i {font-size: 0.6875rem}
.image-container {position: relative;width: 100%;aspect-ratio: 4 / 3;overflow: hidden;border-radius: 8px;cursor: pointer}
.image-container .fishing-report-image-large {width: 100%;height: 100%;object-fit: cover;object-position: center}
.image-container:active .fishing-report-image-large {transform: scale(1.02)}
.fishing-report-image-large {width: 100%;height: 100%;object-fit: cover;transition: transform 0.2s ease-out}
.pc-user-header {display: none}
.image-overlay {display: flex;position: absolute;bottom: 0;left: 0;right: 0;height: 60%;background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);align-items: flex-end;padding: 12px;pointer-events: none}
.image-overlay-content {display: flex;flex-direction: column;gap: 8px;pointer-events: auto;max-width: 95%}
.image-overlay-header {display: flex;align-items: center;gap: 14px}
.avatar-with-time-badge {position: relative;display: inline-block;flex-shrink: 0}
.avatar-time-badge {position: absolute;bottom: -2px;right: -2px;display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;background-color: rgba(255, 255, 255, 0.95);border-radius: 50%;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)}
.avatar-time-badge .time-of-day-icon {width: 14px;height: 14px}
.avatar-transition-container {position: relative;width: 36px;height: 36px;flex-shrink: 0}
.pc-user-header .avatar-transition-container {width: 32px;height: 32px}
.time-icon-large {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: opacity 0.5s ease-out}
.time-icon-large.morning {background-color: rgba(255, 255, 255, 0.9)}
.time-icon-large.day {background-color: rgba(255, 255, 255, 0.9)}
.time-icon-large.night {background-color: rgba(255, 255, 255, 0.9)}
.time-icon-large .time-icon-svg {width: 80%;height: 80%}
.time-icon-large.morning .time-icon-svg {color: #FFC107}
.time-icon-large.day .time-icon-svg {color: #2196F3}
.time-icon-large.night .time-icon-svg {color: #3F51B5}
.time-icon-large.fade-out {opacity: 0}
.avatar-transition-container .overlay-user-avatar-link,
.avatar-transition-container .pc-user-avatar-link {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 0.5s ease-in;display: flex;align-items: center;justify-content: center}
.avatar-transition-container .overlay-user-avatar-link.fade-in,
.avatar-transition-container .pc-user-avatar-link.fade-in {opacity: 1}
.time-of-day-badge {display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;background-color: rgba(255, 255, 255, 0.9);border-radius: 50%;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15)}
.time-of-day-badge .time-of-day-icon {color: inherit;filter: none}
.user-info {display: flex;flex-direction: column;gap: 2px}
.fishing-report-datetime {color: rgba(255, 255, 255, 0.85);font-size: 0.8em;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)}
.image-overlay-comment {color: #fff;font-size: 0.95em;line-height: 1.5;margin: 0;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);white-space: pre-wrap;max-height: 4.5em;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical}
.image-overlay .fishing-report-user-name {color: #fff;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)}
.image-overlay .fishing-report-user-name a {color: #fff}
.overlay-user-avatar-link {flex-shrink: 0}
.overlay-user-avatar-link .user-avatar {border: 2px solid rgba(255, 255, 255, 0.9);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)}
.pc-user-avatar-link {flex-shrink: 0;text-decoration: none}
.pc-user-avatar-link .user-avatar {border: 2px solid #fff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12)}
.image-actions {position: absolute;top: 10px;right: 10px;display: flex;gap: 8px;z-index: 2}
.image-action-button {display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;border: none;background-color: rgba(255, 255, 255, 0.9);border-radius: 50%;cursor: pointer;transition: background-color 0.2s, transform 0.2s;color: #606770;text-decoration: none;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15)}
.image-action-button:hover {background-color: #fff;transform: scale(1.05)}
.image-action-button:active {transform: scale(0.95)}
.image-action-button svg {width: 18px;height: 18px}
.location-type-badge {display: flex;align-items: center;gap: 5px;background: rgba(255, 255, 255, 0.95);padding: 6px 12px;border-radius: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);cursor: default}
.location-type-badge-icon {width: 16px;height: 16px;color: #3b82f6;display: flex;align-items: center;justify-content: center}
.location-type-badge-icon svg {width: 100%;height: 100%}
.location-type-badge-text {font-size: 12px;font-weight: 500;color: #333}
.location-type-badge-divider {width: 1px;height: 14px;background: rgba(148, 163, 184, 0.6)}
.location-type-badge-link {font-size: 12px;font-weight: 600;color: #2563eb;text-decoration: none;max-width: 140px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.location-type-badge-link:hover {text-decoration: underline}
.image-action-button.delete-button:hover {background-color: #fff;color: #d9534f}
.image-action-button.privacy-indicator {background-color: rgba(255, 255, 255, 0.95);cursor: default}
.image-action-button.privacy-indicator:hover {background-color: rgba(255, 255, 255, 0.95)}
.image-action-button.privacy-indicator svg {width: 16px;height: 16px}
.comment-notification-bar {position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);z-index: 9999;text-decoration: none;display: block}
@media (max-width: 768px) {.comment-notification-bar {bottom: calc(70px + env(safe-area-inset-bottom, 0))}}
.comment-notification-content {display: flex;align-items: center;gap: 8px;padding: 12px 20px;background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);color: #fff;border: none;border-radius: 30px;cursor: pointer;box-shadow: 0 4px 15px rgba(25, 118, 210, 0.4);transition: transform 0.2s ease, box-shadow 0.2s ease;font-size: 14px;font-weight: 500}
.comment-notification-content:hover {transform: scale(1.02);box-shadow: 0 6px 20px rgba(25, 118, 210, 0.5)}
.comment-notification-content:active {transform: scale(0.98)}
.comment-notification-icon {width: 18px;height: 18px;flex-shrink: 0}
.comment-notification-text {white-space: nowrap}
.comment-notification-arrow {width: 16px;height: 16px;flex-shrink: 0;animation: bounce 1.5s infinite}
@keyframes bounce {0%, 100% {transform: translateY(0)}
50% {transform: translateY(3px)}}
.fishing-report-details {display: flex;flex-direction: column;gap: 8px;width: 100%;max-width: 100%;box-sizing: border-box}
.fishing-report-header {display: flex;align-items: center;gap: 10px}
.fishing-report-header-actions {display: flex;align-items: center;gap: 8px;margin-left: auto}
.time-of-day-icon {width: 24px;height: 24px;color: #606770}
.fishing-report-user-name {font-size: 1em;font-weight: bold}
.fishing-report-user-name a {text-decoration: none;color: inherit}
.fishing-report-comment-wrapper {display: none;background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);border-radius: 12px;padding: 14px 16px;margin-top: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);border: 1px solid #e8ecef}
.owner-comment-body {position: relative;padding-left: 24px}
.quote-icon {position: absolute;left: 0;top: 2px;width: 16px;height: 16px;color: #1877f2;opacity: 0.5}
.fishing-report-comment {font-size: 0.95em;color: #333;white-space: pre-wrap;margin: 0;line-height: 1.7}
.fishing-report-comment.collapsed {display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden}
.comment-toggle-button {background: none;border: none;color: #1877f2;font-size: 0.8em;padding: 6px 0 0;cursor: pointer;font-weight: 500;margin-left: 24px}
.comment-toggle-button:hover {text-decoration: underline}
.comment-toggle-button.hidden {display: none}
.fish-info-section,
.used-tackle-section {border-top: none;padding: 12px;margin-top: 8px;background-color: #f8f9fa;border-radius: 10px}
.fishing-report-details > .fish-info-section:first-child {border-top: none;padding: 12px;margin-top: 0;background-color: #f8f9fa;border-radius: 10px}
.fish-info-section h3,
.fishing-report-details .used-tackle-section h3 {font-size: 0.9em;font-weight: 600;margin-bottom: 6px;color: #606770}
.no-tackle-message {color: #606770;font-size: 0.9em;margin: 0}
.fishing-report-details .tackle-set-display {margin-bottom: 12px;width: 100%;box-sizing: border-box}
.fishing-report-details .tackle-set-display .tackle-set-name {font-size: 0.75em;font-weight: 600;color: #606770;display: block;margin-bottom: 8px}
.fishing-report-details .tackle-items-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 8px;width: 100%;max-width: 100%}
.fishing-report-details .tackle-item-card {display: grid;grid-row: span 2;grid-template-rows: subgrid;align-items: start;gap: 8px;padding: 10px;background: #f7f8fa;border-radius: 8px;border: 1px solid #e4e6eb;overflow: hidden;min-width: 0}
.fishing-report-details .tackle-item-main {display: flex;align-items: flex-start;gap: 10px;width: 100%}
.fishing-report-details .tackle-item-icon {flex-shrink: 0;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;background: #fff;border-radius: 6px;border: 1px solid #e4e6eb}
.fishing-report-details .tackle-card-icon {width: 20px;height: 20px;fill: #65676b}
.fishing-report-details .tackle-item-info {display: flex;flex-direction: column;gap: 2px;min-width: 0}
.fishing-report-details .tackle-item-name {font-size: 0.85em;font-weight: 600;color: #1c1e21;line-height: 1.3;word-break: break-word}
.fishing-report-details .tackle-item-manufacturer {font-size: 0.72em;color: #65676b;font-weight: 500}
.fishing-report-details .tackle-item-card.has-rating {cursor: pointer;animation: rating-glow 3s ease-in-out infinite}
@keyframes rating-glow {0%, 100% {box-shadow: 0 4px 8px -2px rgba(24, 119, 242, 0.2)}
50% {box-shadow: 0 5px 12px -2px rgba(24, 119, 242, 0.5)}}
@media (prefers-reduced-motion: reduce) {.fishing-report-details .tackle-item-card.has-rating {animation: none}}
.fishing-report-details .tackle-rating-indicator {margin-left: auto;flex-shrink: 0;color: #9ca3af;display: flex;align-items: center;transition: transform 0.2s ease}
.fishing-report-details .tackle-rating-indicator svg {width: 16px;height: 16px}
[data-tackle-memo-open-value="true"] .tackle-rating-indicator {transform: rotate(180deg)}
.fishing-report-details .tackle-item-rating {align-self: stretch;background: #fff;border: 1px solid #e9ecef;border-radius: 6px;padding: 6px 8px;text-align: left}
.fishing-report-details .tackle-item-rating .rating-label {display: block;font-size: 0.65em;font-weight: 600;color: #606770;margin-bottom: 2px}
.fishing-report-details .tackle-item-rating .rating-text {display: block;font-size: 0.78em;font-weight: 500;color: #1c1e21;line-height: 1.5;word-break: break-word;white-space: pre-wrap;text-align: left}
.fish-info-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));gap: 8px}
.fish-info-item {background-color: #ffffff;padding: 8px 10px;border-radius: 8px;border: 1px solid #e9ecef}
.fish-info-label {font-weight: bold;font-size: 0.85em;color: #606770;display: block;margin-bottom: 3px}
.fish-info-value {font-size: 1em}
.fish-info-value a {color: #2563eb;text-decoration: none;font-weight: 600}
.fish-info-value a:hover {text-decoration: underline}
.fish-info-value.empty {color: #adb5bd}
.fish-info-value.ai-fish-name {color: #1877f2;font-weight: 500}
@media (max-width: 768px) {body.with-header.form-page:has(.fishing-report-show-container) .main-content {align-items: flex-start;overflow-y: auto;padding-bottom: calc(60px + env(safe-area-inset-bottom, 0))}
body.form-page .fishing-report-show-container {margin: 0;padding: 0;width: 100%;max-width: 100%;max-height: none;box-sizing: border-box;border-radius: 0;box-shadow: none;overflow: visible}
.fishing-report-show-container .image-navigation-wrapper {max-width: 100%;margin-bottom: 0}
.fishing-report-show-container .image-container {width: 100%;height: 35vh;margin: 0;padding: 0;border-radius: 0;overflow: hidden}
.fishing-report-show-container .fishing-report-image-large {width: 100%;height: 100%;max-height: none;margin: 0;padding: 0;border-radius: 0;object-fit: cover;object-position: center;display: block}
.image-overlay {padding: 10px 14px}
.time-of-day-badge {width: 32px;height: 32px}
.fishing-report-datetime {font-size: 0.7em}
.image-overlay-comment {display: none}
.fishing-report-comment-wrapper {display: block;padding: 12px 14px;margin-top: 10px}
.owner-comment-body {padding-left: 20px}
.quote-icon {width: 14px;height: 14px}
.comment-toggle-button {margin-left: 20px}
.image-actions {top: 8px;right: 8px;gap: 6px}
.image-action-button {width: 32px;height: 32px}
.image-action-button svg {width: 16px;height: 16px}
.location-type-badge {padding: 5px 10px}
.location-type-badge-icon {width: 14px;height: 14px}
.location-type-badge-text {font-size: 11px}
.location-type-badge-divider {height: 12px}
.location-type-badge-link {font-size: 11px;max-width: 110px}
.fishing-report-details {padding: 12px 14px 16px;gap: 10px}
.fishing-report-header {padding-bottom: 8px;border-bottom: 1px solid #f0f2f5}
.fishing-report-comment {font-size: 0.9em;line-height: 1.6;color: #1c1e21}
.fish-info-grid {grid-template-columns: repeat(2, 1fr);gap: 6px}
.fish-info-item {padding: 8px;border-radius: 8px;background-color: #ffffff;border: 1px solid #e9ecef}
.fish-info-label {font-size: 0.7em;margin-bottom: 3px}
.fish-info-value {font-size: 0.85em;font-weight: 500}
.fish-info-section,
.used-tackle-section {padding: 10px;margin-top: 8px;border-top: none;background-color: #f8f9fa;border-radius: 10px}
.fishing-report-details > .fish-info-section:first-child {border-top: none;padding: 10px;margin-top: 0;background-color: #f8f9fa;border-radius: 10px}
.fish-info-section h3,
.fishing-report-details .used-tackle-section h3 {font-size: 0.8em;font-weight: 600;margin-bottom: 6px;color: #606770}
.fish-info-item.full-width {grid-column: 1 / -1}
.fishing-report-details .tackle-set-display {margin-bottom: 8px}
.fishing-report-details .tackle-set-display .tackle-set-name {font-size: 0.65em;font-weight: 600;color: #606770;display: block;margin-bottom: 6px}
.fishing-report-details .tackle-items-grid {grid-template-columns: repeat(2, 1fr);gap: 6px}
.fishing-report-details .tackle-item-card {gap: 6px;padding: 8px 6px}
.fishing-report-details .tackle-item-main {flex-direction: column;align-items: center;text-align: center;gap: 4px}
.fishing-report-details .tackle-memo-indicator {position: absolute;top: 4px;right: 4px;margin-left: 0}
.fishing-report-details .tackle-item-card.has-memo {position: relative}
.fishing-report-details .memo-icon {width: 12px;height: 12px}
.fishing-report-details .tackle-rating-indicator svg {width: 14px;height: 14px}
.fishing-report-details .tackle-item-icon {width: 24px;height: 24px}
.fishing-report-details .tackle-card-icon {width: 14px;height: 14px}
.fishing-report-details .tackle-item-info {align-items: center;gap: 1px}
.fishing-report-details .tackle-item-name {font-size: 0.7em;font-weight: 600;line-height: 1.25}
.fishing-report-details .tackle-item-manufacturer {font-size: 0.6em;font-weight: 500}
.fishing-report-details .tackle-item-rating {padding: 5px 6px}
.fishing-report-details .tackle-item-rating .rating-label {font-size: 0.6em}
.fishing-report-details .tackle-item-rating .rating-text {font-size: 0.65em}
.fishing-report-details .tackle-item-memo {padding: 6px 8px;text-align: left}
.fishing-report-details .tackle-item-memo p {font-size: 0.6em}
.header-action-button {width: 32px;height: 32px}
.header-action-button svg {width: 18px;height: 18px}}
.time-of-day-icon.morning {color: #FFC107}
.time-of-day-icon.day {color: #2196F3}
.time-of-day-icon.night {color: #3F51B5}
.login-form input[type="submit"]:disabled,
.login-form button.login-form__submit:disabled {background-color: #a0aec0;cursor: not-allowed}
.lightbox-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.9);display: flex;justify-content: center;align-items: center;z-index: var(--z-index-modal);cursor: pointer}
.lightbox-overlay.hidden {display: none}
.lightbox-image {max-width: 95%;max-height: 95%;object-fit: contain}
.header-action-button {display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;border: none;background-color: #f0f2f5;border-radius: 50%;cursor: pointer;transition: background-color 0.2s, color 0.2s;color: #606770;text-decoration: none}
.header-action-button:hover {background-color: #e4e6e9;color: #1877f2}
.header-action-button:active {background-color: #dddfe2}
.header-action-button svg {width: 20px;height: 20px}
.header-action-button.delete-button:hover {background-color: #ffebee;color: #d9534f}
.image-navigation-wrapper {position: relative;width: 100%;max-width: 500px;margin-left: auto;margin-right: auto;margin-bottom: 12px;animation: fade-in 0.3s ease-out}
@keyframes fade-in {from {opacity: 0}
to {opacity: 1}}
@keyframes fade-in-up {from {opacity: 0;transform: translateY(10px)}
to {opacity: 1;transform: translateY(0)}}
.fishing-report-details {animation: fade-in-up 0.3s ease-out 0.1s both}
.bait-reactions-container {animation: fade-in-up 0.3s ease-out 0.15s both}
.fishing-report-comment-wrapper {animation: fade-in-up 0.3s ease-out 0.2s both}
.fish-info-section {animation: fade-in-up 0.3s ease-out 0.25s both}
.used-tackle-section {animation: fade-in-up 0.3s ease-out 0.3s both}
.fish-encyclopedia-modal {animation: fade-in 0.2s ease-out}
.swipe-nav-arrow {position: absolute;top: 50%;transform: translateY(-50%);z-index: 10;display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;background: rgba(255, 255, 255, 0.9);border-radius: 50%;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);color: #333;text-decoration: none;transition: all 0.2s ease;opacity: 0.7}
.swipe-nav-arrow:hover {opacity: 1;background: #fff;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);transform: translateY(-50%) scale(1.05)}
.swipe-nav-arrow:active {transform: translateY(-50%) scale(0.95)}
.swipe-nav-arrow svg {width: 24px;height: 24px}
.swipe-nav-prev {left: 8px}
.swipe-nav-next {right: 8px}
.image-container.slide-out-left {animation: slide-out-left 0.2s ease-out forwards}
.image-container.slide-out-right {animation: slide-out-right 0.2s ease-out forwards}
@keyframes slide-out-left {from {opacity: 1;transform: translateX(0)}
to {opacity: 0;transform: translateX(-30px)}}
@keyframes slide-out-right {from {opacity: 1;transform: translateX(0)}
to {opacity: 0;transform: translateX(30px)}}
@media (max-width: 768px) {.swipe-nav-arrow {width: 36px;height: 36px;opacity: 0.5}
.swipe-nav-arrow svg {width: 20px;height: 20px}
.swipe-nav-prev {left: 4px}
.swipe-nav-next {right: 4px}}
.comments-section {margin-top: 24px;padding-top: 20px;border-top: 1px solid #e5e7eb}
.comments-section h3 {font-size: 16px;font-weight: 600;color: #374151;margin-bottom: 16px;display: flex;align-items: center;gap: 8px}
.comments-section h3 i {color: #3b82f6}
.comments-section h3 #comments-count {font-weight: 700;color: #3b82f6}
.comments-list {margin-bottom: 16px}
.comments-empty {text-align: center;color: #9ca3af;font-size: 14px;padding: 24px 0}
.comment {position: relative;padding: 12px;padding-right: 40px;margin-bottom: 12px;background: #f9fafb;border-radius: 8px}
.comment:last-child {margin-bottom: 0}
.comment-header {display: flex;align-items: center;gap: 8px;margin-bottom: 8px}
.comment-user {display: flex;align-items: center;gap: 8px;text-decoration: none;color: inherit}
.comment-user:hover .comment-user-name {text-decoration: underline}
.comment-user-icon {width: 32px !important;height: 32px !important;border-radius: 50%;object-fit: cover;flex-shrink: 0}
.comment-user-icon.user-avatar-default {background: #e5e7eb}
.comment-user-name {font-weight: 600;font-size: 13px;color: #374151}
.comment-time {font-size: 11px;color: #9ca3af;margin-left: auto}
.comment-delete-form {position: absolute;top: 10px;right: 10px;margin: 0;padding: 0}
.comment-delete-btn {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;background: transparent;border: none;color: #9ca3af;cursor: pointer;padding: 0;border-radius: 50%;opacity: 0;transition: opacity 0.15s, background-color 0.15s, color 0.15s}
.comment:hover .comment-delete-btn {opacity: 1}
.comment-delete-btn:hover {color: #ef4444;background: rgba(239, 68, 68, 0.1)}
.comment-reply-to {display: flex;align-items: center;gap: 4px;font-size: 12px;color: #6b7280;margin-bottom: 6px;padding-left: 40px}
.comment-reply-to svg {flex-shrink: 0;color: #9ca3af}
.comment-content {font-size: 14px;line-height: 1.6;color: #374151;word-break: break-word}
.comment-content p {margin: 0}
.comment-form-container {margin-top: 16px}
.comment-form-row {margin-bottom: 8px}
.comment-input {width: 100%;padding: 12px;border: 1px solid #e5e7eb;border-radius: 8px;font-size: 14px;resize: vertical;min-height: 60px;font-family: inherit;box-sizing: border-box}
.comment-input:focus {outline: none;border-color: #3b82f6;box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)}
.comment-form-actions {display: flex;justify-content: space-between;align-items: center}
.comment-form-hint {font-size: 12px;color: #9ca3af}
.comment-form-error {padding: 10px 12px;margin-bottom: 10px;background-color: #fef2f2;border: 1px solid #fecaca;border-radius: 6px;color: #dc2626;font-size: 13px}
.comment-form-error p {margin: 0}
.comment-form-error:empty {display: none}
.comment-submit-btn {padding: 8px 20px;background: #3b82f6;color: #fff;border: none;border-radius: 6px;font-size: 14px;font-weight: 500;cursor: pointer;transition: background-color 0.2s}
.comment-submit-btn:hover {background: #2563eb}
.comment-submit-btn:disabled {background: #9ca3af;cursor: not-allowed}
.comment-login-prompt {text-align: center;padding: 16px;background: #f9fafb;border-radius: 8px;color: #6b7280;font-size: 14px}
.comment-login-prompt a {color: #3b82f6;text-decoration: none;font-weight: 500}
.comment-login-prompt a:hover {text-decoration: underline}
.comment-reply-to {display: flex;align-items: center;gap: 4px;font-size: 12px;color: #6b7280;margin-bottom: 6px;padding-left: 2px}
.comment-reply-to svg {color: #9ca3af}
.comment-thread {margin-bottom: 12px}
.comment-thread:last-child {margin-bottom: 0}
.comment-thread > .comment {margin-bottom: 0}
.comment-replies {margin-left: 20px;padding-left: 16px;border-left: 2px solid #e5e7eb;margin-top: 8px}
.comment-replies:empty {display: none}
.comment--reply {background: #f3f4f6;margin-bottom: 8px;padding: 10px;padding-right: 40px}
.comment--deleted {background: #f3f4f6;padding: 12px;padding-right: 12px}
.comment-deleted-message {color: #9ca3af;font-size: 13px;font-style: italic}
.comment--reply:last-child {margin-bottom: 0}
.comment-reply-arrow {display: inline-flex;align-items: center;gap: 4px;color: #9ca3af;font-size: 12px}
.comment-reply-arrow svg {transform: scaleX(-1)}
.comment-reply-to-name {color: #3b82f6;font-weight: 500}
.comment-actions {display: flex;gap: 12px;margin-top: 8px;padding-top: 6px}
.comment-reply-btn {display: inline-flex;align-items: center;gap: 4px;padding: 4px 10px;background: transparent;color: #6b7280;border: none;border-radius: 4px;font-size: 12px;cursor: pointer;transition: all 0.2s}
.comment-reply-btn:hover {background: #f3f4f6;color: #3b82f6}
.comment-reply-btn svg {transition: color 0.2s}
.comment-reply-btn:hover svg {color: #3b82f6}
.comment-reply-indicator {display: flex;align-items: center;gap: 8px;padding: 8px 12px;margin-bottom: 8px;background: #eff6ff;border: 1px solid #bfdbfe;border-radius: 6px;font-size: 13px}
.reply-to-label {color: #6b7280}
.reply-to-name {color: #3b82f6;font-weight: 500}
.reply-cancel-btn {margin-left: auto;display: flex;align-items: center;justify-content: center;width: 20px;height: 20px;padding: 0;background: transparent;border: none;border-radius: 50%;color: #9ca3af;cursor: pointer;transition: all 0.2s}
.reply-cancel-btn:hover {background: #dbeafe;color: #3b82f6}
.tide-graph-section {background: linear-gradient(180deg, #fff8e1 0%, #e3f2fd 100%);border-radius: 12px;padding: 16px;margin-bottom: 12px}
.tide-graph-container {position: relative;height: 50px;background: rgba(255, 255, 255, 0.7);border-radius: 8px;margin-bottom: 20px}
.tide-graph-svg {width: 100%;height: 100%}
.tide-current-indicator {position: absolute;bottom: -18px;left: 50%;transform: translateX(-50%);font-size: 11px;color: #f44336;font-weight: 600;white-space: nowrap}
.tide-times-row {display: flex;justify-content: space-around;font-size: 11px;color: #666;flex-wrap: wrap;gap: 8px}
button.tide-times-row.tide-times-clickable {width: 100%;background: none;border: none;padding: 8px;margin: 0;cursor: pointer;border-radius: 8px;transition: background 0.2s;font-family: inherit}
button.tide-times-row.tide-times-clickable:hover {background: rgba(0, 0, 0, 0.05)}
button.tide-times-row.tide-times-clickable:active {background: rgba(0, 0, 0, 0.1)}
.tide-time-item {display: flex;flex-direction: column;align-items: center;min-width: 60px}
.tide-time-label {font-weight: 600;font-size: 10px}
.tide-time-item.high-tide .tide-time-label {color: #1976D2}
.tide-time-item.low-tide .tide-time-label {color: #e65100}
.tide-time-value {font-size: 12px;color: #333;font-weight: 600}
.tide-level-value {font-size: 10px;color: #666}
.tide-graph-unavailable {background: #f5f5f5;border-radius: 8px;padding: 12px 16px;margin-bottom: 12px;text-align: center}
.tide-graph-unavailable p {margin: 0;font-size: 0.85rem;color: #666}
.tide-info-block {background: linear-gradient(135deg, #e8f4fd 0%, #fef9e7 50%, #e8f4fd 100%);border-radius: 10px;padding: 12px;margin-top: 8px}
.tide-info-block .tide-graph-section {background: transparent;padding: 0;margin-bottom: 0;border-radius: 0}
.tide-info-block .tide-graph-container {position: relative;height: 50px;background: rgba(255, 255, 255, 0.5);border-radius: 8px;margin-bottom: 12px}
.tide-info-block .tide-graph-svg {width: 100%;height: 100%}
.sun-tide-compact {padding: 0 0 8px 0;border-top: none;margin-top: 0}
.sun-tide-row {display: flex;justify-content: space-between;align-items: center;gap: 8px}
.sun-item,
.tide-item {display: flex;flex-direction: column;align-items: center;gap: 2px;flex: 1;min-width: 0}
.sun-item svg,
.tide-item svg {width: 20px;height: 20px;flex-shrink: 0}
button.sun-item.sun-item-clickable {background: none;border: none;padding: 6px;margin: 0;cursor: pointer;border-radius: 8px;transition: background 0.2s;font-family: inherit}
button.sun-item.sun-item-clickable:hover {background: rgba(0, 0, 0, 0.05)}
button.sun-item.sun-item-clickable:active {background: rgba(0, 0, 0, 0.1)}
.sun-tide-label {font-size: 0.65em;color: #6b7280;font-weight: 500}
.sun-tide-value {font-size: 0.85em;font-weight: 600;color: #1f2937}
@media (max-width: 640px) {.tide-info-block {padding: 10px;margin-top: 6px;border-radius: 10px}
.tide-info-block .tide-graph-section {background: transparent;padding: 0;margin-bottom: 0}
.sun-tide-compact {padding: 0 0 6px 0}
.sun-item svg,
.tide-item svg {width: 18px;height: 18px}
.sun-tide-label {font-size: 0.6em}
.sun-tide-value {font-size: 0.75em}}
@media (max-width: 480px) {.sun-tide-label {display: none}}
@media (max-width: 640px) {.comments-section {margin-top: 20px;padding-top: 16px}
.comments-section h3 {font-size: 15px}
.comment {padding: 10px;padding-right: 36px;margin-bottom: 10px}
.comment-delete-btn {opacity: 1}
.comment-delete-form {top: 8px;right: 6px}
.comment-user-icon {width: 28px !important;height: 28px !important}
.comment-user-name {font-size: 12px}
.comment-content {font-size: 13px}
.comment-input {padding: 10px;font-size: 13px}
.comment-reply-indicator {padding: 6px 10px;font-size: 12px}
.comment-actions {margin-top: 6px}
.comment-reply-btn {font-size: 11px;padding: 3px 8px}
.comment-replies {margin-left: 12px;padding-left: 12px}
.comment--reply {padding: 8px;padding-right: 36px}
.comment-reply-arrow {font-size: 11px}}
.location-map-button {position: relative}
.location-map-button.location-hidden svg {filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}
.location-map-modal {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.7);display: flex;align-items: center;justify-content: center;z-index: 10000;padding: 20px}
.location-map-modal-content {background: #fff;border-radius: 12px;width: 100%;max-width: 500px;max-height: 80vh;overflow: hidden;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3)}
.location-map-modal-header {display: flex;justify-content: space-between;align-items: center;padding: 16px 20px;border-bottom: 1px solid #eee}
.location-map-modal-header h3 {margin: 0;font-size: 16px;font-weight: 600;color: #333}
.location-map-modal-header .modal-close-button {background: none;border: none;padding: 4px;cursor: pointer;color: #666;display: flex;align-items: center;justify-content: center;border-radius: 4px;transition: background-color 0.2s, color 0.2s}
.location-map-modal-header .modal-close-button:hover {background: #f0f0f0;color: #333}
.location-map-container {width: 100%;height: 300px}
@media (max-width: 600px) {.location-map-modal {padding: 16px;align-items: center}
.location-map-modal-content {max-width: 100%;border-radius: 12px;max-height: 70vh}
.location-map-container {height: 50vh}}
.location-button-icons {position: relative;display: flex;align-items: center;justify-content: center}
.location-shield-badge {position: absolute;bottom: -4px;right: -6px;background: rgba(255, 255, 255, 0.95);border-radius: 50%;padding: 1px;display: flex;align-items: center;justify-content: center;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)}