:root {--ci-primary: #1877f2;--ci-primary-dark: #0056b3;--ci-primary-darker: #004094;--ci-text: #1c1e21;--ci-text-secondary: #65676b;--ci-bg: #f0f2f5;--ci-card-bg: #fff;--ci-border: #e4e6ea;--ci-success: #22c55e;--ci-warning: #f59e0b;--ci-danger: #ef4444;--ci-info: #3b82f6}
.check-in-new-container {max-width: 400px;margin: 0 auto;padding: 20px}
.check-in-header {text-align: center;margin-bottom: 24px}
.check-in-icon {display: inline-flex;align-items: center;justify-content: center;width: 64px;height: 64px;background: linear-gradient(135deg, var(--ci-primary) 0%, var(--ci-primary-dark) 100%);border-radius: 50%;margin-bottom: 12px}
.check-in-icon svg {color: #fff}
.check-in-header h1 {font-size: 1.5rem;font-weight: 700;color: #1c1e21;margin: 0 0 8px 0}
.check-in-description {color: #606770;font-size: 0.9rem;margin: 0;line-height: 1.5}
.check-in-main-action {margin-top: 24px}
.check-in-optional-section {background: #f7f7f7;border-radius: 12px;padding: 16px}
.optional-section-label {font-size: 0.85rem;font-weight: 600;color: #1c1e21;text-align: center;margin: 0 0 8px 0}
.check-in-comment-hint {font-size: 0.8rem;color: #606770;text-align: center;margin: 0 0 16px 0;line-height: 1.5}
.check-in-optional-fields {display: flex;gap: 12px;align-items: flex-start}
.check-in-photo-field {flex-shrink: 0}
.check-in-photo-preview {width: 80px;height: 80px;background: #fff;border: 2px dashed #ddd;border-radius: 8px;display: flex;align-items: center;justify-content: center;cursor: pointer;overflow: hidden;transition: border-color 0.2s}
.check-in-photo-preview:hover {border-color: var(--ci-primary)}
.check-in-photo-img {width: 100%;height: 100%;object-fit: cover;display: none}
.check-in-photo-placeholder {display: flex;flex-direction: column;align-items: center;gap: 4px;color: #999}
.check-in-photo-placeholder svg {color: #ccc}
.check-in-photo-placeholder span {font-size: 0.7rem}
.check-in-comment-field {flex: 1}
.check-in-comment-input {width: 100%;height: 80px;padding: 10px 12px;border: 1px solid #ddd;border-radius: 8px;font-size: 0.9rem;resize: none;font-family: inherit;transition: border-color 0.2s;box-sizing: border-box}
.check-in-comment-input:focus {outline: none;border-color: var(--ci-primary)}
.check-in-comment-input::placeholder {color: #999}
.check-in-caution {display: flex;align-items: flex-start;gap: 6px;font-size: 0.75rem;color: #e74c3c;margin: 16px 0 0 0;line-height: 1.4;background: #fef5f5;padding: 10px 12px;border-radius: 6px;border: 1px solid #fce4e4}
.check-in-caution svg {flex-shrink: 0;margin-top: 1px}
.check-in-container,
.check-ins-container {max-width: 600px;margin: 0 auto;padding: 20px}
body.with-header.form-page:has(.check-in-show-container) .main-content {align-items: flex-start}
.check-in-show-container {width: 100%;max-width: min(90%, 600px);margin: 20px auto;padding-bottom: 40px}
.check-in-back-nav {margin-bottom: 8px}
.check-in-back-nav-link {display: inline-flex;align-items: center;gap: 4px;font-size: 0.8125rem;font-weight: 500;color: #65676b;text-decoration: none;transition: color 0.2s}
.check-in-back-nav-link:hover {color: var(--ci-primary)}
.check-in-back-nav-link svg {width: 13px;height: 13px;flex-shrink: 0}
.check-in-details {background: #fff;border-radius: 12px;padding: 16px;margin-bottom: 16px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)}
@media (max-width: 768px) {body.with-header.form-page:has(.check-in-show-container) .main-content {align-items: flex-start}
.check-in-show-container {margin: 0;padding: 0;padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));width: 100%;max-width: 100%}
.check-in-details {border-radius: 0;box-shadow: none}
.check-in-back-nav {padding: 10px 16px 0;margin-bottom: 4px}}
.check-in-detail {background: #fff;border-radius: 12px;padding: 16px;margin-bottom: 16px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)}
.check-in-detail-header {display: flex;align-items: center;gap: 12px;margin-bottom: 16px}
.check-in-detail-icon {width: 44px;height: 44px;background: linear-gradient(135deg, var(--ci-primary) 0%, var(--ci-primary-dark) 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.check-in-detail-icon svg {color: #fff}
.check-in-detail-title {flex: 1}
.check-in-detail-title h1 {font-size: 1.1rem;font-weight: 600;color: #1c1e21;margin: 0 0 2px 0}
.check-in-detail-time {font-size: 0.8rem;color: #999}
.check-in-edit-btn {width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;background: none;border: 1px solid #ddd;border-radius: 8px;cursor: pointer;color: #999;transition: all 0.2s ease}
.check-in-edit-btn:hover {background: #eaf3ff;border-color: var(--ci-primary);color: var(--ci-primary)}
.check-in-delete-btn {width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;background: none;border: 1px solid #ddd;border-radius: 8px;cursor: pointer;color: #999;transition: all 0.2s ease}
.check-in-delete-btn:hover {background: #fee;border-color: #e74c3c;color: #e74c3c}
.check-in-elapsed {display: flex;align-items: center;justify-content: center;gap: 10px;padding: 10px 16px;background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%);border-radius: 10px;margin-bottom: 12px}
.elapsed-label {font-size: 13px;font-weight: 600;color: var(--color-text-secondary)}
.elapsed-display {font-size: 20px;font-weight: 700;color: var(--color-primary);font-variant-numeric: tabular-nums;letter-spacing: 1px}
.check-in-actions {display: grid;grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));gap: 8px;margin-bottom: 12px}
.check-in-action-card {display: flex;flex-direction: column;align-items: center;gap: 6px;padding: 12px 8px;background: var(--color-bg-muted);border: 1px solid var(--color-border);border-radius: var(--radius-sm);text-decoration: none;font-family: inherit;cursor: pointer;transition: background 0.2s, box-shadow 0.2s}
.check-in-action-card:hover {background: #fff;box-shadow: var(--shadow-sm)}
.check-in-action-card:active {background: var(--color-bg-secondary)}
.action-card-icon {display: flex;align-items: center;justify-content: center}
.action-card-label {font-size: 11px;font-weight: 600;color: var(--color-text-secondary);white-space: nowrap}
.end-fishing-overlay {position: fixed;inset: 0;z-index: 1000;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;padding: 20px}
.end-fishing-overlay.hidden {display: none}
.end-fishing-modal {background: #fff;border-radius: 16px;width: 100%;max-width: 360px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);overflow: hidden}
.end-fishing-modal-header {display: flex;align-items: center;justify-content: space-between;padding: 16px 20px 12px}
.end-fishing-modal-header h3 {margin: 0;font-size: 1rem;font-weight: 700;color: var(--color-text-primary, #1c1e21)}
.end-fishing-modal-close {background: none;border: none;padding: 4px;cursor: pointer;color: #999;border-radius: 50%;display: flex;align-items: center;justify-content: center}
.end-fishing-modal-close:hover {background: #f0f0f0;color: #666}
.end-fishing-form {padding: 0 20px 20px}
.end-fishing-memo {margin-bottom: 16px}
.end-fishing-memo label {display: block;font-size: 0.8rem;font-weight: 600;color: var(--color-text-secondary, #65676b);margin-bottom: 6px}
.end-fishing-memo textarea {width: 100%;padding: 10px 12px;border: 1px solid #ddd;border-radius: 8px;font-size: 0.85rem;font-family: inherit;resize: none;box-sizing: border-box;transition: border-color 0.2s}
.end-fishing-memo textarea:focus {outline: none;border-color: var(--ci-primary)}
.end-fishing-buttons {display: flex;gap: 10px}
.end-fishing-btn {flex: 1;display: flex;align-items: center;justify-content: center;gap: 6px;padding: 12px 16px;border: none;border-radius: 10px;font-size: 0.85rem;font-weight: 700;font-family: inherit;cursor: pointer;transition: opacity 0.2s}
.end-fishing-btn:hover {opacity: 0.85}
.end-fishing-btn-normal {background: var(--ci-primary, #1877f2);color: #fff}
.end-fishing-note {font-size: 0.8rem;color: #65676b;margin: 10px 0 0 0}
.check-in-ended-badge {display: flex;align-items: center;justify-content: center;gap: 6px;padding: 10px 16px;margin-bottom: 12px;background: var(--color-bg-muted);border: 1px solid var(--color-border);border-radius: var(--radius-sm);font-size: 13px;font-weight: 600;color: var(--color-text-secondary)}
.check-in-ended-badge svg {color: var(--color-success);flex-shrink: 0}
.check-in-ended-badge .ended-time {font-weight: 400;color: var(--color-text-muted)}
.check-in-map {margin-bottom: 12px;border-radius: 8px;overflow: hidden}
.check-in-map-canvas {height: 180px;width: 100%;max-width: 100%;box-sizing: border-box;border-radius: 8px}
.tide-info-block {background: linear-gradient(135deg, #e8f4fd 0%, #fef9e7 50%, #e8f4fd 100%);border-radius: 10px;padding: 12px;margin-bottom: 12px}
.tide-info-block .tide-graph-section {background: transparent;padding: 0;margin-bottom: 0;border-radius: 0}
.tide-info-block .tide-graph-container {position: relative;height: 50px;background: rgba(255, 255, 255, 0.5);border-radius: 8px;margin-bottom: 12px}
.tide-info-block .tide-graph-svg {width: 100%;height: 100%}
.sun-tide-compact {padding: 0 0 8px 0;border-top: none;margin-top: 0}
.sun-tide-row {display: flex;justify-content: space-between;align-items: center;gap: 8px}
.sun-item,
.tide-item {display: flex;flex-direction: column;align-items: center;gap: 2px;flex: 1;min-width: 0}
button.sun-item.sun-item-clickable {background: none;border: none;padding: 6px;margin: 0;cursor: pointer;border-radius: 8px;transition: background 0.2s;font-family: inherit}
button.sun-item.sun-item-clickable:hover {background: rgba(0, 0, 0, 0.05)}
button.sun-item.sun-item-clickable:active {background: rgba(0, 0, 0, 0.1)}
.sun-item svg,
.tide-item svg {width: 20px;height: 20px;flex-shrink: 0}
.sun-tide-label {font-size: 0.65em;color: #6b7280;font-weight: 500}
.sun-tide-value {font-size: 0.85em;font-weight: 600;color: #1f2937}
@media (max-width: 640px) {.tide-info-block {padding: 10px;border-radius: 10px}
.tide-info-block .tide-graph-section {background: transparent;padding: 0;margin-bottom: 0}
.sun-tide-compact {padding: 0 0 6px 0}
.sun-item svg,
.tide-item svg {width: 18px;height: 18px}
.sun-tide-label {font-size: 0.6em}
.sun-tide-value {font-size: 0.75em}}
@media (max-width: 480px) {.sun-tide-label {display: none}}
.tide-graph-section {background: linear-gradient(180deg, #fff8e1 0%, #e3f2fd 100%);border-radius: 12px;padding: 16px;margin-bottom: 12px}
.tide-graph-container {position: relative;height: 50px;background: rgba(255, 255, 255, 0.7);border-radius: 8px;margin-bottom: 20px}
.tide-graph-svg {width: 100%;height: 100%}
.tide-current-indicator {position: absolute;bottom: -18px;left: 50%;transform: translateX(-50%);font-size: 11px;color: #f44336;font-weight: 600;white-space: nowrap}
.tide-times-row {display: flex;justify-content: space-around;font-size: 11px;color: #666;flex-wrap: wrap;gap: 8px}
button.tide-times-row.tide-times-clickable {width: 100%;background: none;border: none;padding: 8px;margin: 0;cursor: pointer;border-radius: 8px;transition: background 0.2s;font-family: inherit}
button.tide-times-row.tide-times-clickable:hover {background: rgba(0, 0, 0, 0.05)}
button.tide-times-row.tide-times-clickable:active {background: rgba(0, 0, 0, 0.1)}
.tide-time-item {display: flex;flex-direction: column;align-items: center;min-width: 60px}
.tide-time-label {font-weight: 600;font-size: 10px}
.tide-time-item.high-tide .tide-time-label {color: #1976D2}
.tide-time-item.low-tide .tide-time-label {color: #e65100}
.tide-time-value {font-size: 12px;color: #333;font-weight: 600}
.tide-level-value {font-size: 10px;color: #666}
.tide-graph-unavailable {background: #f5f5f5;border-radius: 8px;padding: 12px 16px;margin-bottom: 12px;text-align: center}
.tide-graph-unavailable p {margin: 0;font-size: 0.85rem;color: #666}
.check-in-content,
.check-in-detail-content {display: flex;align-items: flex-start;gap: 12px;padding-top: 12px;border-top: 1px solid #f0f0f0}
.check-in-image {flex-shrink: 0}
.check-in-image > img {width: 80px;height: 80px;object-fit: cover;border-radius: 8px;cursor: pointer}
.check-in-comment {flex: 1;padding: 10px 12px;background: #f5f5f5;border-radius: 8px}
.check-in-comment p {margin: 0;font-size: 0.9rem;color: #444;line-height: 1.5}
.nearby-check-ins {background: #fff;border-radius: 16px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08)}
.nearby-check-ins h2 {display: flex;align-items: center;gap: 10px;font-size: 1.1rem;font-weight: 600;margin-bottom: 20px;color: #1c1e21;padding-bottom: 12px;border-bottom: 2px solid #f0f0f0}
.nearby-check-ins h2::before {content: "";display: inline-block;width: 4px;height: 20px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 2px}
.nearby-check-ins.empty {text-align: center;padding: 40px 20px}
.nearby-check-ins.empty h2 {justify-content: center}
.nearby-check-ins.empty h2::before {display: none}
.no-nearby {color: #8e8e8e;font-size: 0.9rem;margin-top: 8px}
.nearby-check-ins-list {display: flex;flex-direction: column;gap: 20px}
.nearby-check-in-card {border: 1px solid #e8e8e8;border-radius: 16px;padding: 0;background: #fff;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);overflow: hidden;transition: box-shadow 0.2s ease}
.nearby-check-in-card:hover {box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12)}
.nearby-card-header {padding: 12px 16px}
.nearby-user-link {display: flex;align-items: center;gap: 12px;text-decoration: none;color: inherit}
.nearby-user-link:hover .nearby-user-name {color: var(--ci-primary)}
.nearby-user-avatar {width: 36px;height: 36px;background: #f0f0f0;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.nearby-user-avatar svg {color: #666}
.nearby-user-info {display: flex;flex-direction: column;gap: 4px}
.nearby-user-name {font-size: 1rem;font-weight: 600;color: #1c1e21;transition: color 0.2s ease}
.nearby-check-in-time {font-size: 0.75rem;color: #999}
.nearby-user-stats {display: flex;padding: 10px 16px;gap: 16px;background: #fafafa;border-top: 1px solid #f0f0f0}
.nearby-stat-item {display: flex;align-items: center;gap: 6px;padding: 6px 0}
.nearby-stat-icon-svg {color: #888;flex-shrink: 0}
.nearby-stat-label {font-size: 0.8rem;color: #666}
.nearby-stat-value {font-size: 0.9rem;font-weight: 600;color: #1c1e21}
a.nearby-stat-link {text-decoration: none;cursor: pointer;transition: opacity 0.2s ease}
a.nearby-stat-link:hover {opacity: 0.7}
a.nearby-stat-link:hover .nearby-stat-value {color: var(--ci-primary)}
.nearby-check-in-content {padding: 12px 16px}
.nearby-check-in-image {margin-bottom: 10px}
.nearby-check-in-image > img {width: 80px;height: 80px;object-fit: cover;border-radius: 8px;cursor: pointer}
.nearby-check-in-comment {background: #f5f5f5;border-radius: 8px;padding: 10px 12px}
.nearby-check-in-comment p {margin: 0;font-size: 0.85rem;color: #555;line-height: 1.5}
.check-ins-container {max-width: 1100px;width: 100%;--chart-track: #e7edf5;--mazume-band: #ffedd5;--mazume-stroke: #f97316;--mazume-text: #c2410c;--daybar-night: #e2e8f0;--daybar-day: #fff8ee;--tide-high: #0e7490;--tide-low: #06b6d4;--tide-curve: #0891b2}
.ci-header {display: flex;align-items: center;gap: 12px;margin-bottom: 20px;min-width: 0}
.ci-header-icon {flex-shrink: 0;width: 44px;height: 44px;border-radius: var(--radius-md);background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));color: #fff;display: flex;align-items: center;justify-content: center;box-shadow: var(--shadow-sm)}
.ci-header-content {min-width: 0}
.ci-header-content h1 {font-size: 20px;margin: 0;overflow-wrap: anywhere}
.ci-header-note {margin: 4px 0 0;font-size: 12px;font-weight: 500;color: var(--color-text-muted);overflow-wrap: anywhere}
.ci-publicity {display: flex;align-items: center;gap: 10px;flex-wrap: wrap;margin-bottom: 20px;padding: 10px 14px;background: var(--color-bg-muted);border: 1px solid var(--color-border);border-radius: var(--radius-md)}
.ci-publicity-state {min-width: 0;display: inline-flex;align-items: center;gap: 8px;font-size: 12px;color: var(--color-text-muted)}
.ci-publicity-badge {display: inline-flex;align-items: center;gap: 5px;flex-shrink: 0;font-size: 11px;font-weight: 800;color: var(--color-text-muted);background: var(--color-bg-secondary);border-radius: 999px;padding: 4px 10px}
.ci-publicity-state.on .ci-publicity-badge {color: #166534;background: #dcfce7}
.ci-publicity-badge .led {width: 6px;height: 6px;border-radius: 50%;background: currentColor}
.ci-publicity-state small {min-width: 0;font-size: 11px;font-weight: 500;overflow-wrap: anywhere}
.ci-publicity-actions {margin-left: auto;flex-shrink: 0;display: inline-flex;align-items: center;gap: 10px}
.ci-publicity-link {font-size: 12px;font-weight: 700;color: var(--color-primary);text-decoration: none}
.ci-publicity-link:hover {text-decoration: underline}
.ci-publicity-btn {font-family: inherit;font-size: 12px;font-weight: 700;cursor: pointer;color: var(--color-text-secondary);background: #fff;border: 1px solid var(--color-border);border-radius: 999px;padding: 7px 16px}
.ci-publicity-btn:hover {border-color: var(--color-text-muted);color: var(--color-text-primary)}
.ci-preview-note {display: flex;align-items: center;gap: 10px;flex-wrap: wrap;margin-bottom: 20px;padding: 10px 14px;font-size: 12px;font-weight: 600;color: #166534;background: #dcfce7;border-radius: var(--radius-md)}
.ci-preview-note.is-private {color: var(--color-text-secondary);background: var(--color-bg-muted);border: 1px solid var(--color-border)}
.ci-preview-note-link {margin-left: auto;font-weight: 700;color: inherit}
.ci-stats {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;margin-bottom: 24px}
.ci-stat-tile {background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-md);padding: 14px 10px;text-align: center;min-width: 0}
.ci-stat-value {font-size: 22px;font-weight: 700;color: var(--color-text-primary)}
.ci-stat-value small {font-size: 12px;font-weight: 500;color: var(--color-text-muted);margin-left: 2px}
.ci-stat-label {font-size: 11px;color: var(--color-text-muted);margin-top: 4px;overflow-wrap: anywhere}
.db-section-title {display: flex;align-items: center;gap: 8px;font-size: 15px;font-weight: 700;margin: 0 0 12px;color: var(--color-text-primary)}
.db-section-title svg {flex-shrink: 0;color: var(--color-primary)}
.db-card {background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-lg);padding: 16px;min-width: 0}
.db-card--sp-hidden {display: none}
.db-top-row {display: grid;grid-template-columns: 1fr;gap: 16px;margin-bottom: 16px}
.db-charts-row {display: grid;grid-template-columns: 1fr;gap: 16px;margin-bottom: 28px}
.map-filters {display: flex;flex-direction: column;gap: 8px;margin-bottom: 14px}
.map-filter-group {display: flex;align-items: center;gap: 6px;flex-wrap: wrap;min-width: 0}
.map-filter-group-label {font-size: 11px;color: var(--color-text-muted);flex-shrink: 0;min-width: 44px}
.filter-chip {appearance: none;border: 1px solid var(--color-border);background: #fff;color: var(--color-text-secondary);font-family: inherit;font-size: 12px;padding: 6px 12px;border-radius: 999px;cursor: pointer;white-space: nowrap;transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;min-height: 30px}
.filter-chip:hover {border-color: var(--color-primary);color: var(--color-primary-dark)}
.filter-chip.is-active {background: var(--color-primary);border-color: var(--color-primary);color: #fff;font-weight: 600}
.map-card {padding: 16px}
.map-canvas-wrap {position: relative;border-radius: var(--radius-md);overflow: hidden;border: 1px solid var(--color-border)}
.history-map-canvas {height: 280px;width: 100%;max-width: 100%;box-sizing: border-box}
.map-marker {border-radius: 50%;border: 2px solid #fff;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);box-sizing: border-box;cursor: pointer;transition: opacity 0.2s ease, transform 0.2s ease}
.map-marker.is-catch {background: var(--color-primary)}
.map-marker.is-bouzu {background: rgba(100, 116, 139, 0.55)}
.map-marker.is-dimmed {opacity: 0.12}
.map-marker.is-selected {box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-dark), 0 1px 4px rgba(0, 0, 0, 0.25)}
.map-legend {display: flex;flex-wrap: wrap;gap: 14px;margin-top: 12px;font-size: 12px;color: var(--color-text-secondary)}
.map-legend-item {display: flex;align-items: center;gap: 6px}
.map-legend-dot {width: 12px;height: 12px;border-radius: 50%;flex-shrink: 0}
.map-legend-dot.catch {background: var(--color-primary)}
.map-legend-dot.bouzu {background: var(--color-text-muted);opacity: 0.55}
.map-legend-note {color: var(--color-text-muted)}
.spot-ranking-list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 10px}
.spot-row {display: flex;align-items: center;gap: 10px;padding: 10px;border-radius: var(--radius-sm);background: var(--color-bg-secondary);transition: opacity 0.2s ease;min-width: 0}
.spot-row.is-dimmed {opacity: 0.35}
.spot-row.is-top {background: #fffbeb;border: 1px solid #fde68a}
.spot-rank {position: relative;flex-shrink: 0;width: 24px;height: 24px;border-radius: 50%;background: #fff;border: 1px solid var(--color-border);display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: 700;color: var(--color-text-secondary)}
.spot-rank-top {background: var(--color-warning);border-color: var(--color-warning);color: #fff}
.spot-rank-crown {position: absolute;top: -9px;left: 50%;transform: translateX(-50%);color: var(--color-warning);line-height: 0}
.spot-info {min-width: 0;flex: 1 1 auto}
.spot-name {font-size: 13px;font-weight: 600;overflow-wrap: anywhere}
.spot-meta {font-size: 11px;color: var(--color-text-muted)}
.spot-highlight {display: flex;align-items: center;gap: 4px;margin-top: 3px;font-size: 11px;font-weight: 600;color: #b45309;overflow-wrap: anywhere}
.spot-highlight svg {flex-shrink: 0}
.spot-rate {flex-shrink: 0;width: 96px;display: flex;flex-direction: column;align-items: flex-end;gap: 4px}
.spot-rate-bar {width: 100%;height: 6px;border-radius: 999px;background: var(--chart-track);overflow: hidden}
.spot-rate-fill {height: 100%;border-radius: 999px;background: var(--color-primary)}
.spot-rate-value {font-size: 11px;font-weight: 700;color: var(--color-text-secondary)}
.timeband-legend {display: flex;align-items: center;flex-wrap: wrap;gap: 6px 14px;margin-bottom: 10px;font-size: 11px;color: var(--color-text-secondary);overflow-wrap: anywhere}
.timeband-legend-item {display: inline-flex;align-items: center;gap: 6px}
.timeband-legend-dot {flex-shrink: 0;width: 11px;height: 11px;border-radius: 3px;background: var(--mazume-band);border: 1px solid var(--mazume-stroke)}
.timeband-legend-bar {flex-shrink: 0;width: 9px;height: 12px;border-radius: 3px;background: var(--color-primary)}
.timeband-chart {position: relative;height: 140px;padding-top: 22px;min-width: 0;border-radius: var(--radius-sm);overflow: hidden;background:
linear-gradient(
90deg,
var(--daybar-night) 0%,
var(--daybar-night) 8%,
var(--daybar-day) 26%,
var(--daybar-day) 74%,
var(--daybar-night) 92%,
var(--daybar-night) 100%
);border: 1px solid var(--color-border)}
.timeband-band {position: absolute;top: 22px;bottom: 0;border-radius: 3px;background: var(--mazume-band);opacity: 0.75;pointer-events: none}
.timeband-band::before {content: "";position: absolute;top: 3px;left: 50%;width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;transform: translateX(-50%);pointer-events: none}
.timeband-band:first-of-type::before {border-top: 5px solid var(--color-warning)}
.timeband-band:nth-of-type(2)::before {border-top: 5px solid var(--mazume-stroke)}
.timeband-bars {position: relative;display: flex;align-items: flex-end;gap: 2px;height: 100%;min-width: 0}
.timeband-bar-col {display: flex;flex-direction: column;align-items: center;justify-content: flex-end;gap: 4px;flex: 1 1 0;min-width: 0;height: 100%}
.timeband-bar-value {font-size: 11px;font-weight: 700;font-variant-numeric: tabular-nums;color: var(--color-text-secondary);padding: 0 5px;border-radius: 999px;background: rgba(255, 255, 255, 0.8)}
.timeband-bar {width: 100%;max-width: 26px;border-radius: 5px 5px 3px 3px;background: var(--color-primary);min-height: 6px}
.timeband-bar-col.is-peak .timeband-bar {background: var(--mazume-stroke)}
.timeband-bar-col.is-peak .timeband-bar-value {color: var(--mazume-text)}
.timeband-bar-label {font-size: 10px;font-variant-numeric: tabular-nums;color: var(--color-text-secondary);padding: 0 4px;border-radius: 999px;background: rgba(255, 255, 255, 0.7)}
.timeband-caption {display: flex;align-items: flex-start;gap: 6px;margin: 12px 0 0;padding: 10px 12px;background: #fffbeb;border: 1px solid #fde68a;border-radius: var(--radius-sm);font-size: 12px;color: var(--mazume-text);overflow-wrap: anywhere}
.timeband-caption svg {flex-shrink: 0;margin-top: 1px}
.month-bar-chart {display: flex;align-items: flex-end;justify-content: space-around;gap: 8px;height: 130px;padding-top: 20px}
.month-bar-col {display: flex;flex-direction: column;align-items: center;gap: 6px;flex: 1 1 0;min-width: 0;height: 100%;justify-content: flex-end}
.month-bar-value {font-size: 11px;font-weight: 700;color: var(--color-text-secondary)}
.month-bar {width: 22px;max-width: 24px;border-radius: 4px 4px 0 0;background: var(--color-primary)}
.month-bar-label {font-size: 11px;color: var(--color-text-muted)}
.species-rank-list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 10px}
.species-rank-row {display: flex;align-items: center;gap: 8px;min-width: 0}
.species-rank-name {width: 64px;flex-shrink: 0;font-size: 12px;color: var(--color-text-secondary);overflow-wrap: anywhere}
.species-rank-track {flex: 1 1 auto;min-width: 0;height: 14px;border-radius: 999px;background: var(--chart-track);overflow: hidden}
.species-rank-fill {height: 100%;border-radius: 999px;background: var(--color-primary)}
.species-rank-value {flex-shrink: 0;width: 40px;text-align: right;font-size: 12px;font-weight: 700;color: var(--color-text-primary)}
.species-rank-row.is-highlight .species-rank-name {color: var(--mazume-text);font-weight: 700}
.species-rank-row.is-highlight .species-rank-fill {background: var(--mazume-stroke)}
.species-rank-note {display: flex;align-items: flex-start;gap: 6px;margin: 12px 0 0;padding: 10px 12px;background: #fffbeb;border: 1px solid #fde68a;border-radius: var(--radius-sm);font-size: 11.5px;color: var(--mazume-text);overflow-wrap: anywhere}
.species-rank-note svg {flex-shrink: 0;margin-top: 1px}
.species-rank-empty {margin: 0;font-size: 12px;color: var(--color-text-muted)}
.timeline-section-title {font-size: 16px;font-weight: 700;margin: 8px 0 4px}
.timeline-legend {display: flex;align-items: center;flex-wrap: wrap;gap: 6px 14px;margin: 0 0 16px;font-size: 11px;color: var(--color-text-secondary);overflow-wrap: anywhere}
.timeline-legend-item {display: inline-flex;align-items: center;gap: 6px}
.timeline-legend-dot {flex-shrink: 0;width: 12px;height: 12px;border-radius: 3px;background: var(--mazume-band);border: 1px solid var(--mazume-stroke)}
.timeline-legend-curve {flex-shrink: 0;display: inline-block;width: 16px;height: 3px;border-radius: 2px;background: var(--tide-curve)}
.timeline-legend-hi,
.timeline-legend-lo {flex-shrink: 0;display: inline-block;width: 9px;height: 9px;border-radius: 50%}
.timeline-legend-hi {background: var(--tide-high)}
.timeline-legend-lo {background: #fff;border: 2px solid var(--tide-low);box-sizing: border-box}
.timeline-legend-fish {flex-shrink: 0;display: inline-block;width: 16px;height: 8px;position: relative}
.timeline-legend-fish::before {content: "";position: absolute;inset: 2px 0;background: var(--color-primary);opacity: 0.3;border-radius: 2px}
.timeline-legend-fish::after {content: "";position: absolute;left: 0;right: 0;top: -1px;height: 3px;background: var(--color-primary);opacity: 0.65;border-radius: 2px 2px 0 0}
.tl-filter-banner {display: flex;align-items: center;gap: 8px;margin: 0 0 12px;padding: 8px 12px;border: 1px solid var(--color-primary);border-radius: var(--radius-sm);background: rgba(59, 130, 246, 0.08);font-size: 12px;color: var(--color-text-primary);scroll-margin-top: 80px}
.tl-filter-banner[hidden] {display: none !important}
.tl-filter-banner-icon {display: inline-flex;flex-shrink: 0;color: var(--color-primary)}
.tl-filter-banner-label {min-width: 0;overflow-wrap: anywhere}
.tl-filter-clear {appearance: none;margin-left: auto;flex-shrink: 0;border: 1px solid var(--color-border);background: #fff;color: var(--color-text-secondary);font-family: inherit;font-size: 11px;padding: 4px 10px;border-radius: 999px;cursor: pointer;white-space: nowrap}
.tl-filter-clear:hover {border-color: var(--color-primary);color: var(--color-primary-dark)}
.tl-month-group.is-hidden,
.tl-item.is-hidden {display: none}
.tl-month-header {display: flex;align-items: baseline;justify-content: space-between;gap: 8px;margin: 20px 0 10px;padding-bottom: 6px;border-bottom: 1px solid var(--color-border)}
.tl-month-header h3 {margin: 0;font-size: 14px}
.tl-month-summary {font-size: 11px;color: var(--color-text-muted);white-space: nowrap}
.tl-mobile-axis {display: flex;align-items: center;gap: 10px;margin-bottom: 6px;min-width: 0}
.tl-mobile-axis-spacer {flex-shrink: 0;width: 34px}
.tl-mobile-axis-scale {flex: 1 1 auto;min-width: 0;display: flex;justify-content: space-between;font-size: 9px;color: var(--color-text-muted)}
.tl-axis-header {display: none}
.tl-timeline {display: flex;flex-direction: column;gap: 8px}
.tl-item {display: flex;align-items: stretch;gap: 10px;min-width: 0;text-decoration: none;color: inherit}
.tl-rail {flex-shrink: 0;width: 34px;position: relative;display: flex;flex-direction: column;align-items: center}
.tl-rail::after {content: "";position: absolute;top: 30px;bottom: -10px;left: 50%;width: 2px;background: var(--color-border);transform: translateX(-50%)}
.tl-item:last-child .tl-rail::after {display: none}
.tl-item:not(:has(~ .tl-item:not(.is-hidden))) .tl-rail::after {display: none}
.tl-item .tl-rail-dot,
.tl-item .tl-rail-same {display: none}
.tl-item.is-same-day:not(.is-date-forced) .tl-rail-date {display: none}
.tl-item.is-same-day:not(.is-date-forced) .tl-rail-dot,
.tl-item.is-same-day:not(.is-date-forced) .tl-rail-same {display: block}
.tl-rail-date {text-align: center}
.tl-rail-date .day {display: block;font-size: 15px;font-weight: 700;line-height: 1.15}
.tl-rail-date .wday {display: block;font-size: 10px;color: var(--color-text-muted)}
.tl-rail-date .wday.sun {color: var(--color-danger)}
.tl-rail-date .wday.sat {color: var(--color-primary)}
.tl-rail-dot {width: 10px;height: 10px;margin-top: 4px;border-radius: 50%;background: #fff;border: 2px solid var(--color-border)}
.tl-rail-same {margin-top: 3px;font-size: 9px;color: var(--color-text-muted);text-align: center;overflow-wrap: anywhere}
.tl-card {display: block;flex: 1 1 auto;min-width: 0;background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-md);box-shadow: var(--shadow-sm);padding: 9px 14px}
.tl-item.is-bouzu .tl-card {background: var(--color-bg-secondary)}
.tl-item.is-active .tl-card {border-color: var(--color-success);box-shadow: 0 0 0 1px var(--color-success), var(--shadow-sm)}
.tl-card-grid {display: flex;flex-direction: column;gap: 6px;min-width: 0}
.tl-card-left {display: block;min-width: 0}
.tl-card-right {display: block;min-width: 0;width: 100%}
.tl-card-headline {display: flex;align-items: center;justify-content: space-between;gap: 8px;min-width: 0}
.tl-card-place {min-width: 0;font-size: 13.5px;font-weight: 700;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.tl-card-place.is-private {color: var(--color-text-light);font-weight: 600}
.tl-card-badge {flex-shrink: 0;font-size: 10.5px;font-weight: 700;padding: 3px 9px;border-radius: 999px;white-space: nowrap}
.badge-bouzu {background: #e2e8f0;color: var(--color-text-muted)}
.badge-active {background: #dcfce7;color: #15803d;position: relative;padding-left: 18px}
.badge-active::before {content: "";position: absolute;left: 7px;top: 50%;width: 6px;height: 6px;margin-top: -3px;border-radius: 50%;background: var(--color-success)}
.tl-catches {display: flex;flex-wrap: wrap;gap: 6px;margin-top: 6px}
.tl-catch-chip {display: inline-flex;align-items: center;gap: 5px;font-size: 12px;font-weight: 700;color: var(--color-primary-dark);background: #eff6ff;border: 1px solid #bfdbfe;padding: 3px 9px;border-radius: var(--radius-sm);white-space: nowrap}
.tl-catch-chip-link {cursor: pointer;text-decoration: underline;text-decoration-style: dotted;text-underline-offset: 2px}
.tl-catch-chip-link:hover,
.tl-catch-chip-link:focus-visible {background: #dbeafe;border-color: var(--color-primary)}
.tl-catch-count {font-size: 10.5px;font-weight: 600;color: var(--color-text-muted)}
.tl-catch-size {font-size: 10px;font-weight: 700;color: #fff;background: var(--color-primary);padding: 0 6px;border-radius: 999px;white-space: nowrap}
.tl-daybar-labels {display: flex;justify-content: space-between;align-items: baseline;gap: 6px;font-size: 10.5px;font-weight: 700;letter-spacing: 0.02em;color: var(--color-text-primary);font-variant-numeric: tabular-nums}
.tl-daybar-labels .end {color: var(--color-text-muted);font-weight: 600}
.tl-item.is-active .tl-daybar-labels .end {color: #15803d}
.tl-daybar-duration {flex-shrink: 0;font-size: 9.5px;font-weight: 700;color: var(--color-text-secondary);font-variant-numeric: tabular-nums;letter-spacing: 0.01em;white-space: nowrap;padding: 1px 7px;border-radius: 999px;background: var(--color-bg-secondary);border: 1px solid var(--color-border)}
.mini-daybar {position: relative;display: block;margin-top: 12px;margin-bottom: 5px;height: 24px;border-radius: 4px;overflow: visible;background:
linear-gradient(
90deg,
var(--daybar-night) 0%,
var(--daybar-night) 8%,
var(--daybar-day) 26%,
var(--daybar-day) 74%,
var(--daybar-night) 92%,
var(--daybar-night) 100%
);border: 1px solid var(--color-border)}
.mini-daybar-band {position: absolute;top: 0;bottom: 0;border-radius: 3px;background: var(--mazume-band);opacity: 0.75;pointer-events: none}
.mini-daybar-band::before {content: "";position: absolute;bottom: -5px;left: 50%;width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;transform: translateX(-4px);pointer-events: none}
.mini-daybar-band:first-of-type::before {border-bottom: 5px solid var(--color-warning)}
.mini-daybar-band:nth-of-type(2)::before {border-bottom: 5px solid var(--mazume-stroke)}
.mini-daybar-curve {position: absolute;inset: 0;width: 100%;height: 100%;z-index: 1;pointer-events: none}
.mini-daybar-area {fill: rgba(8, 145, 178, 0.14)}
.mini-daybar-line {fill: none;stroke: rgba(8, 145, 178, 0.55);stroke-width: 2.5}
.mini-daybar-dot-hi {fill: var(--tide-high)}
.mini-daybar-dot-lo {fill: #fff;stroke: var(--tide-low);stroke-width: 2.5}
.mini-daybar-fish {position: absolute;inset: 0;z-index: 2;pointer-events: none}
.mini-daybar-f-strong {fill: none;stroke: var(--tide-curve);stroke-width: 4.5}
.mini-daybar-f-strong.is-active {stroke: #15803d}
.mini-daybar-f-boundary {stroke: var(--color-text-muted);stroke-width: 1;stroke-dasharray: 3 3;opacity: 0.6}
.mini-fillseg-f2a {position: absolute;height: 3px;background: var(--color-primary);opacity: 0.65}
.mini-fillseg-f2a.is-active {background: var(--color-success)}
.mini-fillseg-f2a-top {top: -3px;border-radius: 2px 2px 0 0}
.mini-fillseg-f2a-bottom {bottom: -3px;border-radius: 0 0 2px 2px}
@media (min-width: 768px) {.ci-stats {gap: 14px}
.db-charts-row {grid-template-columns: repeat(2, 1fr)}
.db-card--sp-hidden {display: block}
.history-map-canvas {height: 340px}}
@media (min-width: 1200px) {.db-top-row {grid-template-columns: 1.5fr 1fr;align-items: start}
.db-charts-row {grid-template-columns: repeat(3, 1fr)}
.tl-mobile-axis {display: none}
.tl-axis-header {display: flex;align-items: center;margin-bottom: 8px;min-width: 0}
.tl-axis-header-spacer {flex-shrink: 0;width: 44px}
.tl-axis-header-inner {flex: 1 1 auto;min-width: 0;display: grid;grid-template-columns: 1fr 200px;gap: 20px;padding: 0 14px}
.tl-axis-header-scale {min-width: 0;display: flex;justify-content: space-between;font-size: 10px;color: var(--color-text-muted)}
.tl-card-grid {display: grid;grid-template-columns: 1fr 200px;gap: 20px;align-items: center}
.tl-card-right {width: auto}}
@media (max-width: 389px) {.ci-stat-value {font-size: 18px}
.spot-rate {width: 78px}
.timeband-bar-label {font-size: 9px}
.tl-rail {width: 28px}
.tl-mobile-axis-spacer {width: 28px}}
.check-ins-empty {text-align: center;padding: 40px 20px;background: #fff;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)}
.check-ins-empty p {color: #666;margin-bottom: 16px}
.check-in-navigation,
.check-ins-navigation {display: flex;gap: 12px;justify-content: center;margin-top: 20px}
.button {display: inline-block;padding: 10px 20px;border-radius: 6px;text-decoration: none;font-size: 0.875rem;cursor: pointer;border: none;text-align: center;background: #e9ecef;color: #333}
.button:hover {background: #dee2e6}
.button.is-primary {background: #007bff;color: #fff}
.button.is-primary:hover {background: var(--ci-primary-dark)}
.button.is-danger {background: #dc3545;color: #fff}
.button.is-danger:hover {background: #c82333}
.check-in-submit-button {display: flex;align-items: center;justify-content: center;gap: 8px;width: 100%;padding: 14px 24px;font-size: 1rem;font-weight: 600;color: #fff;background: linear-gradient(135deg, var(--ci-primary) 0%, var(--ci-primary-dark) 100%);border: none;border-radius: 8px;cursor: pointer;transition: all 0.2s ease;box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3)}
.check-in-submit-button:hover {background: linear-gradient(135deg, var(--ci-primary-dark) 0%, var(--ci-primary-darker) 100%);box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);transform: translateY(-1px)}
.check-in-submit-button:active {transform: translateY(0);box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3)}
.check-in-submit-button:disabled {background: #ccc;cursor: not-allowed;box-shadow: none;transform: none}
.check-in-submit-button svg {flex-shrink: 0}
.check-in-image .lightbox-overlay,
.nearby-check-in-image .lightbox-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.9);display: flex;justify-content: center;align-items: center;z-index: 9999;cursor: pointer}
.check-in-image .lightbox-overlay.hidden,
.nearby-check-in-image .lightbox-overlay.hidden {display: none}
.check-in-image .lightbox-image,
.nearby-check-in-image .lightbox-image {max-width: 95%;max-height: 95%;object-fit: contain}
@media (max-width: 768px) {.check-in-new-container {padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px))}}
.check-in-footer-link {text-align: center;margin-top: 24px;padding-top: 16px;border-top: 1px solid #e9ecef}
.check-in-history-link {display: inline-flex;align-items: center;gap: 6px;color: #666;text-decoration: none;font-size: 0.9rem;padding: 8px 16px;border-radius: 8px;transition: all 0.2s ease}
.check-in-history-link:hover {color: var(--ci-primary);background: #f0f2f5}
.check-in-history-link svg {flex-shrink: 0}
.check-ins-upgrade-prompt {display: flex;align-items: center;gap: 12px;background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);border: 1px solid #ffc107;border-radius: 12px;padding: 16px;margin-top: 16px}
.upgrade-prompt-icon {width: 40px;height: 40px;background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.upgrade-prompt-icon svg {color: #fff}
.upgrade-prompt-content {flex: 1;min-width: 0}
.upgrade-prompt-text {font-size: 0.9rem;font-weight: 600;color: #856404;margin: 0 0 4px 0;line-height: 1.4}
.upgrade-prompt-plans {font-size: 0.8rem;color: #997a00;margin: 0}
.upgrade-prompt-button {display: inline-flex;align-items: center;gap: 4px;background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);color: #fff;font-size: 0.85rem;font-weight: 600;padding: 8px 16px;border-radius: 8px;text-decoration: none;white-space: nowrap;transition: all 0.2s ease;box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3)}
.upgrade-prompt-button:hover {background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);box-shadow: 0 4px 8px rgba(255, 152, 0, 0.4);transform: translateY(-1px)}
.upgrade-prompt-button svg {flex-shrink: 0}
.bouzu-recorded-section {background: #fef2f2;border: 1px solid #fecaca;border-radius: 10px;padding: 16px;margin-top: 16px}
.bouzu-recorded-header {display: flex;align-items: center;gap: 10px;margin-bottom: 8px}
.bouzu-badge {display: inline-flex;align-items: center;gap: 6px;background: #fee2e2;color: var(--color-danger-dark);padding: 6px 12px;border-radius: 20px;font-size: 0.85rem;font-weight: 600}
.bouzu-badge svg {flex-shrink: 0}
.bouzu-badge-excluded {background: #e4e6eb;color: #65676b}
.bouzu-section-hint {font-size: 0.8rem;color: #65676b;margin: 0 0 12px 0}
.bouzu-comment {font-size: 0.9rem;color: #65676b;margin: 8px 0 12px 0;padding-left: 12px;border-left: 3px solid #fecaca}
.bouzu-actions {display: flex;flex-wrap: wrap;align-items: center;gap: 8px}
.bouzu-post-report-btn {display: inline-flex;align-items: center;gap: 4px;background: var(--color-danger-dark);border: 1px solid var(--color-danger-dark);color: #fff;font-size: 0.8rem;font-weight: 600;padding: 6px 12px;border-radius: 6px;text-decoration: none;transition: opacity 0.2s ease}
.bouzu-post-report-btn:hover {opacity: 0.85}
.bouzu-cancel-btn {display: inline-flex;align-items: center;gap: 4px;background: transparent;border: 1px solid #fecaca;color: var(--color-danger-dark);font-size: 0.8rem;padding: 6px 12px;border-radius: 6px;cursor: pointer;transition: all 0.2s ease}
.bouzu-cancel-btn:hover {background: #fee2e2}
.check-in-regulation-btn {display: flex;align-items: center;justify-content: center;gap: 8px;width: 100%;box-sizing: border-box;padding: 12px 16px;margin-top: 12px;border: 1px solid #fde68a;border-radius: 8px;background-color: #fffbeb;color: #d97706;font-size: 14px;font-weight: 500;cursor: pointer;text-decoration: none;transition: all 0.2s ease}
.check-in-regulation-btn:hover {background-color: #fef3c7;border-color: #fbbf24;color: #b45309}
.check-in-regulation-btn svg {flex-shrink: 0}
.linked-reports-section {background: #f0f7ff;border-radius: 10px;padding: 16px;margin-top: 16px}
.linked-reports-title {font-size: 0.9rem;font-weight: 700;color: var(--color-text-primary);margin: 0 0 12px 0;display: flex;align-items: center;gap: 6px}
.linked-reports-title svg {color: var(--color-primary);flex-shrink: 0}
.linked-reports-count {display: inline-flex;align-items: center;justify-content: center;min-width: 20px;height: 20px;padding: 0 6px;background: var(--color-primary);color: #fff;font-size: 0.75rem;font-weight: 700;border-radius: 10px;margin-left: 2px}
.linked-reports-list {display: flex;flex-direction: column;gap: 8px}
.linked-report-card {display: flex;align-items: center;gap: 12px;background: #fff;border-radius: 8px;padding: 10px 12px;text-decoration: none;color: inherit;transition: box-shadow 0.2s}
.linked-report-card:hover {box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)}
.linked-report-thumb {width: 48px;height: 48px;border-radius: 8px;overflow: hidden;flex-shrink: 0;background: #e0ecff;display: flex;align-items: center;justify-content: center}
.linked-report-thumb img {width: 100%;height: 100%;object-fit: cover}
.linked-report-thumb svg {color: var(--color-primary);opacity: 0.5}
.linked-report-info {flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 2px}
.linked-report-fish {font-size: 0.9rem;font-weight: 600;color: var(--color-text-primary);overflow-wrap: anywhere}
.linked-report-spec {font-size: 0.8rem;font-weight: 600;color: var(--color-primary)}
.linked-report-time {font-size: 0.75rem;color: var(--color-text-muted)}
.linked-oddities-section {background: var(--color-oddity-50)}
.linked-oddities-section .linked-reports-title svg,
.linked-oddities-section .linked-report-thumb svg {color: var(--color-oddity-600)}
.linked-oddities-section .linked-reports-count {background: var(--color-oddity-600)}
.linked-oddities-section .linked-report-thumb {background: var(--color-oddity-100)}
.linked-oddity-body {font-weight: 400;color: var(--color-text-secondary);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.check-in-edit-container {max-width: 600px;margin: 0 auto;padding: 20px}
.check-in-edit-header {margin-bottom: 20px}
.check-in-edit-header h1 {font-size: 1.35rem;font-weight: 700;color: var(--ci-text);margin: 0 0 6px 0}
.check-in-edit-description {font-size: 0.875rem;color: var(--ci-text-secondary);line-height: 1.5;margin: 0}
.check-in-edit-form {display: flex;flex-direction: column;gap: 16px}
.check-in-edit-section {background: var(--ci-card-bg);border: 1px solid var(--ci-border);border-radius: 12px;padding: 16px}
.check-in-edit-section-title {font-size: 1rem;font-weight: 700;color: var(--ci-text);margin: 0 0 8px 0}
.check-in-edit-hint {font-size: 0.8rem;color: var(--ci-text-secondary);line-height: 1.5;margin: 0 0 12px 0}
.check-in-edit-map {width: 100%;max-width: 100%;height: 280px;box-sizing: border-box;border-radius: 10px;overflow: hidden;background: var(--ci-bg)}
.check-in-edit-started-at {font-size: 0.85rem;color: var(--ci-text-secondary);margin: 0 0 10px 0}
.check-in-edit-datetime {display: block;width: 100%;max-width: 100%;min-width: 0;box-sizing: border-box;-webkit-appearance: none;appearance: none;min-height: 44px;padding: 10px 12px;font-size: 1rem;color: var(--ci-text);background: #fff;border: 1px solid var(--ci-border);border-radius: 8px}
.check-in-edit-datetime::-webkit-date-and-time-value {text-align: left;margin: 0}
.check-in-edit-datetime:focus {outline: none;border-color: var(--ci-primary);box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15)}
.check-in-edit-textarea {display: block;width: 100%;max-width: 100%;min-width: 0;box-sizing: border-box;padding: 10px 12px;font-size: 1rem;font-family: inherit;line-height: 1.6;color: var(--ci-text);background: #fff;border: 1px solid var(--ci-border);border-radius: 8px;resize: vertical}
.check-in-edit-textarea:focus {outline: none;border-color: var(--ci-primary);box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15)}
.check-in-edit-photo {display: flex;flex-direction: column;gap: 12px}
.check-in-edit-photo [hidden] {display: none !important}
.check-in-edit-photo-preview {position: relative;width: 100%;max-width: 100%;box-sizing: border-box;aspect-ratio: 3 / 2;display: flex;align-items: center;justify-content: center;overflow: hidden;border: 1px dashed var(--ci-border);border-radius: 10px;background: var(--ci-bg);cursor: pointer}
.check-in-edit-photo-img {width: 100%;height: 100%;object-fit: cover}
.check-in-edit-photo-placeholder {display: flex;flex-direction: column;align-items: center;gap: 6px;font-size: 0.8rem;color: var(--ci-text-secondary)}
.check-in-edit-file-input {display: none}
.check-in-edit-photo-error {margin: 0;font-size: 0.8rem;color: var(--ci-danger)}
.check-in-edit-photo-actions {display: flex;flex-wrap: wrap;align-items: center;gap: 12px}
.check-in-edit-photo-select {padding: 8px 16px;font-size: 0.875rem;font-weight: 600;color: var(--ci-primary);background: #fff;border: 1px solid var(--ci-primary);border-radius: 8px;cursor: pointer}
.check-in-edit-photo-select:hover {background: rgba(24, 119, 242, 0.06)}
.check-in-edit-photo-remove {display: flex;align-items: center;gap: 6px;font-size: 0.85rem;color: var(--ci-text-secondary);cursor: pointer}
.check-in-edit-note {font-size: 0.8rem;color: var(--ci-text-secondary);line-height: 1.6;margin: 0}
.check-in-edit-section .check-in-edit-note {margin-top: 10px}
.check-in-edit-actions {display: flex;gap: 12px}
.check-in-edit-cancel {flex: 1;display: flex;align-items: center;justify-content: center;padding: 12px;background: #fff;border: 1px solid var(--ci-border);border-radius: 10px;color: var(--ci-text-secondary);font-weight: 600;text-decoration: none}
.check-in-edit-cancel:hover {background: var(--ci-bg)}
.check-in-edit-submit {flex: 2;padding: 12px;background: linear-gradient(135deg, var(--ci-primary) 0%, var(--ci-primary-dark) 100%);border: none;border-radius: 10px;color: #fff;font-size: 1rem;font-weight: 700;cursor: pointer}
.check-in-edit-submit:hover {opacity: 0.92}
@media (max-width: 768px) {body.with-header.form-page:has(.check-in-edit-container) .main-content {align-items: flex-start;padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px))}}
@media (max-width: 480px) {.check-in-edit-container {padding: 16px}
.check-in-edit-map {height: 220px}}
.check-in-tally {background: #f5fbfd;border: 1px solid #cfeaf3;border-radius: 10px;padding: 16px;margin-top: 16px}
.check-in-tally-header {display: flex;align-items: center;justify-content: space-between;gap: 8px}
.check-in-tally-title {display: flex;align-items: center;gap: 6px;font-size: 0.9rem;font-weight: 700;color: var(--color-text-primary);margin: 0}
.check-in-tally-title svg {color: #0891b2;flex-shrink: 0}
.check-in-tally-total {font-size: 0.85rem;font-weight: 700;color: #0e7490;white-space: nowrap}
.check-in-tally-note {font-size: 0.75rem;color: var(--color-text-muted);margin: 6px 0 12px 0;line-height: 1.5}
.check-in-tally-error {font-size: 0.8rem;color: var(--color-danger-dark);background: #fee2e2;border-radius: 6px;padding: 8px 10px;margin: 0 0 12px 0}
.check-in-tally-error[hidden] {display: none}
.check-in-tally-list {list-style: none;margin: 0 0 12px 0;padding: 0;display: flex;flex-direction: column;gap: 8px}
.check-in-tally-row {display: flex;align-items: center;gap: 10px;background: #fff;border: 1px solid #e4e6ea;border-radius: 8px;padding: 8px 10px}
.check-in-tally-fish {display: flex;flex-direction: column;gap: 2px;min-width: 0;flex: 1}
.check-in-tally-name {font-size: 0.9rem;font-weight: 600;color: var(--color-text-primary);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.check-in-tally-name-link {color: inherit;text-decoration: underline;text-decoration-style: dotted;text-underline-offset: 2px}
.check-in-tally-name-link:hover {color: var(--color-primary)}
.check-in-tally-time {font-size: 0.7rem;color: var(--color-text-muted)}
.check-in-tally-from-reports {display: inline-block;margin-left: 4px;padding: 0 5px;border-radius: 8px;background: #eef2f7;white-space: nowrap}
.check-in-tally-count {font-size: 0.75rem;color: var(--color-text-muted);white-space: nowrap}
.check-in-tally-value {font-size: 1.1rem;font-weight: 700;color: #0e7490;font-variant-numeric: tabular-nums;margin-right: 2px}
.check-in-tally-actions {display: flex;align-items: center;justify-content: flex-end;gap: 6px;min-width: 86px}
.check-in-tally-actions form {margin: 0}
.check-in-tally-btn {display: inline-flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;border: 1px solid #cfeaf3;background: #fff;color: #0891b2;cursor: pointer}
.check-in-tally-btn:active {transform: scale(0.94)}
.check-in-tally-btn-plus {background: #0891b2;border-color: #0891b2;color: #fff}
.check-in-tally-empty {font-size: 0.8rem;color: var(--color-text-muted);margin: 0 0 12px 0;line-height: 1.6}
.check-in-tally-hourly {margin: 0 0 12px 0}
.check-in-tally-hourly-title {font-size: 0.8rem;font-weight: 700;color: var(--color-text-primary);margin: 0 0 8px 0}
.check-in-tally-hourly-list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 4px}
.check-in-tally-hourly-row {display: flex;align-items: center;gap: 8px;font-size: 0.75rem;color: var(--color-text-muted)}
.check-in-tally-hourly-hour {width: 3.5em;flex-shrink: 0;font-variant-numeric: tabular-nums}
.check-in-tally-hourly-bar {flex: 1;min-width: 0;height: 8px;background: #e4e6ea;border-radius: 4px;overflow: hidden}
.check-in-tally-hourly-fill {display: block;height: 100%;background: #0891b2;border-radius: 4px}
.check-in-tally-hourly-count {width: 3.5em;flex-shrink: 0;text-align: right;font-variant-numeric: tabular-nums}
.check-in-tally-form-note {font-size: 0.75rem;color: var(--color-text-muted);line-height: 1.5;margin: 0 0 8px 0}
.check-in-tally-form-label {display: block;font-size: 0.75rem;font-weight: 600;color: var(--color-text-muted);margin-bottom: 4px}
.check-in-tally-form-row {display: flex;gap: 8px}
.check-in-tally-input {flex: 1;min-width: 0;max-width: 100%;box-sizing: border-box;padding: 10px 12px;font-size: 16px;border: 1px solid #cfeaf3;border-radius: 8px;background: #fff;color: var(--color-text-primary)}
.check-in-tally-input:focus {outline: none;border-color: #0891b2;box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15)}
.check-in-tally-submit {flex-shrink: 0;padding: 10px 16px;font-size: 0.85rem;font-weight: 700;color: #fff;background: #0891b2;border: 1px solid #0891b2;border-radius: 8px;cursor: pointer}
.check-in-tally-submit:active {transform: scale(0.98)}