.personal-timeline { margin-top: 24px; padding: 20px; border: 1px solid var(--brand-d5e3dc, #d5e3dc); border-radius: 16px; min-width: 0; }
.personal-timeline h3 { margin: 0 0 8px; }
.personal-timeline p,.personal-timeline small { color: var(--brand-52675d, #52675d); }
.personal-timeline-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.personal-timeline-filters button { padding: 10px 14px; border: 1px solid var(--brand-aabeb2, #aabeb2); border-radius: 9px; background: white; color: var(--brand-174d38, #174d38); }
.personal-timeline-filters [aria-pressed=true] { background: var(--brand-07583d, #07583d); color: white; }
.personal-timeline-detail { height: 88px; overflow: auto; white-space: pre-line; padding: 10px; background: var(--brand-f1f6f3, #f1f6f3); border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.personal-timeline-band { position: relative; height: 12px; border-radius: 4px; margin: 0 14px 8px; }
.personal-timeline-band::before { content: ''; position: absolute; inset: 0 3%; background: repeating-linear-gradient(135deg,var(--brand-eff3f0, #eff3f0) 0 5px,var(--brand-c4d0c9, #c4d0c9) 5px 6px); }
.personal-timeline-band span { position: absolute; height: 100%; }
.personal-band-active { background: var(--brand-12845a, #12845a); }.personal-band-bench { background: var(--brand-cbd3ce, #cbd3ce); }
.personal-timeline-panel { position: relative; height: 100px; margin: 8px 14px; touch-action: pan-y; }
.personal-timeline-panel[hidden] { display: none; }
.personal-timeline-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--brand-e0e6e2, #e0e6e2); font-size: 11px; padding-left: 3px; }
.personal-timeline-half { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--brand-637b6e, #637b6e); font-size: 11px; }
.personal-mark { position: absolute; top: 30px; transform: translateX(-50%); width: 30px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: #fff; font-size: 18px; font-weight: 700; }
.personal-mark:focus-visible { outline: 2px solid var(--brand-164c37, #164c37); outline-offset: 2px; }
.personal-mark-goal { color: var(--brand-087c4c, #087c4c); }.personal-mark-save { color: #216aa1; }.personal-mark-miss { color: #a56408; }.personal-mark-technical { color: #9d3473; }.personal-mark-sub,.personal-mark-group { color: var(--brand-35473d, #35473d); }
.personal-timeline-empty { position: absolute; top: 40px; font-size: 13px; }
@media(max-width: 600px) { .personal-timeline { padding: 12px; }.personal-timeline-panel,.personal-timeline-band { margin-inline: 6px; }.personal-mark { width: 22px; font-size: 15px; } }