.changelog-fab { position: fixed; bottom: 24px; right: 180px; z-index: 9998; display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: #2B3A59; color: white; border: none; border-radius: 999px; box-shadow: 0 4px 12px rgba(43, 58, 89, 0.4); transition: transform 0.2s; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.changelog-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(43, 58, 89, 0.5); }
.changelog-fab-icon { font-size: 18px; }
.changelog-fab-label { display: none; }
@media (min-width: 769px) { .changelog-fab-label { display: inline; }}
.changelog-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.changelog-modal[hidden] { display: none !important; }
.changelog-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); cursor: pointer; }
.changelog-modal-content { position: relative; background: white; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); width: 100%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; animation: slideUp 0.3s ease-out; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }}
.changelog-modal-header { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.changelog-modal-header h2 { margin: 0; font-size: 20px; color: #2B3A59; }
.changelog-modal-close { background: none; border: none; font-size: 28px; color: #999; cursor: pointer; padding: 0; width: 32px; height: 32px; }
.changelog-modal-close:hover { color: #333; }
.changelog-entries { flex: 1; overflow-y: auto; padding: 20px; }
.changelog-entry { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #eee; }
.changelog-entry:last-child { border-bottom: none; }
.changelog-date { font-weight: 600; color: #2B3A59; font-size: 13px; margin-bottom: 8px; text-transform: uppercase; }
.changelog-items { margin: 0; padding-left: 20px; list-style: disc; }
.changelog-items li { margin-bottom: 6px; color: #333; font-size: 14px; }
.changelog-category { display: inline-block; background: #f0f0f0; color: #333; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; margin-right: 8px; }
.changelog-category.feature { background: #d4edda; color: #155724; }
.changelog-category.fix { background: #f8d7da; color: #721c24; }
.changelog-category.refactor { background: #fff3cd; color: #856404; }
.changelog-category.docs { background: #d1ecf1; color: #0c5460; }
.changelog-category.perf { background: #cfe2ff; color: #084298; }
.changelog-category.test { background: #e7d4f5; color: #5a189a; }
.changelog-category.chore { background: #e0e0e0; color: #333; }
.changelog-modal-footer { padding: 16px 20px; border-top: 1px solid #eee; text-align: center; }
.changelog-link { color: #2B3A59; text-decoration: none; font-weight: 600; }
.changelog-link:hover { color: #5B7C99; text-decoration: underline; }
@media (max-width: 768px) { .changelog-fab { bottom: 90px; right: 24px; } .changelog-modal-content { width: 95%; max-height: 90vh; }}