.track-author-card,
.track-summary-card,
.track-inspector-card,
.track-timeline-card { padding: 12px 14px; border: 1px solid #dbe2ec; border-radius: 8px; background: #fff; }
.track-author-card { border-color: #ef9dc7; background: #fff8fc; }
.track-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.track-section-heading h3, .track-section-heading p { margin: 0; }
.track-section-heading h3 { color: #202635; font-size: 13px; font-weight: 700; line-height: 1.3; }
.track-section-heading p { margin-top: 3px; color: #7c8798; font-size: 9px; line-height: 1.45; }
.track-section-heading > span, .track-section-heading div > span { flex: 0 0 auto; color: #75839a; font-size: 9px; font-weight: 700; }

.track-current-author { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #f1bfda; border-radius: 7px; background: #fff; }
.track-current-author > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #7915a8, #ec168c); color: #fff; font-size: 11px; font-weight: 700; }
.track-current-author div { display: grid; min-width: 0; gap: 2px; }.track-current-author strong, .track-current-author small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.track-current-author strong { font-size: 10px; }.track-current-author small { color: #75849a; font-size: 8px; }
.track-author-card .demo-field-label { margin-top: 10px; color: #66758b; font-size: 9px; }.track-author-card .form-select { margin-top: 4px; font-size: 10px; }
.track-author-actions, .track-review-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

.track-summary-visual { position: relative; height: 57px; overflow: hidden; border-radius: 7px; background: #f1f5fa; }
.track-summary-visual i { position: absolute; left: 15px; height: 3px; border-radius: 2px; background: #aab9cb; }
.track-summary-visual i:nth-child(1) { top: 14px; width: 69%; }.track-summary-visual i:nth-child(2) { top: 26px; width: 50%; }.track-summary-visual i:nth-child(3) { top: 38px; width: 62%; }
.track-summary-visual span { position: absolute; top: 8px; bottom: 8px; left: 42%; width: 5px; border-radius: 3px; background: #ec168c; box-shadow: 22px 15px 0 #7f28b7; }
.track-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: 9px; border: 1px solid #e0e6ef; border-radius: 6px; background: #e0e6ef; }
.track-summary-grid div { display: grid; justify-items: center; min-width: 0; gap: 2px; padding: 7px 3px; background: #f9fbfd; }.track-summary-grid span { color: #78869a; font-size: 7px; text-align: center; }.track-summary-grid strong { color: #172439; font-size: 12px; }
.track-summary-note { margin: 9px 0 0; color: #738198; font-size: 8px; line-height: 1.45; }

.track-inspector-card { min-height: 104px; }.track-inspector-card:not(.is-empty) { border-color: #ef9dc7; box-shadow: 0 10px 30px rgba(26, 40, 61, .08); }
.track-inspector-empty { display: flex; align-items: center; gap: 10px; min-height: 76px; }.track-inspector-empty div { display: grid; gap: 2px; }.track-inspector-empty strong { font-size: 11px; }.track-inspector-empty small { color: #77859a; font-size: 9px; line-height: 1.4; }
.track-empty-visual { position: relative; width: 47px; height: 34px; flex: 0 0 47px; border-radius: 6px; background: #eef4fb; }.track-empty-visual::before { position: absolute; top: 9px; right: 8px; left: 8px; height: 3px; background: #9eb0c5; box-shadow: 0 7px #ec168c, 0 14px #9eb0c5; content: ""; }
.track-section-heading--selected { align-items: center; }.track-section-heading--selected h3 { margin-top: 2px; font-size: 15px; }.track-section-heading--selected > span { padding: 4px 7px; border-radius: 999px; background: #fce6f2; color: #b00f68; }
.track-inspector-card blockquote { max-height: 62px; margin: 0 0 9px; padding: 8px 10px; overflow: auto; border-left: 3px solid #ec168c; border-radius: 0 5px 5px 0; background: #fff4fa; color: #3a4658; font-size: 9px; line-height: 1.45; }
.track-range { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 6px; padding: 8px 9px; border-radius: 6px; background: #f2f6fb; }
.track-range div { display: grid; justify-items: center; gap: 1px; }.track-range span { color: #7b899c; font-size: 7px; }.track-range strong { font-size: 10px; }.track-range i { height: 2px; background: #a8b8ca; }
.track-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: 9px; border: 1px solid #e0e6ef; border-radius: 6px; background: #e0e6ef; }
.track-detail-grid > div { display: grid; min-width: 0; gap: 2px; padding: 7px 9px; background: #f9fbfd; }.track-detail-grid span { color: #78869a; font-size: 8px; }.track-detail-grid strong { display: flex; align-items: center; min-width: 0; gap: 5px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.track-detail-grid strong span { overflow: hidden; color: #18263a; font-size: 9px; text-overflow: ellipsis; }
.track-detail-grid strong i { width: 10px; height: 10px; flex: 0 0 10px; border: 1px solid rgba(0,0,0,.12); border-radius: 2px; }
.track-review-actions .btn { padding-inline: 12px; }

.track-author-legend { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }.track-author-legend:empty { display: none; }
.track-author-legend span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 7px 4px 4px; border-radius: 999px; background: #eef3f8; color: #607188; font-size: 7px; }.track-author-legend i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #dce7f3; color: #4f6784; font-size: 6px; font-style: normal; font-weight: 700; }
.track-timeline { display: grid; gap: 6px; }.track-timeline > p { margin: 0; color: #7b889b; font-size: 9px; }
.track-timeline-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid #e1e7ef; border-radius: 6px; background: #f9fbfd; color: #18263a; text-align: left; }
.track-timeline-item:hover, .track-timeline-item.is-active { border-color: #ec168c; background: #fff4fa; }
.track-change-author { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #e6eef7; color: #506a89; font-size: 7px; font-weight: 700; }.track-timeline-item.is-deleted .track-change-author { background: #fbe5ec; color: #ae3e66; }
.track-change-copy { display: grid; min-width: 0; gap: 2px; }.track-change-copy strong, .track-change-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.track-change-copy strong { font-size: 9px; }.track-timeline-item.is-deleted .track-change-copy strong { text-decoration: line-through; }.track-change-copy small { color: #7a8799; font-size: 7px; }
.track-change-kind { padding: 4px 6px; border-radius: 999px; background: #e8f4fd; color: #2b6e9c; font-size: 7px; font-weight: 700; text-transform: uppercase; }.track-timeline-item.is-deleted .track-change-kind { background: #fde8ef; color: #ad3761; }

@media (max-width: 620px) {
    .track-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .track-detail-grid { grid-template-columns: 1fr; }
    .track-timeline-item { grid-template-columns: 28px minmax(0, 1fr); }.track-change-kind { grid-column: 2; justify-self: start; }
}