:root {
  --sp-ink: #3c3c3c;
  --sp-muted: #777a80;
  --sp-line: #e3e5e8;
  --sp-surface: #ffffff;
  --sp-soft: #f7f8fa;
  --sp-page: #f5f6f7;
  --sp-brand: #e6001e;
  --sp-brand-dark: #b90018;
  --sp-yellow: #ffcd32;
  --sp-yellow-soft: #fff5cf;
  --sp-green: #008c46;
  --sp-green-soft: #e7f5ee;
  --sp-red-soft: #fff0f2;
  --sp-blue: #2f63d7;
  --sp-blue-soft: #edf3ff;
}

.sp-team { min-height: 60vh; padding: 0 0 24px; font-family: inherit; }
.sp-team__topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; min-height: 74px; margin: 0 calc(clamp(18px, 4vw, 64px) * -1); padding: 0 clamp(18px, 4vw, 64px); border-bottom: 1px solid var(--sp-line); background: #fff; }
.sp-team__topbar-brand { display: flex; align-items: center; gap: 11px; color: var(--sp-ink); text-decoration: none; }
.sp-team__topbar-brand img { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; }
.sp-team__topbar-brand span, .sp-team__topbar-brand strong, .sp-team__topbar-brand small { display: block; }
.sp-team__topbar-brand strong { font-size: 14px; }
.sp-team__topbar-brand small { margin-top: 2px; color: var(--sp-muted); font-size: 11px; }
.sp-team__nav { display: flex; justify-content: center; align-self: stretch; gap: 6px; }
.sp-team__nav a { position: relative; display: flex; align-items: center; padding: 0 14px; color: var(--sp-muted); text-decoration: none; font-size: 13px; font-weight: 750; }
.sp-team__nav a:hover { color: var(--sp-ink); }
.sp-team__nav a.is-active { color: var(--sp-ink); }
.sp-team__nav a.is-active::after { content: ""; position: absolute; right: 14px; bottom: -1px; left: 14px; height: 3px; border-radius: 3px 3px 0 0; background: var(--sp-yellow); }
.sp-team__topbar-user { min-width: 160px; text-align: right; }
.sp-team__topbar-user span, .sp-team__topbar-user strong { display: block; }
.sp-team__topbar-user span { color: var(--sp-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.sp-team__topbar-user strong { margin-top: 2px; font-size: 13px; }
.sp-team__hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 32px; margin-top: 24px; padding: 30px 32px; border: 1px solid #f0d67b; border-radius: 22px; background: linear-gradient(120deg, #fff9e6, #fff0b8); box-shadow: 0 12px 36px rgba(91, 72, 0, .08); }
.sp-team__hero::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 42%; background: url('./images/pattern-1.png') center/cover; opacity: .08; pointer-events: none; }
.sp-team__brand, .sp-team__user { position: relative; z-index: 1; }
.sp-team__brand { display: flex; align-items: center; gap: 22px; }
.sp-team__eyebrow, .sp-team__section-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.sp-team__eyebrow { color: #8a6100; }
.sp-team h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -.035em; color: var(--sp-ink); }
.sp-team__brand p { margin: 12px 0 0; max-width: 650px; color: var(--sp-muted); font-size: 16px; }
.sp-team__user { align-self: center; min-width: 250px; padding: 16px 18px; border: 1px solid rgba(138, 97, 0, .16); border-radius: 16px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); }
.sp-team__user span, .sp-team__user strong { display: block; }
.sp-team__user span { color: var(--sp-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.sp-team__user strong { margin: 4px 0; font-size: 15px; }
.sp-team__user small { display: block; max-width: 250px; color: var(--sp-muted); font-size: 11px; line-height: 1.4; }

.sp-team__readonly { display: flex; align-items: center; gap: 13px; margin-top: 16px; padding: 14px 18px; border: 1px solid #b9dbc9; border-radius: 15px; color: #12653b; background: var(--sp-green-soft); }
.sp-team__readonly-icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--sp-green); font-weight: 900; }
.sp-team__readonly strong, .sp-team__readonly p { display: block; margin: 0; }
.sp-team__readonly p { margin-top: 2px; color: #39775a; font-size: 12px; }

.sp-team__scope, .sp-team__workspace { margin-top: 20px; border: 1px solid var(--sp-line); border-radius: 20px; background: var(--sp-surface); box-shadow: 0 10px 30px rgba(35, 38, 45, .05); }
.sp-team__scope { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; }
.sp-team__section-label { color: var(--sp-muted); }
.sp-team__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; color: var(--sp-brand-dark); background: var(--sp-red-soft); font-size: 13px; font-weight: 700; }

.sp-team__metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.sp-metric { position: relative; overflow: hidden; min-height: 132px; padding: 20px; border: 1px solid var(--sp-line); border-radius: 18px; background: var(--sp-surface); }
.sp-metric::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--sp-brand); }
.sp-metric span, .sp-metric small { display: block; color: var(--sp-muted); }
.sp-team__saved-views { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 18px 22px; border: 1px solid #f0d67b; border-radius: 20px; background: linear-gradient(120deg, #fffdf5, #fff8dc); box-shadow: 0 10px 30px rgba(91, 72, 0, .05); }
.sp-team__saved-views p { margin: 0; color: var(--sp-muted); font-size: 13px; line-height: 1.45; }
.sp-saved-views__controls { display: flex; align-items: center; gap: 9px; }
.sp-saved-views__controls select { min-width: 220px; }
.sp-saved-views__controls .sp-button { white-space: nowrap; }
.sp-team__saved-views [hidden] { display: none !important; }


.sp-metric span { font-size: 13px; font-weight: 700; }
.sp-metric strong { display: block; margin: 8px 0 4px; font-size: 34px; line-height: 1; }
.sp-metric small { font-size: 12px; }
.sp-metric--blue::before { background: var(--sp-blue); }
.sp-metric--yellow::before { background: var(--sp-yellow); }
.sp-metric--green::before { background: var(--sp-green); }
.sp-metric--red::before { background: var(--sp-brand); }

.sp-unit-analytics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 20px; background: var(--sp-soft); }
.sp-unit-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 18px; border: 1px solid var(--sp-line); border-radius: 16px; background: #fff; }
.sp-unit-card > div:first-child span, .sp-unit-card > div:first-child strong { display: block; }
.sp-unit-card > div:first-child span { color: var(--sp-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sp-unit-card > div:first-child strong { margin-top: 5px; font-size: 17px; }
.sp-unit-card__score { text-align: right; }
.sp-unit-card__score b, .sp-unit-card__score span { display: block; }
.sp-unit-card__score b { color: var(--sp-green); font-size: 26px; line-height: 1; }
.sp-unit-card__score span { margin-top: 4px; color: var(--sp-muted); font-size: 11px; }
.sp-unit-card dl { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.sp-unit-card dl div { padding: 9px; border-radius: 10px; background: var(--sp-soft); }
.sp-unit-card dt, .sp-unit-card dd { margin: 0; }
.sp-unit-card dt { color: var(--sp-muted); font-size: 10px; }
.sp-unit-card dd { margin-top: 3px; font-size: 16px; font-weight: 900; }
.sp-readiness { overflow: hidden; grid-column: 1 / -1; height: 7px; border-radius: 99px; background: #e8eaed; }
.sp-readiness i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sp-yellow), var(--sp-green)); }
.sp-course-analytics { padding: 0 20px 20px; }
.sp-course-analytics h3 { margin: 22px 0 12px; font-size: 18px; }
.sp-course-analytics__list { display: grid; gap: 8px; }
.sp-course-analytics__row { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(100px, auto)); align-items: center; gap: 18px; padding: 14px 16px; border: 1px solid var(--sp-line); border-radius: 13px; background: #fff; }
.sp-course-analytics__row strong, .sp-course-analytics__row span, .sp-course-analytics__row b { display: block; }
.sp-course-analytics__row span { margin-top: 3px; color: var(--sp-muted); font-size: 11px; }
.sp-course-analytics__row b { font-size: 17px; }
.sp-course-analytics__row .is-alert b { color: var(--sp-brand); }

.sp-network__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 20px; background: linear-gradient(120deg, #fff9e6, #fff); }
.sp-network__metrics article { padding: 16px; border: 1px solid #f0d67b; border-radius: 15px; background: rgba(255, 255, 255, .88); }
.sp-network__metrics span, .sp-network__metrics strong { display: block; }
.sp-network__metrics span { color: var(--sp-muted); font-size: 12px; font-weight: 750; }
.sp-network__metrics strong { margin-top: 7px; font-size: 28px; }
.sp-network__ranking { display: grid; gap: 8px; padding: 0 20px 20px; }
.sp-network-row { display: grid; grid-template-columns: 38px minmax(220px, 1fr) repeat(3, minmax(90px, auto)); align-items: center; gap: 16px; padding: 13px 15px; border: 1px solid var(--sp-line); border-radius: 13px; background: #fff; }
.sp-network-row.is-risk { border-color: #f1b6be; background: #fffafb; }
.sp-network-row__rank { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #5f4a00; background: var(--sp-yellow-soft); font-weight: 900; }
.sp-network-row strong, .sp-network-row span, .sp-network-row b { display: block; }
.sp-network-row span { margin-top: 2px; color: var(--sp-muted); font-size: 11px; }
.sp-network-row b { font-size: 16px; }
.sp-network-row.is-risk > div:last-child b { color: var(--sp-brand); }

.sp-review__summary { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-review__summary span { padding: 8px 11px; border-radius: 999px; color: #5f4a00; background: var(--sp-yellow-soft); font-size: 12px; }
.sp-review__list { display: grid; gap: 10px; padding: 16px; background: var(--sp-soft); }
.sp-review-card { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(280px, 1.4fr) auto; align-items: center; gap: 20px; padding: 17px; border: 1px solid var(--sp-line); border-radius: 16px; background: #fff; }
.sp-review-card__task strong, .sp-review-card__task span { display: block; }
.sp-review-card__task span { margin-top: 3px; color: var(--sp-muted); font-size: 11px; }
.sp-review-card__task p { overflow: hidden; margin: 8px 0 0; max-width: 620px; color: #555a62; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sp-review-card__meta { display: grid; justify-items: end; gap: 9px; }
.sp-review-card__meta > span { color: var(--sp-muted); font-size: 11px; font-weight: 750; }
.sp-review-card__meta.is-late > span { color: var(--sp-brand); }
.sp-review__context, .sp-review__answer { margin-top: 16px; padding: 14px; border-radius: 13px; background: var(--sp-soft); }
.sp-review__context strong, .sp-review__context span, .sp-review__answer span { display: block; }
.sp-review__context span, .sp-review__answer span { margin-top: 4px; color: var(--sp-muted); font-size: 11px; }
.sp-review__answer p { margin: 8px 0 0; max-height: 180px; overflow: auto; white-space: pre-wrap; }
.sp-review__answer a { color: var(--sp-brand-dark); font-weight: 800; }
.sp-review-history { margin-top: 18px; padding: 15px; border: 1px solid var(--sp-line); border-radius: 14px; }
.sp-review-history h3 { margin: 0 0 12px; font-size: 14px; }
.sp-review-history__row { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; min-height: 52px; }
.sp-review-history__row i { position: relative; width: 8px; height: 8px; margin-top: 4px; border: 2px solid #fff; border-radius: 50%; background: var(--sp-yellow); box-shadow: 0 0 0 1px #d4b321; }
.sp-review-history__row:not(:last-child) i::after { position: absolute; top: 10px; left: 2px; width: 2px; height: 38px; background: var(--sp-line); content: ""; }
.sp-review-history__row strong, .sp-review-history__row small { display: block; }
.sp-review-history__row strong { font-size: 12px; }
.sp-review-history__row small { margin-top: 3px; color: var(--sp-muted); font-size: 10px; }
.sp-review-history__row p { margin: 6px 0 0; color: #555a62; font-size: 11px; line-height: 1.5; }

.sp-team__workspace { overflow: hidden; }
.sp-team__toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 24px; border-bottom: 1px solid var(--sp-line); }
.sp-team__toolbar h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.sp-team__filters { display: flex; gap: 10px; }
.sp-field textarea, .sp-field input, .sp-field select { min-height: 42px; padding: 0 13px; border: 1px solid var(--sp-line); border-radius: 11px; background: #fff; color: var(--sp-ink); font: inherit; }
.sp-field textarea:focus, .sp-field input:focus, .sp-field select:focus { outline: 3px solid rgba(230, 0, 30, .12); border-color: var(--sp-brand); }
.sp-field--search input { width: min(320px, 34vw); }
.sp-field--stacked { display: grid; gap: 7px; margin-top: 16px; }
.sp-field--stacked span { font-size: 13px; font-weight: 800; }
.sp-field--stacked textarea, .sp-field--stacked input, .sp-field--stacked select { width: 100%; }

.sp-team__table-wrap { overflow-x: auto; }
.sp-team__table { width: 100%; min-width: 900px; border-collapse: collapse; }
.sp-team__table th { padding: 13px 18px; color: var(--sp-muted); background: var(--sp-soft); font-size: 11px; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.sp-team__table td { padding: 16px 18px; border-top: 1px solid var(--sp-line); vertical-align: middle; }
.sp-person { display: flex; align-items: center; gap: 11px; }
.sp-person__avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; color: #fff; background: var(--sp-brand); font-weight: 900; }
.sp-person strong, .sp-person span { display: block; }
.sp-person span { margin-top: 2px; color: var(--sp-muted); font-size: 12px; }
.sp-course-title { max-width: 240px; font-size: 13px; font-weight: 700; }
.sp-muted { color: var(--sp-muted); font-size: 13px; }
.sp-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; color: var(--sp-muted); background: #f0f1f3; font-size: 12px; font-weight: 800; white-space: nowrap; }
.sp-status--assigned { color: var(--sp-blue); background: var(--sp-blue-soft); }
.sp-status--progress { color: #8a6100; background: var(--sp-yellow-soft); }
.sp-status--completed { color: var(--sp-green); background: var(--sp-green-soft); }
.sp-status--overdue { color: var(--sp-brand-dark); background: var(--sp-red-soft); }
.sp-status--inactive { color: #5f6570; background: #e8eaed; }
.sp-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; min-width: 110px; }
.sp-progress__bar { height: 7px; overflow: hidden; border-radius: 99px; background: #e8eaed; }
.sp-progress__bar i { display: block; height: 100%; border-radius: inherit; background: var(--sp-green); }
.sp-progress small { color: var(--sp-muted); font-weight: 800; }
.sp-row-actions { display: flex; justify-content: flex-end; gap: 8px; }

.sp-button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 11px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.sp-button:hover { transform: translateY(-1px); }
.sp-button:disabled { opacity: .55; cursor: wait; transform: none; }
.sp-button--primary { color: #fff; background: var(--sp-brand); box-shadow: 0 8px 18px rgba(230, 0, 30, .2); }
.sp-button--primary:hover { background: var(--sp-brand-dark); }
.sp-button--secondary { color: var(--sp-ink); background: var(--sp-soft); border: 1px solid var(--sp-line); }
.sp-button--danger { color: var(--sp-brand-dark); background: var(--sp-red-soft); }

.sp-team__loading, .sp-team__empty { padding: 54px 24px; color: var(--sp-muted); text-align: center; }
.sp-team__empty strong, .sp-team__empty span { display: block; }
.sp-team__notice { margin: 16px 24px 0; padding: 12px 14px; border-radius: 12px; color: var(--sp-green); background: var(--sp-green-soft); font-size: 13px; font-weight: 700; }
.sp-team__notice.is-error { color: var(--sp-brand-dark); background: var(--sp-red-soft); }

.sp-rule-list { display: grid; gap: 12px; padding: 16px; }
.sp-rule-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px; border: 1px solid var(--sp-line); border-radius: 16px; background: #fff; }
.sp-rule-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sp-rule-card__title strong { font-size: 17px; }
.sp-rule-card p { margin: 8px 0; }
.sp-rule-card small { display: block; margin-top: 10px; color: var(--sp-muted); }
.sp-rule-card__criteria { display: flex; flex-wrap: wrap; gap: 7px; }
.sp-rule-card__criteria span { padding: 6px 9px; border-radius: 999px; color: #5f4a00; background: var(--sp-yellow-soft); font-size: 12px; font-weight: 750; }
.sp-rule-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 420px; }
.sp-field small { color: var(--sp-muted); font-size: 11px; }

.sp-modal { width: min(520px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 20px; color: var(--sp-ink); box-shadow: 0 30px 80px rgba(20, 20, 25, .28); }
.sp-modal::backdrop { background: rgba(30, 30, 35, .5); backdrop-filter: blur(3px); }
.sp-modal form { padding: 24px; }
.sp-modal__header { display: flex; justify-content: space-between; gap: 20px; }
.sp-modal__header h2 { margin: 0; font-size: 24px; }
.sp-modal__header p { margin: 5px 0 0; color: var(--sp-muted); }
.sp-modal__close { width: 38px; height: 38px; border: 0; border-radius: 12px; background: var(--sp-soft); font-size: 25px; cursor: pointer; }
.sp-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.sp-modal--career { width: min(700px, calc(100vw - 28px)); }
.sp-career__preview-button { width: 100%; margin-top: 16px; }
.sp-career__preview { margin-top: 16px; padding: 16px; border: 1px solid #f0cb50; border-radius: 16px; background: #fff9df; }
.sp-career__preview h3 { margin: 0 0 8px; font-size: 17px; }
.sp-career__summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sp-career__summary span { display: grid; gap: 3px; padding: 10px; border-radius: 12px; background: #fff; color: var(--sp-muted); font-size: 12px; }
.sp-career__summary strong { color: var(--sp-ink); font-size: 19px; }
.sp-career__list { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.sp-career__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 7px; border-top: 1px solid rgba(128, 102, 0, .16); }
.sp-career__list small { color: var(--sp-muted); font-weight: 700; white-space: nowrap; }
.sp-career__warning { margin: 10px 0 0; color: #8a5d00; font-weight: 700; }
@media (max-width: 620px) {
  .sp-career__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-career__list li { align-items: flex-start; flex-direction: column; }
}
.sp-checkbox { display: flex; align-items: center; gap: 9px; margin-top: 17px; font-size: 13px; font-weight: 700; }
.sp-structure { overflow: hidden; border-top: 4px solid var(--sp-yellow); }
.sp-structure__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-structure__onboarding { margin: 0 22px 20px; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, #fff8d7, #fffdf3); border: 1px solid #f5dfa0; }
.sp-structure__onboarding > strong { font-size: 17px; }
.sp-structure__onboarding ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.sp-structure__onboarding li { display: flex; gap: 10px; align-items: center; color: var(--sp-muted); font-size: 13px; }
.sp-structure__onboarding b { display: grid; width: 30px; height: 30px; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--sp-yellow); color: #171717; }
.sp-structure-readiness { margin: 0 22px 20px; padding: 18px; border: 1px solid var(--sp-line); border-radius: 18px; background: linear-gradient(135deg, #fff, #fafbfc); }
.sp-structure-readiness__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sp-structure-readiness__head h3 { margin: 2px 0 0; font-size: 19px; }
.sp-structure-readiness__status { padding: 7px 10px; border-radius: 999px; background: #fff4cf; color: #7a5900; font-size: 12px; font-weight: 800; white-space: nowrap; }
.sp-structure-readiness__status.is-ready { background: #e6f5ed; color: #18794e; }
.sp-structure-readiness__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sp-structure-readiness__grid article { min-width: 0; padding: 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--sp-line); }
.sp-structure-readiness__grid span, .sp-structure-readiness__grid small { display: block; color: var(--sp-muted); font-size: 12px; }
.sp-structure-readiness__grid strong { display: block; margin: 5px 0 2px; font-size: 24px; line-height: 1; }
.sp-setup-steps { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.sp-setup-steps__item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--sp-line); border-radius: 13px; background: #fff; }
.sp-setup-steps__item > b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #eef0f2; color: var(--sp-muted); font-size: 13px; }
.sp-setup-steps__item span, .sp-setup-steps__item strong, .sp-setup-steps__item small { min-width: 0; display: block; }
.sp-setup-steps__item small { margin-top: 2px; color: var(--sp-muted); font-size: 12px; overflow-wrap: anywhere; }
.sp-setup-steps__item em { padding: 5px 8px; border-radius: 999px; background: #f1f2f4; color: var(--sp-muted); font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }
.sp-setup-steps__item.is-done > b, .sp-setup-steps__item.is-done em { background: #e6f5ed; color: #18794e; }
.sp-setup-steps__item.is-current { border-color: #edc843; background: #fffdf3; }
.sp-setup-steps__item.is-current > b, .sp-setup-steps__item.is-current em { background: var(--sp-yellow); color: #171717; }
.sp-setup-steps__item.is-deferred { border-style: dashed; background: #fafbfc; }
.sp-setup-steps__item.is-deferred em { background: #fff4cf; color: #7a5900; }
.sp-structure-readiness__next { margin-top: 12px; padding: 12px 14px; border-left: 4px solid var(--sp-yellow); border-radius: 10px; background: #fff8d7; color: #5d4a09; font-size: 13px; }
.sp-structure-readiness__next.is-ready { border-left-color: #18794e; background: #eaf7f0; color: #17643f; }
.sp-structure__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 22px 22px; }
.sp-structure__grid > article { min-width: 0; padding: 16px; border: 1px solid var(--sp-line); border-radius: 16px; background: #fbfbfc; }
.sp-structure__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; }
.sp-structure__head h3 { margin: 0; font-size: 16px; }
.sp-structure__head span { display: grid; min-width: 28px; height: 28px; place-items: center; border-radius: 9px; background: #fff; color: var(--sp-muted); font-weight: 800; }
.sp-structure__list { display: grid; gap: 8px; max-height: 330px; overflow: auto; }
.sp-structure__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 rgba(17, 24, 39, .04); }
.sp-structure__row > div { min-width: 0; }
.sp-structure__row strong, .sp-structure__row small { display: block; overflow-wrap: anywhere; }
.sp-structure__row small { margin-top: 3px; color: var(--sp-muted); }
.sp-structure__row.is-inactive { opacity: .62; }
.sp-structure__status { align-self: start; color: #18794e; font-size: 11px; font-weight: 800; }
.sp-structure__row.is-inactive .sp-structure__status { color: var(--sp-muted); }
.sp-structure__toggle { grid-column: 1 / -1; justify-self: start; padding: 0; border: 0; background: transparent; color: var(--sp-red); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.sp-structure__row.is-inactive .sp-structure__toggle { color: #18794e; }
.sp-structure__empty { margin: 0; padding: 20px 8px; color: var(--sp-muted); text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1080px) {
  .sp-team__metrics { grid-template-columns: repeat(3, 1fr); }
  .sp-unit-analytics { grid-template-columns: repeat(2, 1fr); }
  .sp-team__hero { align-items: flex-start; }
  .sp-team__topbar { grid-template-columns: auto 1fr; }
  .sp-team__topbar-user { display: none; }
  .sp-network__metrics { grid-template-columns: repeat(2, 1fr); }
  .sp-review-card { grid-template-columns: 1fr 1fr; }
  .sp-review-card__meta { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: stretch; }
  .sp-structure__grid { grid-template-columns: 1fr 1fr; }
  .sp-structure-readiness__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .sp-team { padding: 0 0 24px; }
  .sp-team__topbar { display: flex; min-height: 66px; margin: 0 -12px; padding: 0 12px; }
  .sp-team__topbar-brand { flex: 1; }
  .sp-team__nav { align-self: auto; }
  .sp-team__nav a { display: none; }
  .sp-team__nav a.is-active { display: flex; padding: 10px 12px; border-radius: 10px; background: var(--sp-yellow-soft); }
  .sp-team__nav a.is-active::after { display: none; }
  .sp-team__hero { display: block; padding: 22px 18px; border-radius: 18px; }
  .sp-team__brand { align-items: flex-start; }
  .sp-team__brand p { font-size: 14px; }
  .sp-team__user { margin-top: 18px; }
  .sp-team__scope { align-items: flex-end; padding: 16px; }
  .sp-team__saved-views { display: block; padding: 16px; }
  .sp-saved-views__controls { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; }
  .sp-saved-views__controls .sp-field, .sp-saved-views__controls .sp-field select { width: 100%; grid-column: 1 / -1; }
  .sp-team__metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sp-unit-analytics { grid-template-columns: 1fr; padding: 14px; }
  .sp-course-analytics { padding: 0 14px 14px; }
  .sp-course-analytics__row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sp-course-analytics__row > div:first-child { grid-column: 1 / -1; }
  .sp-metric { min-height: 112px; padding: 16px; }
  .sp-metric strong { font-size: 28px; }
  .sp-team__toolbar { display: block; padding: 18px 16px; }
  .sp-team__filters { margin-top: 16px; }
  .sp-field--search { flex: 1; }
  .sp-field--search input { width: 100%; }
  .sp-team__table-wrap { overflow: visible; }
  .sp-team__table { display: block; min-width: 0; }
  .sp-team__table thead { display: none; }
  .sp-team__table tbody { display: grid; gap: 12px; padding: 12px; }
  .sp-team__table tr { display: block; overflow: hidden; border: 1px solid var(--sp-line); border-radius: 16px; background: var(--sp-surface); }
  .sp-team__table td { display: block; padding: 11px 14px; border-top: 1px solid var(--sp-line); overflow-wrap: anywhere; }
  .sp-team__table td:first-child { border-top: 0; }
  .sp-team__table td:nth-child(n + 2)::before { display: block; margin-bottom: 5px; color: var(--sp-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .sp-team__table td:nth-child(2)::before { content: "Подразделение"; }
  .sp-team__table td:nth-child(3)::before { content: "Должность"; }
  .sp-team__table td:nth-child(4)::before { content: "Обучение"; }
  .sp-team__table td:nth-child(5)::before { content: "Прогресс"; }
  .sp-team__table td:nth-child(6)::before { content: "Действия"; }
  .sp-person > div { min-width: 0; }
  .sp-person span { overflow-wrap: anywhere; }
  .sp-course-title { max-width: none; }
  .sp-progress { min-width: 0; }
  .sp-row-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .sp-row-actions .sp-button { width: 100%; }
  .sp-rule-card { grid-template-columns: 1fr; }
  .sp-rule-card__actions { display: grid; grid-template-columns: 1fr; max-width: none; }
  .sp-rule-card__actions .sp-button { width: 100%; }
  .sp-network__metrics { padding: 14px; }
  .sp-network__ranking { padding: 0 14px 14px; }
  .sp-network-row { grid-template-columns: 34px 1fr 1fr; gap: 10px; }
  .sp-network-row > div:first-of-type { grid-column: 2 / -1; }
  .sp-review-card { grid-template-columns: 1fr; }
  .sp-review-card__meta { grid-column: auto; }
  .sp-review-card__meta .sp-button { width: 100%; }
  .sp-structure__actions { display: grid; grid-template-columns: 1fr; margin-top: 14px; }
  .sp-structure__grid, .sp-structure__onboarding ol, .sp-structure-readiness__grid { grid-template-columns: 1fr; }
  .sp-setup-steps__item { grid-template-columns: 30px minmax(0, 1fr); }
  .sp-setup-steps__item em { grid-column: 2; justify-self: start; }
  .sp-structure-readiness { margin: 0 14px 16px; padding: 15px; }
  .sp-structure-readiness__head { display: block; }
  .sp-structure-readiness__status { display: inline-flex; margin-top: 10px; }
  .sp-structure__grid { padding: 0 14px 16px; }
}

@media (max-width: 420px) {
  .sp-team__topbar-brand small { display: none; }
  .sp-team__topbar-brand img { width: 40px; height: 40px; }
  .sp-team__metrics { grid-template-columns: 1fr 1fr; }
  .sp-metric:first-child { grid-column: 1 / -1; }
  .sp-team__scope { display: block; }
  .sp-team__scope .sp-button { width: 100%; margin-top: 14px; }
  .sp-team__filters { display: grid; }
  .sp-saved-views__controls { grid-template-columns: 1fr; }
  .sp-saved-views__controls .sp-field, .sp-saved-views__controls .sp-field select { grid-column: auto; }
  .sp-network__metrics { grid-template-columns: 1fr 1fr; }
  .sp-review__summary { margin-top: 14px; }
}