.analytics-header {background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);color: #fff;padding: 24px 16px 20px;overflow: hidden}
.analytics-header-inner {max-width: var(--layout-width-default);margin: 0 auto}
.analytics-back {display: inline-flex;align-items: center;gap: 6px;color: rgba(255, 255, 255, 0.8);text-decoration: none;font-size: 13px;margin-bottom: 12px;transition: color 0.15s}
.analytics-back:hover {color: #fff}
.analytics-back svg {flex-shrink: 0}
.analytics-header h1 {font-size: 20px;font-weight: 700;margin-bottom: 4px}
.analytics-header-sub {font-size: 13px;color: rgba(255, 255, 255, 0.7)}
.analytics-period-filter {max-width: var(--layout-width-default);margin: 0 auto;padding: 12px 16px;display: flex;gap: 8px;overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none;-webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%)}
.analytics-period-filter::-webkit-scrollbar {display: none}
.analytics-period-btn {padding: 6px 16px;border-radius: 20px;border: 1.5px solid var(--color-border);background: #fff;font-size: 13px;font-weight: 500;color: var(--color-text-secondary);cursor: pointer;white-space: nowrap;transition: all 0.15s;text-decoration: none;display: inline-block;line-height: 1.5}
.analytics-period-btn:hover {border-color: var(--color-primary);color: var(--color-primary)}
.analytics-period-btn.active {background: var(--color-primary);border-color: var(--color-primary);color: #fff}
.analytics-fish-filter-wrap {max-width: var(--layout-width-default);margin: 0 auto;padding: 0 16px 12px;position: relative;z-index: 50}
.analytics-fish-filter {display: flex;gap: 6px;flex-wrap: nowrap;align-items: center;overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none}
.analytics-fish-filter::-webkit-scrollbar {display: none}
.analytics-fish-filter-btn {padding: 4px 12px;border-radius: 16px;border: 1.5px solid var(--color-border);background: #fff;font-size: 12px;font-weight: 500;color: var(--color-text-secondary);cursor: pointer;white-space: nowrap;transition: all 0.15s;text-decoration: none;display: inline-flex;align-items: center;gap: 4px;line-height: 1.5}
.analytics-fish-filter-btn:hover {border-color: #4f46e5;color: #4f46e5}
.analytics-fish-filter-btn.active {background: #4f46e5;border-color: #4f46e5;color: #fff}
.analytics-fish-dropdown-wrap {position: relative}
.analytics-fish-dropdown[hidden] {display: none}
.analytics-fish-dropdown {position: absolute;top: 4px;left: 0;z-index: 50;width: 220px;max-height: 320px;background: #fff;border: 1px solid var(--color-border);border-radius: 12px;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);display: flex;flex-direction: column;overflow: hidden}
.analytics-fish-dropdown-search {padding: 10px 12px;border: none;border-bottom: 1px solid var(--color-border);font-size: 13px;outline: none;width: 100%;box-sizing: border-box;max-width: 100%}
.analytics-fish-dropdown-search::placeholder {color: var(--color-text-light)}
.analytics-fish-dropdown-list {overflow-y: auto;overscroll-behavior: contain;flex: 1}
.analytics-fish-dropdown-item {display: block;padding: 8px 12px;font-size: 13px;color: var(--color-text-primary);text-decoration: none;transition: background 0.1s}
.analytics-fish-dropdown-item:hover {background: #f1f5f9}
.analytics-fish-dropdown-item.active {background: #eef2ff;color: #4f46e5;font-weight: 600}
.analytics-summary-grid {max-width: var(--layout-width-default);margin: 0 auto;padding: 0 16px 16px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px}
.analytics-summary-card {background: #fff;border-radius: var(--radius-md);padding: 14px;box-shadow: var(--shadow-sm);text-align: center}
.analytics-summary-icon {width: 36px;height: 36px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;font-size: 16px;margin-bottom: 6px}
.analytics-summary-value {font-size: 22px;font-weight: 700;line-height: 1.2}
.analytics-summary-value small {font-size: 12px;font-weight: 500}
.analytics-summary-label {font-size: 11px;color: var(--color-text-muted);margin-top: 2px}
.analytics-body {max-width: var(--layout-width-default);margin: 0 auto;padding: 0 16px 32px;display: flex;flex-direction: column;gap: 16px}
.analytics-section {background: #fff;border-radius: var(--radius-md);box-shadow: var(--shadow-sm);overflow: hidden}
.analytics-section-header {display: flex;align-items: center;gap: 8px;padding: 16px 16px 0}
.analytics-section-icon {width: 32px;height: 32px;border-radius: var(--radius-sm);display: flex;align-items: center;justify-content: center;font-size: 15px;flex-shrink: 0}
.analytics-section-header h2 {font-size: 15px;font-weight: 700;margin: 0}
.analytics-section-header p {font-size: 12px;color: var(--color-text-muted);margin: 0}
.analytics-section-body {padding: 16px}
.analytics-two-col {display: grid;grid-template-columns: 1fr 1fr;gap: 16px}
.analytics-doughnut-container {position: relative;max-width: 220px;margin: 0 auto;aspect-ratio: 1}
.analytics-doughnut-center {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;pointer-events: none}
.analytics-doughnut-center-value {font-size: 20px;font-weight: 700;color: var(--color-text-primary);white-space: nowrap}
.analytics-doughnut-center-label {font-size: 11px;color: var(--color-text-muted)}
.analytics-legend-list {list-style: none;display: flex;flex-direction: column;gap: 8px;justify-content: center;margin: 0;padding: 0}
.analytics-legend-item {display: flex;align-items: center;gap: 8px;font-size: 13px}
.analytics-legend-dot {width: 10px;height: 10px;border-radius: 50%;flex-shrink: 0}
.analytics-legend-label {flex: 1;color: var(--color-text-secondary)}
.analytics-legend-value {font-weight: 600;font-size: 13px}
.analytics-legend-pct {font-size: 12px;color: var(--color-text-muted);min-width: 36px;text-align: right}
.analytics-time-highlight {display: flex;gap: 10px;margin-bottom: 16px}
.analytics-time-highlight-item {flex: 1;background: var(--color-bg-secondary);border-radius: var(--radius-sm);padding: 10px 12px;text-align: center}
.analytics-time-highlight-icon {font-size: 20px;margin-bottom: 4px}
.analytics-time-highlight-label {font-size: 11px;color: var(--color-text-muted)}
.analytics-time-highlight-value {font-size: 16px;font-weight: 700}
.analytics-time-highlight-item.best {background: linear-gradient(135deg, #dbeafe, #eff6ff);border: 1.5px solid var(--color-primary)}
.analytics-chart-wrap {position: relative;width: 100%;min-width: 0}
.analytics-chart-wrap canvas {width: 100% !important;max-width: 100%}
.analytics-time-chart-wrap {height: 200px}
.analytics-dotplot-wrap {height: 200px;margin-top: 12px}
.analytics-stat-section-title {font-size: 13px;font-weight: 600;margin-bottom: 10px;color: var(--color-text-secondary)}
.analytics-stat-cards {display: flex;gap: 8px}
.analytics-stat-card {flex: 1;display: flex;flex-direction: column;align-items: center;padding: 8px 4px;background: var(--color-bg-secondary);border-radius: 8px}
.analytics-stat-card-label {font-size: 11px;color: var(--color-text-muted);margin-bottom: 2px}
.analytics-stat-card-value {font-size: 18px;font-weight: 700;line-height: 1.2}
.analytics-stat-card-value small {font-size: 11px;font-weight: 400;margin-left: 1px}
.analytics-stat-value {font-size: 14px;font-weight: 600;min-width: 56px;text-align: right;white-space: nowrap}
.analytics-fish-rank-list {display: flex;flex-direction: column;gap: 6px}
.analytics-fish-rank-item {display: flex;align-items: center;gap: 8px;padding: 8px 10px;background: var(--color-bg-muted);border-radius: var(--radius-sm);min-width: 0}
.analytics-fish-rank-link {text-decoration: none;color: inherit;transition: background 0.15s}
.analytics-fish-rank-link:hover {background: #eef2ff}
.analytics-fish-rank-num {width: 24px;height: 24px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: 700;color: #fff;flex-shrink: 0}
.analytics-fish-rank-num.rank-1 {background: linear-gradient(135deg, #f59e0b, #d97706)}
.analytics-fish-rank-num.rank-2 {background: linear-gradient(135deg, #94a3b8, #64748b)}
.analytics-fish-rank-num.rank-3 {background: linear-gradient(135deg, #c2855a, #a16a3e)}
.analytics-fish-rank-num.rank-other {background: var(--color-text-light)}
.analytics-fish-rank-name {flex: 1;font-size: 14px;font-weight: 500;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.analytics-fish-rank-count {font-size: 14px;font-weight: 600;color: var(--color-primary);white-space: nowrap}
.analytics-fish-rank-bar {width: 60px;height: 6px;background: var(--color-bg-secondary);border-radius: 3px;overflow: hidden;flex-shrink: 0}
.analytics-fish-rank-bar-fill {height: 100%;background: var(--color-primary);border-radius: 3px}
.analytics-weather-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px}
.analytics-weather-stat {text-align: center;padding: 12px;background: var(--color-bg-secondary);border-radius: var(--radius-sm)}
.analytics-weather-stat-label {font-size: 11px;color: var(--color-text-muted);margin-bottom: 4px}
.analytics-weather-stat-value {font-size: 18px;font-weight: 700}
.analytics-weather-stat-value small {font-size: 12px;font-weight: 400}
.analytics-temp-section {margin-top: 16px;padding-top: 16px;border-top: 1px solid var(--color-border-light)}
.analytics-temp-dots-wrap {height: 240px}
.tide-info-static {display: flex;flex-direction: column;align-items: center;gap: 2px;cursor: default}
.tide-info-static svg {width: 22px;height: 22px}
.analytics-tide-card .sun-tide-value,
.analytics-tide-card .sun-tide-label {white-space: nowrap}
.analytics-tide-card .sun-tide-row {flex-wrap: nowrap}
.analytics-tide-section {margin-top: 16px;padding-top: 16px;border-top: 1px solid var(--color-border-light)}
.analytics-tide-list-body {display: flex;flex-direction: column;gap: 12px}
.analytics-tide-card {border: 1px solid var(--color-border-light);border-radius: var(--radius-sm);overflow: hidden}
.analytics-tide-card-hidden {display: none}
.analytics-tide-card-date {padding: 8px 12px;font-size: 12px;font-weight: 600;color: var(--color-text-secondary);background: var(--color-bg-secondary);border-bottom: 1px solid var(--color-border-light)}
.analytics-tide-card .tide-info-block {margin: 0;border-radius: 0}
.analytics-tide-card-loading {display: flex;align-items: center;justify-content: center;gap: 8px;padding: 24px 12px;font-size: 13px;color: var(--color-text-muted)}
.analytics-tide-card-spinner {width: 16px;height: 16px;border: 2px solid var(--color-border);border-top-color: var(--color-primary);border-radius: 50%;animation: tide-spin 0.6s linear infinite}
@keyframes tide-spin {to { transform: rotate(360deg); }}
.analytics-tide-more-btn {display: block;width: 100%;padding: 12px;border: 1.5px dashed var(--color-border);border-radius: var(--radius-sm);background: none;font-size: 14px;font-weight: 500;color: var(--color-primary);cursor: pointer;transition: all 0.15s}
.analytics-tide-more-btn:hover {background: #eef2ff;border-color: var(--color-primary)}
.analytics-monthly-chart-wrap {height: 200px}
.analytics-empty {text-align: center;padding: 48px 16px;color: var(--color-text-muted)}
.analytics-empty-icon {font-size: 40px;margin-bottom: 12px}
.analytics-empty p {font-size: 14px;margin: 0 0 16px}
.analytics-empty-link {display: inline-block;padding: 10px 24px;background: var(--color-primary);color: #fff;border-radius: 20px;text-decoration: none;font-size: 14px;font-weight: 500;transition: background 0.15s}
.analytics-empty-link:hover {background: var(--color-primary-dark)}
@media (max-width: 640px) {.analytics-header {padding: 16px 12px 14px}
.analytics-header h1 {font-size: 17px}
.analytics-header-sub {font-size: 12px}
.analytics-period-filter {padding: 10px 12px;gap: 6px}
.analytics-period-btn {padding: 5px 12px;font-size: 12px}
.analytics-fish-filter-wrap {padding: 0 12px 10px}
.analytics-fish-filter {gap: 5px;-webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%)}
.analytics-fish-filter-btn {padding: 3px 10px;font-size: 11px}
.analytics-fish-dropdown {width: 200px;max-height: 280px}
.analytics-summary-grid {padding: 0 12px 12px;gap: 8px}
.analytics-summary-card {padding: 10px 8px}
.analytics-summary-icon {width: 30px;height: 30px}
.analytics-summary-icon svg {width: 16px;height: 16px}
.analytics-summary-value {font-size: 18px}
.analytics-summary-label {font-size: 10px}
.analytics-body {padding: 0 12px 24px;gap: 12px}
.analytics-section-header {padding: 12px 12px 0}
.analytics-section-header h2 {font-size: 14px}
.analytics-section-header p {font-size: 11px}
.analytics-section-body {padding: 12px}
.analytics-two-col {grid-template-columns: 1fr;gap: 12px}
.analytics-doughnut-container {max-width: 160px}
.analytics-doughnut-center-value {font-size: 16px}
.analytics-legend-list {gap: 6px}
.analytics-legend-item {font-size: 12px;gap: 6px}
.analytics-legend-dot {width: 8px;height: 8px}
.analytics-legend-value {font-size: 12px}
.analytics-legend-pct {font-size: 11px;min-width: 30px}
.analytics-time-highlight {flex-wrap: wrap}
.analytics-time-highlight-item {min-width: calc(50% - 5px);padding: 8px}
.analytics-time-highlight-value {font-size: 15px}
.analytics-stat-cards {gap: 6px}
.analytics-stat-card {padding: 6px 2px}
.analytics-stat-card-value {font-size: 15px;min-width: 48px}
.analytics-stat-section-title {font-size: 12px}
.analytics-fish-rank-item {gap: 6px;padding: 6px 8px}
.analytics-fish-rank-name {font-size: 13px}
.analytics-fish-rank-count {font-size: 13px}
.analytics-fish-rank-bar {width: 36px}
.analytics-weather-grid {grid-template-columns: repeat(2, 1fr);gap: 8px}
.analytics-weather-stat {padding: 10px 8px}
.analytics-weather-stat-label {font-size: 10px}
.analytics-weather-stat-value {font-size: 16px}
.analytics-time-chart-wrap {height: 180px}
.analytics-dotplot-wrap {height: 160px;margin-top: 8px}
.analytics-monthly-chart-wrap {height: 220px}
.analytics-empty {padding: 32px 12px}}
@media (max-width: 374px) {.analytics-header h1 {font-size: 15px}
.analytics-summary-value {font-size: 16px}
.analytics-fish-rank-bar {display: none}
.analytics-weather-grid {grid-template-columns: repeat(2, 1fr)}
.analytics-weather-stat-value {font-size: 14px}}