body { background: radial-gradient(circle at 50% -20%, #dbeafe, #f8fafc 45%, #eef2ff); }
.spinner { width: 22px; height: 22px; border: 3px solid #c7d2fe; border-top-color: #4f46e5; border-radius: 999px; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.clash-item { border-radius: .75rem; background: rgba(255,255,255,.07); padding: .85rem 1rem; }
.timestamp-link { border-radius: 999px; background: rgba(129,140,248,.2); padding: .2rem .55rem; color: #c7d2fe; font-size: .8rem; white-space: nowrap; transition: background .15s; }
.timestamp-link:hover { background: rgba(129,140,248,.4); color: white; }
.clash-context { margin-top: .45rem; color: #cbd5e1; font-size: .9rem; line-height: 1.55; }
.loading-track { height: .65rem; overflow: hidden; border-radius: 999px; background: #e0e7ff; }
.loading-bar { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, #4f46e5, #a855f7); transition: width .5s ease; }
.composition-chart { border-radius: 1rem; background: rgba(255,255,255,.07); padding: 1.15rem; }
.composition-title { margin-bottom: .75rem; color: #c7d2fe; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.composition-meter { display: flex; height: 1rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.composition-segment { min-width: 2px; transition: width .7s ease; }
.composition-segment.propositions { background: #34d399; }
.composition-segment.critique { background: #fbbf24; }
.composition-segment.clash { background: #f43f5e; }
.composition-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .85rem; }
.composition-item { color: #cbd5e1; font-size: .85rem; }
.composition-dot { display: inline-block; width: .65rem; height: .65rem; margin-right: .35rem; border-radius: 2px; }
.composition-dot.propositions { background: #34d399; }
.composition-dot.critique { background: #fbbf24; }
.composition-dot.clash { background: #f43f5e; }
@media (max-width: 560px) { .composition-legend { grid-template-columns: 1fr; gap: .35rem; } }