.fish-book-container {max-width: 1200px;margin: 0 auto;padding: 20px}
.fish-book-hero {background: linear-gradient(135deg, #0d47a1 0%, #1565c0 50%, #1976d2 100%);border-radius: 20px;padding: 24px;margin-bottom: 24px;color: #fff;position: relative;overflow: hidden}
.fish-book-hero::before {content: "";position: absolute;top: -50%;right: -20%;width: 300px;height: 300px;background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);pointer-events: none}
.fish-book-back-btn {position: absolute;top: 16px;left: 16px;width: 36px;height: 36px;background: rgba(255, 255, 255, 0.15);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;text-decoration: none;transition: background 0.2s ease}
.fish-book-back-btn:hover {background: rgba(255, 255, 255, 0.25)}
.fish-book-hero-content {display: flex;flex-direction: column;gap: 20px}
.fish-book-main-stat {display: flex;align-items: center;gap: 20px;padding-top: 8px}
.completion-badge {position: relative;width: 100px;height: 100px;flex-shrink: 0}
.completion-badge .circular-chart {display: block;width: 100%;height: 100%;filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2))}
.completion-badge .circle-bg {fill: none;stroke: rgba(255, 255, 255, 0.2);stroke-width: 3}
.completion-badge .circle {fill: none;stroke: #4fc3f7;stroke-width: 3.5;stroke-linecap: round;transform: rotate(-90deg);transform-origin: center;transition: stroke-dasharray 0.6s ease;filter: drop-shadow(0 0 6px rgba(79, 195, 247, 0.6))}
.completion-badge-inner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;display: flex;align-items: baseline;justify-content: center}
.completion-badge-value {font-size: 2em;font-weight: 800;color: #fff;line-height: 1;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)}
.completion-badge-unit {font-size: 0.9em;font-weight: 600;color: rgba(255, 255, 255, 0.9);margin-left: 1px}
.fish-book-title-area {flex: 1}
.fish-book-title {font-size: 1.5em;font-weight: 700;margin: 0 0 8px 0;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15)}
.fish-book-progress {display: flex;align-items: baseline;gap: 2px;flex-wrap: wrap}
.progress-caught {font-size: 2em;font-weight: 800;color: #4fc3f7;line-height: 1;text-shadow: 0 0 10px rgba(79, 195, 247, 0.5)}
.progress-separator {font-size: 1.2em;color: rgba(255, 255, 255, 0.6);margin: 0 2px}
.progress-total {font-size: 1.2em;font-weight: 600;color: rgba(255, 255, 255, 0.8)}
.progress-label {font-size: 0.9em;color: rgba(255, 255, 255, 0.7);margin-left: 6px}
.fish-book-rarity-mini {display: flex;gap: 8px;flex-wrap: wrap}
.rarity-mini-item {flex: 1;min-width: 80px;background: rgba(255, 255, 255, 0.1);border-radius: 10px;padding: 10px}
.rarity-mini-stars {font-size: 0.7em;margin-bottom: 6px;line-height: 1}
.rarity-mini-stars .star {color: #fbbf24;text-shadow: 0 0 4px rgba(251, 191, 36, 0.5)}
.rarity-mini-progress {display: flex;align-items: center;gap: 6px}
.rarity-mini-bar {flex: 1;height: 4px;background: rgba(255, 255, 255, 0.2);border-radius: 2px;overflow: hidden}
.rarity-mini-fill {height: 100%;background: linear-gradient(90deg, #4fc3f7, #81d4fa);border-radius: 2px;transition: width 0.4s ease}
.rarity-mini-count {font-size: 0.7em;color: rgba(255, 255, 255, 0.8);white-space: nowrap}
.fish-book-categories {display: flex;flex-direction: column;gap: 24px}
.fish-book-category {background: #fff;border-radius: 16px;padding: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)}
.fish-book-category.locked {opacity: 0.7}
.category-header {margin-bottom: 16px}
.category-title-area {display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px}
.category-title {font-size: 1.2em;font-weight: 600;color: #1c1e21;margin: 0;display: flex;align-items: center;gap: 8px}
.category-icon {display: inline-flex;align-items: center;justify-content: center;width: 28px;height: 28px;border-radius: 6px}
.unlocked-icon {background: #e7f3ff;color: #1877f2}
.locked-icon {background: #f0f2f5;color: #606770}
.category-count {font-size: 0.9em;color: #606770;font-weight: 500}
.category-progress {display: flex;align-items: center;gap: 12px}
.category-progress-bar {flex: 1;height: 6px;background: #e4e6e9;border-radius: 3px;overflow: hidden}
.category-progress-fill {height: 100%;background: linear-gradient(90deg, #1877f2, #42a5f5);border-radius: 3px;transition: width 0.4s ease}
.category-rate {font-size: 0.85em;font-weight: 600;color: #1877f2;min-width: 35px;text-align: right}
.category-fishes {display: grid;grid-template-columns: repeat(auto-fill, 100px);gap: 12px;justify-content: start}
.fish-card {min-height: 100px;border-radius: 12px;cursor: pointer;transition: all 0.2s ease}
.fish-card:hover {transform: translateY(-2px)}
.fish-card-inner {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 12px 8px;text-align: center;box-sizing: border-box}
.fish-card.caught {background: linear-gradient(135deg, #e7f3ff 0%, #d4e9ff 100%);border: 2px solid #1877f2}
.fish-card.caught:hover {box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3)}
.fish-card.caught .fish-card-icon {color: #1877f2;margin-bottom: 6px}
.fish-card.caught .fish-card-name {font-size: 0.75em;font-weight: 600;color: #1c1e21;line-height: 1.2;word-break: break-all}
.fish-card.has-image {position: relative;overflow: hidden;border: 2px solid #1877f2;padding: 0}
.fish-card-image {width: 100%;height: 100px;overflow: hidden}
.fish-card-image img {width: 100%;height: 100%;object-fit: cover;display: block}
.fish-card-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);padding: 24px 6px 6px;text-align: center}
.fish-card.has-image .fish-card-overlay .fish-card-name {font-size: 0.75em;font-weight: 700;color: #ffffff;line-height: 1.2;word-break: break-all;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);display: block;margin-bottom: 2px}
.fish-card.has-image .fish-card-overlay .fish-card-rarity {margin-top: 2px;font-size: 0.6em;line-height: 1}
.fish-card.has-image .fish-card-overlay .star {color: rgba(255, 255, 255, 0.5)}
.fish-card.has-image .fish-card-overlay .star.filled {color: #fbbf24}
.fish-card.not-caught {background: #f5f6f7;border: 2px dashed #dddfe2}
.fish-card.not-caught:hover {border-color: #bbbfc4}
.fish-card-silhouette {width: 48px;height: 48px;background: #dddfe2;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 6px}
.silhouette-mark {font-size: 1.5em;font-weight: 700;color: #fff}
.fish-card-name.unknown {font-size: 0.75em;color: #bbbfc4;font-weight: 500}
.fish-card-rarity {margin-top: 4px;font-size: 0.65em;line-height: 1}
.fish-card-rarity .star {color: #dddfe2}
.fish-card-rarity .star.filled {color: #fbbf24}
.fish-card.not-caught .fish-card-rarity .star {color: #e4e6e9}
.fish-detail-modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: var(--z-index-modal);display: flex;align-items: center;justify-content: center;padding: 20px;box-sizing: border-box}
.fish-detail-modal.hidden {display: none}
.fish-detail-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);backdrop-filter: blur(4px)}
.fish-detail-content {position: relative;background: #fff;border-radius: 16px;max-width: 400px;width: 100%;height: 70vh;max-height: 600px;display: flex;flex-direction: column;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);animation: modal-slide-in 0.25s ease-out;overflow: hidden}
@keyframes modal-slide-in {from {opacity: 0;transform: scale(0.95) translateY(10px)}
to {opacity: 1;transform: scale(1) translateY(0)}}
.fish-detail-close {position: absolute;top: 12px;right: 12px;width: 36px;height: 36px;border: none;background: rgba(255, 255, 255, 0.9);border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;color: #606770;transition: all 0.2s ease;z-index: 1}
.fish-detail-close:hover {background: #fff;color: #1c1e21;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)}
.fish-detail-body {padding: 0;flex: 1;display: flex;flex-direction: column;overflow: hidden}
.fish-detail-image {width: 100%;max-height: 250px;overflow: hidden;background: #f0f2f5}
.fish-detail-image img {width: 100%;height: 100%;max-height: 250px;object-fit: cover;display: block}
.fish-detail-hero {position: relative;width: 100%;height: 240px;overflow: hidden;background: #f0f2f5;flex-shrink: 0}
.fish-detail-hero img {width: 100%;height: 100%;object-fit: cover;display: block}
.fish-detail-hero-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);padding: 40px 16px 12px}
.fish-detail-hero-content {display: flex;justify-content: space-between;align-items: flex-end;gap: 12px}
.fish-detail-hero-main {flex: 1;min-width: 0}
.fish-detail-hero-name {font-size: 1.4em;font-weight: 700;color: #fff;margin: 0 0 6px 0;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5)}
.fish-detail-hero-category {font-size: 0.75em;color: rgba(255, 255, 255, 0.9);background: rgba(255, 255, 255, 0.2);padding: 3px 8px;border-radius: 4px;display: inline-block}
.fish-detail-hero-count {display: flex;flex-direction: column;align-items: center;background: rgba(255, 255, 255, 0.15);border-radius: 8px;padding: 8px 12px;flex-shrink: 0}
.fish-detail-hero-count-main {display: flex;align-items: baseline;gap: 2px}
.fish-detail-hero-count-value {font-size: 1.5em;font-weight: 700;color: #fff;line-height: 1}
.fish-detail-hero-count-unit {font-size: 0.85em;font-weight: 600;color: #fff}
.fish-detail-hero-count-label {font-size: 0.65em;font-weight: 500;color: rgba(255, 255, 255, 0.85);margin-top: 2px}
.fish-detail-header {background: linear-gradient(135deg, #1877f2 0%, #166fe5 100%);padding: 24px 20px;color: #fff;display: flex;justify-content: space-between;align-items: flex-start;gap: 16px}
.fish-detail-header-main {flex: 1}
.fish-detail-name {font-size: 1.6em;font-weight: 700;margin: 0 0 8px 0}
.fish-detail-category {font-size: 0.85em;opacity: 0.9;background: rgba(255, 255, 255, 0.15);padding: 4px 10px;border-radius: 4px;display: inline-block}
.fish-detail-info {padding: 20px}
.fish-detail-description {color: #606770;font-size: 0.95em;line-height: 1.6;margin: 0 0 16px 0;padding: 12px 14px;background: #f0f2f5;border-radius: 8px;border-left: 3px solid #1877f2}
.fish-detail-stats {display: grid;grid-template-columns: 1fr 1fr;gap: 12px;margin-bottom: 16px}
.fish-detail-stat {background: #f7f8fa;border: 1px solid #e4e6e9;border-radius: 10px;padding: 12px;text-align: center}
.fish-detail-stat-label {font-size: 0.7em;color: #606770;text-transform: uppercase;letter-spacing: 0.5px;margin-bottom: 6px}
.fish-detail-stat-value {font-size: 0.9em;font-weight: 600;color: #1c1e21}
.fish-detail-stat-stars {font-size: 1em}
.fish-detail-stat-stars .star {color: #dddfe2}
.fish-detail-stat-stars .star.filled {color: #fbbf24}
.fish-detail-catch-count {display: flex;flex-direction: column;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.15);border-radius: 10px;padding: 10px 16px;min-width: 70px}
.fish-detail-catch-count-main {display: flex;align-items: baseline;gap: 2px}
.fish-detail-catch-count-value {font-size: 1.8em;font-weight: 700;color: #fff;line-height: 1}
.fish-detail-catch-count-unit {font-size: 1em;font-weight: 600;color: #fff}
.fish-detail-catch-count-label {font-size: 0.75em;font-weight: 500;color: rgba(255, 255, 255, 0.85);margin-top: 4px}
.fish-detail-sizes {display: grid;grid-template-columns: 1fr 1fr;gap: 12px}
.fish-detail-size {display: flex;align-items: center;gap: 10px;background: #f7f8fa;border: 1px solid #e4e6e9;border-radius: 8px;padding: 10px 12px}
.fish-detail-size-icon {width: 32px;height: 32px;background: #e7f3ff;border-radius: 8px;display: flex;align-items: center;justify-content: center;color: #1877f2}
.fish-detail-size-content {display: flex;flex-direction: column}
.fish-detail-size-label {font-size: 0.65em;color: #606770;text-transform: uppercase}
.fish-detail-size-value {font-size: 0.85em;font-weight: 600;color: #1c1e21}
.fish-detail-size-record {font-size: 0.7em;font-weight: 600;color: #1877f2;background: #e7f3ff;padding: 2px 6px;border-radius: 4px;margin-top: 4px}
.fish-detail-warning {background: #fef3c7;border: 1px solid #fbbf24;border-radius: 8px;padding: 12px 14px;display: flex;align-items: center;gap: 12px;margin-top: 16px}
.fish-detail-warning-icon {width: 36px;height: 36px;background: var(--color-warning);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;flex-shrink: 0}
.fish-detail-warning-text {flex: 1}
.fish-detail-warning-title {font-size: 0.75em;font-weight: 700;color: #92400e;text-transform: uppercase;letter-spacing: 0.5px}
.fish-detail-pages {flex: 1;overflow-y: auto;overflow-x: hidden}
.fish-detail-page {display: none;min-height: 100%}
.fish-detail-page.active {display: block}
.fish-detail-pagination {display: flex;justify-content: center;gap: 8px;padding: 12px 0 16px;background: #fff}
.fish-detail-page-dot {width: 8px;height: 8px;border-radius: 50%;border: none;background: #dddfe2;padding: 0;cursor: pointer;transition: all 0.2s ease}
.fish-detail-page-dot.active {background: #1877f2;width: 20px;border-radius: 4px}
.fish-detail-page-dot:hover {background: #bbbfc4}
.fish-detail-page-dot.active:hover {background: #166fe5}
.fish-detail-history-list {padding: 12px 16px}
.fish-detail-history-empty {text-align: center;padding: 40px 20px;color: #606770}
.fish-detail-history-item {display: flex;justify-content: space-between;align-items: center;padding: 12px;background: #f7f8fa;border-radius: 8px;margin-bottom: 8px;text-decoration: none;color: inherit;transition: background 0.2s ease}
.fish-detail-history-item:hover {background: #e4e6e9}
.fish-detail-history-item:last-child {margin-bottom: 0}
.fish-detail-history-date {display: flex;align-items: center;gap: 6px;color: #1c1e21;font-size: 0.85em;font-weight: 500}
.fish-detail-history-date svg {color: #606770}
.fish-detail-history-data {display: flex;gap: 16px}
.fish-detail-history-data-item {display: flex;align-items: center;gap: 4px;font-size: 0.8em;color: #606770}
.fish-detail-history-data-item svg {color: #1877f2}
.fish-detail-warning-message {font-size: 0.85em;color: #78350f;line-height: 1.4;margin: 2px 0 0 0}
.fish-detail-history-user {display: flex;align-items: center;gap: 4px;color: #1877f2;font-size: 0.8em;font-weight: 500}
.fish-detail-history-user i {font-size: 0.85em;color: #606770}
@media (max-width: 768px) {.fish-book-container {padding: 12px}
.fish-book-hero {padding: 16px;border-radius: 16px;margin-bottom: 16px}
.fish-book-back-btn {top: 12px;left: 12px;width: 32px;height: 32px}
.fish-book-main-stat {gap: 16px}
.completion-badge {width: 80px;height: 80px}
.completion-badge-value {font-size: 1.6em}
.fish-book-title {font-size: 1.2em}
.progress-caught {font-size: 1.6em}
.progress-total {font-size: 1em}
.rarity-mini-item {min-width: 60px;padding: 8px}
.fish-book-category {padding: 16px;border-radius: 12px}
.category-fishes {grid-template-columns: repeat(auto-fill, 80px);gap: 8px}
.fish-card {min-height: 85px}
.fish-card-inner {padding: 8px 6px}
.fish-card.caught .fish-card-icon svg {width: 24px;height: 24px}
.fish-card-image {height: 85px}
.fish-card-silhouette {width: 36px;height: 36px}
.silhouette-mark {font-size: 1.2em}
.fish-detail-modal {padding: 12px}
.fish-detail-content {border-radius: 12px}
.fish-detail-header {padding: 20px 16px}
.fish-detail-name {font-size: 1.4em}
.fish-detail-info {padding: 16px}}
@media (max-width: 480px) {.fish-book-main-stat {flex-direction: column;text-align: center;gap: 12px}
.fish-book-progress {justify-content: center}
.fish-book-rarity-mini {gap: 6px}
.rarity-mini-item {min-width: 50px;padding: 6px}
.rarity-mini-stars {font-size: 0.6em}
.rarity-mini-count {font-size: 0.6em}
.category-fishes {grid-template-columns: repeat(auto-fill, 70px)}
.fish-card {min-height: 75px}
.fish-card-image {height: 75px}
.fish-card-name {font-size: 0.65em !important}
.fish-card-rarity {font-size: 0.55em}}