body {
		    background: #0f172a;
		    color: #e2e8f0;
		    user-select: none;
			-webkit-user-select: none; /* Safari */
			-ms-user-select: none;     /* IE */
		}

	    .timeline-line { background: linear-gradient(#64748b, #334155); }
	    .counter { font-variant-numeric: tabular-nums; }

		.reaction-bar {
		  margin-top: 1.25rem;
		  padding-top: 1rem;
		  border-top: 1px solid rgba(148, 163, 184, 0.18);
		}

		.reaction-title {
		  font-size: 0.8rem;
		  color: #94a3b8;
		  margin-bottom: 0.7rem;
		  letter-spacing: 0.03em;
		}

		.reaction-grid {
		  display: flex;
		  justify-content: space-between;
		  gap: 0.45rem;
		  flex-wrap: wrap;
		}

		.reaction-item {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  min-width: 48px;
		}

		.reaction-btn {
		  width: 42px;
		  height: 42px;
		  border-radius: 9999px;
		  border: 1px solid rgba(148, 163, 184, 0.18);
		  background: rgba(30, 41, 59, 0.72);
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  font-size: 1.25rem;
		  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
		  cursor: pointer;
		}

		.reaction-btn:hover {
		  transform: translateY(-1px) scale(1.05);
		  background: rgba(51, 65, 85, 0.92);
		  border-color: rgba(148, 163, 184, 0.35);
		}

		.reaction-btn.active {
		  background: rgba(59, 130, 246, 0.18);
		  border-color: rgba(96, 165, 250, 0.55);
		  box-shadow: 0 0 14px rgba(59, 130, 246, 0.18);
		}

		.reaction-btn:disabled {
		  opacity: 0.95;
		  cursor: default;
		}

		.reaction-count {
		  margin-top: 0.35rem;
		  font-size: 0.8rem;
		  color: #cbd5e1;
		  font-variant-numeric: tabular-nums;
		}

		.reaction-note {
		  margin-top: 0.7rem;
		  font-size: 0.75rem;
		  color: #64748b;
		}

		.reaction-message {
		  margin-top: 0.7rem;
		  font-size: 0.8rem;
		  color: #93c5fd;
		}

		@media (min-width: 768px) {
		  .reaction-grid {
		    justify-content: center;
		    gap: 1.1rem;
		  }
		}
		.legend-filter-btn {
		  display: inline-flex;
		  align-items: center;
		  gap: 0.4rem;
		  padding: 0.2rem 0.55rem;
		  border-radius: 9999px;
		  cursor: pointer;
		  transition: all 0.2s ease;
		  border: 1px solid transparent;
		}

		.legend-filter-btn:hover {
		  background: rgba(51, 65, 85, 0.65);
		}

		.legend-filter-btn.active {
		  background: rgba(59, 130, 246, 0.16);
		  border-color: rgba(96, 165, 250, 0.45);
		  color: #fff;
		}

		.timeline-item-hidden {
		  display: none !important;
		}

		.filter-toolbar {
		  display: flex;
		  justify-content: center;
		  margin-top: 0.9rem;
		}

		.filter-reset-btn {
		  font-size: 0.7rem;
		  padding: 0.25rem 0.7rem;
		}

		.filter-reset-btn:hover {
		  background: rgba(51, 65, 85, 0.95);
		  color: #fff;
		}

		.no-filter-result {
		  display: none;
		  max-width: 42rem;
		  margin: 2rem auto 2rem auto;
		  padding: 1rem 1.25rem;
		  border-radius: 1rem;
		  text-align: center;
		  color: #cbd5e1;
		  background: rgba(30, 41, 59, 0.75);
		  border: 1px solid rgba(148, 163, 184, 0.18);
		}

		.timeline-ad-hidden {
		  display: none !important;
		}

		.legend-action {
		  display: inline-flex;
		  align-items: center;
		  justify-content: center;
		  min-height: 38px;
		  padding: 0.45rem 0.9rem;
		  font-size: 0.8rem;
		  border-radius: 9999px;
		  color: #cbd5e1;
		  background: rgba(30, 41, 59, 0.6);
		  border: 1px solid rgba(148, 163, 184, 0.15);
		  transition: all 0.2s ease;
		  cursor: pointer;
		  white-space: nowrap;
		}

		.legend-action:hover {
		  background: rgba(51, 65, 85, 0.9);
		  color: #fff;
		  border-color: rgba(148, 163, 184, 0.35);
		}

		.legend-action-icon {
		  width: 38px;
		  min-width: 38px;
		  padding: 0;
		}

		.legend-action.twitter:hover {
		  background: rgba(0,0,0,0.8);
		  color: #fff;
		}

		.legend-action.facebook:hover {
		  background: rgba(24,119,242,0.2);
		  color: #1877F2;
		}

		.legend-action.linkedin:hover {
		  background: rgba(10,102,194,0.2);
		  color: #0A66C2;
		}

		.legend-action.copy:hover {
		  background: rgba(148,163,184,0.2);
		  color: #cbd5f5;
		}

		.legend-action.coffee {
		  background: rgba(255,221,0,0.2);
		  color: #ffdd00;
		}

		.legend-action.coffee:hover {
		  background: rgba(255,221,0,1.0);
		  color: #000000;
		}

		.legend-action.quiz {
		  background: rgba(139,92,246,0.2);
		  border-color: rgba(139,92,246,0.4);
		  color: #c4b5fd;
		}

		.legend-action.quiz:hover {
		  background: rgba(139,92,246,0.35);
		  color: #fff;
		}

		.legend-action.active {
		  background: rgba(59, 130, 246, 0.2);
		  border-color: rgba(96, 165, 250, 0.5);
		  color: #fff;
		}

		@media (max-width: 767px) {
		  .legend-action {
		    font-size: 0.75rem;
		    padding: 0.4rem 0.75rem;
		    min-height: 36px;
		  }

		  .legend-action-icon {
		    width: 36px;
		    min-width: 36px;
		  }

		}

		.toast-show {
		  opacity: 1 !important;
		  transform: scale(1) !important;
		}

	    @keyframes pulseUpdate {
	      0%   { opacity: 0; transform: translateY(-8px); }
	      100% { opacity: 1; transform: translateY(0); }
	    }

	    .update-banner {
	      animation: pulseUpdate 0.25s ease-out;
	    }

	    @keyframes pulseAlert {
	      0%, 100% {
	        box-shadow:
	          0 0 0 1px rgba(239, 68, 68, 0.35),
	          0 0 10px rgba(239, 68, 68, 0.35),
	          0 0 18px rgba(239, 68, 68, 0.20);
	      }
	      50% {
	        box-shadow:
	          0 0 0 1px rgba(239, 68, 68, 0.55),
	          0 0 16px rgba(239, 68, 68, 0.55),
	          0 0 28px rgba(239, 68, 68, 0.35);
	      }
	    }

	    .alert-pulse {
	      animation: pulseAlert 1.6s infinite ease-in-out;
	      border-radius: 9999px;
	    }

	    html.legend-collapsed #legendWrapper {
		  max-height: 0 !important;
		  overflow: hidden !important;
		}