.hidden {display: none !important}
.user-show-container {max-width: 960px;margin: 20px auto;padding: 20px;font-family: var(--font-family-base);background-color: #fff;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)}
.user-profile-header {background-color: #f7f7f7;border-radius: 8px;padding: 20px 20px 25px;margin-bottom: 30px;text-align: center;position: relative;overflow: visible}
.user-name-header {font-size: 1.8em;font-weight: 700;margin: 0 0 4px 0;color: #1c1e21;display: flex;align-items: center;justify-content: center;gap: 8px;flex-wrap: wrap}
.user-name-header::before {content: "";width: 28px;flex-shrink: 0}
.user-copy-link-button {position: relative;display: inline-flex;align-items: center;justify-content: center;width: 28px;height: 28px;padding: 0;border: 1px solid #ddd;border-radius: 50%;background-color: #fff;color: #666;cursor: pointer;transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;flex-shrink: 0;margin-left: 4px}
.user-copy-link-button::after {content: "";position: absolute;inset: -10px}
.user-copy-link-button:hover {background-color: #f0f0f0;color: #1e88e5;border-color: #1e88e5}
.user-copy-link-button:active {transform: scale(0.95)}
.user-copy-link-button:focus-visible {outline: 2px solid #1e88e5;outline-offset: 2px}
.user-plan-badge {display: inline-flex;align-items: center;padding: 2px 8px;border-radius: 4px;font-size: 0.45em;font-weight: 700;letter-spacing: 0.5px;text-transform: uppercase;text-decoration: none;transition: all 0.2s ease}
.user-plan-badge-basic {background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);color: #3949ab;border: 1px solid #c5cae9}
.user-plan-badge-basic:hover {background: linear-gradient(135deg, #c5cae9 0%, #9fa8da 100%);color: #3949ab;transform: translateY(-1px)}
.user-plan-badge-pro {background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);color: #f57c00;border: 1px solid #ffecb3}
.user-plan-badge-pro:hover {background: linear-gradient(135deg, #ffecb3 0%, #ffe082 100%);color: #f57c00;transform: translateY(-1px)}
.user-stats {display: flex;justify-content: center;gap: 12px;margin-top: 16px}
.follow-pill-row {display: flex;justify-content: center;gap: 8px;margin-top: 10px;flex-wrap: wrap}
.follow-pill {display: inline-flex;align-items: center;gap: 5px;padding: 5px 14px;border-radius: 20px;font-size: 0.82rem;text-decoration: none;border: 1px solid #e4e6eb;background: #fff;color: #1c1e21;transition: all 0.2s;cursor: pointer;white-space: nowrap}
.follow-pill:hover {border-color: #1877f2;background: #e7f0fd;color: #1877f2}
.follow-pill strong {font-weight: 700}
.follow-pill-icon {font-size: 0.75rem;color: #8a8d91}
.follow-pill:hover .follow-pill-icon {color: #1877f2}
.follow-pill--action {background: #1877f2;color: #fff;border-color: #1877f2;font-weight: 600;font-family: inherit;font-size: inherit}
.follow-pill--action:hover {background: #166fe5;border-color: #166fe5;color: #fff}
.follow-pill--following {background: #e4e6eb;color: #1c1e21;border-color: #e4e6eb}
.follow-pill--following:hover {border-color: #e74c3c;color: #e74c3c;background: transparent}
.follow-pill--friend {background: #fff8e7;border-color: #f5d77d;color: #f5a623;font-weight: 600;cursor: default}
.follow-pill--back-hint {background: #f0f2f5;border-color: #e4e6eb;color: #8a8d91;font-size: 0.78rem;cursor: default}
.user-bio-section {margin-top: 8px;display: flex;flex-direction: column;align-items: center}
.user-bio-row {display: flex;align-items: flex-start;justify-content: center;gap: 4px;max-width: 100%}
.user-bio-display {font-size: 0.9em;color: #65676b;text-align: center;word-break: break-word;overflow-wrap: break-word;white-space: pre-wrap;max-width: 300px;line-height: 1.5}
.user-bio-edit-button {display: inline-flex;align-items: center;justify-content: center;padding: 4px;color: #8a8d91;background: transparent;border: none;border-radius: 50%;cursor: pointer;transition: all 0.2s;flex-shrink: 0}
.user-bio-edit-button:hover {background-color: #e4e6eb;color: #1877f2}
.user-bio-form {width: 100%;max-width: 350px;margin-top: 8px}
.user-bio-input {width: 100%;padding: 8px 12px;font-size: 0.9em;border: 1px solid #dddfe2;border-radius: 6px;outline: none;transition: border-color 0.2s}
.user-bio-input:focus {border-color: #1877f2}
.user-bio-form-footer {display: flex;justify-content: space-between;align-items: center;margin-top: 6px}
.user-bio-char-count {font-size: 0.75em;color: #8a8d91}
.user-bio-char-count.over-limit {color: #dc3545}
.user-bio-form-buttons {display: flex;gap: 6px}
.user-bio-cancel-button,
.user-bio-save-button {padding: 5px 12px;font-size: 0.8em;border-radius: 4px;cursor: pointer;transition: all 0.2s}
.user-bio-cancel-button {color: #606770;background: #fff;border: 1px solid #dddfe2}
.user-bio-cancel-button:hover {background: #f0f2f5}
.user-bio-save-button {color: #fff;background: #1877f2;border: 1px solid #1877f2}
.user-bio-save-button:hover {background: #166fe5}
.stat-item {display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: #fff;padding: 10px 20px;border-radius: 8px;box-shadow: 0 1px 4px rgba(0,0,0,0.06);border: 1px solid #e4e6eb;min-width: 70px}
.stat-label {font-size: 0.75em;color: #8a8d91;margin-top: 2px}
.stat-value {font-size: 1.3em;font-weight: 600;color: #1c1e21}
a.stat-item-link {text-decoration: none;cursor: pointer;transition: all 0.2s ease}
a.stat-item-link:hover {border-color: #1877f2;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(24, 119, 242, 0.15)}
a.stat-item-link:hover .stat-value {color: #1877f2}
.stat-item {position: relative}
.stat-item-shake {animation: stat-item-shake 4s ease-in-out infinite}
@keyframes stat-item-shake {0%, 85%, 100% {transform: translateX(0) rotate(0)}
87% {transform: translateX(-2px) rotate(-1deg)}
89% {transform: translateX(2px) rotate(1deg)}
91% {transform: translateX(-2px) rotate(-0.5deg)}
93% {transform: translateX(2px) rotate(0.5deg)}
95% {transform: translateX(-1px) rotate(-0.5deg)}
97% {transform: translateX(1px) rotate(0.5deg)}}
.fishing-reports-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));gap: 16px;margin-top: 20px}
.fishing-report-card {background-color: #fff;border: 1px solid #e4e6eb;border-radius: 10px;overflow: hidden;transition: transform 0.2s ease, box-shadow 0.2s ease}
.fishing-report-card:hover {transform: translateY(-3px);box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15)}
.fishing-report-card a {text-decoration: none;color: inherit;display: block}
.fishing-report-card-image {width: 100%;padding-top: 100%;position: relative;background-color: #f0f2f5;overflow: hidden}
.fishing-report-image-thumbnail {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease}
.fishing-report-card:hover .fishing-report-image-thumbnail {transform: scale(1.03)}
.fishing-report-card-overlay {position: absolute;bottom: 0;left: 0;right: 0;padding: 10px 10px 8px;background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.2) 85%, transparent 100%);display: flex;flex-direction: column;gap: 3px;z-index: 1;opacity: 0;transition: opacity 0.3s ease}
.fishing-report-card:hover .fishing-report-card-overlay {opacity: 1}
.fishing-report-card-date-overlay {color: #fff;font-size: 0.7em;font-weight: 500;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5)}
.fishing-report-card-fish-name {color: #fff;font-size: 0.9em;font-weight: 700;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6)}
.fishing-report-card-comment-overlay {color: #fff;font-size: 0.75em;font-weight: 400;line-height: 1.3;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5)}
.user-show-container p {text-align: center;color: #606770;margin-top: 30px}
.user-show-container .back-link {display: inline-block;margin-top: 20px;color: #1877f2;text-decoration: none}
.user-show-container .back-link:hover {text-decoration: underline}
.user-show-container .section-title {font-size: 1.3em;font-weight: 600;color: #1c1e21;margin-bottom: 15px;padding-bottom: 8px;border-bottom: 2px solid #1877f2}
.user-map-section {margin-top: 30px}
.user-map-container {border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)}
.user-map-container #map {width: 100%;height: 400px;visibility: hidden}
.user-map-container #map.map-initialized {visibility: visible}
.activity-graph-container {margin-top: 40px}
.activity-graph-container h2 {text-align: center;margin-bottom: 20px}
.activity-graph {display: flex;align-items: flex-start;padding-bottom: 10px}
.graph-blocks {display: grid;grid-auto-flow: column;grid-template-rows: repeat(7, 1fr);grid-template-columns: repeat(53, 1fr);gap: 3px;position: relative;padding-top: 0}
.graph-block {width: 12px;height: 12px;border-radius: 2px;background-color: #ebedf0}
.activity-level-0 { background-color: #ebedf0; }
.activity-level-1 { background-color: #cce7f5; }
.activity-level-2 { background-color: #80bde3; }
.activity-level-3 { background-color: #4d92c2; }
.activity-level-4 { background-color: #2b6794; }
.activity-bouzu {background-color: #fee2e2;position: relative}
.activity-bouzu::before,
.activity-bouzu::after {content: "";position: absolute;top: 50%;left: 50%;width: 8px;height: 2px;background: var(--color-danger);border-radius: 1px}
.activity-bouzu::before {transform: translate(-50%, -50%) rotate(45deg)}
.activity-bouzu::after {transform: translate(-50%, -50%) rotate(-45deg)}
@media (max-width: 768px) {.activity-graph {overflow-x: hidden;justify-content: flex-end;max-width: calc(100% - 30px);margin: 0 auto}
.graph-blocks {grid-template-columns: repeat(53, 1fr);padding-top: 0}}
@media (max-width: 768px) {.user-show-container {margin: 10px;padding: 15px}
.fishing-reports-grid {grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));gap: 10px}
.fishing-report-card:hover {transform: none;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)}
.fishing-report-card:hover .fishing-report-image-thumbnail {transform: none}
.fishing-report-card-overlay {opacity: 1;padding: 6px 8px}
.fishing-report-card-date-overlay {font-size: 0.65em}
.fishing-report-card-fish-name {font-size: 0.8em}
.fishing-report-card-comment-overlay {display: none}
.user-map-container #map {height: 300px}}
@media (max-width: 480px) {.fishing-reports-grid {grid-template-columns: repeat(3, 1fr);gap: 4px}
.fishing-report-card {border-radius: 6px}
.fishing-report-card-overlay {padding: 4px 6px;gap: 1px}
.fishing-report-card-date-overlay {font-size: 0.55em}
.fishing-report-card-fish-name {font-size: 0.7em}
.user-name-header {font-size: 1.5em}}
.account-settings-section {display: none;margin-top: 30px}
@media (max-width: 768px) {.account-settings-section {display: block}}
.account-settings-links {display: flex;flex-direction: column;gap: 1px;background-color: #dddfe2;border-radius: 8px;overflow: hidden}
.account-settings-link {display: flex;align-items: center;gap: 12px;padding: 14px 16px;background-color: #fff;text-decoration: none;color: #1c1e21;font-size: 0.95em;font-weight: 500;transition: background-color 0.2s;border: none;cursor: pointer;width: 100%;text-align: left}
.account-settings-link:hover,
.account-settings-link:active {background-color: #f0f2f5}
.account-settings-link svg {flex-shrink: 0;color: #606770}
.account-settings-link span {flex: 1}
.account-settings-link .chevron-icon {color: #ccd0d5}
.account-settings-link.logout-link {color: #dc3545}
.account-settings-link.logout-link svg:not(.chevron-icon) {color: #dc3545}
.tackle-management-section {margin-top: 30px}
.tackle-quick-stats {display: flex;justify-content: center;gap: 20px;margin-bottom: 16px}
.tackle-links {display: flex;flex-direction: column;gap: 1px;background-color: #dddfe2;border-radius: 8px;overflow: hidden}
.tackle-link {display: flex;align-items: center;gap: 12px;padding: 14px 16px;background-color: #fff;text-decoration: none;color: #1c1e21;font-size: 0.95em;font-weight: 500;transition: background-color 0.2s}
.tackle-link:hover,
.tackle-link:active {background-color: #f0f2f5}
.tackle-link-disabled {background-color: #f7f8fa;color: #a0a3a7;cursor: not-allowed}
.tackle-link-disabled:hover,
.tackle-link-disabled:active {background-color: #f7f8fa}
.tackle-link-disabled svg {color: #c4c6c9}
.tackle-link svg {flex-shrink: 0;color: #606770}
.tackle-link span {flex: 1}
.tackle-link .chevron-icon {color: #ccd0d5}
.tackle-link-subtle {background-color: var(--color-bg-muted)}
.tackle-link-subtle span {color: var(--color-text-muted)}
.tackle-link-subtle:hover,
.tackle-link-subtle:active {background-color: var(--color-bg-secondary)}
.fishing-boat-section {margin-top: 24px}
.account-settings-section-pc {margin-top: 30px}
.account-settings-links-pc {display: flex;flex-direction: column;gap: 1px;background-color: #dddfe2;border-radius: 8px;overflow: hidden}
.account-settings-link-pc {display: flex;align-items: center;gap: 12px;padding: 14px 16px;background-color: #fff;text-decoration: none;color: #1c1e21;font-size: 0.95em;font-weight: 500;transition: background-color 0.2s}
.account-settings-link-pc:hover,
.account-settings-link-pc:active {background-color: #f0f2f5}
.account-settings-link-pc svg {flex-shrink: 0;color: #606770}
.account-settings-link-pc span {flex: 1}
.account-settings-link-pc .chevron-icon {color: #ccd0d5}
@media (max-width: 768px) {.account-settings-section-pc {display: none}}
.user-tackle-sets-list {display: flex;flex-direction: column;gap: 16px}
.user-tackle-set-card {background-color: #fff;padding: 16px;border-radius: 8px;border: 1px solid #e4e6eb;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08)}
.user-tackle-set-card .tackle-set-name {font-size: 1.1rem;font-weight: 600;color: #1c1e21;margin: 0 0 16px 0;padding-bottom: 10px;border-bottom: 1px solid #e4e6eb}
.user-tackle-set-card .tackle-set-items {display: flex;flex-direction: column;gap: 12px}
.user-tackle-set-card .tackle-set-type-section {background-color: #f7f8fa;border-radius: 6px;padding: 12px}
.user-tackle-set-card .item-type-header {display: flex;align-items: center;gap: 6px;font-size: 13px;font-weight: 600;color: #1877f2;margin-bottom: 10px}
.user-tackle-set-card .item-type-header .item-type-icon {width: 16px;height: 16px;color: #1877f2}
.user-tackle-set-card .tackle-items-detail {display: flex;flex-direction: column;gap: 8px}
.user-tackle-set-card .tackle-item-detail {display: flex;flex-wrap: wrap;align-items: center;gap: 8px;background-color: #fff;padding: 10px 12px;border-radius: 6px}
.user-tackle-set-card .tackle-manufacturer {font-size: 12px;font-weight: 500;color: #1877f2;background-color: #e7f3ff;padding: 3px 8px;border-radius: 4px}
.user-tackle-set-card .tackle-product-name {font-size: 14px;font-weight: 500;color: #1c1e21}
.user-tackle-set-card .tackle-original-name {font-size: 12px;color: #65676b}
.user-tackle-set-card .tackle-item-memo {width: 100%;font-size: 12px;color: #65676b;font-style: italic;padding-left: 8px;border-left: 2px solid #dddfe2;margin-top: 4px}
.user-tackle-set-card .tackle-item-rating {display: flex;flex-direction: column;gap: 2px;margin-top: 4px}
.user-tackle-set-card .tackle-item-rating-label {font-size: 10px;color: var(--color-text-light);font-weight: 600;text-transform: uppercase;letter-spacing: 0.04em}
.user-tackle-set-card .tackle-item-rating-text {font-size: 12px;color: #1c1e21;line-height: 1.4;word-break: break-word}
.privacy-settings-section {margin-top: 30px;background-color: #f7f7f7;border-radius: 8px;padding: 20px}
.privacy-settings-item {display: flex;align-items: center;justify-content: space-between;gap: 16px}
.privacy-settings-info {display: flex;flex-direction: column;gap: 4px}
.privacy-settings-label {font-size: 15px;font-weight: 600;color: #1c1e21}
.privacy-settings-hint {font-size: 13px;color: #65676b}
.privacy-settings-hint.phone-verified {display: flex;align-items: center;gap: 4px;color: #38a169}
.phone-verify-button {display: inline-flex;align-items: center;padding: 8px 16px;background: linear-gradient(135deg, #1877f2 0%, #166fe5 100%);border: none;border-radius: 8px;color: #fff;font-size: 14px;font-weight: 600;text-decoration: none;transition: transform 0.2s, box-shadow 0.2s;flex-shrink: 0}
.phone-verify-button:hover {transform: translateY(-1px);box-shadow: 0 4px 12px rgba(24, 119, 242, 0.35);color: #fff}
.toggle-switch {position: relative;display: inline-block;width: 50px;height: 28px;flex-shrink: 0}
.toggle-switch input {opacity: 0;width: 0;height: 0}
.toggle-slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;transition: 0.3s;border-radius: 28px}
.toggle-slider:before {position: absolute;content: "";height: 22px;width: 22px;left: 3px;bottom: 3px;background-color: white;transition: 0.3s;border-radius: 50%;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)}
.toggle-switch input:checked + .toggle-slider {background-color: #1877f2}
.toggle-switch input:checked + .toggle-slider:before {transform: translateX(22px)}
.toggle-switch input:focus + .toggle-slider {box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.2)}
.user-profile-avatar-section {display: flex;flex-direction: column;align-items: center;gap: 8px;margin-bottom: 16px}
.user-profile-avatar-wrapper {position: relative;display: inline-block}
.user-profile-avatar-wrapper .user-avatar {border: 3px solid #fff;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)}
.profile-icon-edit-trigger {position: absolute;bottom: 0;right: 0;width: 28px;height: 28px;background-color: #1877f2;border: 2px solid #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: background-color 0.2s}
.profile-icon-edit-trigger:hover {background-color: #166fe5}
.profile-icon-edit-trigger svg {width: 14px;height: 14px;color: #fff}
.profile-icon-form-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 1000}
.profile-icon-form-modal {background-color: #fff;border-radius: 12px;padding: 24px;max-width: 400px;width: 90%;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);box-sizing: border-box}
.profile-icon-form-title {font-size: 1.2em;font-weight: 600;color: #1c1e21;margin: 0 0 16px 0;text-align: center}
.profile-icon-preview {display: flex;justify-content: center;margin-bottom: 16px}
.profile-icon-file-input {display: none}
.profile-icon-file-label {display: block;width: 100%;padding: 12px;text-align: center;background-color: #f0f2f5;border: 2px dashed #ccd0d5;border-radius: 8px;color: #606770;cursor: pointer;transition: all 0.2s;margin-bottom: 16px;box-sizing: border-box}
.profile-icon-file-label:hover {background-color: #e4e6eb;border-color: #1877f2;color: #1877f2}
.profile-icon-form-modal .profile-icon-caution {display: flex;align-items: flex-start;gap: 6px;font-size: 0.75rem;color: #e74c3c;margin: 0 0 16px 0;line-height: 1.4;background-color: #fef5f5;padding: 10px 12px;border-radius: 6px;border: 1px solid #fce4e4}
.profile-icon-form-modal .profile-icon-caution svg {flex-shrink: 0;margin-top: 1px;color: #e74c3c}
.profile-icon-form-modal .profile-icon-caution span {flex: 1}
.profile-icon-form-buttons {display: flex;gap: 12px}
.profile-icon-form-buttons button,
.profile-icon-form-buttons .profile-icon-cancel-button {flex: 1;padding: 10px 16px;border-radius: 6px;font-size: 0.95em;font-weight: 500;cursor: pointer;transition: all 0.2s;text-align: center;text-decoration: none}
.profile-icon-submit-button {background-color: #1877f2;color: #fff;border: none}
.profile-icon-submit-button:hover {background-color: #166fe5}
.profile-icon-cancel-button {background-color: #fff;color: #606770;border: 1px solid #ccd0d5;display: block}
.profile-icon-cancel-button:hover {background-color: #f0f2f5}
.profile-icon-delete-section {margin-top: 12px;text-align: center}
.profile-icon-delete-button {color: #dc3545;font-size: 0.85em;background: none;border: none;cursor: pointer;text-decoration: underline}
.profile-icon-delete-button:hover {color: #c82333}
.received-reactions-container {max-width: 600px;margin: 0 auto;padding: 20px;padding-bottom: 80px;min-height: calc(100vh - 120px);position: relative;z-index: 1}
.received-reactions-header {display: flex;align-items: center;gap: 8px;margin-bottom: 20px}
.received-reactions-header .back-link {display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;border-radius: 50%;color: #65676b;transition: background-color 0.2s}
.received-reactions-header .back-link:hover {background-color: #f0f2f5}
.received-reactions-header h1 {font-size: 1.3em;font-weight: 600;color: #1c1e21;margin: 0}
.reactions-list {display: flex;flex-direction: column;gap: 1px;background-color: #e4e6eb;border-radius: 8px;overflow: hidden}
.reaction-item {display: flex;align-items: center;justify-content: space-between;padding: 12px 16px;background-color: #fff}
.reaction-user {display: flex;align-items: center;gap: 12px;flex: 1;min-width: 0}
.reaction-user a {flex-shrink: 0}
.reaction-info {display: flex;flex-direction: column;gap: 2px;min-width: 0}
.reaction-user-name {font-size: 0.95em;font-weight: 500;color: #1c1e21;text-decoration: none;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.reaction-user-name:hover {text-decoration: underline}
.reaction-datetime {font-size: 0.8em;color: #65676b}
.reaction-report {flex-shrink: 0;margin-left: 12px}
.reaction-report-thumbnail {width: 50px;height: 50px;border-radius: 6px;object-fit: cover}
.reactions-empty {text-align: center;padding: 40px 20px;background-color: #f7f8fa;border-radius: 8px}
.reactions-empty p {color: #65676b;font-size: 0.95em;margin: 0}
@media (max-width: 480px) {.received-reactions-container {padding: 15px}
.reaction-item {padding: 10px 12px}
.reaction-report-thumbnail {width: 44px;height: 44px}}
.reactions-ocean {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 40%, #0369a1 100%);z-index: -1;overflow: hidden;transition: background 0.5s ease}
.reactions-ocean-day {background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 40%, #0369a1 100%)}
.reactions-ocean-dawn {background: linear-gradient(180deg, #fda4af 0%, #fb923c 20%, #f97316 35%, #0ea5e9 60%, #0284c7 100%)}
.reactions-ocean-sunset {background: linear-gradient(180deg, #f97316 0%, #ea580c 15%, #c026d3 35%, #7c3aed 55%, #1e3a5f 80%, #0f172a 100%)}
.reactions-ocean-night {background: linear-gradient(180deg, #1e3a5f 0%, #172554 30%, #0f172a 60%, #020617 100%)}
.reactions-ocean-night .reactions-fish-svg {fill: rgba(200, 220, 255, 0.7)}
.reactions-ocean-sunset .reactions-fish-svg {fill: rgba(255, 230, 200, 0.85)}
.reactions-ocean-dawn .reactions-fish-svg {fill: rgba(255, 220, 230, 0.85)}
.reactions-ocean-night .reactions-bubble {background: radial-gradient(circle at 30% 30%, rgba(150, 180, 220, 0.6), rgba(100, 140, 180, 0.2));opacity: 0.5}
.reactions-ocean ~ .received-reactions-content .received-reactions-header h1 {color: #fff;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3)}
.reactions-ocean ~ .received-reactions-content .received-reactions-header .back-link {color: #fff;background-color: rgba(255, 255, 255, 0.2)}
.reactions-ocean ~ .received-reactions-content .received-reactions-header .back-link:hover {background-color: rgba(255, 255, 255, 0.3)}
.reactions-bubbles {position: absolute;inset: 0}
.reactions-bubble {position: absolute;bottom: -20px;background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));border-radius: 50%;opacity: 0.7}
.reactions-bubble-1 { left: 8%; width: 8px; height: 8px; animation: reactions-bubble-rise 6s ease-in-out infinite 0.5s; }
.reactions-bubble-2 { left: 25%; width: 5px; height: 5px; animation: reactions-bubble-rise 8s ease-in-out infinite 2.3s; }
.reactions-bubble-3 { left: 45%; width: 7px; height: 7px; animation: reactions-bubble-rise 7s ease-in-out infinite 4.1s; }
.reactions-bubble-4 { left: 65%; width: 4px; height: 4px; animation: reactions-bubble-rise 9s ease-in-out infinite 1.7s; }
.reactions-bubble-5 { left: 85%; width: 6px; height: 6px; animation: reactions-bubble-rise 6.5s ease-in-out infinite 5.8s; }
@keyframes reactions-bubble-rise {0%, 100% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
10% { transform: translateY(-30px) translateX(3px) scale(1); opacity: 0.7; }
90% { transform: translateY(-100vh) translateX(-5px) scale(0.5); opacity: 0.2; }}
.reactions-big-fish-group {position: absolute;inset: 0}
.reactions-big-fish {position: absolute;width: 64px;height: 48px;opacity: 0;transition: opacity 0.3s ease-in-out}
.reactions-big-fish-svg {width: 100%;height: 100%;fill: rgba(255, 215, 100, 0.9);filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25))}
.reactions-big-fish-1 { animation: reactions-big-fish-swim-1 35s ease-in-out infinite -5s; }
.reactions-big-fish-2 { animation: reactions-big-fish-swim-2 40s ease-in-out infinite -15s; }
.reactions-big-fish-3 { animation: reactions-big-fish-swim-1 38s ease-in-out infinite -25s; }
.reactions-big-fish-4 { animation: reactions-big-fish-swim-2 42s ease-in-out infinite -10s; }
.reactions-big-fish-5 { animation: reactions-big-fish-swim-1 36s ease-in-out infinite -30s; }
@keyframes reactions-big-fish-swim-1 {0% { left: -80px; top: 30%; transform: scaleX(1); }
15% { left: 25%; top: 20%; transform: scaleX(1); }
30% { left: 50%; top: 35%; transform: scaleX(1); }
48% { left: calc(100% + 80px); top: 25%; transform: scaleX(1); }
50% { left: calc(100% + 80px); top: 25%; transform: scaleX(-1); }
65% { left: 60%; top: 40%; transform: scaleX(-1); }
80% { left: 30%; top: 28%; transform: scaleX(-1); }
98% { left: -80px; top: 35%; transform: scaleX(-1); }
100% { left: -80px; top: 30%; transform: scaleX(1); }}
@keyframes reactions-big-fish-swim-2 {0% { left: calc(100% + 80px); top: 55%; transform: scaleX(-1); }
15% { left: 70%; top: 65%; transform: scaleX(-1); }
30% { left: 40%; top: 50%; transform: scaleX(-1); }
48% { left: -80px; top: 60%; transform: scaleX(-1); }
50% { left: -80px; top: 60%; transform: scaleX(1); }
65% { left: 35%; top: 48%; transform: scaleX(1); }
80% { left: 65%; top: 58%; transform: scaleX(1); }
98% { left: calc(100% + 80px); top: 52%; transform: scaleX(1); }
100% { left: calc(100% + 80px); top: 55%; transform: scaleX(-1); }}
.reactions-ocean[data-big-fish-count="1"] .reactions-big-fish-1,
.reactions-ocean[data-big-fish-count="2"] .reactions-big-fish-1,
.reactions-ocean[data-big-fish-count="2"] .reactions-big-fish-2,
.reactions-ocean[data-big-fish-count="3"] .reactions-big-fish-1,
.reactions-ocean[data-big-fish-count="3"] .reactions-big-fish-2,
.reactions-ocean[data-big-fish-count="3"] .reactions-big-fish-3,
.reactions-ocean[data-big-fish-count="4"] .reactions-big-fish-1,
.reactions-ocean[data-big-fish-count="4"] .reactions-big-fish-2,
.reactions-ocean[data-big-fish-count="4"] .reactions-big-fish-3,
.reactions-ocean[data-big-fish-count="4"] .reactions-big-fish-4,
.reactions-ocean[data-big-fish-count="5"] .reactions-big-fish-1,
.reactions-ocean[data-big-fish-count="5"] .reactions-big-fish-2,
.reactions-ocean[data-big-fish-count="5"] .reactions-big-fish-3,
.reactions-ocean[data-big-fish-count="5"] .reactions-big-fish-4,
.reactions-ocean[data-big-fish-count="5"] .reactions-big-fish-5 { opacity: 1; }
.reactions-ocean-night .reactions-big-fish-svg {fill: rgba(180, 160, 100, 0.7)}
.reactions-ocean-sunset .reactions-big-fish-svg {fill: rgba(255, 200, 120, 0.85)}
.reactions-ocean-dawn .reactions-big-fish-svg {fill: rgba(255, 210, 150, 0.85)}
.reactions-fish-group {position: absolute;inset: 0}
.reactions-fish {position: absolute;width: 32px;height: 24px;opacity: 0;transition: opacity 0.3s ease-in-out}
.reactions-fish-svg {width: 100%;height: 100%;fill: rgba(255, 255, 255, 0.85);filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15))}
.reactions-ocean[data-fish-count="1"] .reactions-fish-1,
.reactions-ocean[data-fish-count="2"] .reactions-fish-1,
.reactions-ocean[data-fish-count="2"] .reactions-fish-2,
.reactions-ocean[data-fish-count="3"] .reactions-fish-1,
.reactions-ocean[data-fish-count="3"] .reactions-fish-2,
.reactions-ocean[data-fish-count="3"] .reactions-fish-3,
.reactions-ocean[data-fish-count="4"] .reactions-fish-1,
.reactions-ocean[data-fish-count="4"] .reactions-fish-2,
.reactions-ocean[data-fish-count="4"] .reactions-fish-3,
.reactions-ocean[data-fish-count="4"] .reactions-fish-4,
.reactions-ocean[data-fish-count="5"] .reactions-fish-1,
.reactions-ocean[data-fish-count="5"] .reactions-fish-2,
.reactions-ocean[data-fish-count="5"] .reactions-fish-3,
.reactions-ocean[data-fish-count="5"] .reactions-fish-4,
.reactions-ocean[data-fish-count="5"] .reactions-fish-5 { opacity: 1; }
.reactions-ocean[data-fish-count="6"] .reactions-fish-1,
.reactions-ocean[data-fish-count="6"] .reactions-fish-2,
.reactions-ocean[data-fish-count="6"] .reactions-fish-3,
.reactions-ocean[data-fish-count="6"] .reactions-fish-4,
.reactions-ocean[data-fish-count="6"] .reactions-fish-5,
.reactions-ocean[data-fish-count="6"] .reactions-fish-6,
.reactions-ocean[data-fish-count="7"] .reactions-fish-1,
.reactions-ocean[data-fish-count="7"] .reactions-fish-2,
.reactions-ocean[data-fish-count="7"] .reactions-fish-3,
.reactions-ocean[data-fish-count="7"] .reactions-fish-4,
.reactions-ocean[data-fish-count="7"] .reactions-fish-5,
.reactions-ocean[data-fish-count="7"] .reactions-fish-6,
.reactions-ocean[data-fish-count="7"] .reactions-fish-7,
.reactions-ocean[data-fish-count="8"] .reactions-fish-1,
.reactions-ocean[data-fish-count="8"] .reactions-fish-2,
.reactions-ocean[data-fish-count="8"] .reactions-fish-3,
.reactions-ocean[data-fish-count="8"] .reactions-fish-4,
.reactions-ocean[data-fish-count="8"] .reactions-fish-5,
.reactions-ocean[data-fish-count="8"] .reactions-fish-6,
.reactions-ocean[data-fish-count="8"] .reactions-fish-7,
.reactions-ocean[data-fish-count="8"] .reactions-fish-8,
.reactions-ocean[data-fish-count="9"] .reactions-fish-1,
.reactions-ocean[data-fish-count="9"] .reactions-fish-2,
.reactions-ocean[data-fish-count="9"] .reactions-fish-3,
.reactions-ocean[data-fish-count="9"] .reactions-fish-4,
.reactions-ocean[data-fish-count="9"] .reactions-fish-5,
.reactions-ocean[data-fish-count="9"] .reactions-fish-6,
.reactions-ocean[data-fish-count="9"] .reactions-fish-7,
.reactions-ocean[data-fish-count="9"] .reactions-fish-8,
.reactions-ocean[data-fish-count="9"] .reactions-fish-9 { opacity: 1; }
.reactions-fish-1 { top: 8%; animation: reactions-fish-swim-1 14s ease-in-out infinite -0s; }
.reactions-fish-2 { top: 18%; animation: reactions-fish-swim-2 16s ease-in-out infinite -7s; }
.reactions-fish-3 { top: 28%; animation: reactions-fish-swim-pause-1 18s ease-in-out infinite -3s; }
.reactions-fish-4 { top: 38%; animation: reactions-fish-swim-pause-2 20s ease-in-out infinite -9s; }
.reactions-fish-5 { top: 48%; animation: reactions-fish-swim-fast-1 12s ease-in-out infinite -5s; }
.reactions-fish-6 { top: 58%; animation: reactions-fish-swim-fast-2 11s ease-in-out infinite -2s; }
.reactions-fish-7 { top: 68%; animation: reactions-fish-swim-slow-1 22s ease-in-out infinite -8s; }
.reactions-fish-8 { top: 78%; animation: reactions-fish-swim-slow-2 24s ease-in-out infinite -4s; }
.reactions-fish-9 { top: 88%; animation: reactions-fish-swim-wave-1 16s ease-in-out infinite -6s; }
@keyframes reactions-fish-swim-1 {0% { left: -40px; top: 8%; transform: scaleX(1); }
25% { left: 40%; top: 3%; transform: scaleX(1); }
48% { left: calc(100% + 40px); top: 12%; transform: scaleX(1); }
50% { left: calc(100% + 40px); top: 12%; transform: scaleX(-1); }
75% { left: 40%; top: 18%; transform: scaleX(-1); }
98% { left: -40px; top: 6%; transform: scaleX(-1); }
100% { left: -40px; top: 8%; transform: scaleX(1); }}
@keyframes reactions-fish-swim-2 {0% { left: calc(100% + 40px); top: 18%; transform: scaleX(-1); }
25% { left: 60%; top: 25%; transform: scaleX(-1); }
48% { left: -40px; top: 15%; transform: scaleX(-1); }
50% { left: -40px; top: 15%; transform: scaleX(1); }
75% { left: 60%; top: 10%; transform: scaleX(1); }
98% { left: calc(100% + 40px); top: 20%; transform: scaleX(1); }
100% { left: calc(100% + 40px); top: 18%; transform: scaleX(-1); }}
@keyframes reactions-fish-swim-pause-1 {0% { left: -40px; top: 28%; transform: scaleX(1); }
20% { left: 30%; top: 20%; transform: scaleX(1); }
25% { left: 30%; top: 22%; transform: scaleX(1); }
30% { left: 30%; top: 18%; transform: scaleX(1); }
48% { left: calc(100% + 40px); top: 32%; transform: scaleX(1); }
50% { left: calc(100% + 40px); top: 32%; transform: scaleX(-1); }
70% { left: 60%; top: 38%; transform: scaleX(-1); }
75% { left: 60%; top: 40%; transform: scaleX(-1); }
80% { left: 60%; top: 36%; transform: scaleX(-1); }
98% { left: -40px; top: 26%; transform: scaleX(-1); }
100% { left: -40px; top: 28%; transform: scaleX(1); }}
@keyframes reactions-fish-swim-pause-2 {0% { left: calc(100% + 40px); top: 38%; transform: scaleX(-1); }
18% { left: 70%; top: 45%; transform: scaleX(-1); }
23% { left: 70%; top: 47%; transform: scaleX(-1); }
28% { left: 70%; top: 43%; transform: scaleX(-1); }
48% { left: -40px; top: 35%; transform: scaleX(-1); }
50% { left: -40px; top: 35%; transform: scaleX(1); }
68% { left: 40%; top: 28%; transform: scaleX(1); }
73% { left: 40%; top: 26%; transform: scaleX(1); }
78% { left: 40%; top: 30%; transform: scaleX(1); }
98% { left: calc(100% + 40px); top: 40%; transform: scaleX(1); }
100% { left: calc(100% + 40px); top: 38%; transform: scaleX(-1); }}
@keyframes reactions-fish-swim-fast-1 {0% { left: -40px; top: 48%; transform: scaleX(1); }
5% { left: 15%; top: 40%; transform: scaleX(1); }
25% { left: 50%; top: 55%; transform: scaleX(1); }
45% { left: calc(100% + 40px); top: 42%; transform: scaleX(1); }
50% { left: calc(100% + 40px); top: 42%; transform: scaleX(-1); }
55% { left: 85%; top: 50%; transform: scaleX(-1); }
75% { left: 50%; top: 38%; transform: scaleX(-1); }
95% { left: -40px; top: 52%; transform: scaleX(-1); }
100% { left: -40px; top: 48%; transform: scaleX(1); }}
@keyframes reactions-fish-swim-fast-2 {0% { left: calc(100% + 40px); top: 58%; transform: scaleX(-1); }
5% { left: 85%; top: 65%; transform: scaleX(-1); }
25% { left: 50%; top: 52%; transform: scaleX(-1); }
45% { left: -40px; top: 62%; transform: scaleX(-1); }
50% { left: -40px; top: 62%; transform: scaleX(1); }
55% { left: 15%; top: 55%; transform: scaleX(1); }
75% { left: 50%; top: 68%; transform: scaleX(1); }
95% { left: calc(100% + 40px); top: 56%; transform: scaleX(1); }
100% { left: calc(100% + 40px); top: 58%; transform: scaleX(-1); }}
@keyframes reactions-fish-swim-slow-1 {0% { left: -40px; top: 68%; transform: scaleX(1); }
25% { left: 25%; top: 60%; transform: scaleX(1); }
48% { left: calc(100% + 40px); top: 72%; transform: scaleX(1); }
50% { left: calc(100% + 40px); top: 72%; transform: scaleX(-1); }
75% { left: 25%; top: 78%; transform: scaleX(-1); }
98% { left: -40px; top: 66%; transform: scaleX(-1); }
100% { left: -40px; top: 68%; transform: scaleX(1); }}
@keyframes reactions-fish-swim-slow-2 {0% { left: calc(100% + 40px); top: 78%; transform: scaleX(-1); }
25% { left: 75%; top: 85%; transform: scaleX(-1); }
48% { left: -40px; top: 75%; transform: scaleX(-1); }
50% { left: -40px; top: 75%; transform: scaleX(1); }
75% { left: 75%; top: 70%; transform: scaleX(1); }
98% { left: calc(100% + 40px); top: 80%; transform: scaleX(1); }
100% { left: calc(100% + 40px); top: 78%; transform: scaleX(-1); }}
@keyframes reactions-fish-swim-wave-1 {0% { left: -40px; top: 88%; transform: scaleX(1); }
12% { left: 15%; top: 75%; transform: scaleX(1); }
24% { left: 30%; top: 92%; transform: scaleX(1); }
36% { left: 45%; top: 80%; transform: scaleX(1); }
48% { left: calc(100% + 40px); top: 85%; transform: scaleX(1); }
50% { left: calc(100% + 40px); top: 85%; transform: scaleX(-1); }
62% { left: 55%; top: 95%; transform: scaleX(-1); }
74% { left: 30%; top: 82%; transform: scaleX(-1); }
86% { left: 15%; top: 90%; transform: scaleX(-1); }
98% { left: -40px; top: 86%; transform: scaleX(-1); }
100% { left: -40px; top: 88%; transform: scaleX(1); }}
@keyframes reactions-fish-swim-wave-2 {0% { left: calc(100% + 40px); top: 13%; transform: scaleX(-1); }
12% { left: 85%; top: 25%; transform: scaleX(-1); }
24% { left: 70%; top: 8%; transform: scaleX(-1); }
36% { left: 55%; top: 20%; transform: scaleX(-1); }
48% { left: -40px; top: 10%; transform: scaleX(-1); }
50% { left: -40px; top: 10%; transform: scaleX(1); }
62% { left: 45%; top: 5%; transform: scaleX(1); }
74% { left: 70%; top: 18%; transform: scaleX(1); }
86% { left: 85%; top: 8%; transform: scaleX(1); }
98% { left: calc(100% + 40px); top: 15%; transform: scaleX(1); }
100% { left: calc(100% + 40px); top: 13%; transform: scaleX(-1); }}
@media (min-width: 769px) {.reactions-fish-1 { animation-duration: 26s; }
.reactions-fish-2 { animation-duration: 30s; }
.reactions-fish-3 { animation-duration: 34s; }
.reactions-fish-4 { animation-duration: 38s; }
.reactions-fish-5 { animation-duration: 22s; }
.reactions-fish-6 { animation-duration: 20s; }
.reactions-fish-7 { animation-duration: 40s; }
.reactions-fish-8 { animation-duration: 44s; }
.reactions-fish-9 { animation-duration: 30s; }}
.fish-view-toggle-button {position: fixed;bottom: 80px;right: 16px;padding: 10px 16px;background-color: rgba(255, 255, 255, 0.9);color: #0369a1;border: none;border-radius: 20px;font-size: 14px;font-weight: 600;cursor: pointer;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);z-index: 100;transition: all 0.2s ease}
.fish-view-toggle-button:hover {background-color: #fff;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)}
.fish-view-toggle-button:active {transform: translateY(0)}
.received-reactions-content {opacity: 1;transform: translateY(0);transition: opacity 0.4s ease-out, transform 0.4s ease-out}
.fish-view-mode {opacity: 0;transform: translateY(10px);pointer-events: none;transition: opacity 0.35s ease-in, transform 0.35s ease-in}
@media (max-width: 768px) {.fish-view-toggle-button {bottom: 100px;right: 12px;padding: 8px 14px;font-size: 13px}}
.reactions-list-loading {display: flex;justify-content: center;align-items: center;padding: 40px 20px}
.reactions-loading-spinner {width: 32px;height: 32px;border: 3px solid #e4e6eb;border-top-color: #1877f2;border-radius: 50%;animation: reactions-spinner-spin 0.8s linear infinite}
@keyframes reactions-spinner-spin {to {transform: rotate(360deg)}}
.reactions-load-more {display: flex;justify-content: center;align-items: center;padding: 20px}
.reactions-list turbo-frame,
#reactions_list turbo-frame {display: contents}
@media (min-width: 769px) {body.fixed-footer-page .site-footer {position: fixed;bottom: 0;left: 0;right: 0;z-index: 100}
body.fixed-footer-page .received-reactions-container {padding-bottom: 70px}}
.notification-bell-container {position: absolute;top: 16px;right: 16px;z-index: 500}
.notification-bell-button {display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;padding: 0;background-color: #fff;border: none;border-radius: 50%;cursor: pointer;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);position: relative;transition: transform 0.2s ease, box-shadow 0.2s ease}
.notification-bell-button:hover {background-color: #f0f2f5;transform: scale(1.05)}
.notification-bell-button > svg {width: 22px;height: 22px;color: #606770;flex-shrink: 0}
.notification-bell-badge {position: absolute;top: -4px;right: -4px;min-width: 18px;height: 18px;padding: 0 5px;background-color: #dc3545;color: #fff;font-size: 11px;font-weight: 600;border-radius: 9px;display: flex;align-items: center;justify-content: center;border: 2px solid #f7f7f7;line-height: 1}
.notification-backdrop {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 999}
.notification-backdrop.hidden {display: none}
body.notification-modal-open {overflow: hidden}
.notification-dropdown {position: absolute;top: calc(100% + 8px);right: 0;width: 380px;max-height: 420px;background-color: #fff;border-radius: 12px;box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);overflow: hidden;z-index: 1000;display: flex;flex-direction: column}
.notification-dropdown-header {display: flex;align-items: center;justify-content: space-between;padding: 14px 16px;background-color: #f8f9fa;border-bottom: 1px solid #e4e6eb;flex-shrink: 0}
.notification-dropdown-header h4 {margin: 0;font-size: 1.1em;font-weight: 700;color: #1c1e21}
#notification-clear-all {display: flex;align-items: center}
#notification-clear-all form {display: inline;margin: 0;padding: 0}
.notification-clear-all-btn {background: none;border: none;color: #1877f2;font-size: 0.85em;font-weight: 500;cursor: pointer;padding: 6px 10px;border-radius: 6px;transition: background-color 0.2s}
.notification-clear-all-btn:hover {background-color: #e7f3ff}
.notification-dropdown-list {flex: 1;min-height: 0;max-height: 350px;overflow-y: auto;overflow-x: hidden}
.notification-dropdown-empty {padding: 40px 20px;text-align: center}
.notification-dropdown-empty p {margin: 0;color: #65676b;font-size: 0.95em}
.notification-dropdown-item {position: relative;background-color: #fff;border: 1px solid #e4e6eb;border-bottom: none}
.notification-dropdown-item:first-child {border-top-left-radius: 8px;border-top-right-radius: 8px}
.notification-dropdown-item:last-child {border-bottom: 1px solid #e4e6eb;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px}
.notification-dropdown-item.notification-unread {background-color: #e7f3ff}
.notification-dropdown-item:hover {background-color: #f0f2f5}
.notification-dropdown-item.notification-unread:hover {background-color: #d0e6ff}
.notification-dropdown-link {display: flex;align-items: flex-start;gap: 12px;padding: 12px 16px;padding-right: 48px;text-decoration: none;color: inherit;cursor: pointer;box-sizing: border-box;width: 100%}
a.notification-dropdown-link {display: flex}
a.notification-dropdown-link:hover {text-decoration: none}
.notification-dropdown-avatar {flex-shrink: 0;width: 40px;height: 40px}
.notification-dropdown-avatar img {width: 40px;height: 40px;border-radius: 50%;object-fit: cover}
.notification-dropdown-icon-fallback {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;background-color: #1877f2;border-radius: 50%}
.notification-dropdown-icon-fallback svg {width: 20px;height: 20px;color: #fff;stroke: #fff}
.notification-dropdown-icon-fallback i {font-size: 18px;color: #fff}
.notification-icon-ship {background-color: var(--color-primary)}
.notification-dropdown-content {flex: 1;min-width: 0;display: flex;flex-direction: column;align-items: stretch;gap: 4px;overflow: hidden}
.notification-dropdown-row {display: flex;justify-content: space-between;align-items: center;width: 100%;gap: 8px}
.notification-dropdown-sender {flex: 1;min-width: 0;font-size: 14px;font-weight: 500;line-height: 1.4;color: #1c1e21;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: left}
.notification-dropdown-comment {font-size: 13px;font-weight: 400;color: #65676b;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;text-align: left}
.notification-dropdown-time {flex-shrink: 0;font-size: 12px;color: #65676b;white-space: nowrap;min-width: 70px;text-align: right}
.notification-unread .notification-dropdown-sender {font-weight: 600}
.notification-unread .notification-dropdown-time {color: #1877f2;font-weight: 500}
.notification-delete-form {position: absolute;top: 50%;right: 10px;transform: translateY(-50%);margin: 0;padding: 0;z-index: 5}
.notification-delete-btn {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;padding: 0;margin: 0;background-color: transparent;border: none;border-radius: 50%;cursor: pointer;color: #65676b;opacity: 0;transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease}
.notification-dropdown-item:hover .notification-delete-btn {opacity: 1;background-color: rgba(0, 0, 0, 0.05)}
.notification-delete-btn:hover {background-color: #ffebee;color: #dc3545}
.notification-delete-btn svg {width: 14px;height: 14px;pointer-events: none}
@media (max-width: 480px) {.notification-bell-container {position: fixed;top: 12px;right: 12px;z-index: 10000}
.notification-backdrop {z-index: 9999}
.notification-bell-button {width: 40px;height: 40px}
.notification-bell-button > svg {width: 20px;height: 20px}
.notification-dropdown {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);bottom: auto;right: auto;width: 95%;max-width: 400px;max-height: 75vh;border-radius: 16px;box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);display: flex;flex-direction: column;animation: fadeInNotification 0.2s ease-out;z-index: 10001}
@keyframes fadeInNotification {from {opacity: 0;transform: translate(-50%, -50%) scale(0.95)}
to {opacity: 1;transform: translate(-50%, -50%) scale(1)}}
.notification-dropdown::before {display: none}
.notification-dropdown-header {padding: 12px 16px 14px;border-bottom: 1px solid #e4e6eb}
.notification-dropdown-header h4 {font-size: 16px;font-weight: 600}
.notification-dropdown-list {flex: 1;max-height: none;overflow-y: auto;-webkit-overflow-scrolling: touch}
.notification-dropdown-link {padding: 12px 16px;padding-right: 48px;gap: 12px;align-items: flex-start}
.notification-dropdown-avatar {width: 44px;height: 44px}
.notification-dropdown-avatar img {width: 44px;height: 44px}
.notification-dropdown-icon-fallback {width: 44px;height: 44px}
.notification-dropdown-sender {font-weight: 600}
.notification-dropdown-time {font-size: 11px;color: #8e8e93}
.notification-dropdown-comment {font-size: 12px}
.notification-delete-btn {opacity: 1;width: 32px;height: 32px;background-color: rgba(0, 0, 0, 0.04)}
.notification-delete-form {right: 12px}
.notification-delete-btn svg {width: 16px;height: 16px}}
@media (max-width: 768px) and (min-width: 481px) {.notification-dropdown {width: 360px;right: -8px}}