.articles-container {max-width: 780px;margin: 0 auto;padding: 20px 16px}
.articles-main-tabs {display: flex;gap: 0;margin-bottom: 20px;background: var(--color-bg-secondary, #f1f5f9);border-radius: var(--radius-md);padding: 3px}
.articles-main-tab {flex: 1;text-align: center;padding: 10px 16px;font-size: 14px;font-weight: 600;color: var(--color-text-muted);text-decoration: none;border-radius: calc(var(--radius-md) - 2px);transition: background 0.2s, color 0.2s, box-shadow 0.2s}
.articles-main-tab:hover {color: var(--color-text-primary)}
.articles-main-tab.active {background: #fff;color: var(--color-text-primary);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)}
.articles-header {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 10px 12px;margin-bottom: 16px}
.articles-title {font-size: 20px;font-weight: 800;color: var(--color-text-primary)}
.article-new-btn {display: inline-flex;align-items: center;gap: 4px;background: var(--color-primary);color: #fff;border: none;padding: 8px 18px;border-radius: 24px;font-size: 13px;font-weight: 600;text-decoration: none;cursor: pointer;transition: background 0.2s}
.article-new-btn:hover {background: var(--color-primary-dark)}
.articles-search-form {margin-bottom: 14px}
.articles-search-field {position: relative;display: flex;align-items: center}
.articles-search-icon {position: absolute;left: 12px;color: var(--color-text-muted);pointer-events: none}
.articles-search-input {width: 100%;max-width: 100%;padding: 10px 38px;border: 1px solid transparent;border-radius: 22px;font-size: 16px;outline: none;background: var(--color-bg-secondary);box-sizing: border-box;transition: border-color 0.2s, box-shadow 0.2s, background 0.2s}
.articles-search-input:focus {background: #fff;border-color: var(--color-aqua-500);box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.12)}
.articles-search-input::placeholder {color: var(--color-text-light)}
.articles-search-clear {position: absolute;right: 10px;display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;color: var(--color-text-muted);border-radius: 50%;transition: background 0.2s, color 0.2s}
.articles-search-clear:hover {background: var(--color-bg-secondary);color: var(--color-text-primary)}
.articles-tabs {display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 20px}
@media (max-width: 640px) {.articles-tabs {flex-wrap: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none}
.articles-tabs::-webkit-scrollbar {display: none}}
.articles-tab {flex-shrink: 0;white-space: nowrap;padding: 7px 16px;font-size: 13px;font-weight: 600;color: var(--color-text-secondary);background: var(--color-bg-secondary);border-radius: 18px;text-decoration: none;transition: background 0.2s, color 0.2s}
.articles-tab:hover {color: var(--color-text-primary);background: var(--color-border)}
.articles-tab:focus-visible {outline-offset: -2px}
.articles-tab.active {color: #fff;background: var(--gradient-aqua)}
.articles-sort {display: flex;gap: 4px}
.articles-sort-option {padding: 5px 12px;font-size: 12px;font-weight: 600;color: var(--color-text-muted);text-decoration: none;border: 1px solid var(--color-border);border-radius: 16px;transition: all 0.2s}
.articles-sort-option:hover {color: var(--color-text-primary);border-color: var(--color-aqua-500)}
.articles-sort-option.active {color: #fff;background: var(--gradient-aqua);border-color: transparent}
.articles-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 16px}
@media (max-width: 640px) {.articles-grid {grid-template-columns: 1fr}}
.article-card {display: block;background: #fff;border-radius: var(--radius-md);overflow: hidden;box-shadow: var(--shadow-sm);text-decoration: none;color: inherit;transition: box-shadow 0.2s, transform 0.2s}
.article-card:hover {box-shadow: var(--shadow-md);transform: translateY(-2px)}
.article-card-cover {height: 160px;position: relative;overflow: hidden;background: linear-gradient(135deg, #e0f2fe, #bae6fd)}
.article-card-cover-image {width: 100%;height: 100%;object-fit: cover}
.article-card-cover-placeholder {width: 100%;height: 100%;background: linear-gradient(135deg, var(--color-primary), #7c3aed);opacity: 0.7}
.article-card-cover-date,
.article-card-cover-reading-time {position: absolute;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);color: #fff;padding: 3px 10px;border-radius: 10px;font-size: 10px;font-weight: 500}
.article-card-cover-date {bottom: 8px;left: 8px}
.article-card-cover-reading-time {bottom: 8px;right: 8px}
.article-card-badge {position: absolute;top: 8px;right: 8px;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(4px);color: #fff;padding: 3px 10px;border-radius: 12px;font-size: 10px;font-weight: 600}
.article-card-body {padding: 14px 16px}
.article-card-title {font-size: 15px;font-weight: 700;line-height: 1.4;margin-bottom: 6px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;color: var(--color-text-primary)}
.article-card-excerpt {font-size: 12px;color: var(--color-text-muted);line-height: 1.5;margin-bottom: 10px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden}
.article-card-footer {display: flex;align-items: center;gap: 8px;margin-bottom: 8px}
.article-card-avatar {width: 24px;height: 24px;border-radius: 50%;object-fit: cover}
.article-card-avatar-placeholder {width: 24px;height: 24px;border-radius: 50%;background: linear-gradient(135deg, #60a5fa, #3b82f6);display: flex;align-items: center;justify-content: center;color: #fff;font-size: 10px;font-weight: 700}
.article-card-avatar-placeholder--beginner {background: #f0f0f0}
.article-card-beginner-icon {width: 16px;height: 16px}
.article-card-avatar-placeholder--admin {background: #fff;border: 1px solid #e0e0e0}
.article-card-admin-icon {width: 24px;height: 24px;border-radius: 50%;object-fit: cover}
.article-card-author-name {font-size: 12px;font-weight: 600;color: var(--color-text-secondary)}
.article-card-tags {display: flex;gap: 4px;flex-wrap: wrap}
.article-tag {display: inline-block;padding: 2px 8px;border-radius: 12px;font-size: 10px;font-weight: 600}
.article-tag-fish {background: #dbeafe;color: #1e40af}
.article-tag-cuisine {background: #fef3c7;color: #92400e}
.article-tag-hashtag {background: #e0e7ff;color: #3730a3}
.article-show-tags {display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 24px}
.article-show-tag {display: inline-block;padding: 3px 12px;border-radius: 12px;font-size: 11px;font-weight: 600;background: #e0e7ff;color: #3730a3;text-decoration: none;transition: background 0.15s}
.article-show-tag:hover {background: #c7d2fe}
.article-body-hashtag {color: #4f46e5;font-weight: 600;text-decoration: none;transition: color 0.15s}
.article-body-hashtag:hover {color: #3730a3;text-decoration: underline}
.articles-tag-filter {display: flex;align-items: center;gap: 8px;margin-bottom: 12px;padding: 8px 12px;background: #e0e7ff;border-radius: var(--radius-md)}
.articles-tag-filter-label {font-size: 13px;font-weight: 600;color: #3730a3}
.articles-tag-filter-clear {display: inline-flex;align-items: center;gap: 2px;font-size: 12px;color: #6b7280;text-decoration: none;margin-left: auto}
.articles-tag-filter-clear:hover {color: #ef4444}
.article-tag-input-wrapper {display: flex;flex-wrap: wrap;align-items: center;gap: 6px;padding: 8px 10px;border: 1px solid var(--color-border-light);border-radius: var(--radius-md);background: #fff;cursor: text;min-height: 42px}
.article-tag-chips {display: flex;flex-wrap: wrap;gap: 6px}
.article-tag-chip {display: inline-flex;align-items: center;gap: 2px;padding: 3px 8px;border-radius: 14px;font-size: 13px;font-weight: 600;background: #e0e7ff;color: #3730a3;white-space: nowrap}
.article-tag-chip-remove {display: inline-flex;align-items: center;justify-content: center;width: 16px;height: 16px;border: none;background: rgba(55, 48, 163, 0.15);border-radius: 50%;font-size: 12px;line-height: 1;color: #3730a3;cursor: pointer;padding: 0;margin-left: 2px}
.article-tag-chip-remove:hover {background: rgba(239, 68, 68, 0.2);color: #ef4444}
.article-tag-text-input {flex: 1;min-width: 80px;border: none;outline: none;font-size: 14px;color: var(--color-text-primary);background: transparent}
.article-tag-text-input::placeholder {color: var(--color-text-muted)}
.article-tag-warning {margin-top: 6px;font-size: 12px;color: #dc2626;font-weight: 500}
.articles-empty {text-align: center;padding: 60px 20px}
.articles-empty-icon {color: var(--color-text-muted);margin-bottom: 12px}
.articles-empty-text {font-size: 15px;color: var(--color-text-muted);margin-bottom: 20px}
.article-show-container {width: 100%;max-width: 680px;margin: 0 auto;padding-bottom: 60px;background: #fff;box-sizing: border-box}
.article-cover-wrapper {position: relative}
.article-cover {width: 100%;max-height: 400px;overflow: hidden}
.article-cover--has-image {position: relative;max-height: 400px}
.article-cover--no-image {height: 120px;max-height: 120px}
.article-cover-placeholder-bg {width: 100%;height: 100%;background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%)}
.article-cover-image {width: 100%;height: 100%;object-fit: cover;max-height: 400px}
.article-cover-overlay {position: absolute;inset: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 40%, transparent 70%);display: flex;flex-direction: column;justify-content: flex-end;padding: 24px}
.article-cover-title {font-size: 24px;font-weight: 800;color: #fff;line-height: 1.4;margin-bottom: 10px;text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);overflow-wrap: anywhere}
.article-cover-meta {display: flex;align-items: center;gap: 8px;flex-wrap: wrap;font-size: 13px;color: rgba(255, 255, 255, 0.85)}
.article-cover-avatar {width: 28px;height: 28px;border-radius: 50%;object-fit: cover;border: 2px solid rgba(255, 255, 255, 0.5)}
.article-cover-avatar-placeholder {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px;border-radius: 50%;background: rgba(255, 255, 255, 0.25);border: 2px solid rgba(255, 255, 255, 0.5)}
.article-cover-beginner-icon {width: 18px;height: 18px}
.article-cover-avatar-placeholder--admin {background: rgba(255, 255, 255, 0.9);border: 2px solid rgba(255, 255, 255, 0.7)}
.article-cover-admin-icon {width: 28px;height: 28px;border-radius: 50%;object-fit: cover}
.article-cover-author {font-weight: 600;color: inherit;text-decoration: none}
.article-cover-author:hover {text-decoration: underline}
.article-cover-date::before {content: "·";margin-right: 8px}
.article-cover-reading-time {position: absolute;top: 12px;left: 12px;z-index: 2;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);padding: 4px 12px;border-radius: 12px;font-size: 11px;font-weight: 600;color: #fff}
.article-views-counter {appearance: none;font-family: inherit;text-align: left;position: absolute;bottom: 12px;right: 12px;display: flex;align-items: center;gap: 6px;padding: 8px 14px;background: rgba(255, 255, 255, 0.75);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border: 1px solid rgba(255, 255, 255, 0.3);border-radius: 20px;font-size: 12px;color: #334155;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);opacity: 0;transform: translateY(6px);transition: opacity 0.4s ease, transform 0.4s ease;pointer-events: none}
.article-views-counter--visible {opacity: 1;transform: translateY(0);pointer-events: auto;cursor: pointer}
.article-views-counter svg {flex-shrink: 0;color: #0284c7}
.article-views-counter strong {font-weight: 700;color: #0c4a6e}
.article-views-tooltip {position: absolute;bottom: calc(100% + 10px);right: 0;width: 280px;padding: 14px;background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);border: 1px solid #e2e8f0;border-radius: 14px;box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);opacity: 0;transform: translateY(4px);transition: opacity 0.2s ease, transform 0.2s ease;pointer-events: none;z-index: 10;display: flex;flex-direction: column;gap: 10px}
.article-views-tooltip--visible {opacity: 1;transform: translateY(0);pointer-events: auto}
.article-views-tooltip-item {display: flex;align-items: flex-start;gap: 10px;font-size: 12px;line-height: 1.65;color: #475569}
.article-views-tooltip-item svg {flex-shrink: 0;margin-top: 2px;color: #0ea5e9}
.article-views-tooltip-item strong {color: #1e293b;font-weight: 700}
.article-views-sentinel {height: 1px;width: 100%;pointer-events: none}
.article-meta-right {display: flex;align-items: center;gap: 8px}
.article-share-button {display: inline-flex;align-items: center;justify-content: center;width: 32px;height: 32px;padding: 0;border: 1px solid var(--color-border);border-radius: 50%;background: #fff;color: var(--color-text-secondary, #6b7280);cursor: pointer;transition: all 0.2s}
.article-share-button:hover {background: var(--color-bg-secondary, #f3f4f6);color: var(--color-text-primary, #111827);border-color: var(--color-text-secondary, #6b7280)}
.article-share-button:active {transform: scale(0.94)}
.article-share-button svg {flex-shrink: 0}
.article-header {padding: 28px 24px 20px}
.article-show-title {font-size: 24px;font-weight: 800;line-height: 1.5;margin-bottom: 20px;color: #111827;letter-spacing: 0.01em}
.article-meta {display: flex;align-items: center;justify-content: space-between;padding-bottom: 20px;border-bottom: 1px solid var(--color-border)}
.article-meta-author {display: flex;align-items: center;gap: 10px}
.article-meta-avatar {width: 40px;height: 40px;border-radius: 50%;object-fit: cover}
.article-meta-avatar-placeholder {width: 40px;height: 40px;border-radius: 50%;background: linear-gradient(135deg, #60a5fa, #3b82f6);display: flex;align-items: center;justify-content: center;color: #fff;font-size: 15px;font-weight: 700;text-decoration: none}
.article-meta-avatar-placeholder--beginner {background: #f0f0f0}
.article-meta-beginner-icon {width: 24px;height: 24px}
.article-meta-avatar-placeholder--admin {background: #fff;border: 1px solid #e0e0e0}
.article-meta-admin-icon {width: 40px;height: 40px;border-radius: 50%;object-fit: cover}
.article-meta-info {display: flex;flex-direction: column;gap: 2px}
.article-meta-name {font-size: 14px;font-weight: 600;color: var(--color-text-primary);text-decoration: none}
.article-meta-date {font-size: 12px;color: var(--color-text-muted)}
.article-genre-badge {display: inline-block;padding: 3px 12px;border-radius: 12px;font-size: 11px;font-weight: 700;color: #fff;background: #6d28d9}
.article-reading-time {font-size: 11px;color: var(--color-text-muted);background: var(--color-bg-secondary);padding: 4px 12px;border-radius: 12px;font-weight: 500}
.article-body {padding: 28px 24px;font-size: 16px;line-height: 2;color: #1f2937;overflow-wrap: anywhere;letter-spacing: 0.02em}
.article-body p {margin-bottom: 24px}
.article-body p:last-child {margin-bottom: 0}
.article-images-section {padding: 0 16px}
.article-image-figure {margin: 16px 0}
.article-image {width: 100%;max-width: 100%;border-radius: var(--radius-md);height: auto}
.article-image-caption {font-size: 12px;color: var(--color-text-muted);text-align: center;margin-top: 8px}
.article-linked-section {padding: 20px 24px;border-top: 1px solid var(--color-border)}
.article-linked-title {font-size: 16px;font-weight: 700;margin-bottom: 12px;color: var(--color-text-primary)}
.article-linked-reports,
.article-linked-cuisines {display: flex;flex-direction: column;gap: 12px}
.article-report-card,
.article-cuisine-card {display: block;position: relative;width: 100%;aspect-ratio: 16 / 5;border-radius: var(--radius-md);overflow: hidden;text-decoration: none;color: inherit}
.article-report-card:hover,
.article-cuisine-card:hover {box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12)}
.article-report-card-image,
.article-cuisine-card-image {position: absolute;inset: 0}
.article-report-card-image img,
.article-cuisine-card-image img {width: 100%;height: 100%;object-fit: cover}
.article-report-card-placeholder,
.article-cuisine-card-placeholder {display: block;width: 100%;height: 100%}
.article-report-card-placeholder {background: linear-gradient(135deg, #0ea5e9, #2563eb)}
.article-cuisine-card-placeholder {background: linear-gradient(135deg, #f59e0b, #ef4444)}
.article-report-card-body,
.article-cuisine-card-body {position: absolute;inset: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.08) 60%, transparent 100%);display: flex;flex-direction: column;justify-content: flex-end;padding: 12px 14px;gap: 2px}
.article-report-fish-name,
.article-cuisine-title {font-size: 15px;font-weight: 700;color: #fff;text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.article-report-detail,
.article-report-date,
.article-cuisine-fish {font-size: 12px;color: rgba(255, 255, 255, 0.85);text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5)}
.article-comments-section {padding: 24px 24px 32px;border-top: 2px solid var(--color-border)}
.article-comments-header {margin-bottom: 20px}
.article-comments-title {display: flex;align-items: center;gap: 8px;font-size: 18px;font-weight: 700;color: var(--color-text-primary)}
.article-comments-title svg {color: var(--color-text-muted)}
@media (max-width: 480px) {.article-comments-section {padding: 20px 16px 24px}
.article-comments-title {font-size: 16px}}
.user-articles-section {margin-top: 30px}
.user-articles-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 12px}
.user-article-card {display: block;text-decoration: none;color: inherit;border-radius: var(--radius-md);overflow: hidden;background: #fff;box-shadow: var(--shadow-sm);transition: box-shadow 0.2s, transform 0.2s}
.user-article-card:hover {box-shadow: var(--shadow-md);transform: translateY(-2px)}
.user-article-card-cover {aspect-ratio: 16 / 9;overflow: hidden;background: linear-gradient(135deg, #e0f2fe, #bae6fd)}
.user-article-card-image {width: 100%;height: 100%;object-fit: cover}
.user-article-card-placeholder {width: 100%;height: 100%;background: linear-gradient(135deg, var(--color-primary), #7c3aed);opacity: 0.7}
.user-article-card-title {padding: 10px 12px;font-size: 13px;font-weight: 600;line-height: 1.4;color: var(--color-text-primary);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;min-width: 0;overflow-wrap: anywhere}
.user-articles-more-link {display: block;text-align: center;margin-top: 12px;padding: 10px;font-size: 13px;font-weight: 600;color: var(--color-primary);text-decoration: none;border: 1px solid var(--color-border);border-radius: var(--radius-sm);transition: background 0.2s}
.user-articles-more-link:hover {background: var(--color-bg-secondary)}
@media (max-width: 640px) {.user-articles-grid {grid-template-columns: repeat(2, 1fr);gap: 8px}
.user-article-card-title {font-size: 12px;padding: 8px 10px}}
.article-form-container {max-width: 680px;margin: 0 auto;padding: 20px 16px 100px;box-sizing: border-box;overflow-x: hidden}
.article-form-container * {box-sizing: border-box;max-width: 100%}
.article-drafts-overlay {position: fixed;inset: 0;z-index: var(--z-index-modal);background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(4px);display: flex;align-items: center;justify-content: center;padding: 16px;animation: drafts-overlay-in 0.25s ease}
.article-drafts-overlay--closing {animation: drafts-overlay-out 0.2s ease forwards}
@keyframes drafts-overlay-in {from { opacity: 0; }
to { opacity: 1; }}
@keyframes drafts-overlay-out {from { opacity: 1; }
to { opacity: 0; }}
.article-drafts-modal {background: #fff;border-radius: var(--radius-lg);padding: 24px;width: 100%;max-width: 420px;max-height: 80vh;overflow-y: auto;box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);animation: drafts-modal-in 0.3s cubic-bezier(0.4, 0, 0.2, 1)}
.article-drafts-overlay--closing .article-drafts-modal {animation: drafts-modal-out 0.2s ease forwards}
@keyframes drafts-modal-in {from { opacity: 0; transform: translateY(20px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }}
@keyframes drafts-modal-out {from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(10px) scale(0.97); }}
.article-drafts-heading {display: flex;align-items: center;gap: 8px;font-size: 16px;font-weight: 700;color: var(--color-text-primary);margin-bottom: 4px}
.article-drafts-heading svg {color: var(--color-aqua-500)}
.article-drafts-description {font-size: 13px;color: var(--color-text-muted);margin-bottom: 16px}
.article-drafts-new-btn {display: block;width: 100%;margin-top: 12px;padding: 12px;background: none;border: 1px solid var(--color-border);border-radius: var(--radius-md);font-size: 14px;font-weight: 600;color: var(--color-text-secondary);cursor: pointer;transition: background 0.2s, border-color 0.2s}
.article-drafts-new-btn:hover {background: var(--color-bg-secondary);border-color: var(--color-aqua-500)}
.article-drafts-list {display: flex;flex-direction: column;gap: 6px}
.article-draft-item {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 12px 14px;background: var(--color-aqua-50);border: 1px solid var(--color-aqua-200);border-radius: var(--radius-md);text-decoration: none;color: inherit;transition: border-color 0.2s, box-shadow 0.2s}
.article-draft-item:hover {border-color: var(--color-aqua-500);box-shadow: 0 2px 8px rgba(6, 182, 212, 0.1)}
.article-draft-info {display: flex;flex-direction: column;gap: 2px;min-width: 0}
.article-draft-title {font-size: 14px;font-weight: 600;color: var(--color-text-primary);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.article-draft-date {font-size: 11px;color: var(--color-text-muted)}
.article-draft-arrow {flex-shrink: 0;color: var(--color-text-light)}
.article-cooldown {display: flex;flex-direction: column;align-items: center;text-align: center;padding: 40px 16px}
.article-cooldown-icon {color: var(--color-text-muted);margin-bottom: 16px}
.article-cooldown-title {font-size: 20px;font-weight: 800;color: var(--color-text-primary);margin-bottom: 12px}
.article-cooldown-message {font-size: 14px;color: var(--color-text-secondary);margin-bottom: 8px;line-height: 1.6}
.article-cooldown-date {font-size: 14px;color: var(--color-text-secondary);margin-bottom: 32px}
.article-cooldown-drafts {background: var(--color-bg-secondary, #f1f5f9);border: 1px solid var(--color-border-primary);border-radius: var(--radius-lg);padding: 20px;margin-bottom: 24px;width: 100%;max-width: 400px;text-align: left;box-sizing: border-box}
.article-cooldown-drafts-header {display: flex;align-items: center;gap: 8px;font-size: 15px;font-weight: 700;color: var(--color-text-primary);margin-bottom: 12px}
.article-cooldown-drafts-header svg {color: var(--color-text-muted);flex-shrink: 0}
.article-cooldown-drafts-list {list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;gap: 8px}
.article-cooldown-draft-link {display: block;padding: 10px 12px;background: #fff;border: 1px solid var(--color-border-primary);border-radius: var(--radius-md);font-size: 13px;color: var(--color-aqua-600, #0284c7);text-decoration: none;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: background 0.2s}
.article-cooldown-draft-link:hover {background: var(--color-aqua-50)}
.article-cooldown-plan {background: var(--color-aqua-50);border: 1px solid var(--color-aqua-200);border-radius: var(--radius-lg);padding: 20px;margin-bottom: 24px;width: 100%;max-width: 400px;text-align: left;box-sizing: border-box}
.article-cooldown-plan-header {display: flex;align-items: center;gap: 8px;font-size: 16px;font-weight: 700;color: var(--color-aqua-700, #0369a1);margin-bottom: 8px}
.article-cooldown-plan-header svg {color: var(--color-aqua-500);flex-shrink: 0}
.article-cooldown-plan-text {font-size: 13px;color: var(--color-text-secondary);line-height: 1.6;margin-bottom: 16px}
.article-cooldown-plan-btn {display: block;width: 100%;box-sizing: border-box;text-align: center;padding: 12px;background: var(--gradient-aqua);color: #fff;border: none;border-radius: var(--radius-md);font-size: 15px;font-weight: 700;text-decoration: none;transition: opacity 0.2s}
.article-cooldown-plan-btn:hover {opacity: 0.9}
.article-cooldown-back {font-size: 13px;color: var(--color-text-muted);text-decoration: none}
.article-cooldown-back:hover {color: var(--color-text-primary)}
.article-embed-modal-overlay {position: fixed;inset: 0;z-index: var(--z-index-modal);background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(4px);display: flex;align-items: flex-end;justify-content: center;padding: 0}
@media (min-width: 480px) {.article-embed-modal-overlay {align-items: center;padding: 20px}}
.article-embed-modal {background: #fff;border-radius: var(--radius-lg) var(--radius-lg) 0 0;padding: 20px 16px;width: 100%;max-width: 480px;max-height: 80vh;display: flex;flex-direction: column;box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.15);animation: embed-modal-in 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
@media (min-width: 480px) {.article-embed-modal {border-radius: var(--radius-lg);box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15)}}
@keyframes embed-modal-in {from { opacity: 0; transform: translateY(24px); }
to   { opacity: 1; transform: translateY(0); }}
.article-embed-modal-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px}
.article-embed-modal-title {font-size: 16px;font-weight: 700;color: var(--color-text-primary)}
.article-embed-modal-close {background: none;border: none;font-size: 24px;color: var(--color-text-muted);cursor: pointer;padding: 0 4px;line-height: 1}
.article-embed-modal-close:hover {color: var(--color-text-primary)}
.article-embed-modal-hint {font-size: 12px;color: var(--color-text-muted);margin-bottom: 12px}
.article-embed-modal-results {flex: 1;overflow-y: auto;min-height: 0;max-height: 50vh}
.article-embed-modal .article-link-search {margin-bottom: 12px}
.article-embed-card-item {position: relative;width: 100%;aspect-ratio: 16 / 4;border-radius: var(--radius-md);background-size: cover;background-position: center;cursor: pointer;overflow: hidden;transition: transform 0.15s, box-shadow 0.15s}
.article-embed-card-item + .article-embed-card-item {margin-top: 8px}
.article-embed-card-item:hover {transform: translateY(-1px);box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15)}
.article-embed-card-item:active {transform: scale(0.98)}
.article-embed-card-item-overlay {position: absolute;inset: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);display: flex;flex-direction: column;justify-content: flex-end;padding: 10px 12px}
.article-embed-card-item-name {font-size: 14px;font-weight: 700;color: #fff;text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.article-embed-card-item-detail {font-size: 11px;color: rgba(255, 255, 255, 0.85);text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5)}
.article-embed-modal-youtube-form {display: flex;gap: 8px}
.article-embed-modal-youtube-form .article-link-search {flex: 1;margin-bottom: 0}
.article-embed-modal-youtube-submit {padding: 10px 20px;background: var(--gradient-aqua);color: #fff;border: none;border-radius: var(--radius-sm);font-size: 14px;font-weight: 600;cursor: pointer;white-space: nowrap}
.article-embed-modal-youtube-submit:hover {opacity: 0.9}
.article-link-modal-form {display: flex;flex-direction: column;gap: 8px}
.article-link-modal-label {font-size: 12px;font-weight: 600;color: var(--color-text-secondary);margin-top: 4px}
.article-link-modal-error {font-size: 12px;color: #dc2626;margin: 0;padding: 4px 0}
.article-embed-modal-youtube-submit:disabled {opacity: 0.4;cursor: not-allowed}
.article-body a {color: var(--color-aqua-600, #0284c7);text-decoration: none;background: linear-gradient(transparent 60%, rgba(2, 132, 199, 0.1) 60%);padding: 0 2px;border-radius: 2px;transition: background 0.2s, color 0.2s}
.article-body a::after {content: "";display: inline-block;width: 0.75em;height: 0.75em;margin-left: 2px;vertical-align: baseline;background: currentColor;-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");-webkit-mask-size: contain;-webkit-mask-repeat: no-repeat;mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");mask-size: contain;mask-repeat: no-repeat;opacity: 0.6}
.article-body a:hover {color: var(--color-aqua-700, #0369a1);background: linear-gradient(transparent 40%, rgba(2, 132, 199, 0.15) 40%)}
.article-body a:hover::after {opacity: 1}
.article-editor-content a {color: var(--color-aqua-600, #0284c7);text-decoration: none;background: linear-gradient(transparent 60%, rgba(2, 132, 199, 0.1) 60%);padding: 0 2px;border-radius: 2px;pointer-events: none}
.article-nav-guard-overlay {position: fixed;inset: 0;z-index: var(--z-index-modal);background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(4px);display: flex;align-items: center;justify-content: center;padding: 16px;animation: drafts-overlay-in 0.25s ease}
.article-nav-guard-modal {background: #fff;border-radius: var(--radius-lg);padding: 24px;width: 100%;max-width: 360px;box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);animation: drafts-modal-in 0.3s cubic-bezier(0.4, 0, 0.2, 1)}
.article-nav-guard-title {font-size: 16px;font-weight: 700;color: var(--color-text-primary);margin-bottom: 4px}
.article-nav-guard-message {font-size: 13px;color: var(--color-text-muted);margin-bottom: 20px}
.article-nav-guard-actions {display: flex;flex-direction: column;gap: 8px}
.article-nav-guard-btn {width: 100%;padding: 12px;border-radius: var(--radius-md);font-size: 14px;font-weight: 600;cursor: pointer;transition: opacity 0.2s, background 0.2s}
.article-nav-guard-btn--save {background: var(--gradient-aqua);color: #fff;border: none;box-shadow: 0 2px 8px rgba(6, 182, 212, 0.25)}
.article-nav-guard-btn--save:hover {opacity: 0.9}
.article-nav-guard-btn--discard {background: none;color: var(--color-danger);border: 1px solid var(--color-danger)}
.article-nav-guard-btn--discard:hover {background: #fef2f2}
.article-nav-guard-btn--cancel {background: none;color: var(--color-text-secondary);border: 1px solid var(--color-border)}
.article-nav-guard-btn--cancel:hover {background: var(--color-bg-secondary)}
.article-form {display: flex;flex-direction: column;gap: 20px}
.article-form-errors {background: #fef2f2;border: 1px solid #fecaca;border-radius: var(--radius-sm);padding: 14px 16px;font-size: 13px;color: var(--color-danger)}
.article-form-errors ul {margin-top: 8px;padding-left: 20px}
.article-form-cover {position: relative}
.article-form-file-input {display: none}
.article-form-cover-card {display: block;width: 100%;aspect-ratio: 16 / 9;border: 2px solid var(--color-aqua-200);border-radius: var(--radius-lg);overflow: hidden;cursor: pointer;position: relative;background: var(--color-aqua-50);transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s}
.article-form-cover-card:hover {border-color: var(--color-aqua-500);box-shadow: 0 8px 24px rgba(6, 182, 212, 0.12);transform: translateY(-2px)}
.article-form-cover-img {width: 100%;height: 100%;object-fit: cover}
.article-form-cover-placeholder {position: absolute;inset: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 12px}
.article-form-cover-placeholder svg {color: var(--color-aqua-500);opacity: 0.4;transition: opacity 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}
.article-form-cover-card:hover .article-form-cover-placeholder svg {opacity: 0.7;transform: scale(1.08)}
.article-form-cover-placeholder span {font-size: 14px;color: var(--color-text-muted);font-weight: 600}
.icon-camera-sm {width: 16px;height: 16px;vertical-align: -2px}
.icon-map-pin {width: 14px;height: 14px;vertical-align: -2px}
.article-form-field {width: 100%}
.article-form-title-input {width: 100%;max-width: 100%;border: none;border-bottom: 2px solid var(--color-border-light);font-size: 22px;font-weight: 800;padding: 8px 0;outline: none;color: var(--color-text-primary);box-sizing: border-box;transition: border-color 0.2s}
.article-form-title-input:focus {border-bottom-color: var(--color-aqua-500)}
.article-form-title-input::placeholder {color: var(--color-text-light)}
.article-form-body-input {width: 100%;max-width: 100%;min-height: 300px;border: none;font-size: 15px;line-height: 1.9;resize: vertical;outline: none;color: var(--color-text-primary);font-family: var(--font-family-base);box-sizing: border-box}
.article-form-body-input::placeholder {color: var(--color-text-light)}
.article-form-section {border-top: 2px solid var(--color-aqua-200);padding-top: 20px;margin-top: 4px}
.article-form-section-title {font-size: 14px;font-weight: 700;margin-bottom: 12px;padding-left: 10px;border-left: 3px solid var(--color-aqua-500);color: var(--color-text-primary)}
.article-link-panel {background: var(--color-aqua-50);border: 1px solid var(--color-aqua-200);border-radius: var(--radius-md);padding: 12px}
.article-link-search {width: 100%;max-width: 100%;padding: 10px 14px;border: 1px solid var(--color-border);border-radius: var(--radius-sm);font-size: 13px;outline: none;background: #fff;box-sizing: border-box;margin-bottom: 8px}
.article-link-search:focus {border-color: var(--color-aqua-500);box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1)}
.article-link-results {display: flex;flex-direction: column;gap: 6px;margin-bottom: 8px}
.article-link-item {display: flex;align-items: center;gap: 8px;padding: 8px 12px;background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-sm);font-size: 13px}
.article-link-item.selected {border-color: var(--color-aqua-500);background: var(--color-aqua-50)}
.article-link-item-name {font-weight: 600;color: var(--color-text-primary)}
.article-link-item-detail {font-size: 11px;color: var(--color-text-muted);margin-left: auto}
.article-link-remove {background: none;border: none;color: var(--color-text-muted);font-size: 18px;cursor: pointer;padding: 0 4px;line-height: 1}
.article-link-remove:hover {color: var(--color-danger)}
.article-link-search-results {display: flex;flex-direction: column;gap: 4px}
.article-link-search-item {display: flex;align-items: center;gap: 8px;padding: 8px 12px;background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-sm);font-size: 13px;cursor: pointer;transition: background 0.15s}
.article-link-search-item:hover {background: var(--color-bg-secondary)}
.article-link-search-item-thumb {width: 36px;height: 36px;border-radius: 6px;object-fit: cover;flex-shrink: 0}
.article-link-search-item-info {flex: 1;min-width: 0}
.article-link-search-item-name {font-weight: 600;font-size: 13px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.article-link-search-item-detail {font-size: 11px;color: var(--color-text-muted)}
.article-link-item-thumb {width: 36px;height: 36px;border-radius: 6px;flex-shrink: 0}
.article-form-hint {font-size: 12px;color: var(--color-text-muted);margin-bottom: 10px}
.article-form-image-upload {display: block;cursor: pointer}
.article-form-image-upload-btn {display: inline-flex;align-items: center;gap: 6px;padding: 10px 18px;background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-sm);font-size: 13px;font-weight: 600;color: var(--color-text-secondary);transition: background 0.15s, border-color 0.15s}
.article-form-image-upload-btn:hover {background: var(--color-aqua-50);border-color: var(--color-aqua-500)}
.article-embed-report,
.article-embed-cuisine,
.article-embed-image {position: relative;margin: 28px 0;border-radius: var(--radius-md);overflow: hidden}
.article-embed-image .article-image {width: 100%;max-width: 100%;height: auto;border-radius: var(--radius-md);border: 1px solid rgba(0, 0, 0, 0.08)}
.article-embed-image .article-image-caption {font-size: 12px;color: var(--color-text-muted);text-align: center;margin-top: 8px}
.article-form-settings {display: flex;flex-direction: column;gap: 0}
.article-form-setting-row {display: flex;align-items: center;justify-content: space-between;padding: 12px 0;border-bottom: 1px solid var(--color-border-light);cursor: pointer}
.article-form-setting-row:last-child {border-bottom: none}
.article-form-setting-label {font-size: 13px;color: var(--color-text-secondary)}
.article-form-toggle {width: 20px;height: 20px;accent-color: var(--color-aqua-600)}
.article-autosave-indicator {font-size: 12px;color: var(--color-text-muted, #9ca3af);text-align: right;padding: 4px 0;min-height: 22px;opacity: 0;transition: opacity 0.3s}
.article-autosave-indicator.is-visible {opacity: 1}
.article-form-actions {display: flex;gap: 12px;padding-top: 24px;border-top: 2px solid var(--color-aqua-200)}
.article-form-draft-btn {flex: 1;padding: 14px;background: #fff;color: var(--color-text-secondary);border: 1px solid var(--color-aqua-200);border-radius: var(--radius-md);font-size: 15px;font-weight: 600;cursor: pointer;transition: background 0.2s, border-color 0.2s}
.article-form-draft-btn:hover {background: var(--color-aqua-50);border-color: var(--color-aqua-500)}
.article-form-publish-btn {flex: 2;padding: 14px;background: var(--gradient-aqua);color: #fff;border: none;border-radius: var(--radius-md);font-size: 15px;font-weight: 700;cursor: pointer;transition: opacity 0.2s, box-shadow 0.2s;box-shadow: 0 2px 8px rgba(6, 182, 212, 0.25)}
.article-form-publish-btn:hover {opacity: 0.9;box-shadow: 0 4px 16px rgba(6, 182, 212, 0.35)}
.article-form-select {width: 100%;max-width: 100%;padding: 10px 14px;border: 1px solid var(--color-border);border-radius: var(--radius-sm);font-size: 14px;color: var(--color-text-primary);background: #fff;box-sizing: border-box;outline: none;appearance: auto}
.article-form-select:focus {border-color: var(--color-aqua-500);box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1)}
.article-genre-selector {display: grid;grid-template-columns: 1fr 1fr;gap: 8px}
.article-genre-option {display: flex;align-items: flex-start;gap: 10px;padding: 12px;border: 1.5px solid var(--color-border-primary);border-radius: var(--radius-md);cursor: pointer;transition: border-color 0.15s, background 0.15s}
.article-genre-option:hover {border-color: var(--color-aqua-300, #67e8f9);background: var(--color-aqua-50, #ecfeff)}
.article-genre-option:has(.article-genre-radio:checked) {border-color: var(--color-aqua-500);background: var(--color-aqua-50, #ecfeff)}
.article-genre-radio {margin-top: 2px;flex-shrink: 0;accent-color: var(--color-aqua-500)}
.article-genre-option-body {display: flex;flex-direction: column;gap: 2px;min-width: 0}
.article-genre-option-label {font-size: 14px;font-weight: 700;color: var(--color-text-primary);line-height: 1.4}
.article-genre-option-desc {font-size: 11px;color: var(--color-text-muted);line-height: 1.5}
@media (max-width: 480px) {.article-genre-selector {grid-template-columns: 1fr}}
.article-form-map-container {position: relative;width: 100%;aspect-ratio: 2 / 1;border-radius: var(--radius-md);overflow: hidden;border: 2px solid var(--color-aqua-200);margin-bottom: 12px;background: var(--color-aqua-50)}
.article-form-map {width: 100%;height: 100%}
.article-form-location-btn {display: flex;align-items: center;justify-content: center;gap: 8px;width: 100%;padding: 12px;background: var(--gradient-aqua);color: #fff;border: none;border-radius: var(--radius-md);font-size: 14px;font-weight: 600;cursor: pointer;transition: opacity 0.2s, box-shadow 0.2s;box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2)}
.article-form-location-btn:hover {opacity: 0.9;box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3)}
@media (max-width: 480px) {.article-show-title {font-size: 20px;line-height: 1.6}
.article-views-counter {bottom: 8px;right: 8px;padding: 6px 10px;font-size: 11px}
.article-views-tooltip {width: 240px;right: -4px}
.article-views-tooltip-item {font-size: 11px;gap: 8px}
.article-header {padding: 20px 16px 16px}
.article-body {padding: 20px 16px;font-size: 15px;line-height: 1.95}
.article-body p {margin-bottom: 20px}
.article-linked-section {padding: 20px 16px}
.article-form-container {padding: 12px 16px 80px}
.article-form-title-input {font-size: 19px}
.article-form-cover-upload {height: 120px}
.article-form-map-container {aspect-ratio: 4 / 3}
.article-form-actions {flex-direction: column}
.article-form-draft-btn,
.article-form-publish-btn {width: 100%}
.article-link-panel {padding: 8px}
.articles-header {flex-direction: column;align-items: flex-start;gap: 8px}
.articles-tabs {overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;overscroll-behavior-y: none;scrollbar-width: none;flex-wrap: nowrap}
.articles-tabs::-webkit-scrollbar {display: none}
.articles-tab {white-space: nowrap;flex-shrink: 0}
.articles-title {font-size: 17px}
.article-card-cover {height: 140px}}
.article-editor-toolbar {display: flex;align-items: center;gap: 2px;padding: 6px 8px;background: #1e293b;border-radius: 10px 10px 0 0;z-index: 10;overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none}
.article-editor-toolbar::-webkit-scrollbar {display: none}
.article-editor-toolbar-btn {display: flex;align-items: center;justify-content: center;min-width: 32px;width: 32px;height: 28px;flex-shrink: 0;background: transparent;border: none;border-radius: 6px;color: #cbd5e1;font-size: 13px;font-weight: 700;cursor: pointer;transition: background 0.15s, color 0.15s;font-family: inherit}
.article-editor-toolbar-btn:hover {background: #334155;color: #fff}
.article-editor-toolbar-btn:active {background: var(--color-primary);color: #fff}
.article-editor-toolbar-btn.is-active {background: var(--color-aqua-600, #0284c7);color: #fff}
.article-editor-toolbar-btn.is-disabled {opacity: 0.3;cursor: not-allowed}
.article-editor-toolbar-sep {flex-shrink: 0;width: 1px;height: 18px;background: #475569;margin: 0 4px}
.article-editor-content {min-height: 300px;max-height: 60vh;overflow-y: auto;padding: 24px;border: 1px solid #e5e7eb;border-top: none;border-radius: 0 0 8px 8px;background: #fff;font-size: 1rem;line-height: 1.8;outline: none;overflow-wrap: anywhere;word-break: break-word}
.article-editor-content:focus {border-color: var(--color-aqua-400);box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1)}
.article-editor-content.is-empty::before {content: attr(data-placeholder);color: #9ca3af;pointer-events: none;display: block}
.article-body h2,
.article-body h2.article-body-h2 {font-size: 20px;font-weight: 800;margin: 36px 0 16px;padding-bottom: 8px;border-bottom: 2px solid var(--color-aqua-200);color: var(--color-text-primary)}
.article-body h3,
.article-body h3.article-body-h3 {font-size: 17px;font-weight: 700;line-height: 1.5;margin: 28px 0 12px;padding: 2px 0 2px 12px;border-left: 3px solid var(--color-aqua-500);color: var(--color-text-primary)}
.article-body blockquote,
.article-body blockquote.article-body-blockquote {margin: 20px 0;padding: 16px 20px;background: var(--color-bg-muted);border-left: 4px solid var(--color-aqua-500);border-radius: 0 var(--radius-sm) var(--radius-sm) 0;color: var(--color-text-secondary);font-size: 15px;line-height: 1.8}
.article-body ul,
.article-body ol,
.article-body ul.article-body-list,
.article-body ol.article-body-list {margin: 16px 0;padding-left: 24px}
.article-body li,
.article-body .article-body-list li {margin-bottom: 8px;line-height: 1.8}
.article-body hr,
.article-body hr.article-body-hr {border: none;height: 1px;background: var(--color-border);margin: 32px 0}
.article-editor-hr-wrapper {position: relative;margin: 16px 0}
.article-editor-hr-wrapper:hover .article-embed-remove {opacity: 1}
.article-editor-hr-wrapper .article-embed-remove {opacity: 0;transition: opacity 0.15s}
.article-body-table {width: 100%;border-collapse: collapse;margin: 20px 0;font-size: 14px;line-height: 1.6;overflow-x: auto}
.article-body-table th,
.article-body-table td {border: 1px solid #e5e7eb;padding: 10px 14px;text-align: left;min-width: 60px}
.article-body-table th {background: #f3f4f6;font-weight: 700;color: var(--color-text-primary)}
.article-body-table tbody tr:nth-child(even) {background: #f9fafb}
.article-body-table tbody tr:hover {background: var(--color-aqua-50, #f0f9ff)}
.article-editor-table-wrapper {margin: 16px 0;overflow-x: auto;max-width: 100%}
.article-editor-table-wrapper .article-body-table th,
.article-editor-table-wrapper .article-body-table td {outline: none}
.article-editor-table-wrapper .article-body-table th:focus,
.article-editor-table-wrapper .article-body-table td:focus {box-shadow: inset 0 0 0 2px var(--color-aqua-400)}
.article-editor-table-controls {display: none;flex-wrap: wrap;gap: 6px;margin-top: 8px;padding: 8px 0}
.article-editor-table-wrapper.is-focused .article-editor-table-controls {display: flex}
.article-editor-table-ctrl-btn {padding: 4px 10px;font-size: 12px;font-weight: 500;border: 1px solid #e5e7eb;border-radius: 6px;background: #fff;color: var(--color-text-secondary);cursor: pointer;transition: background 0.15s, border-color 0.15s}
.article-editor-table-ctrl-btn:hover {background: var(--color-aqua-50);border-color: var(--color-aqua-400)}
.article-editor-table-ctrl-btn--danger {color: #ef4444}
.article-editor-table-ctrl-btn--danger:hover {background: #fef2f2;border-color: #fca5a5}
.article-body strong {font-weight: 700;color: #111827}
.article-body em {font-style: italic}
.article-embed-youtube {position: relative;width: 100%;padding-bottom: 56.25%;margin: 28px 0;border-radius: var(--radius-md);overflow: hidden;background: #000}
.article-embed-youtube iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: none}
.article-editor-embed-card {display: flex;align-items: center;gap: 12px;padding: 10px 14px;margin: 12px 0;border: 1px solid #e5e7eb;border-radius: 8px;background: #f9fafb;position: relative;user-select: none;cursor: grab}
[data-embed-type].is-dragging {opacity: 0.4;cursor: grabbing}
[data-embed-type].embed-drop-before {border-top: 3px solid var(--color-primary, #0ea5e9);margin-top: 9px}
[data-embed-type].embed-drop-after {border-bottom: 3px solid var(--color-primary, #0ea5e9);margin-bottom: 9px}
.article-embed-image[draggable="true"] {cursor: grab}
.article-editor-embed-report {border-left: 3px solid var(--color-aqua-500)}
.article-editor-embed-cuisine {border-left: 3px solid #f59e0b}
.article-editor-embed-youtube {border-left: 3px solid #ef4444}
.article-editor-embed-image {border-left: 3px solid #8b5cf6}
.article-editor-embed-thumb {width: 48px;height: 48px;border-radius: 6px;background: linear-gradient(135deg, #e5e7eb, #d1d5db);flex-shrink: 0}
.article-editor-embed-label {flex: 1;font-size: 14px;font-weight: 500;color: var(--color-text-primary);min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.article-embed-remove {position: absolute;top: 4px;right: 4px;width: 24px;height: 24px;border: none;background: rgba(0, 0, 0, 0.06);border-radius: 50%;font-size: 16px;line-height: 1;color: #6b7280;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: background 0.15s, color 0.15s}
.article-embed-remove:hover {background: rgba(239, 68, 68, 0.1);color: #ef4444}
.article-embed-image .article-embed-remove,
.article-embed-youtube .article-embed-remove {background: rgba(0, 0, 0, 0.5);color: #fff;top: 8px;right: 8px;width: 28px;height: 28px;font-size: 18px;z-index: 2}
.article-embed-image .article-embed-remove:hover,
.article-embed-youtube .article-embed-remove:hover {background: rgba(239, 68, 68, 0.8);color: #fff}
.article-editor-youtube-thumb {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover}
.article-editor-youtube-play {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 64px;height: 64px;background: rgba(0, 0, 0, 0.6);border-radius: 50%;display: flex;align-items: center;justify-content: center;pointer-events: none}
.article-editor-youtube-play svg {margin-left: 4px}
.article-location-section {margin-top: 32px;padding-top: 24px;border-top: 1px solid var(--color-border, #e2e8f0)}
.article-location-title {display: flex;align-items: center;gap: 6px;font-size: 16px;font-weight: 600;margin: 0 0 12px;color: var(--color-text-primary)}
.article-location-map {width: 100%;aspect-ratio: 16 / 10;border-radius: var(--radius-md, 8px);overflow: hidden}
.article-body img.article-image {cursor: zoom-in}
.article-lightbox-overlay {position: fixed;inset: 0;z-index: 9999;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;transition: opacity 0.25s ease, visibility 0.25s ease}
.article-lightbox-overlay.active {opacity: 1;visibility: visible}
.article-lightbox-backdrop {position: absolute;inset: 0;background: rgba(0, 0, 0, 0.92)}
.article-lightbox-img {position: relative;z-index: 1;max-width: 90vw;max-height: 90vh;object-fit: contain;border-radius: 4px;user-select: none;-webkit-user-select: none}
.article-lightbox-close {position: absolute;top: 16px;right: 16px;z-index: 2;background: rgba(0, 0, 0, 0.5);border: none;border-radius: 50%;width: 44px;height: 44px;display: flex;align-items: center;justify-content: center;color: #fff;cursor: pointer;transition: background 0.2s}
.article-lightbox-close:hover {background: rgba(0, 0, 0, 0.8)}
.article-lightbox-prev,
.article-lightbox-next {position: absolute;top: 50%;transform: translateY(-50%);z-index: 2;background: rgba(0, 0, 0, 0.4);border: none;border-radius: 50%;width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;color: #fff;cursor: pointer;transition: background 0.2s}
.article-lightbox-prev { left: 12px; }
.article-lightbox-next { right: 12px; }
.article-lightbox-prev:hover,
.article-lightbox-next:hover {background: rgba(0, 0, 0, 0.7)}
.article-lightbox-counter {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);z-index: 2;color: rgba(255, 255, 255, 0.85);font-size: 14px;background: rgba(0, 0, 0, 0.5);padding: 4px 14px;border-radius: 20px}
@media (max-width: 600px) {.article-lightbox-img {max-width: 100vw;max-height: 85vh;border-radius: 0}
.article-lightbox-prev,
.article-lightbox-next {width: 36px;height: 36px}
.article-lightbox-prev { left: 6px; }
.article-lightbox-next { right: 6px; }
.article-lightbox-prev svg,
.article-lightbox-next svg {width: 24px;height: 24px}
.article-lightbox-close {top: 10px;right: 10px;width: 38px;height: 38px}
.article-lightbox-close svg {width: 22px;height: 22px}}
.article-author-card {margin: 0 24px;padding: 20px;background: var(--color-bg-secondary, #f8fafc);border-radius: 12px;border: 1px solid var(--color-border, #e5e7eb)}
.article-author-card-header {display: flex;align-items: center;gap: 14px}
.article-author-card-avatar {width: 56px;height: 56px;border-radius: 50%;object-fit: cover;flex-shrink: 0}
.article-author-card-avatar-placeholder {width: 56px;height: 56px;border-radius: 50%;background: #f0f0f0;display: flex;align-items: center;justify-content: center;flex-shrink: 0;text-decoration: none}
.article-author-card-admin-icon {width: 100%;height: 100%;border-radius: 50%;object-fit: cover}
.article-author-card-beginner-icon {width: 32px;height: 32px}
.article-author-card-info {flex: 1;min-width: 0}
.article-author-card-name {font-size: 16px;font-weight: 700;color: var(--color-text-primary, #111827);text-decoration: none;display: block;margin-bottom: 4px}
.article-author-card-name:hover {color: var(--color-primary)}
.article-author-card-stats {display: flex;gap: 12px;font-size: 12px;color: var(--color-text-muted, #566070)}
.article-author-card-bio {margin-top: 12px;font-size: 13px;line-height: 1.6;color: var(--color-text-secondary, #4b5563)}
.article-author-card-link {display: block;margin-top: 14px;text-align: center;padding: 8px 16px;font-size: 13px;font-weight: 600;color: var(--color-primary);border: 1px solid var(--color-primary);border-radius: 8px;text-decoration: none;transition: background 0.2s, color 0.2s}
.article-author-card-link:hover {background: var(--color-primary);color: #fff}
.article-body h2,
.article-body h2.article-body-h2 {font-size: 22px;margin: 40px 0 18px;padding-bottom: 10px}
.article-body h3,
.article-body h3.article-body-h3 {font-size: 18px;margin: 32px 0 14px}
.article-body p {margin-bottom: 28px}
.article-toc {margin: 0 24px 4px;border: 1px solid var(--color-border, #e5e7eb);border-radius: 10px;background: #fff;overflow: hidden}
.article-toc-toggle {display: flex;align-items: center;gap: 8px;width: 100%;padding: 12px 16px;background: var(--color-bg-secondary, #f8fafc);border: none;font-size: 14px;font-weight: 600;color: var(--color-text-secondary, #4b5563);cursor: pointer;transition: background 0.15s}
.article-toc-toggle:hover {background: var(--color-bg-muted, #f1f5f9)}
.article-toc-toggle svg {flex-shrink: 0;color: var(--color-text-muted, #9ca3af)}
.article-toc-chevron {margin-left: auto;transition: transform 0.2s}
.article-toc.is-collapsed .article-toc-chevron {transform: rotate(-90deg)}
.article-toc-list {padding: 8px 16px 12px;display: flex;flex-direction: column;gap: 2px}
.article-toc-list.is-collapsed {display: none}
.article-toc-item {display: block;padding: 6px 10px;font-size: 13px;line-height: 1.5;color: var(--color-text-secondary, #4b5563);text-decoration: none;border-left: 2px solid transparent;border-radius: 0 4px 4px 0;transition: color 0.15s, border-color 0.15s, background 0.15s}
.article-toc-item:hover {color: var(--color-primary);background: var(--color-aqua-50, #f0f9ff)}
.article-toc-item.is-active {color: var(--color-primary);border-left-color: var(--color-primary);font-weight: 600}
.article-toc-item.toc-item--h3 {padding-left: 24px;font-size: 12px}
.article-show-tag {display: inline-flex;align-items: center;padding: 3px 12px}
.article-share-button {min-width: 44px;min-height: 44px}
.article-meta-avatar,
.article-meta-avatar-placeholder {min-width: 44px;min-height: 44px}
.article-related-section {padding: 24px;border-top: 1px solid var(--color-border, #e5e7eb)}
.article-related-title {display: flex;align-items: center;gap: 8px;font-size: 17px;font-weight: 700;color: var(--color-text-primary, #111827);margin-bottom: 16px}
.article-related-title svg {color: var(--color-primary);flex-shrink: 0}
.article-related-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 12px}
@media (max-width: 480px) {.article-cover-overlay {padding: 16px}
.article-cover-title {font-size: 20px;line-height: 1.5}
.article-cover-meta {font-size: 12px}
.article-author-card {margin: 0 16px;padding: 16px}
.article-author-card-avatar {width: 48px;height: 48px}
.article-author-card-avatar-placeholder {width: 48px;height: 48px}
.article-toc {margin: 0 16px 4px}
.article-related-section {padding: 20px 16px}
.article-related-grid {grid-template-columns: 1fr 1fr;gap: 10px}
.article-body h2,
.article-body h2.article-body-h2 {font-size: 19px;margin: 32px 0 14px}
.article-body h3,
.article-body h3.article-body-h3 {font-size: 16px;margin: 24px 0 10px}}