:root {
    --metro-red: #e02020;
    --metro-card: #ffffff;
    --metro-text: #111111;
    --metro-muted: #777777;
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.10)
}

/* Placeholders dos campos de seleção em todo o portal. */
select:has(> option:checked[value=""]) {
    color: #999 !important;
}

select option[value=""] {
    color: #999 !important;
}

select option:not([value=""]) {
    color: #111 !important;
}

.svg-icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.2em;
}

.page-breadcrumb.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-width: 0;
    color: var(--metro-muted, #777777);
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    line-height: 1.4;
}

.page-breadcrumb span {
    flex: 0 0 auto;
}

.page-breadcrumb strong {
    min-width: 0;
    color: var(--metro-text, #111111);
    font-weight: 700;
}

.section-nav>.page-breadcrumb {
    flex: 0 0 100%;
    width: 100%;
}

body.page-training-planner .planner-title-block {
    width: 100%;
    min-width: 0;
}

body.page-form:not(.page-training-planner) .form-title-block {
    width: 100%;
    min-width: 0;
}

#profile-card-container .profile-card {
    background: var(--metro-card);
    border-radius: 32px;
    box-shadow: var(--shadow-soft);
    padding: 32px;
    display: flex;
    flex-direction: column
}

#profile-card-container .top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px
}

#profile-card-container .logo-wrap {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12)
}

#profile-card-container .logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#profile-card-container .badges {
    display: flex;
    align-items: center;
    gap: 14px
}

#profile-card-container .badges img {
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15))
}

#profile-card-container .badge-fpf {
    height: 38px
}

#profile-card-container .badge-cbf {
    height: 47px
}

#profile-card-container .badge-formador {
    height: 40px
}

#profile-card-container .club-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--metro-text)
}

#profile-card-container .club-description {
    list-style: none;
    margin-bottom: 11px;
    padding: 0
}

#profile-card-container .club-description li {
    margin: 6px 0;
    color: var(--metro-muted);
    font-size: 15px
}

#profile-card-container .pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px
}

#profile-card-container .tag {
    flex: 0 0 auto;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid rgba(224, 32, 32, 0.28);
    background: rgba(224, 32, 32, 0.06);
    color: #555555;
    white-space: nowrap
}

#profile-card-container .profile-update {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    background: #fafafa;
    text-align: center
}

#profile-card-container .profile-update-icon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 50%;
    background: rgba(224, 32, 32, .08);
    color: var(--metro-red);
    font-size: 18px;
    font-weight: 700;
    line-height: 1
}

#profile-card-container .profile-update-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 2px
}

#profile-card-container .profile-update-copy span {
    color: var(--metro-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .08em;
    text-transform: uppercase
}

#profile-card-container .profile-update-copy strong {
    color: var(--metro-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3
}

#profile-card-container .next-matches-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 28px;
    text-align: center
}

#profile-card-container .next-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--metro-red)
}

#profile-card-container .next-match {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eeeeee
}

#profile-card-container .next-match:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none
}

#profile-card-container .match-category {
    font-size: 13px;
    font-weight: 600;
    color: var(--metro-red);
    margin-bottom: 6px
}

#profile-card-container .match-date {
    font-size: 13px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 4px
}

#profile-card-container .match-info {
    font-size: 13px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 4px
}

#profile-card-container .match-location {
    font-size: 12px;
    color: var(--metro-muted)
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn .4s
}

.modal-box {
    background: white;
    padding: 30px;
    border-radius: 14px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp .4s
}

.modal-box h2 {
    color: #d40000;
    margin-bottom: 10px
}

.modal-box p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px
}

.modal-box button {
    background: #d40000;
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px
}

.modal-box button:hover {
    background: #b30000
}

#profile-card-container .match-stream {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ff0000;
    font-weight: 600
}

#profile-card-container .match-stage {
    font-size: 13px;
    font-weight: 600;
    color: var(--metro-red);
    margin-bottom: 6px
}

#profile-card-container .match-competition {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    border: 1px solid transparent
}

#profile-card-container .competition-paulista-cup {
    background: linear-gradient(135deg, rgba(246, 19, 3, 0.12), rgba(246, 19, 3, 0.04));
    color: #f61303;
    border: 1px solid rgba(246, 19, 3, 0.35);
    box-shadow: 0 4px 10px rgba(246, 19, 3, 0.12);
    font-size: 14px
}

#profile-card-container .competition-libraef {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.12), rgba(40, 167, 69, 0.04));
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.7);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10)
}

#profile-card-container .competition-amistoso {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.05));
    color: #b8860b;
    border: 1px solid rgba(255, 193, 7, 0.35);
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.12)
}

#profile-card-container .competition-uniaocup {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.15), rgba(13, 110, 253, 0.05));
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.35);
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.12)
}

#profile-card-container .competition-apf {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25));
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    font-size: 14px
}

@media (max-width:850px) {
    #profile-card-container .top-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    #profile-card-container .badges {
        justify-content: flex-start
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.btn-metro-jogar {
    background: #d40000;
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none
}

.btn-metro-jogar:hover {
    background: #b80000
}

.footer-container,
#footer-container {
    width: 100%
}

#footer-container .footer {
    margin-top: 24px
}

.u-team-width-120 {
    width: 120px
}

.u-team-width-110 {
    width: 110px
}

.u-inline-1 {
    padding: 24px;
    border-radius: 24px;
    border: 1px dashed #ddd;
    color: #aaa
}

.u-inline-2 {
    padding: 24px;
    color: #999
}

.u-inline-3 {
    margin-top: 8px
}

.u-inline-4 {
    text-align: center;
    color: #777
}

.u-inline-5 {
    width: 100%;
    height: auto;
    max-height: 380px
}

.u-inline-6 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center
}

.u-inline-7 {
    color: #111;
    margin: 0 0 8px 0;
    font-size: 13px
}

.u-inline-8 {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 12px
}

.u-inline-9 {
    border-color: #eeeeee;
    margin: 14px 0
}

.u-inline-10 {
    background: rgba(224, 32, 32, 0.06);
    border-left: 4px solid #E02020;
    padding: 12px;
    border-radius: 16px;
    margin-top: 12px
}

.u-inline-11 {
    font-weight: bold
}

.u-inline-12 {
    background: #f7f7f7;
    border-left: 4px solid #111;
    padding: 12px;
    border-radius: 16px;
    margin-top: 12px
}

.u-inline-13 {
    color: #777;
    margin-top: 8px
}

.u-inline-14 {
    padding: 24px;
    border-radius: 24px;
    border: 1px dashed #ddd;
    color: #999
}

.u-inline-15 {
    color: #e02020;
    font-size: 12px;
    display: none
}

.u-inline-16 {
    color: #e02020;
    font-weight: 700
}

.u-inline-17 {
    display: none;
    visibility: hidden
}

.u-inline-18 {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%
}

.u-inline-19 {
    margin-top: 10px;
    margin-bottom: 18px
}

.u-inline-20 {
    margin-top: 24px
}

.u-inline-21 {
    margin-top: 10px;
    margin-bottom: 18px
}

.u-inline-22 {
    margin-top: 20px
}

.u-inline-23 {
    margin-bottom: 20px
}

.u-inline-24 {
    width: 200px;
    display: block;
    margin: 20px auto;
    border-radius: 16px;
    background: transparent;
    box-shadow: none
}

.u-inline-25 {
    width: 35mm;
    height: auto
}

.u-inline-26 {
    cursor: pointer
}

.u-inline-27 {
    margin-top: 18px
}

.u-inline-28 {
    display: none
}

.u-inline-29 {
    justify-content: center
}

.u-inline-30 {
    padding: 24px;
    border: 1px dashed #ddd;
    border-radius: 24px;
    color: #aaa
}

.u-inline-31 {
    margin-bottom: 12px
}

.u-inline-32 {
    margin-bottom: 20px
}

.u-inline-33 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    font-size: 13px
}

.u-inline-34 {
    height: 180px;
    border-radius: 16px
}

.u-inline-35 {
    height: 220px;
    border-radius: 16px
}

.u-inline-36 {
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #eee
}

.u-inline-37 {
    margin-bottom: 10px
}

.u-inline-38 {
    color: #777;
    font-size: 14px
}

.u-hidden-file-input {
    display: none
}

body.page-404 {
    margin: 0;
    background: #f5f6f8;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh
}

body.page-404 .error-card {
    background: var(--metro-card);
    border-radius: 32px;
    box-shadow: var(--shadow-soft);
    padding: 50px 40px;
    text-align: center;
    max-width: 480px;
    width: 90%
}

body.page-404 .error-code {
    font-size: 110px;
    font-weight: 800;
    color: var(--metro-red);
    margin: 0
}

body.page-404 .error-title {
    font-size: 20px;
    font-weight: 700;
    margin-top: 10px;
    color: var(--metro-text)
}

body.page-404 .error-desc {
    font-size: 14px;
    color: var(--metro-muted);
    margin: 20px 0 30px
}

body.page-404 .divider {
    width: 50px;
    height: 3px;
    background: var(--metro-red);
    margin: 20px auto;
    border-radius: 2px
}

body.page-404 .btn-area {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap
}

body.page-404 .secondary-link {
    font-size: 13px;
    color: var(--metro-red);
    text-decoration: none;
    margin-top: 10px;
    display: inline-block
}

body.page-404 .secondary-link:hover {
    text-decoration: underline
}

body.page-agenda {
    --metro-red: #e02020;
    --metro-muted: #777;
    --shadow-soft: 0 14px 35px rgba(0, 0, 0, .08)
}

body.page-agenda * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body.page-agenda {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    padding: 32px 16px 24px
}

body.page-agenda .page {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-agenda .agenda-card {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, .08)
}

body.page-agenda .agenda-card>.page-breadcrumb {
    margin-bottom: 20px
}

body.page-agenda .agenda-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 18px
}

body.page-agenda .agenda-title {
    font-size: 22px;
    font-weight: 700
}

body.page-agenda .agenda-header p {
    margin-top: 5px;
    color: var(--metro-muted);
    font-size: 13px
}

body.page-agenda .agenda-reference {
    display: grid;
    gap: 7px;
    min-width: 280px
}

body.page-agenda .agenda-reference>span:first-child {
    color: #68686d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

body.page-agenda .agenda-month-picker {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 94px;
    gap: 8px
}

body.page-agenda .agenda-month-picker select {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid #d8d8dc;
    border-radius: 13px;
    background: #fff;
    color: #222226;
    font: 600 13px/1.35 "Space Grotesk", sans-serif
}

body.page-agenda .agenda-status {
    margin-bottom: 14px;
    color: var(--metro-muted);
    font-size: 12px
}

body.page-agenda .agenda-status.is-error {
    color: #b30000
}

body.page-agenda .agenda-calendar-weekdays,
body.page-agenda .agenda-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px
}

body.page-agenda .agenda-calendar-weekdays {
    margin-bottom: 9px
}

body.page-agenda .agenda-calendar-weekdays span {
    color: #77777c;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase
}

body.page-agenda .agenda-calendar-spacer {
    min-width: 0
}

body.page-agenda .agenda-day {
    border-radius: 15px;
    border: 1px solid #e1e1e4;
    padding: 10px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 132px;
    min-width: 0;
    position: relative
}

body.page-agenda .agenda-day.has-events {
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease
}

body.page-agenda .agenda-day.has-events:hover,
body.page-agenda .agenda-day.has-events:focus-visible {
    outline: 0;
    transform: translateY(-3px);
    border-color: rgba(224, 32, 32, .65);
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .1)
}

body.page-agenda .day-header {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

body.page-agenda .day-number {
    font-size: 15px;
    font-weight: 700;
    color: var(--metro-red)
}

body.page-agenda .day-week {
    display: none
}

body.page-agenda .day-events {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 8px
}

body.page-agenda .agenda-day.today {
    border: 2px solid #f2c94c;
    background: #fff9e6;
    box-shadow: 0 8px 22px rgba(242, 201, 76, 0.35)
}

body.page-agenda .agenda-day.today .day-number {
    color: #f2c94c
}

body.page-agenda .agenda-day.today::after {
    content: "HOJE";
    position: absolute;
    top: 9px;
    right: 8px;
    padding: 3px 5px;
    text-align: center;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #fff;
    background: #f2c94c;
    border-radius: 999px
}

body.page-agenda .event {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    font-size: 12px;
    padding: 8px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e5e5e5
}

body.page-agenda .event-content {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 4px
}

body.page-agenda .event-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7px
}

body.page-agenda .event-heading strong {
    min-width: 0;
    color: #222226;
    font-size: 12px;
    line-height: 1.3
}

body.page-agenda .event-time {
    flex: 0 0 auto;
    color: #333338;
    font-size: 11px;
    font-weight: 700
}

body.page-agenda .event-meta,
body.page-agenda .event-content p {
    color: var(--metro-muted);
    font-size: 10px;
    line-height: 1.35
}

body.page-agenda .agenda-day-empty {
    margin: auto 0;
    color: #aaa;
    font-size: 9px;
    line-height: 1.25
}

body.page-agenda .agenda-day.has-events .day-events {
    display: flex;
    flex-direction: column;
    align-content: stretch
}

body.page-agenda .agenda-day-summary {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 4px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff
}

body.page-agenda .agenda-summary-color {
    width: 4px;
    height: 18px;
    border-radius: 999px
}

body.page-agenda .agenda-summary-color.treino {
    background: #000
}

body.page-agenda .agenda-summary-color.jogo {
    background: #e02020
}

body.page-agenda .agenda-summary-color.avaliacao {
    background: #03f503
}

body.page-agenda .agenda-summary-color.extra {
    background: #9a9a9a
}

body.page-agenda .agenda-summary-color.staff {
    background: #059500
}

body.page-agenda .agenda-summary-color.reuniao {
    background: #4169e1
}

body.page-agenda .agenda-day-rest {
    margin: auto 0;
    color: #aaa;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase
}

body.page-agenda .agenda-day-summary strong {
    color: #222226;
    font-size: 12px;
    line-height: 1
}

body.page-agenda .agenda-summary-label {
    overflow-wrap: anywhere;
    color: var(--metro-muted);
    font-size: 7px;
    font-weight: 700;
    line-height: 1.05
}

body.page-agenda .event-preview {
    min-height: 0;
    overflow: hidden
}

body.page-agenda .event-preview .event-content p {
    display: none
}

body.page-agenda .event-preview.event-match .event-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px
}

body.page-agenda .event-preview.event-match .event-time {
    grid-row: 1;
    width: max-content;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(224, 32, 32, .09);
    color: var(--metro-red);
    font-size: 10px
}

body.page-agenda .event-preview.event-match .event-heading strong {
    grid-row: 2;
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

body.page-agenda .event-preview.event-match .event-meta {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

body.page-agenda .agenda-day-action {
    margin-top: auto;
    color: var(--metro-red);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase
}

body.page-agenda .badge {
    width: 6px;
    height: 100%;
    border-radius: 4px;
    flex: 0 0 6px
}

body.page-agenda .badge.treino {
    background: #000
}

body.page-agenda .badge.jogo {
    background: #e02020
}

body.page-agenda .badge.avaliacao {
    background: #03f503
}

body.page-agenda .badge.extra {
    background: #9a9a9a
}

body.page-agenda .badge.staff {
    background: #059500
}

body.page-agenda .badge.reuniao {
    background: #4169e1
}

body.page-agenda .badge.folga {
    background: #c5c5c9
}

body.page-agenda .badge.amistoso {
    background: #fadd00
}

body.agenda-modal-open {
    overflow: hidden
}

body.page-agenda .agenda-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .42)
}

body.page-agenda .agenda-modal-backdrop.is-visible {
    display: flex
}

body.page-agenda .agenda-day-modal {
    width: min(92vw, 620px);
    max-height: min(82vh, 720px);
    overflow: hidden;
    padding: 26px;
    border: 1px solid #e2e2e2;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .2)
}

body.page-agenda .agenda-day-modal>header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px
}

body.page-agenda .agenda-day-modal>header span {
    color: var(--metro-red);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

body.page-agenda .agenda-day-modal h2 {
    margin-top: 4px;
    color: #202024;
    font-size: 22px
}

body.page-agenda .agenda-day-modal header p {
    margin-top: 5px;
    color: var(--metro-muted);
    font-size: 12px
}

body.page-agenda #agendaModalClose {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #dedee2;
    border-radius: 50%;
    background: #fff;
    color: #55555a;
    font: 400 24px/1 sans-serif;
    cursor: pointer
}

body.page-agenda .agenda-modal-events {
    display: grid;
    gap: 10px;
    max-height: calc(min(82vh, 720px) - 130px);
    padding-right: 4px;
    overflow-y: auto
}

body.page-agenda .agenda-modal-events .event {
    padding: 12px
}

body.page-agenda .agenda-modal-events .event-heading strong {
    font-size: 14px
}

body.page-agenda .agenda-modal-events .event-match .event-heading {
    align-items: center
}

body.page-agenda .agenda-modal-events .event-match .event-time {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(224, 32, 32, .09);
    color: var(--metro-red)
}

body.page-agenda .agenda-modal-events .event-time {
    font-size: 12px
}

body.page-agenda .agenda-modal-events .event-meta,
body.page-agenda .agenda-modal-events .event-content p {
    font-size: 11px
}

body.page-agenda .footer {
    text-align: center;
    margin-top: 8px
}

body.page-agenda .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-agenda .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media(max-width:900px) {
    body.page-agenda .page {
        grid-template-columns: 1fr
    }

    body.page-agenda .agenda-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }
}

@media(max-width:620px) {
    body.page-agenda .agenda-header {
        align-items: stretch;
        flex-direction: column
    }

    body.page-agenda .agenda-reference {
        min-width: 0
    }

    body.page-agenda .agenda-calendar-weekdays {
        display: none
    }

    body.page-agenda .agenda-calendar-spacer {
        display: none
    }

    body.page-agenda .agenda-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    body.page-agenda .agenda-day {
        height: 142px
    }

    body.page-agenda .day-header {
        justify-content: space-between
    }

    body.page-agenda .day-week {
        display: inline;
        font-size: 9px;
        color: var(--metro-muted);
        text-transform: uppercase;
        letter-spacing: .08em
    }
}

body.page-analise-atleta {
    --metro-red: #e02020;
    --metro-card: #ffffff;
    --metro-text: #111111;
    --metro-muted: #777777;
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.10)
}

body.page-analise-atleta .profile-card {
    background: var(--metro-card);
    border-radius: 32px;
    box-shadow: var(--shadow-soft);
    padding: 32px;
    display: flex;
    flex-direction: column
}

body.page-analise-atleta .top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px
}

body.page-analise-atleta .logo-wrap {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12)
}

body.page-analise-atleta .logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

body.page-analise-atleta .badges {
    display: flex;
    align-items: center;
    gap: 14px
}

body.page-analise-atleta .badges img {
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15))
}

body.page-analise-atleta .badge-fpf {
    height: 38px
}

body.page-analise-atleta .badge-cbf {
    height: 47px
}

body.page-analise-atleta .badge-formador {
    height: 40px
}

body.page-analise-atleta .club-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--metro-text)
}

body.page-analise-atleta .club-description {
    list-style: none;
    margin-bottom: 11px;
    padding: 0
}

body.page-analise-atleta .club-description li {
    margin: 6px 0;
    color: var(--metro-muted);
    font-size: 15px
}

body.page-analise-atleta .pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px
}

body.page-analise-atleta .tag {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid rgba(224, 32, 32, 0.28);
    background: rgba(224, 32, 32, 0.06);
    color: #555555;
    white-space: nowrap
}

body.page-analise-atleta .next-matches-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 28px;
    text-align: center
}

body.page-analise-atleta .next-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--metro-red)
}

body.page-analise-atleta .next-match {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eeeeee
}

body.page-analise-atleta .next-match:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none
}

body.page-analise-atleta .match-category {
    font-size: 13px;
    font-weight: 600;
    color: var(--metro-red);
    margin-bottom: 6px
}

body.page-analise-atleta .match-date {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 4px
}

body.page-analise-atleta .match-info {
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 4px
}

body.page-analise-atleta .match-location {
    font-size: 12px;
    color: var(--metro-muted)
}

body.page-analise-atleta .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn .4s
}

body.page-analise-atleta .modal-box {
    background: white;
    padding: 30px;
    border-radius: 14px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp .4s
}

body.page-analise-atleta .modal-box h2 {
    color: #d40000;
    margin-bottom: 10px
}

body.page-analise-atleta .modal-box p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px
}

body.page-analise-atleta .modal-box button {
    background: #d40000;
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px
}

body.page-analise-atleta .modal-box button:hover {
    background: #b30000
}

body.page-analise-atleta .match-competition {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    border: 1px solid transparent
}

body.page-analise-atleta .competition-paulista {
    background: linear-gradient(135deg, rgba(246, 19, 3, 0.12), rgba(246, 19, 3, 0.04));
    color: #f61303;
    border: 1px solid rgba(246, 19, 3, 0.35);
    box-shadow: 0 4px 10px rgba(246, 19, 3, 0.12)
}

body.page-analise-atleta .competition-libraef {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.12), rgba(40, 167, 69, 0.04));
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.7);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10)
}

body.page-analise-atleta .competition-amistoso {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.05));
    color: #b8860b;
    border: 1px solid rgba(255, 193, 7, 0.35);
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.12)
}

body.page-analise-atleta .competition-uniaocup {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.15), rgba(13, 110, 253, 0.05));
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.35);
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.12)
}

body.page-analise-atleta .competition-liesp {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.15), rgba(108, 117, 125, 0.05));
    color: #343a40;
    border: 1px solid rgba(108, 117, 125, 0.35);
    box-shadow: 0 4px 10px rgba(108, 117, 125, 0.12)
}

body.page-analise-atleta .competition-apf {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25));
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18)
}

@media (max-width:850px) {
    body.page-analise-atleta .top-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    body.page-analise-atleta .badges {
        justify-content: flex-start
    }
}

body.page-analise-atleta .btn-metro-jogar {
    background: #d40000;
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none
}

body.page-analise-atleta .btn-metro-jogar:hover {
    background: #b80000
}

body.page-analise-atleta {
    --metro-red: #E02020;
    --metro-text: #111;
    --metro-muted: #777;
    --metro-border: rgba(0, 0, 0, 0.08)
}

body.page-analise-atleta * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body.page-analise-atleta *::before,
body.page-analise-atleta *::after {
    background: none !important
}

body.page-analise-atleta {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    color: var(--metro-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px;
    opacity: 1 !important
}

body.page-analise-atleta .page {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-analise-atleta #profile-card-container {
    min-width: 420px
}

body.page-analise-atleta .analysis-wrapper {
    display: flex
}

body.page-analise-atleta .analysis-card {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--metro-border);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 13px
}

body.page-analise-atleta .form-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--metro-text)
}

body.page-analise-atleta .form-subtitle {
    font-size: 13px;
    color: var(--metro-muted);
    margin-top: 4px
}

body.page-analise-atleta .analysis-section {
    border-top: 1px solid #eeeeee;
    padding-top: 18px;
    min-width: 0
}

body.page-analise-atleta .analysis-section h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--metro-muted);
    margin-bottom: 14px;
    font-weight: 700
}

body.page-analise-atleta .grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start
}

body.page-analise-atleta .input-group {
    margin-bottom: 14px
}

body.page-analise-atleta label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--metro-text);
    margin-bottom: 6px
}

body.page-analise-atleta input,
body.page-analise-atleta select {
    width: 100%;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    padding: 0 14px;
    font-size: 13px;
    line-height: 40px;
    outline: none;
    background: #fff;
    color: var(--metro-text);
    font-family: "Space Grotesk", sans-serif
}

body.page-analise-atleta select {
    cursor: pointer
}

body.page-analise-atleta input:focus,
body.page-analise-atleta select:focus {
    border-color: var(--metro-red);
    box-shadow: 0 0 0 1px rgba(224, 32, 32, 0.08)
}

body.page-analise-atleta input[type="number"] {
    -moz-appearance: textfield
}

body.page-analise-atleta .attrs-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

body.page-analise-atleta .metrics-grid {
    row-gap: 0
}

body.page-analise-atleta .metrics-category {
    position: relative;
    margin-bottom: 18px;
    padding: 22px 22px 8px;
    border: 1px solid #dedee3;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .055)
}

body.page-analise-atleta .metrics-category h4 {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ededf0;
    color: var(--metro-text);
    font-size: 16px;
    font-weight: 700
}

body.page-analise-atleta .metric-scale {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f0f0f2;
    color: #555;
    font-size: 10px;
    letter-spacing: .04em;
    vertical-align: middle
}

body.page-analise-atleta .potential-analysis-section {
    padding: 22px;
    border: 1px solid #dedee3;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .055)
}

body.page-analise-atleta .button-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap
}

body.page-analise-atleta .btn-primary {
    padding: 11px 20px;
    border-radius: 999px;
    border: none;
    background: var(--metro-red);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: 0.15s;
    font-family: "Space Grotesk", sans-serif
}

body.page-analise-atleta .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(224, 32, 32, 0.35);
    background: #c01818
}

body.page-analise-atleta .btn-pdf {
    background: #9f1c1c
}

body.page-analise-atleta .btn-pdf:hover {
    background: #7f1515;
    box-shadow: 0 10px 25px rgba(159, 28, 28, .28)
}

body.page-analise-atleta .relatorio-box,
body.page-analise-atleta .radar-container {
    background: #fff;
    border-radius: 24px;
    padding: 20px;
    border: 1px solid var(--metro-border);
    margin-top: 12px
}

body.page-analise-atleta .relatorio-box {
    color: var(--metro-text);
    font-size: 13px;
    line-height: 1.5
}

body.page-analise-atleta .diagnostic-block {
    margin-top: 14px
}

body.page-analise-atleta .diagnostic-title {
    font-weight: 700;
    margin-bottom: 8px
}

body.page-analise-atleta .diagnostic-line {
    margin: 4px 0
}

body.page-analise-atleta .diagnostic-highlights {
    margin-top: 20px;
    font-weight: 700
}

body.page-analise-atleta .radar-container {
    margin-top: 18px
}

body.page-analise-atleta .charts-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    background: #fff
}

body.page-analise-atleta .radar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px
}

body.page-analise-atleta .radar-grid .radar-container:last-child {
    grid-column: 1 / -1
}

body.page-analise-atleta .charts-page .radar-container {
    margin-top: 0
}

body.page-analise-atleta .charts-page h3 {
    margin: 0 0 14px;
    color: var(--metro-text);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em
}

body.page-analise-atleta .potential-chart-container canvas {
    max-height: 350px
}

body.page-analise-atleta .report-hero {
    display: grid;
    grid-template-columns: 92px 1fr 132px;
    gap: 20px;
    align-items: center;
    padding: 22px;
    border: 1px solid rgba(224, 32, 32, .22);
    border-radius: 22px;
    background: linear-gradient(135deg, #fff 0%, #fff4f4 100%);
    color: var(--metro-text);
    text-align: center
}

body.page-analise-atleta .report-hero .report-athlete-photo {
    width: 92px;
    height: 92px;
    border: 3px solid rgba(255, 255, 255, .75)
}

body.page-analise-atleta .report-hero h2 {
    margin: 2px 0 6px;
    color: var(--metro-text);
    font-size: 24px;
    line-height: 1.1
}

body.page-analise-atleta .report-kicker {
    color: #8a7777;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em
}

body.page-analise-atleta .potential-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffd14a;
    font-size: 15px
}

body.page-analise-atleta .potential-stars strong {
    margin-left: 7px;
    color: var(--metro-text);
    font-size: 11px
}

body.page-analise-atleta .stars-base {
    position: relative;
    display: inline-block;
    color: #dedede;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 1px
}

body.page-analise-atleta .stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    color: #ffc62f;
    white-space: nowrap
}

body.page-analise-atleta .status-pill {
    display: inline-block;
    margin: 9px 0 6px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #111;
    font-size: 10px;
    font-weight: 800
}

body.page-analise-atleta .status-pill.excellent {
    background: #65d98b
}

body.page-analise-atleta .status-pill.good {
    background: #ffd45c
}

body.page-analise-atleta .status-pill.priority {
    background: #ff826f
}

body.page-analise-atleta .score-ring {
    position: relative;
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center
}

body.page-analise-atleta .score-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg)
}

body.page-analise-atleta .score-ring circle {
    fill: none;
    stroke-width: 12
}

body.page-analise-atleta .score-ring-track {
    stroke: #eadede
}

body.page-analise-atleta .score-ring-value {
    stroke: #e02020;
    stroke-linecap: butt
}

body.page-analise-atleta .score-ring>div {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    background: #fff;
    color: var(--metro-text)
}

body.page-analise-atleta .score-ring strong {
    font-size: 28px
}

body.page-analise-atleta .score-ring span {
    color: #777;
    font-size: 11px
}

body.page-analise-atleta .report-score-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 14px 0
}

body.page-analise-atleta .report-score-strip div {
    padding: 13px 15px;
    border: 1px solid #e7e7ea;
    border-radius: 14px;
    background: #fafafa;
    text-align: center
}

body.page-analise-atleta .report-score-strip span {
    display: block;
    color: #777;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em
}

body.page-analise-atleta .report-score-strip strong {
    display: block;
    margin-top: 3px;
    font-size: 17px
}

body.page-analise-atleta .report-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 14px;
    padding: 8px;
    border: 1px solid #e2e2e6;
    border-radius: 18px;
    background: #fff;
    color: #555;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .04)
}

body.page-analise-atleta .report-details>div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    min-height: 64px;
    padding: 10px 14px;
    text-align: center
}

body.page-analise-atleta .report-details>div:not(:nth-child(3n)) {
    border-right: 1px solid #ececef
}

body.page-analise-atleta .report-details>div:nth-child(-n+3) {
    border-bottom: 1px solid #ececef
}

body.page-analise-atleta .report-details span {
    color: #888;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

body.page-analise-atleta .report-details strong {
    color: #333;
    font-size: 12px;
    line-height: 1.25
}

body.page-analise-atleta .report-context-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px
}

body.page-analise-atleta .report-context-strip>div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    min-height: 70px;
    padding: 12px 16px;
    border: 1px solid #e2e2e6;
    border-radius: 16px;
    background: #fff;
    text-align: center
}

body.page-analise-atleta .report-context-strip span {
    color: #888;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

body.page-analise-atleta .report-context-strip strong {
    color: #333;
    font-size: 13px
}

body.page-analise-atleta .report-context-strip small {
    color: #777;
    font-size: 10px
}

body.page-analise-atleta #resultadoArea.pdf-wide-report {
    width: 125%;
    max-width: none
}

body.page-analise-atleta #resultadoArea,
body.page-analise-atleta .compact-diagnostic,
body.page-analise-atleta .summary-line,
body.page-analise-atleta .action-plan {
    text-align: center
}

body.page-analise-atleta .performance-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px
}

body.page-analise-atleta .performance-group {
    padding: 16px;
    border: 1px solid #e5e5e8;
    border-radius: 16px;
    background: #fff;
    text-align: center
}

body.page-analise-atleta .performance-row {
    margin: 9px 0
}

body.page-analise-atleta .performance-row-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    color: #444;
    font-size: 11px
}

body.page-analise-atleta .performance-row-heading strong {
    color: var(--metro-red);
    font-size: 12px
}

body.page-analise-atleta .performance-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #ececef
}

body.page-analise-atleta .performance-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #e02020, #ff6969)
}

body.page-analise-atleta .executive-grid,
body.page-analise-atleta .insights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px
}

body.page-analise-atleta .report-panel,
body.page-analise-atleta .insights-grid>section {
    padding: 16px;
    border: 1px solid #e5e5e8;
    border-radius: 16px;
    background: #fff;
    text-align: center
}

body.page-analise-atleta .report-panel h3,
body.page-analise-atleta .insights-grid h3 {
    margin: 0 0 11px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em
}

body.page-analise-atleta .summary-line {
    margin: 6px 0
}

body.page-analise-atleta .benchmark-row,
body.page-analise-atleta .pillar-row {
    margin: 9px 0
}

body.page-analise-atleta .benchmark-row label,
body.page-analise-atleta .pillar-row label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 11px
}

body.page-analise-atleta .benchmark-row>div,
body.page-analise-atleta .pillar-row>div {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #ececef
}

body.page-analise-atleta .benchmark-row span,
body.page-analise-atleta .pillar-row span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #e02020, #ff6969)
}

body.page-analise-atleta .pillars-panel {
    margin-top: 14px
}

body.page-analise-atleta .insight-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    align-items: center;
    margin: 7px 0;
    padding: 10px 12px;
    border-radius: 12px;
    text-align: center
}

body.page-analise-atleta .insight-card.strong {
    background: #eefaf2;
    border: 1px solid #cdebd7
}

body.page-analise-atleta .insight-card.evolve {
    background: #fff7e7;
    border: 1px solid #f2dfb5
}

body.page-analise-atleta .insight-card small {
    grid-column: 1 / -1;
    color: #8a6513;
    font-size: 9px;
    text-transform: uppercase
}

body.page-analise-atleta .action-plan {
    margin-top: 14px
}

body.page-analise-atleta .action-plan div {
    margin: 6px 0
}

body.page-analise-atleta .action-plan>strong {
    display: block;
    margin-top: 10px;
    color: var(--metro-red)
}

body.page-analise-atleta .compact-diagnostic {
    margin-top: 14px;
    padding: 14px;
    border-radius: 14px;
    background: #f8f8f9
}

body.page-analise-atleta canvas {
    max-height: 380px;
    width: 100%;
    margin: 0 auto
}

body.page-analise-atleta .tag-elite {
    background: rgba(224, 32, 32, 0.08);
    color: var(--metro-red);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(224, 32, 32, 0.25);
    font-weight: 700;
    font-size: 13px;
    display: inline-block;
    margin-left: 8px
}

body.page-analise-atleta .metric-highlight {
    grid-column: 1 / -1;
    background: #f7f7f7;
    border-radius: 28px;
    padding: 14px 28px;
    margin-top: 0;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
    color: #555;
    border: 1px solid #eeeeee;
    font-size: 14px;
    line-height: 1.35;
    text-align: center
}

body.page-analise-atleta .metric-highlight>span:first-child {
    font-weight: 600;
    font-size: 14px
}

body.page-analise-atleta .imc-chart {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 4px 8px 2px
}

body.page-analise-atleta .imc-chart-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 24px;
    font-size: 14px
}

body.page-analise-atleta .imc-scale {
    position: relative;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #62a8df 0 21.43%, #4eb878 21.43% 52.38%, #f2b84b 52.38% 76.19%, #df5b55 76.19% 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08)
}

body.page-analise-atleta .imc-marker {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    background: transparent;
    transform: translateX(-50%);
    z-index: 1
}

body.page-analise-atleta .imc-marker span {
    position: absolute;
    top: 7px;
    left: 50%;
    padding: 2px 7px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    transform: translate(-50%, -50%);
    white-space: nowrap
}

body.page-analise-atleta .imc-range-labels {
    display: grid;
    grid-template-columns: 21.43fr 30.95fr 23.81fr 23.81fr;
    margin-top: 8px;
    color: #666;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center
}

body.page-analise-atleta .report-imc-chart {
    margin-top: 14px;
    margin-bottom: 28px;
    padding: 12px 14px;
    border: 1px solid #eee;
    border-radius: 16px;
    background: #fafafa
}

body.page-analise-atleta .report-imc-chart .imc-chart-summary {
    margin-bottom: 22px
}

body.page-analise-atleta .helper-text {
    color: var(--metro-muted);
    font-size: 13px;
    line-height: 1.4
}

body.page-analise-atleta .profile-analysis-section,
body.page-analise-atleta .metrics-analysis-section {
    grid-column: 1 / -1
}

body.page-analise-atleta .athlete-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap
}

body.page-analise-atleta .athlete-picker-group>label {
    margin-bottom: 6px;
    color: #5f5f66;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

body.page-analise-atleta .athlete-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    max-height: 260px;
    padding: 1px;
    overflow-y: auto
}

body.page-analise-atleta .analysis-athlete-card {
    min-width: 0;
    min-height: 97px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 5px;
    border: 1px solid #d9d9df;
    border-radius: 12px;
    background: #fff;
    color: var(--metro-text);
    font-family: "Space Grotesk", sans-serif;
    text-align: center;
    cursor: pointer;
    transition: .18s ease
}

body.page-analise-atleta .analysis-athlete-card:hover,
body.page-analise-atleta .analysis-athlete-card:focus-visible {
    border-color: rgba(224, 32, 32, .55);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
    outline: none;
    transform: translateY(-2px)
}

body.page-analise-atleta .analysis-athlete-card.is-selected {
    border-color: var(--metro-red);
    background: rgba(224, 32, 32, .04);
    box-shadow: 0 0 0 2px rgba(224, 32, 32, .12)
}

body.page-analise-atleta .analysis-athlete-photo {
    width: 52px;
    height: 52px;
    display: block;
    overflow: hidden;
    border: 1px solid #dedee3;
    border-radius: 50%;
    background: #f4f4f5
}

body.page-analise-atleta .analysis-athlete-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 8%
}

body.page-analise-atleta .analysis-athlete-card strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap
}

body.page-analise-atleta .analysis-athlete-position {
    color: #77777f;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase
}

body.page-analise-atleta .athlete-picker-empty {
    grid-column: 1 / -1;
    padding: 24px;
    border: 1px dashed #d9d9df;
    border-radius: 18px;
    color: var(--metro-muted);
    font-size: 13px;
    text-align: center
}

body.page-analise-atleta .report-athlete-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eeeeee
}

body.page-analise-atleta .report-athlete-photo {
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 2px solid #dedee3;
    border-radius: 50%;
    background: #f4f4f5
}

body.page-analise-atleta .report-athlete-photo img {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    object-position: center 8%
}

body.page-analise-atleta .report-athlete-heading {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px
}

body.page-analise-atleta .footer {
    text-align: center;
    margin-top: 24px
}

body.page-analise-atleta .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-analise-atleta .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media (max-width:900px) {
    body.page-analise-atleta .page {
        grid-template-columns: 1fr
    }

    body.page-analise-atleta #profile-card-container {
        min-width: auto
    }
}

@media (max-width:640px) {
    body.page-analise-atleta {
        padding: 20px 12px
    }

    body.page-analise-atleta .analysis-card {
        padding: 20px;
        border-radius: 24px
    }

    body.page-analise-atleta .grid-2col,
    body.page-analise-atleta .attrs-row {
        grid-template-columns: 1fr
    }

    body.page-analise-atleta .metrics-category,
    body.page-analise-atleta .potential-analysis-section {
        padding: 18px 16px 6px;
        border-radius: 18px
    }

    body.page-analise-atleta .report-hero {
        grid-template-columns: 72px 1fr;
        padding: 16px
    }

    body.page-analise-atleta .report-hero .report-athlete-photo {
        width: 72px;
        height: 72px
    }

    body.page-analise-atleta .score-ring {
        grid-column: 1 / -1;
        justify-self: center
    }

    body.page-analise-atleta .report-score-strip,
    body.page-analise-atleta .report-details,
    body.page-analise-atleta .report-context-strip,
    body.page-analise-atleta .executive-grid,
    body.page-analise-atleta .insights-grid,
    body.page-analise-atleta .radar-grid,
    body.page-analise-atleta .performance-groups {
        grid-template-columns: 1fr
    }

    body.page-analise-atleta .report-details>div {
        border-right: 0 !important;
        border-bottom: 1px solid #ececef
    }

    body.page-analise-atleta .report-details>div:last-child {
        border-bottom: 0
    }

    body.page-analise-atleta .button-group {
        flex-direction: column
    }

    body.page-analise-atleta .button-group button {
        width: 100%
    }

    body.page-analise-atleta .athlete-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    body.page-analise-atleta .analysis-athlete-card {
        min-height: 87px
    }

    body.page-analise-atleta .analysis-athlete-photo {
        width: 44px;
        height: 44px
    }

    body.page-analise-atleta .report-athlete-summary {
        align-items: flex-start
    }
}

body.page-atletas {
    --metro-red: #e02020;
    --metro-text: #111;
    --metro-muted: #777;
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, .08)
}

body.page-atletas * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body.page-atletas {
    scroll-behavior: smooth
}

body.page-atletas {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    color: var(--metro-text);
    padding: 32px 16px 24px
}

body.page-atletas .page {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-atletas .content-column {
    display: flex;
    flex-direction: column;
    gap: 24px
}

body.page-atletas .athlete-navigation {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .08);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 24px;
    z-index: 5
}

body.page-atletas .program-nav,
body.page-atletas .section-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px
}

body.page-atletas .program-nav {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #ececef
}

body.page-atletas .unit-navigation {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #ececef;
    text-align: center
}

body.page-atletas .unit-navigation[hidden] {
    display: none
}

body.page-atletas .unit-navigation>span {
    display: block;
    margin-bottom: 10px;
    color: #777;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

body.page-atletas .unit-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap
}

body.page-atletas .unit-nav button {
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    padding: 8px 14px;
    background: #fff;
    color: #555;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer
}

body.page-atletas .unit-nav button.active,
body.page-atletas .unit-nav button:hover {
    border-color: var(--metro-red);
    background: var(--metro-red);
    color: #fff
}

body.page-atletas .unit-nav button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(224, 32, 32, .24)
}

body.page-atletas .program-nav button {
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    background: #f0f0f2;
    color: #444;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer
}

body.page-atletas .program-nav button.active,
body.page-atletas .program-nav button:hover {
    background: var(--metro-red);
    color: #fff
}

body.page-atletas .program-nav button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(224, 32, 32, .24)
}

body.page-atletas .section-nav a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    background: #fff;
    color: #555;
    letter-spacing: .08em;
    font-weight: 500;
    text-decoration: none;
    transition: .18s
}

body.page-atletas .section-nav a.active,
body.page-atletas .section-nav a:hover {
    background: var(--metro-red);
    color: #fff;
    border-color: var(--metro-red)
}

body.page-atletas .section-card {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, .08);
    scroll-margin-top: 160px
}

body.page-atletas .section-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--metro-red);
    font-weight: 700;
    margin-bottom: 6px
}

body.page-atletas .section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px
}

body.page-atletas .athlete-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

body.page-atletas .athlete-card {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 18px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center
}

body.page-atletas .athlete-photo {
    width: 130px;
    height: 150px;
    border-radius: 10px;
    background: #e5e5e5;
    border: 2px solid #f2b8b5;
    overflow: hidden
}

body.page-atletas .athlete-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 5%
}

body.page-atletas .athlete-name {
    font-size: 13px;
    font-weight: 600
}

body.page-atletas .athlete-position {
    font-size: 11px;
    color: var(--metro-red);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase
}

body.page-atletas .athlete-id {
    font-size: 11px;
    color: #999;
    line-height: 1.2
}

body.page-atletas .athlete-meta {
    font-size: 12px;
    color: var(--metro-muted)
}

body.page-atletas .athletes-status {
    grid-column: 1 / -1;
    padding: 18px;
    border-radius: 18px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    text-align: center
}

body.page-atletas .footer {
    text-align: center;
    margin-top: 8px
}

body.page-atletas .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-atletas .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media (max-width:900px) {
    body.page-atletas .page {
        grid-template-columns: 1fr
    }

    body.page-atletas .athlete-list {
        grid-template-columns: repeat(2, 1fr)
    }

    body.page-atletas .athlete-navigation {
        position: static
    }
}

@media (max-width:480px) {
    body.page-atletas .athlete-list {
        grid-template-columns: 1fr
    }
}

body.page-competicoes {
    --metro-red: #e02020;
    --metro-text: #111;
    --metro-muted: #777;
    --metro-warning: #fff3cd
}

body.page-competicoes * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body.page-competicoes body {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px;
    color: var(--metro-text)
}

body.page-competicoes .page {
    flex: 1;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-competicoes #profile-card-container {
    min-width: 420px
}

body.page-competicoes .content-column {
    display: flex;
    flex-direction: column;
    gap: 24px
}

body.page-competicoes .section-nav {
    background: #fff;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    top: 24px;
    z-index: 10
}

body.page-competicoes .section-nav a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    background: #fff;
    color: #555;
    letter-spacing: .08em;
    font-weight: 600;
    text-decoration: none
}

body.page-competicoes .section-nav a.active,
body.page-competicoes .section-nav a:hover {
    background: var(--metro-red);
    color: #fff;
    border-color: var(--metro-red)
}

body.page-competicoes .section-card {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
    scroll-margin-top: 20px
}

body.page-competicoes .category-card {
    margin-top: 24px
}

body.page-competicoes .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    margin-bottom: 18px
}

body.page-competicoes .section-header-left {
    display: flex;
    align-items: center;
    gap: 14px
}

body.page-competicoes .section-header img {
    width: 48px;
    height: auto;
    object-fit: contain
}

body.page-competicoes .section-title {
    font-size: 22px;
    font-weight: 700
}

body.page-competicoes .toggle-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--metro-red);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: .3s
}

body.page-competicoes .section-header.active .toggle-btn {
    transform: rotate(45deg)
}

body.page-competicoes .competition-content {
    overflow: hidden
}

body.page-competicoes h3 {
    font-size: 18px;
    margin-bottom: 10px
}

body.page-competicoes h4 {
    font-size: 13px;
    margin: 12px 0 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--metro-muted)
}

body.page-competicoes table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 16px
}

body.page-competicoes th,
body.page-competicoes td {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    text-align: center
}

body.page-competicoes th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--metro-muted)
}

body.page-competicoes td:first-child {
    width: 40px
}

body.page-competicoes .team-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600
}

body.page-competicoes .team-cell img {
    width: 28px;
    height: 28px;
    object-fit: contain
}

body.page-competicoes .metro {
    color: var(--metro-red);
    font-weight: 700
}

body.page-competicoes .proximo-jogo {
    background-color: #e9e9e9;
    border-left: 4px solid #000
}

body.page-competicoes .jogo-remarcado {
    background: var(--metro-warning);
    font-weight: bold
}

body.page-competicoes .aviso-remarcado td {
    background: var(--metro-warning);
    font-size: 13px;
    text-align: center
}

body.page-competicoes .footer {
    text-align: center;
    margin-top: 8px
}

body.page-competicoes .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-competicoes .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media (max-width:850px) {
    body.page-competicoes .page {
        grid-template-columns: 1fr
    }

    body.page-competicoes #profile-card-container {
        min-width: auto
    }
}

body.page-crias {
    --metro-red: #e02020;
    --metro-text: #111;
    --metro-muted: #777;
    --shadow-soft: 0 14px 35px rgba(0, 0, 0, .06)
}

body.page-crias * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body.page-crias {
    scroll-behavior: smooth
}

body.page-crias {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    color: var(--metro-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px
}

body.page-crias .page {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-crias #profile-card-container {
    min-width: 420px
}

body.page-crias .content-column {
    display: flex;
    flex-direction: column;
    gap: 24px
}

body.page-crias .intro-card {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: var(--shadow-soft)
}

body.page-crias .page-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px
}

body.page-crias .page-subtitle {
    color: #666;
    font-size: 14px;
    line-height: 1.7;
    max-width: 760px
}

body.page-crias .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

body.page-crias .stat {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 18px;
    padding: 16px;
    color: #555;
    font-size: 13px;
    line-height: 1.4;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

body.page-crias .stat strong {
    display: block;
    color: var(--metro-red);
    font-size: 28px;
    line-height: 1;
    margin-bottom: 6px
}

body.page-crias .section-nav {
    background: #fff;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: var(--shadow-soft);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    top: 24px;
    z-index: 10
}

body.page-crias .section-nav a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    background: #fff;
    color: #555;
    letter-spacing: .08em;
    font-weight: 600;
    text-decoration: none;
    transition: .18s
}

body.page-crias .section-nav a.active,
body.page-crias .section-nav a:hover {
    background: var(--metro-red);
    color: #fff;
    border-color: var(--metro-red)
}

body.page-crias .section-card {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: var(--shadow-soft);
    scroll-margin-top: 160px
}

body.page-crias .section-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--metro-red);
    font-weight: 700;
    margin-bottom: 6px
}

body.page-crias .section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px
}

body.page-crias .crias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px
}

body.page-crias .cria-card {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: .18s ease;
    text-align: center
}

body.page-crias .cria-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .10);
    border-color: #f2b8b5
}

body.page-crias .cria-card img.foto {
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center 10%;
    background: #e5e5e5;
    border-bottom: 2px solid #f2b8b5
}

body.page-crias .info {
    padding: 14px 10px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px
}

body.page-crias .info h3 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25
}

body.page-crias .info p {
    color: var(--metro-muted);
    font-size: 12px
}

body.page-crias .info strong {
    color: var(--metro-red);
    font-size: 12px;
    text-transform: uppercase;
    line-height: 1.2
}

body.page-crias .logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    margin: 4px auto;
    display: block
}

body.page-crias .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 18px
}

body.page-crias .modal-content {
    width: 700px;
    max-width: 95%;
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18)
}

body.page-crias .close {
    position: absolute;
    right: 18px;
    top: 14px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #555;
    background: #fafafa;
    border: 1px solid #e0e0e0
}

body.page-crias .modal-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start
}

body.page-crias .modal-grid img:first-child {
    width: 100%;
    border-radius: 18px;
    border: 1px solid #e0e0e0;
    background: #e5e5e5
}

body.page-crias .modal-grid h2 {
    font-size: 24px;
    margin: 4px 38px 8px 0
}

body.page-crias .modal-grid h3 {
    color: var(--metro-red);
    font-size: 15px;
    text-transform: uppercase
}

body.page-crias .modal-grid p {
    color: #666;
    font-size: 14px;
    line-height: 1.6
}

body.page-crias .footer {
    text-align: center;
    margin-top: 8px
}

body.page-crias .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-crias .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media(max-width:900px) {
    body.page-crias .page {
        grid-template-columns: 1fr
    }

    body.page-crias #profile-card-container {
        min-width: auto
    }

    body.page-crias .section-nav {
        position: static
    }

    body.page-crias .stats {
        grid-template-columns: 1fr
    }

    body.page-crias .modal-grid {
        grid-template-columns: 1fr
    }

    body.page-crias .cria-card img.foto {
        height: 220px
    }
}

@media(max-width:480px) {
    body.page-crias {
        padding: 20px 12px
    }

    body.page-crias .intro-card,
    body.page-crias .section-card {
        padding: 18px
    }

    body.page-crias .crias-grid {
        grid-template-columns: 1fr
    }
}

body.page-dashboard {
    --metro-red: #e02020;
    --metro-text: #111111;
    --metro-muted: #777777;
    --metro-line: rgba(0, 0, 0, .08);
    --metro-soft: #fafafa;
    --metro-panel: #f6f6f6;
    --shadow-soft: 0 16px 38px rgba(0, 0, 0, .07)
}

body.page-dashboard * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body.page-dashboard {
    font-family: "Space Grotesk", sans-serif;
    background: #ffffff;
    color: var(--metro-text);
    min-height: 100vh;
    padding: 32px 16px 24px
}

body.page-dashboard button,
body.page-dashboard input {
    font: inherit
}

body.page-dashboard .page {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 40px;
    align-items: flex-start
}

body.page-dashboard #profile-card-container {
    min-width: 420px
}

body.page-dashboard .profile-fallback {
    padding: 24px;
    border-radius: 24px;
    border: 1px dashed #dddddd;
    color: #aaaaaa
}

body.page-dashboard .content-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0
}

body.page-dashboard .dashboard-hero,
body.page-dashboard .section-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--metro-line)
}

body.page-dashboard .dashboard-hero {
    padding: 24px;
    display: grid;
    gap: 20px
}

body.page-dashboard .hero-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start
}

body.page-dashboard .section-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--metro-red);
    font-weight: 700;
    margin-bottom: 7px
}

body.page-dashboard .page-title {
    font-size: 26px;
    line-height: 1.08;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px
}

body.page-dashboard .page-subtitle,
body.page-dashboard .status-text {
    font-size: 13px;
    color: var(--metro-muted);
    line-height: 1.55
}

body.page-dashboard .refresh-button {
    width: 42px;
    height: 42px;
    border: 1px solid #dddddd;
    background: #ffffff;
    color: var(--metro-text);
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: .18s ease;
    flex: 0 0 auto
}

body.page-dashboard .refresh-button:hover {
    border-color: var(--metro-red);
    color: var(--metro-red);
    transform: rotate(18deg)
}

body.page-dashboard .refresh-button svg {
    width: 18px;
    height: 18px
}

body.page-dashboard .summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 12px
}

body.page-dashboard .summary-card {
    background: var(--metro-panel);
    border: 1px solid #e9e9e9;
    border-radius: 16px;
    padding: 16px;
    min-height: 148px;
    text-align: center;
    display: grid;
    align-content: center;
    gap: 8px
}

body.page-dashboard .summary-label,
body.page-dashboard .metric-label {
    font-size: 11px;
    color: var(--metro-muted);
    line-height: 1.35
}

body.page-dashboard .summary-label {
    color: var(--metro-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em
}

body.page-dashboard .summary-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1
}

body.page-dashboard .summary-insight {
    color: #777777;
    font-size: 12px;
    line-height: 1.45;
    max-width: 220px;
    margin: 0 auto;
    min-height: calc(12px * 1.45 * 3)
}

body.page-dashboard .tabs-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--metro-line);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 22px
}

body.page-dashboard .section-intro {
    display: flex;
    flex-direction: column
}

body.page-dashboard #tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

body.page-dashboard .tab-button {
    border: 1px solid transparent;
    background: var(--metro-panel);
    color: #555555;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    cursor: pointer;
    transition: .18s ease;
    min-height: 34px;
    width: auto;
    white-space: normal;
    line-height: 1.15;
    text-align: center
}

body.page-dashboard .tab-button:hover,
body.page-dashboard .tab-button.active {
    background: var(--metro-red);
    color: #ffffff;
    border-color: var(--metro-red)
}

body.page-dashboard .section-card {
    padding: 24px;
    display: grid;
    gap: 20px
}

body.page-dashboard .section-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start
}

body.page-dashboard .section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px
}

body.page-dashboard .section-meta {
    font-size: 12px;
    color: var(--metro-muted);
    line-height: 1.5
}

body.page-dashboard .status-pill {
    border-radius: 999px;
    border: 1px solid rgba(224, 32, 32, .22);
    background: rgba(224, 32, 32, .06);
    color: #555555;
    padding: 8px 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    white-space: nowrap
}

body.page-dashboard .metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px
}

body.page-dashboard .metric-card {
    background: var(--metro-panel);
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 16px;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: center
}

body.page-dashboard .metric-card.is-featured {
    background: #ffffff;
    border-color: rgba(224, 32, 32, .2);
    box-shadow: 0 12px 30px rgba(224, 32, 32, .08)
}

body.page-dashboard .metric-card.is-empty {
    opacity: .54
}

body.page-dashboard .metric-value {
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    text-align: center
}

body.page-dashboard .details-block {
    display: grid;
    gap: 14px
}

body.page-dashboard .details-title {
    font-size: 12px;
    color: var(--metro-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700
}

body.page-dashboard .period-highlight {
    color: var(--metro-red);
    font-weight: 700
}

body.page-dashboard .indicator-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px
}

body.page-dashboard .indicator-card {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 14px;
    padding: 13px 14px;
    min-height: 64px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    text-align: left
}

body.page-dashboard .indicator-name {
    color: #666666;
    font-size: 12px;
    line-height: 1.35;
    min-width: 0
}

body.page-dashboard .indicator-value {
    color: var(--metro-text);
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    text-align: right;
    white-space: normal
}

body.page-dashboard .indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--metro-red)
}

body.page-dashboard .comparison-card {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 16px;
    overflow: hidden
}

body.page-dashboard .comparison-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.25fr) repeat(4, minmax(120px, 1fr));
    align-items: center;
    border-bottom: 1px solid #eeeeee
}

body.page-dashboard .comparison-row:last-child {
    border-bottom: none
}

body.page-dashboard .comparison-cell {
    padding: 13px 14px;
    font-size: 12px;
    color: #666666;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal
}

body.page-dashboard .comparison-label {
    justify-content: flex-start;
    text-align: left;
    color: var(--metro-text);
    font-weight: 700
}

body.page-dashboard .comparison-head .comparison-cell {
    color: var(--metro-red);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    background: #fafafa
}

body.page-dashboard .comparison-value {
    color: var(--metro-text);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%
}

@media (max-width:720px) {
    body.page-dashboard .indicator-grid {
        grid-template-columns: 1fr
    }

    body.page-dashboard .comparison-card {
        overflow-x: auto
    }

    body.page-dashboard .comparison-row {
        min-width: 720px
    }
}

body.page-dashboard .empty-state {
    padding: 22px;
    border-radius: 18px;
    background: var(--metro-soft);
    border: 1px solid #e4e4e4;
    color: var(--metro-muted);
    font-size: 13px;
    line-height: 1.55
}

body.page-dashboard .footer {
    text-align: center;
    margin-top: 8px
}

body.page-dashboard .footer-main {
    font-size: 14px;
    color: #666666;
    margin: 0
}

body.page-dashboard .footer-sub {
    font-size: 11px;
    color: #999999;
    margin-top: 4px;
    line-height: 1.4
}

@media (max-width:980px) {
    body.page-dashboard .page {
        grid-template-columns: 1fr
    }

    body.page-dashboard #profile-card-container {
        min-width: 0
    }

    body.page-dashboard .tabs-card {
        position: static
    }
}

@media (max-width:720px) {
    body.page-dashboard {
        padding: 18px 12px
    }

    body.page-dashboard .dashboard-hero,
    body.page-dashboard .section-card {
        border-radius: 22px;
        padding: 20px
    }

    body.page-dashboard .hero-top,
    body.page-dashboard .section-header {
        flex-direction: column
    }

    body.page-dashboard .summary-grid,
    body.page-dashboard .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:460px) {
    body.page-dashboard .tabs-card {
        padding: 14px;
        gap: 10px
    }

    body.page-dashboard .summary-grid,
    body.page-dashboard .metrics-grid {
        grid-template-columns: 1fr
    }

    body.page-dashboard .page-title {
        font-size: 24px
    }
}

body.page-form {
    --metro-text: #111;
    --metro-muted: #777
}

body.page-form .form-validation-message {
    display: none;
    color: #e02020;
    font-size: 12px
}

body.page-form * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body.page-form {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px
}

body.page-form .page {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-form #profile-card-container {
    min-width: 420px
}

body.page-form .top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px
}

body.page-form .logo-wrap {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12)
}

body.page-form .logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

body.page-form .badges {
    display: flex;
    align-items: center;
    gap: 14px
}

body.page-form .badges img {
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15))
}

body.page-form .form-wrapper {
    display: flex
}

body.page-form .form-card {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px
}

body.page-form .form-title {
    font-size: 22px;
    font-weight: 700
}

body.page-form .form-subtitle {
    font-size: 13px;
    color: var(--metro-muted);
    margin-bottom: 8px
}

body.page-form .section-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--metro-muted);
    margin-top: 8px;
    font-weight: 700
}

body.page-form .field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%
}

body.page-form .field-label {
    font-size: 13px;
    font-weight: 500
}

body.page-form .field-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

body.page-form input[type="text"],
body.page-form input[type="email"],
body.page-form input[type="tel"],
body.page-form input[type="date"],
body.page-form input[type="url"],
body.page-form textarea,
body.page-form select {
    width: 100%;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    padding: 10px 14px;
    font-size: 14px;
    transition: 0.15s border-color ease, 0.15s box-shadow ease, 0.15s background-color ease;
    outline: none;
    background: #fff;
    color: var(--metro-text)
}

body.page-form textarea {
    min-height: 92px;
    border-radius: 18px;
    resize: vertical;
    font-family: inherit
}

body.page-form input[type="text"]::placeholder,
body.page-form input[type="email"]::placeholder,
body.page-form input[type="tel"]::placeholder,
body.page-form input[type="url"]::placeholder,
body.page-form textarea::placeholder {
    color: #999999
}

body.page-form input[type="text"]:focus,
body.page-form input[type="email"]:focus,
body.page-form input[type="tel"]:focus,
body.page-form input[type="date"]:focus,
body.page-form input[type="url"]:focus,
body.page-form textarea:focus,
body.page-form select:focus {
    border-color: var(--metro-red);
    box-shadow: 0 0 0 1px rgba(224, 32, 32, 0.08);
    background: #ffffff
}

body.page-form input[type="date"] {
    color: transparent;
    position: relative
}

body.page-form input[type="date"]::before {
    content: "dd/mm/aaaa";
    color: #999;
    font-size: 14px;
    position: absolute;
    left: 14px;
    top: 10px;
    pointer-events: none
}

body.page-form input[type="date"]:focus {
    color: var(--metro-text)
}

body.page-form input[type="date"]:focus::before {
    content: ""
}

body.page-form input[type="date"]:valid {
    color: var(--metro-text)
}

body.page-form input[type="date"]:valid::before {
    content: ""
}

body.page-form select:invalid {
    color: #999
}

body.page-form select option[disabled][value=""] {
    color: #999
}

body.page-form .required {
    color: var(--metro-red)
}

body.page-form .terms-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px
}

body.page-form .term-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.55
}

body.page-form .term-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex-shrink: 0
}

body.page-form .no-games {
    text-align: center;
    padding: 24px 10px;
    opacity: 0.7
}

body.page-form .no-games-text {
    font-size: 15px;
    line-height: 1.5
}

body.page-form .footer {
    text-align: center;
    margin-top: 8px
}

body.page-form .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-form .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

body.page-form .form-footer {
    display: flex;
    justify-content: flex-end
}

body.page-form .btn-submit {
    padding: 11px 26px;
    border-radius: 999px;
    border: none;
    background: var(--metro-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s
}

body.page-form .btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(224, 32, 32, 0.35);
    background: #c01818
}

body.page-form .agendamento-box {
    margin-top: 4px;
    padding: 12px 16px;
    border-radius: 18px;
    text-align: center;
    background: rgba(224, 32, 32, 0.03);
    border: 1px solid rgba(224, 32, 32, 0.18)
}

body.page-form .agendamento-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px
}

body.page-form .agendamento-data {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px
}

body.page-form .agendamento-info {
    font-size: 12px;
    color: var(--metro-muted)
}

body.page-form .conditional-hidden {
    display: none !important
}

body.page-form .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999
}

body.page-form .modal {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px 28px;
    max-width: 550px;
    width: 90%;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    text-align: center
}

body.page-form .modal-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px
}

body.page-form .modal-text {
    font-size: 14px;
    color: var(--metro-muted);
    margin-bottom: 20px
}

body.page-form .btn-modal {
    padding: 10px 24px;
    border-radius: 999px;
    border: none;
    background: var(--metro-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s
}

body.page-form .btn-modal:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(224, 32, 32, 0.35);
    background: #c01818
}

@media (max-width:850px) {
    body.page-form .page {
        grid-template-columns: 1fr
    }

    body.page-form .field-row {
        grid-template-columns: 1fr
    }
}

body.page-form #profile-card-container {
    min-width: 420px
}

@media (max-width:900px) {
    body.page-form #profile-card-container {
        min-width: auto
    }
}

body.page-form select.readonly {
    pointer-events: none;
    background-color: rgba(224, 32, 32, 0.03);
    border-color: rgba(224, 32, 32, 0.25);
    color: #555;
    appearance: none
}

body.page-index {
    --metro-text: #111;
    --metro-muted: #777
}

body.page-index * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body.page-index {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px;
    radial-gradient(circle at top left, rgba(224, 32, 32, .04), transparent 40%),
    #f5f5f5
}

body.page-index .page {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-index .group-card {
    background: #fff;
    border-radius: 24px;
    padding: 22px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
    margin-bottom: 24px
}

body.page-index .group-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    color: #999;
    margin-bottom: 16px
}

body.page-index .group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

body.page-index #profile-card-container {
    min-width: 420px
}

body.page-index .links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 8px;
    align-items: start
}

body.page-index .link-card {
    background: #fff;
    border-radius: 28px;
    padding: 20px;
    text-decoration: none;
    color: var(--metro-text);
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
    transition: all .25s ease
}

body.page-index .link-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .08)
}

body.page-index .link-row {
    display: flex;
    align-items: center;
    gap: 12px
}

body.page-index .icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0
}

body.page-index .label {
    font-size: 16px;
    font-weight: 600
}

body.page-index .sub {
    font-size: 13px;
    color: var(--metro-muted)
}

body.page-index .cta {
    margin-top: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #111;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

body.page-index .link-card:hover .cta {
    color: #E10600
}

body.page-index .cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: none;
    justify-content: center;
    z-index: 9999
}

body.page-index .cookie-box {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.10);
    padding: 24px;
    max-width: 700px;
    width: 100%;
    text-align: center;
    font-size: 14px
}

body.page-index .cookie-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 10px
}

body.page-index .cookie-header span {
    grid-column: 2;
    font-weight: 700;
    color: #111
}

body.page-index .cookie-header button {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: none;
    color: #E10600;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1
}

body.page-index .cookie-header button:hover {
    opacity: 0.7
}

body.page-index .cookie-box p {
    font-size: 14px;
    color: #777;
    line-height: 1.5
}

body.page-index .cookie-box a {
    color: #E10600;
    text-decoration: none
}

body.page-index .cookie-box a:hover {
    text-decoration: underline
}

body.page-index .cookie-box {
    position: relative
}

body.page-index .cookie-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center
}

body.page-index .btn-accept {
    background: #E10600;
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s
}

body.page-index .btn-accept:hover {
    background: #b80000
}

body.page-index .btn-reject {
    background: #e5e5e5;
    color: #333;
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
    cursor: pointer
}

body.page-index .btn-config {
    background: #f0f0f0;
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
    cursor: pointer
}

body.page-index .cookie-link {
    display: inline-block;
    margin-top: 20px;
    text-align: center;
    color: #b80000;
    text-decoration: underline;
    font-size: 12px
}

body.page-index .cookie-links {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap
}

body.page-index .cookie-links a {
    display: inline-block
}

body.page-index .footer {
    text-align: center;
    margin-top: 8px
}

body.page-index .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-index .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: 0.2s
}

body.page-index .whatsapp-float:hover {
    transform: scale(1.1)
}

body.page-index .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media (max-width:900px) {
    body.page-index .page {
        grid-template-columns: 1fr
    }

    body.page-index #profile-card-container {
        min-width: auto
    }

    body.page-index .links-grid {
        grid-template-columns: 1fr
    }
}

body.page-institucional {
    --metro-red: #e02020;
    --metro-text: #111;
    --metro-muted: #777;
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.1)
}

body.page-institucional * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body.page-institucional {
    scroll-behavior: smooth
}

body.page-institucional {
    font-family: "Space Grotesk", sans-serif;
    background: #ffffff;
    color: var(--metro-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px
}

body.page-institucional .page {
    flex: 1;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-institucional #profile-card-container {
    min-width: 420px
}

body.page-institucional .profile-card {
    background: var(--metro-card);
    border-radius: 32px;
    box-shadow: var(--shadow-soft);
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 24px;
    align-self: flex-start
}

body.page-institucional .top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px
}

body.page-institucional .logo-wrap {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    flex-shrink: 0
}

body.page-institucional .logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

body.page-institucional .badges {
    display: flex;
    align-items: center;
    gap: 14px
}

body.page-institucional .badges img {
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15))
}

body.page-institucional .badge-fpf {
    height: 38px
}

body.page-institucional .badge-cbf {
    height: 47px
}

body.page-institucional .badge-formador {
    height: 40px
}

body.page-institucional .club-name {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px
}

body.page-institucional .club-description {
    list-style: none;
    margin-bottom: 12px
}

body.page-institucional .club-description li {
    margin: 6px 0;
    color: var(--metro-muted);
    font-size: 15px
}

body.page-institucional .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center
}

body.page-institucional .tag {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid rgba(224, 32, 32, 0.28);
    background: rgba(224, 32, 32, 0.06);
    color: #555555;
    white-space: nowrap
}

body.page-institucional .section-card .pill-row .pill {
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    background-color: #fff3f3 !important;
    border: 1.5px solid #ffb3b3 !important;
    color: #5a5a5a !important;
    white-space: nowrap
}

body.page-institucional .school-units {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 28px 0
}

body.page-institucional .school-unit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 20px;
    border: 1px solid #dedee2;
    border-radius: 20px;
    background: #fafafa;
    color: #222;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: .18s ease
}

body.page-institucional .school-unit-card:hover {
    border-color: #dedee2;
    background: rgba(224, 32, 32, .06);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08)
}

body.page-institucional .school-unit-label,
body.page-institucional .school-unit-card small {
    color: #666;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase
}

body.page-institucional .school-unit-label {
    color: var(--metro-red)
}

body.page-institucional .school-unit-card:focus-visible,
body.page-institucional .school-unit-modal-close:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(224, 32, 32, .24)
}

body.page-institucional .school-unit-card strong {
    font-size: 20px;
    font-weight: 500
}

body.page-institucional .school-unit-card>span:not(.school-unit-label) {
    color: var(--metro-muted);
    font-size: 13px
}

body.page-institucional .school-unit-modal {
    position: fixed;
    inset: 0;
    width: min(820px, calc(100% - 32px));
    height: fit-content;
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 30px;
    border: 0;
    border-radius: 26px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
    overflow: auto;
    text-align: center;
    outline: 0
}

body.page-institucional .school-unit-modal .section-eyebrow {
    color: #666
}

body.page-institucional .school-unit-modal-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 22px
}

body.page-institucional .school-unit-logo {
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
    border-radius: 16px;
    object-fit: contain;
    background: #fff
}

body.page-institucional .school-unit-modal::backdrop {
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px)
}

body.page-institucional .school-unit-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f1f1f3;
    color: #333;
    font-size: 24px;
    cursor: pointer
}

body.page-institucional .school-unit-location {
    margin: -6px 0 0;
    color: #555;
    font-weight: 400
}

body.page-institucional .school-unit-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

body.page-institucional .school-unit-details>div {
    min-width: 0;
    padding: 14px;
    border: 0;
    border-radius: 14px;
    background: #f6f6f7;
    text-align: center
}

body.page-institucional .school-unit-details span,
body.page-institucional .school-unit-details strong {
    display: block
}

body.page-institucional .school-unit-details span {
    margin-bottom: 5px;
    color: #777;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

body.page-institucional .school-unit-details strong {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-line
}

body.page-institucional .school-unit-email {
    display: block;
    margin-top: 6px;
    color: #0563c1;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration-color: currentColor;
    text-underline-offset: 3px
}

body.page-institucional .school-unit-email:hover {
    color: #034b91
}

@media (max-width:720px) {

    body.page-institucional .school-units,
    body.page-institucional .school-unit-details {
        grid-template-columns: 1fr
    }

    body.page-institucional .school-unit-modal-heading {
        flex-direction: column;
        gap: 10px
    }

    body.page-institucional .school-unit-email {
        white-space: normal;
        overflow-wrap: anywhere
    }
}

body.page-institucional .content-column {
    display: flex;
    flex-direction: column;
    gap: 24px
}

body.page-institucional .section-nav {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    top: 24px;
    z-index: 5;
    backdrop-filter: blur(10px)
}

body.page-institucional .section-nav a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    background: #ffffff;
    color: #555;
    letter-spacing: 0.08em;
    font-weight: 500;
    text-decoration: none;
    transition: 0.18s ease-out
}

body.page-institucional .section-nav a:hover {
    border-color: var(--metro-red);
    color: #fff;
    background: var(--metro-red)
}

body.page-institucional .section-card {
    background: #fff;
    border-radius: 28px;
    padding: 24px 24px 26px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08)
}

body.page-institucional .section-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--metro-red);
    font-weight: 700;
    margin-bottom: 6px
}

body.page-institucional .section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px
}

body.page-institucional .section-subtitle {
    font-size: 14px;
    color: var(--metro-muted);
    margin-bottom: 18px
}

body.page-institucional .section-body {
    font-size: 14px;
    line-height: 1.6;
    color: #333
}

body.page-institucional .section-body strong {
    font-weight: 700
}

body.page-institucional .section-list {
    margin-top: 12px;
    padding-left: 18px;
    font-size: 14px;
    color: #333
}

body.page-institucional .section-list li {
    margin: 4px 0
}

body.page-institucional .pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px
}

body.page-institucional .pill {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f5f5f5;
    color: #555;
    border: 1px solid #e0e0e0
}

body.page-institucional .staff-section-group {
    margin-top: 18px
}

body.page-institucional .staff-section-heading {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--metro-muted);
    font-weight: 700;
    margin-bottom: 8px
}

body.page-institucional .staff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px
}

body.page-institucional .staff-card {
    border-radius: 18px;
    border: 1px solid #e0e0e0;
    padding: 12px 14px;
    background: #fafafa;
    display: flex;
    gap: 10px;
    align-items: flex-start
}

body.page-institucional .staff-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #e5e5e5;
    flex-shrink: 0
}

body.page-institucional .staff-photo-img {
    width: 100px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0
}

body.page-institucional .staff-photo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block
}

body.page-institucional .staff-text {
    display: flex;
    flex-direction: column
}

body.page-institucional .staff-role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--metro-red);
    margin-bottom: 2px;
    font-weight: 600
}

body.page-institucional .staff-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px
}

body.page-institucional .staff-note {
    font-size: 13px;
    color: var(--metro-muted)
}

body.page-institucional .category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
}

body.page-institucional .category-card {
    border-radius: 16px;
    border: 1px solid #e0e0e0;
    padding: 10px 12px;
    background: #fafafa
}

body.page-institucional .category-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px
}

body.page-institucional .category-age {
    font-size: 13px;
    color: var(--metro-muted)
}

body.page-institucional .supporters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 14px
}

body.page-institucional .supporter-card {
    border-radius: 18px;
    border: 1px solid #e0e0e0;
    padding: 14px;
    background: #fafafa;
    text-align: left
}

body.page-institucional .supporter-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--metro-red);
    margin-bottom: 4px;
    font-weight: 600
}

body.page-institucional .supporter-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px
}

body.page-institucional .supporter-note {
    font-size: 13px;
    color: var(--metro-muted)
}

body.page-institucional .supporter-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center
}

body.page-institucional .supporter-card .staff-photo {
    margin: 12px auto 0;
    width: 80px;
    height: 80px
}

body.page-institucional .supporter-card .staff-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

body.page-institucional .section-card {
    scroll-margin-top: 160px
}

body.page-institucional .next-matches-card {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 28px;
    text-align: center
}

body.page-institucional .next-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--metro-red)
}

body.page-institucional .next-match {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee
}

body.page-institucional .next-match:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0
}

body.page-institucional .match-category {
    font-size: 13px;
    font-weight: 600;
    color: var(--metro-red);
    margin-bottom: 6px
}

body.page-institucional .match-date {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin-bottom: 4px
}

body.page-institucional .match-info {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin-bottom: 4px
}

body.page-institucional .match-location {
    font-size: 13px;
    color: var(--metro-muted)
}

body.page-institucional .no-games {
    text-align: center;
    padding: 24px 10px;
    opacity: 0.7
}

body.page-institucional .no-games-text {
    font-size: 15px;
    line-height: 1.5
}

body.page-institucional .footer {
    text-align: center;
    margin-top: 8px
}

body.page-institucional .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-institucional .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

body.page-institucional .section-nav a.active {
    background: var(--metro-red);
    color: white;
    border-color: var(--metro-red)
}

body.page-institucional .section-card.active-section {
    border: 2px solid var(--metro-red) !important;
    box-shadow: 0 0 0 4px rgba(224, 32, 32, 0.12);
    transition: border 0.25s ease-out, box-shadow 0.25s ease-out
}

body.page-institucional .section-nav a.active {
    background: var(--metro-red);
    color: #fff;
    border-color: var(--metro-red)
}

body.page-institucional .photo-img {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    overflow: visible;
    border-radius: 0
}

body.page-institucional .photo-img img {
    width: 35mm;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    display: block
}

@media (max-width:850px) {
    body.page-institucional {
        padding-top: 20px
    }

    body.page-institucional .page {
        grid-template-columns: 1fr;
        align-items: start
    }

    body.page-institucional .profile-card {
        position: static
    }

    body.page-institucional .section-nav {
        position: static;
        margin-top: -10px
    }

    body.page-institucional .top-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    body.page-institucional .badges {
        justify-content: flex-start
    }
}

body.page-links {
    --metro-red: #e02020;
    --metro-card: #ffffff;
    --metro-text: #111111;
    --metro-muted: #777777;
    --metro-line: rgba(0, 0, 0, 0.08);
    --metro-soft: #fafafa;
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.10)
}

body.page-links * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body.page-links {
    scroll-behavior: smooth
}

body.page-links {
    font-family: "Space Grotesk", sans-serif;
    background: #ffffff;
    color: var(--metro-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px
}

body.page-links .page {
    flex: 1;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-links #profile-card-container {
    min-width: 420px
}

body.page-links .profile-fallback {
    padding: 24px;
    border-radius: 24px;
    border: 1px dashed #dddddd;
    color: #aaaaaa
}

body.page-links .content-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0
}

body.page-links .section-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 24px 24px 26px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--metro-line)
}

body.page-links .section-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--metro-red);
    font-weight: 700;
    margin-bottom: 6px
}

body.page-links .section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px
}

body.page-links .hero-title {
    font-size: 34px;
    line-height: 1.05;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px
}

body.page-links .section-subtitle {
    font-size: 14px;
    color: var(--metro-muted);
    line-height: 1.65
}

body.page-links .section-nav {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--metro-line);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    top: 24px;
    z-index: 5;
    backdrop-filter: blur(10px)
}

body.page-links .section-nav a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    background: #ffffff;
    color: #555555;
    letter-spacing: 0.08em;
    font-weight: 500;
    text-decoration: none;
    transition: 0.18s ease-out
}

body.page-links .section-nav a:hover,
body.page-links .section-nav a.active {
    border-color: var(--metro-red);
    color: #ffffff;
    background: var(--metro-red)
}

body.page-links .links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

body.page-links .link-card {
    min-height: 126px;
    background: var(--metro-soft);
    border-radius: 18px;
    border: 1px solid #e0e0e0;
    padding: 16px;
    color: var(--metro-text);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    transition: 0.20s ease-out
}

body.page-links .link-card:hover {
    transform: translateY(-3px);
    border-color: rgba(224, 32, 32, 0.45);
    box-shadow: 0 14px 35px rgba(224, 32, 32, 0.10);
    background: #ffffff
}

body.page-links .link-row {
    display: flex;
    align-items: flex-start;
    gap: 12px
}

body.page-links .link-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(224, 32, 32, 0.08);
    color: var(--metro-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 auto
}

body.page-links .link-label {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25
}

body.page-links .link-sub {
    font-size: 12px;
    color: var(--metro-muted);
    line-height: 1.45;
    margin-top: 5px
}

body.page-links .link-url {
    font-size: 11px;
    color: #999999;
    word-break: break-word
}

body.page-links .link-cta {
    color: var(--metro-red);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700
}

body.page-links .pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px
}

body.page-links .tag {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid rgba(224, 32, 32, 0.28);
    background: rgba(224, 32, 32, 0.06);
    color: #555555;
    white-space: nowrap
}

body.page-links .footer {
    text-align: center;
    margin-top: 8px
}

body.page-links .footer-main {
    font-size: 14px;
    color: #666666;
    margin: 0
}

body.page-links .footer-sub {
    font-size: 11px;
    color: #999999;
    margin-top: 4px;
    line-height: 1.4
}

body.page-links .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: 0.2s
}

body.page-links .whatsapp-float:hover {
    transform: scale(1.1)
}

body.page-links .profile-card {
    position: sticky;
    top: 24px;
    align-self: flex-start
}

@media (max-width:850px) {
    body.page-links {
        padding-top: 20px
    }

    body.page-links .page {
        grid-template-columns: 1fr;
        align-items: start
    }

    body.page-links #profile-card-container {
        min-width: 0
    }

    body.page-links .profile-card {
        position: static
    }

    body.page-links .section-nav {
        position: static;
        margin-top: -10px
    }

    body.page-links .links-grid {
        grid-template-columns: 1fr
    }
}

body.page-loja {
    --metro-red: #e02020;
    --metro-text: #111;
    --metro-muted: #777;
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.1)
}

body.page-loja * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body.page-loja {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    color: var(--metro-text);
    min-height: 100vh;
    padding: 32px 16px
}

body.page-loja .page {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px
}

body.page-loja #profile-card-container {
    min-width: 420px
}

body.page-loja .content-column {
    display: flex;
    flex-direction: column;
    gap: 24px
}

body.page-loja .page-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

body.page-loja .section-nav {
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, .08);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    top: 24px;
    z-index: 5
}

body.page-loja .section-nav a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    background: #fff;
    color: #555;
    letter-spacing: .08em;
    font-weight: 500;
    text-decoration: none;
    transition: .2s
}

body.page-loja .section-nav a:hover,
body.page-loja .section-nav a.active {
    background: var(--metro-red);
    color: #fff;
    border-color: var(--metro-red)
}

body.page-loja .section-card {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .08)
}

body.page-loja .section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px
}

body.page-loja .produtos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

body.page-loja .produto-card {
    border-radius: 22px;
    border: 1px solid #e5e5e5;
    padding: 18px;
    background: #fafafa;
    transition: .25s ease;
    overflow: hidden
}

body.page-loja .produto-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1)
}

body.page-loja .produto-img {
    width: 100%;
    height: 190px;
    display: flex;
    justify-content: center;
    align-items: center
}

body.page-loja .produto-img img {
    width: auto;
    height: 170px;
    object-fit: contain
}

body.page-loja .produto-nome {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 6px
}

body.page-loja .produto-preco {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px
}

body.page-loja .produto-card button {
    width: 100%;
    padding: 12px;
    border-radius: 18px;
    border: none;
    background: var(--metro-red);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: .2s
}

body.page-loja .produto-card button:hover {
    opacity: 0.85
}

body.page-loja .linha-descricao {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
    line-height: 1.5;
    max-width: 720px
}

body.page-loja .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    z-index: 999
}

body.page-loja .modal-content {
    background: #fff;
    width: 500px;
    max-width: 120%;
    border-radius: 24px;
    padding: 24px;
    position: relative;
    animation: page-loja-fadeIn .2s ease
}

@keyframes page-loja-fadeIn {
    from {
        transform: scale(.95);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

body.page-loja .modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 22px;
    cursor: pointer;
    font-weight: bold
}

body.page-loja .modal-img {
    display: flex;
    justify-content: center;
    margin-bottom: 16px
}

body.page-loja .modal-img img {
    max-height: 350px;
    object-fit: contain
}

body.page-loja .modal-descricao {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 12px 0
}

body.page-loja .modal-preco {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px
}

body.page-loja .modal-btn {
    width: 100%;
    padding: 12px;
    border-radius: 18px;
    border: none;
    background: var(--metro-red);
    color: #fff;
    font-weight: 700;
    cursor: pointer
}

body.page-loja .tamanhos-opcoes {
    display: flex;
    gap: 12px;
    margin-bottom: 16px
}

body.page-loja .tamanhos-opcoes button {
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    min-width: 55px;
    transition: all .2s ease
}

body.page-loja .tamanhos-opcoes button:hover {
    border-color: var(--metro-red)
}

body.page-loja .tamanhos-opcoes button.ativo {
    background: var(--metro-red);
    color: #fff;
    border-color: var(--metro-red)
}

body.page-loja .footer {
    text-align: center;
    margin-top: 8px
}

body.page-loja .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-loja .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media(max-width:1000px) {
    body.page-loja .produtos-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:850px) {
    body.page-loja .page {
        grid-template-columns: 1fr
    }
}

body.page-midia {
    --metro-red: #e02020;
    --metro-text: #111;
    --metro-muted: #777;
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, .08)
}

body.page-midia * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body.page-midia {
    scroll-behavior: smooth
}

body.page-midia {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    color: var(--metro-text);
    padding: 32px 16px 24px
}

body.page-midia .page {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-midia .profile-card {
    position: sticky;
    top: 24px
}

body.page-midia .content-column {
    display: flex;
    flex-direction: column;
    gap: 24px
}

body.page-midia .section-nav {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .08);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    top: 24px;
    z-index: 5
}

body.page-midia .section-nav a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    background: #fff;
    color: #555;
    letter-spacing: .08em;
    font-weight: 500;
    text-decoration: none;
    transition: .18s ease-out
}

body.page-midia .section-nav a.active,
body.page-midia .section-nav a:hover {
    background: var(--metro-red);
    color: #fff;
    border-color: var(--metro-red)
}

body.page-midia .section-card {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, .08);
    scroll-margin-top: 160px
}

body.page-midia .section-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--metro-red);
    font-weight: 700;
    margin-bottom: 6px
}

body.page-midia .section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px
}

body.page-midia .section-subtitle {
    font-size: 14px;
    color: var(--metro-muted);
    line-height: 1.55;
    margin-bottom: 18px
}

body.page-midia .hero-media {
    min-height: 300px;
    border-radius: 24px;
    padding: 28px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(135deg, rgba(17, 17, 17, .88), rgba(224, 32, 32, .74)), url("../asset/institucional/capa.png") center / cover;
    overflow: hidden
}

body.page-midia .hero-media .section-eyebrow {
    color: #fff;
    margin-bottom: 10px
}

body.page-midia .hero-media h1 {
    max-width: 620px;
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: 0;
    margin-bottom: 12px
}

body.page-midia .hero-media p {
    max-width: 560px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .86)
}

body.page-midia .stats-grid,
body.page-midia .featured-grid,
body.page-midia .albums-grid,
body.page-midia .videos-grid,
body.page-midia .downloads-grid {
    display: grid;
    gap: 14px
}

body.page-midia .stats-grid {
    grid-template-columns: repeat(4, 1fr)
}

body.page-midia .featured-grid,
body.page-midia .videos-grid {
    grid-template-columns: repeat(3, 1fr)
}

body.page-midia .albums-grid {
    grid-template-columns: repeat(2, 1fr)
}

body.page-midia .downloads-grid {
    grid-template-columns: repeat(4, 1fr)
}

body.page-midia .stat-card,
body.page-midia .media-card,
body.page-midia .download-card {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 18px
}

body.page-midia .stat-card {
    padding: 18px 14px;
    text-align: center
}

body.page-midia .stat-card strong {
    display: block;
    font-size: 24px;
    color: var(--metro-red);
    margin-bottom: 3px
}

body.page-midia .stat-card span {
    font-size: 12px;
    color: var(--metro-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700
}

body.page-midia .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

body.page-midia .filter-row button {
    appearance: none;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    background: #fff;
    color: #555;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 9px 14px;
    text-transform: uppercase;
    transition: .18s ease-out
}

body.page-midia .filter-row button.active,
body.page-midia .filter-row button:hover {
    background: var(--metro-red);
    border-color: var(--metro-red);
    color: #fff
}

body.page-midia .media-card {
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    min-height: 100%
}

body.page-midia .media-thumb {
    min-height: 130px;
    background: linear-gradient(135deg, rgba(17, 17, 17, .82), rgba(224, 32, 32, .72)), url("../asset/institucional/capa.png") center / cover;
    position: relative
}

body.page-midia .media-thumb::after {
    content: attr(data-label);
    position: absolute;
    left: 14px;
    bottom: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--metro-red);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

body.page-midia .media-content {
    padding: 16px
}

body.page-midia .media-content h3 {
    font-size: 16px;
    line-height: 1.25;
    margin-bottom: 6px
}

body.page-midia .media-content p {
    color: var(--metro-muted);
    font-size: 13px;
    line-height: 1.45
}

body.page-midia .video-card .media-thumb {
    display: flex;
    align-items: center;
    justify-content: center
}

body.page-midia .play-mark {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    display: grid;
    place-items: center;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .18)
}

body.page-midia .play-mark::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid var(--metro-red);
    margin-left: 4px
}

body.page-midia .download-card {
    min-height: 112px;
    padding: 16px;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    transition: .18s ease-out
}

body.page-midia .download-card:hover {
    border-color: rgba(224, 32, 32, .4);
    box-shadow: 0 10px 24px rgba(224, 32, 32, .08);
    transform: translateY(-2px)
}

body.page-midia .download-card span {
    color: var(--metro-red);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

body.page-midia .download-card strong {
    font-size: 15px;
    line-height: 1.25
}

body.page-midia .cta-row {
    background: #111;
    border-radius: 22px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px
}

body.page-midia .cta-row h3 {
    font-size: 19px;
    margin-bottom: 4px
}

body.page-midia .cta-row p {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.45
}

body.page-midia .btn-primary {
    border-radius: 999px;
    background: var(--metro-red);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 11px 16px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap
}

body.page-midia .footer {
    text-align: center;
    margin-top: 8px
}

body.page-midia .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-midia .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media (max-width:900px) {
    body.page-midia {
        padding-top: 20px
    }

    body.page-midia .page {
        grid-template-columns: 1fr
    }

    body.page-midia .profile-card,
    body.page-midia .section-nav {
        position: static
    }

    body.page-midia .section-nav {
        margin-top: -10px
    }

    body.page-midia .stats-grid,
    body.page-midia .featured-grid,
    body.page-midia .videos-grid,
    body.page-midia .downloads-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:560px) {
    body.page-midia .hero-media {
        min-height: 280px;
        padding: 22px
    }

    body.page-midia .hero-media h1 {
        font-size: 28px
    }

    body.page-midia .stats-grid,
    body.page-midia .featured-grid,
    body.page-midia .albums-grid,
    body.page-midia .videos-grid,
    body.page-midia .downloads-grid {
        grid-template-columns: 1fr
    }

    body.page-midia .cta-row {
        align-items: flex-start;
        flex-direction: column
    }
}

body.page-patrocinadores {
    --metro-red: #e02020;
    --metro-text: #111;
    --metro-muted: #777
}

body.page-patrocinadores * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body.page-patrocinadores {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    color: var(--metro-text);
    min-height: 100vh;
    padding: 32px 16px
}

body.page-patrocinadores .page {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px
}

body.page-patrocinadores #profile-card-container {
    min-width: 420px
}

body.page-patrocinadores .content-column {
    display: flex;
    flex-direction: column;
    gap: 24px
}

body.page-patrocinadores .section-card {
    background: #fff;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .08)
}

body.page-patrocinadores .page-title {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px
}

body.page-patrocinadores .page-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 32px;
    max-width: 720px;
    line-height: 1.6
}

body.page-patrocinadores .parceiros-grid {
    display: flex;
    flex-direction: column;
    gap: 30px
}

body.page-patrocinadores .parceiro-card {
    border-radius: 22px;
    border: 1px solid #e5e5e5;
    padding: 20px;
    background: #fafafa;
    transition: .25s ease;
    text-align: center
}

body.page-patrocinadores .parceiro-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1)
}

body.page-patrocinadores .parceiro-img {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px
}

body.page-patrocinadores .parceiro-img img {
    max-height: 100%;
    object-fit: contain
}

body.page-patrocinadores .parceiro-nome {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px
}

body.page-patrocinadores .parceiro-categoria {
    font-size: 13px;
    color: var(--metro-muted);
    margin-bottom: 10px
}

body.page-patrocinadores .parceiro-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 14px
}

body.page-patrocinadores .parceiro-btn {
    display: inline-block;
    padding: 8px 16px;
    background: var(--metro-red);
    color: #fff;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: .2s
}

body.page-patrocinadores .parceiro-btn:hover {
    opacity: .85
}

body.page-patrocinadores .cta-section {
    margin-top: 40px;
    padding: 24px;
    border-radius: 20px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    text-align: center
}

body.page-patrocinadores .cta-section h3 {
    font-size: 18px;
    margin-bottom: 10px
}

body.page-patrocinadores .cta-section p {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px
}

body.page-patrocinadores .cta-section a {
    display: inline-block;
    padding: 10px 20px;
    background: var(--metro-red);
    color: #fff;
    border-radius: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: .2s
}

body.page-patrocinadores .cta-section a:hover {
    opacity: .9
}

body.page-patrocinadores .footer {
    text-align: center;
    margin-top: 8px
}

body.page-patrocinadores .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-patrocinadores .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media(max-width:850px) {
    body.page-patrocinadores .page {
        grid-template-columns: 1fr
    }
}

body.page-pos-treino {
    --metro-red: #E02020;
    --metro-text: #111;
    --metro-muted: #777
}

body.page-pos-treino * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body.page-pos-treino {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px
}

body.page-pos-treino .page {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-pos-treino #profile-card-container {
    min-width: 420px
}

body.page-pos-treino .form-wrapper {
    display: flex
}

body.page-pos-treino .form-card {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px
}

body.page-pos-treino .form-title {
    font-size: 22px;
    font-weight: 700
}

body.page-pos-treino .form-subtitle {
    font-size: 13px;
    color: var(--metro-muted);
    margin-bottom: 8px
}

body.page-pos-treino .section-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--metro-muted);
    margin-top: 8px;
    font-weight: 700
}

body.page-pos-treino .field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%
}

body.page-pos-treino .field-label {
    font-size: 13px;
    font-weight: 500
}

body.page-pos-treino select,
body.page-pos-treino input[type="date"] {
    width: 100%;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: var(--metro-text)
}

body.page-pos-treino select:focus,
body.page-pos-treino input[type="date"]:focus {
    border-color: var(--metro-red);
    box-shadow: 0 0 0 1px rgba(224, 32, 32, 0.08)
}

body.page-pos-treino .required {
    color: var(--metro-red)
}

body.page-pos-treino .terms-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px
}

body.page-pos-treino .term-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5
}

body.page-pos-treino .term-item input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--metro-red)
}

body.page-pos-treino .form-footer {
    display: flex;
    justify-content: flex-end
}

body.page-pos-treino .btn-submit {
    padding: 11px 26px;
    border-radius: 999px;
    border: none;
    background: var(--metro-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s
}

body.page-pos-treino .btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(224, 32, 32, 0.35);
    background: #c01818
}

body.page-pos-treino .label-extremo {
    font-size: 12px;
    font-weight: 700
}

body.page-pos-treino .question-image {
    width: 100%;
    max-width: 420px;
    margin: 10px auto 15px;
    display: block;
    border-radius: 12px
}

body.page-pos-treino .scale-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap
}

body.page-pos-treino .scale-row label {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px
}

body.page-pos-treino .dor-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 10px
}

body.page-pos-treino .dor-grid input {
    display: none
}

body.page-pos-treino .dor-grid label {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    transition: 0.2s
}

body.page-pos-treino .dor-grid label:hover {
    border-color: #E02020
}

body.page-pos-treino .dor-grid input:checked+span {
    color: #fff;
    background: #E02020;
    padding: 4px 8px;
    border-radius: 6px
}

body.page-pos-treino .input-textarea {
    width: 100%;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    padding: 6px 16px;
    font-size: 14px;
    outline: none;
    resize: none;
    font-family: "Space Grotesk", sans-serif;
    overflow: hidden;
    line-height: 1.2
}

body.page-pos-treino .input-textarea:focus {
    border-color: #E02020;
    box-shadow: 0 0 0 2px rgba(224, 32, 32, 0.08)
}

body.page-pos-treino .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999
}

body.page-pos-treino .modal {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    text-align: center
}

body.page-pos-treino .modal-title {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px
}

body.page-pos-treino .modal-text {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px
}

body.page-pos-treino .btn-modal {
    background: #E02020;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 999px;
    cursor: pointer
}

body.page-pos-treino .section-divider-strong {
    height: 1px;
    width: 100%;
    border: none;
    background-color: #E02020;
    margin: 24px 0 12px
}

body.page-pos-treino .footer {
    text-align: center;
    margin-top: 8px
}

body.page-pos-treino .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-pos-treino .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media (max-width:900px) {
    body.page-pos-treino .page {
        grid-template-columns: 1fr
    }

    body.page-pos-treino #profile-card-container {
        min-width: auto
    }
}

body.page-pre-sumula {
    --metro-red: #e02020;
    --metro-muted: #777
}

body.page-pre-sumula * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body.page-pre-sumula {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 16px 24px;
    background: #fff;
    font-family: "Space Grotesk", sans-serif
}

body.page-pre-sumula .page {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-pre-sumula .form-card {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-self: start
}

body.page-pre-sumula .pre-sumula-intro {
    padding: 0
}

body.page-pre-sumula .pre-sumula-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.055)
}

body.page-pre-sumula .pre-sumula-panel>.section-label:first-child {
    margin-top: 0
}

body.page-pre-sumula .scout-header-section.pre-sumula-panel>.section-label {
    margin: 0;
    color: var(--metro-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase
}

body.page-pre-sumula .pre-sumula-subsection-label {
    color: var(--metro-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

body.page-pre-sumula .pre-sumula-stats-panel .form-actions {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px
}

body.page-pre-sumula .pre-sumula-action-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 auto;
}

body.page-pre-sumula .pre-sumula-action-row button {
    min-width: 180px;
}

/* Scout: mantém camisa, nome e posição alinhados na primeira coluna. */
body.page-scout .scout-table th.player-col,
body.page-scout .scout-table td:first-child {
    width: 240px;
    min-width: 240px;
}

body.page-scout .scout-table td:first-child .athlete {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
}

body.page-scout .scout-table td:first-child .athlete>div {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    text-align: left;
}

body.page-scout .scout-table td:first-child .athlete-name,
body.page-scout .scout-table td:first-child .athlete-role {
    width: 100%;
    max-width: 100%;
    text-align: left;
    white-space: nowrap;
}

body.page-scout .scout-title {
    font-size: 22px;
    letter-spacing: normal;
    text-transform: none
}

body.page-scout .scout-subtitle {
    font-size: 13px
}

body.page-pre-sumula .pre-sumula-panel {
    padding: 22px
}

body.page-pre-sumula .field-group>input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.page-pre-sumula .field-group>select {
    font-size: 12px
}

body.page-pre-sumula .programacao-grid .field-label {
    color: var(--metro-text, #111);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase
}

body.page-pre-sumula .section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 28px 0 10px
}

body.page-pre-sumula .scout-panel-heading {
    margin-top: 0
}

body.page-pre-sumula .section-count {
    color: var(--metro-red);
    font-size: 12px;
    font-weight: 700
}

body.page-pre-sumula .include-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px
}

body.page-pre-sumula .include-row select {
    flex: 1;
    min-width: 0
}

body.page-pre-sumula .include-button {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: var(--metro-red);
    color: #fff;
    font: 700 11px "Space Grotesk", sans-serif;
    cursor: pointer
}

body.page-pre-sumula .include-button:disabled {
    background: #ccc;
    cursor: not-allowed
}

body.page-pre-sumula .pre-sumula-table-wrap {
    overflow-x: auto;
    border: 1px solid #e4e4e4;
    border-radius: 18px
}

body.page-pre-sumula .pre-sumula-lineup-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 11px
}

body.page-pre-sumula .pre-sumula-lineup-table th {
    padding: 7px 2px;
    background: #f4f4f4;
    color: #606060;
    font-size: 11px;
    letter-spacing: .01em;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap
}

body.page-pre-sumula .pre-sumula-lineup-table th.player-col {
    min-width: 190px;
    width: 190px;
    text-align: center
}

body.page-pre-sumula .pre-sumula-lineup-table .player {
    display: table-row;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff
}

body.page-pre-sumula .pre-sumula-lineup-table td {
    padding: 7px 2px;
    border-top: 1px solid #ececec;
    text-align: center
}

body.page-pre-sumula .pre-sumula-lineup-table td:first-child {
    min-width: 190px;
    text-align: left
}

body.page-pre-sumula .pre-athlete-name {
    display: block;
    color: #111 !important;
    font-size: 12px;
    font-weight: 700
}

body.page-pre-sumula .pre-sumula-lineup-table tr.player.titular,
body.page-pre-sumula .pre-sumula-lineup-table tr.player.suplente {
    border: 0 !important;
    background: #fff !important
}

body.page-pre-sumula .pre-sumula-lineup-table small {
    display: block;
    margin-top: 2px;
    color: #777;
    font-size: 10px
}

body.page-pre-sumula .pre-sumula-lineup-table .pre-shirt-input {
    flex: 0 0 36px;
    width: 36px;
    height: 29px;
    padding: 3px;
    border: 1px solid var(--metro-red);
    border-radius: 8px;
    background: var(--metro-red);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font: 700 11px "Space Grotesk", sans-serif;
    text-align: center;
    outline: none
}

body.page-pre-sumula .pre-sumula-lineup-table .pre-shirt-input::placeholder {
    color: rgba(255, 255, 255, .85)
}

body.page-pre-sumula .pre-sumula-lineup-table .pre-shirt-input:focus {
    box-shadow: 0 0 0 3px rgba(224, 32, 32, .12)
}

body.page-pre-sumula .pre-sumula-lineup-table label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase
}

body.page-pre-sumula .pre-sumula-lineup-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    accent-color: var(--metro-red)
}

body.page-pre-sumula .athlete-remove {
    padding: 5px 8px;
    border: 0;
    border-radius: 7px;
    background: var(--metro-red);
    color: #fff;
    font: 700 9px "Space Grotesk", sans-serif;
    cursor: pointer
}

body.page-pre-sumula .technical-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px
}

body.page-pre-sumula .technical-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 14px;
    background: #fafafa
}

body.page-pre-sumula .technical-info .role {
    display: block;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase
}

body.page-pre-sumula .technical-info .name {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase
}

body.page-pre-sumula .technical-remove {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 0;
    border-radius: 9px;
    background: var(--metro-red);
    color: #fff;
    font: 700 11px "Space Grotesk", sans-serif;
    cursor: pointer
}

body.page-scout .form-title {
    font-size: 22px;
    font-weight: 700
}

body.page-scout .form-subtitle {
    margin-bottom: 8px;
    color: var(--metro-muted);
    font-size: 13px
}

body.page-scout .form-subtitle p {
    margin: 0
}

body.page-scout .form-actions {
    margin-top: 18px
}

/* Recuo interno compartilhado entre o perfil e os cards operacionais. */
body.page-scout .scout-panel,
body.page-pre-sumula .pre-sumula-panel {
    padding: 32px;
}

@media (max-width: 460px) {

    body.page-scout .scout-panel,
    body.page-pre-sumula .pre-sumula-panel {
        padding: 24px;
    }
}

body.page-pre-sumula .form-title {
    font-size: 22px;
    font-weight: 700
}

body.page-pre-sumula .form-subtitle {
    margin-bottom: 8px;
    color: var(--metro-muted);
    font-size: 13px
}

body.page-pre-sumula .section-label {
    margin-top: 8px;
    color: var(--metro-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase
}

body.page-pre-sumula .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

body.page-pre-sumula .field-group {
    flex: 1;
    display: flex;
    flex-direction: column
}

body.page-pre-sumula .field-group select {
    height: 40px;
    box-sizing: border-box
}

body.page-pre-sumula select,
body.page-pre-sumula input {
    height: 40px;
    padding: 6px 12px;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    font-size: 12px
}

body.page-pre-sumula select.campo-invalido,
body.page-pre-sumula input.campo-invalido {
    border-color: #e02020 !important;
    background: #fff1f1
}

body.page-pre-sumula #competicao,
body.page-pre-sumula #rodada,
body.page-pre-sumula #comissaoSelect {
    width: 100%
}

body.page-pre-sumula #comissaoSelect {
    width: 100%;
    height: 40px;
    padding: 6px 12px;
    font-size: 12px
}

body.page-pre-sumula .players-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%
}

body.page-pre-sumula .player {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    display: grid;
    grid-template-columns: 72px minmax(120px, 1fr) 82px 82px 108px;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 14px;
    background: #fff;
    font-size: 12px
}

body.page-pre-sumula .player span {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap
}

body.page-pre-sumula .player label {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #555;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap
}

body.page-pre-sumula .player input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--metro-red)
}

body.page-pre-sumula .player input[type="text"] {
    width: 100%;
    height: 32px;
    padding: 4px 8px;
    border: 1px solid #d5d5d5;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    text-align: center
}

body.page-pre-sumula .player select {
    width: 100%;
    height: 32px;
    padding: 4px 28px 4px 8px;
    border: 1px solid #d5d5d5;
    border-radius: 9px;
    font-size: 11px;
    text-align: center;
    text-align-last: center
}

body.page-pre-sumula .player.titular {
    border: 2px solid #e02020;
    background: rgba(224, 32, 32, 0.05)
}

body.page-pre-sumula .player.titular input[type="text"],
body.page-pre-sumula .player.titular select {
    color: #e02020;
    font-weight: 700
}

body.page-pre-sumula .player.suplente {
    border: 2px solid #999;
    background: #f7f7f7
}

body.page-pre-sumula .player.suplente input[type="text"],
body.page-pre-sumula .player.suplente select {
    color: #000;
    font-weight: 700
}

body.page-pre-sumula .counter {
    color: #777;
    font-size: 13px
}

body.page-pre-sumula .btn-submit {
    width: 240px;
    align-self: center;
    padding: 11px 26px;
    border: none;
    border-radius: 999px;
    background: var(--metro-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer
}

body.page-pre-sumula .sumula-box {
    margin-top: 10px;
    padding: 18px;
    border: 1px solid #eee;
    border-radius: 20px;
    background: #fafafa;
    font-family: "Space Grotesk", sans-serif;
    font-size: 15px;
    line-height: 1.6
}

/* Pré-Súmula: um único ritmo vertical controla todos os cards. */
body.page-pre-sumula .pre-sumula-panel {
    gap: 18px;
}

body.page-pre-sumula .pre-sumula-intro {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.page-pre-sumula .pre-sumula-intro>div:last-child {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.page-pre-sumula .section-label,
body.page-pre-sumula .section-heading,
body.page-pre-sumula .include-row,
body.page-pre-sumula .sumula-box,
body.page-pre-sumula .form-actions {
    margin: 0;
}

body.page-pre-sumula #players {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 18px;
}

body.page-pre-sumula .section-heading {
    min-height: 18px;
}

body.page-pre-sumula .technical-grid {
    margin: 0;
}

body.page-pre-sumula .sumula-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

body.page-pre-sumula .sumula-col {
    padding: 18px 20px;
    border: 1px solid #e6e6e6;
    border-radius: 18px;
    background: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    line-height: 1.6
}

body.page-pre-sumula .sumula-col h4 {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px
}

body.page-pre-sumula .sumula-col div {
    font-size: 16px;
    font-weight: 500
}

body.page-pre-sumula .comissao-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 14px;
    background: #fafafa;
    font-size: 14px
}

body.page-pre-sumula .comissao-card span {
    font-weight: 500
}

body.page-pre-sumula .btn-remover {
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: var(--metro-red);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer
}

body.page-pre-sumula .btn-remover:hover {
    background: #e02020;
    color: white
}

body.page-pre-sumula .comissao-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2
}

body.page-pre-sumula .comissao-info .cargo {
    color: #666;
    font-size: 13px;
    font-weight: 500
}

body.page-pre-sumula .comissao-info .nome {
    font-size: 13px;
    font-weight: 700
}

body.page-pre-sumula .toast-erro {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    padding: 14px 18px;
    border-radius: 10px;
    background: #e02020;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease
}

body.page-pre-sumula .toast-erro.show {
    opacity: 1;
    transform: translateY(0)
}

body.page-pre-sumula .sumula-icone {
    margin-left: 4px;
    color: #e02020;
    font-weight: 700
}

body.page-pre-sumula .form-wrapper {
    display: flex
}

body.page-pre-sumula .field-label {
    font-size: 13px;
    font-weight: 500
}

body.page-pre-sumula .contador-atual {
    color: #e02020;
    font-weight: 700
}

body.page-pre-sumula .contador-max {
    color: #000;
    font-weight: 700
}

body.page-pre-sumula .campos-dinamicos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

body.page-pre-sumula .campos-dinamicos .field-group {
    width: 100%
}

body.page-pre-sumula .linha-dupla {
    display: flex;
    align-items: stretch;
    gap: 10px
}

body.page-pre-sumula .linha-dupla select {
    width: 100%
}

body.page-pre-sumula .programacao-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

body.page-pre-sumula .programacao-grid .field-group {
    display: flex;
    flex-direction: column;
    width: 100%
}

body.page-pre-sumula .programacao-grid .field-group.full {
    grid-column: 1 / -1
}

body.page-pre-sumula .programacao-grid label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    font-family: "Space Grotesk", sans-serif;
    color: #000
}

body.page-pre-sumula .programacao-grid input {
    width: 100%;
    height: 40px;
    padding: 6px 12px;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    font-size: 12px;
    font-family: "Space Grotesk", sans-serif
}

body.page-pre-sumula .footer {
    margin-top: 8px;
    text-align: center
}

body.page-pre-sumula .footer-main {
    margin: 0;
    color: #666;
    font-size: 14px
}

body.page-pre-sumula .footer-sub {
    margin-top: 4px;
    color: #999;
    font-size: 11px;
    line-height: 1.4
}

body.page-pre-sumula #mensagemErro {
    display: none;
    margin-top: 6px;
    padding: 10px 14px;
    border: 1px solid #ffb3b3;
    border-radius: 10px;
    background: #ffe9e9;
    color: #b30000;
    font-size: 13px
}

@media (max-width:900px) {
    body.page-pre-sumula .page {
        grid-template-columns: 1fr
    }
}

@media (max-width:850px) {
    body.page-pre-sumula #profile-card-container {
        min-width: auto
    }
}

@media (max-width:620px) {
    body.page-pre-sumula {
        padding-inline: 8px
    }

    body.page-pre-sumula .form-card {
        gap: 14px
    }

    body.page-pre-sumula .pre-sumula-panel {
        padding: 32px;
        border-radius: 20px
    }

    body.page-pre-sumula .field-row,
    body.page-pre-sumula .programacao-grid {
        grid-template-columns: 1fr
    }

    body.page-pre-sumula .programacao-grid .field-group.full {
        grid-column: auto
    }

    body.page-pre-sumula .linha-dupla {
        flex-direction: column
    }

    body.page-pre-sumula .player {
        min-height: 72px;
        grid-template-columns: 72px minmax(0, 1fr) 104px;
        grid-template-areas: "camisa nome funcao" "capitao goleiro goleiro";
        row-gap: 8px
    }

    body.page-pre-sumula .player>input[type="text"] {
        grid-area: camisa
    }

    body.page-pre-sumula .player>span {
        grid-area: nome
    }

    body.page-pre-sumula .player>label:first-of-type {
        grid-area: capitao;
        justify-content: flex-start
    }

    body.page-pre-sumula .player>label:last-of-type {
        grid-area: goleiro;
        justify-content: flex-start
    }

    body.page-pre-sumula .player>select {
        grid-area: funcao
    }

    body.page-pre-sumula .sumula-grid {
        grid-template-columns: 1fr
    }

    body.page-pre-sumula .form-actions {
        flex-wrap: wrap
    }
}

body.page-pre-treino {
    --metro-red: #E02020;
    --metro-text: #111;
    --metro-muted: #777
}

body.page-pre-treino * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body.page-pre-treino {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px
}

body.page-pre-treino .page {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-pre-treino #profile-card-container {
    min-width: 420px
}

body.page-pre-treino .form-wrapper {
    display: flex
}

body.page-pre-treino .form-card {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px
}

body.page-pre-treino .form-title {
    font-size: 22px;
    font-weight: 700
}

body.page-pre-treino .form-subtitle {
    font-size: 13px;
    color: var(--metro-muted);
    margin-bottom: 8px
}

body.page-pre-treino .section-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--metro-muted);
    margin-top: 8px;
    font-weight: 700
}

body.page-pre-treino .field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%
}

body.page-pre-treino .field-label {
    font-size: 13px;
    font-weight: 500
}

body.page-pre-treino select,
body.page-pre-treino input[type="date"] {
    width: 100%;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: var(--metro-text)
}

body.page-pre-treino select:focus,
body.page-pre-treino input[type="date"]:focus {
    border-color: var(--metro-red);
    box-shadow: 0 0 0 1px rgba(224, 32, 32, 0.08)
}

body.page-pre-treino .required {
    color: var(--metro-red)
}

body.page-pre-treino .terms-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px
}

body.page-pre-treino .term-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5
}

body.page-pre-treino .term-item input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--metro-red)
}

body.page-pre-treino .form-footer {
    display: flex;
    justify-content: flex-end
}

body.page-pre-treino .btn-submit {
    padding: 11px 26px;
    border-radius: 999px;
    border: none;
    background: var(--metro-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s
}

body.page-pre-treino .btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(224, 32, 32, 0.35);
    background: #c01818
}

body.page-pre-treino .label-extremo {
    font-size: 12px;
    font-weight: 700
}

body.page-pre-treino .question-image {
    width: 100%;
    max-width: 420px;
    margin: 10px auto 15px;
    display: block;
    border-radius: 12px
}

body.page-pre-treino .scale-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap
}

body.page-pre-treino .scale-row label {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px
}

body.page-pre-treino .dor-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 10px
}

body.page-pre-treino .dor-grid input {
    display: none
}

body.page-pre-treino .dor-grid label {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    transition: 0.2s
}

body.page-pre-treino .dor-grid label:hover {
    border-color: #E02020
}

body.page-pre-treino .dor-grid input:checked+span {
    color: #fff;
    background: #E02020;
    padding: 4px 8px;
    border-radius: 6px
}

body.page-pre-treino .input-textarea {
    width: 100%;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    padding: 6px 16px;
    font-size: 14px;
    outline: none;
    resize: none;
    font-family: "Space Grotesk", sans-serif;
    overflow: hidden;
    line-height: 1.2
}

body.page-pre-treino .input-textarea:focus {
    border-color: #E02020;
    box-shadow: 0 0 0 2px rgba(224, 32, 32, 0.08)
}

body.page-pre-treino .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999
}

body.page-pre-treino .modal {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    text-align: center
}

body.page-pre-treino .modal-title {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px
}

body.page-pre-treino .modal-text {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px
}

body.page-pre-treino .btn-modal {
    background: #E02020;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 999px;
    cursor: pointer
}

body.page-pre-treino .section-divider-strong {
    height: 1px;
    width: 100%;
    border: none;
    background-color: #E02020;
    margin: 24px 0 12px
}

body.page-pre-treino .footer {
    text-align: center;
    margin-top: 8px
}

body.page-pre-treino .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-pre-treino .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media (max-width:900px) {
    body.page-pre-treino .page {
        grid-template-columns: 1fr
    }

    body.page-pre-treino #profile-card-container {
        min-width: auto
    }
}

body.page-prontuario {
    --metro-red: #E02020;
    --metro-text: #111;
    --metro-muted: #777
}

body.page-prontuario * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body.page-prontuario {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px;
    opacity: 1 !important
}

body.page-prontuario *::before,
body.page-prontuario *::after {
    background: none !important
}

body.page-prontuario .page {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-prontuario #profile-card-container {
    min-width: 420px
}

body.page-prontuario .form-wrapper {
    display: flex
}

body.page-prontuario .form-card {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px
}

body.page-prontuario .form-title {
    font-size: 22px;
    font-weight: 700
}

body.page-prontuario .form-subtitle {
    font-size: 13px;
    color: var(--metro-muted);
    margin-bottom: 8px
}

body.page-prontuario .section-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--metro-muted);
    margin-top: 8px;
    font-weight: 700
}

body.page-prontuario .field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%
}

body.page-prontuario .field-label {
    font-size: 13px;
    font-weight: 500
}

body.page-prontuario select,
body.page-prontuario input[type="date"] {
    width: 100%;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: var(--metro-text)
}

body.page-prontuario select:focus,
body.page-prontuario input[type="date"]:focus {
    border-color: var(--metro-red);
    box-shadow: 0 0 0 1px rgba(224, 32, 32, 0.08)
}

body.page-prontuario .required {
    color: var(--metro-red)
}

body.page-prontuario .terms-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px
}

body.page-prontuario .term-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5
}

body.page-prontuario .term-item input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--metro-red)
}

body.page-prontuario .form-footer {
    display: flex;
    justify-content: flex-end
}

body.page-prontuario .btn-submit {
    padding: 11px 26px;
    border-radius: 999px;
    border: none;
    background: var(--metro-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s
}

body.page-prontuario .btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(224, 32, 32, 0.35);
    background: #c01818
}

body.page-prontuario .label-extremo {
    font-size: 12px;
    font-weight: 700
}

body.page-prontuario .question-image {
    width: 100%;
    max-width: 420px;
    margin: 10px auto 15px;
    display: block;
    border-radius: 12px
}

body.page-prontuario .scale-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap
}

body.page-prontuario .scale-row label {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px
}

body.page-prontuario .dor-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 10px
}

body.page-prontuario .dor-grid input {
    display: none
}

body.page-prontuario .dor-grid label {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    transition: 0.2s
}

body.page-prontuario .dor-grid label:hover {
    border-color: #E02020
}

body.page-prontuario .dor-grid input:checked+span {
    color: #fff;
    background: #E02020;
    padding: 4px 8px;
    border-radius: 6px
}

body.page-prontuario .input-textarea {
    width: 100%;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    padding: 6px 16px;
    font-size: 14px;
    outline: none;
    resize: none;
    font-family: "Space Grotesk", sans-serif;
    overflow: hidden;
    line-height: 1.2
}

body.page-prontuario .input-textarea:focus {
    border-color: #E02020;
    box-shadow: 0 0 0 2px rgba(224, 32, 32, 0.08)
}

body.page-prontuario .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px
}

body.page-prontuario .section-divider-strong {
    height: 1px;
    width: 100%;
    border: none;
    background-color: #E02020;
    margin: 24px 0 12px
}

body.page-prontuario .custom-file-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 160px;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #d32f2f;
    color: #fff;
    border-radius: 8px;
    font-weight: 500;
    font-size: 12px;
    transition: 0.3s;
    white-space: nowrap
}

body.page-prontuario .custom-file-upload:hover {
    background-color: #b71c1c
}

body.page-prontuario .custom-file-upload input {
    display: none
}

body.page-prontuario #file-name {
    display: inline-block;
    margin-left: 10px;
    font-size: 13px;
    color: #555
}

body.page-prontuario .btn-gravar {
    background-color: #d32f2f;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer
}

body.page-prontuario .btn-gravar:hover {
    background-color: #b71c1c
}

body.page-prontuario .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999
}

body.page-prontuario .modal {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px 28px;
    max-width: 550px;
    width: 90%;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    text-align: center
}

body.page-prontuario .modal-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px
}

body.page-prontuario .modal-text {
    font-size: 14px;
    color: var(--metro-muted);
    margin-bottom: 20px
}

body.page-prontuario .btn-modal {
    padding: 10px 24px;
    border-radius: 999px;
    border: none;
    background: var(--metro-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s
}

body.page-prontuario .modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 9999
}

body.page-prontuario .modal-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 9999
}

body.page-prontuario .modal-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px
}

body.page-prontuario .btn-cancelar {
    margin-left: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer
}

body.page-prontuario #grupo-profissional .field-label {
    margin-bottom: 5px
}

body.page-prontuario #grupo-profissional select {
    border-top: none
}

body.page-prontuario .label-profissional {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 500
}

body.page-prontuario .field-group-profissional {
    display: flex;
    flex-direction: column;
    gap: 0
}

body.page-prontuario .field-group-profissional .field-label {
    margin-bottom: 10px
}

body.page-prontuario select {
    color: #aaa;
    transition: color 0.2s ease
}

body.page-prontuario select.select-filled {
    color: #111
}

body.page-prontuario .contador-wrapper {
    margin-top: 6px
}

body.page-prontuario .contador-text {
    font-size: 12px;
    color: #777;
    display: block;
    margin-bottom: 4px
}

body.page-prontuario .contador-barra {
    width: 100%;
    height: 6px;
    background: #eee;
    border-radius: 999px;
    overflow: hidden
}

body.page-prontuario .contador-progresso {
    height: 100%;
    width: 0%;
    background: #4CAF50;
    transition: width 0.2s ease, background 0.2s ease
}

body.page-prontuario .select-wrapper {
    position: relative
}

body.page-prontuario .select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    padding: 10px 44px 10px 14px;
    font-size: 14px;
    background: #fff;
    cursor: pointer
}

body.page-prontuario .select-wrapper::after {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23111' viewBox='0 0 20 20'><path d='M5 7l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none
}

body.page-prontuario .select-wrapper:focus-within::after {
    transform: translateY(-50%) rotate(180deg)
}

body.page-prontuario .footer {
    text-align: center;
    margin-top: 8px
}

body.page-prontuario .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-prontuario .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media (max-width:900px) {
    body.page-prontuario .page {
        grid-template-columns: 1fr
    }

    body.page-prontuario #profile-card-container {
        min-width: auto
    }
}

body.page-redes {
    --metro-text: #111;
    --metro-muted: #777
}

body.page-redes * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body.page-redes {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px
}

body.page-redes .page {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-redes #profile-card-container {
    min-width: 420px
}

body.page-redes .social-content-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06)
}

body.page-redes .links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
}

body.page-redes .link-card {
    background: #fff;
    border-radius: 28px;
    padding: 20px;
    text-decoration: none;
    color: var(--metro-text);
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
    transition: .2s ease
}

body.page-redes .link-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12)
}

body.page-redes .link-row {
    display: flex;
    align-items: center;
    gap: 12px
}

body.page-redes .icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0
}

body.page-redes .label {
    font-size: 16px;
    font-weight: 600
}

body.page-redes .sub {
    font-size: 13px;
    color: var(--metro-muted)
}

body.page-redes .cta {
    font-size: 14px;
    font-weight: 600
}

body.page-redes .footer {
    text-align: center;
    margin-top: 8px
}

body.page-redes .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-redes .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media (max-width:900px) {
    body.page-redes .page {
        grid-template-columns: 1fr
    }

    body.page-redes #profile-card-container {
        min-width: auto
    }

    body.page-redes .links-grid {
        grid-template-columns: 1fr
    }
}

body.page-registrar-jogos {
    --metro-red: #e02020;
    --metro-muted: #777;
    --metro-border: rgba(0, 0, 0, 0.08)
}

body.page-registrar-jogos * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body.page-registrar-jogos {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px;
    background: #fff;
    font-family: "Space Grotesk", sans-serif
}

body.page-registrar-jogos .page {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-registrar-jogos .form-card {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-self: start;
    padding: 24px;
    border: 1px solid var(--metro-border);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06)
}

body.page-registrar-jogos .form-title {
    font-size: 22px;
    font-weight: 700
}

body.page-registrar-jogos .form-subtitle {
    margin-bottom: 8px;
    color: var(--metro-muted);
    font-size: 13px;
    line-height: 1.5
}

body.page-registrar-jogos .section-label {
    margin-top: 8px;
    color: var(--metro-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase
}

body.page-registrar-jogos .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

body.page-registrar-jogos .field-group {
    display: flex;
    flex-direction: column;
    gap: 6px
}

body.page-registrar-jogos .field-group.full {
    grid-column: 1 / -1
}

body.page-registrar-jogos .field-label {
    font-size: 13px;
    font-weight: 500
}

body.page-registrar-jogos select,
body.page-registrar-jogos input,
body.page-registrar-jogos textarea {
    width: 100%;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    background: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px
}

body.page-registrar-jogos textarea {
    min-height: 86px;
    padding: 12px 14px;
    border-radius: 18px;
    resize: vertical
}

body.page-registrar-jogos select.campo-invalido,
body.page-registrar-jogos input.campo-invalido,
body.page-registrar-jogos textarea.campo-invalido {
    border-color: var(--metro-red) !important;
    background: #fff1f1
}

body.page-registrar-jogos .team-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

body.page-registrar-jogos .mode-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer
}

body.page-registrar-jogos .mode-option input {
    width: 14px;
    min-height: 14px;
    accent-color: var(--metro-red)
}

body.page-registrar-jogos .btn-submit {
    width: 240px;
    align-self: center;
    padding: 11px 26px;
    border: none;
    border-radius: 999px;
    background: var(--metro-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer
}

body.page-registrar-jogos .btn-submit:disabled {
    cursor: not-allowed;
    opacity: 0.65
}

body.page-registrar-jogos .btn-secondary {
    width: 180px;
    align-self: center;
    padding: 10px 20px;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-weight: 600;
    cursor: pointer
}

body.page-registrar-jogos .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px
}

body.page-registrar-jogos .status-box {
    display: none;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4
}

body.page-registrar-jogos .status-box.show {
    display: block
}

body.page-registrar-jogos .status-box.success {
    border: 1px solid #bce8c6;
    background: #effaf1;
    color: #146c2e
}

body.page-registrar-jogos .status-box.error {
    border: 1px solid #ffb3b3;
    background: #ffe9e9;
    color: #b30000
}

body.page-registrar-jogos .games-list {
    display: grid;
    gap: 8px
}

body.page-registrar-jogos .game-card {
    padding: 14px;
    border: 1px solid #e6e6e6;
    border-radius: 18px;
    background: #fafafa;
    font-size: 13px;
    line-height: 1.45
}

body.page-registrar-jogos .game-card strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px
}

body.page-registrar-jogos .game-team-metro {
    color: var(--metro-red)
}

body.page-registrar-jogos .game-meta {
    color: var(--metro-muted);
    font-size: 12px
}

body.page-registrar-jogos .footer {
    margin-top: 8px;
    text-align: center
}

body.page-registrar-jogos .footer-main {
    margin: 0;
    color: #666;
    font-size: 14px
}

body.page-registrar-jogos .footer-sub {
    margin-top: 4px;
    color: #999;
    font-size: 11px;
    line-height: 1.4
}

@media (max-width:900px) {
    body.page-registrar-jogos .page {
        grid-template-columns: 1fr
    }
}

@media (max-width:640px) {
    body.page-registrar-jogos {
        padding: 20px 12px
    }

    body.page-registrar-jogos .form-card {
        padding: 20px;
        border-radius: 22px
    }

    body.page-registrar-jogos .field-row,
    body.page-registrar-jogos .team-mode {
        grid-template-columns: 1fr
    }

    body.page-registrar-jogos .btn-submit,
    body.page-registrar-jogos .btn-secondary {
        width: 100%
    }
}

body.page-cadastros {
    --metro-red: #e02020;
    --metro-red-dark: #b21f24;
    --metro-text: #171717;
    --metro-muted: #747474;
    --metro-border: rgba(0, 0, 0, .08)
}

body.page-cadastros * {
    box-sizing: border-box
}

body.page-cadastros {
    min-height: 100vh;
    margin: 0;
    padding: 32px 16px 24px;
    background: #fff;
    color: var(--metro-text);
    font-family: "Space Grotesk", sans-serif
}

body.page-cadastros.modal-open {
    overflow: hidden
}

body.page-cadastros .page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 40px;
    align-items: start
}

body.page-cadastros #profile-card-container {
    width: 100%;
    min-width: 420px
}

body.page-cadastros .cadastros-content {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px
}

body.page-cadastros .cadastros-card {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--metro-border);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06)
}

body.page-cadastros .cadastros-controls-card {
    padding-top: 16px
}

body.page-cadastros .cadastros-results-card {
    gap: 0
}

body.page-cadastros .cadastros-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px
}

body.page-cadastros .cadastros-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px
}

body.page-cadastros .form-title {
    font-size: 24px;
    font-weight: 700
}

body.page-cadastros .form-subtitle {
    max-width: 620px;
    margin: 7px 0 0;
    color: var(--metro-muted);
    font-size: 13px;
    line-height: 1.55
}

body.page-cadastros .btn-refresh {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 17px;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    background: #fff;
    color: #292929;
    font: 600 12px/1 "Space Grotesk", sans-serif;
    cursor: pointer
}

body.page-cadastros .btn-incluir-cadastro {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 18px;
    border: 1px solid var(--metro-red);
    border-radius: 999px;
    background: var(--metro-red);
    color: #fff;
    font: 700 12px/1 "Space Grotesk", sans-serif;
    cursor: pointer
}

body.page-cadastros .btn-incluir-cadastro:hover {
    border-color: var(--metro-red-dark);
    background: var(--metro-red-dark)
}

body.page-cadastros .cadastros-classificacoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ececef
}

body.page-cadastros .cadastro-classificacao {
    min-height: 42px;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: #f0f0f2;
    color: #444;
    font: 700 12px/1 "Space Grotesk", sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: .18s ease
}

body.page-cadastros .cadastro-classificacao.is-active,
body.page-cadastros .cadastro-classificacao:hover {
    background: var(--metro-red);
    color: #fff
}

body.page-cadastros .cadastro-classificacao:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(224, 32, 32, .24)
}

body.page-cadastros .cadastros-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
    background: transparent
}

body.page-cadastros .cadastro-tab[hidden] {
    display: none
}

body.page-cadastros .cadastro-tab {
    min-height: 42px;
    padding: 9px 18px;
    border: 1px solid #d3d3d3;
    border-radius: 999px;
    background: #fff;
    color: #59595d;
    font: 700 12px/1.15 "Space Grotesk", sans-serif;
    cursor: pointer;
    transition: .18s ease
}

body.page-cadastros .cadastro-tab.is-active {
    border-color: var(--metro-red);
    background: var(--metro-red);
    color: #fff;
    box-shadow: none
}

body.page-cadastros .cadastro-tab:not(.is-active):hover {
    border-color: #aaa;
    background: #fafafa
}

body.page-cadastros .cadastros-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

body.page-cadastros .cadastros-search {
    flex: 1;
    min-width: 0
}

body.page-cadastros .cadastros-search input {
    width: 100%;
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid #d7d7d7;
    border-radius: 999px;
    background: #fff;
    font: 400 12px/1 "Space Grotesk", sans-serif
}

body.page-cadastros .cadastros-summary {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #777;
    font-size: 12px
}

body.page-cadastros .cadastros-summary strong {
    color: var(--metro-red);
    font-size: 18px
}

body.page-cadastros .status-box {
    display: none;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4
}

body.page-cadastros .status-box.show {
    display: block
}

body.page-cadastros .status-box.success {
    border: 1px solid #bce8c6;
    background: #effaf1;
    color: #146c2e
}

body.page-cadastros .status-box.error {
    border: 1px solid #ffb3b3;
    background: #ffe9e9;
    color: #b30000
}

body.page-cadastros .cadastros-list {
    display: grid;
    gap: 10px
}

body.page-cadastros .cadastro-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 12px 15px;
    border: 1px solid #e7e7e7;
    border-radius: 18px;
    background: #fafafa
}

body.page-cadastros .cadastro-item-copy {
    min-width: 0
}

body.page-cadastros .cadastro-item-copy>strong {
    display: block;
    overflow: hidden;
    color: #1b1b1b;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap
}

body.page-cadastros .cadastro-item-copy>p {
    margin: 5px 0 0;
    color: #777;
    font-size: 11px;
    line-height: 1.35
}

body.page-cadastros .cadastro-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px
}

body.page-cadastros .cadastro-item-meta span {
    padding: 4px 8px;
    border-radius: 999px;
    background: #ececef;
    color: #606065;
    font-size: 10px;
    font-weight: 600
}

body.page-cadastros .cadastro-item-meta span.is-active {
    background: #e6f4ea;
    color: #137333
}

body.page-cadastros .cadastro-item-meta span.is-inactive {
    background: #fce8e6;
    color: #c5221f
}

body.page-cadastros .cadastro-item-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 7px
}

body.page-cadastros .btn-editar-cadastro,
body.page-cadastros .btn-remover-cadastro {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    font: 600 11px/1 "Space Grotesk", sans-serif;
    cursor: pointer
}

body.page-cadastros .btn-editar-cadastro {
    border: 1px solid #d3d3d3;
    background: #fff;
    color: #222
}

body.page-cadastros .btn-remover-cadastro {
    border: 1px solid #f1bcbc;
    background: #fff4f4;
    color: #b21f24
}

body.page-cadastros .cadastros-empty {
    padding: 36px 20px;
    border: 1px dashed #d4d4d4;
    border-radius: 18px;
    color: #777;
    font-size: 13px;
    text-align: center
}

body.page-cadastros .cadastro-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(10, 10, 10, .48);
    backdrop-filter: blur(7px)
}

body.page-cadastros .cadastro-modal[hidden] {
    display: none
}

body.page-cadastros .cadastro-modal-panel {
    position: relative;
    width: min(100%, 700px);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 22px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .24)
}

body.page-cadastros .cadastro-confirm-panel {
    width: min(100%, 460px);
    padding: 28px 24px 24px;
    text-align: center
}

body.page-cadastros .cadastro-confirm-panel .cadastro-modal-eyebrow {
    padding: 0 44px
}

body.page-cadastros .cadastro-modal-panel.cadastro-confirm-panel h2 {
    margin: 0 44px 10px;
    text-align: center
}

body.page-cadastros .cadastro-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 34px;
    height: 34px;
    border: 1px solid #dedede;
    border-radius: 50%;
    background: #fff;
    color: #555;
    font: 400 23px/1 sans-serif;
    cursor: pointer
}

body.page-cadastros .cadastro-modal-eyebrow {
    margin-bottom: 5px;
    color: var(--metro-red);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

body.page-cadastros .cadastro-modal-panel h2 {
    margin: 0 44px 8px 0;
    font-size: 21px
}

body.page-cadastros .cadastro-confirm-panel p {
    margin: 0 auto 24px;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    text-align: center
}

body.page-cadastros .cadastro-confirm-panel .cadastro-modal-actions {
    justify-content: center
}

body.page-cadastros .cadastro-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 2px
}

body.page-cadastros .cadastro-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px
}

body.page-cadastros .cadastro-form-field.is-full,
body.page-cadastros .cadastro-modal-actions.is-full {
    grid-column: 1 / -1
}

body.page-cadastros .cadastro-form-field>span {
    color: #555;
    font-size: 11px;
    font-weight: 600
}

body.page-cadastros .cadastro-form input,
body.page-cadastros .cadastro-form select,
body.page-cadastros .cadastro-form textarea {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #d6d6d6;
    border-radius: 13px;
    background: #fff;
    font: 400 12px/1.3 "Space Grotesk", sans-serif
}

body.page-cadastros .cadastro-form input[readonly] {
    background: #f3f3f4;
    color: #777
}

body.page-cadastros .cadastro-form textarea {
    min-height: 64px;
    resize: vertical
}

body.page-cadastros .cadastro-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 0
}

body.page-cadastros .btn-cancelar,
body.page-cadastros .btn-salvar-cadastro,
body.page-cadastros .btn-remover-confirmar {
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 999px;
    font: 600 12px/1 "Space Grotesk", sans-serif;
    cursor: pointer
}

body.page-cadastros .btn-cancelar {
    border: 1px solid #d5d5d5;
    background: #fff;
    color: #333
}

body.page-cadastros .btn-salvar-cadastro {
    border: 0;
    background: var(--metro-red);
    color: #fff
}

body.page-cadastros .btn-remover-confirmar {
    border: 0;
    background: var(--metro-red);
    color: #fff
}

body.page-cadastros .btn-cancelar:focus-visible,
body.page-cadastros .btn-remover-confirmar:focus-visible {
    outline: 3px solid rgba(224, 32, 32, .22);
    outline-offset: 3px
}

body.page-cadastros .btn-remover-confirmar:hover {
    background: #b21f24
}

body.page-cadastros button:disabled {
    cursor: wait;
    opacity: .65
}

body.page-cadastros .operation-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .35)
}

body.page-cadastros .operation-modal-backdrop[hidden] {
    display: none
}

body.page-cadastros .operation-modal {
    width: min(90%, 550px);
    padding: 24px 28px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
    text-align: center
}

body.page-cadastros .operation-modal-title {
    margin-bottom: 10px;
    color: var(--metro-text);
    font-size: 20px;
    font-weight: 700
}

body.page-cadastros .operation-modal-text {
    margin-bottom: 20px;
    color: var(--metro-muted);
    font-size: 14px;
    line-height: 1.5
}

body.page-cadastros .operation-modal-button {
    padding: 10px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--metro-red);
    color: #fff;
    font: 600 12px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
    transition: .15s
}

body.page-cadastros .operation-modal-button:hover {
    background: #c01818;
    box-shadow: 0 10px 25px rgba(224, 32, 32, .35);
    transform: translateY(-1px)
}

body.page-scout .operation-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .35)
}

body.page-scout .operation-modal-backdrop[hidden] {
    display: none
}

body.page-scout .operation-modal {
    width: min(90%, 550px);
    padding: 24px 28px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
    text-align: center
}

body.page-scout .operation-modal-title {
    margin-bottom: 10px;
    color: #161616;
    font-size: 20px;
    font-weight: 700
}

body.page-scout .operation-modal-text {
    margin-bottom: 20px;
    color: #777;
    font-size: 14px;
    line-height: 1.5
}

body.page-scout .operation-modal-button {
    padding: 10px 24px;
    border: 0;
    border-radius: 999px;
    background: #e02020;
    color: #fff;
    font: 600 12px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
    transition: .15s
}

body.page-scout .operation-modal-button:hover {
    background: #c01818;
    box-shadow: 0 10px 25px rgba(224, 32, 32, .35);
    transform: translateY(-1px)
}

body.page-pre-sumula .operation-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .35)
}

body.page-pre-sumula .operation-modal-backdrop[hidden] {
    display: none
}

body.page-pre-sumula .operation-modal {
    width: min(90%, 550px);
    padding: 24px 28px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
    text-align: center
}

body.page-pre-sumula .operation-modal-title {
    margin-bottom: 10px;
    color: #161616;
    font-size: 20px;
    font-weight: 700
}

body.page-pre-sumula .operation-modal-text {
    margin-bottom: 20px;
    color: #777;
    font-size: 14px;
    line-height: 1.5
}

body.page-pre-sumula .operation-modal-button {
    padding: 10px 24px;
    border: 0;
    border-radius: 999px;
    background: #e02020;
    color: #fff;
    font: 600 12px/1 "Space Grotesk", sans-serif;
    cursor: pointer
}

@media (max-width:980px) {
    body.page-cadastros .page {
        grid-template-columns: 1fr
    }

    body.page-cadastros #profile-card-container {
        min-width: 0
    }
}

@media (max-width:680px) {
    body.page-cadastros {
        padding: 20px 12px
    }

    body.page-cadastros .cadastros-card {
        padding: 20px;
        border-radius: 22px
    }

    body.page-cadastros .cadastros-header,
    body.page-cadastros .cadastros-toolbar,
    body.page-cadastros .cadastro-item {
        align-items: stretch;
        flex-direction: column
    }

    body.page-cadastros .cadastros-header-actions {
        flex-wrap: wrap
    }

    body.page-cadastros .cadastros-header-actions button {
        flex: 1 1 auto
    }

    body.page-cadastros .cadastros-tabs {
        gap: 8px
    }

    body.page-cadastros .cadastro-tab {
        flex: 1 1 calc(50% - 4px);
        padding-inline: 12px
    }

    body.page-cadastros .cadastro-item-actions,
    body.page-cadastros .btn-editar-cadastro,
    body.page-cadastros .btn-remover-cadastro {
        width: 100%
    }

    body.page-cadastros .cadastro-form {
        grid-template-columns: 1fr
    }

    body.page-cadastros .cadastro-form-field.is-full,
    body.page-cadastros .cadastro-modal-actions.is-full {
        grid-column: auto
    }
}

body.page-solicitacao {
    --metro-red: #e02020;
    --metro-text: #111;
    --metro-muted: #777
}

body.page-solicitacao * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body.page-solicitacao {
    font-family: "Space Grotesk", sans-serif;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 24px
}

body.page-solicitacao .page {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: flex-start
}

body.page-solicitacao #profile-card-container {
    min-width: 420px
}

body.page-solicitacao .form-wrapper {
    display: flex
}

body.page-solicitacao .form-card {
    background: #fff;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px
}

body.page-solicitacao .form-title {
    font-size: 22px;
    font-weight: 700
}

body.page-solicitacao .form-subtitle {
    font-size: 13px;
    color: var(--metro-muted)
}

body.page-solicitacao .section-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--metro-muted);
    font-weight: 700;
    margin-top: 8px
}

body.page-solicitacao .field-group {
    display: flex;
    flex-direction: column;
    gap: 6px
}

body.page-solicitacao .field-label {
    font-size: 13px;
    font-weight: 500
}

body.page-solicitacao input[type="text"],
body.page-solicitacao input[type="date"] {
    width: 100%;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    transition: 0.15s
}

body.page-solicitacao input:focus {
    border-color: var(--metro-red);
    box-shadow: 0 0 0 1px rgba(224, 32, 32, 0.08)
}

body.page-solicitacao .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px
}

body.page-solicitacao .checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px
}

body.page-solicitacao .checkbox-item input {
    width: 18px;
    height: 18px
}

body.page-solicitacao .form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px
}

body.page-solicitacao .btn-submit {
    padding: 11px 26px;
    border-radius: 999px;
    border: none;
    background: var(--metro-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s
}

body.page-solicitacao .btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(224, 32, 32, 0.35);
    background: #c01818
}

body.page-solicitacao .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999
}

body.page-solicitacao .modal-backdrop.active {
    display: flex
}

body.page-solicitacao .modal {
    background: #fff;
    padding: 32px;
    border-radius: 24px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15)
}

body.page-solicitacao .modal-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px
}

body.page-solicitacao .modal-text {
    font-size: 14px;
    color: #555;
    line-height: 1.5
}

body.page-solicitacao .btn-modal {
    margin-top: 20px;
    padding: 10px 24px;
    border-radius: 999px;
    border: none;
    background: var(--metro-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer
}

body.page-solicitacao .footer {
    text-align: center;
    margin-top: 8px
}

body.page-solicitacao .footer-main {
    font-size: 14px;
    color: #666;
    margin: 0
}

body.page-solicitacao .footer-sub {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4
}

@media (max-width:850px) {
    body.page-solicitacao .page {
        grid-template-columns: 1fr
    }

    body.page-solicitacao #profile-card-container {
        min-width: auto
    }
}

body.page-analise-atleta .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.35)
}

body.page-analise-atleta .modal-backdrop.is-visible {
    display: flex
}

body.page-analise-atleta .message-modal {
    width: min(90vw, 550px);
    padding: 24px 28px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    text-align: center
}

body.page-analise-atleta .message-modal .modal-title {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700
}

body.page-analise-atleta .message-modal .modal-text {
    margin-bottom: 20px;
    color: var(--metro-muted);
    font-size: 14px;
    line-height: 1.5
}

body.page-analise-atleta .message-modal .btn-modal {
    padding: 10px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--metro-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer
}

body.page-competicoes {
    min-height: 100vh;
    margin: 0;
    padding: 32px 16px 24px;
    background: #fff;
    color: var(--metro-text);
    font-family: "Space Grotesk", sans-serif
}

body.page-competicoes button,
body.page-competicoes input,
body.page-competicoes select,
body.page-competicoes textarea {
    font: inherit
}

body.page-competicoes .page {
    width: min(1120px, 100%);
    min-width: 0
}

body.page-competicoes #profile-card-container,
body.page-competicoes .content-column,
body.page-competicoes .section-card {
    min-width: 0
}

body.page-competicoes .section-title,
body.page-competicoes .competition-content,
body.page-competicoes .section-nav {
    font-family: "Space Grotesk", sans-serif
}

body.page-competicoes .competition-content p {
    margin: 0;
    color: var(--metro-muted);
    font-size: 15px;
    line-height: 1.5
}

body.page-competicoes .section-header img {
    flex: 0 0 48px;
    max-width: 48px;
    max-height: 48px
}

body.page-competicoes .toggle-btn {
    flex: 0 0 34px;
    width: 34px;
    height: 34px
}

@media (max-width:850px) {
    body.page-competicoes .page {
        width: 100%
    }
}

body.page-links .content-column>.section-card {
    padding: 22px;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .05)
}

body.page-links .content-column>.section-card>.section-eyebrow,
body.page-links .content-column>.section-card>.section-subtitle {
    display: none
}

body.page-links .content-column>.section-card>.section-title {
    margin: 0 0 16px;
    color: #999;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase
}

body.page-links .links-grid {
    gap: 16px
}

body.page-links .link-card {
    min-height: 168px;
    padding: 20px;
    gap: 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
    transition: all .25s ease
}

body.page-links .link-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .08);
    background: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .08)
}

body.page-links .link-row {
    align-items: center;
    gap: 12px
}

body.page-links .link-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E10600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    color: transparent;
    font-size: 0
}

body.page-links .link-label {
    color: var(--metro-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25
}

body.page-links .link-sub {
    margin-top: 2px;
    color: var(--metro-muted);
    font-size: 13px;
    line-height: 1.45
}

body.page-links .link-url {
    display: none
}

body.page-links .link-cta {
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--metro-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none
}

body.page-links .link-card:hover .link-cta {
    color: var(--metro-red)
}

@scope (body.page-matricula) {
    :scope {
        --red: #e02020;
        --red-dark: #b61119;
        --ink: #000000;
        --muted: rgba(0, 0, 0, .62);
        --soft: rgba(0, 0, 0, .035);
        --line: rgba(0, 0, 0, .14);
        --white: #ffffff;
        --radius: 28px;
        --shadow: 0 22px 60px rgba(16, 16, 20, .1)
    }

    * {
        box-sizing: border-box
    }

    :scope {
        scroll-behavior: smooth
    }

    :scope {
        margin: 0;
        background: var(--white);
        color: var(--ink);
        font-family: "Space Grotesk", sans-serif;
        line-height: 1.55
    }

    img {
        max-width: 100%;
        display: block
    }

    a {
        color: inherit
    }

    button,
    a {
        -webkit-tap-highlight-color: transparent
    }

    .container {
        width: min(1180px, calc(100% - 40px));
        margin: 0 auto
    }

    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(255, 255, 255, .94);
        border-bottom: 1px solid rgba(0, 0, 0, .08);
        backdrop-filter: blur(16px)
    }

    .header-inner {
        min-height: 74px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none
    }

    .brand img {
        width: 48px;
        height: 48px;
        object-fit: contain
    }

    .brand strong,
    .brand span {
        display: block
    }

    .brand strong {
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: .08em
    }

    .brand span {
        color: var(--muted);
        font-size: 11px
    }

    .header-nav {
        display: flex;
        align-items: center;
        gap: 22px
    }

    .header-nav>a:not(.btn) {
        color: var(--ink);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none
    }

    .btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 12px 20px;
        border: 0;
        border-radius: 999px;
        background: var(--red);
        color: var(--white);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        transition: .2s ease
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(224, 32, 32, .22)
    }

    .btn-primary {
        background: var(--red)
    }

    .btn-primary:hover {
        background: var(--red-dark);
        box-shadow: 0 14px 28px rgba(224, 32, 32, .24)
    }

    .btn-light {
        background: var(--white);
        color: var(--ink)
    }

    .btn-outline {
        border: 1px solid var(--line);
        background: var(--white);
        color: var(--ink)
    }

    .hero {
        position: relative;
        min-height: 720px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: var(--ink) url("../asset/escola/hero-escola-futebol.png") center/cover no-repeat;
        color: var(--white)
    }

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(8, 8, 10, .92) 0%, rgba(8, 8, 10, .74) 38%, rgba(8, 8, 10, .15) 72%, rgba(8, 8, 10, .04) 100%)
    }

    .hero-content {
        position: relative;
        z-index: 1;
        width: min(650px, 64%);
        padding: 92px 0
    }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 18px;
        color: var(--red);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase
    }

    .eyebrow::before {
        content: "";
        width: 28px;
        height: 3px;
        border-radius: 999px;
        background: currentColor
    }

    .hero .eyebrow {
        color: var(--red)
    }

    h1,
    h2,
    h3,
    p {
        margin-top: 0
    }

    h1 {
        max-width: 640px;
        margin-bottom: 22px;
        font-size: clamp(42px, 6vw, 72px);
        line-height: 1.02;
        letter-spacing: -.045em
    }

    .hero-lead {
        max-width: 590px;
        margin-bottom: 30px;
        color: rgba(255, 255, 255, .82);
        font-size: clamp(17px, 2vw, 21px)
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px
    }

    .hero-note {
        margin-top: 18px;
        color: rgba(255, 255, 255, .67);
        font-size: 12px
    }

    .stats {
        position: relative;
        z-index: 2;
        margin-top: -48px
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 24px;
        box-shadow: var(--shadow);
        overflow: hidden
    }

    .stat {
        padding: 27px 18px;
        text-align: center
    }

    .stat+.stat {
        border-left: 1px solid var(--line)
    }

    .stat-icon {
        display: block;
        margin-bottom: 8px;
        font-size: 23px
    }

    .stat strong {
        display: block;
        font-size: 16px
    }

    .stat span:last-child {
        color: var(--muted);
        font-size: 12px
    }

    .section {
        padding: 92px 0;
        scroll-margin-top: 86px
    }

    .section-soft {
        background: var(--soft)
    }

    .section-dark {
        background: var(--ink);
        color: var(--white)
    }

    .section-heading {
        max-width: 760px;
        margin-bottom: 40px
    }

    .section-heading.centered {
        margin-right: auto;
        margin-left: auto;
        text-align: center
    }

    .section-heading.centered .eyebrow {
        justify-content: center
    }

    .section-heading h2 {
        margin-bottom: 14px;
        font-size: clamp(32px, 4.5vw, 52px);
        line-height: 1.08;
        letter-spacing: -.035em
    }

    .section-heading p {
        margin-bottom: 0;
        color: var(--muted);
        font-size: 17px
    }

    .section-dark .section-heading p {
        color: rgba(255, 255, 255, .68)
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px
    }

    .card {
        min-height: 100%;
        padding: 26px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: var(--white)
    }

    .card-icon {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        margin-bottom: 18px;
        border-radius: 14px;
        background: rgba(224, 32, 32, .08);
        font-size: 22px
    }

    .card h3 {
        margin-bottom: 10px;
        font-size: 19px
    }

    .card p,
    .card li {
        color: var(--muted);
        font-size: 14px
    }

    .card ul {
        margin: 12px 0 0;
        padding-left: 18px
    }

    .pillar-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px
    }

    .pillar {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 22px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 18px;
        background: rgba(255, 255, 255, .06)
    }

    .pillar span {
        font-size: 25px
    }

    .pillar strong {
        font-size: 16px
    }

    .media-card {
        position: relative;
        min-height: 460px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-radius: var(--radius);
        background: linear-gradient(rgba(10, 10, 12, .54), rgba(10, 10, 12, .72)), url("../asset/escola/hero-escola-futebol.png") center/cover;
        color: var(--white);
        text-align: center
    }

    .play {
        width: 86px;
        height: 86px;
        display: grid;
        place-items: center;
        margin: 0 auto 18px;
        border: 2px solid rgba(255, 255, 255, .7);
        border-radius: 50%;
        background: rgba(255, 255, 255, .14);
        font-size: 29px;
        backdrop-filter: blur(8px)
    }

    .media-card h3 {
        margin-bottom: 7px;
        font-size: 26px
    }

    .media-card p {
        margin: 0;
        color: rgba(255, 255, 255, .76)
    }

    .two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px
    }

    .benefit-panel {
        padding: 34px;
        border-radius: var(--radius);
        background: var(--white);
        box-shadow: 0 12px 32px rgba(0, 0, 0, .06)
    }

    .benefit-panel h3 {
        margin-bottom: 20px;
        font-size: 25px
    }

    .check-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .check {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        color: var(--ink);
        font-size: 14px
    }

    .check::before {
        content: "✓";
        color: var(--red);
        font-weight: 700
    }

    .people-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px
    }

    .person-card {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: var(--white)
    }

    .person-photo {
        aspect-ratio: 4/3;
        display: grid;
        place-items: center;
        background: rgba(0, 0, 0, .05);
        color: rgba(0, 0, 0, .48);
        font-size: 42px
    }

    .person-info {
        padding: 22px
    }

    .person-info h3 {
        margin-bottom: 5px
    }

    .person-info p {
        margin-bottom: 5px;
        color: var(--muted);
        font-size: 13px
    }

    .structure-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px
    }

    .structure-item {
        min-height: 170px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 22px;
        border-radius: 20px;
        background: var(--ink);
        color: var(--white)
    }

    .structure-item span {
        color: var(--red);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase
    }

    .structure-item strong {
        font-size: 20px
    }

    .difference-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px
    }

    .difference {
        padding: 19px;
        border-left: 4px solid var(--red);
        border-radius: 0 14px 14px 0;
        background: var(--white);
        font-size: 14px;
        font-weight: 600
    }

    .testimonial-note {
        max-width: 760px;
        margin: 0 auto;
        padding: 34px;
        border: 1px dashed var(--line);
        border-radius: 22px;
        background: var(--white);
        color: var(--muted);
        text-align: center
    }

    .faq {
        max-width: 900px;
        margin: 0 auto
    }

    .faq details {
        border-bottom: 1px solid var(--line)
    }

    .faq summary {
        position: relative;
        padding: 20px 42px 20px 0;
        list-style: none;
        font-weight: 600;
        cursor: pointer
    }

    .faq summary::-webkit-details-marker {
        display: none
    }

    .faq summary::after {
        content: "+";
        position: absolute;
        top: 16px;
        right: 4px;
        color: var(--red);
        font-size: 24px
    }

    .faq details[open] summary::after {
        content: "−"
    }

    .faq details p {
        max-width: 760px;
        padding: 0 0 20px;
        color: var(--muted)
    }

    .steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        counter-reset: step
    }

    .step {
        position: relative;
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--white);
        counter-increment: step
    }

    .step::before {
        content: counter(step, decimal-leading-zero);
        display: block;
        margin-bottom: 24px;
        color: var(--red);
        font-size: 26px;
        font-weight: 700
    }

    .step h3 {
        margin-bottom: 7px
    }

    .step p {
        margin: 0;
        color: var(--muted);
        font-size: 14px
    }

    .location-grid {
        display: grid;
        grid-template-columns: .82fr 1.18fr;
        gap: 22px;
        align-items: stretch
    }

    .location-info {
        padding: 34px;
        border-radius: var(--radius);
        background: var(--ink);
        color: var(--white)
    }

    .location-logo {
        width: 90px;
        height: 90px;
        margin-bottom: 24px;
        border-radius: 16px;
        object-fit: contain;
        background: var(--white)
    }

    .location-info p {
        color: rgba(255, 255, 255, .7)
    }

    .map {
        min-height: 410px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius)
    }

    .map iframe {
        width: 100%;
        height: 100%;
        min-height: 410px;
        border: 0
    }

    .final-cta {
        padding: 92px 0;
        background: linear-gradient(135deg, var(--red-dark), var(--red));
        color: var(--white);
        text-align: center
    }

    .final-cta h2 {
        margin-bottom: 15px;
        font-size: clamp(36px, 5vw, 58px);
        letter-spacing: -.04em
    }

    .final-cta p {
        max-width: 710px;
        margin: 0 auto 28px;
        color: rgba(255, 255, 255, .82);
        font-size: 18px
    }

    .footer {
        padding: 24px 0;
        background: var(--ink);
        color: rgba(255, 255, 255, .65);
        font-size: 12px
    }

    .footer-inner {
        display: flex;
        justify-content: space-between;
        gap: 20px
    }

    .whatsapp-float {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 60;
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--red);
        color: var(--white);
        box-shadow: 0 16px 30px rgba(224, 32, 32, .28);
        font-size: 24px;
        text-decoration: none
    }

    :scope {
        min-height: 100vh;
        padding: 32px 16px 24px;
        background: var(--white)
    }

    :scope .site-header {
        display: none
    }

    :scope .page {
        width: 100%;
        max-width: 1120px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 420px minmax(0, 1fr);
        gap: 40px;
        align-items: start
    }

    :scope #profile-card-container {
        min-width: 420px;
        position: sticky;
        top: 24px
    }

    :scope .content-column {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 24px
    }

    :scope .section-nav {
        position: sticky;
        top: 24px;
        z-index: 20;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 16px 20px;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
        backdrop-filter: blur(10px)
    }

    :scope .section-nav a {
        padding: 8px 14px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--white);
        color: var(--ink);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .08em;
        text-decoration: none;
        text-transform: uppercase;
        transition: .18s ease
    }

    :scope .section-nav a:hover,
    :scope .section-nav a.active {
        border-color: var(--red);
        background: var(--red);
        color: var(--white)
    }

    :scope .section-card {
        width: 100%;
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 28px;
        background: var(--white);
        box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
        scroll-margin-top: 150px
    }

    :scope .section-card.active-section {
        border-color: var(--red);
        box-shadow: 0 0 0 3px rgba(224, 32, 32, .10), 0 14px 35px rgba(0, 0, 0, .06)
    }

    :scope .section-card.hero {
        background: var(--ink) url("../asset/escola/hero-escola-futebol.png") center/cover no-repeat
    }

    :scope .section-card.section-dark {
        background: var(--ink)
    }

    :scope .section-card.final-cta {
        background: linear-gradient(135deg, var(--red-dark), var(--red))
    }

    :scope .section-card:not(.hero):not(.final-cta) {
        background: var(--white);
        color: var(--ink);
        text-align: center
    }

    :scope .section-heading {
        max-width: 720px;
        margin-right: auto;
        margin-left: auto;
        text-align: center
    }

    :scope .section-heading .eyebrow,
    :scope .location-info .eyebrow {
        justify-content: center
    }

    :scope .section-heading h2 {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.02em
    }

    :scope .section-heading p,
    :scope .section-dark .section-heading p {
        color: var(--muted);
        font-size: 14px
    }

    :scope .eyebrow {
        font-size: 11px
    }

    :scope .card,
    :scope .benefit-panel,
    :scope .person-card,
    :scope .pillar,
    :scope .structure-item,
    :scope .difference,
    :scope .step,
    :scope .testimonial-note {
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--white);
        color: var(--ink);
        box-shadow: none;
        text-align: center
    }

    :scope .card,
    :scope .benefit-panel,
    :scope .person-info,
    :scope .step {
        padding: 22px
    }

    :scope .card h3,
    :scope .choice-card .card h3,
    :scope .benefit-panel h3,
    :scope .person-info h3,
    :scope .step h3,
    :scope .structure-item strong {
        font-size: 18px;
        font-weight: 500
    }

    :scope .card p,
    :scope .card li,
    :scope .person-info p,
    :scope .step p,
    :scope .check,
    :scope .testimonial-note {
        color: var(--muted);
        font-size: 13px
    }

    :scope .card ul {
        padding: 0;
        list-style: none
    }

    :scope .card-icon,
    :scope .person-photo {
        width: 48px;
        height: 48px;
        margin: 0 auto 16px;
        aspect-ratio: auto;
        border-radius: 50%;
        background: rgba(224, 32, 32, .06);
        color: var(--red)
    }

    :scope .person-photo {
        margin-top: 22px
    }

    :scope .line-icon {
        width: 24px;
        height: 24px;
        display: inline-block;
        color: var(--red);
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    :scope .card-icon .line-icon,
    :scope .person-photo .line-icon {
        width: 23px;
        height: 23px
    }

    :scope .stat-icon {
        height: 28px;
        display: grid;
        place-items: center;
        color: var(--red)
    }

    :scope .stat strong {
        font-size: 15px;
        font-weight: 600
    }

    :scope .stat span:last-child {
        font-size: 12px
    }

    :scope .pillar {
        min-height: 112px;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        padding: 20px
    }

    :scope .pillar span {
        display: grid;
        place-items: center
    }

    :scope .pillar strong {
        font-size: 14px;
        font-weight: 500
    }

    :scope .structure-item {
        min-height: 140px;
        justify-content: center;
        align-items: center;
        padding: 20px
    }

    :scope .difference {
        border-left: 1px solid var(--line);
        padding: 18px;
        font-size: 13px;
        font-weight: 500
    }

    :scope .location-info {
        border: 1px solid var(--line);
        background: var(--white);
        color: var(--ink);
        text-align: center
    }

    :scope .location-logo {
        margin-right: auto;
        margin-left: auto
    }

    :scope .location-info p {
        color: var(--muted);
        font-size: 13px
    }

    :scope .location-info .btn-light {
        border: 1px solid var(--red);
        background: var(--red);
        color: var(--white)
    }

    :scope .check-grid {
        justify-items: center
    }

    :scope .check {
        align-items: center;
        text-align: left
    }

    :scope .hero-content {
        margin: 0 auto;
        text-align: center
    }

    :scope .hero .eyebrow,
    :scope .hero-actions {
        justify-content: center
    }

    :scope .hero h1,
    :scope .hero-lead,
    :scope .hero-note {
        margin-right: auto;
        margin-left: auto;
        text-align: center
    }

    :scope .hero h1 {
        font-size: clamp(34px, 4.4vw, 50px)
    }

    :scope .play {
        color: var(--red)
    }

    :scope .section-card>.container,
    :scope .stats-grid {
        width: 100%;
        max-width: none
    }

    :scope .section {
        padding: 48px 38px
    }

    :scope .hero {
        min-height: 620px
    }

    :scope .hero-content {
        width: 88%;
        padding: 64px 0
    }

    :scope h1 {
        font-size: clamp(38px, 5vw, 58px)
    }

    :scope .stats {
        margin-top: 0
    }

    :scope .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 0;
        border-radius: 0;
        box-shadow: none
    }

    :scope .stat:nth-child(odd) {
        border-left: 0
    }

    :scope .stat:nth-child(n+3) {
        border-top: 1px solid var(--line)
    }

    :scope .stat:last-child {
        grid-column: 1 / -1
    }

    :scope .cards,
    :scope .difference-grid,
    :scope .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    :scope .pillar-grid,
    :scope .structure-grid,
    :scope .people-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    :scope .two-col,
    :scope .location-grid {
        grid-template-columns: 1fr
    }

    :scope .final-cta {
        padding: 64px 38px
    }

    :scope .footer {
        max-width: 1120px;
        margin: 24px auto 0;
        border-radius: 24px
    }

    @media (max-width:960px) {
        :scope {
            padding: 20px 14px
        }

        :scope .page {
            grid-template-columns: 1fr;
            gap: 24px
        }

        :scope #profile-card-container {
            min-width: 0;
            position: static
        }

        :scope .section-nav {
            top: 10px
        }

        .header-nav>a:not(.btn) {
            display: none
        }

        .hero {
            min-height: 680px;
            background-position: 62% center
        }

        .hero-content {
            width: min(680px, 78%)
        }

        .stats-grid {
            grid-template-columns: repeat(3, 1fr)
        }

        .stat:nth-child(4),
        .stat:nth-child(5) {
            border-top: 1px solid var(--line)
        }

        .cards,
        .difference-grid {
            grid-template-columns: repeat(2, 1fr)
        }

        .structure-grid,
        .people-grid {
            grid-template-columns: repeat(2, 1fr)
        }

        .steps {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media (max-width:680px) {
        .container {
            width: min(100% - 28px, 1180px)
        }

        .header-inner {
            min-height: 66px
        }

        .brand span,
        .header-nav .btn {
            display: none
        }

        .hero {
            min-height: 690px;
            align-items: flex-end;
            background-position: 66% center
        }

        .hero::before {
            background: linear-gradient(0deg, rgba(8, 8, 10, .96) 0%, rgba(8, 8, 10, .76) 60%, rgba(8, 8, 10, .18) 100%)
        }

        .hero-content {
            width: 100%;
            padding: 180px 0 68px
        }

        h1 {
            font-size: 43px
        }

        .hero-actions .btn {
            width: 100%
        }

        .stats {
            margin-top: 0;
            padding-top: 14px
        }

        .stats-grid {
            grid-template-columns: 1fr 1fr
        }

        .stat+.stat {
            border-left: 0
        }

        .stat:nth-child(even) {
            border-left: 1px solid var(--line)
        }

        .stat:nth-child(n+3) {
            border-top: 1px solid var(--line)
        }

        .stat:last-child {
            grid-column: 1/-1
        }

        .section {
            padding: 68px 0
        }

        .cards,
        .pillar-grid,
        .two-col,
        .people-grid,
        .structure-grid,
        .difference-grid,
        .steps,
        .location-grid {
            grid-template-columns: 1fr
        }

        .check-grid {
            grid-template-columns: 1fr
        }

        .media-card {
            min-height: 360px
        }

        .footer-inner {
            flex-direction: column
        }
    }

    @media (max-width:620px) {
        :scope .section {
            padding: 38px 22px
        }

        :scope .hero-content {
            width: 100%;
            padding: 48px 0
        }

        :scope .cards,
        :scope .difference-grid,
        :scope .steps,
        :scope .pillar-grid,
        :scope .structure-grid,
        :scope .people-grid,
        :scope .stats-grid {
            grid-template-columns: 1fr
        }

        :scope .stat,
        :scope .stat+.stat {
            grid-column: auto;
            border-left: 0;
            border-top: 1px solid var(--line)
        }

        :scope .stat:first-child {
            border-top: 0
        }
    }

    :scope .section-card {
        padding: 24px 24px 26px;
        overflow: visible;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 28px;
        background: var(--white);
        color: var(--ink);
        box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
        text-align: center
    }

    :scope .section-card.active-section {
        border: 2px solid var(--red);
        box-shadow: 0 0 0 4px rgba(224, 32, 32, .12)
    }

    :scope .section-card>.container {
        width: 100%;
        padding: 0
    }

    :scope .section-heading {
        margin-bottom: 22px
    }

    :scope .section-heading .eyebrow,
    :scope .hero .eyebrow {
        margin-bottom: 6px;
        font-size: 11px;
        letter-spacing: .16em
    }

    :scope .section-heading h2,
    :scope .hero h1,
    :scope .final-cta h2 {
        margin-bottom: 10px;
        color: var(--ink);
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0
    }

    :scope .section-heading p,
    :scope .hero-lead,
    :scope .final-cta p {
        margin-bottom: 18px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.6
    }

    :scope .section-card.hero {
        min-height: 0;
        background: var(--white)
    }

    :scope .hero::before {
        display: none
    }

    :scope .hero-media {
        width: 100%;
        aspect-ratio: 16 / 9;
        margin-bottom: 22px;
        overflow: hidden;
        border-radius: 20px
    }

    :scope .hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    :scope .hero-content {
        width: 100%;
        padding: 0
    }

    :scope .hero-note {
        margin: 14px 0 0;
        color: var(--muted);
        font-size: 11px
    }

    :scope .hero-actions {
        gap: 10px
    }

    :scope .btn {
        min-height: 40px;
        padding: 9px 16px;
        font-size: 12px
    }

    :scope .btn-light,
    :scope .btn-outline {
        border: 1px solid var(--line);
        background: var(--white);
        color: var(--ink)
    }

    :scope .stats {
        padding: 24px 24px 26px
    }

    :scope .stats-heading {
        margin-bottom: 18px
    }

    :scope .stats-heading .eyebrow {
        margin-bottom: 6px
    }

    :scope .stats-heading h2 {
        margin: 0;
        font-size: 22px
    }

    :scope .stats-grid {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 20px
    }

    :scope .stat {
        padding: 22px 16px
    }

    :scope .card,
    :scope .benefit-panel,
    :scope .person-card,
    :scope .pillar,
    :scope .structure-item,
    :scope .difference,
    :scope .step,
    :scope .testimonial-note,
    :scope .location-info {
        border: 1px solid rgba(0, 0, 0, .13);
        border-radius: 20px;
        background: rgba(0, 0, 0, .02)
    }

    :scope .media-card,
    :scope .map {
        border-radius: 20px
    }

    :scope .section-card.final-cta {
        padding: 32px 24px;
        background: var(--white);
        color: var(--ink)
    }

    :scope .section-card.final-cta .container {
        width: 100%
    }

    @media (max-width:620px) {

        :scope .section-card,
        :scope .section,
        :scope .stats,
        :scope .final-cta {
            padding: 22px 18px
        }
    }

    :scope .section-card,
    :scope .section-card:not(.hero):not(.final-cta) {
        text-align: left
    }

    :scope .section-heading,
    :scope .section-heading.centered {
        max-width: none;
        margin: 0 0 24px;
        text-align: left
    }

    :scope .section-heading .eyebrow,
    :scope .section-heading.centered .eyebrow,
    :scope .hero .eyebrow,
    :scope .location-info .eyebrow {
        justify-content: flex-start
    }

    :scope .section-heading .eyebrow::before,
    :scope .hero .eyebrow::before,
    :scope .location-info .eyebrow::before {
        display: none
    }

    :scope .section-heading h2,
    :scope .hero h1,
    :scope .final-cta h2,
    :scope .stats-heading h2 {
        font-size: 22px;
        text-align: left
    }

    :scope .section-heading p,
    :scope .hero-lead,
    :scope .final-cta p {
        max-width: none;
        text-align: left
    }

    :scope .hero-content {
        margin: 0;
        text-align: left
    }

    :scope .hero h1,
    :scope .hero-lead,
    :scope .hero-note {
        margin-left: 0;
        text-align: left
    }

    :scope .hero-actions {
        justify-content: flex-start
    }

    :scope .hero-media {
        width: min(420px, 100%);
        aspect-ratio: 16 / 10;
        margin: 28px 0 0
    }

    :scope .institutional-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 24px
    }

    :scope .institutional-tag {
        min-width: 112px;
        padding: 9px 18px;
        border: 1px solid rgba(224, 32, 32, .34);
        border-radius: 999px;
        background: rgba(224, 32, 32, .04);
        color: rgba(0, 0, 0, .66);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .12em;
        text-align: center;
        text-transform: uppercase
    }

    :scope .stats-heading {
        margin-bottom: 20px;
        text-align: left
    }

    :scope .stats-heading .eyebrow {
        justify-content: flex-start
    }

    :scope .stats-heading .eyebrow::before {
        display: none
    }

    :scope .card,
    :scope .benefit-panel,
    :scope .person-card,
    :scope .pillar,
    :scope .structure-item,
    :scope .step,
    :scope .location-info {
        text-align: left
    }

    :scope .card-icon,
    :scope .person-photo {
        margin-right: 0;
        margin-left: 0
    }

    :scope .pillar,
    :scope .structure-item {
        align-items: flex-start;
        text-align: left
    }

    :scope .check-grid {
        justify-items: start
    }

    :scope .testimonial-note {
        text-align: left
    }

    :scope .location-logo {
        margin-right: 0;
        margin-left: 0
    }

    :scope .section-card.final-cta,
    :scope .section-card.final-cta .container {
        text-align: left
    }

    :scope .school-units {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 24px
    }

    :scope .school-unit-card {
        min-width: 0;
        min-height: 210px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 20px 14px;
        border: 1px solid rgba(0, 0, 0, .13);
        border-radius: 20px;
        background: rgba(0, 0, 0, .02);
        color: var(--ink);
        text-align: center;
        transition: .18s ease
    }

    :scope .school-unit-card:hover {
        border-color: rgba(224, 32, 32, .34);
        background: rgba(224, 32, 32, .06);
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, .08)
    }

    :scope .school-unit-label {
        color: var(--red);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase
    }

    :scope .school-unit-card h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 500
    }

    :scope .school-unit-card p {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.5
    }

    :scope .school-unit-card .unit-status {
        margin-top: 6px;
        color: var(--ink);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase
    }

    :scope #footer-container {
        width: 100%;
        max-width: 1120px;
        margin: 24px auto 0
    }

    @media (max-width:720px) {
        :scope .school-units {
            grid-template-columns: 1fr
        }
    }

    :scope .content-column {
        gap: 14px
    }

    :scope .section-card,
    :scope .section-card:not(.hero):not(.final-cta),
    :scope .section-card.final-cta,
    :scope .section-card.final-cta .container {
        padding: 20px;
        text-align: center
    }

    :scope .section-heading,
    :scope .section-heading.centered,
    :scope .stats-heading {
        margin: 0 auto 16px;
        text-align: center
    }

    :scope .section-heading .eyebrow,
    :scope .section-heading.centered .eyebrow,
    :scope .hero .eyebrow,
    :scope .stats-heading .eyebrow,
    :scope .location-info .eyebrow {
        justify-content: center
    }

    :scope .section-heading h2,
    :scope .hero h1,
    :scope .final-cta h2,
    :scope .stats-heading h2,
    :scope .section-heading p,
    :scope .hero-lead,
    :scope .final-cta p {
        text-align: center
    }

    :scope .section-heading p,
    :scope .hero-lead,
    :scope .final-cta p {
        margin-bottom: 12px
    }

    :scope .hero-content {
        margin: 0 auto;
        text-align: center
    }

    :scope .hero h1,
    :scope .hero-lead,
    :scope .hero-note {
        margin-right: auto;
        margin-left: auto;
        text-align: center
    }

    :scope .hero-actions,
    :scope .institutional-tags {
        justify-content: center
    }

    :scope .institutional-tags {
        margin-top: 16px
    }

    :scope .hero-media {
        width: min(380px, 100%);
        margin: 18px auto 0
    }

    :scope .stats,
    :scope .section,
    :scope .final-cta {
        padding: 20px
    }

    :scope .stats-grid,
    :scope .cards,
    :scope .pillar-grid,
    :scope .two-col,
    :scope .people-grid,
    :scope .structure-grid,
    :scope .difference-grid,
    :scope .steps,
    :scope .school-units {
        gap: 10px
    }

    :scope .stat {
        padding: 16px 12px
    }

    :scope .card,
    :scope .benefit-panel,
    :scope .person-card,
    :scope .pillar,
    :scope .structure-item,
    :scope .step,
    :scope .location-info,
    :scope .testimonial-note {
        text-align: center
    }

    :scope .card,
    :scope .benefit-panel,
    :scope .person-info,
    :scope .step {
        padding: 16px
    }

    :scope .card-icon,
    :scope .person-photo,
    :scope .location-logo {
        margin-right: auto;
        margin-left: auto
    }

    :scope .pillar,
    :scope .structure-item {
        min-height: 92px;
        align-items: center;
        padding: 14px;
        text-align: center
    }

    :scope .check-grid {
        gap: 8px;
        justify-items: center
    }

    :scope .check {
        justify-content: center;
        text-align: center
    }

    :scope .media-card {
        min-height: 320px
    }

    :scope .school-units {
        margin-top: 16px
    }

    :scope .school-unit-card {
        min-height: 160px;
        gap: 4px;
        padding: 14px 10px
    }

    :scope .school-unit-card h3 {
        font-size: 18px
    }

    :scope .school-unit-card .unit-status {
        margin-top: 3px
    }

    :scope #footer-container {
        margin-top: 14px
    }

    @media (max-width:620px) {

        :scope .section-card,
        :scope .section,
        :scope .stats,
        :scope .final-cta {
            padding: 18px 14px
        }
    }

    :scope .stats.section-card,
    :scope .choice-card {
        padding: 14px
    }

    :scope .stats-heading,
    :scope .choice-card .section-heading {
        margin-bottom: 10px
    }

    :scope .stats-heading .eyebrow,
    :scope .choice-card .eyebrow {
        margin-bottom: 3px
    }

    :scope .stats-heading h2,
    :scope .choice-card .section-heading h2 {
        margin-bottom: 5px;
        font-size: 20px
    }

    :scope .choice-card .section-heading p {
        margin-bottom: 0;
        font-size: 12px;
        line-height: 1.4
    }

    :scope .stats-grid,
    :scope .choice-card .cards {
        gap: 8px
    }

    :scope .stat {
        padding: 9px 8px
    }

    :scope .stat-icon {
        height: 22px;
        margin-bottom: 3px
    }

    :scope .stat-icon .line-icon {
        width: 19px;
        height: 19px
    }

    :scope .stat strong {
        font-size: 13px;
        line-height: 1.25
    }

    :scope .stat span:last-child {
        font-size: 10px;
        line-height: 1.25
    }

    :scope .choice-card .card {
        padding: 10px
    }

    :scope .choice-card .card-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 7px
    }

    :scope .choice-card .card-icon .line-icon {
        width: 19px;
        height: 19px
    }

    :scope .choice-card .card h3 {
        margin-bottom: 5px;
        font-size: 15px
    }

    :scope .choice-card .card p,
    :scope .choice-card .card li {
        font-size: 10px;
        line-height: 1.4
    }

    :scope .choice-card .card ul {
        margin-top: 6px
    }

    :scope .hero-lead,
    :scope .section-heading p,
    :scope .card p,
    :scope .card li,
    :scope .pillar p,
    :scope .benefit-panel,
    :scope .person-info p,
    :scope .step p,
    :scope .faq details p,
    :scope .testimonial-note,
    :scope .school-unit-card p,
    :scope .final-cta p {
        font-size: 14px;
        line-height: 1.6
    }

    :scope .pillar {
        min-height: 154px;
        justify-content: flex-start
    }

    :scope .pillar strong {
        margin-top: 2px;
        font-size: 15px
    }

    :scope .pillar p {
        margin: 8px 0 0;
        color: var(--muted);
        text-align: center
    }

    :scope .stat strong,
    :scope .stat span:last-child {
        font-size: 14px;
        line-height: 1.6
    }

    :scope .stat strong {
        font-weight: 600
    }

    :scope .eyebrow,
    :scope .school-unit-label {
        color: var(--red);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: .16em;
        text-transform: uppercase
    }

    :scope .section-heading h2,
    :scope .hero h1,
    :scope .stats-heading h2,
    :scope .final-cta h2 {
        color: var(--ink);
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2
    }

    :scope .card h3,
    :scope .choice-card .card h3,
    :scope .benefit-panel h3,
    :scope .person-info h3,
    :scope .structure-item strong,
    :scope .step h3,
    :scope .school-unit-card h3,
    :scope .pillar strong,
    :scope .faq summary {
        color: var(--ink);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.35
    }

    :scope .hero-lead,
    :scope .hero-note,
    :scope .section-heading p,
    :scope .choice-card .section-heading p,
    :scope .card p,
    :scope .card li,
    :scope .choice-card .card p,
    :scope .choice-card .card li,
    :scope .pillar p,
    :scope .benefit-panel,
    :scope .check,
    :scope .person-info p,
    :scope .step p,
    :scope .faq details p,
    :scope .testimonial-note,
    :scope .school-unit-card p,
    :scope .final-cta p,
    :scope .stat span:last-child {
        color: var(--muted);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.6
    }

    :scope .stat span:last-child,
    :scope .pillar p {
        min-height: 44.8px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        text-align: center
    }

    :scope .stat span:last-child {
        max-width: 24ch;
        margin: 0 auto
    }

    :scope .pillar p {
        max-width: 40ch;
        margin: 8px auto 0
    }

    :scope .heading-description {
        min-height: 44.8px;
        margin: 8px auto 0;
        color: var(--muted);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.6;
        text-align: center
    }

    @media (max-width:620px) {
        :scope .heading-description {
            height: 39px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            font-size: 13px;
            line-height: 1.5
        }

        :scope .heading-description br {
            display: none
        }
    }

    :scope .choice-card .card,
    :scope .pillar {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px
    }

    :scope .choice-card .card-icon,
    :scope .pillar>span {
        flex: 0 0 36px;
        margin: 0
    }

    :scope .choice-card .card h3,
    :scope .pillar strong {
        margin: 0;
        line-height: 1.25
    }

    :scope .choice-card .card p,
    :scope .pillar p {
        margin: 0;
        line-height: 1.35
    }

    :scope .pillar p {
        min-height: 0;
        max-width: none;
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
        line-clamp: unset
    }

    :scope .person-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 20px
    }

    :scope .person-photo {
        flex: 0 0 48px;
        margin: 0
    }

    :scope .person-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 0
    }

    :scope .person-info h3,
    :scope .person-info p {
        margin: 0
    }

    :scope .person-info h3 {
        line-height: 1.25
    }

    :scope .person-info p {
        line-height: 1.35
    }

    :scope #footer-container {
        max-width: 1120px;
        margin: 24px auto 0
    }

    :scope #footer-container .footer {
        margin: 0;
        padding: 28px 16px;
        border-radius: 0;
        background: transparent;
        color: #666;
        text-align: center
    }

    :scope #footer-container .footer-main {
        margin: 0;
        color: #666;
        font-size: 14px
    }

    :scope #footer-container .footer-sub {
        margin: 4px 0 0;
        color: #999;
        font-size: 11px;
        line-height: 1.4
    }
}

@scope (body.page-form.page-training-planner) {
    :scope {
        --metro-red: #e30613;
        --metro-dark: #0d0d0f;
        --metro-black: #151515;
        --metro-white: #ffffff;
        --metro-gray: #f4f4f5;
        --metro-line: rgba(255, 255, 255, .72);
        --shadow: 0 18px 45px rgba(0, 0, 0, .18);
        --radius: 22px
    }

    * {
        box-sizing: border-box
    }

    :scope {
        margin: 0;
        font-family: Inter, Arial, Helvetica, sans-serif;
        background: linear-gradient(135deg, #070707 0%, #141414 45%, #2b0003 100%);
        color: #171717;
        min-height: 100vh
    }

    .app-shell {
        max-width: 1440px;
        margin: 0 auto;
        padding: 22px
    }

    .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .14);
        color: #fff;
        border-radius: var(--radius);
        padding: 18px 22px;
        box-shadow: var(--shadow);
        backdrop-filter: blur(8px)
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 14px
    }

    .brand-mark {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        background: #fff;
        color: var(--metro-red);
        display: grid;
        place-items: center;
        font-weight: 900;
        font-size: 30px;
        letter-spacing: -2px
    }

    .brand small {
        display: block;
        color: #ddd;
        margin-top: 4px;
        font-weight: 600
    }

    h1 {
        font-size: 24px;
        margin: 0;
        line-height: 1.1;
        text-transform: uppercase;
        letter-spacing: .5px
    }

    .actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end
    }

    button,
    .btn {
        border: 0;
        border-radius: 999px;
        padding: 11px 15px;
        font-weight: 800;
        cursor: pointer;
        background: #fff;
        color: #151515;
        transition: .2s;
        text-decoration: none;
        font-size: 13px
    }

    button:hover,
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, .2)
    }

    .primary {
        background: var(--metro-red);
        color: #fff
    }

    .dark {
        background: #111;
        color: #fff
    }

    .ghost {
        background: rgba(255, 255, 255, .12);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .2)
    }

    .layout {
        display: grid;
        grid-template-columns: 340px 1fr 320px;
        gap: 18px;
        margin-top: 18px;
        align-items: start
    }

    .panel {
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, .06)
    }

    .panel-header {
        padding: 16px 18px;
        background: #111;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px
    }

    .panel-header h2 {
        font-size: 15px;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: .6px
    }

    .panel-:scope {
        padding: 16px
    }

    label {
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        color: #444;
        display: block;
        margin: 10px 0 6px
    }

    input,
    select,
    textarea {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 14px;
        padding: 11px 12px;
        font: inherit;
        background: #fafafa;
        outline: none
    }

    textarea {
        min-height: 98px;
        resize: vertical
    }

    .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .activity-card {
        border: 1px solid #eee;
        border-radius: 18px;
        padding: 13px;
        margin-bottom: 10px;
        cursor: pointer;
        background: #fafafa;
        transition: .2s
    }

    .activity-card.active {
        border-color: var(--metro-red);
        background: #fff5f5;
        box-shadow: 0 8px 24px rgba(227, 6, 19, .12)
    }

    .activity-card strong {
        display: block;
        font-size: 14px
    }

    .activity-card span {
        font-size: 12px;
        color: #555;
        font-weight: 700
    }

    .field-wrap {
        padding: 14px;
        background: #f7f7f8
    }

    .field-toolbar {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 12px
    }

    .board-switcher {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 12px
    }

    .board-switcher button {
        border: 1px solid #dedee2;
        background: #fff;
        padding: 8px 12px
    }

    :scope .planner-card .board-switcher button.is-active {
        background: var(--metro-red);
        border-color: var(--metro-red);
        color: #fff
    }

    .board-switcher .add-board {
        margin-left: auto
    }

    .board-switcher button:disabled {
        cursor: not-allowed;
        opacity: .45;
        transform: none;
        box-shadow: none
    }

    .preview-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 16px
    }

    .field {
        position: relative;
        width: 100%;
        aspect-ratio: 105/68;
        border-radius: 20px;
        overflow: hidden;
        background: linear-gradient(90deg, #16843b 0%, #16843b 10%, #1b9343 10%, #1b9343 20%, #16843b 20%, #16843b 30%, #1b9343 30%, #1b9343 40%, #16843b 40%, #16843b 50%, #1b9343 50%, #1b9343 60%, #16843b 60%, #16843b 70%, #1b9343 70%, #1b9343 80%, #16843b 80%, #16843b 90%, #1b9343 90%, #1b9343 100%);
        border: 5px solid #fff;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 22px 40px rgba(0, 0, 0, .18);
        user-select: none
    }

    .field:before {
        content: "";
        position: absolute;
        inset: 5.5%;
        border: 2px solid var(--metro-line);
        border-radius: 8px
    }

    .half {
        position: absolute;
        top: 5.5%;
        bottom: 5.5%;
        left: 50%;
        border-left: 2px solid var(--metro-line)
    }

    .circle {
        position: absolute;
        width: 16%;
        aspect-ratio: 1;
        left: 42%;
        top: 38%;
        border: 2px solid var(--metro-line);
        border-radius: 50%
    }

    .spot {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #fff;
        left: calc(50% - 3.5px);
        top: calc(50% - 3.5px)
    }

    .box {
        position: absolute;
        top: 28%;
        width: 13%;
        height: 44%;
        border: 2px solid var(--metro-line)
    }

    .box.left {
        left: 5.5%;
        border-left: 0
    }

    .box.right {
        right: 5.5%;
        border-right: 0
    }

    .smallbox {
        position: absolute;
        top: 39%;
        width: 5.5%;
        height: 22%;
        border: 2px solid var(--metro-line)
    }

    .smallbox.left {
        left: 5.5%;
        border-left: 0
    }

    .smallbox.right {
        right: 5.5%;
        border-right: 0
    }

    .palette {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px
    }

    .tool {
        min-height: 74px;
        border: 1px solid #eee;
        border-radius: 16px;
        background: #fafafa;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        text-align: center
    }

    .tool:hover {
        border-color: var(--metro-red);
        background: #fff5f5
    }

    .ico {
        font-size: 24px
    }

    .hint {
        font-size: 12px;
        color: #666;
        line-height: 1.45;
        background: #f7f7f7;
        border-radius: 14px;
        padding: 10px;
        margin-top: 10px
    }

    .obj {
        position: absolute;
        left: 20%;
        top: 20%;
        display: grid;
        place-items: center;
        cursor: move;
        touch-action: none;
        font-weight: 900;
        z-index: 5
    }

    .obj.selected {
        outline: 3px solid #fff;
        filter: drop-shadow(0 0 6px var(--metro-red))
    }

    .player {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #111;
        color: #fff;
        border: 3px solid #fff;
        font-size: 13px
    }

    .player.red {
        background: var(--metro-red)
    }

    .player.white {
        background: #fff;
        color: #111;
        border-color: #111
    }

    .player.blue {
        background: #165dff
    }

    .cone {
        width: 0;
        height: 0;
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-bottom: 28px solid #ff8a00;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25))
    }

    .ball {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid #111
    }

    .goal {
        width: 52px;
        height: 24px;
        border: 4px solid #fff;
        background: rgba(0, 0, 0, .12);
        border-radius: 4px
    }

    .zone {
        width: 92px;
        height: 60px;
        border: 3px dashed #fff;
        background: rgba(227, 6, 19, .18);
        border-radius: 8px
    }

    .arrow {
        width: 90px;
        height: 4px;
        background: #fff;
        transform-origin: left center
    }

    .arrow:after {
        content: "";
        position: absolute;
        right: -2px;
        top: -7px;
        border-left: 16px solid #fff;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent
    }

    .txt {
        min-width: 60px;
        min-height: 24px;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
        font-size: 16px;
        letter-spacing: .4px
    }

    .properties small {
        font-size: 12px;
        color: #666;
        display: block;
        margin-top: 8px
    }

    .danger {
        background: #e30613;
        color: #fff;
        width: 100%;
        margin-top: 10px
    }

    .list-mini {
        padding-left: 18px;
        line-height: 1.5;
        font-size: 13px;
        color: #333
    }

    .footer-note {
        color: #ddd;
        text-align: center;
        font-size: 12px;
        margin: 16px 0 4px
    }

    @media(max-width:1100px) {
        .layout {
            grid-template-columns: 1fr
        }

        .topbar {
            align-items: flex-start;
            flex-direction: column
        }

        .actions {
            justify-content: flex-start
        }

        .field {
            min-height: 420px
        }
    }

    :scope {
        background: #f5f5f5;
        color: #171717;
        font-family: "Space Grotesk", sans-serif
    }

    :scope .page {
        max-width: 1600px;
        grid-template-columns: 420px minmax(0, 1fr);
        align-items: start
    }

    :scope .form-wrapper {
        min-width: 0;
        display: block
    }

    :scope .planner-card {
        padding: 0;
        overflow: hidden;
        border-top: 5px solid var(--metro-red)
    }

    :scope .app-shell {
        max-width: none;
        padding: 0
    }

    :scope .topbar {
        align-items: flex-start;
        border: 0;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
        padding: 28px 30px 24px;
        border-bottom: 1px solid #ececef
    }

    :scope .planner-heading {
        max-width: 560px
    }

    :scope .section-eyebrow {
        display: block;
        margin-bottom: 7px;
        color: var(--metro-red);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase
    }

    :scope .planner-heading h1 {
        margin: 0;
        color: #151518;
        font-size: 27px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.02em;
        text-transform: none
    }

    :scope .planner-heading p {
        margin-top: 8px;
        color: #707075;
        font-size: 13px;
        line-height: 1.5
    }

    :scope .planner-card .actions {
        display: flex;
        justify-content: flex-end;
        gap: 9px;
        flex-wrap: wrap
    }

    :scope .planner-card button,
    :scope .planner-card .btn {
        width: auto;
        min-height: 38px;
        padding: 10px 14px;
        border: 1px solid #d9d9de;
        border-radius: 999px;
        background: #f5f5f6;
        color: #35353a;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap
    }

    :scope .planner-card .actions .ghost {
        background: #fff
    }

    :scope .planner-card .actions .primary,
    :scope .planner-card .panel-header .primary,
    :scope .planner-card .danger {
        border-color: var(--metro-red);
        background: var(--metro-red);
        color: #fff
    }

    :scope .planner-card label {
        display: block;
        margin: 12px 0 6px;
        color: #57575c;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em
    }

    :scope .planner-card input:not([type="range"]):not([type="file"]),
    :scope .planner-card select,
    :scope .planner-card textarea {
        width: 100%;
        min-height: 42px;
        margin: 0;
        padding: 10px 12px;
        border: 1px solid #dcdce0;
        border-radius: 12px;
        background: #fff;
        color: #202024;
        font: 500 13px/1.35 "Space Grotesk", sans-serif
    }

    :scope .planner-card textarea {
        min-height: 94px;
        resize: vertical
    }

    :scope .planner-card input:focus,
    :scope .planner-card select:focus,
    :scope .planner-card textarea:focus {
        border-color: var(--metro-red);
        outline: 3px solid rgba(227, 6, 19, .1)
    }

    :scope .planner-card .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px
    }

    :scope .layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 0;
        margin: 0
    }

    :scope .panel {
        border: 0;
        border-right: 1px solid #e6e6e8;
        border-radius: 0;
        box-shadow: none
    }

    :scope .panel-header {
        min-height: 58px;
        padding: 15px 18px;
        background: #f4f4f5;
        color: #171717;
        border-bottom: 1px solid #e6e6e8
    }

    :scope .panel-header h2 {
        margin: 0;
        color: #171717;
        font-size: 13px;
        line-height: 1.35
    }

    :scope .panel-:scope {
        padding: 18px
    }

    :scope .activity-card {
        margin-bottom: 10px;
        padding: 12px;
        border-radius: 14px
    }

    :scope .activity-card strong {
        margin-bottom: 4px
    }

    :scope .object-workbench {
        padding: 20px 18px;
        border-top: 1px solid #ececef;
        background: #fafafa
    }

    :scope .workbench-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 14px
    }

    :scope .workbench-heading h3,
    :scope .settings-heading h3 {
        margin: 0;
        color: #242428;
        font-size: 16px
    }

    :scope .workbench-heading p {
        color: #74747a;
        font-size: 12px
    }

    :scope .palette {
        display: grid;
        grid-template-columns: repeat(7, minmax(76px, 1fr));
        gap: 9px
    }

    :scope .planner-card .tool {
        width: 100%;
        min-height: 76px;
        padding: 9px 6px;
        border: 1px solid #e0e0e4;
        border-radius: 14px;
        background: #fff;
        color: #2d2d31;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        white-space: normal
    }

    :scope .planner-card .tool:hover {
        border-color: var(--metro-red);
        background: #fff6f6;
        color: var(--metro-red);
        transform: translateY(-1px)
    }

    :scope .planner-card .tool .ico {
        font-size: 22px;
        line-height: 1
    }

    :scope .field-wrap {
        padding: 18px;
        background: #f4f4f5
    }

    :scope .field-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px
    }

    :scope .toolbar-label {
        margin-right: auto;
        color: #66666c;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase
    }

    :scope .field-toolbar button {
        min-height: 34px;
        padding: 8px 12px;
        border: 1px solid #dedee2;
        background: #fff
    }

    :scope .field-toolbar .dark {
        border-color: #171717;
        background: #171717;
        color: #fff
    }

    :scope .object-settings {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 22px;
        padding: 20px 18px;
        border-top: 1px solid #ececef;
        background: #fff
    }

    :scope .properties {
        display: grid;
        grid-template-columns: minmax(150px, 1.2fr) minmax(130px, 1fr) minmax(120px, .8fr) minmax(120px, .8fr) auto;
        align-items: end;
        gap: 12px
    }

    :scope .properties label {
        margin-top: 0
    }

    :scope .properties input[type="range"] {
        width: 100%;
        min-height: 42px;
        accent-color: var(--metro-red)
    }

    :scope .properties .danger {
        min-height: 42px;
        margin: 0
    }

    :scope .materials-panel {
        margin: 0;
        padding: 0 18px 20px;
        background: #fff
    }

    :scope .materials-panel summary {
        padding: 12px 14px;
        border: 1px solid #e2e2e5;
        border-radius: 12px;
        color: #48484d;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer
    }

    :scope .materials-panel .list-mini {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 22px;
        margin: 12px 0 0;
        padding: 0 18px
    }

    :scope .footer-note {
        margin: 0;
        padding: 15px 24px;
        color: #6f6f73;
        background: #fafafa;
        border-top: 1px solid #ececee
    }

    :scope>#footer-container {
        width: min(1600px, calc(100% - 32px));
        margin: 0 auto 28px
    }

    @media(max-width:1450px) {
        :scope .properties {
            grid-template-columns: repeat(2, minmax(160px, 1fr))
        }

        :scope .properties .danger {
            grid-column: 1/-1
        }
    }

    @media(max-width:980px) {
        :scope .layout {
            grid-template-columns: 1fr
        }

        :scope .panel {
            border-right: 0;
            border-bottom: 1px solid #e6e6e8
        }

        :scope .topbar,
        :scope .planner-card .actions {
            align-items: flex-start;
            justify-content: flex-start
        }

        :scope .palette {
            grid-template-columns: repeat(4, minmax(76px, 1fr))
        }

        :scope .object-settings {
            grid-template-columns: 1fr
        }
    }

    @media(max-width:620px) {

        :scope .planner-card .actions,
        :scope .field-toolbar,
        :scope .workbench-heading {
            flex-direction: column;
            align-items: stretch
        }

        :scope .planner-card .actions button,
        :scope .planner-card .actions .btn,
        :scope .field-toolbar button {
            width: 100%
        }

        :scope .palette,
        :scope .properties {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    :scope .page {
        max-width: 1120px;
        grid-template-columns: 420px minmax(0, 1fr);
        gap: 40px
    }

    :scope .planner-column {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        min-width: 0
    }

    :scope .planner-header-card,
    :scope .planner-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 28px;
        background: #fff;
        box-shadow: 0 14px 35px rgba(0, 0, 0, .06)
    }

    :scope .planner-header-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px
    }

    :scope .planner-heading {
        max-width: none
    }

    :scope .planner-heading h1 {
        font-size: 24px
    }

    :scope .planner-header-card .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%
    }

    :scope .planner-header-card button,
    :scope .planner-header-card .btn {
        width: auto;
        min-height: 38px;
        padding: 10px 14px;
        border: 1px solid #d8d8dc;
        border-radius: 999px;
        background: #fff;
        color: #505055;
        font: 700 11px/1 "Space Grotesk", sans-serif;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer
    }

    :scope .planner-header-card .primary {
        border-color: var(--metro-red);
        background: var(--metro-red);
        color: #fff
    }

    :scope .planner-card {
        border-top: 1px solid rgba(0, 0, 0, .08);
        overflow: hidden
    }

    :scope .app-shell,
    :scope .layout,
    :scope .panel,
    :scope .panel-:scope,
    :scope .object-workbench,
    :scope .field-wrap,
    :scope .object-settings {
        min-width: 0;
        max-width: 100%
    }

    :scope .layout {
        grid-template-columns: 1fr
    }

    :scope .left-panel {
        border-right: 0;
        border-bottom: 1px solid #e6e6e8
    }

    :scope .panel-header {
        padding: 14px
    }

    :scope .panel-:scope,
    :scope .object-workbench,
    :scope .field-wrap,
    :scope .object-settings {
        padding: 16px
    }

    :scope .planner-card .row {
        grid-template-columns: 1fr
    }

    :scope .palette {
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr))
    }

    :scope .workbench-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px
    }

    :scope .field-toolbar {
        align-items: stretch;
        flex-wrap: wrap
    }

    :scope .toolbar-label {
        flex-basis: 100%;
        margin: 0 0 2px
    }

    :scope .field {
        width: 100%;
        max-width: 100%
    }

    :scope .object-settings {
        grid-template-columns: 1fr;
        gap: 14px
    }

    :scope .properties {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    :scope .properties .danger {
        grid-column: 1/-1;
        width: 100%
    }

    :scope>#footer-container {
        width: min(1120px, calc(100% - 32px))
    }

    @media(max-width:900px) {
        :scope .page {
            grid-template-columns: 1fr
        }

        :scope #profile-card-container {
            min-width: 0
        }
    }

    @media(max-width:680px) {

        :scope .layout,
        :scope .properties {
            grid-template-columns: 1fr
        }

        :scope .planner-header-card .actions button,
        :scope .planner-header-card .actions .btn {
            width: 100%;
            text-align: center
        }
    }

    :scope .planner-header-card .actions {
        justify-content: center
    }

    :scope .duration-summary {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 16px 0 4px
    }

    :scope .duration-summary>div {
        padding: 10px;
        border: 1px solid #f0c5c7;
        border-radius: 12px;
        background: #fff7f7;
        text-align: center
    }

    :scope .duration-summary span,
    :scope .duration-summary strong {
        display: block
    }

    :scope .duration-summary span {
        margin-bottom: 3px;
        color: #77777c;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase
    }

    :scope .duration-summary strong {
        color: var(--metro-red);
        font-size: 14px
    }

    :scope .activity-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px
    }

    :scope .activity-card .activity-duration {
        display: inline-flex;
        margin-top: 8px;
        padding: 4px 8px;
        border-radius: 999px;
        background: #ededf0;
        color: #505055;
        font-size: 10px;
        font-weight: 700
    }

    :scope .planner-card .delete-activity {
        width: 28px;
        min-width: 28px;
        min-height: 28px;
        padding: 0;
        border: 1px solid #efb5b8;
        border-radius: 50%;
        background: #fff;
        color: var(--metro-red);
        font-size: 17px;
        line-height: 1
    }

    :scope .planner-card .delete-activity:hover {
        border-color: var(--metro-red);
        background: var(--metro-red);
        color: #fff
    }

    :scope .left-panel+.panel>.panel-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px
    }

    :scope #currentTitle {
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center
    }

    :scope #currentMeta {
        display: block;
        width: 100%;
        color: #55555a;
        font-size: 12px;
        font-weight: 600;
        text-align: center
    }

    :scope .obj.isokinetic,
    :scope .obj.traction,
    :scope .obj.jumpbox {
        min-width: 48px;
        min-height: 34px;
        padding: 5px 8px;
        border: 3px solid #fff;
        border-radius: 8px;
        color: #fff;
        font-size: 10px;
        line-height: 1.1;
        text-align: center;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .28)
    }

    :scope .obj.isokinetic {
        background: #555b66
    }

    :scope .obj.traction {
        min-width: 70px;
        border-radius: 999px;
        background: #e30613
    }

    :scope .obj.jumpbox {
        min-width: 58px;
        min-height: 42px;
        border-radius: 4px;
        background: #9c5b2e
    }

    :scope .left-panel>.panel-header {
        justify-content: center
    }

    :scope .left-panel>.panel-header .primary {
        margin: 0 auto
    }

    :scope.pdf-exporting .planner-header-card .actions,
    :scope.pdf-exporting .delete-activity {
        display: none !important
    }

    :scope.modal-open {
        overflow: hidden
    }

    :scope .tactical-preview {
        padding: 18px 16px 20px;
        border-top: 1px solid #ececef;
        background: #fafafa
    }

    :scope .preview-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px
    }

    :scope .preview-heading h3 {
        margin: 0;
        color: #242428;
        font-size: 16px
    }

    :scope .preview-field-wrap {
        padding: 0;
        border-radius: 18px;
        background: transparent
    }

    :scope .field-preview {
        pointer-events: none;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55)
    }

    :scope .field-preview .obj {
        cursor: default
    }

    :scope .tactical-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        padding: 20px;
        overflow: auto;
        background: rgba(10, 10, 12, .78);
        backdrop-filter: blur(6px)
    }

    :scope .tactical-modal.is-open {
        display: block
    }

    :scope .tactical-modal-dialog {
        width: min(1180px, 100%);
        margin: 0 auto;
        overflow: hidden;
        border-radius: 26px;
        background: #fff;
        box-shadow: 0 28px 90px rgba(0, 0, 0, .38)
    }

    :scope .tactical-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 20px 24px;
        border-bottom: 1px solid #e7e7ea;
        background: #fff
    }

    :scope .tactical-modal-header h2 {
        margin: 0;
        color: #18181b;
        font-size: 24px
    }

    :scope .planner-card .modal-close {
        width: 42px;
        min-width: 42px;
        min-height: 42px;
        padding: 0;
        border: 1px solid #dedee2;
        border-radius: 50%;
        background: #f5f5f6;
        color: #242428;
        font-size: 25px
    }

    :scope .tactical-modal .object-workbench,
    :scope .tactical-modal .field-wrap,
    :scope .tactical-modal .object-settings {
        padding: 22px 24px
    }

    :scope .tactical-modal .field {
        max-width: 920px;
        margin: 0 auto
    }

    :scope .tactical-modal .properties {
        grid-template-columns: minmax(160px, 1.2fr) minmax(140px, 1fr) minmax(130px, .8fr) minmax(130px, .8fr) auto
    }

    :scope .tactical-modal .properties .danger {
        grid-column: auto;
        width: auto
    }

    @media(max-width:760px) {
        :scope .preview-heading {
            align-items: stretch;
            flex-direction: column
        }

        :scope .preview-heading button {
            width: 100%
        }

        :scope .tactical-modal {
            padding: 8px
        }

        :scope .tactical-modal .properties {
            grid-template-columns: 1fr
        }

        :scope .tactical-modal .properties .danger {
            width: 100%
        }
    }

    :scope .tactical-modal {
        padding: 12px
    }

    :scope .tactical-modal-dialog {
        width: min(980px, 100%);
        max-height: calc(100vh - 24px);
        overflow: auto;
        border-radius: 20px
    }

    :scope .tactical-modal-header {
        padding: 12px 18px
    }

    :scope .tactical-modal-header .section-eyebrow {
        margin-bottom: 3px;
        font-size: 9px
    }

    :scope .tactical-modal-header h2 {
        font-size: 20px
    }

    :scope .planner-card .modal-close {
        width: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 21px
    }

    :scope .tactical-modal .workbench-heading {
        display: none
    }

    :scope .tactical-modal .object-workbench {
        padding: 12px 18px
    }

    :scope .tactical-modal .palette {
        gap: 7px
    }

    :scope .tactical-modal .planner-card .tool,
    :scope .tactical-modal .tool {
        min-height: 58px;
        padding: 6px 4px;
        border-radius: 11px;
        font-size: 10px
    }

    :scope .tactical-modal .tool .ico {
        font-size: 18px
    }

    :scope .tactical-modal .field-wrap {
        padding: 10px 18px 14px
    }

    :scope .tactical-modal .field-toolbar {
        gap: 6px;
        margin-bottom: 8px
    }

    :scope .tactical-modal .toolbar-label {
        font-size: 9px
    }

    :scope .tactical-modal .field-toolbar button {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 10px
    }

    :scope .tactical-modal .field {
        max-width: 720px
    }

    :scope .tactical-modal .object-settings {
        gap: 12px;
        padding: 12px 18px 16px
    }

    :scope .tactical-modal .settings-heading h3 {
        font-size: 15px
    }

    :scope .tactical-modal .properties {
        gap: 8px
    }

    :scope .planner-confirm-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1200;
        place-items: center;
        padding: 20px;
        background: rgba(15, 15, 18, .58);
        backdrop-filter: blur(4px)
    }

    :scope .planner-confirm-modal.is-open {
        display: grid
    }

    :scope .planner-confirm-dialog {
        width: min(430px, 100%);
        padding: 26px;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
        text-align: center
    }

    :scope .planner-confirm-dialog .modal-title {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        color: #18181b;
        font-size: 20px;
        font-weight: 700;
        text-align: center
    }

    :scope .planner-confirm-dialog .modal-text {
        display: block;
        width: 100%;
        margin: 0 auto;
        color: #68686e;
        font-size: 14px;
        line-height: 1.55;
        text-align: center
    }

    :scope .planner-confirm-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 22px
    }

    :scope .planner-confirm-actions button {
        min-height: 40px;
        padding: 10px 18px;
        border: 1px solid #d9d9dd;
        border-radius: 999px;
        background: #fff;
        color: #45454a;
        font: 700 12px/1 "Space Grotesk", sans-serif;
        cursor: pointer
    }

    :scope .planner-confirm-actions .primary {
        border-color: var(--metro-red);
        background: var(--metro-red);
        color: #fff
    }

    :scope .planner-card,
    :scope .planner-card .panel,
    :scope .planner-card .panel-header,
    :scope .planner-card .panel-:scope,
    :scope .tactical-preview {
        background: #fff
    }

    :scope .left-panel .panel-body label,
    :scope .left-panel .activity-card {
        text-align: center
    }

    :scope .left-panel .activity-card-head {
        position: relative;
        justify-content: center;
        padding: 0 30px
    }

    :scope .left-panel .activity-card-head .delete-activity {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%)
    }

    :scope .left-panel input,
    :scope .left-panel select {
        text-align: center;
        text-align-last: center
    }

    :scope .planner-card .session-meta-row {
        gap: 0 12px
    }

    :scope .athlete-selection {
        margin: 14px 0 4px;
        padding: 14px;
        border: 1px solid #e2e2e5;
        border-radius: 14px;
        background: #fafafa
    }

    :scope .athlete-selection>label {
        margin-top: 0
    }

    :scope .athlete-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        max-height: 230px;
        overflow-x: hidden;
        overflow-y: auto
    }

    :scope .athlete-option {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 8px 5px;
        border: 1px solid #dddde1;
        border-radius: 10px;
        background: #fff;
        color: #35353a;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        text-transform: none
    }

    :scope .athlete-option:has(input:checked) {
        border-color: var(--metro-red);
        background: #fff5f5;
        color: #b9000c
    }

    :scope .athlete-option input {
        position: absolute;
        opacity: 0;
        pointer-events: none
    }

    :scope .athlete-photo {
        display: block;
        flex: 0 0 67px;
        width: 67px !important;
        min-width: 67px;
        max-width: 67px;
        height: 67px !important;
        min-height: 67px;
        max-height: 67px;
        margin-inline: auto;
        overflow: hidden;
        border: 1px solid #dddde1;
        border-radius: 50%;
        background: #f1f1f2
    }

    :scope .athlete-photo img {
        display: block;
        width: 67px !important;
        min-width: 67px;
        max-width: 67px;
        height: 67px !important;
        min-height: 67px;
        max-height: 67px;
        object-fit: cover;
        object-position: center top
    }

    :scope .athlete-info {
        display: block;
        width: 100%;
        min-width: 0;
        text-align: center
    }

    :scope .athlete-name {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        color: #171717;
        font-size: 10px;
        text-align: center;
        line-height: 1.2
    }

    :scope .athlete-position {
        display: block;
        margin-top: 2px;
        color: #77777c;
        font-size: 9px;
        font-weight: 800;
        text-align: center;
        text-transform: uppercase
    }

    :scope .activity-materials {
        margin: 12px 0
    }

    :scope .material-options {
        display: flex;
        flex-direction: column;
        gap: 6px
    }

    :scope .material-option {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr) 76px;
        align-items: center;
        gap: 7px;
        min-width: 0;
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #dddde1;
        border-radius: 10px;
        background: #fff;
        font-size: 10px;
        font-weight: 700;
        text-transform: none;
        cursor: pointer
    }

    :scope .material-option:has(input:checked) {
        border-color: var(--metro-red);
        background: #fff5f5;
        color: #b9000c
    }

    :scope .material-option input {
        width: 15px;
        min-height: 15px;
        margin: 0;
        accent-color: var(--metro-red)
    }

    :scope .material-option .material-quantity {
        width: 76px;
        min-height: 34px;
        padding: 6px 8px;
        border-radius: 8px;
        background: #fff;
        text-align: center
    }

    :scope .material-option:not(:has(input:checked)) .material-quantity {
        opacity: .45
    }

    :scope .planner-card .panel-body label {
        margin: 16px 0 6px
    }

    :scope .planner-card .panel-:scope .row {
        row-gap: 0
    }

    :scope .planner-card .panel-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.material-quantity),
    :scope .planner-card .panel-body select,
    :scope .planner-card #actNotes {
        height: 48px;
        min-height: 48px
    }

    :scope .planner-card #actDescription {
        height: 192px;
        min-height: 192px
    }

    :scope .activity-materials {
        margin-top: 0
    }

    :scope .planner-card .panel,
    :scope .planner-card .left-panel {
        border-right: 0;
        border-bottom: 0
    }

    :scope .planner-card .panel-header {
        border-bottom: 0;
        min-height: 0;
        padding-bottom: 0
    }

    :scope .planner-card .panel-:scope {
        padding-top: 0
    }

    @media(max-width:760px) {
        :scope .session-meta-row {
            gap: 0
        }

        :scope .material-options {
            width: 100%
        }
    }

    :scope .athlete-status {
        margin: 10px 0 0;
        color: #77777c;
        font-size: 11px;
        text-align: center
    }

    @media(max-width:680px) {
        :scope .athlete-list {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }
}

/* =========================================================
   CENTRAL DE LINKS — PADRONIZAÇÃO VISUAL DO PORTAL
   Mantém o card esquerdo intacto e ajusta apenas a coluna direita.
   ========================================================= */

body.page-links .portal-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    font-family: "Space Grotesk", sans-serif;
    color: var(--metro-text);
}

/* Exibição focada ao selecionar uma categoria */
body.page-links .portal-content.category-view .portal-overview,
body.page-links .portal-content.category-view .portal-search-panel,
body.page-links .portal-content.category-view .quick-access {
    display: none;
}

/* Blocos principais */
body.page-links .portal-toolbar,
body.page-links .portal-overview,
body.page-links .portal-search-panel,
body.page-links .portal-section,
body.page-links .quick-access {
    background: #ffffff;
    border: 1px solid var(--metro-line);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
}

/* Navegação superior */
body.page-links .portal-toolbar {
    position: sticky;
    top: 24px;
    z-index: 8;
    padding: 16px 20px;
    border-radius: 24px;
}

body.page-links .portal-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--metro-muted);
    font-size: 12px;
    line-height: 1.4;
}

body.page-links .portal-breadcrumb strong {
    color: var(--metro-text);
    font-weight: 700;
}

body.page-links .portal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.page-links .portal-nav button {
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    padding: 8px 14px;
    background: #ffffff;
    color: #555555;
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.18s ease-out;
}

body.page-links .portal-nav button:hover,
body.page-links .portal-nav button.active {
    border-color: var(--metro-red);
    background: var(--metro-red);
    color: #ffffff;
}

body.page-links .portal-nav button.active {
    box-shadow: 0 0 0 4px rgba(224, 32, 32, 0.18);
}

body.page-links .portal-nav button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(224, 32, 32, 0.22);
}

/* Resumo */
body.page-links .portal-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
}

body.page-links .overview-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    background: #ffffff;
}

body.page-links .overview-icon {
    flex: 0 0 auto;
    color: var(--metro-red);
    font-size: 28px;
    line-height: 1;
}

body.page-links .overview-card>div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

body.page-links .overview-card strong {
    color: var(--metro-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

body.page-links .overview-card span:last-child {
    margin-top: 6px;
    color: var(--metro-muted);
    font-size: 12px;
    line-height: 1.35;
}

/* Busca */
body.page-links .portal-search-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px;
    border-radius: 24px;
}

body.page-links .portal-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 16px;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    background: #ffffff;
}

body.page-links .portal-search span {
    color: var(--metro-muted);
    font-size: 22px;
    line-height: 1;
}

body.page-links .portal-search input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--metro-text);
    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 400;
}

body.page-links .portal-search input::placeholder {
    color: #999999;
}

body.page-links #clearFilters {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    background: #ffffff;
    color: #555555;
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.18s ease-out;
}

body.page-links #clearFilters:hover {
    border-color: var(--metro-red);
    color: var(--metro-red);
}

/* Favoritos e últimos acessos */
body.page-links .quick-access {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
}

body.page-links .quick-access-block {
    min-width: 0;
    padding: 16px;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    background: #ffffff;
}

body.page-links .quick-access-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

body.page-links .quick-access-heading h2 {
    color: var(--metro-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

body.page-links .quick-access-heading span {
    color: var(--metro-muted);
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
}

body.page-links .quick-access-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.page-links .quick-access-list a {
    padding: 8px 12px;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    color: #555555;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: 0.18s ease-out;
}

body.page-links .quick-access-list a:hover {
    border-color: var(--metro-red);
    color: var(--metro-red);
}

/* Seções */
body.page-links .portal-section {
    margin-bottom: 24px;
    padding: 24px;
    border-radius: 28px;
    scroll-margin-top: 160px;
}

body.page-links .portal-section[hidden] {
    display: none;
}

body.page-links .portal-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

body.page-links .portal-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-links .portal-section-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid rgba(224, 32, 32, 0.24);
    border-radius: 12px;
    color: var(--metro-red);
    font-size: 16px;
}

body.page-links .portal-section-title h2 {
    color: var(--metro-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

body.page-links .portal-section-header p {
    margin: 8px 0 0 44px;
    color: var(--metro-muted);
    font-size: 14px;
    line-height: 1.55;
}

body.page-links .portal-section-count {
    flex: 0 0 auto;
    padding: 7px 12px;
    border: 1px solid #d5d5d5;
    border-radius: 999px;
    color: #555555;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

/* Cards */
body.page-links .portal-links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

body.page-links .portal-link-card {
    min-width: 0;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
    transition: 0.20s ease-out;
}

body.page-links .portal-link-card:hover {
    transform: translateY(-4px);
    border-color: rgba(224, 32, 32, 0.32);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

body.page-links .portal-link-card[hidden] {
    display: none;
}

body.page-links .portal-card-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    gap: 12px;
    align-items: flex-start;
    padding: 20px 20px 14px;
}

body.page-links .portal-link-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E10600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    color: transparent;
    font-size: 0;
}

body.page-links .portal-link-icon.portal-link-icon-svg {
    display: grid;
    place-items: center;
    background-image: none;
    color: var(--metro-red);
    font-size: 24px;
}

body.page-links .portal-card-copy {
    min-width: 0;
}

body.page-links .portal-card-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

body.page-links .portal-card-title-row h3 {
    margin: 0;
    color: var(--metro-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

body.page-links .portal-card-copy p {
    margin: 4px 0 0;
    color: var(--metro-muted);
    font-size: 13px;
    line-height: 1.45;
}

body.page-links .portal-badge {
    padding: 4px 8px;
    border: 1px solid rgba(224, 32, 32, 0.34);
    border-radius: 999px;
    color: var(--metro-red);
    background: rgba(224, 32, 32, 0.04);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.page-links .favorite-button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #999999;
    font-family: "Space Grotesk", sans-serif;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: 0.18s ease-out;
}

body.page-links .favorite-button:hover,
body.page-links .favorite-button.active {
    color: var(--metro-red);
}

body.page-links .portal-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px 18px;
}

body.page-links .portal-card-footer>span {
    display: none;
}

body.page-links .portal-card-footer a {
    color: var(--metro-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: 0.18s ease-out;
}

body.page-links .portal-card-footer a:hover {
    color: var(--metro-red);
}

/* Estado vazio */
body.page-links .portal-empty {
    padding: 42px 24px;
    border: 1px dashed #d5d5d5;
    border-radius: 24px;
    text-align: center;
}

body.page-links .portal-empty strong {
    display: block;
    color: var(--metro-text);
    font-size: 16px;
    font-weight: 700;
}

body.page-links .portal-empty span {
    display: block;
    margin-top: 8px;
    color: var(--metro-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* Responsividade */
@media (max-width: 1000px) {
    body.page-links .portal-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    body.page-links .portal-toolbar {
        position: static;
    }
}

@media (max-width: 640px) {
    body.page-links .portal-content {
        gap: 18px;
    }

    body.page-links .portal-overview,
    body.page-links .quick-access,
    body.page-links .portal-links-grid {
        grid-template-columns: 1fr;
    }

    body.page-links .portal-search-panel {
        grid-template-columns: 1fr;
    }

    body.page-links #clearFilters {
        height: 44px;
    }

    body.page-links .portal-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    body.page-links .portal-nav button {
        flex: 0 0 auto;
    }

    body.page-links .portal-section {
        padding: 20px;
        border-radius: 24px;
    }

    body.page-links .portal-section-header {
        flex-direction: column;
        gap: 12px;
    }

    body.page-links .portal-section-header p {
        margin-left: 0;
        font-size: 13px;
    }

    body.page-links .portal-section-title h2 {
        font-size: 20px;
    }

    body.page-links .portal-link-card {
        min-height: 156px;
        border-radius: 24px;
    }

    body.page-links .portal-card-head {
        padding: 18px 18px 12px;
    }

    body.page-links .portal-card-footer {
        padding: 10px 18px 16px;
    }
}

/* AVALIAÇÕES — ETAPAS DO FORMULÁRIO — CSS MIGRADO DO HTML */
@scope (body.page-form:not(.page-training-planner)) {
    .form-step {
        display: none;
    }

    .form-step.active {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* Mantém o espaçamento vertical original entre campos e linhas */
    .form-step .field-group {
        margin: 0;
    }

    .form-step .field-row {
        margin: 0;
    }

    .step-navigation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 22px;
    }

    .step-navigation button {
        min-width: 120px;
        min-height: 42px;
        border-radius: 999px;
        padding: 10px 20px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -.2px;
        line-height: 1;
    }

    .step-navigation button:hover {
        transform: translateY(-1px);
    }

    .btn-step-back {
        border: 1px solid #d5d5d5;
        background: #fff;
        color: #333;
    }

    .btn-step-next,
    .btn-step-submit {
        border: 1px solid #e02020;
        background: #e02020;
        color: #fff;
        margin-left: auto;
    }

    .btn-step-back[hidden],
    .btn-step-next[hidden],
    .btn-step-submit[hidden] {
        display: none;
    }

    .step-progress-wrapper {
        margin-top: 14px;
    }

    .step-progress-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 7px;
        color: #666;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .step-progress-track {
        width: 100%;
        height: 7px;
        overflow: hidden;
        border-radius: 999px;
        background: #ededed;
    }

    .step-progress-fill {
        width: 25%;
        height: 100%;
        border-radius: inherit;
        background: #e02020;
        transition: width 0.3s ease;
    }

    .step-error-message {
        display: none;
        margin-top: 10px;
        color: #e02020;
        font-size: 12px;
        font-weight: 500;
        text-align: right;
    }

    @media (max-width: 520px) {
        .step-navigation {
            gap: 8px;
        }

        .step-navigation button {
            min-width: 105px;
            padding-inline: 14px;
        }
    }
}

/* PLANEJADOR DE TREINOS — CSS MIGRADO DO HTML */
@scope (:scope) {
    :scope {
        --metro-red: #e30613;
        --metro-dark: #0d0d0f;
        --metro-black: #151515;
        --metro-white: #ffffff;
        --metro-gray: #f4f4f5;
        --metro-line: rgba(255, 255, 255, .72);
        --shadow: 0 18px 45px rgba(0, 0, 0, .18);
        --radius: 22px;
    }

    * {
        box-sizing: border-box
    }

    :scope {
        margin: 0;
        font-family: Inter, Arial, Helvetica, sans-serif;
        background: linear-gradient(135deg, #070707 0%, #141414 45%, #2b0003 100%);
        color: #171717;
        min-height: 100vh;
    }

    .app-shell {
        max-width: 1440px;
        margin: 0 auto;
        padding: 22px
    }

    .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .14);
        color: #fff;
        border-radius: var(--radius);
        padding: 18px 22px;
        box-shadow: var(--shadow);
        backdrop-filter: blur(8px)
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 14px
    }

    .brand-mark {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        background: #fff;
        color: var(--metro-red);
        display: grid;
        place-items: center;
        font-weight: 900;
        font-size: 30px;
        letter-spacing: -2px
    }

    .brand small {
        display: block;
        color: #ddd;
        margin-top: 4px;
        font-weight: 600
    }

    h1 {
        font-size: 24px;
        margin: 0;
        line-height: 1.1;
        text-transform: uppercase;
        letter-spacing: .5px
    }

    .actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end
    }

    button,
    .btn {
        border: 0;
        border-radius: 999px;
        padding: 11px 15px;
        font-weight: 800;
        cursor: pointer;
        background: #fff;
        color: #151515;
        transition: .2s;
        text-decoration: none;
        font-size: 13px
    }

    button:hover,
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, .2)
    }

    .primary {
        background: var(--metro-red);
        color: #fff
    }

    .dark {
        background: #111;
        color: #fff
    }

    .ghost {
        background: rgba(255, 255, 255, .12);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .2)
    }

    .layout {
        display: grid;
        grid-template-columns: 340px 1fr 320px;
        gap: 18px;
        margin-top: 18px;
        align-items: start
    }

    .panel {
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, .06)
    }

    .panel-header {
        padding: 16px 18px;
        background: #111;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px
    }

    .panel-header h2 {
        font-size: 15px;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: .6px
    }

    .panel-:scope {
        padding: 16px
    }

    label {
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        color: #444;
        display: block;
        margin: 10px 0 6px
    }

    input,
    select,
    textarea {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 14px;
        padding: 11px 12px;
        font: inherit;
        background: #fafafa;
        outline: none
    }

    .selection-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 7px;
        padding: 11px 13px;
        border: 1px solid #ddd;
        border-radius: 14px;
        background: #fafafa
    }

    .selection-card strong {
        font-size: 13px
    }

    .selection-card button {
        padding: 7px 11px;
        border-radius: 9px;
        background: var(--metro-red);
        color: #fff;
        font-size: 11px
    }

    :scope .selection-card {
        margin-top: 6px;
        padding: 12px 14px;
        border: 1px solid #ddd;
        border-radius: 14px;
        background: #fafafa
    }

    :scope .selection-card .selection-info {
        display: flex;
        flex-direction: column;
        line-height: 1.2
    }

    :scope .selection-card .selection-role {
        color: #666;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase
    }

    :scope .selection-card .selection-name {
        font-size: 13px;
        font-weight: 800
    }

    :scope .selection-card .btn-remover,
    :scope .physical-valence-remove {
        width: auto;
        min-width: 0;
        min-height: 0;
        padding: 6px 10px;
        border: none;
        border-radius: 8px;
        background: var(--metro-red) !important;
        color: #fff !important;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        margin: 0;
        appearance: none
    }

    input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield
    }

    textarea {
        min-height: 98px;
        resize: vertical
    }

    .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .activity-card {
        border: 1px solid #eee;
        border-radius: 18px;
        padding: 13px;
        margin-bottom: 10px;
        cursor: pointer;
        background: #fafafa;
        transition: .2s
    }

    .activity-card.active {
        border-color: var(--metro-red);
        background: #fff5f5;
        box-shadow: 0 8px 24px rgba(227, 6, 19, .12)
    }

    .activity-card strong {
        display: block;
        font-size: 14px
    }

    .activity-card span {
        font-size: 12px;
        color: #555;
        font-weight: 700
    }

    .field-wrap {
        padding: 14px;
        background: #f7f7f8
    }

    .field-toolbar {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 12px
    }

    .board-switcher {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }

    .board-switcher button {
        border: 1px solid #dedee2;
        background: #fff;
        padding: 8px 12px;
    }

    :scope .planner-card .board-switcher button.is-active {
        background: var(--metro-red);
        border-color: var(--metro-red);
        color: #fff;
    }

    .board-switcher .add-board {
        margin-left: auto;
    }

    .board-switcher button:disabled {
        cursor: not-allowed;
        opacity: .45;
        transform: none;
        box-shadow: none;
    }

    .preview-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 16px;
    }

    .field {
        position: relative;
        width: 100%;
        aspect-ratio: 105/68;
        border-radius: 20px;
        overflow: hidden;
        background: linear-gradient(90deg, #16843b 0%, #16843b 10%, #1b9343 10%, #1b9343 20%, #16843b 20%, #16843b 30%, #1b9343 30%, #1b9343 40%, #16843b 40%, #16843b 50%, #1b9343 50%, #1b9343 60%, #16843b 60%, #16843b 70%, #1b9343 70%, #1b9343 80%, #16843b 80%, #16843b 90%, #1b9343 90%, #1b9343 100%);
        border: 5px solid #fff;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 22px 40px rgba(0, 0, 0, .18);
        user-select: none
    }

    .field:before {
        content: "";
        position: absolute;
        inset: 5.5%;
        border: 2px solid var(--metro-line);
        border-radius: 8px
    }

    .half {
        position: absolute;
        top: 5.5%;
        bottom: 5.5%;
        left: 50%;
        border-left: 2px solid var(--metro-line)
    }

    .circle {
        position: absolute;
        width: 16%;
        aspect-ratio: 1;
        left: 42%;
        top: 38%;
        border: 2px solid var(--metro-line);
        border-radius: 50%
    }

    .spot {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #fff;
        left: calc(50% - 3.5px);
        top: calc(50% - 3.5px)
    }

    .box {
        position: absolute;
        top: 28%;
        width: 13%;
        height: 44%;
        border: 2px solid var(--metro-line)
    }

    .box.left {
        left: 5.5%;
        border-left: 0
    }

    .box.right {
        right: 5.5%;
        border-right: 0
    }

    .smallbox {
        position: absolute;
        top: 39%;
        width: 5.5%;
        height: 22%;
        border: 2px solid var(--metro-line)
    }

    .smallbox.left {
        left: 5.5%;
        border-left: 0
    }

    .smallbox.right {
        right: 5.5%;
        border-right: 0
    }

    .palette {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px
    }

    .tool {
        min-height: 74px;
        border: 1px solid #eee;
        border-radius: 16px;
        background: #fafafa;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        text-align: center
    }

    .tool:hover {
        border-color: var(--metro-red);
        background: #fff5f5
    }

    .ico {
        font-size: 24px
    }

    .ico.cone-icon {
        position: relative;
        display: block;
        width: 28px;
        height: 29px;
        color: #ff8a00
    }

    .ico.cone-icon::before {
        content: "";
        position: absolute;
        left: 6px;
        bottom: 5px;
        border-right: 8px solid transparent;
        border-bottom: 23px solid currentColor;
        border-left: 8px solid transparent
    }

    .ico.cone-icon::after {
        content: "";
        position: absolute;
        right: 1px;
        bottom: 0;
        left: 1px;
        height: 6px;
        border-radius: 1px;
        background: currentColor
    }

    .ico.barrier-icon {
        position: relative;
        display: block;
        width: 34px;
        height: 20px;
        color: #f2c200;
        border: 3px solid currentColor;
        border-bottom: 0;
        border-radius: 3px 3px 0 0
    }

    .ico.barrier-icon::before,
    .ico.barrier-icon::after {
        content: "";
        position: absolute;
        bottom: -4px;
        width: 11px;
        height: 4px;
        border-radius: 1px;
        background: currentColor
    }

    .ico.barrier-icon::before {
        left: -6px
    }

    .ico.barrier-icon::after {
        right: -6px
    }

    .tactical-menus {
        display: grid;
        grid-template-columns: repeat(7, minmax(105px, 1fr));
        gap: 8px;
        overflow: visible
    }

    .tactical-menu {
        position: relative;
        min-width: 0
    }

    .tactical-menu summary {
        min-height: 54px;
        padding: 9px 8px;
        border: 1px solid #e0e0e4;
        border-radius: 13px;
        background: #fff;
        color: #2d2d31;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.15;
        text-align: center;
        cursor: pointer;
        list-style: none
    }

    .tactical-menu summary::-webkit-details-marker {
        display: none
    }

    .tactical-menu summary::after {
        content: "⌄";
        color: #777;
        font-size: 12px
    }

    .tactical-menu[open] summary {
        border-color: var(--metro-red);
        background: #fff5f5;
        color: var(--metro-red)
    }

    .tactical-menu-panel {
        position: absolute;
        top: calc(100% + 7px);
        left: 0;
        z-index: 80;
        width: 320px;
        max-height: 330px;
        padding: 7px;
        overflow-y: auto;
        border: 1px solid #dedee2;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 16px 38px rgba(0, 0, 0, .18)
    }

    .tactical-menu:nth-last-child(-n+2) .tactical-menu-panel {
        right: 0;
        left: auto
    }

    .planner-card .tactical-menu-option {
        width: 100%;
        min-height: 38px;
        padding: 8px 10px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #29292d;
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        white-space: nowrap
    }

    .planner-card .tactical-menu-option:hover {
        background: #f2f2f4;
        color: var(--metro-red);
        transform: none
    }

    .tactical-menu-option .menu-option-icon {
        flex: 0 0 28px;
        font-size: 20px;
        text-align: center
    }

    .tactical-menu-option .menu-option-icon.arrow-icon-straight,
    .tactical-menu-option .menu-option-icon.arrow-icon-curved {
        position: relative;
        width: 28px;
        height: 20px;
        font-size: 0;
    }

    .tactical-menu-option .menu-option-icon.arrow-icon-straight::before {
        content: "";
        position: absolute;
        left: 1px;
        right: 4px;
        top: 9px;
        height: 2px;
        background: currentColor;
    }

    .tactical-menu-option .menu-option-icon.arrow-icon-straight::after {
        content: "";
        position: absolute;
        right: 1px;
        top: 5px;
        width: 8px;
        height: 8px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: rotate(45deg);
    }

    .tactical-menu-option .menu-option-icon.arrow-icon-curved::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 5px;
        width: 21px;
        height: 14px;
        border-top: 2px dashed currentColor;
        border-radius: 50% 50% 0 0;
        transform: rotate(-12deg);
    }

    .tactical-menu-option .menu-option-icon.arrow-icon-curved::after {
        content: "";
        position: absolute;
        right: 1px;
        top: 2px;
        width: 7px;
        height: 7px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: rotate(53deg);
    }

    .tactical-menu-option .menu-option-icon.cone-menu-icon {
        width: 24px;
        height: 28px;
        background: currentColor;
        clip-path: polygon(45% 0, 55% 0, 82% 75%, 100% 82%, 100% 100%, 0 100%, 0 82%, 18% 75%);
        font-size: 0;
    }

    .tactical-menu-option .menu-option-icon.disc-menu-icon {
        width: 28px;
        height: 12px;
        border: 3px solid currentColor;
        border-radius: 50%;
        font-size: 0;
    }

    :scope .field.is-drawing {
        cursor: crosshair;
        box-shadow: inset 0 0 0 4px rgba(227, 6, 19, .75);
    }

    .obj.menu-item {
        min-width: 78px;
        min-height: 32px;
        padding: 6px 9px;
        border: 2px solid #fff;
        border-radius: 9px;
        background: rgba(17, 17, 17, .82);
        color: #fff;
        font-size: 12px;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
        box-shadow: 0 3px 9px rgba(0, 0, 0, .25)
    }

    @media (max-width: 820px) {
        .tactical-menus {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .tactical-menu-panel,
        .tactical-menu:nth-last-child(-n+2) .tactical-menu-panel {
            right: auto;
            left: 0;
            width: min(240px, calc(100vw - 56px))
        }
    }

    .hint {
        font-size: 12px;
        color: #666;
        line-height: 1.45;
        background: #f7f7f7;
        border-radius: 14px;
        padding: 10px;
        margin-top: 10px
    }

    .obj {
        position: absolute;
        left: 20%;
        top: 20%;
        display: grid;
        place-items: center;
        cursor: move;
        touch-action: none;
        font-weight: 900;
        z-index: 5
    }

    .obj.selected {
        outline: 0;
        box-shadow: none
    }

    .player {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--object-color, #111);
        color: #fff;
        border: 3px solid #fff;
        font-size: 13px
    }

    .player.red {
        background: var(--metro-red)
    }

    .player.white {
        background: #fff;
        color: #111;
        border-color: #111
    }

    .player.blue {
        background: #165dff
    }

    .cone {
        width: 28px;
        height: 32px;
        color: var(--object-color, #ff8a00);
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25))
    }

    .cone::before {
        content: "";
        position: absolute;
        left: 5px;
        bottom: 5px;
        width: 18px;
        height: 27px;
        background: currentColor;
        clip-path: polygon(50% 0, 100% 100%, 0 100%)
    }

    .cone::after {
        content: "";
        position: absolute;
        left: 1px;
        right: 1px;
        bottom: 0;
        height: 6px;
        border-radius: 1px;
        background: currentColor
    }

    .ball {
        width: 32px;
        height: 32px;
        border: 2px solid #111;
        border-radius: 50%;
        background-color: #fff;
        background-image: radial-gradient(circle at 50% 50%, #111 0 5px, transparent 5.5px),
            radial-gradient(circle at 50% 4%, #111 0 4px, transparent 4.5px),
            radial-gradient(circle at 96% 42%, #111 0 4px, transparent 4.5px),
            radial-gradient(circle at 78% 93%, #111 0 4px, transparent 4.5px),
            radial-gradient(circle at 20% 89%, #111 0 4px, transparent 4.5px),
            radial-gradient(circle at 3% 38%, #111 0 4px, transparent 4.5px);
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2))
    }

    .barrier {
        width: 46px;
        height: 23px;
        color: var(--object-color, #f6a300);
        border: 4px solid currentColor;
        border-bottom: 0;
        border-radius: 3px 3px 0 0;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .22))
    }

    .barrier::before,
    .barrier::after {
        content: "";
        position: absolute;
        bottom: -5px;
        width: 14px;
        height: 5px;
        border-radius: 2px;
        background: currentColor
    }

    .barrier::before {
        left: -7px
    }

    .barrier::after {
        right: -7px
    }

    .mobileBarrier {
        width: 32px;
        height: 62px;
        color: var(--object-color, #f2c200);
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
    }

    .mobileBarrier::before {
        content: "";
        position: absolute;
        left: 8px;
        top: 8px;
        width: 16px;
        height: 36px;
        border: 3px solid #222;
        border-radius: 8px 8px 5px 5px;
        background: linear-gradient(to bottom, currentColor 0 42%, #fff 42% 100%);
        clip-path: polygon(28% 0, 72% 0, 100% 18%, 86% 100%, 14% 100%, 0 18%);
    }

    .mobileBarrier::after {
        content: "";
        position: absolute;
        left: 4px;
        right: 4px;
        bottom: 2px;
        height: 15px;
        border-bottom: 4px solid #222;
        background: linear-gradient(75deg, transparent 45%, #222 46% 54%, transparent 55%),
            linear-gradient(-75deg, transparent 45%, #222 46% 54%, transparent 55%);
    }

    .goal {
        width: 52px;
        height: 24px;
        border: 4px solid #fff;
        background: rgba(0, 0, 0, .12);
        border-radius: 4px
    }

    .zone {
        width: 92px;
        height: 60px;
        border: 3px dashed #fff;
        background: rgba(227, 6, 19, .18);
        border-radius: 8px
    }

    .arrow {
        width: 90px;
        height: 4px;
        background: #fff;
        transform-origin: left center
    }

    .arrow:after {
        content: "";
        position: absolute;
        right: -2px;
        top: -7px;
        border-left: 16px solid #fff;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent
    }

    .txt {
        min-width: 60px;
        min-height: 24px;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
        font-size: 16px;
        letter-spacing: .4px
    }

    .properties small {
        font-size: 12px;
        color: #666;
        display: block;
        margin-top: 8px
    }

    .danger {
        background: #e30613;
        color: #fff;
        width: 100%;
        margin-top: 10px
    }

    .list-mini {
        padding-left: 18px;
        line-height: 1.5;
        font-size: 13px;
        color: #333
    }

    .footer-note {
        color: #ddd;
        text-align: center;
        font-size: 12px;
        margin: 16px 0 4px
    }

    @media(max-width:1100px) {
        .layout {
            grid-template-columns: 1fr
        }

        .topbar {
            align-items: flex-start;
            flex-direction: column
        }

        .actions {
            justify-content: flex-start
        }

        .field {
            min-height: 420px
        }
    }

    /* Identidade e isolamento do planejador em relação aos formulários globais */
    :scope {
        background: #f5f5f5;
        color: #171717;
        font-family: "Space Grotesk", sans-serif
    }

    :scope .page {
        max-width: 1600px;
        grid-template-columns: 420px minmax(0, 1fr);
        align-items: start
    }

    :scope .form-wrapper {
        min-width: 0;
        display: block
    }

    :scope .planner-card {
        padding: 0;
        overflow: hidden;
        border-top: 5px solid var(--metro-red)
    }

    :scope .app-shell {
        max-width: none;
        padding: 0
    }

    :scope .topbar {
        align-items: flex-start;
        border: 0;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
        padding: 28px 30px 24px;
        border-bottom: 1px solid #ececef
    }

    :scope .planner-heading {
        max-width: 560px
    }

    :scope .section-eyebrow {
        display: block;
        margin-bottom: 7px;
        color: var(--metro-red);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase
    }

    :scope .planner-heading h1 {
        margin: 0;
        color: #151518;
        font-size: 27px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.02em;
        text-transform: none
    }

    :scope .planner-heading p {
        margin-top: 8px;
        color: #707075;
        font-size: 13px;
        line-height: 1.5
    }

    :scope .planner-card .actions {
        display: flex;
        justify-content: flex-end;
        gap: 9px;
        flex-wrap: wrap
    }

    :scope .planner-card button,
    :scope .planner-card .btn {
        width: auto;
        min-height: 38px;
        padding: 10px 14px;
        border: 1px solid #d9d9de;
        border-radius: 999px;
        background: #f5f5f6;
        color: #35353a;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap
    }

    :scope .planner-card .actions .ghost {
        background: #fff
    }

    :scope .planner-card .actions .primary,
    :scope .planner-card .panel-header .primary,
    :scope .planner-card .danger {
        border-color: var(--metro-red);
        background: var(--metro-red);
        color: #fff
    }

    :scope .planner-card label {
        display: block;
        margin: 12px 0 6px;
        color: #57575c;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em
    }

    :scope .planner-card input:not([type="range"]):not([type="file"]),
    :scope .planner-card select,
    :scope .planner-card textarea {
        width: 100%;
        min-height: 42px;
        margin: 0;
        padding: 10px 12px;
        border: 1px solid #dcdce0;
        border-radius: 12px;
        background: #fff;
        color: #202024;
        font: 500 13px/1.35 "Space Grotesk", sans-serif
    }

    :scope .planner-card textarea {
        min-height: 94px;
        resize: vertical
    }

    :scope .planner-card input:focus,
    :scope .planner-card select:focus,
    :scope .planner-card textarea:focus {
        border-color: var(--metro-red);
        outline: 3px solid rgba(227, 6, 19, .1)
    }

    :scope .planner-card .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px
    }

    :scope .layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 0;
        margin: 0
    }

    :scope .panel {
        border: 0;
        border-right: 1px solid #e6e6e8;
        border-radius: 0;
        box-shadow: none
    }

    :scope .panel-header {
        min-height: 58px;
        padding: 15px 18px;
        background: #f4f4f5;
        color: #171717;
        border-bottom: 1px solid #e6e6e8
    }

    :scope .panel-header h2 {
        margin: 0;
        color: #171717;
        font-size: 13px;
        line-height: 1.35
    }

    :scope .panel-:scope {
        padding: 18px
    }

    :scope .activity-card {
        margin-bottom: 10px;
        padding: 12px;
        border-radius: 14px
    }

    :scope .activity-card strong {
        margin-bottom: 4px
    }

    :scope .object-workbench {
        padding: 20px 18px;
        border-top: 1px solid #ececef;
        background: #fafafa
    }

    :scope .workbench-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 14px
    }

    :scope .workbench-heading h3,
    :scope .settings-heading h3 {
        margin: 0;
        color: #242428;
        font-size: 16px
    }

    :scope .workbench-heading p {
        color: #74747a;
        font-size: 12px
    }

    :scope .palette {
        display: grid;
        grid-template-columns: repeat(7, minmax(76px, 1fr));
        gap: 9px
    }

    :scope .planner-card .tool {
        width: 100%;
        min-height: 76px;
        padding: 9px 6px;
        border: 1px solid #e0e0e4;
        border-radius: 14px;
        background: #fff;
        color: #2d2d31;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        white-space: normal
    }

    :scope .planner-card .tool:hover {
        border-color: var(--metro-red);
        background: #fff6f6;
        color: var(--metro-red);
        transform: translateY(-1px)
    }

    :scope .planner-card .tool .ico {
        font-size: 22px;
        line-height: 1
    }

    :scope .field-wrap {
        padding: 18px;
        background: #f4f4f5
    }

    :scope .field-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px
    }

    :scope .toolbar-label {
        margin-right: auto;
        color: #66666c;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase
    }

    :scope .field-toolbar button {
        min-height: 34px;
        padding: 8px 12px;
        border: 1px solid #dedee2;
        background: #fff
    }

    :scope .field-toolbar .dark {
        border-color: #171717;
        background: #171717;
        color: #fff
    }

    :scope .object-settings {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 22px;
        padding: 20px 18px;
        border-top: 1px solid #ececef;
        background: #fff
    }

    :scope .properties {
        display: grid;
        grid-template-columns: minmax(150px, 1.2fr) minmax(130px, 1fr) minmax(120px, .8fr) minmax(120px, .8fr) auto;
        align-items: end;
        gap: 12px
    }

    :scope .properties label {
        margin-top: 0
    }

    :scope .properties input[type="range"] {
        width: 100%;
        min-height: 42px;
        accent-color: var(--metro-red)
    }

    :scope .properties .danger {
        min-height: 42px;
        margin: 0
    }

    :scope .materials-panel {
        margin: 0;
        padding: 0 18px 20px;
        background: #fff
    }

    :scope .materials-panel summary {
        padding: 12px 14px;
        border: 1px solid #e2e2e5;
        border-radius: 12px;
        color: #48484d;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer
    }

    :scope .materials-panel .list-mini {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 22px;
        margin: 12px 0 0;
        padding: 0 18px
    }

    :scope .footer-note {
        margin: 0;
        padding: 15px 24px;
        color: #6f6f73;
        background: #fafafa;
        border-top: 1px solid #ececee
    }

    :scope>#footer-container {
        width: min(1600px, calc(100% - 32px));
        margin: 0 auto 28px
    }

    @media(max-width:1450px) {
        :scope .properties {
            grid-template-columns: repeat(2, minmax(160px, 1fr))
        }

        :scope .properties .danger {
            grid-column: 1/-1
        }
    }

    @media(max-width:980px) {
        :scope .layout {
            grid-template-columns: 1fr
        }

        :scope .panel {
            border-right: 0;
            border-bottom: 1px solid #e6e6e8
        }

        :scope .topbar,
        :scope .planner-card .actions {
            align-items: flex-start;
            justify-content: flex-start
        }

        :scope .palette {
            grid-template-columns: repeat(4, minmax(76px, 1fr))
        }

        :scope .object-settings {
            grid-template-columns: 1fr
        }
    }

    @media(max-width:620px) {

        :scope .planner-card .actions,
        :scope .field-toolbar,
        :scope .workbench-heading {
            flex-direction: column;
            align-items: stretch
        }

        :scope .planner-card .actions button,
        :scope .planner-card .actions .btn,
        :scope .field-toolbar button {
            width: 100%
        }

        :scope .palette,
        :scope .properties {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    /* Limites e proporções equivalentes às páginas Institucional e Atletas */
    :scope .page {
        max-width: 1120px;
        grid-template-columns: 420px minmax(0, 1fr);
        gap: 40px
    }

    :scope .planner-column {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        min-width: 0
    }

    :scope .planner-header-card,
    :scope .planner-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 28px;
        background: #fff;
        box-shadow: 0 14px 35px rgba(0, 0, 0, .06)
    }

    :scope .planner-header-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px
    }

    :scope .planner-heading {
        max-width: none
    }

    :scope .planner-heading h1 {
        font-size: 24px
    }

    :scope .planner-header-card .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%
    }

    :scope .planner-header-card button,
    :scope .planner-header-card .btn {
        width: auto;
        min-height: 38px;
        padding: 10px 14px;
        border: 1px solid #d8d8dc;
        border-radius: 999px;
        background: #fff;
        color: #505055;
        font: 700 11px/1 "Space Grotesk", sans-serif;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer
    }

    :scope .planner-header-card .primary {
        border-color: var(--metro-red);
        background: var(--metro-red);
        color: #fff
    }

    :scope .planner-card {
        border-top: 1px solid rgba(0, 0, 0, .08);
        overflow: hidden
    }

    :scope .app-shell,
    :scope .layout,
    :scope .panel,
    :scope .panel-:scope,
    :scope .object-workbench,
    :scope .field-wrap,
    :scope .object-settings {
        min-width: 0;
        max-width: 100%
    }

    :scope .layout {
        grid-template-columns: 190px minmax(0, 1fr)
    }

    :scope .panel-header {
        padding: 14px
    }

    :scope .panel-:scope,
    :scope .object-workbench,
    :scope .field-wrap,
    :scope .object-settings {
        padding: 16px
    }

    :scope .planner-card .row {
        grid-template-columns: 1fr
    }

    :scope .palette {
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr))
    }

    :scope .workbench-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px
    }

    :scope .field-toolbar {
        align-items: stretch;
        flex-wrap: wrap
    }

    :scope .toolbar-label {
        flex-basis: 100%;
        margin: 0 0 2px
    }

    :scope .field {
        width: 100%;
        max-width: 100%
    }

    :scope .object-settings {
        grid-template-columns: 1fr;
        gap: 14px
    }

    :scope .properties {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    :scope .properties .danger {
        grid-column: 1/-1;
        width: 100%
    }

    :scope>#footer-container {
        width: min(1120px, calc(100% - 32px))
    }

    @media(max-width:900px) {
        :scope .page {
            grid-template-columns: 1fr
        }

        :scope #profile-card-container {
            min-width: 0
        }
    }

    @media(max-width:680px) {

        :scope .layout,
        :scope .properties {
            grid-template-columns: 1fr
        }

        :scope .planner-header-card .actions button,
        :scope .planner-header-card .actions .btn {
            width: 100%;
            text-align: center
        }
    }

    :scope .planner-header-card .actions {
        justify-content: center;
    }

    :scope .duration-summary {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 16px 0 4px;
    }

    :scope .duration-summary>div {
        padding: 10px;
        border: 1px solid #f0c5c7;
        border-radius: 12px;
        background: #fff7f7;
        text-align: center;
    }

    :scope .duration-summary span,
    :scope .duration-summary strong {
        display: block;
    }

    :scope .duration-summary span {
        margin-bottom: 3px;
        color: #77777c;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    :scope .duration-summary strong {
        color: var(--metro-red);
        font-size: 14px;
    }

    :scope .activity-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    :scope .activity-card .activity-duration {
        display: inline-flex;
        margin-top: 8px;
        padding: 4px 8px;
        border-radius: 999px;
        background: #ededf0;
        color: #505055;
        font-size: 10px;
        font-weight: 700;
    }

    :scope .planner-card .delete-activity {
        width: 28px;
        min-width: 28px;
        min-height: 28px;
        padding: 0;
        border: 1px solid #efb5b8;
        border-radius: 50%;
        background: #fff;
        color: var(--metro-red);
        font-size: 17px;
        line-height: 1;
    }

    :scope .planner-card .delete-activity:hover {
        border-color: var(--metro-red);
        background: var(--metro-red);
        color: #fff;
    }

    :scope .left-panel+.panel>.panel-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    :scope #currentTitle {
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }

    :scope #currentTitle .activity-title-index {
        color: var(--metro-red);
    }

    :scope #currentMeta {
        display: block;
        width: 100%;
        color: #55555a;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
    }

    :scope .obj.isokinetic,
    :scope .obj.traction,
    :scope .obj.jumpbox {
        min-width: 48px;
        min-height: 34px;
        padding: 5px 8px;
        border: 3px solid #fff;
        border-radius: 8px;
        color: #fff;
        font-size: 10px;
        line-height: 1.1;
        text-align: center;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .28);
    }

    :scope .obj.isokinetic {
        background: #555b66;
    }

    :scope .obj.traction {
        min-width: 70px;
        border-radius: 999px;
        background: #e30613;
    }

    :scope .obj.jumpbox {
        min-width: 58px;
        min-height: 42px;
        border-radius: 4px;
        background: #9c5b2e;
    }

    :scope .left-panel>.panel-header {
        justify-content: center;
    }

    :scope .left-panel>.panel-header .primary {
        margin: 0 auto;
    }

    /* Resumo da sessão em card horizontal, abaixo do cabeçalho do planejador. */
    :scope .layout {
        grid-template-columns: minmax(0, 1fr);
    }

    :scope .left-panel {
        margin: 16px;
        width: auto;
        border: 0 !important;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    :scope .left-panel>.panel-:scope {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 0;
        background: transparent;
    }

    :scope .session-summary-card,
    :scope .session-activities {
        padding: 14px;
        border: 1px solid #e1e1e5;
        border-radius: 20px;
        background: #fff;
    }

    :scope .session-card-title {
        margin: 0 0 14px;
        color: #55555a;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .12em;
        text-align: center;
        text-transform: uppercase;
    }

    :scope .session-summary-card>.session-card-title {
        display: none;
    }

    :scope .session-heading {
        margin-bottom: 12px;
        text-align: left;
    }

    :scope .session-heading .section-eyebrow {
        margin-bottom: 7px;
    }

    :scope .session-heading h2 {
        margin: 0;
        color: #242428;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0;
    }

    :scope .session-objective-card {
        margin-bottom: 10px;
        padding: 8px 10px;
        border: 1px solid #e1e1e5;
        border-radius: 16px;
        background: #fafafa;
        text-align: center;
    }

    :scope .session-objective-card label {
        margin-bottom: 6px;
        text-align: center;
    }

    :scope .session-objective-card #sessionObjective {
        height: 44px !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        text-align: center;
    }

    :scope .session-activities {
        border: 1px solid #e1e1e5;
    }

    :scope .activity-editor-card {
        margin: 12px 16px;
        border: 1px solid #e1e1e5;
        border-radius: 20px;
        background: #fff;
        overflow: hidden;
    }

    :scope .activity-editor-card>.panel-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        padding: 16px 18px 8px;
    }

    :scope .activity-editor-card>.panel-:scope {
        padding: 8px 18px 18px;
    }

    :scope .planner-card #actSpecificObjectives {
        height: 44px;
        min-height: 44px;
        resize: none;
    }

    :scope .session-meta-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px 14px !important;
    }

    :scope .session-meta-field {
        min-width: 0;
    }

    :scope .left-panel .panel-:scope label {
        margin: 0 0 8px;
        color: #57575c;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    :scope .left-panel input,
    :scope .left-panel select {
        height: 44px !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        font-size: 13px;
    }

    :scope .duration-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: min(100%, 430px);
        margin: 10px auto 0;
    }

    :scope .session-activities {
        min-width: 0;
    }

    :scope .session-activities-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin-bottom: 10px;
    }

    :scope .session-activities-header .session-card-title {
        margin: 0;
    }

    :scope .session-activities-header .primary {
        min-height: 36px;
        padding: 9px 14px;
        border-color: var(--metro-red);
        background: var(--metro-red);
        color: #fff;
    }

    :scope .session-activities-header .primary.is-limit,
    :scope .session-activities-header .primary:disabled {
        border-color: #dcdce0;
        background: #f6f6f7;
        color: #77777c;
        cursor: not-allowed;
        opacity: 1;
    }

    :scope #activities {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 12px;
        padding: 2px 2px 10px;
        overflow: visible;
    }

    :scope .session-activities>label {
        display: block;
    }

    :scope .left-panel .activity-card {
        width: calc((100% - 36px) / 4);
        max-width: calc((100% - 36px) / 4);
        flex: 0 1 calc((100% - 36px) / 4);
        min-width: 0;
        min-height: 108px;
        margin: 0;
        padding: 12px 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    :scope .left-panel .activity-card-head {
        min-height: 24px;
        padding: 0 26px;
    }

    :scope .left-panel .activity-card strong {
        font-size: 12px;
        line-height: 1.15;
    }

    :scope .left-panel .activity-card span {
        font-size: 10px;
        line-height: 1.25;
    }

    :scope .left-panel .activity-card .activity-duration {
        width: 100%;
        margin-top: 7px;
        padding: 4px 7px;
        font-size: 9px;
    }

    :scope .left-panel .delete-activity {
        width: 24px;
        min-width: 24px;
        min-height: 24px;
        font-size: 14px;
    }

    :scope .activities-timeline {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 12px;
        min-width: 0;
        margin-top: 4px;
        padding: 14px 2px 2px;
    }

    :scope .activities-timeline::before {
        content: "";
        position: absolute;
        top: 20px;
        right: calc((100% - 36px) / 8);
        left: calc((100% - 36px) / 8);
        height: 2px;
        border-radius: 2px;
        background: #e1e1e5;
    }

    :scope .timeline-item {
        position: relative;
        z-index: 1;
        display: grid;
        justify-items: center;
        width: calc((100% - 36px) / 4);
        max-width: calc((100% - 36px) / 4);
        min-width: 0;
        flex: 0 1 calc((100% - 36px) / 4);
        color: #55555a;
        font-size: 10px;
        font-weight: 800;
        text-align: center;
    }

    :scope .timeline-dot {
        width: 14px;
        height: 14px;
        margin-bottom: 7px;
        border: 3px solid #fff;
        border-radius: 50%;
        background: var(--metro-red);
        box-shadow: 0 0 0 1px #dedee2;
    }

    :scope .physical-valence-row {
        margin-top: 10px;
    }

    :scope .physical-valence-row>div>label {
        margin-top: 0;
    }

    :scope .physical-valence-list {
        display: grid;
        gap: 8px;
        margin-top: 10px;
    }

    :scope .physical-valence-item {
        display: grid;
        grid-template-columns: minmax(130px, .8fr) minmax(180px, 1fr) 62px auto;
        gap: 10px;
        align-items: center;
        padding: 10px 12px;
        border: 1px solid #e2e2e5;
        border-radius: 12px;
        background: #fafafa;
    }

    :scope .physical-valence-name {
        color: #303035;
        font-size: 12px;
        font-weight: 800;
    }

    :scope .physical-valence-item input[type="range"] {
        width: 100%;
        height: 6px !important;
        min-height: 6px !important;
        padding: 0 !important;
        border: 0 !important;
        appearance: none;
        border-radius: 999px;
        outline: none !important;
        background: linear-gradient(90deg, #f2c94c 0%, #a8c943 30%, #24a85a 52%, #d75445 76%, #7a0012 100%);
        box-shadow: none !important;
    }

    :scope .physical-valence-item input[type="range"]::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
        appearance: none;
        border: 2px solid #fff;
        border-radius: 50%;
        background: var(--intensity-color, #2fac66);
        box-shadow: 0 0 0 1px #c9c9cd;
        cursor: grab;
    }

    :scope .physical-valence-item input[type="range"]::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: var(--intensity-color, #2fac66);
        box-shadow: 0 0 0 1px #c9c9cd;
        cursor: grab;
    }

    :scope .physical-valence-level {
        color: var(--metro-red);
        font-size: 10px;
        font-weight: 800;
        text-align: right;
    }

    :scope .physical-valence-remove {
        width: auto;
        min-width: 0;
        min-height: 0;
        padding: 6px 10px;
        border: none;
        border-radius: 8px;
        background: var(--metro-red);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    :scope .physical-valence-remove:hover {
        background: #e02020;
        color: #fff;
    }

    :scope .estimated-load-card {
        margin-top: 10px;
        padding: 11px 12px;
        border: 1px solid #e2e2e5;
        border-radius: 12px;
        background: #fafafa;
    }

    :scope .estimated-load-head,
    :scope .estimated-load-control {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    :scope .estimated-load-head label {
        margin: 0;
    }

    :scope .estimated-load-badge {
        padding: 4px 9px;
        border-radius: 999px;
        background: #e5f6ea;
        color: #258044;
        font-size: 10px;
        font-weight: 800;
    }

    :scope .estimated-load-control {
        margin-top: 9px;
    }

    :scope #activityEstimatedLoad {
        width: 100%;
        height: 7px !important;
        min-height: 7px !important;
        padding: 0 !important;
        border: 0 !important;
        appearance: none;
        border-radius: 999px;
        outline: none !important;
        background:
            repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 3px), #fafafa calc(12.5% - 3px) 12.5%),
            linear-gradient(90deg, #25a94f 0 var(--load-progress, 65%), #e7e7e9 var(--load-progress, 65%) 100%);
        box-shadow: none !important;
    }

    :scope #activityEstimatedLoad::-webkit-slider-thumb {
        width: 17px;
        height: 17px;
        appearance: none;
        border: 2px solid #fff;
        border-radius: 50%;
        background: #25a94f;
        box-shadow: 0 0 0 1px #c9c9cd;
        cursor: grab;
    }

    :scope #activityEstimatedLoad::-moz-range-thumb {
        width: 15px;
        height: 15px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: #25a94f;
        box-shadow: 0 0 0 1px #c9c9cd;
        cursor: grab;
    }

    :scope .estimated-load-value {
        min-width: 42px;
        color: #2e2e33;
        font-size: 12px;
        font-weight: 800;
        text-align: right;
    }

    :scope .left-panel+.panel {
        border-top: 0;
    }

    @media(max-width: 680px) {
        :scope .left-panel {
            margin: 10px;
        }

        :scope .left-panel>.panel-:scope,
        :scope .session-meta-row {
            grid-template-columns: 1fr !important;
        }

        :scope .duration-summary {
            grid-template-columns: 1fr;
        }

        :scope .left-panel .activity-card {
            width: 100%;
            max-width: none;
            flex-basis: 100%;
        }

        :scope #activities {
            flex-wrap: wrap;
        }

        :scope .physical-valence-row {
            grid-template-columns: 1fr;
        }

        :scope .physical-valence-item {
            grid-template-columns: minmax(0, 1fr) 50px auto;
        }

        :scope .physical-valence-name {
            grid-column: 1 / -1;
        }

        :scope .session-activities {
            grid-column: auto;
        }
    }

    :scope.pdf-exporting .planner-header-card .actions,
    :scope.pdf-exporting .delete-activity {
        display: none !important;
    }

    :scope.modal-open {
        overflow: hidden;
    }

    :scope .tactical-preview {
        margin: 12px 16px;
        padding: 18px 16px 20px;
        border: 1px solid #e1e1e5;
        border-radius: 20px;
        background: #fff;
        overflow: hidden;
    }

    :scope .preview-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
    }

    :scope .preview-heading h3 {
        margin: 0;
        color: #242428;
        font-size: 16px;
    }

    :scope .preview-field-wrap {
        padding: 0;
        border-radius: 18px;
        background: transparent;
    }

    :scope .field-preview {
        pointer-events: none;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
    }

    :scope .field-preview .obj {
        cursor: default;
    }

    :scope .tactical-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        padding: 20px;
        overflow: auto;
        background: rgba(10, 10, 12, .78);
        backdrop-filter: blur(6px);
    }

    :scope .tactical-modal.is-open {
        display: block;
    }

    :scope .tactical-modal-dialog {
        width: min(1180px, 100%);
        margin: 0 auto;
        overflow: hidden;
        border-radius: 26px;
        background: #fff;
        box-shadow: 0 28px 90px rgba(0, 0, 0, .38);
    }

    :scope .tactical-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 20px 24px;
        border-bottom: 1px solid #e7e7ea;
        background: #fff;
    }

    :scope .tactical-modal-header h2 {
        margin: 0;
        color: #18181b;
        font-size: 24px;
    }

    :scope .planner-card .modal-close {
        width: 42px;
        min-width: 42px;
        min-height: 42px;
        padding: 0;
        border: 1px solid #dedee2;
        border-radius: 50%;
        background: #f5f5f6;
        color: #242428;
        font-size: 25px;
    }

    :scope .tactical-modal .object-workbench,
    :scope .tactical-modal .field-wrap,
    :scope .tactical-modal .object-settings {
        padding: 22px 24px;
    }

    :scope .tactical-modal .field {
        max-width: 920px;
        margin: 0 auto;
    }

    :scope .tactical-modal .properties {
        grid-template-columns: minmax(160px, 1.2fr) minmax(140px, 1fr) minmax(130px, .8fr) minmax(130px, .8fr) auto;
    }

    :scope .tactical-modal .properties .danger {
        grid-column: auto;
        width: auto;
    }

    @media(max-width: 760px) {
        :scope .preview-heading {
            align-items: stretch;
            flex-direction: column;
        }

        :scope .preview-heading button {
            width: 100%;
        }

        :scope .tactical-modal {
            padding: 8px;
        }

        :scope .tactical-modal .properties {
            grid-template-columns: 1fr;
        }

        :scope .tactical-modal .properties .danger {
            width: 100%;
        }
    }

    /* Editor ampliado compacto, com melhor aproveitamento da tela */
    :scope .tactical-modal {
        padding: 12px;
    }

    :scope .tactical-modal-dialog {
        width: min(980px, 100%);
        max-height: calc(100vh - 24px);
        overflow: auto;
        border-radius: 20px;
    }

    :scope .tactical-modal-header {
        padding: 12px 18px;
    }

    :scope .tactical-modal-header .section-eyebrow {
        margin-bottom: 3px;
        font-size: 9px;
    }

    :scope .tactical-modal-header h2 {
        font-size: 20px;
    }

    :scope .planner-card .modal-close {
        width: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 21px;
    }

    :scope .tactical-modal .workbench-heading {
        display: none;
    }

    :scope .tactical-modal .object-workbench {
        padding: 12px 18px;
    }

    :scope .tactical-modal .palette {
        gap: 7px;
    }

    :scope .tactical-modal .planner-card .tool,
    :scope .tactical-modal .tool {
        min-height: 58px;
        padding: 6px 4px;
        border-radius: 11px;
        font-size: 10px;
    }

    :scope .tactical-modal .tool .ico {
        font-size: 18px;
    }

    :scope .tactical-modal .field-wrap {
        padding: 10px 18px 14px;
    }

    :scope .tactical-modal .field-toolbar {
        gap: 6px;
        margin-bottom: 8px;
    }

    :scope .tactical-modal .toolbar-label {
        font-size: 9px;
    }

    :scope .tactical-modal .field-toolbar button {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 10px;
    }

    :scope .tactical-modal .field {
        max-width: 720px;
    }

    :scope .tactical-modal .object-settings {
        gap: 12px;
        padding: 12px 18px 16px;
    }

    :scope .tactical-modal .settings-heading h3 {
        font-size: 15px;
    }

    :scope .tactical-modal .properties {
        gap: 8px;
    }

    :scope .planner-confirm-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1200;
        place-items: center;
        padding: 20px;
        background: rgba(15, 15, 18, .58);
        backdrop-filter: blur(4px);
    }

    :scope .planner-confirm-modal.is-open {
        display: grid;
    }

    :scope .planner-confirm-dialog {
        width: min(430px, 100%);
        padding: 26px;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
        text-align: center;
    }

    :scope .planner-confirm-dialog .modal-title {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        color: #18181b;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
    }

    :scope .planner-confirm-dialog .modal-text {
        display: block;
        width: 100%;
        margin: 0 auto;
        color: #68686e;
        font-size: 14px;
        line-height: 1.55;
        max-height: 46vh;
        overflow: auto;
        text-align: center;
    }

    :scope .planner-confirm-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 22px;
    }

    :scope .planner-confirm-actions button {
        min-height: 40px;
        padding: 10px 18px;
        border: 1px solid #d9d9dd;
        border-radius: 999px;
        background: #fff;
        color: #45454a;
        font: 700 12px/1 "Space Grotesk", sans-serif;
        cursor: pointer;
    }

    :scope .planner-confirm-actions .primary {
        border-color: var(--metro-red);
        background: var(--metro-red);
        color: #fff;
    }

    :scope .planner-card,
    :scope .planner-card .panel,
    :scope .planner-card .panel-header,
    :scope .planner-card .panel-:scope,
    :scope .tactical-preview {
        background: #fff;
    }

    :scope .left-panel .panel-:scope label,
    :scope .left-panel .activity-card {
        text-align: center;
    }

    :scope .left-panel .activity-card-head {
        position: relative;
        justify-content: center;
        padding: 0 30px;
    }

    :scope .left-panel .activity-card-head .delete-activity {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    :scope .left-panel input,
    :scope .left-panel select {
        text-align: center;
        text-align-last: center;
    }

    :scope .planner-card .session-meta-row {
        gap: 0 12px;
    }

    :scope .athlete-selection {
        margin: 14px 0 4px;
        padding: 14px;
        border: 1px solid #e2e2e5;
        border-radius: 14px;
        background: #fafafa;
    }

    :scope .athlete-selection>label {
        margin-top: 0;
    }

    :scope .athlete-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        max-height: 230px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    :scope .athlete-option {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 8px 5px;
        border: 1px solid #dddde1;
        border-radius: 10px;
        background: #fff;
        color: #35353a;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        text-transform: none;
    }

    :scope .athlete-option:has(input:checked) {
        border-color: var(--metro-red);
        background: #fff5f5;
        color: #b9000c;
    }

    :scope .athlete-option input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    :scope .athlete-photo {
        display: block;
        flex: 0 0 67px;
        width: 67px !important;
        min-width: 67px;
        max-width: 67px;
        height: 67px !important;
        min-height: 67px;
        max-height: 67px;
        margin-inline: auto;
        overflow: hidden;
        border: 1px solid #dddde1;
        border-radius: 50%;
        background: #f1f1f2;
    }

    :scope .athlete-photo img {
        display: block;
        width: 67px !important;
        min-width: 67px;
        max-width: 67px;
        height: 67px !important;
        min-height: 67px;
        max-height: 67px;
        object-fit: cover;
        object-position: center top;
    }

    :scope .athlete-info {
        display: block;
        width: 100%;
        min-width: 0;
        text-align: center;
    }

    :scope .athlete-name {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        color: #171717;
        font-size: 10px;
        text-align: center;
        line-height: 1.2;
    }

    :scope .athlete-position {
        display: block;
        margin-top: 2px;
        color: #77777c;
        font-size: 9px;
        font-weight: 800;
        text-align: center;
        text-transform: uppercase;
    }

    :scope .activity-materials {
        margin: 12px 0;
    }

    :scope .material-options {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    :scope .material-field-group {
        overflow: hidden;
        border: 1px solid #dddde1;
        border-radius: 12px;
        background: #fff;
    }

    :scope .material-field-title {
        padding: 8px 11px;
        background: #f5f5f6;
        color: #55555b;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    :scope .material-field-list {
        display: grid;
        gap: 1px;
        background: #ededf0;
    }

    :scope .material-field-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 11px;
        background: #fff;
        color: #29292d;
        font-size: 11px;
        font-weight: 800;
    }

    :scope .material-field-quantity {
        min-width: 30px;
        padding: 4px 8px;
        border-radius: 999px;
        background: #fff1f2;
        color: var(--metro-red);
        text-align: center;
    }

    :scope .material-field-empty {
        margin: 0;
        padding: 10px 11px;
        color: #77777c;
        font-size: 10px;
        font-weight: 700;
    }

    :scope .material-option {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr) 76px;
        align-items: center;
        gap: 7px;
        min-width: 0;
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #dddde1;
        border-radius: 10px;
        background: #fff;
        font-size: 10px;
        font-weight: 700;
        text-transform: none;
        cursor: pointer;
    }

    :scope .material-option:has(input:checked) {
        border-color: var(--metro-red);
        background: #fff5f5;
        color: #b9000c;
    }

    :scope .material-option input {
        width: 15px;
        min-height: 15px;
        margin: 0;
        accent-color: var(--metro-red);
    }

    :scope .material-option .material-quantity {
        width: 76px;
        min-height: 34px;
        padding: 6px 8px;
        border-radius: 8px;
        background: #fff;
        text-align: center;
    }

    :scope .material-option:not(:has(input:checked)) .material-quantity {
        opacity: .45;
    }

    /* Ritmo vertical e dimensões padronizadas dos campos do formulário. */
    :scope .planner-card .panel-:scope label {
        margin: 16px 0 6px;
    }

    :scope .planner-card .panel-:scope .row {
        row-gap: 0;
    }

    :scope .planner-card .panel-:scope input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.material-quantity),
    :scope .planner-card .panel-:scope select,
    :scope .planner-card #actNotes {
        height: 44px;
        min-height: 44px;
    }

    :scope .planner-card #actDescription {
        height: 192px;
        min-height: 192px;
    }

    :scope .activity-materials {
        margin-top: 0;
    }

    /* Card contínuo, sem divisórias internas entre cabeçalho e colunas. */
    :scope .planner-card .panel,
    :scope .planner-card .left-panel {
        border-right: 0;
        border-bottom: 0;
    }

    :scope .planner-card .panel-header {
        border-bottom: 0;
        min-height: 0;
        padding-bottom: 0;
    }

    :scope .planner-card .panel-:scope {
        padding-top: 0;
    }

    @media(max-width: 760px) {
        :scope .session-meta-row {
            gap: 0;
        }

        :scope .material-options {
            width: 100%;
        }
    }

    :scope .athlete-status {
        margin: 10px 0 0;
        color: #77777c;
        font-size: 11px;
        text-align: center;
    }

    @media(max-width: 680px) {
        :scope .athlete-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* Controles do editor alinhados ao padrão visual de Novo campo. */
    :scope .tactical-modal .board-switcher {
        justify-content: center;
    }

    :scope .tactical-modal .board-switcher .add-board {
        margin-left: 0;
    }

    :scope .tactical-modal .field-toolbar {
        justify-content: center;
        align-items: center;
        gap: 9px;
    }

    :scope .tactical-modal .field-toolbar button,
    :scope .tactical-modal .field-toolbar .dark {
        width: auto;
        min-height: 38px;
        padding: 10px 14px;
        border: 1px solid #d9d9de;
        border-radius: 999px;
        background: #fff;
        color: #35353a;
        font-size: 11px;
        font-weight: 700;
        box-shadow: none;
    }

    :scope .tactical-modal .field-toolbar button:hover {
        border-color: var(--metro-red);
        background: #fff5f5;
        color: var(--metro-red);
    }

    :scope .tactical-menu summary {
        justify-content: center;
        min-height: 54px;
        padding: 10px 12px;
        border: 1px solid #d9d9de;
        border-radius: 14px;
        background: #fff;
        color: #2d2d31;
        font-size: 12px;
        font-weight: 700;
    }

    :scope .tactical-menu summary::after {
        display: none;
        content: none;
    }

    :scope .tactical-menu[open] summary {
        border-color: var(--metro-red);
        background: #fff;
        color: var(--metro-red);
        box-shadow: 0 0 0 2px rgba(227, 6, 19, .08);
    }

    :scope .tactical-modal .board-switcher {
        margin-bottom: 18px;
    }

    :scope .tactical-modal .board-switcher .add-board:disabled {
        border-color: var(--metro-red);
        background: var(--metro-red);
        color: #fff;
        opacity: 1;
    }

    :scope .planner-card .tactical-menu-option {
        justify-content: center;
        border: 0;
        border-radius: 0;
        background: transparent;
        text-align: center;
        box-shadow: none;
    }

    :scope .planner-card .tactical-menu-option:hover {
        border: 0;
        background: #f2f2f4;
    }

    :scope .tactical-menu-option .menu-option-icon {
        flex-basis: auto;
    }

    :scope .obj.menu-item {
        min-width: 34px;
        min-height: 34px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #fff;
        font-size: 30px;
        line-height: 1;
        text-shadow: 0 2px 4px rgba(0, 0, 0, .45);
        box-shadow: none;
    }

    :scope .tactical-modal-header {
        position: relative;
        justify-content: center;
        text-align: center;
    }

    :scope .tactical-modal-header>div {
        width: 100%;
        text-align: center;
    }

    :scope .tactical-modal-header .modal-close {
        position: absolute;
        top: 50%;
        right: 18px;
        transform: translateY(-50%);
    }

    :scope .tactical-modal-dialog {
        width: min(1225px, 100%);
    }

    :scope .tactical-modal .field {
        max-width: 900px;
    }

    :scope .tactical-modal .ball {
        border: 2px solid #111;
        border-radius: 50%;
        background-color: #fff;
        background-image: radial-gradient(circle at 50% 50%, #111 0 5px, transparent 5.5px),
            radial-gradient(circle at 50% 4%, #111 0 4px, transparent 4.5px),
            radial-gradient(circle at 96% 42%, #111 0 4px, transparent 4.5px),
            radial-gradient(circle at 78% 93%, #111 0 4px, transparent 4.5px),
            radial-gradient(circle at 20% 89%, #111 0 4px, transparent 4.5px),
            radial-gradient(circle at 3% 38%, #111 0 4px, transparent 4.5px);
        box-shadow: none;
    }

    :scope .tactical-modal .goal {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 32px;
        line-height: 1;
        box-shadow: none;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2));
    }

    :scope .tactical-modal .largeGoal {
        width: 62px;
        height: 82px;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 54px;
        line-height: 1;
        box-shadow: none;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2));
    }

    :scope .tactical-modal .goal-symbol {
        display: block;
        width: 100%;
        height: 100%;
        border: 3px solid #fff;
        background-color: rgba(255, 255, 255, .12);
        background-image: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, .8) 46% 54%, transparent 55%),
            linear-gradient(-45deg, transparent 45%, rgba(255, 255, 255, .8) 46% 54%, transparent 55%);
        background-size: 10px 10px;
        box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .35);
        box-sizing: border-box;
        line-height: 1;
        pointer-events: none;
    }

    :scope .tactical-modal .goal-resize-handle {
        position: absolute;
        top: 50%;
        right: -9px;
        width: 13px;
        height: 32px;
        border: 2px solid #fff;
        border-radius: 8px;
        background: var(--metro-red);
        transform: translateY(-50%);
        cursor: ew-resize;
        opacity: 0;
        pointer-events: auto;
    }

    :scope .tactical-modal .obj.selected .goal-resize-handle {
        opacity: 1;
    }

    :scope .field-preview .goal-resize-handle {
        display: none;
    }

    :scope .tactical-modal .dashedArrow {
        width: 90px;
        height: 0;
        border-top: 2px dashed #fff;
        transform-origin: left center;
    }

    :scope .tactical-modal .dashedArrow::after,
    :scope .tactical-modal .curvedArrow::after,
    :scope .tactical-modal .curvedDashedArrow::after {
        content: "";
        position: absolute;
        right: -3px;
        top: -7px;
        border-left: 12px solid #fff;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
    }

    :scope .tactical-modal .curvedArrow,
    :scope .tactical-modal .curvedDashedArrow {
        width: 90px;
        height: 42px;
        border-top: 2px solid #fff;
        border-radius: 50% 50% 0 0;
        transform-origin: center center;
    }

    :scope .tactical-modal .curvedDashedArrow {
        border-top-style: dashed;
    }

    :scope .tactical-modal .curvedArrow::after,
    :scope .tactical-modal .curvedDashedArrow::after {
        right: -8px;
        top: 1px;
        transform: rotate(42deg);
        transform-origin: left center;
    }

    :scope .tactical-modal .arrow {
        height: 2px;
    }

    :scope .tactical-modal .arrow::after {
        top: -5px;
        border-left-width: 12px;
        border-top-width: 6px;
        border-bottom-width: 6px;
    }

    :scope .tactical-modal .bib {
        width: 38px;
        height: 36px;
        border: 0;
        background: var(--object-color, #e30613);
        clip-path: polygon(22% 0, 39% 8%, 61% 8%, 78% 0, 100% 22%, 82% 42%, 76% 31%, 76% 100%, 24% 100%, 24% 31%, 18% 42%, 0 22%);
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .28));
    }

    :scope .field .largeGoal {
        width: 62px;
        height: 82px;
        border: 0;
        background: transparent;
        font-size: 54px;
        line-height: 1;
    }

    :scope .field .goal-symbol {
        display: block;
        width: 100%;
        height: 100%;
        border: 3px solid #fff;
        background-color: rgba(255, 255, 255, .12);
        background-image: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, .8) 46% 54%, transparent 55%),
            linear-gradient(-45deg, transparent 45%, rgba(255, 255, 255, .8) 46% 54%, transparent 55%);
        background-size: 10px 10px;
        box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .35);
        box-sizing: border-box;
        line-height: 1;
        pointer-events: none;
    }

    :scope .field .obj.selected {
        outline: 0 !important;
        filter: none !important;
        box-shadow: none !important;
    }

    :scope .field .dashedArrow {
        width: 90px;
        height: 0;
        border-top: 2px dashed #fff;
        transform-origin: left center;
    }

    :scope .field .curvedArrow,
    :scope .field .curvedDashedArrow {
        width: 90px;
        height: 42px;
        border-top: 2px solid #fff;
        border-radius: 50% 50% 0 0;
        transform-origin: center center;
    }

    :scope .field .curvedDashedArrow {
        border-top-style: dashed;
    }

    :scope .field .dashedArrow::after,
    :scope .field .curvedArrow::after,
    :scope .field .curvedDashedArrow::after {
        content: "";
        position: absolute;
        right: -3px;
        top: -7px;
        border-left: 12px solid #fff;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
    }

    :scope .field .arrow::after,
    :scope .field .dashedArrow::after,
    :scope .field .curvedArrow::after,
    :scope .field .curvedDashedArrow::after {
        width: 10px;
        height: 10px;
        border: 0;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        background: transparent;
        transform: rotate(45deg);
    }

    :scope .field .arrow::after,
    :scope .field .dashedArrow::after {
        right: 0;
        top: -5px;
    }

    :scope .field .curvedArrow::after,
    :scope .field .curvedDashedArrow::after {
        right: -8px;
        top: 1px;
        transform: rotate(68deg);
        transform-origin: left center;
    }

    :scope .field .bib {
        width: 38px;
        height: 36px;
        border: 0;
        background: var(--object-color, #e30613);
        clip-path: polygon(22% 0, 39% 8%, 61% 8%, 78% 0, 100% 22%, 82% 42%, 76% 31%, 76% 100%, 24% 100%, 24% 31%, 18% 42%, 0 22%);
    }

    :scope .obj-label {
        position: absolute;
        top: calc(100% + 5px);
        left: 50%;
        min-width: max-content;
        padding: 3px 6px;
        border: 1px solid rgba(255, 255, 255, .85);
        border-radius: 6px;
        background: rgba(17, 17, 17, .84);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.1;
        text-align: center;
        text-shadow: none;
        transform: translateX(-50%);
        pointer-events: none;
    }

    /* Campo ao centro, navegação à esquerda e ações à direita. */
    :scope .tactical-modal-dialog {
        width: min(1320px, 100%);
    }

    :scope .tactical-modal .field-wrap {
        display: grid;
        grid-template-columns: minmax(160px, 180px) minmax(0, 900px) minmax(155px, 170px);
        grid-template-areas: "boards field actions";
        align-items: start;
        justify-content: center;
        gap: 12px;
    }

    :scope .tactical-modal #editorBoardSwitcher {
        grid-area: boards;
        align-self: center;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 9px;
        margin: 0;
    }

    :scope .tactical-modal #editorBoardSwitcher button {
        width: 100%;
        margin: 0;
        white-space: normal;
    }

    :scope .tactical-modal .field-toolbar {
        grid-area: actions;
        align-self: center;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 9px;
        margin: 0;
    }

    :scope .tactical-modal .field-toolbar button,
    :scope .tactical-modal .field-toolbar .dark {
        width: 100%;
        margin: 0;
        white-space: normal;
    }

    :scope .tactical-modal #field {
        grid-area: field;
        width: 100%;
        margin: 0 auto;
    }

    @media(max-width: 1100px) {
        :scope .tactical-modal .field-wrap {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "boards"
                "field"
                "actions";
        }

        :scope .tactical-modal #editorBoardSwitcher,
        :scope .tactical-modal .field-toolbar {
            flex-direction: row;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        :scope .tactical-modal #editorBoardSwitcher button,
        :scope .tactical-modal .field-toolbar button,
        :scope .tactical-modal .field-toolbar .dark {
            width: auto;
        }
    }

    /* Ações à esquerda e propriedades empilhadas à direita. */
    :scope .tactical-modal-dialog {
        width: min(1450px, 100%);
    }

    :scope .tactical-modal .field-wrap {
        grid-template-columns: minmax(160px, 180px) minmax(0, 900px) minmax(230px, 260px);
        grid-template-areas: "left field settings";
    }

    :scope .tactical-modal .field-left-controls {
        grid-area: left;
        align-self: center;
        display: flex;
        flex-direction: column;
        gap: 18px;
        min-width: 0;
    }

    :scope .tactical-modal .field-left-controls #editorBoardSwitcher,
    :scope .tactical-modal .field-left-controls .field-toolbar {
        align-self: stretch;
        width: 100%;
    }

    :scope .tactical-modal .object-settings {
        grid-area: settings;
        align-self: center;
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-width: 0;
        padding: 16px;
        border: 1px solid #e1e1e4;
        border-radius: 18px;
        background: #fff;
    }

    :scope .tactical-modal .settings-heading {
        text-align: center;
    }

    :scope .tactical-modal .properties {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    :scope .tactical-modal .properties>div,
    :scope .tactical-modal .properties input,
    :scope .tactical-modal .properties select,
    :scope .tactical-modal .properties .danger {
        width: 100%;
        min-width: 0;
    }

    :scope .tactical-modal .properties .danger {
        margin: 4px 0 0;
    }

    @media(max-width: 1100px) {
        :scope .tactical-modal .field-wrap {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "left"
                "field"
                "settings";
        }

        :scope .tactical-modal .field-left-controls {
            gap: 10px;
        }

        :scope .tactical-modal .object-settings {
            width: 100%;
        }
    }

    /* Versão simplificada: sem seletor de campos e gramado 25% maior. */
    :scope .tactical-modal-dialog {
        width: min(1580px, 100%);
    }

    :scope .tactical-modal #editorBoardSwitcher {
        display: none;
    }

    :scope .tactical-modal .field-wrap {
        grid-template-columns: 150px minmax(0, 1125px) 230px;
    }

    :scope .tactical-modal .field {
        max-width: 1125px;
    }

    /* Materiais redesenhados como um único objeto, sem ícones sobrepostos. */
    :scope .field .cone {
        width: 34px;
        height: 38px;
        color: var(--object-color, #ff8a00);
        background: transparent;
    }

    :scope .field .cone::before {
        left: 6px;
        bottom: 5px;
        width: 22px;
        height: 33px;
        background: currentColor;
        clip-path: polygon(44% 0, 56% 0, 88% 76%, 100% 82%, 100% 100%, 0 100%, 0 82%, 12% 76%);
    }

    :scope .field .cone::after {
        left: 8px;
        right: 8px;
        bottom: 16px;
        height: 3px;
        border-radius: 0;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 7px 0 rgba(255, 255, 255, .9);
    }

    :scope .field .disc {
        width: 38px;
        height: 16px;
        color: var(--object-color, #f2c200);
        border: 4px solid currentColor;
        border-radius: 50%;
        background: color-mix(in srgb, currentColor 24%, transparent);
        box-shadow: inset 0 -3px 0 currentColor, 0 2px 2px rgba(0, 0, 0, .22);
    }

    :scope .field .disc::after {
        content: "";
        width: 11px;
        height: 5px;
        border: 3px solid currentColor;
        border-radius: 50%;
        background: transparent;
    }

    :scope .field .mobileBarrier {
        width: 34px;
        height: 68px;
        color: var(--object-color, #20a447);
        background: transparent;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .22));
    }

    :scope .field .mobileBarrier::before {
        left: 6px;
        top: 2px;
        width: 22px;
        height: 46px;
        border: 5px solid #171717;
        border-radius: 10px 10px 4px 4px;
        background: linear-gradient(to bottom, currentColor 0 48%, #fff 48% 100%);
        clip-path: polygon(25% 0, 75% 0, 100% 15%, 84% 100%, 16% 100%, 0 15%);
        box-sizing: border-box;
    }

    :scope .field .mobileBarrier::after {
        left: 1px;
        right: 1px;
        bottom: 1px;
        height: 18px;
        border: 0;
        border-bottom: 6px solid #171717;
        background: linear-gradient(72deg, transparent 42%, #171717 43% 57%, transparent 58%),
            linear-gradient(-72deg, transparent 42%, #171717 43% 57%, transparent 58%);
    }

    :scope .field .ladder {
        width: 48px;
        height: 66px;
        border-right: 4px solid var(--object-color, #fff);
        border-left: 4px solid var(--object-color, #fff);
        background: repeating-linear-gradient(to bottom, transparent 0 10px,
                var(--object-color, #fff) 10px 14px);
        transform-origin: center;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .22));
    }

    :scope .field .stake {
        width: 14px;
        height: 58px;
        color: var(--object-color, #fff);
        border: 4px solid currentColor;
        border-radius: 8px 8px 2px 2px;
        background: transparent;
        box-sizing: border-box;
    }

    :scope .field .stake::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        width: 28px;
        height: 9px;
        border: 4px solid currentColor;
        border-radius: 50%;
        transform: translateX(-50%);
    }

    :scope .field .tape {
        width: 34px;
        height: 34px;
        color: var(--object-color, #fff);
        border: 4px solid currentColor;
        border-radius: 50%;
        background: transparent;
        box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .12);
    }

    :scope .field .tape::after {
        content: "";
        width: 8px;
        height: 8px;
        border: 3px solid currentColor;
        border-radius: 50%;
    }

    .tactical-menu-option .menu-option-icon.material-line-icon {
        position: relative;
        flex: 0 0 34px;
        width: 34px;
        height: 30px;
        color: #171717;
        font-size: 0;
        clip-path: none;
        background: transparent;
        box-sizing: border-box;
    }

    .material-line-icon.material-disc-icon {
        height: 14px !important;
        border: 3px solid currentColor;
        border-radius: 50%;
        box-shadow: inset 0 -3px 0 currentColor;
    }

    .material-line-icon.material-disc-icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 1px;
        width: 9px;
        height: 4px;
        border: 2px solid currentColor;
        border-radius: 50%;
        transform: translateX(-50%);
    }

    .material-line-icon.material-cone-icon {
        background: currentColor;
        clip-path: polygon(44% 0, 56% 0, 82% 76%, 100% 84%, 100% 100%, 0 100%, 0 84%, 18% 76%);
    }

    .material-line-icon.material-cone-icon::after {
        content: "";
        position: absolute;
        left: 7px;
        right: 7px;
        bottom: 10px;
        height: 2px;
        background: #fff;
        box-shadow: 0 6px 0 #fff;
    }

    .material-line-icon.material-stake-icon {
        width: 13px;
        border: 3px solid currentColor;
        border-radius: 8px 8px 2px 2px;
    }

    .material-line-icon.material-stake-icon::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -7px;
        width: 24px;
        height: 7px;
        border: 3px solid currentColor;
        border-radius: 50%;
        transform: translateX(-50%);
    }

    .material-line-icon.material-ladder-icon {
        width: 30px;
        border-right: 3px solid currentColor;
        border-left: 3px solid currentColor;
        background: repeating-linear-gradient(to bottom, transparent 0 5px, currentColor 5px 8px);
    }

    .material-line-icon.material-hurdle-icon {
        height: 22px;
        border: 3px solid currentColor;
        border-bottom: 0;
        border-radius: 5px 5px 0 0;
    }

    .material-line-icon.material-hurdle-icon::before,
    .material-line-icon.material-hurdle-icon::after {
        content: "";
        position: absolute;
        bottom: -6px;
        width: 13px;
        border-bottom: 4px solid currentColor;
    }

    .material-line-icon.material-hurdle-icon::before {
        left: -6px;
        transform: rotate(-25deg);
    }

    .material-line-icon.material-hurdle-icon::after {
        right: -6px;
        transform: rotate(25deg);
    }

    .material-line-icon.material-ball-icon {
        border: 3px solid currentColor;
        border-radius: 50%;
        background: radial-gradient(circle, currentColor 0 4px, transparent 4.5px),
            conic-gradient(from 15deg, transparent 0 12%, currentColor 13% 16%, transparent 17% 32%,
                currentColor 33% 36%, transparent 37% 52%, currentColor 53% 56%, transparent 57% 72%,
                currentColor 73% 76%, transparent 77%);
    }

    .material-line-icon.material-bib-icon {
        border: 3px solid currentColor;
        border-radius: 4px 4px 8px 8px;
        clip-path: polygon(18% 0, 35% 0, 40% 18%, 60% 18%, 65% 0, 82% 0, 100% 28%, 86% 42%, 82% 32%, 82% 100%, 18% 100%, 18% 32%, 14% 42%, 0 28%);
    }

    .material-line-icon.material-goal-icon {
        border: 3px solid currentColor;
        background-image: linear-gradient(45deg, transparent 45%, currentColor 46% 54%, transparent 55%),
            linear-gradient(-45deg, transparent 45%, currentColor 46% 54%, transparent 55%);
        background-size: 8px 8px;
    }

    .material-line-icon.material-tape-icon {
        border: 3px solid currentColor;
        border-radius: 50%;
        box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 8px currentColor;
    }

    .material-line-icon.material-dummy-icon {
        width: 18px;
        border: 4px solid currentColor;
        border-radius: 8px 8px 3px 3px;
        clip-path: polygon(20% 0, 80% 0, 100% 15%, 84% 82%, 65% 82%, 70% 100%, 30% 100%, 35% 82%, 16% 82%, 0 15%);
    }

    /* Card de materiais: lista completa e ícones técnicos iguais aos objetos do campo. */
    :scope .tactical-menu:nth-child(6) .tactical-menu-panel {
        right: 0;
        left: auto;
        width: 300px;
        max-height: 330px;
        padding: 10px 8px;
        overscroll-behavior: contain;
    }

    :scope .tactical-menu:nth-child(6) .tactical-menu-option {
        justify-content: flex-start;
        min-height: 45px;
        padding: 4px 14px;
        gap: 14px;
        text-align: left;
    }

    :scope .tactical-menu:nth-child(6) .menu-option-icon.material-line-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        height: 36px !important;
        border: 0;
        border-radius: 0;
        clip-path: none;
        background: transparent;
        box-shadow: none;
    }

    :scope .tactical-menu:nth-child(6) .menu-option-icon.material-line-icon::before,
    :scope .tactical-menu:nth-child(6) .menu-option-icon.material-line-icon::after {
        content: none;
        display: none;
    }

    .material-icon-svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        color: var(--object-color, currentColor);
    }

    :scope .field .obj.material-svg-object {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 58px;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: var(--object-color, #111);
        clip-path: none;
        filter: none;
    }

    :scope .field .obj.material-svg-object::before,
    :scope .field .obj.material-svg-object::after {
        content: none;
        display: none;
    }

    :scope .field .obj.material-svg-object .goal-symbol {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    :scope .field .obj.material-svg-object .material-icon-svg {
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18));
    }

    :scope .field .obj.material-svg-object.goal,
    :scope .field .obj.material-svg-object.largeGoal {
        height: 62px;
    }

    :scope .field .obj.material-svg-object.ladder {
        width: 58px;
        height: 74px;
        border: 0;
        background: transparent;
    }

    :scope .field .obj.material-svg-object.disc {
        width: 58px;
        height: 34px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    :scope .field .obj.material-svg-object.stake {
        width: 42px;
        height: 72px;
        border: 0;
        background: transparent;
    }

    :scope .field .obj.material-svg-object.tape {
        width: 50px;
        height: 50px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    :scope .field .obj.material-svg-object.weights {
        width: 54px;
        height: 54px;
    }

    :scope .field .obj.material-svg-object.barbell {
        width: 86px;
        height: 48px;
    }

    :scope .field .arrow {
        color: var(--object-color, #fff);
        background: currentColor;
    }

    :scope .field .dashedArrow {
        color: var(--object-color, #fff);
        border-top-color: currentColor;
    }

    :scope .field .curvedArrow,
    :scope .field .curvedDashedArrow {
        color: var(--object-color, #fff);
        border-top-color: currentColor;
    }

    :scope .field .arrow::after,
    :scope .field .dashedArrow::after,
    :scope .field .curvedArrow::after,
    :scope .field .curvedDashedArrow::after {
        border-top-color: currentColor;
        border-right-color: currentColor;
    }

    :scope .field .obj.shapeTriangle {
        width: 48px;
        height: 46px;
        color: var(--object-color, #fff);
        background: currentColor;
        clip-path: polygon(50% 3%, 97% 95%, 3% 95%);
    }

    :scope .field .obj.shapeCircle {
        width: 48px;
        height: 48px;
        color: var(--object-color, #fff);
        border: 0;
        border-radius: 50%;
        background: currentColor;
        box-sizing: border-box;
    }

    :scope .field .obj.shapeSquare,
    :scope .field .obj.shapeDiamond {
        width: 52px;
        height: 52px;
        color: var(--object-color, #fff);
        background: currentColor;
        box-sizing: border-box;
    }

    :scope .field .obj.shapeDiamond {
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }

    :scope .field .shape-resize-handle {
        position: absolute;
        z-index: 3;
        display: none;
        background: transparent;
    }

    :scope .field .obj.selected .shape-resize-handle {
        display: block;
    }

    :scope .field .shape-resize-handle.is-top,
    :scope .field .shape-resize-handle.is-bottom {
        left: 5px;
        right: 5px;
        height: 10px;
        cursor: ns-resize;
    }

    :scope .field .shape-resize-handle.is-left,
    :scope .field .shape-resize-handle.is-right {
        top: 5px;
        bottom: 5px;
        width: 10px;
        cursor: ew-resize;
    }

    :scope .field .shape-resize-handle.is-top {
        top: -6px;
    }

    :scope .field .shape-resize-handle.is-bottom {
        bottom: -6px;
    }

    :scope .field .shape-resize-handle.is-left {
        left: -6px;
    }

    :scope .field .shape-resize-handle.is-right {
        right: -6px;
    }

    :scope .field-preview .shape-resize-handle {
        display: none !important;
    }

    :scope .field .material-svg-object.bib .material-icon-svg path:first-child {
        fill: currentColor;
    }

    :scope .field .obj.material-svg-object.bib {
        width: 70px;
    }

    :scope .field .bib-number {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        color: #111;
        font-size: 22px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        pointer-events: none;
    }

    :scope .field .material-svg-object.bib:not([data-color="white"]) .bib-number {
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    }

    @media (max-width: 820px) {
        :scope .tactical-menu:nth-child(6) .tactical-menu-panel {
            right: auto;
            left: 0;
            width: min(300px, calc(100vw - 40px));
            max-height: min(330px, calc(100vh - 170px));
        }
    }
}

/* PRÉ-SÚMULA — AÇÕES DO FORMULÁRIO — CSS MIGRADO DO HTML */
@scope (:scope) {
    :scope .form-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 25px;
        flex-wrap: wrap;
        width: 100%;
    }

    :scope .form-actions button,
    :scope .form-actions .btn {
        width: auto;
        min-height: 38px;
        padding: 10px 20px;
        border: 1px solid #d8d8dc;
        border-radius: 999px;
        background: #fff;
        color: #505055;
        font: 700 11px/1 "Space Grotesk", sans-serif;
        text-transform: uppercase;
        letter-spacing: .5px;
        white-space: nowrap;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        transition: all 0.2s ease;
    }

    :scope .form-actions button:hover,
    :scope .form-actions .btn:hover {
        background: #f7f7f7;
        border-color: #c0c0c0;
        color: #111;
    }

    :scope .form-actions button.primary {
        border-color: var(--metro-red);
        background: var(--metro-red);
        color: #fff;
    }

    :scope .form-actions button.primary:hover {
        background: #e02020;
        border-color: #e02020;
        color: #fff;
    }
}

/* SCOUT DA PARTIDA — CSS MIGRADO DO HTML */
@scope (:scope) {
    :scope {
        --metro-red: #e02020;
        --metro-black: #171717;
        --metro-muted: #777;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 32px 16px 24px;
        background: #fff;
        color: var(--metro-black);
        font-family: "Space Grotesk", sans-serif;
    }

    :scope * {
        box-sizing: border-box;
    }

    :scope .page {
        flex: 1;
        width: 100%;
        max-width: 1120px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 420px minmax(0, 1fr);
        gap: 40px;
        align-items: start;
    }

    :scope .scout-card {
        width: 100%;
        max-width: 720px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    :scope .scout-intro {
        margin-bottom: 18px;
        padding: 0;
    }

    :scope .scout-panel {
        min-width: 0;
        padding: 32px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.055);
    }

    :scope #profile-card-container {
        min-width: 420px;
    }

    :scope #profile-card-container .club-name,
    :scope #profile-card-container .club-description,
    :scope #profile-card-container .next-title {
        margin-top: 0;
    }

    .scout-title {
        margin: 0;
        font-size: 28px;
        line-height: 1.15;
    }

    .scout-subtitle {
        margin: 8px 0 0;
        color: var(--metro-muted);
        font-size: 14px;
        line-height: 1.5;
    }

    .match-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 24px;
    }

    .scout-match-info {
        min-width: 0;
        padding: 8px 16px;
        border: 1px solid #e7e7e7;
        border-radius: 16px;
        background: #fafafa;
        text-align: center;
    }

    .scout-match-info.wide {
        grid-column: span 2;
    }

    .scout-match-info span {
        display: block;
        color: var(--metro-muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .scout-match-info strong {
        display: block;
        margin-top: 5px;
        overflow-wrap: anywhere;
        font-size: 12px;
        line-height: 1.3;
        white-space: normal;
    }

    .scout-header-section {
        margin-top: 0;
    }

    .scout-header-label {
        margin: 0 0 12px;
        color: var(--metro-muted);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .scout-fields {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .scout-field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .scout-field {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .scout-field label {
        margin-bottom: 6px;
        color: #000;
        font-size: 13px;
        font-weight: 500;
    }

    .scout-field select,
    .scout-field input {
        width: 100%;
        height: 40px;
        padding: 6px 12px;
        border: 1px solid #d5d5d5;
        border-radius: 999px;
        background: #fff;
        color: #111;
        font: 500 12px "Space Grotesk", sans-serif;
        outline: none;
    }

    .scout-field select:focus,
    .scout-field input:focus {
        border-color: var(--metro-red);
        box-shadow: 0 0 0 3px rgba(224, 32, 32, .08);
    }

    .section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 28px 0 10px;
    }

    .scout-panel-heading {
        margin-top: 0;
    }

    .section-label {
        margin: 0;
        color: var(--metro-muted);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .section-count {
        color: var(--metro-red);
        font-size: 12px;
        font-weight: 700;
    }

    .scout-table-wrap {
        overflow-x: auto;
        border: 1px solid #e4e4e4;
        border-radius: 18px;
    }

    .scout-table {
        width: 100%;
        min-width: 900px;
        border-collapse: collapse;
        font-size: 11px;
    }

    .scout-table th {
        padding: 7px 2px;
        background: #f4f4f4;
        color: #606060;
        font-size: 11px;
        letter-spacing: .01em;
        line-height: 1.15;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .scout-table th.player-col {
        min-width: 160px;
        width: 160px;
        text-align: center;
    }

    .scout-table th.group-header {
        padding-bottom: 3px;
        border-bottom: 0;
        color: var(--metro-black);
    }

    .scout-table td {
        padding: 7px 2px;
        border-top: 1px solid #ececec;
        font-size: 11px;
        text-align: center;
    }

    .scout-table tbody tr:hover {
        background: #fffafa;
    }

    .scout-table tbody tr:last-child td {
        padding-bottom: 14px;
    }

    .athlete {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        text-align: left;
    }

    .shirt-input {
        flex: 0 0 36px;
        width: 36px;
        height: 29px;
        padding: 3px;
        border: 1px solid var(--metro-red);
        border-radius: 8px;
        background: var(--metro-red);
        color: #fff;
        font: 700 11px "Space Grotesk", sans-serif;
        text-align: center;
        appearance: textfield;
        outline: none;
    }

    .shirt-input::-webkit-inner-spin-button,
    .shirt-input::-webkit-outer-spin-button {
        margin: 0;
        appearance: none;
    }

    .shirt-input:focus {
        border-color: var(--metro-red);
        box-shadow: 0 0 0 3px rgba(224, 32, 32, .12);
    }

    .athlete>div {
        min-width: 0;
    }

    .athlete-name {
        display: block;
        overflow: hidden;
        font-size: 11px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .athlete-captain {
        color: var(--metro-red);
        font-weight: 700;
    }

    .athlete-role {
        display: block;
        margin-top: 1px;
        overflow: hidden;
        color: var(--metro-muted);
        font-size: 11px;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .stat-input {
        width: 42px;
        height: 34px;
        padding: 4px 6px;
        border: 1px solid #d7d7d7;
        border-radius: 9px;
        background: #fff;
        font: 600 11px "Space Grotesk", sans-serif;
        text-align: center;
        outline: none;
    }

    .stat-input:focus {
        border-color: var(--metro-red);
        box-shadow: 0 0 0 3px rgba(224, 32, 32, .1);
    }

    .stat-input:disabled {
        background: #f2f2f2;
        color: #aaa;
        cursor: not-allowed;
    }

    .stat-input {
        appearance: textfield;
    }

    .stat-input::-webkit-inner-spin-button,
    .stat-input::-webkit-outer-spin-button {
        margin: 0;
        appearance: none;
    }

    .time-output {
        display: inline-block;
        min-width: 50px;
        padding: 7px 4px;
        border-radius: 8px;
        background: #f2f2f2;
        color: #333;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
    }

    .time-output.percentage {
        color: var(--metro-red);
    }

    .stepper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    .stepper-button {
        display: grid;
        place-items: center;
        width: 21px;
        height: 21px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--metro-black);
        color: #fff;
        font: 700 13px/1 "Space Grotesk", sans-serif;
        cursor: pointer;
        transition: .2s ease;
    }

    .stepper-button:hover:not(:disabled) {
        background: var(--metro-red);
        transform: translateY(-1px);
    }

    .stepper-button:disabled {
        background: #ddd;
        color: #999;
        cursor: not-allowed;
    }

    .stepper-value {
        display: block;
        width: 22px;
        min-width: 22px;
        height: 21px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--metro-black);
        font: 700 11px "Space Grotesk", sans-serif;
        line-height: 21px;
        text-align: center;
        appearance: textfield;
        opacity: 1;
        pointer-events: none;
        -webkit-text-fill-color: var(--metro-black);
    }

    .stepper-value::-webkit-inner-spin-button,
    .stepper-value::-webkit-outer-spin-button {
        margin: 0;
        appearance: none;
    }

    .stepper.disabled {
        opacity: .45;
    }

    .stepper[data-kind="amarelo"] .stepper-value {
        color: #947500;
        -webkit-text-fill-color: #947500;
    }

    .stepper[data-kind="vermelho"] .stepper-value {
        color: var(--metro-red);
        -webkit-text-fill-color: var(--metro-red);
    }

    .technical-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .technical-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border: 1px solid #ddd;
        border-radius: 14px;
        background: #fafafa;
    }

    .technical-info {
        min-width: 0;
        line-height: 1.2;
    }

    .technical-info .role {
        display: block;
        color: #666;
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
    }

    .technical-info .name {
        display: block;
        margin-top: 3px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .technical-remove {
        flex: 0 0 auto;
        padding: 7px 11px;
        border: 0;
        border-radius: 9px;
        background: var(--metro-red);
        color: #fff;
        font: 700 11px "Space Grotesk", sans-serif;
        cursor: pointer;
    }

    .include-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }

    .include-row select {
        flex: 1;
        min-width: 0;
        height: 38px;
        padding: 6px 12px;
        border: 1px solid #d5d5d5;
        border-radius: 999px;
        background: #fff;
        font: 500 11px "Space Grotesk", sans-serif;
    }

    .include-button {
        flex: 0 0 auto;
        height: 38px;
        padding: 0 15px;
        border: 0;
        border-radius: 999px;
        background: var(--metro-red);
        color: #fff;
        font: 700 11px "Space Grotesk", sans-serif;
        cursor: pointer;
    }

    .include-button:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    .athlete-remove {
        padding: 5px 8px;
        border: 0;
        border-radius: 7px;
        background: var(--metro-red);
        color: #fff;
        font: 700 9px "Space Grotesk", sans-serif;
        cursor: pointer;
    }

    .summary-bar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 0;
        padding: 14px;
        border-radius: 18px;
        background: var(--metro-black);
        color: #fff;
    }

    .summary-item {
        text-align: center;
    }

    .summary-item span {
        display: block;
        color: #aaa;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .summary-item strong {
        display: block;
        margin-top: 3px;
        font-size: 20px;
    }

    .scout-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 18px;
    }

    .btn-action {
        min-width: 135px;
        padding: 11px 18px;
        border: 1px solid #ddd;
        border-radius: 999px;
        background: #fff;
        font: 700 12px "Space Grotesk", sans-serif;
        cursor: pointer;
    }

    .btn-action.primary {
        border-color: var(--metro-red);
        background: var(--metro-red);
        color: #fff;
    }

    :scope #footer-container .footer {
        margin-top: 24px;
        text-align: center;
    }

    :scope .footer-main {
        margin: 0;
        color: #666;
        font-size: 14px;
    }

    :scope .footer-sub {
        margin-top: 4px;
        color: #999;
        font-size: 11px;
        line-height: 1.4;
    }

    @media (max-width: 900px) {
        :scope .page {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 850px) {
        :scope #profile-card-container {
            min-width: auto;
        }
    }

    @media (max-width: 700px) {
        :scope {
            padding: 16px 10px;
        }

        :scope .scout-card {
            gap: 14px;
        }

        :scope .scout-panel {
            padding: 32px;
            border-radius: 20px;
        }

        .match-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .scout-field-row {
            grid-template-columns: 1fr;
        }

        .technical-grid {
            grid-template-columns: 1fr;
        }

        .summary-bar {
            grid-template-columns: repeat(2, 1fr);
        }

        .scout-actions {
            flex-direction: column;
        }

        .btn-action {
            width: 100%;
        }
    }
}

@media (max-width: 460px) {

    body.page-scout .scout-panel,
    body.page-pre-sumula .pre-sumula-panel {
        padding: 24px;
    }
}

/* =========================================================
   CARD DE PERFIL — REDESIGN 2026
   ========================================================= */

#profile-card-container .profile-card {
    height: auto;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(17, 17, 17, 0.10);
}

#profile-card-container .profile-card-content {
    width: 100%;
    min-width: 0;
}

#profile-card-container .top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

#profile-card-container .logo-wrap {
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
}

#profile-card-container .badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

#profile-card-container .badge-fpf {
    height: 36px;
}

#profile-card-container .badge-cbf {
    height: 44px;
}

#profile-card-container .badge-formador {
    height: 38px;
}

#profile-card-container .club-overview {
    min-width: 0;
}

#profile-card-container .club-name {
    margin: 0 0 10px;
    color: #111111;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

#profile-card-container .club-handle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: #727277;
    font-size: 14px;
    line-height: 1.3;
}

#profile-card-container .club-colors {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

#profile-card-container .club-color {
    width: 17px;
    height: 17px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

#profile-card-container .club-color-red {
    background: #e02020;
}

#profile-card-container .club-color-black {
    background: #111111;
}

#profile-card-container .club-color-white {
    background: #eeeeef;
}

#profile-card-container .club-summary {
    display: grid;
    gap: 8px;
    margin-top: 22px;
}

#profile-card-container .club-summary p {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    color: #5f5f64;
    font-size: 14px;
    line-height: 1.55;
}

#profile-card-container .club-summary svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 2px;
    fill: none;
    stroke: var(--metro-red);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#profile-card-container .club-location {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    color: #707075;
    font-size: 14px;
    font-weight: 500;
}

#profile-card-container .club-location svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--metro-red);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#profile-card-container .profile-divider {
    height: 1px;
    margin: 24px 0;
    background: #eeeeef;
}

#profile-card-container .profile-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#profile-card-container .profile-feature {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 8px 10px;
    border: 1px solid rgba(224, 32, 32, 0.36);
    border-radius: 16px;
    background: rgba(224, 32, 32, 0.025);
    color: #28282c;
}

#profile-card-container .profile-feature svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: var(--metro-red);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#profile-card-container .profile-feature span {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.07em;
    text-align: center;
    text-transform: uppercase;
}

#profile-card-container .next-matches-card {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

#profile-card-container .next-matches-header {
    display: grid;
    grid-template-columns: 24px auto minmax(28px, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

#profile-card-container .next-matches-header svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--metro-red);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#profile-card-container .next-matches-header>span {
    height: 1px;
    background: rgba(224, 32, 32, 0.45);
}

#profile-card-container .next-title {
    margin: 0;
    color: #17171a;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
}

#profile-card-container .next-match {
    margin: 0;
    padding: 0;
    border: 0;
}

#profile-card-container .next-matches-list {
    display: grid;
    gap: 8px;
}

#profile-card-container .matches-state {
    margin: 0;
    padding: 18px 14px;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    color: #6f6f74;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

#profile-card-container .matches-state-error {
    border-color: rgba(224, 32, 32, 0.28);
    color: var(--metro-red);
}

#profile-card-container .next-match-featured {
    padding: 13px 15px;
    border: 2px solid var(--metro-red);
    border-radius: 18px;
    background: rgba(224, 32, 32, 0.025);
}

#profile-card-container .match-competition {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0 0 7px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: uppercase;
}

#profile-card-container .next-match-featured .match-competition {
    border-color: var(--metro-red);
    background: var(--metro-red);
    color: #ffffff;
    box-shadow: none;
}

#profile-card-container .match-category {
    margin-bottom: 6px;
    color: var(--metro-red);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

#profile-card-container .match-date {
    margin-bottom: 7px;
    color: #4f4f54;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

#profile-card-container .match-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 5px;
    color: #17171a;
    font-size: 15px;
    line-height: 1.35;
}

#profile-card-container .match-info strong {
    min-width: 0;
}

#profile-card-container .match-colors {
    flex: 0 0 auto;
    white-space: nowrap;
}

#profile-card-container .match-location {
    color: #85858a;
    font-size: 12px;
    line-height: 1.4;
}

#profile-card-container .next-match-compact {
    display: grid;
    grid-template-columns: minmax(128px, 0.9fr) minmax(0, 1.35fr);
    gap: 12px;
    margin-top: 0;
    padding: 11px 12px;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    background: #ffffff;
}

#profile-card-container .match-compact-label {
    padding-right: 11px;
    border-right: 1px solid #e5e5e7;
}

#profile-card-container .next-match-compact .match-competition {
    border-color: #8a8a8f;
    background: #8a8a8f;
    color: #ffffff;
    box-shadow: none;
}

#profile-card-container .next-match .competition-jogotreino {
    border-color: rgba(255, 193, 7, 0.35);
    background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.15),
            rgba(255, 193, 7, 0.05));
    color: #b8860b;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.12);
}

#profile-card-container .next-match .competition-uniaocup {
    border-color: rgba(13, 110, 253, 0.35);
    background: linear-gradient(135deg,
            rgba(13, 110, 253, 0.15),
            rgba(13, 110, 253, 0.05));
    color: #0d6efd;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.12);
}

#profile-card-container .next-match-compact .match-category {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
}

#profile-card-container .next-match-compact .match-date {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.45;
}

#profile-card-container .next-match-compact .match-info {
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.4;
}

#profile-card-container .next-match-compact .match-location {
    font-size: 11px;
    line-height: 1.45;
}

#profile-card-container .profile-update {
    justify-content: center;
    margin: 24px 0 0;
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid #eeeeef;
    border-radius: 0;
    background: transparent;
    text-align: center;
}

#profile-card-container .profile-update-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    background: transparent;
    font-size: 16px;
}

#profile-card-container .profile-update-copy span {
    font-size: 9px;
}

#profile-card-container .profile-update-copy strong {
    font-size: 11px;
}

@media (max-width: 460px) {
    #profile-card-container .profile-card {
        padding: 24px;
        border-radius: 28px;
    }

    #profile-card-container .logo-wrap {
        width: 94px;
        height: 94px;
        flex-basis: 94px;
    }

    #profile-card-container .badges {
        gap: 8px;
    }

    #profile-card-container .badge-fpf {
        height: 30px;
    }

    #profile-card-container .badge-cbf {
        height: 37px;
    }

    #profile-card-container .badge-formador {
        height: 32px;
    }

    #profile-card-container .club-name {
        font-size: 22px;
    }

    #profile-card-container .profile-features {
        grid-template-columns: 1fr;
    }

    #profile-card-container .profile-feature {
        min-height: 60px;
    }

    #profile-card-container .next-match-compact {
        grid-template-columns: 1fr;
    }

    #profile-card-container .match-compact-label {
        padding: 0 0 10px;
        border-right: 0;
        border-bottom: 1px solid #e5e5e7;
    }
}

/* Atletas: cada categoria deve crescer para exibir a lista completa. */
body.page-atletas .section-card .athlete-list {
    max-height: none;
    overflow: visible;
}

body.page-atletas .athlete-card .athlete-photo {
    display: grid;
    width: 100% !important;
    max-width: 232px;
    height: auto !important;
    min-height: 0;
    max-height: none;
    flex: 0 0 auto;
    aspect-ratio: 4 / 5;
    place-items: center;
}

body.page-atletas .athlete-card .athlete-photo img {
    width: 100% !important;
    max-width: none;
    height: 100% !important;
    min-height: 0;
    max-height: none;
    object-fit: cover;
    object-position: center;
    transform: none;
}

/* Programação esportiva */
body.page-programacao {
    --metro-red: #e02020;
    --metro-muted: #77777c;
    min-height: 100vh;
    padding: 32px 16px 24px;
    background: #fff;
    color: #17171a;
    font-family: "Space Grotesk", sans-serif;
}

body.page-programacao * {
    box-sizing: border-box;
}

body.page-programacao .page {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    align-items: start;
    gap: 40px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

body.page-programacao .programacao-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
}

body.page-programacao .programacao-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin: 22px 0;
}

body.page-programacao .programacao-heading h1 {
    margin: 0 0 5px;
    font-size: 26px;
    line-height: 1.15;
}

body.page-programacao .programacao-heading p {
    margin: 0;
    color: var(--metro-muted);
    font-size: 14px;
}

body.page-programacao .programacao-month-picker {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 96px;
    gap: 8px;
}

body.page-programacao .programacao-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ececef;
}

body.page-programacao .programacao-tabs button {
    padding: 10px 22px;
    border: 1px solid #d9d9dd;
    border-radius: 999px;
    background: #fff;
    color: #55555a;
    font: 700 12px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
    text-transform: uppercase;
}

body.page-programacao .programacao-tabs button.active {
    border-color: var(--metro-red);
    background: var(--metro-red);
    color: #fff;
}

body.page-programacao .programacao-workspace[hidden] {
    display: none;
}

body.page-programacao .programacao-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

body.page-programacao label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

body.page-programacao label>span,
body.page-programacao .programacao-selection>span {
    color: #68686d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.page-programacao input,
body.page-programacao select,
body.page-programacao textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #d8d8dc;
    border-radius: 12px;
    background: #fff;
    color: #222226;
    font: 500 13px/1.35 "Space Grotesk", sans-serif;
}

body.page-programacao textarea {
    min-height: 82px;
    resize: vertical;
}

body.page-programacao .programacao-calendar-weekdays,
body.page-programacao .programacao-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
}

body.page-programacao .programacao-calendar-weekdays {
    margin-bottom: 7px;
}

body.page-programacao .programacao-calendar-weekdays span {
    color: #77777c;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

body.page-programacao .programacao-calendar button {
    display: flex;
    min-width: 0;
    min-height: 70px;
    padding: 8px;
    border: 1px solid #e1e1e4;
    border-radius: 12px;
    background: #fafafa;
    color: #222226;
    cursor: pointer;
    flex-direction: column;
    text-align: left;
}

body.page-programacao .programacao-calendar button strong {
    color: var(--metro-red);
    font-size: 13px;
}

body.page-programacao .programacao-calendar button span {
    margin-top: auto;
    color: #8a8a90;
    font-size: 9px;
}

body.page-programacao [data-program-date].selected {
    border-color: var(--metro-red);
    background: #fff2f2;
    box-shadow: 0 0 0 2px rgba(224, 32, 32, 0.10);
}

body.page-programacao .programacao-microciclo {
    display: grid;
    gap: 5px;
    overflow-x: auto;
}

body.page-programacao .programacao-micro-row {
    display: grid;
    grid-template-columns: 90px repeat(7, minmax(62px, 1fr));
    gap: 5px;
    min-width: 610px;
}

body.page-programacao .programacao-micro-row>strong {
    display: grid;
    min-height: 40px;
    padding: 7px;
    place-items: center;
    border-radius: 9px;
    background: #f1f1f3;
    font-size: 10px;
    text-align: center;
}

body.page-programacao .programacao-micro-row button {
    min-height: 50px;
    border: 1px solid #dfdfe3;
    border-radius: 9px;
    background: #fafafa;
    color: var(--metro-red);
    font-size: 20px;
    cursor: pointer;
}

body.page-programacao .programacao-form {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid #e1e1e4;
    border-radius: 20px;
    background: #fafafa;
}

body.page-programacao .programacao-selection {
    display: grid;
    gap: 4px;
    margin-bottom: 15px;
}

body.page-programacao .programacao-selection strong {
    font-size: 14px;
}

body.page-programacao .programacao-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}

body.page-programacao .programacao-field-wide {
    grid-column: 1 / -1;
}

body.page-programacao .programacao-form-grid small {
    color: var(--metro-muted);
    font-size: 10px;
    line-height: 1.3;
}

body.page-programacao #programacaoNumeroSemana {
    color: #414146;
    font-weight: 700;
}

body.page-programacao .programacao-add,
body.page-programacao .programacao-save {
    display: block;
    min-height: 42px;
    margin: 16px auto 0;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--metro-red);
    color: #fff;
    font: 700 12px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
}

body.page-programacao .programacao-draft {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #ececef;
}

body.page-programacao .programacao-draft>header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

body.page-programacao .programacao-draft header span {
    color: var(--metro-red);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.page-programacao .programacao-draft h2 {
    margin: 4px 0 0;
    font-size: 18px;
}

body.page-programacao .programacao-draft>header>strong {
    color: #77777c;
    font-size: 12px;
}

body.page-programacao .programacao-draft-list {
    display: grid;
    gap: 8px;
}

body.page-programacao .programacao-empty {
    padding: 16px;
    border: 1px dashed #d5d5d9;
    border-radius: 14px;
    color: #85858a;
    font-size: 12px;
    text-align: center;
}

body.page-programacao .programacao-draft-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #e3e3e6;
    border-radius: 14px;
    background: #fff;
}

body.page-programacao .programacao-draft-item div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

body.page-programacao .programacao-draft-item span {
    color: var(--metro-red);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

body.page-programacao .programacao-draft-item strong {
    font-size: 13px;
}

body.page-programacao .programacao-draft-item p {
    margin: 0;
    color: #77777c;
    font-size: 11px;
}

body.page-programacao .programacao-draft-item button {
    border: 0;
    background: transparent;
    color: #88888d;
    font: 700 10px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
    text-transform: uppercase;
}

body.page-programacao .programacao-status {
    min-height: 18px;
    margin-top: 12px;
    color: #66666b;
    font-size: 12px;
    text-align: center;
}

body.page-programacao .programacao-status.success {
    color: #14702e;
}

body.page-programacao .programacao-status.error {
    color: #b30000;
}

body.programacao-modal-open {
    overflow: hidden;
}

body.page-programacao .programacao-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
}

body.page-programacao .programacao-modal-backdrop.is-visible {
    display: flex;
}

body.page-programacao .programacao-message-modal {
    width: min(90vw, 420px);
    padding: 24px 28px;
    border: 1px solid #e3e3e3;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16);
    text-align: center;
}

body.page-programacao .programacao-message-modal .modal-title {
    margin-bottom: 8px;
    color: var(--metro-muted);
    font-size: 18px;
    font-weight: 700;
}

body.page-programacao .programacao-modal-backdrop.is-error .modal-title {
    color: var(--metro-red);
}

body.page-programacao .programacao-message-modal .modal-text {
    color: var(--metro-muted);
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-line;
}

body.page-programacao .programacao-message-modal .btn-modal {
    margin-top: 16px;
    padding: 10px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--metro-red);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

body.page-programacao .programacao-save:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Central de relatórios */
body.page-relatorios {
    --metro-red: #e02020;
    --metro-muted: #77777c;
    min-height: 100vh;
    padding: 32px 16px 24px;
    background: #fff;
    color: #17171a;
    font-family: "Space Grotesk", sans-serif;
}

body.page-relatorios * {
    box-sizing: border-box;
}

body.page-relatorios .page {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    align-items: start;
    gap: 40px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

body.page-relatorios .reports-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
}

body.page-relatorios .reports-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 22px 0;
}

body.page-relatorios .reports-heading h1 {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.15;
}

body.page-relatorios .reports-heading p,
body.page-relatorios .report-workspace-header p {
    margin: 0;
    color: var(--metro-muted);
    font-size: 13px;
    line-height: 1.45;
}

body.page-relatorios .reports-count,
body.page-relatorios .report-source {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid #dedee2;
    border-radius: 999px;
    color: #66666b;
    font-size: 10px;
    font-weight: 700;
}

body.page-relatorios .reports-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.page-relatorios .reports-menu button {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 14px;
    border: 1px solid #dedee2;
    border-radius: 18px;
    background: #fff;
    color: #222226;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: 0.18s ease;
}

body.page-relatorios .reports-menu button:hover,
body.page-relatorios .reports-menu button:focus-visible {
    outline: 0;
    transform: translateY(-2px);
    border-color: rgba(224, 32, 32, 0.65);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

body.page-relatorios .reports-menu button>span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: transparent;
    color: var(--metro-red);
    font-size: 11px;
    font-weight: 700;
}

body.page-relatorios .reports-menu button>span svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: #e52025;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-relatorios .reports-menu button strong {
    font-size: 14px;
    line-height: 1.25;
}

body.page-relatorios .report-workspace[hidden],
body.page-relatorios .reports-menu[hidden] {
    display: none;
}

body.page-relatorios .report-workspace-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e5e7;
}

body.page-relatorios .report-eyebrow,
body.page-relatorios .report-filters label>span {
    color: var(--metro-red);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.page-relatorios .report-workspace-header h2 {
    margin: 5px 0;
    font-size: 22px;
}

body.page-relatorios .report-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border: 1px solid #e1e1e4;
    border-radius: 18px;
    background: #fafafa;
}

body.page-relatorios .report-workspace.is-evaluation .report-workspace-header {
    display: none;
}

body.page-relatorios .report-workspace.is-evaluation .report-filters {
    grid-template-columns: 1fr;
    margin: 16px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.page-relatorios .report-workspace.is-evaluation .evaluation-filters,
body.page-relatorios .report-workspace.is-evaluation .athlete-filters {
    grid-template-columns: 1fr;
}

body.page-relatorios .report-workspace.is-evaluation .report-multi-field,
body.page-relatorios .report-workspace.is-evaluation .report-filters>label {
    width: 100%;
}

body.page-relatorios .report-period-fields {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.page-relatorios .report-filters label {
    display: grid;
    gap: 6px;
}

body.page-relatorios .evaluation-filters,
body.page-relatorios .athlete-filters {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.page-relatorios .evaluation-filters[hidden],
body.page-relatorios .athlete-filters[hidden],
body.page-relatorios .report-period-fields[hidden] {
    display: none;
}

body.page-relatorios .report-multi-field {
    display: grid;
    align-content: start;
    gap: 6px;
}

body.page-relatorios .report-multi-field>label {
    color: var(--metro-red);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.page-relatorios .report-multi-list {
    display: grid;
    gap: 8px;
}

body.page-relatorios .report-multi-list:empty {
    display: none;
}

body.page-relatorios .report-multi-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 8px 10px 8px 12px;
    border: 1px solid #e2e2e5;
    border-radius: 11px;
    background: #f1f1f3;
    color: #303035;
    font-size: 11px;
    font-weight: 700;
}

body.page-relatorios .report-filters .report-multi-item button {
    width: auto;
    min-height: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: var(--metro-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

body.page-relatorios .report-filters input,
body.page-relatorios .report-filters select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #d8d8dc;
    border-radius: 11px;
    background: #fff;
    color: #222226;
    font: 500 12px/1.3 "Space Grotesk", sans-serif;
}

body.page-relatorios .report-filters button,
body.page-relatorios .report-actions button {
    min-height: 40px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--metro-red);
    color: #fff;
    font: 700 11px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
}

body.page-relatorios .report-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 10px;
}

body.page-relatorios .report-data-status {
    grid-column: 1 / -1;
    min-height: 16px;
    margin: 0;
    color: var(--metro-muted);
    font-size: 10px;
    text-align: center;
}

body.page-relatorios .report-data-status:empty {
    display: none;
}

body.page-relatorios .report-data-status.is-loading {
    color: #55555a;
}

body.page-relatorios .report-data-status.is-error {
    color: var(--metro-red);
    font-weight: 700;
}

body.page-relatorios .report-filter-actions .secondary {
    border: 1px solid #d8d8dc;
    background: #fff;
    color: #55555a;
}

body.page-relatorios .report-preview {
    margin-top: 0;
    padding: 22px;
    border: 1px solid #dedee2;
    border-radius: 20px;
    background: #fff;
}

body.page-relatorios .report-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 0;
}

body.page-relatorios .report-placeholder strong {
    color: var(--metro-red);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.page-relatorios .report-preview-header h2 {
    margin: 5px 0;
    font-size: 20px;
}

body.page-relatorios .report-preview-header p,
body.page-relatorios .report-placeholder p {
    margin: 0;
    color: var(--metro-muted);
    font-size: 11px;
    line-height: 1.45;
}

body.page-relatorios .report-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 16px 0;
}

body.page-relatorios .report-summary-grid article {
    display: grid;
    gap: 5px;
    padding: 12px;
    border-radius: 13px;
    background: #fafafa;
}

body.page-relatorios .report-summary-grid span,
body.page-relatorios .report-preview footer span {
    color: var(--metro-muted);
    font-size: 9px;
    text-transform: uppercase;
}

body.page-relatorios .report-summary-grid strong {
    font-size: 11px;
    line-height: 1.3;
}

body.page-relatorios .report-placeholder {
    min-height: 140px;
    padding: 18px;
    border: 1px dashed #d5d5d9;
    border-radius: 15px;
    background: #fcfcfc;
}

body.page-relatorios .report-placeholder p {
    margin-top: 8px;
}

body.page-relatorios .report-preview footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e5e7;
    font-size: 10px;
}

body.page-relatorios .report-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

body.page-relatorios .report-actions .secondary {
    border: 1px solid #d8d8dc;
    background: #fff;
    color: #55555a;
}

body.page-relatorios.report-modal-open {
    overflow: hidden;
}

body.page-relatorios .report-modal {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(18, 18, 20, 0.62);
    backdrop-filter: blur(4px);
}

body.page-relatorios .report-modal.is-open {
    display: grid;
}

body.page-relatorios .report-modal-dialog {
    width: min(1180px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 24px;
    border: 1px solid #dedee2;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

body.page-relatorios .report-modal-header {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(340px, 1.2fr) auto;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e5e7;
}

body.page-relatorios .report-document-meta {
    display: grid;
    gap: 4px;
    margin: 12px 0 0;
}

body.page-relatorios .report-document-meta>div {
    display: flex;
    gap: 6px;
    font-size: 9px;
}

body.page-relatorios .report-document-meta dt {
    color: var(--metro-muted);
}

body.page-relatorios .report-document-meta dt::after {
    content: ":";
}

body.page-relatorios .report-document-meta dd {
    margin: 0;
    color: #303035;
    font-weight: 700;
}

body.page-relatorios .report-executive-summary {
    padding: 14px;
    border-left: 4px solid var(--metro-red);
    border-radius: 0 12px 12px 0;
    background: #f7f7f8;
}

body.page-relatorios .report-executive-summary>span {
    color: var(--metro-red);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.page-relatorios .report-executive-summary h3 {
    margin: 4px 0 6px;
    font-size: 13px;
}

body.page-relatorios .report-executive-summary p {
    color: #55555a;
    font-size: 9px;
    line-height: 1.5;
}

body.page-relatorios .report-modal-header>div>span {
    color: var(--metro-red);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.page-relatorios .report-modal-header h2 {
    margin: 5px 0;
    font-size: 24px;
}

body.page-relatorios .report-modal-header p {
    margin: 0;
    color: var(--metro-muted);
    font-size: 11px;
}

body.page-relatorios .report-modal-header>button {
    display: grid;
    width: 34px;
    height: 34px;
    min-height: 0;
    place-items: center;
    padding: 0;
    border: 1px solid #dedee2;
    border-radius: 50%;
    background: #fff;
    color: #444449;
    font-size: 22px;
    cursor: pointer;
}

body.page-relatorios .report-modal-filter-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 14px 0;
}

body.page-relatorios .report-modal-filter-summary span {
    padding: 6px 9px;
    border-radius: 999px;
    background: #f3f3f5;
    color: #55555a;
    font-size: 9px;
    font-weight: 700;
}

body.page-relatorios .report-modal-metrics {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 16px;
}

body.page-relatorios .report-loading-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.35);
}

body.page-relatorios .report-loading-modal.is-visible {
    display: flex;
}

body.page-relatorios .report-loading-dialog {
    width: min(550px, 90vw);
    padding: 28px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    text-align: center;
}

body.page-relatorios .report-loading-dialog h2 {
    margin: 14px 0 10px;
    font-size: 20px;
}

body.page-relatorios .report-loading-dialog p {
    margin: 0;
    color: var(--metro-muted);
    font-size: 14px;
    line-height: 1.6;
}

body.page-relatorios .report-loading-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto;
    border: 4px solid #f0d5d5;
    border-top-color: var(--metro-red);
    border-radius: 50%;
    animation: report-loading-spin 0.8s linear infinite;
}

body.page-relatorios .report-category-heatmap-card {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #dedee2;
    border-radius: 16px;
    background: #fff;
}

body.page-relatorios .report-category-heatmap-card>header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

body.page-relatorios .report-category-heatmap-card>header>div {
    display: flex;
    align-items: center;
    gap: 9px;
}

body.page-relatorios .report-category-heatmap-card h3 {
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
}

body.page-relatorios .report-category-heatmap-icon {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid var(--metro-red);
    border-radius: 7px;
    color: var(--metro-red);
    font-weight: 700;
}

body.page-relatorios .report-category-heatmap-card>header p {
    margin: 0;
    padding: 7px 10px;
    border: 1px solid #e0e0e3;
    border-radius: 10px;
    background: #fafafa;
    color: #55555a;
    font-size: 10px;
    font-weight: 600;
}

body.page-relatorios .report-category-heatmap-scroll {
    overflow-x: auto;
}

body.page-relatorios .report-category-heatmap {
    display: grid;
    gap: 4px;
    min-width: max-content;
}

body.page-relatorios .report-category-heatmap.is-empty {
    display: block;
    min-width: 0;
    padding: 24px;
    border: 1px dashed #d8d8dc;
    border-radius: 12px;
    color: var(--metro-muted);
    text-align: center;
}

body.page-relatorios .report-category-heatmap-heading,
body.page-relatorios .report-category-heatmap-category,
body.page-relatorios .report-category-heatmap-cell {
    display: grid;
    min-height: 38px;
    place-items: center;
    padding: 7px;
    border-radius: 8px;
    font-size: 10px;
}

body.page-relatorios .report-category-heatmap-heading {
    color: #55555a;
    background: #f5f5f6;
    text-transform: uppercase;
}

body.page-relatorios .report-category-heatmap-category {
    justify-content: start;
    color: var(--metro-red);
    background: #fafafa;
}

body.page-relatorios .report-category-heatmap-cell {
    font-weight: 700;
}

body.page-relatorios .report-category-heatmap-card>footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--metro-muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

body.page-relatorios .report-category-heatmap-card>footer>div {
    display: flex;
    gap: 3px;
}

body.page-relatorios .report-category-heatmap-card>footer i {
    width: 25px;
    height: 8px;
    border-radius: 3px;
    background: rgba(229, 31, 38, 0.1);
}

body.page-relatorios .report-category-heatmap-card>footer i:nth-child(2) {
    background: rgba(229, 31, 38, 0.25);
}

body.page-relatorios .report-category-heatmap-card>footer i:nth-child(3) {
    background: rgba(229, 31, 38, 0.4);
}

body.page-relatorios .report-category-heatmap-card>footer i:nth-child(4) {
    background: rgba(229, 31, 38, 0.58);
}

body.page-relatorios .report-category-heatmap-card>footer i:nth-child(5) {
    background: rgba(229, 31, 38, 0.76);
}

body.page-relatorios .report-category-heatmap-card>footer i:nth-child(6) {
    background: rgba(229, 31, 38, 1);
}

@keyframes report-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

body.page-relatorios .report-modal-metrics article {
    display: grid;
    gap: 5px;
    padding: 13px;
    border-radius: 13px;
    background: #fafafa;
    text-align: center;
}

body.page-relatorios .report-modal-metrics span {
    color: var(--metro-muted);
    font-size: 9px;
    text-transform: uppercase;
}

body.page-relatorios .report-modal-metrics strong {
    color: var(--metro-red);
    font-size: 22px;
}

body.page-relatorios .report-modal-metrics small {
    color: #18864b;
    font-size: 9px;
    font-weight: 700;
}

body.page-relatorios .athlete-report-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.page-relatorios .athlete-report-distributions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.page-relatorios .athlete-report-distributions .report-distribution-card {
    grid-column: auto;
}

body.page-relatorios .athlete-report-photo {
    display: grid;
    width: 61px;
    height: 81px;
    overflow: hidden;
    place-items: center;
    border: 1px solid #d2d2d6;
    border-radius: 6px;
    background: #f1f1f3;
    color: #77777c;
    font-size: 10px;
    font-weight: 700;
}

body.page-relatorios .athlete-report-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-relatorios #athleteReportRows td:nth-child(2) {
    white-space: nowrap;
}

body.page-relatorios .report-distributions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

body.page-relatorios .report-distribution-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e2e2e5;
    border-radius: 14px;
    background: #fff;
}

body.page-relatorios .report-distribution-category {
    grid-column: auto;
}

body.page-relatorios .report-distribution-dates {
    grid-column: auto;
}

body.page-relatorios .report-city-map-card {
    grid-column: 1 / -1;
}

body.page-relatorios .report-distribution-card>header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.page-relatorios .report-distribution-card h3 {
    margin: 0 0 12px;
    font-size: 12px;
}

body.page-relatorios .report-distribution-card>header h3 {
    margin-bottom: 0;
}

body.page-relatorios .report-chart-legend {
    display: flex;
    gap: 12px;
    color: var(--metro-muted);
    font-size: 9px;
}

body.page-relatorios .report-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body.page-relatorios .report-chart-legend i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

body.page-relatorios .report-chart-legend .male,
body.page-relatorios .report-category-track .male {
    background: var(--metro-red);
}

body.page-relatorios .report-chart-legend .female,
body.page-relatorios .report-category-track .female {
    background: #4c4c52;
}

body.page-relatorios .report-category-chart {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

body.page-relatorios .report-category-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    font-size: 10px;
}

body.page-relatorios .report-date-chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    min-height: 150px;
    padding-top: 8px;
}

body.page-relatorios .report-date-chart>div {
    display: grid;
    flex: 1;
    grid-template-rows: 18px 100px 18px;
    justify-items: center;
    min-width: 34px;
    color: #66666b;
    font-size: 8px;
}

body.page-relatorios .report-date-chart strong {
    color: var(--metro-red);
    font-size: 10px;
}

body.page-relatorios .report-date-chart>div>div {
    position: relative;
    width: 22px;
    height: 100%;
    overflow: hidden;
    border-radius: 7px 7px 3px 3px;
    background: #ededf0;
}

body.page-relatorios .report-date-chart i {
    position: absolute;
    inset: auto 0 0;
    border-radius: inherit;
    background: linear-gradient(180deg, #f05b5f, var(--metro-red));
}

body.page-relatorios .report-category-row>span {
    font-weight: 700;
}

body.page-relatorios .report-category-row>strong {
    color: var(--metro-red);
    text-align: right;
}

body.page-relatorios .report-category-track {
    display: flex;
    min-width: 2px;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #ededf0;
}

body.page-relatorios .report-category-track i {
    display: block;
    height: 100%;
}

body.page-relatorios .report-count-list {
    display: grid;
    gap: 8px;
}

body.page-relatorios .report-count-list>div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #55555a;
    font-size: 10px;
}

body.page-relatorios .report-count-list>div::after {
    order: 2;
    flex: 1;
    border-bottom: 1px dotted #bdbdc2;
    content: "";
}

body.page-relatorios .report-count-list strong {
    order: 3;
    color: #222226;
}

body.page-relatorios .report-horizontal-chart {
    display: grid;
    gap: 8px;
}

body.page-relatorios .report-horizontal-chart>div {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 8px;
    color: #55555a;
    font-size: 9px;
}

body.page-relatorios .report-horizontal-chart>div>span {
    font-weight: 700;
}

body.page-relatorios #gameCompetitionDistribution>div {
    grid-template-columns: 150px minmax(0, 1fr) 24px;
}

body.page-relatorios #gameCompetitionDistribution>div>span {
    white-space: nowrap;
}

body.page-relatorios .report-horizontal-chart>div>strong {
    color: var(--metro-red);
    text-align: right;
}

body.page-relatorios .report-horizontal-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #ededf0;
}

body.page-relatorios .report-horizontal-track i {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--metro-red), #f05b5f);
}

body.page-relatorios .report-city-map-card>header>span {
    color: var(--metro-muted);
    font-size: 8px;
    text-transform: uppercase;
}

body.page-relatorios .report-city-heatmap {
    position: relative;
    height: 330px;
    overflow: hidden;
    border-radius: 12px;
    background: #eef0f2;
}

body.page-relatorios .report-city-heatmap .leaflet-control-attribution {
    font-size: 7px;
}

body.page-relatorios .report-city-heatmap .leaflet-tooltip {
    border: 0;
    border-radius: 8px;
    font: 9px/1.35 "Space Grotesk", sans-serif;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

body.page-relatorios .report-map-marker {
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(229, 32, 37, .82);
    color: #fff;
    font: 700 10px/1 "Space Grotesk", sans-serif;
    box-shadow: 0 5px 14px rgba(229, 32, 37, .3);
}

body.page-relatorios .report-map-marker span {
    pointer-events: none;
}

body.page-relatorios .report-modal-table-wrap {
    overflow-x: auto;
    border: 1px solid #e2e2e5;
    border-radius: 14px;
}

body.page-relatorios .game-report-calendars {
    display: grid;
    gap: 24px;
}

body.page-relatorios .game-report-calendars[hidden] {
    display: none;
}

body.page-relatorios .game-report-calendar {
    min-width: 760px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid #e2e2e5;
    border-radius: 18px;
    background: #fff;
}

body.page-relatorios .game-report-calendar-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

body.page-relatorios .game-report-calendar-heading h3 {
    color: #202024;
    font-size: 18px;
    text-transform: capitalize;
}

body.page-relatorios .game-report-calendar-heading span {
    color: var(--metro-muted);
    font-size: 11px;
}

body.page-relatorios .game-report-calendar-page {
    display: contents;
}

body.page-relatorios .game-report-calendar-page.is-continuation>.game-report-calendar-heading,
body.page-relatorios .game-report-calendar-page.is-continuation>.game-report-calendar-weekdays {
    display: none;
}

body.page-relatorios .game-report-calendar-page.is-continuation>.game-report-calendar-grid {
    margin-top: 8px;
}

body.page-relatorios .game-report-calendar-page.is-pdf-capture {
    display: block;
    width: 100%;
    padding: 18px;
    border: 1px solid #e2e2e5;
    border-radius: 18px;
    background: #fff;
}

body.page-relatorios .game-report-calendar-page.is-pdf-capture>.game-report-calendar-heading {
    display: flex;
}

body.page-relatorios .game-report-calendar-page.is-pdf-capture>.game-report-calendar-weekdays {
    display: grid;
}

body.page-relatorios .game-report-calendar-page.is-pdf-capture>.game-report-calendar-grid {
    margin-top: 0;
}

body.page-relatorios .report-modal-dialog.is-pdf-capture {
    max-height: none;
    overflow: visible;
}

body.page-relatorios .report-modal-dialog.is-pdf-capture .report-modal-actions,
body.page-relatorios .report-modal-dialog.is-pdf-capture #gameModalCloseIcon {
    display: none !important;
}

body.page-relatorios .game-report-calendar-weekdays,
body.page-relatorios .game-report-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

body.page-relatorios .game-report-calendar-weekdays {
    margin-bottom: 8px;
}

body.page-relatorios .game-report-calendar-weekdays span {
    color: #77777c;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

body.page-relatorios .game-report-calendar-spacer {
    min-width: 0;
}

body.page-relatorios .game-report-calendar-day {
    position: relative;
    display: flex;
    min-width: 0;
    height: 213px;
    flex-direction: column;
    gap: 9px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid #e1e1e4;
    border-radius: 15px;
    background: #fafafa;
}

body.page-relatorios .game-report-calendar-day.has-games {
    border-color: rgba(224, 32, 32, .28);
    background: #fff;
}

body.page-relatorios .game-report-calendar-number {
    color: var(--metro-red);
    font-size: 15px;
}

body.page-relatorios .game-report-calendar-events {
    display: grid;
    gap: 6px;
}

body.page-relatorios .game-report-calendar-event {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 3px;
    padding: 7px 6px 7px 10px;
    border: 1px solid #e7e7e9;
    border-radius: 9px;
    background: #fff;
}

body.page-relatorios .game-report-calendar-event::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 4px;
    width: 3px;
    border-radius: 999px;
    background: var(--metro-red);
}

body.page-relatorios .game-report-calendar-event b {
    color: var(--metro-red);
    font-size: 8px;
}

body.page-relatorios .game-report-calendar-event span {
    overflow: hidden;
    color: #29292d;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
}

body.page-relatorios .game-report-calendar-event em {
    overflow: hidden;
    color: #4f4f55;
    font-size: 7px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

body.page-relatorios .game-report-calendar-event small {
    overflow: hidden;
    color: var(--metro-muted);
    font-size: 7px;
    line-height: 1.2;
    text-overflow: ellipsis;
}

body.page-relatorios .game-report-calendar-empty {
    margin: auto 0;
    color: #aaa;
    font-size: 9px;
}

body.page-relatorios .game-report-calendar-more {
    color: var(--metro-red);
    font-size: 8px;
    font-weight: 700;
    text-align: center;
}

body.page-relatorios .game-report-calendar-day.today {
    border: 2px solid #f2c94c;
    background: #fff9e6;
    box-shadow: 0 8px 22px rgba(242, 201, 76, .25);
}

body.page-relatorios .game-report-calendar-day.today::after {
    content: "HOJE";
    position: absolute;
    top: 9px;
    right: 8px;
    padding: 3px 5px;
    border-radius: 999px;
    background: #f2c94c;
    color: #fff;
    font-size: 7px;
    font-weight: 700;
}

@media (max-width: 900px) {
    body.page-relatorios .game-report-calendars {
        overflow-x: auto;
    }
}

body.page-relatorios .report-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

body.page-relatorios .report-modal-table th,
body.page-relatorios .report-modal-table td {
    padding: 10px;
    border-bottom: 1px solid #ececef;
    text-align: left;
    white-space: nowrap;
}

body.page-relatorios .report-modal-table th {
    background: #f7f7f8;
    color: #66666b;
    font-size: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.page-relatorios .report-modal-table tr:last-child td {
    border-bottom: 0;
}

body.page-relatorios .report-result {
    color: #55555a;
    font-weight: 700;
}

body.page-relatorios .report-result-agendado {
    color: #2767b2;
}

body.page-relatorios .report-result-aprovado {
    color: #18864b;
}

body.page-relatorios .report-result-reprovado {
    color: var(--metro-red);
}

body.page-relatorios .report-result-nao-compareceu {
    color: #8a6a18;
}

body.page-relatorios .report-modal-empty {
    margin: 0;
    padding: 28px;
    color: var(--metro-muted);
    text-align: center;
}

body.page-relatorios .report-document-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e5e7;
    color: var(--metro-muted);
    font-size: 8px;
}

body.page-relatorios .report-document-footer>div {
    display: grid;
    gap: 2px;
}

body.page-relatorios .report-document-footer strong {
    color: #303035;
}

body.page-relatorios .report-modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

body.page-relatorios .report-modal-actions button {
    min-height: 40px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--metro-red);
    color: #fff;
    font: 700 11px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
}

body.page-relatorios .report-modal-actions .secondary {
    border: 1px solid #d8d8dc;
    background: #fff;
    color: #55555a;
}

@media (max-width: 980px) {
    body.page-relatorios .page {
        grid-template-columns: 1fr;
    }

    body.page-relatorios .report-modal-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.page-relatorios .athlete-report-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.page-relatorios .athlete-report-distributions {
        grid-template-columns: 1fr;
    }

    body.page-relatorios .report-modal-header {
        grid-template-columns: 1fr auto;
    }

    body.page-relatorios .report-executive-summary {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    body.page-relatorios .report-distributions {
        grid-template-columns: 1fr;
    }

    body.page-relatorios .report-distribution-category {
        grid-column: auto;
    }

    body.page-relatorios .report-distribution-dates {
        grid-column: auto;
    }

    body.page-relatorios .report-city-map-card {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    body.page-relatorios {
        padding: 20px 12px;
    }

    body.page-relatorios .reports-card {
        padding: 18px;
    }

    body.page-relatorios .reports-heading,
    body.page-relatorios .report-workspace-header {
        align-items: stretch;
        flex-direction: column;
    }

    body.page-relatorios .reports-menu,
    body.page-relatorios .report-filters,
    body.page-relatorios .report-summary-grid {
        grid-template-columns: 1fr;
    }

    body.page-relatorios .evaluation-filters,
    body.page-relatorios .athlete-filters {
        grid-template-columns: 1fr;
    }

    body.page-relatorios .report-period-fields {
        grid-template-columns: 1fr;
    }

    body.page-relatorios .report-modal {
        padding: 10px;
    }

    body.page-relatorios .report-modal-dialog {
        max-height: calc(100vh - 20px);
        padding: 16px;
    }

    body.page-relatorios .report-modal-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-relatorios .report-distribution-card>header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media print {
    body.page-relatorios {
        padding: 0;
    }

    body.page-relatorios #profile-card-container,
    body.page-relatorios .page-breadcrumb,
    body.page-relatorios .reports-heading,
    body.page-relatorios .reports-menu,
    body.page-relatorios .report-workspace-header,
    body.page-relatorios .report-filters,
    body.page-relatorios .report-actions,
    body.page-relatorios #footer-container {
        display: none !important;
    }

    body.page-relatorios .report-modal {
        position: static;
        display: block !important;
        padding: 0;
        background: #fff;
    }

    body.page-relatorios.report-modal-open .page {
        display: none !important;
    }

    body.page-relatorios .report-modal:not(.is-open) {
        display: none !important;
    }

    body.page-relatorios .report-modal-dialog {
        width: 100%;
        max-height: none;
        overflow: visible;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    body.page-relatorios .report-modal-header>button,
    body.page-relatorios .report-modal-actions {
        display: none !important;
    }

    body.page-relatorios .page,
    body.page-relatorios .reports-card {
        display: block;
        width: 100%;
        max-width: none;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    body.page-relatorios .report-preview {
        margin: 0;
        border: 0;
    }

    body.page-relatorios #gameReportModal .report-modal-header,
    body.page-relatorios #gameReportModal .report-modal-metrics,
    body.page-relatorios #gameReportModal .athlete-report-distributions,
    body.page-relatorios #gameReportModal .game-city-distribution,
    body.page-relatorios #gameReportModal .report-city-map-card,
    body.page-relatorios #gameReportModal .report-city-heatmap {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.page-relatorios #gameReportModal .game-city-distribution {
        margin-bottom: 10px;
    }

    body.page-relatorios #gameReportModal .report-city-map-card {
        padding: 10px;
    }

    body.page-relatorios #gameReportModal .report-city-map-card>header h3 {
        margin-bottom: 6px;
    }

    body.page-relatorios #gameReportModal .report-city-heatmap {
        height: 185px;
    }

    body.page-relatorios #gameReportModal #gameListLayout,
    body.page-relatorios #gameReportModal #gameCalendarLayout {
        break-before: page;
        page-break-before: always;
    }

    body.page-relatorios #gameReportModal .game-report-calendar {
        min-width: 0;
        padding: 0;
        overflow: visible;
        border: 0;
    }

    body.page-relatorios #gameReportModal .game-report-calendar-page {
        display: block;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.page-relatorios #gameReportModal .game-report-calendar-page+.game-report-calendar-page {
        break-before: page;
        page-break-before: always;
    }

    body.page-relatorios #gameReportModal .game-report-calendar-page.is-continuation>.game-report-calendar-heading {
        display: flex;
    }

    body.page-relatorios #gameReportModal .game-report-calendar-page.is-continuation>.game-report-calendar-weekdays {
        display: grid;
    }

    body.page-relatorios #gameReportModal .game-report-calendar-page.is-continuation>.game-report-calendar-grid {
        margin-top: 0;
    }

    body.page-relatorios #gameReportModal .game-report-calendar-day {
        height: 180px;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.page-relatorios #gameReportModal .report-document-footer {
        display: none !important;
    }
}

@media (max-width: 980px) {
    body.page-programacao .page {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    body.page-programacao {
        padding: 20px 12px;
    }

    body.page-programacao .programacao-card {
        padding: 18px;
        border-radius: 22px;
    }

    body.page-programacao .programacao-heading {
        align-items: stretch;
        flex-direction: column;
    }

    body.page-programacao .programacao-calendar {
        gap: 4px;
    }

    body.page-programacao .programacao-calendar button {
        min-height: 52px;
        padding: 6px;
    }

    body.page-programacao .programacao-calendar button span {
        display: none;
    }

    body.page-programacao .programacao-form-grid {
        grid-template-columns: 1fr;
    }

    body.page-programacao .programacao-field-wide {
        grid-column: auto;
    }
}

/* Padrão compartilhado para botões que fecham modais, painéis e avisos. */
body.page-agenda #agendaModalClose,
body.page-crias .close,
body.page-institucional .school-unit-modal-close,
body.page-loja .modal-close,
body.page-cadastros .cadastro-modal-close,
body.page-training-planner .planner-card .modal-close,
body.page-relatorios .report-modal-header>button,
body.page-index .cookie-header button {
    display: grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid var(--metro-red, #e02020);
    border-radius: 50%;
    background: var(--metro-red, #e02020);
    color: #fff;
    font: 400 23px/1 sans-serif;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

body.page-agenda #agendaModalClose:hover,
body.page-crias .close:hover,
body.page-institucional .school-unit-modal-close:hover,
body.page-loja .modal-close:hover,
body.page-cadastros .cadastro-modal-close:hover,
body.page-training-planner .planner-card .modal-close:hover,
body.page-relatorios .report-modal-header>button:hover,
body.page-index .cookie-header button:hover {
    border-color: #b21f24;
    background: #b21f24;
    color: #fff;
    opacity: 1;
    transform: scale(1.04);
}

/* Formulários — padrão visual compartilhado da inscrição de atletas. */
:root {
    --metro-form-control-height: 40px;
    --metro-form-control-padding-x: 14px;
    --metro-form-control-border: #d5d5d5;
    --metro-form-control-radius: 999px;
    --metro-form-control-font-size: 14px;
    --metro-form-label-size: 13px;
    --metro-form-field-gap: 6px;
}

/*
 * Cabeçalhos de formulários: reserva visual equivalente a três linhas.
 * Assim, cards e conteúdos começam sempre no mesmo eixo mesmo quando
 * a descrição de uma página é mais curta.
 */
body.page-form .form-subtitle,
body.page-pos-treino .form-subtitle,
body.page-pre-treino .form-subtitle,
body.page-pre-sumula .form-subtitle,
body.page-scout .form-subtitle,
body.page-prontuario .form-subtitle,
body.page-registrar-jogos .form-subtitle,
body.page-solicitacao .form-subtitle,
body.page-cadastros .form-subtitle {
    min-height: 4.5em;
    margin-bottom: 0;
    line-height: 1.5;
}

body.page-form .field-group,
body.page-pos-treino .field-group,
body.page-pre-treino .field-group,
body.page-pre-sumula .field-group,
body.page-prontuario .field-group,
body.page-registrar-jogos .field-group,
body.page-solicitacao .field-group,
body.page-cadastros .cadastro-form-field,
body.page-programacao .programacao-form-grid label {
    gap: var(--metro-form-field-gap);
}

body.page-form .field-label,
body.page-pos-treino .field-label,
body.page-pre-treino .field-label,
body.page-pre-sumula .field-label,
body.page-prontuario .field-label,
body.page-registrar-jogos .field-label,
body.page-solicitacao .field-label,
body.page-cadastros .cadastro-form-field>span,
body.page-programacao .programacao-form-grid label {
    color: var(--metro-text);
    font-family: "Space Grotesk", sans-serif;
    font-size: var(--metro-form-label-size);
    font-weight: 500;
}

body.page-form .field-group>input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.page-form .field-group>select,
body.page-pos-treino .field-group>input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.page-pos-treino .field-group>select,
body.page-pre-treino .field-group>input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.page-pre-treino .field-group>select,
body.page-pre-sumula .field-group>input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.page-pre-sumula .field-group>select,
body.page-prontuario .field-group>input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.page-prontuario .field-group>select,
body.page-registrar-jogos .field-group>input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.page-registrar-jogos .field-group>select,
body.page-solicitacao .field-group>input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.page-solicitacao .field-group>select,
body.page-cadastros .cadastro-form-field>input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.page-cadastros .cadastro-form-field>select,
body.page-programacao .programacao-form-grid input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.page-programacao .programacao-form-grid select {
    box-sizing: border-box;
    width: 100%;
    height: var(--metro-form-control-height);
    min-height: var(--metro-form-control-height);
    padding: 6px var(--metro-form-control-padding-x);
    border: 1px solid var(--metro-form-control-border);
    border-radius: var(--metro-form-control-radius);
    outline: none;
    background: #fff;
    color: var(--metro-text);
    font-family: "Space Grotesk", sans-serif;
    font-size: var(--metro-form-control-font-size);
    font-weight: 400;
    line-height: 1.2;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

body.page-form .field-group>textarea,
body.page-pos-treino .field-group>textarea,
body.page-pre-treino .field-group>textarea,
body.page-pre-sumula .field-group>textarea,
body.page-prontuario .field-group>textarea,
body.page-registrar-jogos .field-group>textarea,
body.page-solicitacao .field-group>textarea,
body.page-cadastros .cadastro-form-field>textarea,
body.page-programacao .programacao-form-grid textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 92px;
    padding: 10px var(--metro-form-control-padding-x);
    border: 1px solid var(--metro-form-control-border);
    border-radius: 18px;
    outline: none;
    background: #fff;
    color: var(--metro-text);
    font-family: "Space Grotesk", sans-serif;
    font-size: var(--metro-form-control-font-size);
    font-weight: 400;
    line-height: 1.4;
    resize: vertical;
}

body.page-form .field-group>input::placeholder,
body.page-form .field-group>textarea::placeholder,
body.page-pos-treino .field-group>input::placeholder,
body.page-pos-treino .field-group>textarea::placeholder,
body.page-pre-treino .field-group>input::placeholder,
body.page-pre-treino .field-group>textarea::placeholder,
body.page-pre-sumula .field-group>input::placeholder,
body.page-pre-sumula .field-group>textarea::placeholder,
body.page-prontuario .field-group>input::placeholder,
body.page-prontuario .field-group>textarea::placeholder,
body.page-registrar-jogos .field-group>input::placeholder,
body.page-registrar-jogos .field-group>textarea::placeholder,
body.page-solicitacao .field-group>input::placeholder,
body.page-solicitacao .field-group>textarea::placeholder,
body.page-cadastros .cadastro-form-field>input::placeholder,
body.page-cadastros .cadastro-form-field>textarea::placeholder,
body.page-programacao .programacao-form-grid input::placeholder,
body.page-programacao .programacao-form-grid textarea::placeholder {
    color: #999;
    opacity: 1;
}

body.page-form .field-group>input:focus,
body.page-form .field-group>select:focus,
body.page-form .field-group>textarea:focus,
body.page-pos-treino .field-group>input:focus,
body.page-pos-treino .field-group>select:focus,
body.page-pos-treino .field-group>textarea:focus,
body.page-pre-treino .field-group>input:focus,
body.page-pre-treino .field-group>select:focus,
body.page-pre-treino .field-group>textarea:focus,
body.page-pre-sumula .field-group>input:focus,
body.page-pre-sumula .field-group>select:focus,
body.page-pre-sumula .field-group>textarea:focus,
body.page-prontuario .field-group>input:focus,
body.page-prontuario .field-group>select:focus,
body.page-prontuario .field-group>textarea:focus,
body.page-registrar-jogos .field-group>input:focus,
body.page-registrar-jogos .field-group>select:focus,
body.page-registrar-jogos .field-group>textarea:focus,
body.page-solicitacao .field-group>input:focus,
body.page-solicitacao .field-group>select:focus,
body.page-solicitacao .field-group>textarea:focus,
body.page-cadastros .cadastro-form-field>input:focus,
body.page-cadastros .cadastro-form-field>select:focus,
body.page-cadastros .cadastro-form-field>textarea:focus,
body.page-programacao .programacao-form-grid input:focus,
body.page-programacao .programacao-form-grid select:focus,
body.page-programacao .programacao-form-grid textarea:focus {
    border-color: var(--metro-red);
    box-shadow: 0 0 0 1px rgba(224, 32, 32, .08);
    background: #fff;
}

/* Ajustes de largura, alinhamento e ritmo vertical dos formulários. */
body.page-training-planner .activity-editor-card {
    width: min(calc(100% - 48px), 920px);
    margin: 20px auto;
}

body.page-training-planner .activity-editor-card>.panel-header {
    align-items: center;
    padding: 18px 22px 10px;
    text-align: center;
}

body.page-training-planner .activity-editor-card>.panel-body {
    padding: 10px 22px 24px;
}

body.page-training-planner .activity-editor-card label,
body.page-training-planner .activity-editor-card input:not([type="range"]),
body.page-training-planner .activity-editor-card select {
    text-align: center;
    text-align-last: center;
}

body.page-training-planner .activity-editor-card label {
    margin-top: 16px;
    margin-bottom: 7px;
}

body.page-training-planner .activity-editor-card textarea {
    padding: 12px 16px;
    line-height: 1.5;
}

body.page-training-planner .activity-editor-card .estimated-load-card {
    margin: 18px 0;
}

body.page-pre-treino .form-wrapper,
body.page-pos-treino .form-wrapper,
body.page-prontuario .form-wrapper {
    justify-content: center;
    width: 100%;
}

body.page-pre-treino .form-card,
body.page-pos-treino .form-card,
body.page-prontuario .form-card {
    width: min(100%, 640px);
    margin-inline: auto;
}

body.page-pre-treino .question-image,
body.page-pos-treino .question-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 190px;
    margin: 6px auto 4px;
    object-fit: contain;
    object-position: center;
}

body.page-pre-treino img.question-image[src*="/humor.png"],
body.page-pos-treino img.question-image[src*="/humor.png"],
body.page-pos-treino img.question-image[src*="/intensidade.png"] {
    height: auto;
    max-height: 285px;
}

body.page-pre-treino img.question-image[src*="/dor.png"],
body.page-pos-treino img.question-image[src*="/dor.png"] {
    height: auto;
    max-height: 570px;
}

body.page-pre-treino .scale-row,
body.page-pos-treino .scale-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 14px;
    width: min(100%, 560px);
    margin: 6px auto 2px;
    padding-bottom: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

body.page-pre-treino .scale-row label,
body.page-pos-treino .scale-row label {
    display: flex;
    flex: 1 0 max-content;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
    line-height: 1.35;
    text-align: center;
}

body.page-pre-treino .scale-row input,
body.page-pos-treino .scale-row input {
    width: 18px;
    height: 18px;
    margin: 0;
}

body.page-pre-treino .scale-row span,
body.page-pos-treino .scale-row span {
    display: block;
    text-align: center;
    white-space: nowrap;
}

body.page-pre-treino .scale-row>.label-extremo,
body.page-pos-treino .scale-row>.label-extremo {
    flex: 0 0 auto;
    padding-top: 1px;
}

body.page-pre-treino .body-status-row label,
body.page-pos-treino .body-status-row label {
    font-size: 10px;
}

body.page-pre-treino .body-status-row label span,
body.page-pos-treino .body-status-row label span {
    font-size: inherit;
}

body.page-pre-treino .pain-details[hidden],
body.page-pos-treino .pain-details[hidden] {
    display: none !important;
}

body.page-pre-treino .pain-details>.field-label,
body.page-pos-treino .pain-details>.field-label {
    text-align: center;
}

body.page-prontuario .form-card {
    gap: 16px;
}

body.page-prontuario .bloco-prontuario {
    padding-top: 4px;
}

body.page-prontuario .bloco-prontuario>.field-group {
    margin-bottom: 16px;
}

body.page-prontuario .field-label,
body.page-prontuario .section-label,
body.page-prontuario .form-title,
body.page-prontuario .form-subtitle {
    text-align: left;
}

body.page-prontuario .field-group>input:not([type="file"]),
body.page-prontuario .field-group>select {
    text-align: left;
    text-align-last: left;
}

body.page-prontuario .u-inline-33 {
    gap: 14px 20px;
    margin-top: 4px;
}

body.page-prontuario .u-inline-33 label {
    display: grid;
    grid-template-rows: 18px auto;
    place-items: center;
    gap: 6px;
    line-height: 1.3;
    text-align: center;
}

body.page-prontuario .u-inline-33 input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

body.page-prontuario #file-name,
body.page-prontuario .contador-text {
    display: block;
    margin-left: 0;
    text-align: center;
}

body.page-prontuario .custom-file-upload {
    margin-inline: auto;
}

body.page-prontuario .prontuario-multi-field {
    display: grid;
    gap: 8px;
}

body.page-prontuario .prontuario-multi-list {
    display: grid;
    gap: 8px;
}

body.page-prontuario .prontuario-multi-list:empty {
    display: none;
}

body.page-prontuario .prontuario-multi-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px 8px 14px;
    border: 1px solid #e2e2e5;
    border-radius: 11px;
    background: #f1f1f3;
    color: #303035;
    font-size: 12px;
    font-weight: 700;
}

body.page-prontuario .prontuario-multi-item button {
    width: auto;
    min-height: 0;
    padding: 7px 11px;
    border: 0;
    border-radius: 8px;
    background: var(--metro-red);
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

/* Prontuário em dois cards: identificação fixa + conteúdo específico. */
body.page-prontuario .form-card {
    gap: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.page-prontuario .prontuario-base-card,
body.page-prontuario .bloco-prontuario {
    width: 100%;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
}

body.page-prontuario .prontuario-base-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.page-prontuario .bloco-prontuario {
    margin: 0;
}

body.page-prontuario .bloco-prontuario>.section-label:first-child {
    margin-top: 0;
    margin-bottom: 18px;
}

body.page-prontuario #grupo-profissional {
    gap: var(--metro-form-field-gap);
}

body.page-prontuario #grupo-profissional .field-label {
    margin: 0;
}

body.page-prontuario #grupo-profissional select {
    box-sizing: border-box;
    width: 100%;
    height: var(--metro-form-control-height);
    min-height: var(--metro-form-control-height);
    padding: 6px 44px 6px var(--metro-form-control-padding-x);
    border: 1px solid var(--metro-form-control-border);
    border-radius: var(--metro-form-control-radius);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {

    body.page-pre-treino .form-wrapper,
    body.page-pos-treino .form-wrapper,
    body.page-prontuario .form-wrapper {
        padding-inline: 10px;
    }

    body.page-pre-treino .form-card,
    body.page-pos-treino .form-card,
    body.page-prontuario .form-card {
        width: min(100%, 620px);
    }
}

@media (max-width: 560px) {
    body.page-training-planner .activity-editor-card {
        width: calc(100% - 28px);
        margin-block: 14px;
    }

    body.page-training-planner .activity-editor-card>.panel-header {
        padding-inline: 16px;
    }

    body.page-training-planner .activity-editor-card>.panel-body {
        padding: 8px 16px 20px;
    }

    body.page-pre-treino,
    body.page-pos-treino,
    body.page-prontuario {
        padding-inline: 8px;
    }

    body.page-pre-treino .form-wrapper,
    body.page-pos-treino .form-wrapper,
    body.page-prontuario .form-wrapper {
        padding-inline: 6px;
    }

    body.page-pre-treino .form-card,
    body.page-pos-treino .form-card,
    body.page-prontuario .form-card {
        padding: 0;
    }

    body.page-pre-treino .question-image,
    body.page-pos-treino .question-image {
        height: auto;
        max-height: 170px;
    }

    body.page-pre-treino img.question-image[src*="/humor.png"],
    body.page-pos-treino img.question-image[src*="/humor.png"],
    body.page-pos-treino img.question-image[src*="/intensidade.png"] {
        height: auto;
        max-height: 255px;
    }

    body.page-pre-treino img.question-image[src*="/dor.png"],
    body.page-pos-treino img.question-image[src*="/dor.png"] {
        height: auto;
        max-height: 510px;
    }

    body.page-prontuario .prontuario-base-card,
    body.page-prontuario .bloco-prontuario {
        padding: 20px 18px;
        border-radius: 24px;
    }

    body.page-prontuario .u-inline-33 {
        grid-template-columns: 1fr 1fr;
        gap: 16px 12px;
    }
}

/* Modal de Cadastros: densidade vertical equivalente aos controles de input. */
body.page-cadastros .cadastro-form {
    row-gap: 2px;
}

body.page-cadastros .cadastro-form-field {
    gap: 4px;
}

body.page-cadastros .cadastro-form-field>textarea {
    min-height: 64px;
}