.follow-container {max-width: var(--layout-width-compact);margin: 0 auto;padding: 20px 16px 32px}
.timeline-container {max-width: var(--layout-width-compact);margin: 0 auto;padding: 20px 16px 32px}
.follow-back-link {display: inline-flex;align-items: center;gap: 4px;padding: 6px 0;margin-bottom: 12px;font-size: 0.8125rem;font-weight: 500;text-decoration: none;color: var(--color-text-muted);transition: color 0.2s}
.follow-back-link:hover {color: var(--color-primary)}
.follow-page-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 16px;gap: 12px}
.follow-page-title {font-size: 1.125rem;font-weight: 700;color: var(--color-text-primary);margin: 0}
.follow-page-title i {margin-right: 6px;color: var(--color-primary)}
.follow-page-count {font-size: 0.8125rem;color: var(--color-text-muted);font-weight: 500}
.follow-btn {display: inline-flex;align-items: center;justify-content: center;gap: 6px;padding: 8px 20px;border-radius: var(--radius-sm);font-size: 0.875rem;font-weight: 600;border: 2px solid var(--color-primary);background: var(--color-primary);color: #fff;cursor: pointer;transition: all 0.2s;white-space: nowrap;font-family: inherit}
.follow-btn:hover {background: var(--color-primary-dark);border-color: var(--color-primary-dark)}
.follow-btn--following {background: transparent;color: var(--color-primary)}
.follow-btn--following:hover {border-color: var(--color-danger);color: var(--color-danger);background: transparent}
.follow-btn--sm {padding: 4px 12px;font-size: 0.8125rem}
.follow-btn--profile {padding: 5px 16px;font-size: 0.8125rem;border-width: 1.5px;border-radius: 16px}
.follow-back-hint {font-size: 0.6875rem;color: var(--color-text-muted);white-space: nowrap}
.follow-friend-badge {display: inline-flex;align-items: center;gap: 4px;padding: 2px 8px;border-radius: 12px;font-size: 0.6875rem;font-weight: 600;background: var(--color-status-confirmed-bg);color: var(--color-status-confirmed-text);white-space: nowrap}
.follow-user-list {display: flex;flex-direction: column}
.follow-user-card {display: flex;align-items: center;gap: 12px;padding: 12px 0;border-bottom: 1px solid var(--color-border-light)}
.follow-user-card:last-child {border-bottom: none}
.follow-user-icon {flex-shrink: 0}
.follow-user-info {flex: 1;min-width: 0}
.follow-user-name {font-weight: 600;font-size: 0.9375rem;color: var(--color-text-primary);text-decoration: none;display: block;overflow-wrap: anywhere}
.follow-user-name:hover {color: var(--color-primary)}
.follow-user-bio {display: block;font-size: 0.8125rem;color: var(--color-text-muted);overflow-wrap: anywhere;margin-top: 2px}
.follow-user-badges {flex-shrink: 0}
.follow-user-actions {flex-shrink: 0}
.follow-empty {text-align: center;padding: 48px 16px;color: var(--color-text-muted)}
.follow-empty-icon {font-size: 2.5rem;margin-bottom: 12px;opacity: 0.4}
.follow-empty p {margin: 0;font-size: 0.9375rem}
.timeline-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 12px}
.timeline-mode-toggle {display: flex;border-radius: 20px;overflow: hidden;border: 1.5px solid var(--color-border);background: var(--color-bg-secondary)}
.timeline-mode-toggle-item {display: flex;align-items: center;gap: 4px;padding: 4px 12px;font-size: 0.75rem;font-weight: 600;text-decoration: none;color: var(--color-text-muted);transition: background 0.2s, color 0.2s;white-space: nowrap}
.timeline-mode-toggle-item:hover {color: var(--color-text-primary)}
.timeline-mode-toggle-item--active {background: var(--color-primary);color: #fff;border-radius: 20px}
.timeline-mode-toggle-item--active:hover {background: var(--color-primary-dark);color: #fff}
.timeline-mode-toggle-item i {font-size: 0.6875rem}
.timeline-cuisine-icon {font-size: 0.75rem;margin-right: 2px}
.timeline-cuisine-fish-icon {font-size: 0.6875rem;margin-right: 2px}
.timeline-search {margin-bottom: 16px}
.timeline-search-bar.is-stuck {position: fixed;top: 0;left: 0;right: 0;z-index: 100;background: #fff;border-bottom: 1px solid var(--color-border-light);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);padding: 12px 16px}
@media (min-width: 769px) {.timeline-search-bar.is-stuck {top: 60px}}
.timeline-search-bar.is-stuck .timeline-search {max-width: var(--layout-width-compact);margin: 0 auto}
.timeline-search-input-wrapper {position: relative}
.timeline-search-icon {position: absolute;left: 12px;top: 50%;transform: translateY(-50%);color: var(--color-text-light);pointer-events: none}
.timeline-search-input {width: 100%;max-width: 100%;box-sizing: border-box;padding: 10px 40px 10px 38px;border: 2px solid var(--color-border);border-radius: var(--radius-sm);font-size: 0.9375rem;font-family: inherit;color: var(--color-text-primary);transition: border-color 0.2s}
.timeline-search-input:focus {outline: none;border-color: var(--color-primary)}
.timeline-search-input::placeholder {color: var(--color-text-light)}
.timeline-search-clear {position: absolute;right: 8px;top: 50%;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;border: none;background: transparent;color: var(--color-text-muted);cursor: pointer;border-radius: 50%;transition: background 0.2s, color 0.2s;padding: 0;font-size: 0.875rem}
.timeline-search-clear:hover {background: var(--color-bg-secondary);color: var(--color-text-primary)}
.timeline-search-status {padding: 10px 0 4px;font-size: 0.875rem;font-weight: 600;color: var(--color-text-muted)}
.timeline-title {font-size: 1.125rem;font-weight: 700;color: var(--color-text-primary);margin: 0}
.timeline-title i {margin-right: 6px;color: var(--color-primary)}
.timeline-feed-list {display: flex;flex-direction: column;gap: 16px}
.timeline-feed-list turbo-frame[complete] {display: contents}
.timeline-feed-card {background: #fff;border-radius: var(--radius-md);box-shadow: var(--shadow-sm);overflow: hidden}
.timeline-feed-card-link {display: block;text-decoration: none;color: inherit}
.timeline-feed-card-image {position: relative;width: 100%;aspect-ratio: 3 / 2;overflow: hidden;background: var(--color-bg-secondary);cursor: pointer}
.timeline-feed-card-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s}
.timeline-feed-card-link:hover .timeline-feed-card-image img,
.timeline-feed-card-image:hover img {transform: scale(1.03)}
.timeline-feed-card-overlay {position: absolute;inset: 0;display: flex;flex-direction: column;justify-content: space-between;pointer-events: none}
.timeline-feed-card-overlay-top {position: absolute;top: 0;left: 0;right: 0;z-index: 3;display: flex;align-items: center;justify-content: space-between;gap: 8px;background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);padding: 10px 14px 20px;pointer-events: none}
.timeline-feed-card-overlay-bottom {position: absolute;bottom: 0;left: 0;right: 0;z-index: 3;background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);padding: 28px 14px 10px;pointer-events: none}
.timeline-feed-card-user-row {display: flex;align-items: center;gap: 6px;min-width: 0}
.timeline-feed-card-user {font-size: 0.8125rem;font-weight: 600;color: #fff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.4)}
.timeline-feed-card-date {font-size: 0.75rem;color: #fff;flex-shrink: 0;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.4)}
.timeline-feed-card-fish {font-size: 1rem;font-weight: 700;color: #fff;margin-bottom: 2px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.5)}
.timeline-feed-card-ai-badge {display: inline-block;padding: 1px 5px;margin-left: 4px;font-size: 0.625rem;font-weight: 700;line-height: 1.4;color: #fff;background: rgba(139, 92, 246, 0.8);border-radius: 4px;vertical-align: middle;text-shadow: none}
.timeline-feed-card-comment {font-size: 0.8125rem;color: #fff;line-height: 1.4;margin: 0;overflow-wrap: anywhere;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.4)}
.timeline-feed-card-footer {padding: 0}
.timeline-loading-sentinel {display: flex;justify-content: center;padding: 24px 0}
.timeline-spinner {width: 28px;height: 28px;border: 3px solid var(--color-border);border-top-color: var(--color-primary);border-radius: 50%;animation: timeline-spin 0.7s linear infinite}
@keyframes timeline-spin {to { transform: rotate(360deg); }}
.timeline-empty {text-align: center;padding: 48px 16px;color: var(--color-text-muted)}
.timeline-empty-icon {font-size: 2.5rem;margin-bottom: 12px;opacity: 0.4}
.timeline-empty p {margin: 0 0 4px;font-size: 0.9375rem}
.timeline-empty-hint {font-size: 0.8125rem;color: var(--color-text-light)}
.timeline-empty-hint a {color: var(--color-primary);text-decoration: none;font-weight: 600}
.timeline-empty-hint a:hover {text-decoration: underline}
.danmaku-layer {position: absolute;inset: 0;overflow: hidden;pointer-events: none;z-index: 2}
.danmaku-comment {position: absolute;right: 0;white-space: nowrap;color: #fff;font-size: 0.875rem;font-weight: 600;text-shadow:
1px 1px 2px rgba(0, 0, 0, 0.8),
0 0 8px rgba(0, 0, 0, 0.4);pointer-events: none}
@keyframes danmaku-scroll {from {transform: translateX(100%)}
to {transform: translateX(calc(-1 * var(--danmaku-travel, 150%)))}}
.danmaku-panel {position: absolute;bottom: 0;left: 0;right: 0;z-index: 5;padding: 10px 12px;background: rgba(0, 0, 0, 0.6);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px)}
.danmaku-close-btn {position: absolute;top: -36px;right: 8px;display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;border: none;border-radius: 50%;background: rgba(0, 0, 0, 0.5);color: rgba(255, 255, 255, 0.85);cursor: pointer;padding: 0;transition: background 0.2s, color 0.2s}
.danmaku-close-btn:hover {background: rgba(0, 0, 0, 0.7);color: #fff}
.danmaku-detail-btn {display: flex;align-items: center;justify-content: center;gap: 6px;width: 100%;padding: 8px 0;margin-bottom: 8px;border-radius: 8px;background: rgba(255, 255, 255, 0.15);color: #fff;font-size: 0.8125rem;font-weight: 600;text-decoration: none;transition: background 0.2s}
.danmaku-detail-btn:hover {background: rgba(255, 255, 255, 0.25)}
.danmaku-form {display: flex;align-items: center;gap: 8px}
.danmaku-input {flex: 1;padding: 8px 12px;border: 1.5px solid rgba(255, 255, 255, 0.3);border-radius: 20px;background: rgba(0, 0, 0, 0.4);color: #fff;font-size: 0.875rem;font-family: inherit;outline: none;transition: border-color 0.2s, background 0.2s;max-width: 100%;box-sizing: border-box}
.danmaku-input:focus {border-color: rgba(255, 255, 255, 0.6);background: rgba(0, 0, 0, 0.5)}
.danmaku-input::placeholder {color: rgba(255, 255, 255, 0.5)}
.danmaku-submit-btn {display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;border: none;border-radius: 50%;background: var(--color-primary);color: #fff;cursor: pointer;flex-shrink: 0;transition: background 0.2s}
.danmaku-submit-btn:hover {background: var(--color-primary-dark)}
.danmaku-submit-btn:disabled {opacity: 0.6;cursor: not-allowed}
@media (max-width: 768px) {.timeline-search-input {font-size: 16px}
.follow-user-card {gap: 10px}
.follow-user-badges .follow-friend-badge {font-size: 0.625rem;padding: 1px 6px}
.timeline-feed-card-overlay-top {padding: 8px 12px 18px}
.timeline-feed-card-overlay-bottom {padding: 24px 12px 8px}
.danmaku-input {font-size: 16px}}