.profile-tabs {display: flex;border-bottom: 2px solid #e2e8f0;margin: 0 -20px;padding: 0 20px}
.profile-tab {flex: 1;display: flex;align-items: center;justify-content: center;gap: 5px;padding: 10px 0 8px;font-size: 0.78rem;font-weight: 700;color: #94a3b8;cursor: pointer;border: none;border-bottom: 2px solid transparent;margin-bottom: -2px;background: none;font-family: var(--font-family-base);transition: color 0.2s, border-color 0.2s}
.profile-tab svg {width: 16px;height: 16px}
.profile-tab.active {color: #0891b2;border-bottom-color: #0891b2}
.profile-tab:hover {color: #0891b2}
.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: #fff;border-radius: 16px;overflow: hidden;box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);margin-bottom: 30px;position: relative}
.cover-banner {height: 80px;background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #6366f1 100%);position: relative;overflow: hidden}
.cover-wave {position: absolute;bottom: -1px;left: 0;width: 100%;height: 16px}
.profile-body {padding: 0 18px}
.avatar-row {display: flex;align-items: flex-start;gap: 12px;margin-top: -32px;margin-bottom: 10px}
.avatar-wrap {flex: 0 0 auto;position: relative;display: flex;flex-direction: column;align-items: center}
.avatar-wrap .user-avatar {width: 64px;height: 64px;border: 3px solid #fff;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18)}
.avatar-wrap .user-achievement-badge-label {margin-top: 6px;font-size: 0.6rem;white-space: nowrap}
.g1-avatar-info {flex: 1;min-width: 0;padding-top: 34px;display: flex;align-items: flex-start;justify-content: space-between;gap: 8px}
.g1-name-side {flex: 1;min-width: 0}
.name-row {display: flex;align-items: center;gap: 6px;flex-wrap: wrap}
.user-name {font-size: 1.05rem;font-weight: 700;color: #1e293b;overflow-wrap: anywhere}
.g1-avatar-info .follow-btn {font-size: 0.7rem;font-weight: 600;padding: 4px 12px;border-radius: 999px;border: 1.5px solid #1877f2}
.g1-avatar-info .follow-btn--following {background: #f1f5f9;color: #374151;border-color: #d1d5db}
.g1-avatar-info .follow-btn--following:hover {background: #fee2e2;color: #dc2626;border-color: #fca5a5}
.g1-avatar-info > [data-controller="follow"] {display: flex;flex-direction: column;align-items: flex-end;gap: 4px;flex-shrink: 0}
.g1-avatar-info .follow-pill {font-size: 0.7rem;padding: 3px 10px}
.g1-bio-block {margin-bottom: 14px}
.g1-guild-sns-row {display: flex;align-items: center;gap: 8px;flex-wrap: wrap;margin-top: 10px}
.g1-guild-sns-row .user-guild-badge {margin-bottom: 0}
.stats-bar {display: flex;border-top: 1px solid #f1f5f9}
.stat-cell {flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 14px 4px;border-right: 1px solid #f1f5f9;cursor: pointer;transition: background 0.15s;position: relative;text-decoration: none;color: inherit}
.stat-cell:last-child {border-right: none}
.stat-cell:hover {background: #f8fafc}
.g1-follow-bar {background: #f8fafc;border-top: 1px solid #e2e8f0;display: flex;align-items: center;padding: 8px 0}
.g1-follow-item {flex: 1;display: flex;flex-direction: row;align-items: baseline;justify-content: center;gap: 4px;cursor: pointer;text-decoration: none;color: inherit}
.g1-follow-item:hover .g1-follow-num {color: #1877f2}
.g1-follow-num {font-size: 0.85rem;font-weight: 700;color: #1e293b;line-height: 1;transition: color 0.15s}
.g1-follow-lbl {font-size: 0.7rem;color: #64748b}
.g1-follow-sep {width: 1px;height: 20px;background: #e2e8f0;flex-shrink: 0}
.user-report-button {position: absolute;top: 8px;right: 8px;display: flex;align-items: center;justify-content: center;width: 34px;height: 34px;border: none;border-radius: 50%;background: rgba(255, 255, 255, 0.9);color: #888;cursor: pointer;transition: background 0.15s, color 0.15s;z-index: 2;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1)}
.user-report-button:hover {background: #fff;color: #e53935;opacity: 1}
.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-copy-link-button {position: absolute;top: 8px;right: 48px;display: inline-flex;align-items: center;justify-content: center;width: 34px;height: 34px;padding: 0;border: none;border-radius: 50%;background: rgba(255, 255, 255, 0.9);color: #64748b;cursor: pointer;transition: background 0.15s, color 0.15s;z-index: 2;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1)}
.user-copy-link-button svg {width: 15px;height: 15px}
.user-copy-link-button:hover {background: #fff;color: #1877f2}
.user-plan-badge {display: inline-block;padding: 1px 7px;border-radius: 999px;font-size: 0.62rem;font-weight: 700;letter-spacing: 0.5px;text-transform: uppercase;text-decoration: none;transition: all 0.2s ease}
.user-plan-badge-basic {background: #e0e7ff;color: #4338ca}
.user-plan-badge-basic:hover {background: #c7d2fe;color: #4338ca}
.user-plan-badge-pro {background: linear-gradient(90deg, #f59e0b, #eab308);color: #fff}
.user-plan-badge-pro:hover {background: linear-gradient(90deg, #d97706, #ca8a04);color: #fff}
.user-stats {display: flex;justify-content: center;gap: 12px;margin-top: 16px}
.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--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: flex-start}
.user-bio-row {display: flex;align-items: flex-start;gap: 4px;max-width: 100%}
.user-bio-display {font-size: 0.83rem;color: #64748b;text-align: left;word-break: break-word;overflow-wrap: anywhere;white-space: pre-wrap;max-width: 100%;line-height: 1.6}
.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.68rem;color: #64748b;margin-top: 3px}
.stat-value {font-size: 1.15rem;font-weight: 800;color: #1e293b;line-height: 1}
.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)}}
.stat-item--rank-1 {border-color: #f0c040;box-shadow: 0 0 0 1px rgba(240, 192, 64, 0.35), 0 2px 12px rgba(240, 192, 64, 0.2);background: linear-gradient(145deg, #fffdf5 60%, #fff4d1 100%)}
.stat-item--rank-1 .stat-value { color: #d49a08; }
.stat-item--rank-1:hover {border-color: #e8b530;box-shadow: 0 4px 18px rgba(240, 192, 64, 0.35)}
.stat-item--rank-2 {border-color: #b8bfc8;box-shadow: 0 0 0 1px rgba(184, 191, 200, 0.35), 0 2px 12px rgba(184, 191, 200, 0.18);background: linear-gradient(145deg, #fefefe 60%, #f0f2f6 100%)}
.stat-item--rank-2 .stat-value { color: #6b7385; }
.stat-item--rank-2:hover {border-color: #a8b0ba;box-shadow: 0 4px 18px rgba(184, 191, 200, 0.3)}
.stat-item--rank-3 {border-color: #d4935a;box-shadow: 0 0 0 1px rgba(212, 147, 90, 0.3), 0 2px 12px rgba(212, 147, 90, 0.15);background: linear-gradient(145deg, #fffaf5 60%, #fceee0 100%)}
.stat-item--rank-3 .stat-value { color: #c07838; }
.stat-item--rank-3:hover {border-color: #c88550;box-shadow: 0 4px 18px rgba(212, 147, 90, 0.3)}
.stat-item--rank-top10 {border-color: #7cb8ff;box-shadow: 0 0 0 1px rgba(124, 184, 255, 0.25), 0 2px 12px rgba(124, 184, 255, 0.15);background: linear-gradient(145deg, #f8fbff 60%, #e8f2ff 100%)}
.stat-item--rank-top10 .stat-value { color: #3b8df0; }
.stat-item--rank-top10:hover {border-color: #5aa0f5;box-shadow: 0 4px 18px rgba(124, 184, 255, 0.3)}
.stat-item--rank-top30 {border-color: #6dd5a0;box-shadow: 0 0 0 1px rgba(109, 213, 160, 0.25), 0 2px 12px rgba(109, 213, 160, 0.12);background: linear-gradient(145deg, #f6fdf9 60%, #e2f8ec 100%)}
.stat-item--rank-top30 .stat-value { color: #1da05a; }
.stat-item--rank-top30:hover {border-color: #4cc88a;box-shadow: 0 4px 18px rgba(109, 213, 160, 0.28)}
.stat-item--rank-top100 {border-color: #b8a0e8;box-shadow: 0 0 0 1px rgba(184, 160, 232, 0.25), 0 2px 12px rgba(184, 160, 232, 0.12);background: linear-gradient(145deg, #fbf9ff 60%, #f0ebfa 100%)}
.stat-item--rank-top100 .stat-value { color: #7c5ec4; }
.stat-item--rank-top100:hover {border-color: #a088d8;box-shadow: 0 4px 18px rgba(184, 160, 232, 0.28)}
.stat-ranking-label {position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);display: inline-flex;align-items: center;gap: 3px;padding: 2px 10px;border-radius: 10px;font-size: 0.6em;font-weight: 700;white-space: nowrap;letter-spacing: 0.02em}
.stat-ranking-label--1 {background: rgba(220, 170, 30, 0.88);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);color: #fff;box-shadow: 0 1px 5px rgba(220, 170, 30, 0.4)}
.stat-ranking-label--2 {background: rgba(140, 150, 165, 0.82);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);color: #fff;box-shadow: 0 1px 5px rgba(140, 150, 165, 0.35)}
.stat-ranking-label--3 {background: rgba(200, 125, 60, 0.85);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);color: #fff;box-shadow: 0 1px 5px rgba(200, 125, 60, 0.35)}
.stat-ranking-label--top10 {background: rgba(59, 141, 240, 0.78);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);color: #fff;box-shadow: 0 1px 5px rgba(59, 141, 240, 0.3)}
.stat-ranking-label--top30 {background: rgba(29, 160, 90, 0.78);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);color: #fff;box-shadow: 0 1px 5px rgba(29, 160, 90, 0.3)}
.stat-ranking-label--top100 {background: rgba(124, 94, 196, 0.78);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);color: #fff;box-shadow: 0 1px 5px rgba(124, 94, 196, 0.3)}
.sort-inline-bar {display: flex;align-items: center;gap: 8px;padding: 8px 12px;border: 1px solid #e4e6eb;border-radius: 10px;background: #f7f7f7;flex-wrap: wrap;margin-top: 8px}
.sort-inline-icon {display: flex;align-items: center;color: #65676b;flex-shrink: 0}
.sort-inline-select {appearance: none;-webkit-appearance: none;background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2365676b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center;border: 1px solid #e4e6eb;border-radius: 6px;padding: 5px 28px 5px 10px;font-size: 0.8em;color: #1c1e21;cursor: pointer;font-family: inherit;transition: border-color 0.2s;max-width: 100%;box-sizing: border-box}
.sort-inline-select:focus {outline: none;border-color: #1e88e5;box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.15)}
.sort-inline-divider {width: 1px;height: 20px;background: #e4e6eb;flex-shrink: 0}
.sort-inline-order {display: inline-flex;align-items: center;gap: 4px;padding: 5px 10px;border: 1px solid #e4e6eb;border-radius: 6px;background: #fff;font-size: 0.78em;color: #65676b;cursor: pointer;transition: all 0.2s;font-family: inherit;white-space: nowrap}
.sort-inline-order:hover {border-color: #1e88e5;color: #1e88e5}
.sort-inline-order svg {transition: transform 0.2s}
.sort-inline-order svg.sort-icon-asc {transform: rotate(180deg)}
.fishing-reports-pagination {display: flex;align-items: center;justify-content: center;gap: 16px;padding: 16px 0;min-height: 48px}
.pagination-btn {display: inline-flex;align-items: center;gap: 4px;padding: 8px 16px;border-radius: 8px;font-size: 0.85em;font-weight: 600;text-decoration: none;color: #1e88e5;transition: background 0.15s, color 0.15s;white-space: nowrap;min-width: 72px;justify-content: center}
.pagination-btn:hover {background: rgba(30, 136, 229, 0.08)}
.pagination-btn:active {background: rgba(30, 136, 229, 0.15)}
.pagination-disabled {color: #bcc0c4;pointer-events: none}
.pagination-indicator {font-size: 0.85em;color: #65676b;white-space: nowrap;min-width: 56px;text-align: center}
.pagination-indicator strong {color: #1e88e5;font-weight: 700}
.no-reports-message {text-align: center;color: #65676b;padding: 24px 0}
.fishing-reports-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));gap: 16px;margin-top: 20px;min-height: 420px;align-content: start}
.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-sort-badge {position: absolute;top: 6px;right: 6px;z-index: 2;background: rgba(0, 0, 0, 0.55);color: #fff;font-size: 0.65em;font-weight: 600;padding: 2px 7px;border-radius: 10px;backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);display: inline-flex;align-items: center;gap: 3px;line-height: 1.4;pointer-events: none}
.fishing-report-sort-badge .sort-badge-icon {width: 12px;height: 12px;flex-shrink: 0}
.fishing-report-card-overlay {position: absolute;bottom: 0;left: 0;right: 0;padding: 6px 8px;background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 60%, transparent 100%);display: flex;flex-direction: column;gap: 2px;z-index: 1;transition: background 0.25s ease}
.fishing-report-card:hover .fishing-report-card-overlay {background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.1) 85%, transparent 100%)}
.fishing-report-card-date-overlay {color: rgba(255, 255, 255, 0.85);font-size: 0.65em;font-weight: 400;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4)}
.fishing-report-card-fish-name {color: #fff;font-size: 0.82em;font-weight: 600;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4)}
.fishing-report-card-comment-overlay {color: rgba(255, 255, 255, 0.75);font-size: 0.68em;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.3)}
.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}
.sort-inline-select {min-width: 120px;font-size: 0.78em}}
@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}
.fishing-report-sort-badge {font-size: 0.55em;padding: 1px 5px;top: 3px;right: 3px}
.user-name-header {font-size: 1.5em}
.sort-inline-bar {gap: 6px;padding: 6px 10px}
.pagination-btn {padding: 6px 12px;font-size: 0.8em;min-width: 60px}
.pagination-indicator {font-size: 0.8em}}
@media (max-width: 480px) {.profile-body {padding: 0 12px}
.avatar-row {gap: 8px}
.avatar-wrap .user-achievement-badge-label {font-size: 0.55rem}
.g1-avatar-info {padding-top: 34px;flex-wrap: wrap}
.user-name {font-size: 0.95rem}
.g1-follow-bar {padding: 7px 0}
.g1-guild-sns-row {flex-direction: column;align-items: flex-start;gap: 8px}
.g1-avatar-info .follow-btn {font-size: 0.65rem;padding: 3px 10px}
.user-social-link-add-btn {font-size: 0.75rem}
.user-social-links-section {width: 100%}
.stats-bar .stat-cell {padding: 10px 2px}
.stat-value {font-size: 1rem}
.stat-label {font-size: 0.62rem}
.stat-ranking-label {font-size: 0.5em;padding: 1px 6px;bottom: -8px}}
.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-link-text {display: flex;flex-direction: column;flex: 1;min-width: 0}
.tackle-link-hint {font-size: 12px;color: #65676b;margin-top: 2px}
.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-item-detail-link {text-decoration: none;color: inherit;transition: background-color 0.2s}
.user-tackle-set-card .tackle-item-detail-link:hover {background-color: #f0f7ff}
.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}
.tackle-item-detail-row {display: flex;align-items: center;gap: 8px}
.tackle-item-detail-row .tackle-item-detail,
.tackle-item-detail-row .tackle-item-detail-link {flex: 1;min-width: 0}
.tackle-rating-icon-btn {display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;border-radius: 50%;border: none;background-color: #eef5ff;color: #1877f2;cursor: pointer;flex-shrink: 0;transition: background-color 0.2s, transform 0.15s}
.tackle-rating-icon-btn:hover {background-color: #dbeafe;transform: scale(1.1)}
.tackle-rating-icon-btn:active {transform: scale(0.95)}
.tackle-rating-modal-overlay {position: fixed;inset: 0;background-color: rgba(0, 0, 0, 0);display: flex;align-items: center;justify-content: center;z-index: 9999;padding: 20px;transition: background-color 0.2s}
.tackle-rating-modal-overlay.is-visible {background-color: rgba(0, 0, 0, 0.5)}
.tackle-rating-modal {background-color: #fff;border-radius: 16px;width: 100%;max-width: 380px;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);overflow: hidden;transform: scale(0.95) translateY(10px);opacity: 0;transition: transform 0.2s ease, opacity 0.2s ease}
.tackle-rating-modal-overlay.is-visible .tackle-rating-modal {transform: scale(1) translateY(0);opacity: 1}
.tackle-rating-modal-header {display: flex;align-items: center;justify-content: space-between;padding: 16px 20px;border-bottom: 1px solid #f0f2f5}
.tackle-rating-modal-title {display: flex;align-items: center;gap: 8px;font-size: 15px;font-weight: 600;color: #0f172a}
.tackle-rating-modal-title svg {color: #1877f2}
.tackle-rating-modal-close {display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;border-radius: 50%;border: none;background-color: transparent;color: #64748b;cursor: pointer;transition: background-color 0.2s}
.tackle-rating-modal-close:hover {background-color: #f1f5f9}
.tackle-rating-modal-tackle-info {display: flex;align-items: center;gap: 8px;padding: 12px 20px;background-color: #f8fafc}
.tackle-rating-modal-manufacturer {font-size: 12px;font-weight: 500;color: #1877f2;background-color: #e7f3ff;padding: 2px 8px;border-radius: 4px}
.tackle-rating-modal-name {font-size: 14px;font-weight: 500;color: #1e293b}
.tackle-rating-modal-body {padding: 20px}
.tackle-rating-modal-text {font-size: 14px;line-height: 1.7;color: #334155;margin: 0;white-space: pre-wrap;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;top: 38px;right: -6px;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;z-index: 2}
.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: 10001}
.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 a {position: relative;display: inline-block}
.reaction-report-thumbnail {width: 50px;height: 50px;border-radius: 6px;object-fit: cover;display: block}
.reaction-report-thumbnail--article {display: flex;align-items: center;justify-content: center;background-color: #e8f4f8}
.reaction-article-icon {width: 24px;height: 24px;color: #1a6fb5}
.reaction-badge {position: absolute;bottom: -4px;right: -4px;font-size: 0.6em;padding: 1px 5px;border-radius: 3px;font-weight: 600;line-height: 1.4}
.reaction-badge--article {background-color: #e0f0ff;color: #1a6fb5}
.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: 8px;right: 8px;z-index: 500}
.notification-bell-button {display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;padding: 0;background-color: rgba(255, 255, 255, 0.9);border: none;border-radius: 50%;cursor: pointer;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);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 #fff;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-icon-warning {background-color: #e53935}
.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-message-row {display: flex;align-items: center;gap: 6px;min-width: 0}
.notification-stamp-icon {flex-shrink: 0;width: 22px;height: 22px;display: inline-flex;align-items: center;justify-content: center}
.notification-stamp-icon svg {width: 100%;height: 100%}
.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}}
.admin-profile-avatar {display: flex;align-items: center;justify-content: center;border-radius: 50%;overflow: hidden;background: #fff;border: 2px solid #e0e0e0}
.admin-profile-icon {width: 100%;height: 100%;border-radius: 50%;object-fit: cover}
.admin-profile-articles-section {margin-top: 24px}
.admin-profile-section-title {display: flex;align-items: center;gap: 8px;font-size: 1.2em;font-weight: 700;color: #1c1e21;margin: 0 0 16px 0}
.admin-profile-articles-count {color: #666;font-size: 0.85em;font-weight: 400}
.admin-profile-empty {text-align: center;color: #999;padding: 40px 0}
.user-social-links-section {margin-top: 0}
.user-social-links {display: flex;align-items: center;gap: 6px;flex-wrap: wrap}
.user-social-link-item {display: inline-flex;align-items: center;justify-content: center;width: 30px;height: 30px;border-radius: 50%;border: 1.5px solid #e2e8f0;background: #f8fafc;color: #475569;transition: border-color 0.15s, color 0.15s;flex-shrink: 0}
.user-social-link-item svg {width: 15px;height: 15px}
.user-social-link-item:hover {border-color: currentColor}
.user-social-link-edit-btn {display: inline-flex;align-items: center;justify-content: center;width: 28px;height: 28px;border-radius: 50%;border: 1px dashed #ccc;background: transparent;color: #999;cursor: pointer;transition: border-color 0.2s, color 0.2s}
.user-social-link-edit-btn:hover {border-color: #888;color: #555}
.user-social-link-add-btn {display: inline-flex;align-items: center;gap: 6px;padding: 6px 14px;border: 1px dashed #ccc;border-radius: 20px;background: transparent;color: #888;font-size: 0.8rem;cursor: pointer;transition: border-color 0.2s, color 0.2s}
.user-social-link-add-btn:hover {border-color: #888;color: #555}
.social-links-modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 10001;padding: 16px}
.social-links-modal-overlay.hidden {display: none}
.social-links-modal {background: #fff;border-radius: 12px;padding: 24px;width: 100%;max-width: 420px;max-height: 80vh;overflow-y: auto;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15)}
.social-links-modal-title {font-size: 1.05rem;font-weight: 600;margin: 0 0 16px 0;color: #1c1e21}
.social-links-form-fields {display: flex;flex-direction: column;gap: 12px}
.social-links-form-field {display: flex;flex-direction: column;gap: 4px}
.social-links-form-label {font-size: 0.8rem;font-weight: 500;color: #555}
.social-links-form-input {width: 100%;max-width: 100%;box-sizing: border-box;padding: 8px 12px;border: 1px solid #ddd;border-radius: 8px;font-size: 0.85rem;outline: none;transition: border-color 0.2s}
.social-links-form-input:focus {border-color: #4a90d9}
.social-links-form-input::placeholder {color: #bbb}
.social-links-modal-buttons {display: flex;justify-content: flex-end;gap: 8px;margin-top: 20px}
.social-links-cancel-btn {padding: 8px 18px;border: 1px solid #ddd;border-radius: 8px;background: #fff;color: #555;font-size: 0.85rem;cursor: pointer;transition: background 0.2s}
.social-links-cancel-btn:hover {background: #f5f5f5}
.social-links-save-btn {padding: 8px 18px;border: none;border-radius: 8px;background: #4a90d9;color: #fff;font-size: 0.85rem;font-weight: 500;cursor: pointer;transition: background 0.2s}
.social-links-save-btn:hover {background: #3a7bc8}
@media (max-width: 480px) {.social-links-modal {padding: 20px 16px;max-height: 85vh}
.social-links-modal-buttons {flex-direction: column-reverse}
.social-links-cancel-btn,
.social-links-save-btn {width: 100%;text-align: center;padding: 10px}}