.hidden {display: none !important}
.flash-alert {color: #fa383e;background-color: #ffebe6;padding: 10px;border-radius: 6px;margin-bottom: 16px}
.flash-notice {color: #1877f2;background-color: #e7f3ff;padding: 10px;border-radius: 6px;margin-bottom: 16px}
.flash-message {position: fixed;top: 0;left: 0;width: 100%;padding: 12px 16px;text-align: center;z-index: var(--z-index-notification);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);display: flex;justify-content: center;align-items: center;gap: 12px;animation: flash-slide-in 0.3s ease-out}
.flash-message.flash-notice {background-color: #e7f3ff;color: #1877f2;border-bottom: 1px solid #c2dbf5}
.flash-message.flash-alert {background-color: #f8d7da;color: #721c24;border-bottom: 1px solid #f5c6cb}
.flash-text {flex: 1;max-width: 600px}
.flash-text a {color: inherit;font-weight: 600;text-decoration: underline}
.flash-text a:hover {text-decoration: none}
.flash-close {background: none;border: none;font-size: 1.5em;line-height: 1;cursor: pointer;opacity: 0.6;transition: opacity 0.2s;padding: 0 4px;color: inherit}
.flash-close:hover {opacity: 1}
.flash-fade-out {animation: flash-slide-out 0.3s ease-out forwards}
@keyframes flash-slide-in {from {transform: translateY(-100%);opacity: 0}
to {transform: translateY(0);opacity: 1}}
@keyframes flash-slide-out {from {transform: translateY(0);opacity: 1}
to {transform: translateY(-100%);opacity: 0}}
.user-avatar-wrapper {display: inline-flex;flex-shrink: 0}
.user-avatar {border-radius: 50%;flex-shrink: 0}
.user-avatar-image {object-fit: cover}
.user-avatar-initial {display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: #fff;font-weight: 600;text-transform: uppercase}
.user-avatar-default {display: flex;align-items: center;justify-content: center;background: #f5f5f5;border: 1px solid #e0e0e0}
.user-avatar-default .user-avatar-icon {width: 80%;height: 80%}
.form-error-banner {margin-bottom: 16px;padding: 12px 16px;background-color: #fef2f2;border: 1px solid #fecaca;border-radius: 8px;color: #991b1b;font-size: 14px;line-height: 1.5}
.form-error-header {display: flex;align-items: center;gap: 8px;font-weight: 600;color: #dc2626}
.form-error-header i {font-size: 16px;flex-shrink: 0}
.form-error-list {margin: 8px 0 0;padding-left: 28px;list-style: disc}
.form-error-list li {margin-bottom: 2px}
.form-error-list li:last-child {margin-bottom: 0}
.with-footer {display: flex;flex-direction: column;min-height: 100vh;min-height: 100dvh}
.with-footer > .site-footer {margin-top: auto;flex-shrink: 0}
.site-footer {background-color: #f7f7f7;border-top: 1px solid #dddfe2;padding: 15px 20px;text-align: center;font-family: var(--font-family-base);font-size: 13px;color: #606770;height: 50px;box-sizing: border-box}
.footer-content {display: flex;justify-content: center;align-items: center;gap: 8px;flex-wrap: wrap}
.footer-separator {color: #ccd0d5}
.footer-link {color: #606770;text-decoration: none}
.footer-link:hover {text-decoration: underline}
.copy-tooltip {background-color: #1c1e21;color: #fff;padding: 8px 12px;border-radius: 6px;font-size: 0.85em;z-index: var(--z-index-notification);animation: tooltip-fade-in 0.2s ease-out;pointer-events: none;white-space: nowrap}
.copy-tooltip.fade-out {animation: tooltip-fade-out 0.3s ease-out forwards}
.copy-tooltip-error {background-color: #d9534f}
@keyframes tooltip-fade-in {from {opacity: 0;transform: translateY(5px)}
to {opacity: 1;transform: translateY(0)}}
@keyframes tooltip-fade-out {from {opacity: 1;transform: translateY(0)}
to {opacity: 0;transform: translateY(-5px)}}
@media (max-width: 768px) {body.hide-footer-mobile .site-footer {display: none}}
.tide-trigger {display: flex;align-items: center;gap: 6px;background: none;border: none;padding: 0;margin: 0;cursor: pointer;font-family: inherit}
.tide-item .tide-trigger {flex-direction: column;align-items: center;gap: 2px}
.tide-trigger:hover {opacity: 0.7}
.tide-trigger svg {width: 20px;height: 20px;flex-shrink: 0}
.tide-modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 9999;padding: 20px;box-sizing: border-box}
.tide-modal-overlay.hidden {display: none}
.tide-modal-content {background: #fff;border-radius: 16px;max-width: 400px;width: 100%;max-height: 80vh;margin: auto;overflow-y: auto;position: relative;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3)}
.tide-modal-close {position: absolute;top: 12px;right: 12px;width: 32px;height: 32px;border: none;background: #f5f5f5;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: background 0.2s}
.tide-modal-close:hover {background: #e0e0e0}
.tide-modal-close svg {width: 18px;height: 18px;color: #666}
.tide-modal-title {font-size: 18px;font-weight: 700;color: #333;margin: 0;padding: 20px 20px 16px;border-bottom: 1px solid #eee}
.tide-modal-list {padding: 12px 16px 16px}
.tide-modal-item {padding: 12px;border-radius: 10px;margin-bottom: 8px;background: #f9f9f9;transition: background 0.2s}
.tide-modal-item:last-child {margin-bottom: 0}
.tide-modal-item.current {background: #e3f2fd;border: 1px solid #90caf9}
.tide-modal-item-header {display: flex;align-items: center;gap: 8px;margin-bottom: 6px}
.tide-modal-icon {width: 24px;height: 24px;flex-shrink: 0}
.tide-modal-item-name {font-size: 15px;font-weight: 700}
.tide-modal-item-desc {font-size: 13px;color: #666;line-height: 1.5;margin: 0}
.tide-modal-credit {font-size: 11px;color: #999;text-align: center;margin: 12px 16px 16px;padding-top: 12px;border-top: 1px solid #eee}
.tide-level-modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 9999;padding: 20px;box-sizing: border-box}
.tide-level-modal-overlay.hidden {display: none}
.tide-level-modal-content {background: #fff;border-radius: 16px;max-width: 400px;width: 100%;max-height: 80vh;margin: auto;overflow-y: auto;position: relative;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15)}
.tide-modal-tips {background: linear-gradient(135deg, #fff8e1 0%, #e8f5e9 100%);border-radius: 10px;padding: 12px;margin-top: 12px}
.tide-modal-tips-title {font-size: 14px;font-weight: 700;color: #4caf50;margin: 0 0 8px 0;display: flex;align-items: center;gap: 6px}
.tide-modal-tips-title::before {content: "";display: inline-block;width: 16px;height: 16px;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234caf50' stroke-width='2'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E") no-repeat center;background-size: contain}
.tide-modal-tips-list {margin: 0;padding-left: 20px;list-style-type: none}
.tide-modal-tips-list li {font-size: 12px;color: #555;line-height: 1.6;margin-bottom: 4px;position: relative}
.tide-modal-tips-list li::before {content: "";position: absolute;left: -16px;top: 6px;width: 6px;height: 6px;background: #4caf50;border-radius: 50%}
.tide-modal-tips-list li:last-child {margin-bottom: 0}
.sun-time-modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 9999;padding: 20px;box-sizing: border-box}
.sun-time-modal-overlay.hidden {display: none}
.sun-time-modal-content {background: #fff;border-radius: 16px;max-width: 400px;width: 100%;max-height: 80vh;margin: auto;overflow-y: auto;position: relative;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15)}
.wind-modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 9999;padding: 20px;box-sizing: border-box}
.wind-modal-overlay.hidden {display: none}
.wind-modal-content {background: #fff;border-radius: 16px;max-width: 400px;width: 100%;max-height: 80vh;margin: auto;overflow-y: auto;position: relative;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15)}