.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}


    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


/* ===== TEAM APPLE STYLE FOR ELITE FOOTBALL ADMIN ===== */

/* Root Variables */


.team-session-tone-0 {
    --session-accent: #10c8ea;
    --session-flow-x: 16%;
    --session-light: .34;
}

.team-session-tone-1 {
    --session-accent: #8af21f;
    --session-flow-x: 25.1%;
    --session-light: .317;
}

.team-session-tone-2 {
    --session-accent: #66d2ff;
    --session-flow-x: 34.3%;
    --session-light: .294;
}

.team-session-tone-3 {
    --session-accent: #ffd166;
    --session-flow-x: 43.4%;
    --session-light: .271;
}

.team-session-tone-4 {
    --session-accent: #7bdff2;
    --session-flow-x: 52.6%;
    --session-light: .249;
}

.team-session-tone-5 {
    --session-accent: #54d692;
    --session-flow-x: 61.7%;
    --session-light: .226;
}

.team-session-tone-6 {
    --session-accent: #f4978e;
    --session-flow-x: 70.9%;
    --session-light: .203;
}

.team-session-tone-7 {
    --session-accent: #b8f2e6;
    --session-flow-x: 80%;
    --session-light: .18;
}

.team-leader-tone-0 {
    --leader-accent: #10c8ea;
    --leader-flow-x: 18%;
}

.team-leader-tone-1 {
    --leader-accent: #8af21f;
    --leader-flow-x: 26.6%;
}

.team-leader-tone-2 {
    --leader-accent: #66d2ff;
    --leader-flow-x: 35.1%;
}

.team-leader-tone-3 {
    --leader-accent: #ffd166;
    --leader-flow-x: 43.7%;
}

.team-leader-tone-4 {
    --leader-accent: #7bdff2;
    --leader-flow-x: 52.3%;
}

.team-leader-tone-5 {
    --leader-accent: #54d692;
    --leader-flow-x: 60.9%;
}

.team-leader-tone-6 {
    --leader-accent: #f4978e;
    --leader-flow-x: 69.4%;
}

.team-leader-tone-7 {
    --leader-accent: #b8f2e6;
    --leader-flow-x: 78%;
}

.field-tone-0 {
    --field-accent: #16dbff;
}

.field-tone-1 {
    --field-accent: #86ef2f;
}

.field-tone-2 {
    --field-accent: #f5c542;
}

.field-tone-3 {
    --field-accent: #fb7185;
}

.field-tone-4 {
    --field-accent: #a78bfa;
}

.field-tone-5 {
    --field-accent: #2dd4bf;
}

.player-tone-0,
.profile-tone-0 {
    --player-accent: #77eeff;
    --player-flow-x: 15%;
    --player-light: .34;
    --profile-accent: #77eeff;
    --profile-flow-x: 16%;
}

.player-tone-1,
.profile-tone-1 {
    --player-accent: #74f33e;
    --player-flow-x: 28%;
    --player-light: .305;
    --profile-accent: #74f33e;
    --profile-flow-x: 29%;
}

.player-tone-2,
.profile-tone-2 {
    --player-accent: #f4d35e;
    --player-flow-x: 41%;
    --player-light: .27;
    --profile-accent: #f4d35e;
    --profile-flow-x: 42%;
}

.player-tone-3,
.profile-tone-3 {
    --player-accent: #ff7a59;
    --player-flow-x: 54%;
    --player-light: .235;
    --profile-accent: #ff7a59;
    --profile-flow-x: 55%;
}

.player-tone-4,
.profile-tone-4 {
    --player-accent: #b692ff;
    --player-flow-x: 67%;
    --player-light: .2;
    --profile-accent: #b692ff;
    --profile-flow-x: 68%;
}

.player-tone-5,
.profile-tone-5 {
    --player-accent: #4dd7a8;
    --player-flow-x: 80%;
    --player-light: .2;
    --profile-accent: #4dd7a8;
    --profile-flow-x: 81%;
}

.session-tone-0 {
    --session-accent: #77eeff;
    --session-flow-x: 16%;
    --session-light: .34;
    --session-depth: .12;
}

.session-tone-1 {
    --session-accent: #43d8ff;
    --session-flow-x: 32%;
    --session-light: .3;
    --session-depth: .19;
}

.session-tone-2 {
    --session-accent: #1bb8ea;
    --session-flow-x: 48%;
    --session-light: .26;
    --session-depth: .26;
}

.session-tone-3 {
    --session-accent: #1085c1;
    --session-flow-x: 64%;
    --session-light: .22;
    --session-depth: .33;
}

.session-tone-4 {
    --session-accent: #0a5a8f;
    --session-flow-x: 80%;
    --session-light: .18;
    --session-depth: .4;
}

html[data-pitch-style="uniform"] {
    --team-pitch-background:
        radial-gradient(circle at 50% 50%, rgba(55, 123, 64, .16), transparent 48%),
        linear-gradient(135deg, #082016, #0d2e1a 52%, #071910);
    --team-pitch-svg-fill: rgba(8, 32, 22, .16);
}

html[data-pitch-style="black"] {
    --team-pitch-background:
        radial-gradient(circle at 58% 22%, rgba(120, 169, 184, .075), transparent 36%),
        linear-gradient(135deg, #050607, #111315 52%, #020303);
    --team-pitch-svg-fill: rgba(3, 4, 5, .22);
}

html[data-pitch-style="custom"] {
    --team-pitch-background:
        repeating-linear-gradient(
            90deg,
            color-mix(in srgb, var(--team-pitch-custom-color) 74%, #000 26%) 0 10%,
            color-mix(in srgb, var(--team-pitch-custom-color) 58%, #000 42%) 10% 20%),
        radial-gradient(circle at 48% 24%, color-mix(in srgb, var(--team-pitch-custom-color) 35%, transparent), transparent 42%),
        color-mix(in srgb, var(--team-pitch-custom-color) 42%, #000 58%);
    --team-pitch-svg-fill: color-mix(in srgb, var(--team-pitch-custom-color) 18%, transparent);
}

/* Global Body Styling */
body {
    background-color: var(--team-body-background) !important;
    background: var(--team-body-background);
    font-family: var(--team-font-family);
    color: #FFFFFF;
    overflow: hidden;
}

/* Shared utilities */
.u-pre-wrap {
    white-space: pre-wrap;
}

.u-text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-clickable {
    cursor: pointer;
}

.u-flex-wrap {
    flex-wrap: wrap;
}

.u-min-h-60 {
    min-height: 60vh;
}

.u-icon-xl {
    font-size: 5rem !important;
}

.u-icon-danger-lg {
    font-size: 3rem !important;
}

.team-dialog-wide {
    width: 900px;
    max-width: 95vw;
}

.team-dialog-wide .mud-picker-inline .mud-input-adornment-end {
    align-self: center;
    margin: 0 4px 0 2px;
}

.team-dialog-wide .mud-picker-inline .mud-input-adornment-end .mud-icon-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 6px !important;
}

.team-panel-outline {
    border: 1px solid var(--mud-palette-lines-default);
}


.team-centered-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    text-align: center;
}

.team-metric-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 6px;
    text-align: center;
}

.settings-form-card {
    padding: 10px 20px;
}

.forgot-password-dialog {
    min-height: 300px;
    padding: 20px;
}

.forgot-password-step-icon {
    color: #007aff;
    font-size: 48px !important;
    margin-bottom: 16px;
}

.forgot-password-copy {
    color: #6b7280;
}

.forgot-password-field {
    margin-bottom: 24px;
}

.forgot-password-otp-field .mud-input-root {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 8px;
    text-align: center;
}

.forgot-password-primary-action {
    height: 48px;
}

.forgot-password-primary-action-spaced {
    margin-bottom: 16px;
}

.forgot-password-progress {
    margin-right: 12px;
}

.forgot-password-button-icon {
    margin-right: 8px;
}

.chatbot-card-header {
    flex-shrink: 0;
    min-height: 90px;
    padding: 20px 24px;
}

.chatbot-card-title-stack {
    display: flex;
    min-height: 50px;
    flex-direction: column;
    justify-content: center;
}

.chatbot-card-title {
    line-height: 1.3;
    margin-bottom: 8px;
}

.chatbot-card-subtitle {
    line-height: 1.2;
}

.chat-session-title-cell {
    overflow: hidden;
}

.chat-session-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatbot-waiting-message {
    max-width: 720px;
    margin-right: auto;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 18px;
    background-color: #f7f7f8;
}

.chat-message-bubble {
    max-width: 720px;
    padding: 12px;
    border-radius: 18px;
}

.chat-message-bubble.is-user {
    margin-left: auto;
    border: 1px solid rgba(21, 94, 239, 0.25);
    background: linear-gradient(135deg, #155eef, #5378ff);
    color: #fff;
}

.chat-message-bubble.is-assistant {
    margin-right: auto;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background-color: #f7f7f8;
}

.chat-agent-page .chat-message-bubble {
    max-width: min(760px, 82%);
    border-radius: 8px;
}

.chat-agent-page .chat-message-bubble.is-user {
    border-color: color-mix(in srgb, var(--chat-accent) 38%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--chat-accent) 72%, #0f172a 28%), #172032);
}

.chat-agent-page .chat-message-bubble.is-assistant {
    border-color: var(--chat-border);
    background: rgba(7, 22, 27, .94);
    color: var(--chat-text);
}

.chat-agent-page .chat-message-bubble.is-assistant.is-streaming {
    border-color: color-mix(in srgb, var(--chat-accent) 52%, var(--chat-border) 48%);
    box-shadow: 0 18px 58px rgba(0, 0, 0, .24), inset 3px 0 0 var(--chat-accent);
}

.chat-stream-cursor {
    display: inline-block;
    width: 7px;
    height: 1.05em;
    margin-left: 3px;
    vertical-align: -0.16em;
    border-radius: 999px;
    background: var(--chat-accent);
    animation: chat-stream-cursor-pulse 1s steps(2, start) infinite;
}

@keyframes chat-stream-cursor-pulse {
    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: .16;
    }
}

.chat-input-stack {
    display: flex;
    width: 100%;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.chat-send-button {
    height: 60%;
}

.chat-send-button-grid {
    height: 90%;
    margin-top: 5%;
}


.team-google-map {
    height: var(--google-map-height);
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


.notes-card {
    height: 600px;
}

.notes-scroll {
    height: calc(100% - 80px);
    overflow-y: auto;
}

.player-delete-avatar {
    width: 60px !important;
    height: 60px !important;
}

.pitch-zones-card {
    height: var(--pitch-zones-height);
}

.pitch-zones-content {
    height: calc(100% - 140px);
    position: relative;
}

.pitch-zones-loading {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.pitch-zones-center-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}

.pitch-zones-actions {
    border-top: 1px solid #e0e0e0;
}

.pitch-zones-actions-inner {
    padding: 8px;
}

.zone-radar-sport-button {
    background-color: var(--zone-radar-color) !important;
    color: #fff !important;
}

.zone-radar-summary-card {
    min-height: 100px;
    border-left: 4px solid var(--zone-radar-color);
}

.report-inline-center {
    display: flex;
    align-items: center;
}

.analytics-filter-select {
    min-width: 220px;
}

.session-vector-line {
    cursor: pointer;
    pointer-events: stroke;
}

.session-vector-point {
    cursor: pointer;
}

/* Layout Components */


@supports (height: 100dvh) {
    .team-layout {
        height: 100dvh;
        min-height: 100dvh;
    }
}


@supports (height: 100dvh) {
    .team-layout .mud-drawer {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}


/* Session list smart preview */
.session-list-modern-page {
    --session-page-bg: radial-gradient(circle at 76% 4%, rgba(96, 235, 62, 0.055), transparent 30%),
        radial-gradient(circle at 18% 8%, rgba(0, 215, 255, 0.11), transparent 30%),
        linear-gradient(180deg, #061217 0%, #061014 48%, #040b0e 100%);
    min-height: 100vh;
    padding: 20px 34px 42px;
    background: var(--session-page-bg);
    color: #f5fbff;
}

.session-list-modern-page .mud-input-control,
.session-list-modern-page .mud-input-control-input-container,
.session-list-modern-page .mud-input {
    margin: 0;
    min-height: 0;
}

.session-list-modern-page input.mud-input-root {
    color: #eaf8ff;
    font-size: 0.95rem;
}

.session-list-hero,
.session-list-search-row,
.session-strip-shell,
.session-smart-preview {
    width: 100%;
    max-width: 1760px;
    margin-inline: auto;
}

.session-list-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 10px;
}

.session-list-title-block span,
.session-preview-panel-head span,
.session-report-state,
.session-strip-card-top,
.session-strip-metrics em,
.session-report-metrics em {
    color: #91b7c7;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.session-list-title-block h1 {
    margin: 2px 0 0;
    font-size: clamp(2rem, 3.2vw, 3.35rem);
    line-height: 0.95;
    font-weight: 950;
}

.session-list-actions,
.session-list-card-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.session-list-pill,
.session-list-card-nav button,
.session-preview-panel-head button,
.session-list-filters button {
    border: 1px solid rgba(130, 184, 207, 0.34);
    border-radius: 999px;
    background: rgba(5, 17, 22, 0.66);
    color: #f2fbff;
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.session-list-pill:not(:disabled):hover,
.session-list-card-nav button:not(:disabled):hover,
.session-preview-panel-head button:not(:disabled):hover,
.session-list-filters button:hover {
    transform: translateY(-1px);
    border-color: rgba(26, 218, 255, 0.75);
    background: rgba(10, 33, 42, 0.88);
}

.session-list-pill:disabled,
.session-list-card-nav button:disabled,
.session-preview-panel-head button:disabled {
    opacity: 0.62;
}

.session-list-detail-pill:not(:disabled) {
    border-color: var(--team-selection-border);
    background: var(--team-selection-gradient);
    color: var(--team-selection-text);
    box-shadow: var(--team-selection-shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.session-list-detail-pill:not(:disabled):hover {
    border-color: var(--team-selection-border-strong);
    background: var(--team-selection-gradient-hover);
    color: var(--team-selection-text);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--team-selection-accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.session-list-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.session-list-search-input {
    border-radius: 999px;
    padding: 7px 16px;
    background: rgba(4, 18, 23, 0.72);
    border: 1px solid rgba(14, 82, 92, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.session-list-search-input .mud-input-adornment-start {
    margin-inline-end: 8px;
}

.session-list-card-nav {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.session-list-card-nav span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(130, 184, 207, 0.22);
    border-radius: 999px;
    background: rgba(4, 17, 22, 0.50);
    color: #a8cad8;
    font-weight: 900;
    white-space: nowrap;
}

.session-list-card-nav button {
    width: 34px;
    min-height: 34px;
    padding: 7px;
}

.session-list-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    max-width: 1760px;
    margin: 0 auto 16px;
}

.session-list-loader,
.session-list-empty {
    max-width: 1760px;
    margin: 18px auto;
    min-height: 164px;
    border: 1px solid rgba(112, 169, 190, 0.28);
    border-radius: 22px;
    background: rgba(5, 18, 23, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
}

.session-list-loader > span,
.session-preview-empty > span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(22, 219, 255, 0.18);
    border-top-color: #1bdcff;
    animation: sessionPreviewSpin 1s linear infinite;
}

.session-list-loader div,
.session-list-empty {
    flex-direction: column;
}

.session-list-loader strong,
.session-list-empty strong,
.session-preview-empty strong {
    font-size: 1rem;
    font-weight: 950;
}

.session-list-loader small,
.session-list-empty small,
.session-preview-empty small {
    color: #9ab8c5;
    font-weight: 700;
}

.session-strip-shell {
    position: relative;
    z-index: 4;
    margin-bottom: 14px;
    overflow: hidden;
}

.session-strip-shell.is-session-expanded {
    z-index: 80;
    overflow: visible;
}

.session-strip-shell::before,
.session-strip-shell::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    z-index: 2;
    pointer-events: none;
}

.session-strip-shell::before {
    left: 0;
    background: linear-gradient(90deg, rgba(4, 12, 15, 0.55), transparent);
}

.session-strip-shell::after {
    right: 0;
    background: linear-gradient(270deg, rgba(4, 12, 15, 0.95), transparent);
}

.session-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, calc((100% - 56px) / 5));
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding: 2px 0 8px;
    scrollbar-width: none;
}

.session-strip::-webkit-scrollbar {
    display: none;
}

.session-strip-card {
    position: relative;
    min-height: 196px;
    border: 1px solid color-mix(in srgb, var(--session-accent) 70%, rgba(255, 255, 255, 0.12));
    border-radius: 13px;
    padding: 18px 18px 15px;
    overflow: hidden;
    scroll-snap-align: start;
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--session-accent) 23%, transparent), transparent 44%),
        linear-gradient(135deg, color-mix(in srgb, var(--session-accent) 9%, rgba(7, 20, 25, 0.97)), rgba(4, 11, 14, 0.96));
    color: #f5fbff;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.session-strip-card:hover,
.session-strip-card.is-selected {
    transform: translateY(-2px);
    border-color: var(--session-accent);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--session-accent) 16%, transparent);
}

.session-strip-card-glow {
    position: absolute;
    inset: auto 18px -24px 18px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--session-accent) 22%, transparent);
    filter: blur(28px);
    pointer-events: none;
}

.session-strip-card-top,
.session-strip-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.session-type-badge {
    display: inline-flex;
    max-width: 60%;
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--session-accent) 22%, rgba(255, 255, 255, 0.04));
    color: #f5fbff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-strip-card > strong {
    display: block;
    margin-top: 18px;
    font-size: 1.05rem;
    line-height: 1.15;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-strip-card > small {
    display: block;
    margin-top: 5px;
    min-height: 20px;
    color: #95b8c7;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-strip-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.session-strip-metrics span {
    min-width: 0;
    border: 1px solid rgba(109, 161, 181, 0.20);
    border-radius: 9px;
    padding: 8px 9px;
    background: rgba(3, 12, 15, 0.55);
}

.session-strip-metrics em,
.session-strip-metrics b {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: normal;
}

.session-strip-metrics b {
    margin-top: 4px;
    color: #f8fdff;
    font-size: 0.9rem;
    font-weight: 950;
}

.session-strip-date {
    justify-content: flex-start;
    margin-top: 13px;
    color: #b6d7e5;
    font-size: 0.82rem;
    font-weight: 900;
}

.session-smart-preview {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr);
    gap: 16px;
    align-items: stretch;
}

.session-preview-map-panel,
.session-preview-report-panel {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(113, 169, 190, 0.28);
    border-radius: 22px;
    background:
        radial-gradient(circle at 72% 8%, rgba(26, 218, 255, 0.08), transparent 38%),
        rgba(5, 18, 23, 0.74);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.session-preview-map-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.session-preview-report-panel {
    padding: 18px;
}

.session-preview-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.session-preview-mode-tabs,
.session-preview-style-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px;
    border: 1px solid rgba(118, 179, 199, 0.20);
    border-radius: 999px;
    background: rgba(2, 12, 15, 0.52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.session-preview-mode-tabs button,
.session-preview-style-tabs button {
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #b9d5e0;
    font-size: .78rem;
    font-weight: 950;
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.session-preview-mode-tabs button:hover,
.session-preview-style-tabs button:hover {
    color: #f4fbff;
    border-color: rgba(128, 197, 219, .28);
    background: rgba(9, 31, 39, .70);
}

.session-preview-mode-tabs button.is-active,
.session-preview-style-tabs button.is-active,
.session-preview-mode-tabs button[aria-selected="true"],
.session-preview-mode-tabs button[aria-selected="True"],
.session-preview-style-tabs button[aria-checked="true"],
.session-preview-style-tabs button[aria-checked="True"] {
    color: var(--team-selection-text);
    border-color: var(--team-selection-border);
    background: var(--team-selection-gradient);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--team-selection-accent) 16%, transparent);
}

.session-preview-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.session-preview-panel-head strong {
    display: block;
    margin-top: 2px;
    font-size: 1.15rem;
    line-height: 1.1;
    font-weight: 950;
}

.session-preview-panel-head button {
    min-height: 34px;
}

.session-preview-field {
    position: relative;
    min-height: 500px;
    aspect-ratio: 105 / 68;
    overflow: hidden;
    border: 1px solid rgba(122, 177, 197, 0.24);
    border-radius: 18px;
    background: #061510;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.015),
        inset 0 22px 54px rgba(255, 255, 255, 0.025),
        0 22px 54px rgba(0, 0, 0, 0.22);
}

.session-preview-field::before,
.session-preview-field::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.session-preview-field::before {
    z-index: 0;
}

.session-preview-field::after {
    z-index: 2;
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.035), transparent 31%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.20), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.20));
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.46);
}

.session-preview-field.is-bands::before {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(30, 88, 44, 0.52) 0%,
            rgba(30, 88, 44, 0.52) 10%,
            rgba(18, 66, 36, 0.52) 10%,
            rgba(18, 66, 36, 0.52) 20%
        ),
        linear-gradient(100deg, #082016, #0b2a19 48%, #071b14);
}

.session-preview-field.is-uniform::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(55, 123, 64, 0.20), transparent 48%),
        linear-gradient(135deg, #082016, #0d2e1a 52%, #071910);
}

.session-preview-field.is-checkered::before {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(42, 106, 48, 0.24) 0%,
            rgba(42, 106, 48, 0.24) 10%,
            rgba(13, 61, 34, 0.24) 10%,
            rgba(13, 61, 34, 0.24) 20%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0.035) 9.52%,
            rgba(0, 0, 0, 0.08) 9.52%,
            rgba(0, 0, 0, 0.08) 19.04%
        ),
        linear-gradient(110deg, #082116, #0b2b1a 50%, #071b12);
}

.session-preview-field svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.session-preview-field svg rect,
.session-preview-field svg line,
.session-preview-field svg circle {
    fill: none;
    stroke: rgba(235, 250, 255, 0.32);
    stroke-width: 0.18;
    vector-effect: non-scaling-stroke;
}

.session-preview-field svg circle[r="0.35"],
.session-preview-field svg circle[r="0.45"] {
    fill: rgba(235, 250, 255, 0.82);
}

.session-preview-cloud {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.session-preview-cloud .heatmap-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.session-preview-cloud-cell {
    position: absolute;
    display: block;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 18px currentColor;
}

.session-preview-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: #e9f8ff;
}

.session-preview-empty.is-report {
    position: static;
    min-height: 100%;
}

.session-preview-report-panel p {
    margin: 0 0 12px;
    color: #bfd8e3;
    font-weight: 750;
    line-height: 1.45;
}

.session-report-state {
    padding: 7px 11px;
    border: 1px solid rgba(139, 183, 201, 0.26);
    border-radius: 999px;
    background: rgba(5, 18, 23, 0.74);
}

.session-report-state.is-ai {
    color: #dff8ff;
    border-color: rgba(95, 212, 255, .34);
    background: rgba(95, 212, 255, .13);
}

.session-report-state.is-generating {
    color: #dff8ff;
    border-color: rgba(22, 219, 255, 0.38);
    background: rgba(22, 219, 255, 0.14);
}

.session-preview-media-stack {
    display: grid;
    gap: 12px;
    margin: 12px 0 14px;
}

.session-preview-media-frame {
    overflow: hidden;
    border: 1px solid rgba(109, 161, 181, 0.22);
    border-radius: 14px;
    background: rgba(2, 11, 14, 0.68);
}

.session-preview-media-frame svg,
.session-preview-media-frame .session-summary-media,
.session-preview-media-frame .field-wrapper {
    width: 100%;
    max-width: 100%;
}

.session-ai-markdown {
    max-height: 330px;
    overflow: auto;
    padding: 12px 13px;
    border: 1px solid rgba(109, 161, 181, 0.2);
    border-radius: 14px;
    background: rgba(2, 11, 14, 0.52);
    color: #d8eef6;
    line-height: 1.46;
}

.session-ai-markdown h1,
.session-ai-markdown h2,
.session-ai-markdown h3 {
    margin: 0 0 8px;
    color: #f6fbff;
    font-size: 1rem;
}

.session-ai-markdown p {
    margin: 0 0 10px;
    color: #c9e2eb;
    font-weight: 700;
}

.session-ai-markdown ul,
.session-ai-markdown ol {
    margin: 8px 0 0;
    padding-left: 18px;
}

.session-report-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.session-report-metrics span {
    min-width: 0;
    border: 1px solid rgba(109, 161, 181, 0.22);
    border-radius: 12px;
    padding: 10px;
    background: rgba(2, 11, 14, 0.62);
}

.session-report-metrics b,
.session-report-metrics small,
.session-report-metrics em {
    display: block;
}

.session-report-metrics b {
    margin-top: 4px;
    font-size: 1.1rem;
    font-weight: 950;
    color: #f6fbff;
}

.session-report-metrics small {
    margin-top: 3px;
    color: #8daebc;
    font-weight: 700;
}

.session-report-notes {
    display: grid;
    gap: 9px;
    margin-top: 16px;
}

.session-report-notes span {
    border-left: 3px solid #22dfff;
    border-radius: 10px;
    padding: 9px 10px;
    background: rgba(22, 219, 255, 0.07);
    color: #cfe6ef;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.35;
}

.session-report-question-block {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.session-report-question-block > span {
    color: #f6fbff;
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.session-report-question-grid {
    display: grid;
    gap: 8px;
}

.session-report-question-grid button,
.session-report-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid rgba(109, 161, 181, 0.25);
    border-radius: 11px;
    background: rgba(4, 18, 23, 0.72);
    color: #d7eef6;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.2;
    cursor: pointer;
}

.session-report-question-grid button {
    justify-content: flex-start;
    padding: 9px 11px;
    text-align: left;
}

.session-report-question-grid button:hover,
.session-report-actions button:hover {
    border-color: rgba(22, 219, 255, 0.58);
    background: rgba(22, 219, 255, 0.11);
}

.session-report-question-grid button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.session-report-question-grid button.is-asked {
    color: #091316;
    border-color: transparent;
    background: linear-gradient(135deg, #7af33b, #22dfff);
}

.session-report-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 16px;
}

.session-report-actions button {
    gap: 7px;
    padding: 0 12px;
}

.session-report-actions button.primary {
    color: var(--team-selection-text);
    border-color: var(--team-selection-border);
    background: var(--team-selection-gradient);
}

@keyframes sessionPreviewSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1280px) {
    .session-strip {
        grid-auto-columns: minmax(300px, calc((100% - 28px) / 3));
    }

    .session-smart-preview {
        grid-template-columns: 1fr;
    }

    .session-preview-field {
        min-height: 440px;
    }
}

@media (max-width: 760px) {
    .session-list-modern-page {
        padding: 18px 14px 32px;
    }

    .session-list-hero,
    .session-list-search-row {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .session-list-search-row {
        display: flex;
    }

    .session-list-actions,
    .session-list-card-nav {
        justify-content: space-between;
    }

    .session-strip {
        grid-auto-columns: minmax(270px, 86vw);
    }

    .session-preview-field {
        min-height: 310px;
    }

    .session-report-metrics {
        grid-template-columns: 1fr;
    }
}

/* Field list inspired by the session list */
.field-list-modern-page {
    min-height: 100vh;
    padding: 20px 34px 42px;
    background: linear-gradient(180deg, #061217 0%, #061014 48%, #040b0e 100%);
    color: #f5fbff;
}

.field-list-modern-page .mud-input-control,
.field-list-modern-page .mud-input-control-input-container,
.field-list-modern-page .mud-input {
    margin: 0;
    min-height: 0;
}

.field-list-modern-page input.mud-input-root {
    color: #eaf8ff;
    font-size: 0.95rem;
}

.field-list-hero,
.field-list-search-row,
.field-list-filters,
.field-strip-shell,
.field-smart-preview,
.field-list-empty {
    width: 100%;
    max-width: 1760px;
    margin-inline: auto;
}

.field-list-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 10px;
}

.field-list-title-block h1 {
    margin: 2px 0 0;
    font-size: clamp(2rem, 3.2vw, 3.35rem);
    line-height: 0.95;
    font-weight: 950;
}

.field-list-actions,
.field-list-card-nav,
.field-empty-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.field-list-pill,
.field-list-card-nav button,
.field-list-filters button {
    border: 1px solid rgba(130, 184, 207, 0.34);
    border-radius: 999px;
    background: rgba(5, 17, 22, 0.66);
    color: #f2fbff;
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.field-list-pill:not(:disabled):hover,
.field-list-card-nav button:not(:disabled):hover,
.field-list-card-nav button.is-active,
.field-list-filters button:hover {
    transform: translateY(-1px);
    border-color: rgba(26, 218, 255, 0.75);
    background: rgba(10, 33, 42, 0.88);
}

.field-list-primary-pill,
.field-list-detail-pill {
    border-color: var(--team-selection-border);
    background: var(--team-selection-gradient);
    color: var(--team-selection-text);
    box-shadow: var(--team-selection-shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.field-list-primary-pill:hover,
.field-list-detail-pill:hover {
    border-color: var(--team-selection-border-strong);
    background: var(--team-selection-gradient-hover);
    color: var(--team-selection-text);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--team-selection-accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.field-list-card-nav button:disabled {
    opacity: 0.62;
}

.field-list-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.field-list-search-input {
    border-radius: 999px;
    padding: 7px 16px;
    background: rgba(4, 18, 23, 0.72);
    border: 1px solid rgba(14, 82, 92, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.field-list-search-input .mud-input-adornment-start {
    margin-inline-end: 8px;
}

.field-list-card-nav {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.field-list-card-nav span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(130, 184, 207, 0.22);
    border-radius: 999px;
    background: rgba(4, 17, 22, 0.50);
    color: #a8cad8;
    font-weight: 900;
    white-space: nowrap;
}

.field-list-card-nav button {
    width: 34px;
    min-height: 34px;
    padding: 7px;
}

.field-list-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
}

.field-list-filters .mud-input-root {
    color: #eaf8ff;
}

.field-list-simple-loader,
.field-list-empty {
    width: 100%;
    min-height: 178px;
    padding: 22px;
    border: 1px solid rgba(120, 169, 184, .24);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(3, 13, 18, .88), rgba(5, 27, 33, .74));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}

.field-list-empty {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.field-list-empty > .mud-icon-root {
    color: #91d4e8;
}

.field-list-empty strong {
    font-size: 1.06rem;
    font-weight: 950;
}

.field-list-empty small {
    color: #9cc5d4;
    font-weight: 750;
}

.field-strip-shell {
    position: relative;
    z-index: 4;
    margin-bottom: 14px;
    overflow: hidden;
}

.field-strip-shell::before,
.field-strip-shell::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    z-index: 2;
    pointer-events: none;
}

.field-strip-shell::before {
    left: 0;
    background: linear-gradient(90deg, rgba(4, 12, 15, 0.55), transparent);
}

.field-strip-shell::after {
    right: 0;
    background: linear-gradient(270deg, rgba(4, 12, 15, 0.95), transparent);
}

.field-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(370px, calc((100% - 42px) / 4));
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding: 2px 0 8px;
    scrollbar-width: none;
}

.field-strip::-webkit-scrollbar {
    display: none;
}

.field-strip-card {
    position: relative;
    min-height: 218px;
    border: 1px solid color-mix(in srgb, var(--field-accent) 62%, rgba(255, 255, 255, 0.12));
    border-radius: 13px;
    padding: 18px 18px 15px;
    overflow: hidden;
    scroll-snap-align: start;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--field-accent) 14%, rgba(7, 20, 25, 0.98)),
        rgba(4, 11, 14, 0.96)
    );
    color: #f5fbff;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.field-strip-card:hover,
.field-strip-card:focus-visible,
.field-strip-card.is-selected {
    transform: translateY(-2px);
    border-color: var(--field-accent);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--field-accent) 16%, transparent);
    outline: none;
}

.field-card-mini-top,
.field-card-mini-footer,
.field-preview-panel-head,
.field-preview-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.field-terrain-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 66%;
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--field-accent) 20%, rgba(255, 255, 255, 0.04));
    color: #f5fbff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-strip-card > strong {
    display: block;
    margin-top: 18px;
    font-size: 1.05rem;
    line-height: 1.15;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-strip-card > small {
    display: block;
    margin-top: 5px;
    min-height: 20px;
    color: #95b8c7;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-card-mini-stats,
.field-report-metrics {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.field-card-mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


.field-card-mini-stats span,
.field-report-metrics span {
    min-width: 0;
    border: 1px solid rgba(109, 161, 181, 0.20);
    border-radius: 9px;
    padding: 8px 9px;
    background: rgba(3, 12, 15, 0.55);
}

.field-card-mini-stats small,
.field-card-mini-stats strong,
.field-report-metrics small,
.field-report-metrics strong {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-card-mini-stats small,
.field-report-metrics small,
.field-preview-title span,
.field-preview-description span,
.field-preview-panel-head span {
    color: #91b7c7;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.field-card-mini-stats strong,
.field-report-metrics strong {
    margin-top: 4px;
    color: #f8fdff;
    font-size: 0.9rem;
    font-weight: 950;
}

.field-card-mini-footer {
    justify-content: flex-start;
    margin-top: 13px;
    color: #b6d7e5;
    font-size: 0.82rem;
    font-weight: 900;
}

.field-card-mini-footer span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-smart-preview {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr);
    gap: 16px;
    align-items: stretch;
}

.field-preview-map-panel,
.field-preview-report-panel {
    position: relative;
    z-index: 1;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.field-preview-map-panel {
    padding: 0;
}

.field-preview-report-panel {
    padding: 0;
}

.field-preview-controls {
    margin-bottom: 14px;
}

.field-preview-title {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.field-preview-title strong,
.field-preview-panel-head strong {
    min-width: 0;
    color: #f5fbff;
    font-size: 1.05rem;
    line-height: 1.15;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-list-map-frame {
    position: relative;
    min-height: 420px;
    border-radius: 13px;
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .18);
    background: #061418;
}

.field-list-map-frame .field-preview__wrapper {
    min-height: 420px;
    border-radius: 0;
    box-shadow: none;
}

.field-list-map-frame .field-preview__canvas {
    min-height: 420px;
}

.field-preview-empty {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #f5fbff;
    text-align: center;
    background:
        linear-gradient(90deg, rgba(120, 169, 184, .08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(120, 169, 184, .08) 1px, transparent 1px),
        linear-gradient(135deg, rgba(6, 20, 24, .92), rgba(2, 8, 10, .96));
    background-size: 28px 28px, 28px 28px, auto;
}

.field-preview-empty .mud-icon-root {
    color: #91d4e8;
}

.field-preview-empty strong {
    font-size: 1rem;
    font-weight: 950;
}

.field-preview-empty small {
    color: #9cc5d4;
    font-weight: 750;
}

.field-preview-panel-head {
    align-items: flex-start;
    margin-bottom: 16px;
}

.field-preview-panel-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.field-report-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}

.field-preview-description {
    margin-top: 16px;
    border: 1px solid rgba(109, 161, 181, 0.20);
    border-radius: 12px;
    padding: 12px;
    background: rgba(3, 12, 15, 0.46);
}

.field-preview-description p {
    margin: 6px 0 0;
    color: #d6ecf4;
    font-size: .86rem;
    line-height: 1.45;
    font-weight: 730;
}

.field-corner-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.field-corner-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(109, 161, 181, 0.18);
    border-radius: 10px;
    background: rgba(3, 12, 15, 0.42);
}

.field-corner-row span {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(120, 169, 184, .14);
    color: #a8cad8;
    font-size: .74rem;
    font-weight: 950;
}

.field-corner-row strong {
    min-width: 0;
    color: #99b9c7;
    font-size: .78rem;
    font-weight: 820;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-corner-row.is-set span {
    background: rgba(134, 239, 47, .14);
    color: #c9ff9f;
}

.field-corner-row.is-set strong {
    color: #e9f9ff;
}

@media (max-width: 1280px) {
    .field-strip {
        grid-auto-columns: minmax(340px, calc((100% - 28px) / 3));
    }

    .field-smart-preview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .field-list-modern-page {
        padding: 18px 14px 32px;
    }

    .field-list-hero,
    .field-list-search-row {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .field-list-search-row {
        display: flex;
    }

    .field-list-actions,
    .field-list-card-nav,
    .field-empty-actions {
        justify-content: space-between;
    }

    .field-list-filters {
        grid-template-columns: 1fr;
    }

    .field-strip {
        grid-auto-columns: minmax(286px, 88vw);
    }

    .field-preview-controls,
    .field-preview-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .field-report-metrics {
        grid-template-columns: 1fr;
    }

    .field-list-map-frame,
    .field-list-map-frame .field-preview__wrapper,
    .field-list-map-frame .field-preview__canvas,
    .field-preview-empty {
        min-height: 310px;
    }
}


.team-drawer-trigger {
    cursor: pointer;
}

.team-drawer-mark-svg,
.team-drawer-mark-img {
    display: block;
    width: 36px !important;
    height: 36px;
    max-width: 36px;
    margin: 0;
    overflow: visible;
    object-fit: contain;
}


.team-drawer-wordmark-svg,
.team-drawer-wordmark-img {
    display: block;
    width: 205px;
    max-width: 100%;
    height: 46px;
    overflow: hidden;
    object-fit: contain;
    object-position: left center;
}


.team-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.tenant-footer .tenant-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


@supports (height: 100dvh) {
    .team-content-shell {
        height: 100dvh;
    }
}


/*.team-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-nav-menu .team-nav-link {
    color: #cbd5f5 !important;
    border-radius: 10px;
    padding: 12px 16px;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.team-nav-menu .team-nav-link .mud-nav-link-icon {
    color: #6EB3B8 !important;
    transition: color 0.2s ease;
}

.team-nav-menu .team-nav-link:hover {
    background-color: #1d2738 !important;
    color: #ffffff !important;
}

.team-nav-menu .team-nav-link:hover .mud-nav-link-icon {
    color: #89d1d5 !important;
}

.team-nav-menu .team-nav-link-active {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
}

.team-nav-menu .team-nav-link-active .mud-nav-link-icon {
    color: #ffffff !important;
}
*/
.team-appbar {
    background: rgba(26, 31, 58, 0.95) !important;
    backdrop-filter: var(--team-backdrop-blur);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--team-shadow-md);
}

.team-main-content {
    background: transparent;
    padding-top: 88px;
}

.team-page-container {
    width:100%!important;
    margin: 0%!important;
}

.team-full-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
    min-height: calc(100vh - 96px);
}

.team-full-page .session-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 96px);
    padding: clamp(28px, 5vh, 64px) clamp(18px, 4vw, 54px);
    background:
        radial-gradient(circle at 50% 32%, rgba(34, 211, 238, .1), transparent 38%),
        radial-gradient(circle at 78% 44%, rgba(134, 239, 47, .055), transparent 34%);
    border-radius: 0;
    backdrop-filter: none;
}

.team-full-page .session-loading-modal {
    width: min(1360px, 100%);
    display: grid;
    justify-items: center;
    gap: clamp(14px, 2.4vh, 24px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.team-full-page .session-loading-modal.is-selecting {
    width: min(980px, 100%);
    justify-items: stretch;
    padding: 22px;
    border: 1px solid rgba(120, 169, 184, .28);
    border-radius: 18px;
    background:
        radial-gradient(circle at 16% 0%, rgba(37, 216, 239, .12), transparent 42%),
        linear-gradient(135deg, rgba(12, 31, 37, .86), rgba(2, 12, 15, .82));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    backdrop-filter: blur(16px);
}

.goal-loader {
    position: relative;
    width: 100%;
    height: clamp(196px, 26vh, 262px);
    margin-bottom: 0;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(137, 196, 218, .28);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(7, 27, 32, .96), rgba(2, 8, 11, .98));
    box-shadow:
        0 18px 42px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 -42px 72px rgba(0, 0, 0, .32);
}

.goal-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(34, 211, 238, .16), transparent 34%),
        linear-gradient(245deg, rgba(245, 158, 11, .12), transparent 33%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 22%, rgba(0, 0, 0, .2));
    opacity: .85;
    z-index: 0;
}

.goal-loader::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        radial-gradient(ellipse at center, transparent 44%, rgba(0, 0, 0, .32) 100%);
    background-size: 46px 46px, 46px 46px, 100% 100%;
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    opacity: .42;
    z-index: 2;
}

.goal-loader.is-success {
    border-color: rgba(134, 239, 47, .52);
    box-shadow:
        0 0 54px rgba(134, 239, 47, .12),
        0 18px 42px rgba(0, 0, 0, .2),
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 -42px 72px rgba(0, 0, 0, .28);
}

.goal-loader-canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

.team-goal-loading-state {
    width: 100%;
    min-height: clamp(420px, calc(100vh - 220px), 760px);
    display: grid;
    place-items: center;
    padding: clamp(22px, 5vh, 64px) clamp(16px, 5vw, 72px);
}

.team-goal-loading-state.is-compact {
    min-height: 198px;
    padding: 14px;
}

.team-goal-loading-stage {
    width: min(1360px, 100%);
    display: grid;
    justify-items: center;
    gap: clamp(14px, 2.2vh, 24px);
}

.team-goal-loading-state:not(.is-compact) .goal-loader,
.team-full-page .session-loading-modal:not(.is-selecting) .goal-loader {
    width: min(1280px, 100%);
    height: clamp(320px, 52vh, 560px);
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.team-goal-loading-state:not(.is-compact) .goal-loader::before,
.team-goal-loading-state:not(.is-compact) .goal-loader::after,
.team-full-page .session-loading-modal:not(.is-selecting) .goal-loader::before,
.team-full-page .session-loading-modal:not(.is-selecting) .goal-loader::after {
    opacity: 0;
}

.team-goal-loading-state.is-compact .team-goal-loading-stage {
    width: min(520px, 100%);
    padding: 12px;
    gap: 10px;
    border: 1px solid rgba(137, 196, 218, .22);
    border-radius: 18px;
    background:
        linear-gradient(120deg, rgba(34, 211, 238, .08), transparent 32%),
        linear-gradient(135deg, rgba(12, 31, 37, .74), rgba(2, 12, 15, .68));
}

.team-goal-loading-state.is-compact .goal-loader {
    height: 132px;
    border-radius: 14px;
}

.team-goal-loading-message,
.team-full-page .session-loading-simple-message {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    max-width: min(760px, 100%);
    color: var(--team-text, #f4f7f8);
    text-align: center;
}

.team-goal-loading-pulse {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(137, 196, 218, .28);
    background:
        linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(245, 158, 11, .12)),
        rgba(3, 12, 15, .68);
    box-shadow:
        inset 0 0 0 8px rgba(3, 12, 15, .68),
        0 0 28px rgba(34, 211, 238, .12);
}

.team-goal-loading-pulse::before,
.team-goal-loading-pulse::after {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: inherit;
}

.team-goal-loading-pulse::before {
    border: 2px solid rgba(34, 211, 238, .92);
    border-right-color: color-mix(in srgb, var(--team-selection-accent) 34%, transparent);
    animation: team-goal-pulse-spin 1.05s linear infinite;
}

.team-goal-loading-pulse::after {
    inset: 18px;
    background: #22d3ee;
    box-shadow: 0 0 16px rgba(34, 211, 238, .56);
}

.team-goal-loading-pulse.is-success::before {
    border-color: var(--team-selection-border-strong);
}

.team-goal-loading-pulse.is-success::after {
    background: var(--team-selection-accent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--team-selection-accent) 56%, transparent);
}

.team-goal-loading-message strong,
.team-full-page .session-loading-simple-message strong {
    color: var(--team-text, #f4f7f8);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.18;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.team-goal-loading-state.is-compact .team-goal-loading-message strong {
    font-size: .96rem;
}

.team-goal-loading-state.is-compact .team-goal-loading-pulse {
    width: 38px;
    height: 38px;
}

.team-goal-loading-state.is-compact .team-goal-loading-pulse::before {
    inset: 9px;
}

.team-goal-loading-state.is-compact .team-goal-loading-pulse::after {
    inset: 15px;
}

@keyframes team-goal-pulse-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    .team-goal-loading-state {
        min-height: 340px;
        padding: 14px;
    }

    .team-goal-loading-stage {
        gap: 12px;
    }

    .team-goal-loading-state:not(.is-compact) .goal-loader,
    .team-full-page .session-loading-modal:not(.is-selecting) .goal-loader {
        height: clamp(240px, 42vh, 380px);
    }

    .team-goal-loading-message,
    .team-full-page .session-loading-simple-message {
        gap: 10px;
    }

    .team-goal-loading-message strong,
    .team-full-page .session-loading-simple-message strong {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .team-goal-loading-pulse::before {
        animation-duration: 2.8s;
    }
}

.team-full-page .session-loading-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.team-full-page .session-loading-orbit {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(120, 169, 184, .32);
    border-radius: 50%;
    background: rgba(3, 9, 11, .72);
    color: #25d8ef;
}

.team-full-page .session-loading-orbit.is-success {
    color: #071014;
    background: linear-gradient(135deg, #22d3ee, #86ef2f);
    border-color: rgba(134, 239, 47, .72);
    box-shadow: 0 0 32px rgba(34, 211, 238, .22);
}

.team-full-page .session-loading-orbit.is-selection {
    color: var(--team-selection-accent);
    background: var(--team-selection-gradient);
    border-color: var(--team-selection-border);
    box-shadow: 0 0 28px color-mix(in srgb, var(--team-selection-accent) 16%, transparent);
}

.team-full-page .session-loading-head span,
.team-full-page .session-loading-progress span {
    display: block;
    color: var(--team-muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.team-full-page .session-loading-head strong {
    display: block;
    margin-top: 3px;
    color: var(--team-text);
    font-size: 1.12rem;
    font-weight: 950;
}

.team-full-page .session-loading-copy {
    margin: 18px 0 18px;
    color: var(--team-soft);
    font-size: .92rem;
    font-weight: 650;
}

.team-full-page .session-loading-progress {
    padding: 14px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 14px;
    background: rgba(2, 8, 10, .46);
}

.team-full-page .session-loading-progress > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.team-full-page .session-loading-progress strong {
    color: var(--team-text);
    font-size: .86rem;
    font-weight: 950;
}

.team-full-page .session-loading-player-picker {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 16px;
    background:
        radial-gradient(circle at 24% 8%, rgba(37, 216, 239, .1), transparent 42%),
        rgba(2, 8, 10, .44);
}

.team-full-page .session-loading-player-picker-head,
.team-full-page .session-loading-player-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.team-full-page .session-loading-player-picker-head span {
    display: block;
    color: var(--team-muted);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.team-full-page .session-loading-player-picker-head strong {
    display: block;
    margin-top: 4px;
    color: var(--team-text);
    font-size: .98rem;
    font-weight: 950;
}

.team-full-page .session-loading-player-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.team-full-page .session-loading-player-actions button,
.team-full-page .session-loading-player-footer button {
    height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(120, 169, 184, .34);
    border-radius: 999px;
    background: rgba(3, 9, 11, .58);
    color: var(--team-text);
    font-size: .78rem;
    font-weight: 900;
    cursor: pointer;
}

.team-full-page .session-loading-player-actions button:hover,
.team-full-page .session-loading-player-actions button:focus-visible,
.team-full-page .session-loading-player-footer button:hover,
.team-full-page .session-loading-player-footer button:focus-visible {
    border-color: rgba(37, 216, 239, .68);
    background: rgba(37, 216, 239, .1);
    outline: none;
}

.team-full-page .session-loading-player-list {
    display: grid;
    gap: 10px;
    max-height: min(45vh, 430px);
    margin-top: 14px;
    overflow-y: auto;
    padding: 2px 5px 2px 0;
}

.team-full-page .session-loading-player-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 9px 12px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 14px;
    background:
        radial-gradient(circle at left center, rgba(37, 216, 239, .08), transparent 42%),
        rgba(2, 8, 10, .52);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}

.team-full-page .session-loading-player-row:hover,
.team-full-page .session-loading-player-row:focus-within,
.team-full-page .session-loading-player-row.is-selected {
    border-color: var(--team-selection-border);
    background: var(--team-selection-gradient);
}

.team-full-page .session-loading-player-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.team-full-page .session-loading-player-check {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(120, 169, 184, .26);
    border-radius: 50%;
    background: rgba(3, 9, 11, .66);
    color: rgba(244, 247, 248, .34);
}

.team-full-page .session-loading-player-row.is-selected .session-loading-player-check {
    color: var(--team-selection-text);
    background: var(--team-selection-gradient);
    border-color: var(--team-selection-border);
}

.team-full-page .session-loading-player-main {
    min-width: 0;
}

.team-full-page .session-loading-player-main strong,
.team-full-page .session-loading-player-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-full-page .session-loading-player-main strong {
    color: var(--team-text);
    font-size: .94rem;
    font-weight: 950;
}

.team-full-page .session-loading-player-main small {
    margin-top: 3px;
    color: var(--team-muted);
    font-size: .72rem;
    font-weight: 850;
}

.team-full-page .session-loading-player-footer {
    margin-top: 14px;
    justify-content: flex-end;
}

.team-full-page .session-loading-player-footer button.is-primary {
    min-width: 116px;
    border-color: var(--team-selection-border);
    background: var(--team-selection-gradient);
    color: var(--team-selection-text);
}

.team-full-page .session-loading-player-footer button.is-primary:disabled {
    cursor: not-allowed;
    filter: grayscale(.45);
    opacity: .48;
}

.team-full-page .session-loading-player-footer button.is-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--team-soft);
}

.team-full-page > .mud-grid {
    gap: 10px;
}

.team-full-page .session-header {
    padding-bottom: 0 !important;
}

.team-full-page .session-report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: clamp(12px, 1.7vw, 18px) clamp(14px, 2vw, 22px);
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 12px;
    background: rgba(4, 14, 18, .58);
}

.team-full-page.session-detail-modern-page .session-report-header:not(.is-player-report) {
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.team-full-page .session-report-title {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.team-full-page .session-report-title span {
    color: var(--team-muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: 0;
}

.team-full-page.session-detail-modern-page .session-report-header:not(.is-player-report) .session-report-title span {
    display: none;
}

.team-full-page .session-report-title .mud-typography {
    color: var(--team-text);
    line-height: 1.05;
    font-weight: 950;
}

.team-full-page.session-detail-modern-page .session-report-header:not(.is-player-report) .session-report-title .mud-typography {
    margin: 0;
    font-size: clamp(1.7rem, 2.2vw, 2.45rem) !important;
    line-height: 1.08;
    font-weight: 950 !important;
}

.team-full-page .session-report-title em {
    color: var(--team-soft);
    font-style: normal;
    font-weight: 800;
}

.team-full-page .session-report-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
}

.team-full-page.session-detail-modern-page .session-report-header:not(.is-player-report) .session-report-meta {
    gap: 8px;
}

.team-full-page.session-detail-modern-page .session-report-header:not(.is-player-report) .session-report-meta .mud-chip {
    min-height: 34px;
    border-color: rgba(130, 184, 207, .34) !important;
    background: rgba(5, 17, 22, .66) !important;
    color: #f2fbff !important;
    font-size: .84rem;
    font-weight: 900;
}

.team-full-page.session-detail-modern-page .session-report-header:not(.is-player-report) .session-doc-help-button {
    width: 34px;
    height: 34px;
    border-color: rgba(130, 184, 207, .34) !important;
    background: rgba(5, 17, 22, .66) !important;
    color: #f2fbff !important;
}

.team-full-page .session-report-header.is-player-report {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.team-full-page .session-player-report-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.team-full-page .session-player-report-back {
    flex: 0 0 auto;
}

.team-full-page .session-player-report-side {
    display: grid;
    gap: 8px;
    justify-items: end;
    min-width: min(100%, 520px);
}

.team-full-page .session-player-report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.team-full-page .session-header .mud-grid {
    margin-bottom: 0 !important;
}

.team-full-page .session-description {
    padding-top: 2px !important;
}

.team-full-page .session-player-strip-item {
    padding-top: 2px !important;
    padding-bottom: 8px !important;
}

.team-full-page .session-map-item {
    padding-top: 4px !important;
}

.team-full-page .session-map-stage {
    position: relative;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.team-full-page.session-playback-focus .session-header,
.team-full-page.session-playback-focus .session-player-strip-item,
.team-full-page.session-playback-focus .map-analysis-panel,
.team-full-page.session-playback-focus .pitch-zone-analytics,
.team-full-page.session-playback-focus .map-mode-controls-dock {
    display: none !important;
}

.team-full-page.session-playback-focus .session-map-item {
    padding-top: 0 !important;
}

.team-full-page.session-playback-focus .session-map-stage,
.team-full-page.session-playback-focus .field-container {
    min-height: 0;
}

@media (max-width: 980px) {
    .team-full-page .session-report-header.is-player-report {
        grid-template-columns: 1fr;
    }

    .team-full-page .session-player-report-side {
        justify-items: start;
    }

    .team-full-page .session-report-header.is-player-report .session-report-meta,
    .team-full-page .session-player-report-actions {
        justify-content: flex-start;
    }
}

.team-full-page.session-playback-focus .field-container {
    border-color: rgba(37, 216, 239, .28) !important;
    background: rgba(1, 7, 9, .94) !important;
}

.team-full-page .mud-grid-item > .mud-paper,
.team-full-page .field-container,
.team-full-page .map-analysis-panel,
.team-full-page .segment-kpi-card,
.team-full-page .segment-macro-card,
.team-full-page .segment-table-card,
.team-full-page .player-session-card,
.team-full-page .field-session-card {
    border: 1px solid rgba(120, 169, 184, .22) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(37, 216, 239, .08), transparent 38%),
        radial-gradient(circle at 92% 12%, rgba(134, 239, 47, .055), transparent 34%),
        linear-gradient(135deg, rgba(12, 31, 37, .9), rgba(2, 12, 15, .93)) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28) !important;
}

.team-full-page .mud-grid-item > .mud-paper:hover,
.team-full-page .field-container:hover,
.team-full-page .map-analysis-panel:hover,
.team-full-page .segment-kpi-card:hover,
.team-full-page .segment-macro-card:hover,
.team-full-page .segment-table-card:hover {
    border-color: rgba(120, 169, 184, .34) !important;
}

.team-full-page .mud-grid-item > .mud-paper {
    overflow: hidden;
}

.team-full-page .mud-grid-item > .mud-paper .mud-paper,
.team-full-page .map-summary-card,
.team-full-page .cod-detail-metric,
.team-full-page .cod-flow-card,
.team-full-page .cod-flow-center,
.team-full-page .sprint-insight-panel,
.team-full-page .pitch-zone-leader-card,
.team-full-page .pitch-zone-bar-row {
    border: 1px solid rgba(120, 169, 184, .18) !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at left top, rgba(37, 216, 239, .07), transparent 42%),
        rgba(2, 8, 10, .5) !important;
    box-shadow: none !important;
}

.team-full-page .mud-typography-h4 {
    color: var(--team-text) !important;
    font-size: clamp(1.7rem, 2.2vw, 2.45rem) !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
}

.team-full-page .mud-typography-body1 {
    color: var(--team-soft) !important;
}

.team-full-page .map-mode-controls {
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

.team-full-page .map-mode-controls-dock {
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: 18px auto 20px !important;
    padding: 6px;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 14px;
    background:
        radial-gradient(circle at 18% 0%, rgba(37, 216, 239, .055), transparent 38%),
        rgba(2, 8, 10, .72);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.team-full-page .map-mode-controls-dock .map-mode-toolbar {
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
}

.team-full-page .map-mode-controls-dock .map-mode-group.is-active,
.team-full-page .map-mode-controls-dock .map-mode-group.is-hovered,
.team-full-page .map-mode-controls-dock .map-mode-toolbar.has-hovered .map-mode-group.is-hovered {
    flex: 0 1 auto;
}

.team-full-page .map-mode-controls-dock .map-mode-select {
    flex: 0 0 auto;
}


.team-full-page .map-mode-group.is-active,
.team-full-page .map-mode-group.is-hovered,
.team-full-page .map-mode-toolbar.has-hovered .map-mode-group.is-hovered {
    flex: 1 1 420px;
    border-color: rgba(37, 216, 239, .46);
    background:
        radial-gradient(circle at 20% 0%, rgba(37, 216, 239, .14), transparent 42%),
        radial-gradient(circle at 92% 8%, rgba(138, 242, 31, .12), transparent 38%),
        rgba(3, 12, 15, .72);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
}

.team-full-page .map-mode-toolbar.has-hovered .map-mode-group:not(.is-hovered) {
    flex: 0 0 52px;
    border-color: rgba(120, 169, 184, .16);
    background: rgba(2, 8, 10, .46);
    box-shadow: none;
}


.team-full-page .map-mode-group-label .mud-icon-root {
    color: var(--team-cyan);
}

.team-full-page .map-mode-group-text {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-5px);
    transition: max-width .28s cubic-bezier(.2, .8, .2, 1), opacity .18s ease, transform .24s ease;
}

.team-full-page .map-mode-group.is-active .map-mode-group-text,
.team-full-page .map-mode-group.is-hovered .map-mode-group-text {
    max-width: 120px;
    opacity: 1;
    transform: translateX(0);
}

.team-full-page .map-mode-toolbar.has-hovered .map-mode-group:not(.is-hovered) .map-mode-group-text {
    max-width: 0;
    opacity: 0;
    transform: translateX(-5px);
}


.team-full-page .map-mode-group.is-active .map-mode-group-options,
.team-full-page .map-mode-group.is-hovered .map-mode-group-options {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.team-full-page .map-mode-toolbar.has-hovered .map-mode-group:not(.is-hovered) .map-mode-group-options {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
}

.team-full-page .map-mode-subbutton,
.team-full-page .session-player-button,
.team-full-page .track-mode-select .mud-input-root {
    border: 1px solid rgba(120, 169, 184, .26) !important;
    border-radius: 999px !important;
    background: rgba(3, 9, 11, .54) !important;
    color: var(--team-text-soft) !important;
}

.team-full-page .map-mode-subbutton:hover,
.team-full-page .map-mode-subbutton:focus-visible,
.team-full-page .session-player-button:hover,
.team-full-page .session-player-button:focus-visible {
    border-color: rgba(37, 216, 239, .58) !important;
    background: rgba(37, 216, 239, .1) !important;
}

.team-full-page .map-mode-subbutton.mud-button-filled,
.team-full-page .session-player-button.is-primary {
    border-color: var(--team-selection-border) !important;
    background: var(--team-selection-gradient) !important;
    color: var(--team-selection-text) !important;
}

@media (max-width: 920px) {
    .team-full-page .map-mode-controls {
        flex-wrap: wrap !important;
    }

    .team-full-page .map-mode-toolbar {
        flex-basis: 100%;
        min-width: 100%;
    }

    .team-full-page .map-mode-group,
    .team-full-page .map-mode-group.is-active,
    .team-full-page .map-mode-group.is-hovered,
    .team-full-page .map-mode-toolbar.has-hovered .map-mode-group.is-hovered {
        flex: 1 1 100%;
    }

    .team-full-page .map-mode-group-text,
    .team-full-page .map-mode-group.is-active .map-mode-group-text,
    .team-full-page .map-mode-group.is-hovered .map-mode-group-text {
        max-width: 140px;
        opacity: 1;
        transform: none;
    }

    .team-full-page .map-mode-group-options,
    .team-full-page .map-mode-group.is-active .map-mode-group-options,
    .team-full-page .map-mode-group.is-hovered .map-mode-group-options {
        flex-wrap: wrap;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

.team-full-page .soccer-field.team-map-surface,
.team-full-page .cod-zoom-field,
.team-full-page .sprint-zoom-field {
    border: 1px solid rgba(120, 169, 184, .2) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 58% 22%, rgba(37, 216, 239, .045), transparent 34%),
        #020708 !important;
    box-shadow: inset 0 0 0 1px rgba(244, 247, 248, .025), 0 18px 44px rgba(0, 0, 0, .28);
}

.team-full-page .map-summary-value,
.team-full-page .sprint-insight-value {
    color: var(--team-text) !important;
}

.team-full-page .map-legend-chip,
.team-full-page .sprint-insight-row,
.team-full-page .pitch-zone-player-row {
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 12px;
    background: rgba(2, 8, 10, .38);
}

.session-player-picker-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 0 4px;
}

.session-player-picker-title > span {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(120, 169, 184, .24);
    border-radius: 50%;
    background: rgba(3, 9, 11, .62);
    color: #25d8ef;
}

.session-player-picker-title small {
    display: block;
    color: var(--team-muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.session-player-picker-title strong {
    display: block;
    color: var(--team-text);
    font-size: 1rem;
    font-weight: 950;
}

.session-player-picker {
    min-width: min(560px, calc(100vw - 72px));
}

.session-player-picker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.session-player-picker-actions button {
    height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(120, 169, 184, .32);
    border-radius: 999px;
    background: rgba(3, 9, 11, .52);
    color: var(--team-text);
    font-size: .78rem;
    font-weight: 900;
    cursor: pointer;
}

.session-player-picker-actions button:hover,
.session-player-picker-actions button:focus-visible {
    border-color: rgba(37, 216, 239, .68);
    background: rgba(37, 216, 239, .1);
    outline: none;
}

.session-player-picker-list {
    display: grid;
    gap: 10px;
    max-height: min(54vh, 520px);
    overflow-y: auto;
    padding: 2px 4px 2px 0;
}

.session-player-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 12px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 14px;
    background:
        radial-gradient(circle at left center, rgba(37, 216, 239, .09), transparent 42%),
        rgba(2, 8, 10, .48);
    color: var(--team-soft);
    cursor: pointer;
}

.session-player-picker-row:hover,
.session-player-picker-row:focus-within {
    border-color: rgba(37, 216, 239, .44);
    background:
        radial-gradient(circle at left center, rgba(134, 239, 47, .1), transparent 44%),
        rgba(4, 16, 19, .66);
}

.session-player-picker-row span {
    overflow: hidden;
    color: var(--team-soft);
    font-size: .92rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-player-picker-row .mud-checkbox {
    margin: 0;
}

.session-player-picker-empty {
    padding: 22px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 14px;
    color: var(--team-muted);
    background: rgba(2, 8, 10, .48);
}

.session-player-picker-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

/* Session list */


.session-pager-actions {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.session-pager-stack {
    height: 100%;
}

.session-filters-actions {
    text-align: center;
}


.session-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: var(--mud-palette-primary);
}


.session-metrics .mud-chip {
    margin-bottom: 0;
    white-space: nowrap;
}

.team-fill-height {
    height: 100%;
}

.team-actions-end {
    float: right;
}

.team-text-center {
    text-align: center;
}

.team-text-left {
    text-align: left;
}

.team-icon-4xl {
    font-size: 4rem !important;
}

.team-icon-5xl {
    font-size: 5rem !important;
}

.tactical-analysis-page {
    margin-top: 20px;
}


.player-stats-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    border-radius: 8px;
}

.player-stats-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}


.heat-legend {
    padding: 0;
}


@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

.cursor-pointer {
    cursor: pointer;
}

.transition-all {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}


@media (min-width: 1280px) {
    .session-list-page .mud-paper {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 1279px) {
    .session-pager-actions {
        justify-content: flex-start;
    }

    .session-metrics {
        justify-content: flex-start !important;
    }
}

@media (max-width: 1024px) {
    

    
}

@media (max-width: 768px) {
    .session-card {
        margin-bottom: 16px;
    }

    

    

    .stats-card {
        min-height: 90px;
    }
}

@media (max-width: 600px) {
    .text-right {
        text-align: left !important;
    }

    

    
}

/* Field pages */
.field-card {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    border: 1px solid transparent;
}

.field-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: var(--mud-palette-primary);
}

.field-card__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field-card__no-coordinates {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(13, 71, 161, 0.04);
    border: 1px dashed rgba(13, 71, 161, 0.3);
}

.field-session-card {
    padding: 10px;
    margin-bottom: 20px;
}

.field-detail-page {
    display: grid;
    gap: 16px;
    color: var(--team-text);
}

.field-detail-hero,
.field-detail-kpi-card,
.field-detail-map-shell,
.field-detail-side-panel,
.field-detail-session-section {
    border: 1px solid rgba(120, 169, 184, .22);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(12, 31, 37, .90), rgba(2, 12, 15, .94));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.field-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
    padding: 24px;
    overflow: hidden;
}

.field-detail-title-block {
    min-width: 0;
}

.field-detail-eyebrow,
.field-detail-panel-head span,
.field-detail-kpi-card span,
.field-session-card-top,
.field-session-metrics small,
.field-detail-side-metrics small,
.field-detail-attribute-list small {
    color: var(--team-muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.field-detail-eyebrow,
.field-detail-hero-meta span,
.field-detail-status-badge,
.field-detail-kpi-card span,
.field-coordinate-card span,
.field-detail-attribute-list span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.field-detail-eyebrow .mud-icon-root,
.field-detail-hero-meta .mud-icon-root,
.field-detail-kpi-card .mud-icon-root,
.field-coordinate-card .mud-icon-root,
.field-detail-attribute-list .mud-icon-root {
    color: var(--team-cyan);
}

.field-detail-title-block h1 {
    margin: 8px 0 0;
    color: var(--team-text);
    font-size: 2.35rem;
    line-height: 1.05;
    font-weight: 950;
}

.field-detail-title-block p {
    max-width: 860px;
    margin: 10px 0 0;
    color: var(--team-soft, var(--team-text-soft));
    font-size: .98rem;
    line-height: 1.55;
    font-weight: 650;
}

.field-detail-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
}

.field-detail-hero-meta span,
.field-detail-status-badge,
.field-detail-session-total {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(120, 169, 184, .24);
    border-radius: 999px;
    background: rgba(2, 8, 10, .48);
    color: var(--team-text-soft);
    font-size: .8rem;
    font-weight: 850;
    white-space: nowrap;
}

.field-detail-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.field-detail-actions .mud-icon-button {
    width: 42px;
    height: 42px;
}

.field-detail-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.field-detail-kpi-card {
    min-width: 0;
    padding: 16px;
    overflow: hidden;
}

.field-detail-kpi-card strong,
.field-detail-side-metrics strong,
.field-detail-attribute-list strong,
.field-coordinate-card strong,
.field-detail-panel-head strong,
.field-detail-empty-state strong,
.field-session-card > strong {
    display: block;
    color: var(--team-text);
    font-weight: 950;
}

.field-detail-kpi-card strong {
    margin-top: 10px;
    overflow: hidden;
    font-size: 1.2rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-detail-kpi-card small {
    display: block;
    margin-top: 4px;
    color: var(--team-muted);
    font-weight: 750;
}

.field-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .65fr);
    gap: 16px;
    align-items: start;
}

.field-detail-map-shell,
.field-detail-side-panel,
.field-detail-session-section {
    padding: 18px;
}

.field-detail-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.field-detail-panel-head > div {
    min-width: 0;
}

.field-detail-panel-head strong {
    margin-top: 3px;
    font-size: 1.14rem;
    line-height: 1.15;
}

.field-detail-status-badge.is-ready {
    border-color: rgba(134, 239, 47, .48);
    color: #dfffd1;
    background: rgba(68, 149, 42, .16);
}

.field-detail-status-badge.is-missing {
    border-color: rgba(245, 196, 0, .42);
    color: #ffeaa0;
    background: rgba(245, 196, 0, .12);
}

.field-detail-map-frame {
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .20);
    border-radius: 18px;
    background: #020708;
    box-shadow: inset 0 0 0 1px rgba(244, 247, 248, .025), 0 18px 44px rgba(0, 0, 0, .28);
}

.field-detail-map-frame .field-preview__wrapper {
    min-height: 420px;
    border-radius: 18px;
    box-shadow: none;
}

.field-detail-map-frame .field-preview__canvas {
    min-height: 420px;
}

.field-coordinate-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.field-coordinate-card,
.field-detail-side-metrics span,
.field-detail-attribute-list span {
    min-width: 0;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 14px;
    background: rgba(2, 8, 10, .42);
}

.field-coordinate-card {
    padding: 12px;
}

.field-coordinate-card strong {
    margin-top: 8px;
    font-size: .96rem;
}

.field-coordinate-card small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--team-muted);
    font-size: .76rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-detail-side {
    display: grid;
    gap: 16px;
}

.field-detail-usage-meter {
    height: 12px;
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 999px;
    background: rgba(2, 8, 10, .66);
}

.field-detail-usage-meter span {
    display: block;
    width: var(--usage, 0%);
    min-width: 8px;
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--team-cyan), var(--team-lime));
    box-shadow: 0 0 18px rgba(16, 200, 234, .24);
}

.field-detail-side-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.field-detail-side-metrics span {
    padding: 11px;
}

.field-detail-side-metrics strong {
    margin-top: 5px;
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-detail-attribute-list {
    display: grid;
    gap: 9px;
}

.field-detail-attribute-list span {
    display: grid;
    grid-template-columns: auto minmax(0, .72fr) minmax(0, 1fr);
    padding: 11px;
}

.field-detail-attribute-list strong,
.field-detail-attribute-list small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-detail-empty-state {
    min-height: 360px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 26px;
    border: 1px dashed rgba(120, 169, 184, .28);
    border-radius: 18px;
    background: rgba(2, 8, 10, .34);
    color: var(--team-text-soft);
    text-align: center;
}

.field-detail-empty-state.is-compact {
    min-height: 220px;
}

.field-detail-empty-state > span {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(120, 169, 184, .22);
    border-radius: 50%;
    background: rgba(3, 9, 11, .62);
    color: var(--team-cyan);
}

.field-detail-empty-state strong {
    font-size: 1.12rem;
}

.field-detail-empty-state p {
    max-width: 520px;
    margin: 0;
    color: var(--team-muted);
    font-weight: 700;
}

.field-session-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.field-detail-page .field-session-card {
    position: relative;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 14px;
    width: 100%;
    min-width: 0;
    min-height: 214px;
    margin: 0;
    padding: 18px !important;
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .18) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(135deg, rgba(3, 16, 20, .86), rgba(2, 8, 10, .70)) !important;
    color: var(--team-text-soft);
    appearance: none;
    font-family: var(--team-font-family);
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.field-detail-page .field-session-card:hover,
.field-detail-page .field-session-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(37, 216, 239, .46) !important;
    background:
        linear-gradient(135deg, rgba(7, 28, 34, .94), rgba(2, 10, 12, .86)) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .26);
    outline: none;
}

.field-detail-page .field-session-card.is-active {
    border-color: rgba(134, 239, 47, .36) !important;
}

.field-session-card-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.field-session-card-top span {
    overflow: hidden;
    color: var(--team-cyan);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-session-card-top em {
    color: var(--team-muted);
    font-style: normal;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-session-main {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 6px;
}

.field-session-main > strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1.02rem;
    line-height: 1.22;
    color: var(--team-text);
    font-weight: 950;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.field-session-main > small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--team-muted);
    font-size: .78rem;
    line-height: 1.32;
    font-weight: 750;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.field-session-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-self: end;
    min-width: 0;
}

.field-session-metrics span {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(120, 169, 184, .12);
    border-radius: 10px;
    background: rgba(2, 8, 10, .44);
}

.field-session-metrics b {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--team-text);
    font-size: .86rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-detail-page .field-session-list {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.field-detail-page .field-session-list .session-strip-shell {
    margin: 0;
}

.field-detail-page .field-session-list .session-strip {
    grid-auto-columns: minmax(300px, calc((100% - 28px) / 3));
}

.field-detail-page .field-session-list .session-strip.has-expanded-session {
    --session-card-compact-width: clamp(300px, calc((100% - 28px) / 3), 380px);
}

.field-detail-page .field-session-list .session-smart-preview {
    margin-top: 0;
}

.field-detail-page .field-session-list .session-preview-map-panel,
.field-detail-page .field-session-list .session-preview-report-panel,
.field-detail-page .field-session-list .session-player-preview-popover {
    background:
        radial-gradient(circle at 80% 6%, rgba(35, 218, 244, .08), transparent 36%),
        rgba(2, 10, 13, .74);
}

.field-detail-page .field-session-list {
    display: block;
}

.field-session-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.field-session-card-link {
    position: relative;
    min-width: 0;
    min-height: 156px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--session-accent, #77eeff) 44%, rgba(120, 169, 184, .18));
    border-radius: 14px;
    background:
        radial-gradient(circle at var(--session-flow-x, 18%) -12%, rgba(119, 238, 255, var(--session-light, .24)), transparent 42%),
        linear-gradient(135deg, color-mix(in srgb, var(--session-accent, #77eeff) 22%, rgba(3, 13, 18, .92)) 0%, rgba(3, 10, 14, .91) 48%, color-mix(in srgb, var(--session-accent, #77eeff) 13%, rgba(1, 6, 10, .96)) 100%);
    box-shadow: inset 0 1px 0 rgba(245, 251, 255, .045), 0 12px 28px rgba(0, 0, 0, .22);
    color: var(--team-text);
    cursor: pointer;
    isolation: isolate;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.field-session-card-link:hover,
.field-session-card-link:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--session-accent, #77eeff) 72%, rgba(245, 251, 255, .16));
    box-shadow: inset 0 1px 0 rgba(245, 251, 255, .06), 0 18px 38px rgba(0, 0, 0, .30);
    outline: none;
}

.field-session-card-glow {
    position: absolute;
    inset: -36% -18% auto auto;
    width: 180px;
    height: 120px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--session-accent, #77eeff) 22%, transparent);
    filter: blur(26px);
    opacity: .72;
    pointer-events: none;
}

.field-session-card-name {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    min-height: 30px;
    overflow: hidden;
    color: #f5fbff;
    font-size: .9rem;
    font-weight: 950;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.field-session-card-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

.field-session-card-stats span {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 10px;
    background: rgba(3, 9, 11, .52);
}

.field-session-card-stats small,
.field-session-card-stats strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-session-card-stats small {
    color: #9dd9ec;
    font-size: .68rem;
    font-weight: 900;
}

.field-session-card-stats strong {
    margin-top: 5px;
    color: #f5fbff;
    font-size: .82rem;
    font-weight: 950;
}

.field-session-card-footer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    margin-top: auto;
    padding-top: 10px;
}

.field-session-card-footer span {
    min-width: 0;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    overflow: hidden;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--session-accent, #77eeff) 42%, rgba(120, 169, 184, .18));
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--session-accent, #77eeff) 18%, rgba(3, 9, 11, .78)), rgba(3, 9, 11, .60));
    color: #f5fbff;
    font-size: .7rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-session-open-icon {
    width: 34px;
    padding: 0 !important;
}

@media (max-width: 1200px) {
    .field-detail-layout {
        grid-template-columns: 1fr;
    }

    .field-detail-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field-session-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field-detail-page .field-session-list .session-strip {
        grid-auto-columns: minmax(300px, calc((100% - 14px) / 2));
    }

    .field-session-card-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 860px) {
    .field-detail-hero {
        grid-template-columns: 1fr;
    }

    .field-detail-actions {
        justify-content: flex-start;
    }

    .field-detail-kpi-strip,
    .field-coordinate-grid,
    .field-detail-side,
    .field-session-grid {
        grid-template-columns: 1fr;
    }

    .field-detail-title-block h1 {
        font-size: 1.85rem;
    }

    .field-detail-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .field-detail-page .field-session-list .session-strip {
        grid-auto-columns: minmax(280px, 88vw);
    }

    .field-session-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Player pages */
.player-card {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    border: 1px solid transparent;
}

.player-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: var(--mud-palette-primary);
}

.player-list-avatar {
    font-weight: bold !important;
    font-size: 1.1rem !important;
}

.player-avatar-container {
    position: relative;
    display: inline-block;
}

.player-main-avatar {
    width: 80px !important;
    height: 80px !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
}

.player-session-card {
    padding: 15px 10px;
    margin-top: 5px;
}

.chart-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 12px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
}

.stat-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-content {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .field-card,
    .player-card {
        min-height: 280px !important;
    }

    .stat-item {
        padding: 6px 0;
    }

    .player-main-avatar {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.2rem !important;
    }
}

/* Brand Styling */
.team-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.team-brand-icon {
    color: #007AFF;
    font-size: 28px !important;
}

.team-brand-text {
    background: var(--team-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700 !important;
    letter-spacing: -0.5px;
}

/* User Menu */
.team-user-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    transition: var(--team-transition) !important;
}

    .team-user-btn:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-1px);
        box-shadow: var(--team-shadow-md);
    }

.team-greeting {
    font-weight: 500;
    font-size: 14px;
}

.team-menu-item {
    padding: 12px 20px !important;
    border-radius: 8px !important;
    margin: 4px !important;
    transition: var(--team-transition) !important;
}

    .team-menu-item:hover {
        background: rgba(0, 122, 255, 0.1) !important;
    }

.team-menu-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.team-menu-icon {
    color: #007AFF;
}

/* Card Components */
.team-card {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    backdrop-filter: var(--team-card-blur);
    box-shadow: var(--team-shadow-lg);
    transition: var(--team-transition) !important;
    overflow: hidden;
}

    .team-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--team-shadow-xl);
        border-color: rgba(0, 122, 255, 0.3);
    }

.team-card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px !important;
}

.team-card-content {
    padding: 24px !important;
}

.team-card-actions {
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px !important;
}

/* Button Styles */
.team-btn-primary {
    background: #2563EB !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.2px !important;
    transition: var(--team-transition) !important;
}

    .team-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--team-shadow-lg);
    }

.team-btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    transition: var(--team-transition) !important;
}

    .team-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(0, 122, 255, 0.3) !important;
        transform: translateY(-1px);
    }

.team-btn-success {
    background: var(--team-accent-gradient) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    transition: var(--team-transition) !important;
}

.team-btn-gold {
    background: var(--team-gold-gradient) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #000000 !important;
    font-weight: 600 !important;
    transition: var(--team-transition) !important;
}

/* Form Elements */
.team-form-field {
    margin-bottom: 24px !important;
}

.team-text-field .mud-input-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    transition: var(--team-transition) !important;
}

    .team-text-field .mud-input-control:focus-within {
        border-color: #007AFF !important;
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
    }

.team-text-field .mud-input {
    color: #FFFFFF !important;
}

.team-text-field .mud-input-label {
    color: #8E8E93 !important;
    font-weight: 500 !important;
}

    .team-text-field .mud-input-label.mud-input-label-filled {
        color: #007AFF !important;
    }

/* Table Styles */
.team-table {
    background: var(--team-glass-bg) !important;
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid var(--team-glass-border) !important;
    backdrop-filter: var(--team-card-blur);
}

    .team-table .mud-table-head {
        background: rgba(255, 255, 255, 0.1) !important;
    }

        .team-table .mud-table-head .mud-table-cell {
            color: #FFFFFF !important;
            font-weight: 600 !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
            padding: 20px !important;
        }

    .team-table .mud-table-body .mud-table-row {
        transition: var(--team-transition) !important;
    }

        .team-table .mud-table-body .mud-table-row:hover {
            background: rgba(0, 122, 255, 0.1) !important;
        }

    .team-table .mud-table-cell {
        color: #FFFFFF !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 16px 20px !important;
    }

/* Stats Cards */
.team-stats-card {
    background: var(--team-glass-bg) !important;
    border: 1px solid var(--team-glass-border) !important;
    border-radius: 20px !important;
    backdrop-filter: var(--team-card-blur);
    padding: 24px !important;
    text-align: center;
    transition: var(--team-transition) !important;
    position: relative;
    overflow: hidden;
}

    

    .team-stats-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--team-shadow-xl);
    }

.team-stats-number {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    background: var(--team-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.team-stats-label {
    color: #8E8E93 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    margin-top: 8px !important;
}

/* Progress Indicators */
.team-progress {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

    .team-progress .mud-progress-linear-bar {
        background: var(--team-primary-gradient) !important;
    }

/* Dialog Backdrop */
.team-dialog-backdrop {
    backdrop-filter: var(--team-backdrop-blur) !important;
    background: rgba(10, 14, 39, 0.8) !important;
}

/* Auth Container */
.team-auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Login Card */
.team-login-card {
    background: var(--team-glass-bg) !important;
    border: 1px solid var(--team-glass-border) !important;
    border-radius: 24px !important;
    backdrop-filter: var(--team-card-blur);
    box-shadow: var(--team-shadow-xl);
    padding: 48px !important;
    max-width: 400px;
    width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .team-page-container {
        padding: 16px;
    }

    .team-card-content,
    .team-card-header {
        padding: 16px !important;
    }

    .team-login-card {
        padding: 32px !important;
        margin: 16px;
    }

    .team-brand-text {
        font-size: 1rem !important;
    }
}


    

    

    .team-nav-menu .mud-nav-link, .team-nav-menu .mud-nav-link{
        color:white!important;
        margin:5px 0px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

        .team-nav-menu .mud-nav-link svg, .team-nav-menu .mud-nav-link svg{
            fill:white!important;
        }

        /* Animations */
        @keyframes teamFadeIn {
            from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes teamSlideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

.team-fade-in {
    animation: teamFadeIn 0.6s var(--team-bounce);
}

.team-slide-in {
    animation: teamSlideIn 0.5s var(--team-transition);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}


    

/* Override MudBlazor specific styles */
.mud-paper {
    background-color: var(--team-glass-bg) !important;
    border: 1px solid var(--team-glass-border) !important;
    backdrop-filter: var(--team-card-blur);
    border-radius:20px;
}


.mud-container {
    color: #FFFFFF !important;
}

.mud-typography {
    color: inherit !important;
}


    .mud-alert.mud-alert-filled-success {
        background: var(--team-accent-gradient) !important;
    }

    .mud-alert.mud-alert-filled-info {
        background: #1E40AF !important;
    }

    .mud-alert.mud-alert-filled-warning {
        background: linear-gradient(135deg, #FF9500 0%, #FF6B35 100%) !important;
    }

    .mud-alert.mud-alert-filled-error {
        background: linear-gradient(135deg, #FF3B30 0%, #FF1744 100%) !important;
    }

/* Navigation */


/* ===== Traguard match-day dark refresh ===== */
:root {
    --team-dark-gradient: linear-gradient(-60deg, #000000 0%, #1A1F3A 50%, #2D3748 100%);
    --team-glass-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    --team-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --team-pitch-custom-color: #0B2A19;
    --team-pitch-background: linear-gradient(90deg, rgba(17, 82, 49, .24) 0 10%, rgba(7, 47, 35, .30) 10% 20%, rgba(17, 82, 49, .24) 20% 30%, rgba(7, 47, 35, .30) 30% 40%, rgba(17, 82, 49, .24) 40% 50%, rgba(7, 47, 35, .30) 50% 60%, rgba(17, 82, 49, .24) 60% 70%, rgba(7, 47, 35, .30) 70% 80%, rgba(17, 82, 49, .24) 80% 90%, rgba(7, 47, 35, .30) 90% 100%), radial-gradient(circle at 54% 24%, rgba(70, 188, 92, .10), transparent 38%), #020908;
    --team-pitch-svg-fill: rgba(2, 9, 8, .12);
    --team-pitch-line-color: rgba(221, 246, 230, .72);
    --team-pitch-dot-color: rgba(221, 246, 230, .90);
    --team-body-background: #071116;
    --bs-body-bg: #071116 !important;
    --team-app-bg: #071116;
    --team-app-gradient: radial-gradient(circle at 18% 8%, rgba(16, 200, 234, .14), transparent 30%), radial-gradient(circle at 94% 0%, rgba(138, 242, 31, .04), transparent 31%), radial-gradient(circle at 62% 86%, rgba(155, 103, 230, .085), transparent 32%), linear-gradient(145deg, #061014 0%, #08171c 44%, #03080b 100%);
    --team-surface: #111a1f;
    --team-surface-raised: #142229;
    --team-surface-soft: #0d181d;
    --team-surface-pill: #203540;
    --team-border: #263640;
    --team-border-strong: #314751;
    --team-text: #f4f7f8;
    --team-text-soft: #d7e2e6;
    --team-muted: #87a3b2;
    --team-muted-2: #607884;
    --team-cyan: #10c8ea;
    --team-blue: #009af2;
    --team-lime: #8af21f;
    --team-yellow: #f5c400;
    --team-purple: #9b67e6;
    --team-danger: #ef4444;
    --team-selection-accent: #77eeff;
    --team-selection-gradient:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--team-selection-accent) 23%, transparent), transparent 44%),
        linear-gradient(135deg, color-mix(in srgb, var(--team-selection-accent) 9%, rgba(7, 20, 25, 0.97)), rgba(4, 11, 14, 0.96));
    --team-selection-gradient-hover:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--team-selection-accent) 30%, transparent), transparent 44%),
        linear-gradient(135deg, color-mix(in srgb, var(--team-selection-accent) 13%, rgba(7, 20, 25, 0.97)), rgba(4, 11, 14, 0.96));
    --team-selection-border: color-mix(in srgb, var(--team-selection-accent) 70%, rgba(255, 255, 255, 0.12));
    --team-selection-border-strong: color-mix(in srgb, var(--team-selection-accent) 86%, #ffffff 6%);
    --team-selection-shadow: 0 18px 42px color-mix(in srgb, var(--team-selection-accent) 16%, transparent);
    --team-selection-text: #f5fbff;
    --team-card-shadow: 0 18px 42px rgba(0, 0, 0, .22);
    --team-card-shadow-hover: 0 24px 60px rgba(0, 0, 0, .34);
    --team-primary-gradient: linear-gradient(90deg, var(--team-cyan) 0%, var(--team-lime) 100%);
    --team-secondary-gradient: linear-gradient(135deg, #15262d 0%, #213945 100%);
    --team-accent-gradient: linear-gradient(90deg, var(--team-cyan) 0%, var(--team-lime) 100%);
    --team-gold-gradient: linear-gradient(90deg, var(--team-yellow) 0%, #ffde59 100%);
    --team-glass-bg: var(--team-surface);
    --team-glass-border: var(--team-border);
    --team-popover-bg: rgba(13, 24, 29, .96);
    --mud-palette-action-default-hover: rgba(16, 200, 234, .14) !important;
}

html,
body {
    font-family: var(--team-font-family);
    height: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--team-app-gradient) fixed !important;
    color: var(--team-text);
    letter-spacing: 0 !important;
}

body,
.mud-typography,
.mud-button-root,
.mud-input,
.mud-table,
.mud-chip {
    letter-spacing: 0 !important;
}

a,
.btn-link {
    color: var(--team-cyan);
}


.team-layout .mud-drawer {
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden;
    background: #081318 !important;
    border-right: 1px solid var(--team-border) !important;
    box-shadow: none !important;
}

.team-layout .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 18px 14px;
}

.team-drawer-mark,
.team-drawer-wordmark {
    display: flex;
    align-items: center;
    height: 68px;
}

.team-drawer-mark-svg {
    filter: drop-shadow(0 0 14px rgba(16, 200, 234, .28));
}

.team-drawer-wordmark-svg g[style*="fill:#6db1b6"],
.team-drawer-wordmark-svg g[style*="fill:#6db1b6"] path {
    fill: var(--team-text) !important;
}


.team-nav-menu .mud-nav-link svg {
    fill: var(--team-muted) !important;
}

.team-nav-menu .mud-nav-link:hover {
    border-radius: 10px !important;
    background: rgba(16, 200, 234, .09) !important;
    color: var(--team-text) !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--team-selection-gradient) !important;
    color: var(--team-selection-text) !important;
    border: 1px solid var(--team-selection-border) !important;
    border-radius: 999px !important;
    box-shadow: var(--team-selection-shadow) !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) svg {
    fill: var(--team-selection-text) !important;
}


.team-content-shell {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100vh;
    min-height: 0;
    margin-top: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--team-app-gradient) fixed !important;
    color: var(--team-text);
    padding: clamp(18px, 2.2vw, 34px) !important;
}

    .team-content-shell .mud-container {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0px;
    color: var(--team-text) !important;
    background: transparent !important;
}

.team-content-shell .mud-grid {
    align-items: stretch;
}

.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    color: var(--team-text) !important;
    font-weight: 800 !important;
}

.mud-typography-body2,
.mud-typography-caption,
.mud-typography-subtitle2,
.mud-typography-color-secondary {
    color: var(--team-muted) !important;
}

.mud-paper,
.mud-card,
.team-card,
.stats-card,
.player-stats-card,
.team-stats-card,
.session-card,
.segment-kpi-card,
.segment-macro-card,
.segment-table-card,
.field-session-card,
.player-session-card {
    background: var(--team-surface) !important;
    border: 1px solid var(--team-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--team-card-shadow) !important;
    backdrop-filter: none !important;
}

.mud-card-content,
.team-card-content {
    color: var(--team-text-soft);
}

.mud-card-header,
.team-card-header,
.team-card-actions {
    background: transparent !important;
    border-color: var(--team-border) !important;
}

.mud-paper:hover,
.mud-card:hover,
.team-card:hover,
.session-card:hover {
    border-color: var(--team-border-strong) !important;
}

.session-card:hover,
.team-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--team-card-shadow-hover) !important;
}

.session-list-page {
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

.session-list-page > .mud-grid {
    gap: 18px;
}

.session-list-page .mud-typography-h4 {
    font-size: clamp(1.6rem, 2vw, 2.25rem) !important;
    line-height: 1.12 !important;
}

.session-list-page > .mud-grid > .mud-grid-item:nth-child(2) > .mud-paper {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.session-results-grid {
    margin-top: 18px !important;
}

.session-card {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    border: 1px solid transparent;
    width: 100%;
    min-height: 132px;
    overflow: hidden;
}

.session-card .mud-card-header {
    padding: 22px !important;
}

.session-card .mud-typography-h5 {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
}

.session-metrics {
    row-gap: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.mud-chip,
.mud-chip.mud-chip-outlined,
.mud-chip.mud-chip-filled {
    min-height: 34px;
    border-radius: 999px !important;
    background: var(--team-surface-soft) !important;
    border: 1px solid var(--team-border-strong) !important;
    color: var(--team-text-soft) !important;
    font-weight: 700;
}

.mud-chip .mud-chip-icon,
.mud-chip .mud-icon-root {
    color: var(--team-cyan) !important;
}

.mud-chip.mud-chip-size-small {
    min-height: 30px;
    font-size: .78rem;
}

.mud-button-root {
    min-height: 38px;
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 800 !important;
}

.mud-button-filled-primary,
.mud-button-filled-secondary {
    background: var(--team-primary-gradient) !important;
    color: #041015 !important;
    box-shadow: none !important;
}

.mud-button-outlined,
.mud-button-text {
    color: var(--team-text-soft) !important;
}

.mud-button-outlined {
    border-color: var(--team-border-strong) !important;
    background: var(--team-surface-soft) !important;
}

.mud-icon-button {
    border-radius: 999px !important;
    background: var(--team-surface-soft) !important;
    border: 1px solid var(--team-border) !important;
    color: var(--team-text-soft) !important;
}

.mud-icon-button:hover {
    border-color: var(--team-cyan) !important;
    color: var(--team-cyan) !important;
}

.mud-input-control {
    margin-top: 0 !important;
}

.mud-input-control .mud-input-control-input-container {
    min-height: 0;
    align-items: stretch;
}

.mud-input-label,
.mud-input-control .mud-input-label {
    color: var(--team-muted) !important;
    font-weight: 750 !important;
    letter-spacing: 0;
}

.mud-input.mud-input-text,
.mud-input.mud-input-outlined,
.mud-input.mud-input-filled {
    box-sizing: border-box;
    min-height: 44px;
    border-radius: 12px !important;
    color: var(--team-text) !important;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.mud-input.mud-input-outlined,
.mud-input.mud-input-filled {
    background: rgba(5, 18, 23, .72) !important;
}

.mud-input.mud-input-text {
    background: transparent !important;
}

.mud-input.mud-input-margin-dense {
    min-height: 38px;
}

input.mud-input-root,
textarea.mud-input-root,
.mud-select-input {
    box-sizing: border-box;
    min-height: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--team-text) !important;
    line-height: 1.25;
}

input.mud-input-root,
.mud-select-input {
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

textarea.mud-input-root {
    min-height: 96px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    resize: vertical;
}

.mud-input.mud-input-margin-dense input.mud-input-root,
.mud-input.mud-input-margin-dense .mud-select-input {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

input.mud-input-root::placeholder,
textarea.mud-input-root::placeholder {
    color: var(--team-muted) !important;
    opacity: 1;
}

.mud-input-outlined-border,
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(120, 169, 184, .26) !important;
    border-radius: 12px !important;
}

.mud-input:hover .mud-input-outlined-border,
.mud-input.mud-input-focused .mud-input-outlined-border,
.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--team-cyan) !important;
}

.mud-input-control:focus-within .mud-input.mud-input-outlined,
.mud-input-control:focus-within .mud-input.mud-input-filled {
    background: rgba(6, 24, 30, .84) !important;
    box-shadow: 0 0 0 2px rgba(37, 216, 239, .08);
}

.mud-input.mud-input-error .mud-input-outlined-border {
    border-color: var(--mud-palette-error) !important;
}

.mud-input.mud-disabled,
.mud-input-control.mud-disabled .mud-input {
    opacity: .62;
    background: rgba(5, 18, 23, .44) !important;
}

.mud-input-adornment,
.mud-input-adornment .mud-icon-root {
    color: var(--team-muted) !important;
}

.mud-select .mud-input-adornment-end {
    color: var(--team-muted) !important;
    margin-right: 8px;
}

.mud-divider {
    border-color: var(--team-border) !important;
}

.mud-popover.mud-popover-open:not(.mud-tooltip),
.mud-picker-static,
.mud-picker-paper {
    background: var(--team-popover-bg) !important;
    border: 1px solid var(--team-border) !important;
    border-radius: 18px !important;
    color: var(--team-text) !important;
    box-shadow: var(--team-card-shadow-hover) !important;
}

.mud-tabs-toolbar {
    background: var(--team-surface-soft) !important;
    border: 1px solid var(--team-border) !important;
    border-radius: 18px !important;
    min-height: 52px !important;
    padding: 6px !important;
}

.mud-tab {
    border-radius: 14px !important;
    min-height: 40px !important;
    color: var(--team-muted) !important;
    font-weight: 800 !important;
    text-transform: none !important;
}

.mud-tab.mud-tab-active {
    background: var(--team-selection-gradient) !important;
    color: var(--team-selection-text) !important;
    border: 1px solid var(--team-selection-border) !important;
}

.mud-tabs-toolbar .mud-tabs-toolbar-inner {
    min-height: 40px;
}

.mud-tabs-toolbar .mud-tabs-toolbar-content {
    border-bottom: 0 !important;
}

.mud-table,
.mud-table-container {
    background: var(--team-surface) !important;
    color: var(--team-text-soft) !important;
    border-color: var(--team-border) !important;
}

.mud-table-head,
.mud-table-head .mud-table-cell {
    background: var(--team-surface-soft) !important;
    color: var(--team-muted) !important;
    font-weight: 800 !important;
}

.mud-table-cell {
    border-color: var(--team-border) !important;
    color: var(--team-text-soft) !important;
}

.stats-card,
.player-stats-card,
.team-stats-card,
.segment-kpi-card {
    min-height: 116px;
    padding: 20px !important;
    text-align: left;
}

.team-stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--team-primary-gradient);
    display: none !important;
}

.team-stats-value,
.segment-kpi-value {
    color: var(--team-text) !important;
    font-size: clamp(1.7rem, 2.8vw, 2.8rem) !important;
    font-weight: 900 !important;
}

.team-stats-label,
.segment-kpi-label {
    color: var(--team-muted) !important;
    font-weight: 700 !important;
}

.chart-wrapper,
.performance-chart-container,
.team-chart-container {
    background: #08161b !important;
    border: 1px solid var(--team-border) !important;
    border-radius: 20px !important;
    padding: 18px !important;
    min-height: 260px;
    box-shadow: none !important;
}

.mud-chart svg text,
.mud-chart text {
    fill: var(--team-muted) !important;
}

.mud-chart svg path,
.mud-chart svg line {
    stroke-linecap: round;
}


.field-svg,
.paths-svg {
    filter: saturate(1.08) contrast(1.02);
}

.heat-grid,
.heatmapContainerWrapper,
.heatmapContainer {
    border-radius: 16px;
    overflow: hidden;
}

.segment-macro-card,
.segment-table-card {
    padding: 20px !important;
}


.map-mode-controls,
.map-mode-button-group,
.segment-view-controls {
    gap: 8px;
}

.map-mode-button-group .mud-button-root,
.segment-view-controls .mud-button-root {
    min-width: 0;
    padding: 0 16px !important;
}

.mud-progress-circular circle {
    color: var(--team-cyan) !important;
}

.mud-alert {
    border-radius: 12px !important;
    backdrop-filter: var(--team-card-blur);
    background: var(--team-surface-soft) !important;
    border: 1px solid var(--team-border) !important;
    color: var(--team-text-soft) !important;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 18px;
    background-color: #2a1216;
}

::-webkit-scrollbar-track {
    border-radius: 4px;
    background: #071116;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--team-surface-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--team-cyan);
}

@media (max-width: 960px) {
    .team-layout .mud-drawer {
        width: 88px !important;
        min-width: 88px !important;
    }

    .team-layout .mud-main-content {
        margin-left: 88px !important;
    }

    .team-drawer-wordmark,
    .tenant-name,
    .team-nav-menu .mud-nav-link .mud-nav-link-text {
        display: none !important;
    }

    .team-nav-menu .mud-nav-link {
        justify-content: center;
        padding: 0 !important;
    }

    .team-content-shell {
        padding: 16px !important;
    }

    .session-card .mud-card-header {
        padding: 18px !important;
    }

    .session-metrics {
        justify-content: flex-start !important;
    }
}

/* ===== Team shell refinements ===== */
.team-layout {
    height: 100vh;
    min-height: 100vh;
    width: 100%;
    max-width: none;
    position: relative;
    overflow: hidden;
    background: var(--team-app-gradient) fixed;
    --team-drawer-width: 280px;
}

.team-layout.team-menu-collapsed {
    --team-drawer-width: 88px;
}

.team-layout .mud-drawer.team-drawer {
    width: var(--team-drawer-width) !important;
    min-width: var(--team-drawer-width) !important;
    transition: width .22s ease, min-width .22s ease;
}

.team-layout .mud-main-content {
    margin-left: var(--team-drawer-width) !important;
    transition: margin-left .22s ease;
}

.team-layout .mud-drawer.team-drawer .mud-drawer-content {
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    padding: 18px 14px;
}

.team-drawer-grid {
    margin: 0 !important;
    width: 100% !important;
    overflow: hidden;
    padding: 26px 18px 18px;
    flex: 1 1 auto;
    align-content: start;
    min-height: 0;
}

.team-drawer-mark {
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-menu-toggle {
    width: 54px;
    height: 54px;
    border: 1px solid rgba(109, 177, 182, .2);
    border-radius: 16px;
    background: rgba(16, 200, 234, .05);
    color: inherit;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.team-menu-toggle:hover,
.team-menu-toggle:focus-visible {
    background: rgba(16, 200, 234, .12);
    border-color: rgba(16, 200, 234, .35);
    outline: none;
}

.team-menu-toggle:active {
    transform: scale(.98);
}

.team-menu-toggle .team-drawer-mark-svg {
    width: 38px;
    height: 38px;
}

.team-drawer-wordmark {
    display: flex;
    align-items: center;
    min-width: 0;
}

.team-drawer-wordmark-frame {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 0;
    margin: 0;
    width: 142px;
    max-width: 100%;
}

.team-nav-area {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 20px;
}

.team-nav-menu .mud-nav-link,
.team-nav-menu .mud-nav-link:hover,
.team-nav-menu .mud-nav-link:focus {
    text-decoration: none !important;
    border-radius: 999px !important;
    color: var(--team-text-soft) !important;
    font-weight: 700;
    justify-content: flex-start;
    min-height: 44px;
    margin: 5px 0;
    padding: 0 14px !important;
}

.team-nav-menu .mud-nav-link .mud-nav-link-icon {
    margin-inline-end: 12px !important;
}

.team-menu-collapsed .team-drawer-grid {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding-inline: 0;
    width: 100% !important;
}

.team-menu-collapsed .team-drawer-grid > .mud-grid-item,
.team-menu-collapsed .team-drawer-mark,
.team-menu-collapsed .team-nav-area {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100%;
}

.team-menu-collapsed .team-drawer-mark {
    height: 58px;
    padding: 0 !important;
}

.team-menu-collapsed .team-drawer-wordmark,
.team-menu-collapsed .tenant-profile-copy,
.team-menu-collapsed .team-nav-menu .mud-nav-link .mud-nav-link-text {
    display: none !important;
}

.team-menu-collapsed .team-nav-area {
    margin-top: 14px;
    padding: 0 !important;
}

.team-menu-collapsed .team-nav-menu {
    display: grid;
    justify-items: center;
    width: 100%;
}

.team-menu-collapsed .team-nav-menu .mud-nav-link,
.team-menu-collapsed .team-nav-menu .mud-nav-link:hover,
.team-menu-collapsed .team-nav-menu .mud-nav-link:focus {
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 1;
    overflow: hidden;
}

.team-menu-collapsed .team-nav-menu .mud-nav-link .mud-nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
}

.team-menu-collapsed .team-nav-menu .mud-nav-link svg {
    display: block;
    flex: 0 0 24px;
    width: 24px !important;
    height: 24px !important;
}

.tenant-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--mud-palette-text-primary);
    margin: auto 0 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
    background: transparent;
    border: 0px solid transparent;
}

.tenant-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(16, 200, 234, .1);
    border: 1px solid rgba(16, 200, 234, .22);
    color: var(--team-text);
    font-size: .78rem;
    font-weight: 800;
}

.tenant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tenant-profile-copy {
    min-width: 0;
}

.tenant-name,
.tenant-role,
.tenant-team {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.18 !important;
}

.tenant-name {
    color: var(--team-text) !important;
    font-size: .84rem !important;
}

.tenant-role {
    color: var(--team-cyan) !important;
    font-size: .7rem !important;
}

.tenant-team {
    color: var(--team-muted) !important;
    font-size: .68rem !important;
}

.tenant-footer .mud-icon-button-root {
    width: 38px;
    height: 38px;
}

.team-menu-collapsed .tenant-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    width: 58px;
    margin-inline: auto;
    padding: 8px 6px;
}

.team-menu-collapsed .tenant-footer .mud-icon-button-root {
    width: 40px;
    height: 40px;
}

.team-logo-upload {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(109, 177, 182, .2);
    border-radius: 14px;
    background: rgba(16, 200, 234, .05) !important;
    box-shadow: none !important;
}

.team-logo-preview {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--team-cyan);
    background: rgba(5, 15, 20, .62);
    border: 1px solid rgba(16, 200, 234, .24);
}

.team-logo-preview .mud-image {
    width: 100%;
    height: 100%;
}

.team-logo-upload-body {
    min-width: 0;
}

.team-logo-upload-body .mud-typography {
    margin: 0;
}

.team-logo-upload-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.settings-page {
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 0 !important;
}

.settings-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding: 0 2px 18px;
    border-bottom: 1px solid rgba(109, 177, 182, .16);
}

.settings-hero .mud-typography-h4 {
    font-size: clamp(1.8rem, 2.1vw, 2.35rem) !important;
    line-height: 1.08 !important;
}

.settings-stack {
    display: grid;
    gap: 18px;
}

.settings-stack > .mud-card {
    border-radius: 16px !important;
    overflow: hidden;
}

.settings-stack > .mud-card > .mud-card-header {
    padding: 18px 20px 12px !important;
}

.settings-stack > .mud-card > .mud-card-content {
    padding: 0 20px 20px !important;
}

.settings-page .mud-card .mud-card {
    border-radius: 14px !important;
    box-shadow: none !important;
    background: rgba(8, 19, 24, .54) !important;
    border-color: rgba(109, 177, 182, .15) !important;
}

.settings-page .mud-card[style*="padding:10px 20px"] {
    padding: 16px !important;
}

@media (max-width: 960px) {
    .team-layout {
        --team-drawer-width: 88px;
    }

    .team-drawer-wordmark,
    .tenant-profile-copy,
    .team-nav-menu .mud-nav-link .mud-nav-link-text {
        display: none !important;
    }

    .team-logo-upload {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .team-logo-upload-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .settings-hero {
        align-items: flex-start;
    }
}

/* ===== Session tactical map refresh ===== */
.team-full-page .field-container {
    height: auto !important;
    width: 100%;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

.team-full-page .session-map-item .field-container,
.team-full-page .session-map-item .mud-grid-item > .mud-paper.field-container {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: clamp(26px, 2.4vw, 46px) !important;
    overflow: visible;
}

.team-full-page .field-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
    border-radius: 12px;
    padding-inline: clamp(10px, 1.7vw, 28px);
}

.team-full-page .session-map-canvas {
    position: relative;
    min-width: 0;
    width: 100%;
}

.team-full-page .soccer-field.team-map-surface {
    position: relative;
    width: 100%;
    max-width: none;
    aspect-ratio: 105 / 68;
    min-height: 0;
    height: auto !important;
    margin-inline: 0;
    border-radius: 12px !important;
    overflow: hidden;
    background:
        linear-gradient(90deg,
            rgba(14, 72, 44, .24) 0 10%,
            rgba(7, 47, 35, .3) 10% 20%,
            rgba(14, 72, 44, .23) 20% 30%,
            rgba(7, 47, 35, .3) 30% 40%,
            rgba(14, 72, 44, .23) 40% 50%,
            rgba(7, 47, 35, .3) 50% 60%,
            rgba(14, 72, 44, .23) 60% 70%,
            rgba(7, 47, 35, .3) 70% 80%,
            rgba(14, 72, 44, .23) 80% 90%,
            rgba(7, 47, 35, .3) 90% 100%),
        #020908 !important;
    box-shadow: inset 0 0 0 1px rgba(221, 246, 230, .075);
}

.team-full-page .session-map-item .map-mode-controls-dock {
    position: relative;
    z-index: 48;
    display: block !important;
    width: 54px;
    height: 100%;
    min-height: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(0);
    align-self: stretch;
}

.team-full-page .session-map-item .map-mode-rail {
    position: relative;
    z-index: 54;
    width: 54px;
    height: 100%;
    min-height: 100%;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: clamp(14px, 1.6vw, 24px) 6px 10px;
    border: 1px solid rgba(120, 169, 184, .22);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 216, 239, .13), transparent 34%),
        linear-gradient(180deg, rgba(6, 28, 34, .76), rgba(2, 9, 11, .62));
    box-shadow: 0 22px 48px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(244, 247, 248, .04);
    backdrop-filter: blur(12px);
}

.team-full-page .session-map-item .map-mode-rail-item {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    overflow: visible;
    border: 1px solid transparent;
    background: transparent;
    transition: width .34s cubic-bezier(.2, .8, .2, 1) .08s, height .18s ease, padding .18s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.team-full-page .session-map-item .map-mode-rail-item.is-active {
    width: 46px;
    height: 44px;
    padding: 3px;
    border-color: var(--team-selection-border);
    background: color-mix(in srgb, var(--team-selection-accent) 12%, rgba(7, 20, 25, .72));
}

.team-full-page .session-map-item .map-mode-rail-item:hover,
.team-full-page .session-map-item .map-mode-rail-item:focus-within,
.team-full-page .session-map-item .map-mode-rail-item.is-hovered {
    width: clamp(220px, calc(100vw - 380px), 560px);
    height: 50px;
    padding: 3px 8px 3px 3px;
    border-color: rgba(37, 216, 239, .42);
    background:
        radial-gradient(circle at 18px 18px, rgba(37, 216, 239, .13), transparent 42px),
        rgba(4, 15, 18, .92);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(244, 247, 248, .04);
}

.team-full-page .session-map-item .map-mode-rail-button {
    position: relative;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(120, 169, 184, .28);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--team-text-soft);
    background: rgba(3, 10, 13, .72);
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .035);
    cursor: pointer;
    overflow: hidden;
    transition: width .32s cubic-bezier(.2, .8, .2, 1), transform .22s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.team-full-page .session-map-item .map-mode-rail-item:hover .map-mode-rail-button,
.team-full-page .session-map-item .map-mode-rail-item:focus-within .map-mode-rail-button,
.team-full-page .session-map-item .map-mode-rail-item.is-hovered .map-mode-rail-button {
    width: 38px;
    height: 38px;
    justify-content: center;
    gap: 0;
    padding-inline: 0;
    border-color: rgba(37, 216, 239, .62);
    color: #f4fbff;
    background: rgba(8, 31, 38, .9);
}

.team-full-page .session-map-item .map-mode-rail-button:hover,
.team-full-page .session-map-item .map-mode-rail-button.is-hovered {
    transform: none;
    border-color: rgba(37, 216, 239, .62);
    color: #f4fbff;
    background: rgba(8, 31, 38, .88);
}

.team-full-page .session-map-item .map-mode-rail-button.is-active {
    border-color: var(--team-selection-border);
    color: var(--team-selection-text);
    background: var(--team-selection-gradient);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--team-selection-accent) 16%, transparent), 0 0 0 5px color-mix(in srgb, var(--team-selection-accent) 7%, transparent);
}

.team-full-page .session-map-item .map-mode-rail-item:hover .map-mode-rail-button.is-active,
.team-full-page .session-map-item .map-mode-rail-item:focus-within .map-mode-rail-button.is-active,
.team-full-page .session-map-item .map-mode-rail-item.is-hovered .map-mode-rail-button.is-active {
    color: var(--team-selection-text);
    background: var(--team-selection-gradient);
}

.team-full-page .session-map-item .map-mode-rail-button span {
    position: static;
    transform: translateX(-4px);
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    color: var(--team-text);
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
    transition: max-width .18s ease .12s, opacity .14s ease .12s, transform .18s ease .12s;
}

.team-full-page .session-map-item .map-mode-rail-item:hover .map-mode-rail-button span,
.team-full-page .session-map-item .map-mode-rail-item:focus-within .map-mode-rail-button span,
.team-full-page .session-map-item .map-mode-rail-item.is-hovered .map-mode-rail-button span {
    max-width: 0;
    opacity: 0;
    transform: translateX(-4px);
}

.team-full-page .session-map-item .map-mode-rail-flyout {
    position: absolute;
    left: 50px;
    top: 50%;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    max-width: calc(100% - 50px);
    padding: 3px 5px 3px 0;
    border: 0;
    border-radius: 999px;
    color: var(--team-text);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-10px);
    transform-origin: left center;
    transition: opacity .13s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}

.team-full-page .session-map-item .map-mode-rail-item:hover .map-mode-rail-flyout,
.team-full-page .session-map-item .map-mode-rail-item:focus-within .map-mode-rail-flyout,
.team-full-page .session-map-item .map-mode-rail-item.is-hovered .map-mode-rail-flyout {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
    transition-delay: .12s;
}

.team-full-page .session-map-item .map-mode-rail-flyout strong {
    padding-inline: 9px 2px;
    color: var(--team-muted);
    font-size: .66rem;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
}

.team-full-page .session-map-item .map-mode-rail-flyout > div {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
}

.team-full-page .session-map-item .map-mode-rail-flyout .map-mode-subbutton {
    margin-block: 3px !important;
}

.team-full-page .session-map-item .map-mode-dock-panel {
    position: absolute;
    z-index: 50;
    width: fit-content;
    max-width: min(100%, 980px);
    left: calc(100% + 10px);
    bottom: 14px;
    margin-inline: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px;
    border: 1px solid rgba(120, 169, 184, .2);
    border-radius: 18px;
    background:
        radial-gradient(circle at 16% 0%, rgba(37, 216, 239, .085), transparent 42%),
        linear-gradient(180deg, rgba(6, 24, 30, .86), rgba(2, 9, 11, .76));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(244, 247, 248, .035);
    backdrop-filter: blur(12px);
}

.team-full-page .session-map-item .map-mode-dock-selectors {
    flex: 0 0 154px;
    width: 154px;
}

.team-full-page .session-map-item .map-mode-controls-dock .map-mode-select {
    width: 100%;
    min-width: 0 !important;
    max-width: none;
    margin: 0;
}

.team-full-page .session-map-item .map-mode-controls-dock .map-mode-select .mud-input-control,
.team-full-page .session-map-item .map-mode-controls-dock .map-mode-select .mud-input-root {
    margin-top: 0 !important;
}

.team-full-page .session-map-item .map-mode-active-group {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.team-full-page .session-map-item .map-mode-active-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--team-muted);
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(2, 8, 10, .44);
}

.team-full-page .session-map-item .map-mode-active-label .mud-icon-root {
    color: var(--team-cyan);
}

.team-full-page .session-map-item .map-mode-active-options {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
}

.team-full-page .soccer-field.team-map-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(0deg, rgba(244, 247, 248, .025), transparent 1px),
        linear-gradient(90deg, rgba(244, 247, 248, .018), transparent 1px);
    background-size: 100% 12.5%, 9.09% 100%;
    opacity: .28;
}

.team-full-page .field-svg,
.team-full-page .paths-svg,
.team-full-page .team-transition-svg,
.team-full-page .cod-map-svg,
.team-full-page .sprint-map-svg,
.team-full-page .transition-zone-grid,
.team-full-page .heat-grid,
.team-full-page .pitch-grid,
.team-full-page .player-paths,
.team-full-page .player-numbers,
.team-full-page .team-map-points,
.team-full-page .team-map-cells,
.team-full-page .heatmapContainerWrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.team-full-page .field-svg {
    display: block;
    z-index: 1;
}

.team-full-page .pitch-bg {
    fill: rgba(2, 9, 8, .58);
}

.team-full-page .pitch-line {
    stroke: rgba(221, 246, 230, .72);
    stroke-width: .2;
    vector-effect: non-scaling-stroke;
}

.team-full-page .pitch-dot {
    fill: rgba(221, 246, 230, .9);
}

.team-full-page .heat-grid,
.team-full-page .pitch-grid,
.team-full-page .team-map-cells,
.team-full-page .transition-zone-grid {
    z-index: 3;
    pointer-events: none;
}

.team-full-page .heat-cell {
    min-width: 4px;
    min-height: 4px;
    border-radius: 3px !important;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    cursor: pointer;
    pointer-events: auto;
}

.team-full-page .pitch-zone {
    position: absolute;
    border: 1px solid rgba(221, 246, 230, .1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--team-text);
    font-size: .68rem;
    font-weight: 800;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .82);
    transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}

.team-full-page .pitch-zone:hover {
    z-index: 5;
    border-color: rgba(221, 246, 230, .34) !important;
}

.team-full-page .zone-label {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(3, 9, 11, .62);
    border: 1px solid rgba(221, 246, 230, .12);
}

.team-full-page .heatmapContainerWrapper {
    z-index: 4;
    opacity: 0;
    transition: opacity .18s ease;
}

.team-full-page .heatmapContainerWrapper.is-visible {
    opacity: 1;
}

.team-full-page .metric-cloudmap-wrapper {
    z-index: 4;
}

.team-full-page .metric-cloudmap-container canvas {
    mix-blend-mode: screen;
    filter: saturate(1.18) contrast(1.08);
}

.team-full-page .native-heat-grid {
    z-index: 3;
}

.team-full-page .team-map-points,
.team-full-page .player-paths,
.team-full-page .cod-map-svg,
.team-full-page .sprint-map-svg,
.team-full-page .team-transition-svg {
    z-index: 6;
    pointer-events: none;
}

.team-full-page .player-numbers {
    z-index: 8;
    pointer-events: none;
}

.team-full-page .team-map-point {
    position: absolute;
    width: var(--point-size);
    height: var(--point-size);
    margin-left: calc(var(--point-size) / -2);
    margin-top: calc(var(--point-size) / -2);
    border-radius: 999px;
    background: var(--point-color);
    opacity: var(--point-opacity);
    border: 1px solid rgba(244, 247, 248, .42);
    box-shadow: 0 0 16px color-mix(in srgb, var(--point-color) 48%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #041015;
    font-size: .62rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: auto;
}

.team-full-page .team-map-point.metric-cloud-point {
    border: 0;
    color: transparent;
    filter: blur(.35px);
    mix-blend-mode: screen;
    box-shadow: 0 0 13px color-mix(in srgb, var(--point-color) 70%, transparent),
                0 0 26px color-mix(in srgb, var(--point-color) 32%, transparent);
}

.team-full-page .team-map-point.metric-cloud-point::after {
    content: "";
    position: absolute;
    inset: -55%;
    border-radius: inherit;
    background: radial-gradient(circle, color-mix(in srgb, var(--point-color) 42%, transparent) 0%, transparent 68%);
}

.team-full-page .team-map-point.cod-point,
.team-full-page .team-map-point.track-cod-marker {
    background: transparent;
    border-width: 2px;
    border-color: var(--point-color);
    box-shadow: 0 0 14px color-mix(in srgb, var(--point-color) 58%, transparent);
}

.team-full-page .team-map-point.sprint-launch-point,
.team-full-page .team-map-point.sprint-end-point,
.team-full-page .team-map-point.sprint-brake-point {
    color: #041015;
}

.team-full-page .team-map-point.clustered-point {
    border-color: rgba(244, 247, 248, .72);
    box-shadow: 0 0 18px color-mix(in srgb, var(--point-color) 62%, transparent),
                0 0 34px color-mix(in srgb, var(--point-color) 28%, transparent);
    font-size: .58rem;
}

.team-full-page .team-map-cell {
    position: absolute;
    border-radius: 2px;
    border: 0;
    mix-blend-mode: screen;
    box-shadow: 0 0 7px rgba(16, 200, 234, .08);
    cursor: pointer;
    pointer-events: auto;
}

.team-full-page .heat-cell:hover {
    transform: translate(-50%, -50%);
    z-index: auto;
    box-shadow: none;
}

.team-full-page .team-map-cell:hover {
    filter: none;
    box-shadow: 0 0 7px rgba(16, 200, 234, .08);
}

.team-full-page .heat-cell-detail-popover {
    position: absolute;
    z-index: 12;
    width: min(340px, calc(100% - 28px));
    max-height: min(430px, calc(100% - 28px));
    overflow: auto;
    padding: 14px;
    border: 1px solid rgba(120, 169, 184, .32);
    border-radius: 16px;
    background: rgba(8, 22, 27, .96);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .46);
    backdrop-filter: blur(10px);
    transform: translate(-50%, -12px);
    pointer-events: auto;
}

.team-full-page .heat-cell-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.team-full-page .heat-cell-detail-title {
    color: var(--team-text);
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.1;
}

.team-full-page .heat-cell-detail-subtitle {
    margin-top: 4px;
    color: var(--team-muted);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.25;
}

.team-full-page .heat-cell-detail-close {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(120, 169, 184, .32);
    border-radius: 999px;
    background: rgba(3, 9, 11, .72);
    color: var(--team-muted);
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.team-full-page .heat-cell-detail-close:hover {
    color: var(--team-text);
    border-color: rgba(16, 200, 234, .62);
}

.team-full-page .heat-cell-detail-content {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.team-full-page .heat-cell-radial {
    width: 108px;
    height: 108px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    box-shadow: 0 0 22px rgba(16, 200, 234, .16);
}

.team-full-page .heat-cell-radial > div {
    width: 68px;
    height: 68px;
    border-radius: inherit;
    display: grid;
    place-items: center;
    background: #08161b;
    border: 1px solid rgba(244, 247, 248, .1);
    text-align: center;
}

.team-full-page .heat-cell-radial strong,
.team-full-page .heat-cell-radial span {
    display: block;
    line-height: 1;
}

.team-full-page .heat-cell-radial strong {
    color: var(--team-text);
    font-size: .92rem;
    font-weight: 900;
}

.team-full-page .heat-cell-radial span {
    margin-top: 4px;
    color: var(--team-muted);
    font-size: .58rem;
    font-weight: 800;
}

.team-full-page .heat-cell-player-bars {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.team-full-page .heat-cell-player-row {
    min-width: 0;
}

.team-full-page .heat-cell-player-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    color: var(--team-text-soft);
    font-size: .72rem;
    font-weight: 850;
}

.team-full-page .heat-cell-player-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    box-shadow: 0 0 12px currentColor;
}

.team-full-page .heat-cell-player-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-full-page .heat-cell-player-bar-track {
    height: 7px;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(120, 169, 184, .16);
}

.team-full-page .heat-cell-player-bar-fill {
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
}

.team-full-page .heat-cell-player-samples {
    margin-top: 3px;
    color: var(--team-muted);
    font-size: .62rem;
    font-weight: 800;
}

.team-full-page .paths-svg,
.team-full-page .team-transition-svg {
    overflow: visible;
}

.team-full-page .paths-svg line,
.team-full-page .team-transition-svg line,
.team-full-page .team-transition-svg path {
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.team-full-page .track-player-base-line {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .75));
}

.team-full-page .track-metric-line {
    filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 45%, transparent));
}


.team-full-page .cod-angle-label {
    pointer-events: none;
    overflow: visible;
}


.team-full-page .cod-angle-label.cod-cluster-label {
    pointer-events: auto;
}


.team-full-page .cod-detail-popover {
    position: absolute;
    z-index: 12;
    width: min(980px, calc(100% - 28px));
    max-height: min(680px, calc(100% - 28px));
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(120, 169, 184, .32);
    border-radius: 16px;
    background: rgba(8, 22, 27, .96);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .46);
    backdrop-filter: blur(10px);
    transform: translate(-50%, -12px);
    pointer-events: auto;
    touch-action: none;
}

.team-full-page .sprint-detail-popover {
    width: min(1160px, calc(100% - 28px));
}

.team-full-page .cod-detail-popover .cod-detail-grid,
.team-full-page .cod-detail-popover .cod-zoom-panel,
.team-full-page .cod-detail-main,
.team-full-page .cod-detail-side {
    touch-action: auto;
}

.team-full-page .cod-detail-layout {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: 14px;
    align-items: start;
    margin-top: 10px;
}

.team-full-page .cod-detail-main {
    min-width: 0;
    max-height: min(570px, calc(100vh - 240px));
    overflow: auto;
    padding-right: 2px;
}

.team-full-page .cod-detail-side {
    min-width: 0;
    position: sticky;
    top: 0;
}

.team-full-page .cod-detail-drag-handle {
    cursor: grab;
    user-select: none;
}

.team-full-page .cod-detail-popover.is-dragging .cod-detail-drag-handle {
    cursor: grabbing;
}

.team-full-page .sprint-detail-popover.is-dragging .sprint-detail-drag-handle {
    cursor: grabbing;
}

.team-full-page .sprint-detail-drag-handle {
    cursor: grab;
    user-select: none;
}

.team-full-page .cod-zoom-panel {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(120, 169, 184, .2);
}

.team-full-page .cod-detail-side .cod-zoom-panel {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.team-full-page .cod-segment-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 9px;
}

.team-full-page .cod-segment-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(120, 169, 184, .28);
    border-radius: 999px;
    background: rgba(3, 9, 11, .58);
    color: var(--team-muted);
    font-size: .66rem;
    font-weight: 900;
    cursor: pointer;
}

.team-full-page .cod-segment-tab span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    box-shadow: 0 0 12px currentColor;
}

.team-full-page .cod-segment-tab strong {
    color: var(--team-text);
    font-size: .64rem;
}

.team-full-page .cod-segment-tab.is-active {
    color: var(--team-selection-text);
    border-color: var(--team-selection-border);
    background: var(--team-selection-gradient);
}

.team-full-page .cod-zoom-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 9px;
}

.team-full-page .cod-zoom-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin: -2px 0 9px;
}

.team-full-page .cod-zoom-controls span {
    color: var(--team-muted);
    font-size: .66rem;
    font-weight: 900;
}

.team-full-page .cod-zoom-tab {
    min-width: 34px;
    min-height: 28px;
    border: 1px solid rgba(120, 169, 184, .28);
    border-radius: 999px;
    background: rgba(3, 9, 11, .56);
    color: var(--team-muted);
    font-size: .68rem;
    font-weight: 900;
    cursor: pointer;
}

.team-full-page .cod-zoom-tab.is-active {
    color: var(--team-selection-text);
    border-color: var(--team-selection-border);
    background: var(--team-selection-gradient);
}

.team-full-page .cod-zoom-tab:disabled {
    opacity: .36;
    cursor: not-allowed;
}

.team-full-page .cod-kinematic-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    margin: 10px 0 12px;
}

.team-full-page .cod-flow-card,
.team-full-page .cod-flow-center {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(120, 169, 184, .22);
    border-radius: 14px;
    background: rgba(3, 9, 11, .52);
}

.team-full-page .cod-flow-entry {
    box-shadow: inset 3px 0 0 rgba(16, 200, 234, .86);
}

.team-full-page .cod-flow-exit {
    box-shadow: inset 3px 0 0 rgba(138, 242, 31, .9);
}

.team-full-page .cod-flow-center {
    display: grid;
    place-items: center;
    min-width: 150px;
    text-align: center;
    background: linear-gradient(135deg, rgba(16, 200, 234, .16), rgba(138, 242, 31, .18));
}

.team-full-page .cod-flow-card span,
.team-full-page .cod-flow-center span,
.team-full-page .cod-flow-card small,
.team-full-page .cod-flow-center small {
    display: block;
    color: var(--team-muted);
    font-size: .62rem;
    font-weight: 850;
    line-height: 1.15;
}

.team-full-page .cod-flow-card strong,
.team-full-page .cod-flow-center strong {
    display: block;
    margin: 4px 0 3px;
    color: var(--team-text);
    font-size: .88rem;
    font-weight: 950;
    line-height: 1;
}

.team-full-page .cod-zoom-field {
    width: 100%;
    height: clamp(280px, 46vh, 460px);
    display: block;
    border: 1px solid rgba(120, 169, 184, .22);
    border-radius: 14px;
    background: #03090b;
}

.team-full-page .cod-zoom-field .pitch-line {
    opacity: .34;
}

.team-full-page .cod-zoom-track {
    fill: none;
    stroke-width: .2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .58;
    filter: drop-shadow(0 0 4px currentColor);
    vector-effect: none;
}

.team-full-page .cod-zoom-item line,
.team-full-page .cod-zoom-item path {
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: none;
}

.team-full-page .cod-zoom-label {
    fill: #f4f7f8;
    paint-order: stroke;
    stroke: rgba(3, 9, 11, .88);
    stroke-width: .18;
    font-size: 1.2px;
    font-weight: 950;
}

.team-full-page .cod-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.team-full-page .cod-detail-metric {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(120, 169, 184, .2);
    border-radius: 12px;
    background: rgba(3, 9, 11, .46);
}

.team-full-page .cod-detail-metric span,
.team-full-page .cod-detail-metric strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-full-page .cod-detail-metric span {
    color: var(--team-muted);
    font-size: .64rem;
    font-weight: 850;
}

.team-full-page .cod-detail-metric strong {
    margin-top: 4px;
    color: var(--team-text);
    font-size: .82rem;
    font-weight: 950;
}

@media (max-width: 980px) {
    .team-full-page .cod-detail-popover {
        overflow: auto;
    }

    .team-full-page .cod-detail-layout {
        grid-template-columns: 1fr;
    }

    .team-full-page .cod-detail-main {
        max-height: none;
        overflow: visible;
    }

    .team-full-page .cod-detail-side {
        position: static;
    }

    .team-full-page .cod-zoom-field {
        height: 280px;
    }
}

.team-full-page .session-player-controls {
    display: grid;
    grid-template-columns: auto auto auto minmax(180px, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(120, 169, 184, .24);
    border-radius: 14px;
    background: rgba(3, 9, 11, .48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.team-full-page .session-player-controls.has-track-metric {
    grid-template-columns: minmax(178px, 230px) auto auto auto minmax(160px, 1fr) auto auto;
}

.team-full-page .session-track-metric-select {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--metric-color, #10c8ea) 34%, rgba(120, 169, 184, .22));
    border-radius: 999px;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--metric-color, #10c8ea) 18%, transparent), transparent 55%),
        rgba(2, 9, 12, .72);
    color: var(--team-text);
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .045);
}

.team-full-page .session-track-metric-select .mud-icon-root {
    color: var(--metric-color, var(--team-cyan));
    font-size: 1rem;
}

.team-full-page .session-track-metric-select.is-map-schema {
    --metric-color: #10c8ea;
}

.team-full-page .session-track-metric-select.is-transition-filter {
    --metric-color: #8af21f;
}

.team-full-page .session-track-metric-select select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    color: var(--team-text);
    background: transparent;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

.team-full-page .session-track-metric-select option {
    color: #f4f7f8;
    background: #061215;
}

.team-full-page .session-player-controls-floating {
    position: absolute;
    top: auto;
    bottom: 24px;
    left: 50%;
    z-index: 40;
    width: min(calc(100% - 142px), 1040px);
    margin: 0;
    opacity: .9;
    transform: translateX(-50%) scale(.986);
    transform-origin: center bottom;
    background:
        linear-gradient(180deg, rgba(6, 22, 27, .86), rgba(2, 8, 10, .72));
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
    transition:
        opacity .2s ease,
        transform .2s cubic-bezier(.2, .8, .2, 1),
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.team-full-page .session-player-controls-floating:hover,
.team-full-page .session-player-controls-floating:focus-within {
    opacity: 1;
    transform: translateX(-50%) scale(1.008);
    border-color: rgba(37, 216, 239, .42);
    background:
        linear-gradient(180deg, rgba(8, 28, 34, .93), rgba(2, 8, 10, .82));
    box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
}

.team-full-page .session-player-controls-toggle.mud-icon-button {
    position: absolute;
    right: 16px;
    bottom: 24px;
    z-index: 42;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(37, 216, 239, .34);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(16, 200, 234, .18), rgba(138, 242, 31, .18)),
        rgba(3, 12, 15, .88);
    color: var(--team-text);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
    backdrop-filter: blur(10px);
}

.team-full-page .session-player-controls-toggle.mud-icon-button:hover,
.team-full-page .session-player-controls-toggle.mud-icon-button:focus-visible {
    border-color: rgba(37, 216, 239, .62);
    background:
        linear-gradient(135deg, rgba(16, 200, 234, .26), rgba(138, 242, 31, .24)),
        rgba(4, 18, 23, .92);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .32), 0 0 22px rgba(16, 200, 234, .16);
}

.team-full-page .session-player-collapse-button.mud-icon-button {
    width: 30px;
    height: 30px;
    padding: 4px !important;
    border: 1px solid rgba(120, 169, 184, .2);
    border-radius: 999px;
    background: rgba(3, 9, 11, .48);
    color: var(--team-muted);
}

.team-full-page .session-player-collapse-button.mud-icon-button:hover,
.team-full-page .session-player-collapse-button.mud-icon-button:focus-visible {
    border-color: rgba(37, 216, 239, .42);
    background: rgba(37, 216, 239, .1);
    color: var(--team-text);
}

.team-full-page .session-player-buttons {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.team-full-page .session-player-button {
    border: 1px solid rgba(120, 169, 184, .22);
    background: rgba(9, 24, 30, .78);
    color: var(--team-text);
}

.team-full-page .session-player-button.mud-icon-button {
    width: 32px;
    height: 32px;
    padding: 4px !important;
}

.team-full-page .session-player-button.is-primary {
    color: var(--team-selection-text);
    background: var(--team-selection-gradient);
    box-shadow: 0 0 18px color-mix(in srgb, var(--team-selection-accent) 20%, transparent);
}

.team-full-page .session-player-button.is-primary.mud-icon-button {
    width: 42px;
    height: 42px;
}

.team-full-page .session-player-time {
    min-width: 38px;
    color: var(--team-text);
    font-size: .68rem;
    font-weight: 900;
    text-align: center;
}

.team-full-page .session-player-data-loader {
    position: absolute;
    top: -9px;
    right: 108px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(37, 216, 239, .32);
    border-radius: 50%;
    background: rgba(3, 12, 15, .92);
    color: var(--team-cyan);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .26);
    pointer-events: none;
}

.team-full-page .session-player-data-loader .mud-progress-circular {
    width: 14px !important;
    height: 14px !important;
}

.team-full-page .session-player-slider {
    min-width: 0;
}

.team-full-page .session-player-speed-control {
    position: relative;
    display: grid;
    align-content: center;
    gap: 1px;
    width: 96px;
    min-width: 92px;
    height: 42px;
    padding: 4px 24px 5px 11px;
    border: 1px solid rgba(120, 169, 184, .22);
    border-radius: 999px;
    background: rgba(3, 9, 11, .58);
    color: var(--team-text);
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .045);
}

.team-full-page .session-player-speed-control::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 13px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--team-muted);
    pointer-events: none;
}

.team-full-page .session-player-speed-control span {
    color: var(--team-muted);
    font-size: .58rem;
    font-weight: 850;
    line-height: 1;
}

.team-full-page .session-player-speed-control select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    appearance: none;
    color: var(--team-text);
    background: transparent;
    font-size: .82rem;
    font-weight: 950;
    line-height: 1.1;
    cursor: pointer;
}

.team-full-page .session-player-speed-control:focus-within {
    border-color: rgba(37, 216, 239, .58);
    background: rgba(5, 18, 23, .78);
    box-shadow: 0 0 0 2px rgba(37, 216, 239, .08), inset 0 1px 0 rgba(244, 247, 248, .05);
}

.team-full-page .session-player-speed-control option {
    color: #f4f7f8;
    background: #061215;
}

.team-full-page .session-player-strip-panel {
    padding: 7px;
    margin-bottom: 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.team-full-page .session-player-strip-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.team-full-page .session-player-search {
    flex: 1 1 420px;
    max-width: none;
    min-width: min(340px, 100%);
}

.team-full-page .session-player-search .mud-input-control {
    margin-top: 0;
}

.team-full-page .session-player-search .mud-input-control-input-container {
    min-height: 44px;
}

.team-full-page .session-player-search .mud-input-root {
    min-height: 44px;
    height: 44px;
    border-radius: 999px !important;
    background: rgba(3, 9, 11, .48);
}

.team-full-page .session-player-search .mud-input-slot {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
}

.team-full-page .session-player-search input {
    height: 44px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: .88rem;
    font-weight: 650;
}

.team-full-page .session-player-search .mud-input-adornment {
    margin-top: 0;
}

.team-full-page .session-player-strip-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 5px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 999px;
    background: rgba(2, 8, 10, .36);
}

.team-full-page .session-player-strip-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    border: 1px solid rgba(120, 169, 184, .24);
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 0%, rgba(37, 216, 239, .16), transparent 60%),
        rgba(3, 9, 11, .7);
    color: var(--team-text);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 900;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.team-full-page .session-player-count-button {
    min-width: 90px;
    padding: 0 12px;
    color: var(--team-muted) !important;
    white-space: nowrap;
}

.team-full-page .session-player-count-button:hover,
.team-full-page .session-player-count-button:focus-visible {
    color: var(--team-text) !important;
}

.team-full-page .session-player-scroll-button {
    width: 34px;
    padding: 0;
    border-radius: 50% !important;
}

.team-full-page .session-player-strip-actions button:hover,
.team-full-page .session-player-strip-actions button:focus-visible {
    border-color: rgba(37, 216, 239, .68);
    background: rgba(37, 216, 239, .14);
    transform: translateY(-1px);
    outline: none;
}

.team-full-page .session-player-strip-viewport {
    position: relative;
    overflow: hidden;
}

.team-full-page .session-player-strip-viewport::before,
.team-full-page .session-player-strip-viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: clamp(12px, 1.8vw, 34px);
    pointer-events: none;
}

.team-full-page .session-player-strip-viewport::before {
    left: 0;
    background: linear-gradient(90deg, rgba(5, 16, 20, .22), transparent);
}

.team-full-page .session-player-strip-viewport::after {
    right: 0;
    background: linear-gradient(270deg, rgba(5, 16, 20, .22), transparent);
}

.team-full-page .session-player-card-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, calc((100% - 42px) / 4));
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 2px 4px;
    transform: translateX(var(--player-strip-drag-offset, 0));
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
    will-change: transform, scroll-position;
}

.team-full-page .session-player-card-strip.is-drag-ready,
.team-full-page .session-player-card-strip.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.team-full-page .session-player-card-strip.is-bouncing {
    transition: transform .34s cubic-bezier(.17, 1.34, .38, 1);
}

.team-full-page .session-player-card-strip.is-dragging .session-player-mini-card {
    transform: translateY(-2px) scale(1.006);
}

.team-full-page .session-player-card-strip::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.team-full-page .session-player-mini-card {
    min-width: 0;
    scroll-snap-align: start;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--player-color) 44%, rgba(120, 169, 184, .18));
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--player-color) 18%, transparent), transparent 44%),
        rgba(3, 9, 11, .58);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease;
}

.team-full-page .session-player-mini-card.is-hidden {
    opacity: .48;
    filter: grayscale(.72);
    border-style: dashed;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--player-color) 8%, transparent), transparent 44%),
        rgba(3, 9, 11, .36);
}

.team-full-page .session-player-mini-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.team-full-page .session-player-mini-number {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--player-color) 22%, rgba(3, 9, 11, .68));
    color: var(--team-text);
    font-size: .78rem;
    font-weight: 950;
}

.team-full-page .session-player-mini-position {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--team-muted);
    font-size: .66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.team-full-page .session-player-visibility-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--player-color) 38%, rgba(120, 169, 184, .22));
    border-radius: 999px;
    color: var(--team-text);
    background: rgba(3, 9, 11, .58);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}

.team-full-page .session-player-visibility-button:hover,
.team-full-page .session-player-visibility-button:focus-visible {
    transform: translateY(-1px);
    border-color: var(--player-color);
    background: color-mix(in srgb, var(--player-color) 18%, rgba(3, 9, 11, .76));
    outline: none;
}

.team-full-page .session-player-mini-card.is-hidden .session-player-visibility-button {
    color: var(--team-muted);
    border-style: dashed;
}

.team-full-page .session-player-mini-name {
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--team-text);
    font-size: .92rem;
    font-weight: 950;
}

.team-full-page .session-player-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

.team-full-page .session-player-mini-stats span {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 10px;
    background: rgba(3, 9, 11, .52);
}

.team-full-page .session-player-mini-stats small,
.team-full-page .session-player-mini-stats strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-full-page .session-player-mini-stats small {
    color: var(--team-muted);
    font-size: .58rem;
    font-weight: 850;
}

.team-full-page .session-player-mini-stats strong {
    margin-top: 4px;
    color: var(--team-text);
    font-size: .72rem;
    font-weight: 950;
}

.team-full-page .session-player-report-button {
    width: 100%;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 11px;
    border: 1px solid color-mix(in srgb, var(--player-color) 50%, rgba(120, 169, 184, .18));
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--player-color) 24%, rgba(3, 9, 11, .8)), rgba(3, 9, 11, .62));
    color: var(--team-text);
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

.team-full-page .session-player-report-button:hover,
.team-full-page .session-player-report-button:focus-visible {
    border-color: var(--player-color);
    outline: none;
}

@media (max-width: 820px) {
    .team-full-page .session-player-strip-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .team-full-page .session-player-search {
        flex-basis: auto;
        min-width: 100%;
    }

    .team-full-page .session-player-strip-actions {
        align-self: flex-end;
    }
}

.team-full-page .sprint-route-group {
    pointer-events: auto;
    cursor: pointer;
    transition: opacity .16s ease, filter .16s ease;
}

.team-full-page .sprint-route-segment,
.team-full-page .sprint-zoom-segment,
.team-full-page .sprint-route-arrow {
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: none;
    filter: drop-shadow(0 0 3px currentColor);
    transition: opacity .16s ease, stroke-width .16s ease, filter .16s ease;
}

.team-full-page .sprint-map-svg:has(.sprint-route-group:hover) .sprint-route-group:not(:hover) {
    opacity: .16;
}

.team-full-page .sprint-route-group:hover .sprint-route-segment,
.team-full-page .sprint-route-group:hover .sprint-route-arrow {
    opacity: 1;
    filter: drop-shadow(0 0 5px currentColor);
}

.team-full-page .sprint-route-arrow {
    pointer-events: none;
}

.team-full-page .sprint-route-node {
    stroke: rgba(3, 9, 11, .82);
    stroke-width: .18;
    vector-effect: none;
    filter: drop-shadow(0 0 5px rgba(244, 247, 248, .26));
}

.team-full-page .sprint-start-node {
    stroke: rgba(16, 200, 234, .94);
}

.team-full-page .sprint-end-node {
    stroke: rgba(239, 68, 68, .96);
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, .52));
}

.team-full-page .sprint-brake-node {
    stroke: rgba(245, 196, 0, .96);
    filter: drop-shadow(0 0 8px rgba(245, 196, 0, .5));
}

.team-full-page .sprint-route-label {
    pointer-events: none;
}

.team-full-page .sprint-route-label div {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid rgba(120, 169, 184, .42);
    border-radius: 999px;
    background: rgba(3, 9, 11, .88);
    color: #f4f7f8;
    font-size: 1.35px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .36);
}

.team-full-page .sprint-route-label span {
    font-weight: 950;
}

.team-full-page .sprint-route-label strong {
    color: #f4f7f8;
    font-size: 1.48px;
}

.team-full-page .sprint-zoom-field {
    height: clamp(300px, 48vh, 510px);
}

.team-full-page .sprint-zoom-cod {
    cursor: pointer;
    pointer-events: auto;
}

.team-full-page .sprint-zoom-cod:hover .cod-angle-arc,
.team-full-page .sprint-zoom-cod:focus .cod-angle-arc {
    filter: drop-shadow(0 0 7px currentColor);
}

.team-full-page .sprint-detail-layout {
    display: grid;
    grid-template-columns: minmax(420px, .95fr) minmax(460px, 1.05fr);
    gap: 14px;
    align-items: start;
    margin-top: 10px;
}

.team-full-page .sprint-detail-main {
    min-width: 0;
    max-height: min(570px, calc(100vh - 240px));
    overflow: auto;
    padding-right: 2px;
}

.team-full-page .sprint-detail-side {
    min-width: 0;
    position: sticky;
    top: 0;
}

.team-full-page .sprint-cod-links {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(120, 169, 184, .2);
    border-radius: 14px;
    background: rgba(3, 9, 11, .44);
}

.team-full-page .sprint-cod-links-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: var(--team-muted);
    font-size: .66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.team-full-page .sprint-cod-links-head strong {
    color: var(--team-text);
    font-size: .78rem;
}

.team-full-page .sprint-cod-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.team-full-page .sprint-cod-link {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--cod-link-color) 44%, rgba(120, 169, 184, .2));
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cod-link-color) 18%, rgba(3, 9, 11, .84)), rgba(3, 9, 11, .62));
    color: var(--team-text);
    text-align: left;
    cursor: pointer;
    box-shadow: inset 3px 0 0 var(--cod-link-color);
}

.team-full-page .sprint-cod-link:hover,
.team-full-page .sprint-cod-link:focus-visible {
    border-color: var(--cod-link-color);
    transform: translateY(-1px);
}

.team-full-page .sprint-cod-link span,
.team-full-page .sprint-cod-link em {
    display: block;
    overflow: hidden;
    white-space: normal;
}

.team-full-page .sprint-cod-link span {
    font-size: .78rem;
    font-weight: 950;
    line-height: 1.15;
}

.team-full-page .sprint-cod-link em {
    margin-top: 3px;
    color: var(--team-muted);
    font-size: .62rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1.2;
}

@media (max-width: 980px) {
    .team-full-page .session-player-controls {
        grid-template-columns: 1fr;
    }

    .team-full-page .session-player-buttons {
        justify-content: center;
    }

    .team-full-page .sprint-detail-layout {
        grid-template-columns: 1fr;
    }

    .team-full-page .sprint-detail-main {
        max-height: none;
        overflow: visible;
    }

    .team-full-page .sprint-detail-side {
        position: static;
    }

    .team-full-page .sprint-cod-link-grid {
        grid-template-columns: 1fr;
    }
}


.team-full-page .transition-zone-grid {
    z-index: 2;
}

.team-full-page .transition-zone-tile {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 4px;
    border: 1px solid rgba(16, 200, 234, .18);
    background:
        linear-gradient(135deg, rgba(16, 200, 234, .035), rgba(138, 242, 31, .025)),
        rgba(2, 8, 10, .08);
    overflow: hidden;
}

.team-full-page .transition-zone-slices {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--transition-slice-columns, 2), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 2px;
    padding: 3px;
}

.team-full-page .transition-zone-slice {
    min-width: 0;
    display: grid;
    place-items: center;
    border-radius: 4px;
    box-shadow: inset 0 0 16px currentColor;
}

.team-full-page .transition-zone-slice.is-active {
    box-shadow: inset 0 0 22px currentColor, 0 0 18px currentColor;
}

.team-full-page .transition-zone-slice span {
    max-width: calc(100% - 6px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 4px;
    border: 1px solid rgba(244, 247, 248, .18);
    border-radius: 999px;
    background: rgba(3, 9, 11, .66);
    color: #f4f7f8;
    font-size: .56rem;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .7);
}

.team-full-page .transition-zone-slice.is-active span {
    border-color: rgba(244, 247, 248, .52);
    background: rgba(244, 247, 248, .16);
}

.team-full-page .transition-zone-tile > span {
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(3, 9, 11, .6);
    color: rgba(207, 227, 234, .62);
    font-size: .58rem;
    font-weight: 850;
    line-height: 1;
}

.team-full-page .team-transition-svg path {
    filter: drop-shadow(0 0 2px currentColor);
}

.team-full-page .paths-svg circle {
    stroke: rgba(3, 9, 11, .78);
    stroke-width: .22;
    vector-effect: non-scaling-stroke;
}

.team-full-page .player-number {
    transform: translate(-50%, -50%);
    border: 1px solid rgba(244, 247, 248, .65);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.team-full-page .map-mode-toolbar .mud-button-root {
    min-height: 36px;
    padding-inline: 14px !important;
}

.team-full-page .map-mode-toolbar {
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
    min-width: min(100%, 720px);
    align-items: stretch;
}

.team-full-page .map-mode-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 52px;
    min-height: 58px;
    flex: 0 1 52px;
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .22);
    border-radius: 18px;
    background: radial-gradient(circle at 18% 0%, rgba(37, 216, 239, .09), transparent 42%), rgba(2, 8, 10, .52);
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .035), 0 14px 30px rgba(0, 0, 0, .18);
    transition: flex-basis .34s cubic-bezier(.2, .8, .2, 1), flex-grow .34s cubic-bezier(.2, .8, .2, 1), border-color .22s ease, background .22s ease, box-shadow .22s ease;
    flex-direction: row;
    padding: 10px 12px;
}

.team-full-page .map-mode-group-label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 28px;
    color: var(--team-muted);
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
    min-height: 36px;
}

.team-full-page .map-mode-group-options {
    display: flex;
    flex: 1 1 auto;
    gap: 6px;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-8px);
    transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
    flex-wrap: nowrap;
}

.team-full-page .map-mode-subbutton {
    min-width: 0 !important;
    white-space: nowrap;
}

.team-full-page .track-mode-select {
    align-self: flex-start;
}

.team-full-page .map-analysis-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: clamp(26px, 2.4vw, 40px) !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(37, 216, 239, .10), transparent 34%),
        linear-gradient(180deg, rgba(8, 27, 31, .86) 0%, rgba(6, 21, 25, .72) 68%, rgba(4, 13, 16, .28) 88%, rgba(4, 13, 16, 0) 100%) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.team-full-page .map-analysis-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--team-border);
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, .48) 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, .48) 86%, transparent 100%);
}

.team-full-page .map-analysis-header {
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.team-full-page .map-summary-grid {
    margin-top: 4px !important;
}

.team-full-page .map-summary-card {
    height: 100%;
    background: #08161b !important;
    border: 1px solid var(--team-border) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.team-full-page .map-summary-value {
    margin-top: 8px;
    color: var(--team-text) !important;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.1;
}

.team-full-page .map-legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.team-full-page .map-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--team-border);
    background: #08161b;
    color: var(--team-muted);
    font-size: .78rem;
    font-weight: 800;
}

.team-full-page .map-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.team-full-page .position-cloud-detail {
    display: grid;
    gap: 16px;
    margin-top: 0;
}

.team-full-page .position-cloud-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-top: 2px;
}

.team-full-page .position-cloud-section-head.is-sub {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(120, 169, 184, .16);
}

.team-full-page .position-cloud-section-head span,
.team-full-page .position-intensity-table th,
.team-full-page .position-shape-card span,
.team-full-page .position-centroid-card header span {
    color: var(--team-soft);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.team-full-page .position-cloud-section-head strong {
    display: block;
    margin-top: 2px;
    color: var(--team-text);
    font-size: 1.02rem;
    font-weight: 950;
}

.team-full-page .position-cloud-section-head em {
    color: var(--team-muted);
    font-size: .78rem;
    font-style: normal;
    font-weight: 800;
}

.team-full-page .position-intensity-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 16px;
    background:
        radial-gradient(circle at 4% 0%, rgba(37, 216, 239, .08), transparent 34%),
        rgba(2, 8, 10, .44);
}

.team-full-page .position-intensity-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.team-full-page .position-intensity-table th,
.team-full-page .position-intensity-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(120, 169, 184, .12);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.team-full-page .position-intensity-table tbody tr:last-child td {
    border-bottom: 0;
}

.team-full-page .position-intensity-table tbody tr:hover {
    background: rgba(37, 216, 239, .035);
}

.team-full-page .position-player-cell {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 190px;
}

.team-full-page .position-player-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 12px currentColor;
}

.team-full-page .position-player-cell strong,
.team-full-page .position-centroid-row span:nth-child(2) {
    display: block;
    max-width: 170px;
    overflow: hidden;
    color: var(--team-text);
    font-size: .82rem;
    font-weight: 950;
    text-overflow: ellipsis;
}

.team-full-page .position-player-cell em,
.team-full-page .position-intensity-table td span,
.team-full-page .position-centroid-row em {
    color: var(--team-muted);
    font-size: .68rem;
    font-style: normal;
    font-weight: 850;
}

.team-full-page .position-bucket-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 25px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--bucket-color) 42%, rgba(120, 169, 184, .16));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bucket-color) 16%, rgba(3, 9, 11, .78));
    color: var(--team-text);
    font: inherit;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .18s ease, filter .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}

.team-full-page .position-bucket-head:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--bucket-color) 76%, rgba(244, 247, 248, .12));
    background: color-mix(in srgb, var(--bucket-color) 24%, rgba(3, 9, 11, .78));
}

.team-full-page .position-bucket-head.is-muted {
    opacity: .62;
    filter: grayscale(.82);
    border-style: dashed;
    color: rgba(207, 227, 234, .62);
    background: rgba(3, 9, 11, .54);
}

.team-full-page .position-percent-cell {
    display: grid;
    gap: 5px;
    min-width: 74px;
}

.team-full-page .position-intensity-table td.is-position-bucket-muted .position-percent-cell,
.team-full-page .position-role-bar-row.is-position-bucket-muted {
    opacity: .24;
    filter: grayscale(1) blur(.45px);
}

.team-full-page .position-percent-cell strong,
.team-full-page .position-total-cell {
    color: var(--team-text);
    font-size: .82rem;
    font-weight: 950;
}

.team-full-page .position-mini-bar-track,
.team-full-page .position-role-bar-track {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(120, 169, 184, .14);
}

.team-full-page .position-mini-bar-fill,
.team-full-page .position-role-bar-fill {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
}

.team-full-page .position-empty-cell {
    padding: 18px !important;
    color: var(--team-muted);
    text-align: center !important;
}

.team-full-page .position-mini-cloud-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    gap: 12px;
}

.team-full-page .position-mini-cloud-card,
.team-full-page .position-role-card,
.team-full-page .position-centroid-card,
.team-full-page .position-shape-card {
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 16px;
    background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--bucket-color, var(--role-color, var(--shape-accent, #10c8ea))) 12%, transparent), transparent 34%),
        rgba(2, 8, 10, .46);
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .035);
}

.team-full-page .position-mini-cloud-card {
    position: relative;
    overflow: hidden;
}

.team-full-page .position-mini-cloud-card.is-position-bucket-muted {
    border-color: rgba(120, 169, 184, .10);
    background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--bucket-color) 4%, transparent), transparent 34%),
        rgba(2, 8, 10, .34);
}

.team-full-page .position-mini-cloud-card.is-position-bucket-muted header strong,
.team-full-page .position-mini-cloud-card.is-position-bucket-muted header em,
.team-full-page .position-mini-cloud-card.is-position-bucket-muted .position-bucket-dot {
    opacity: .38;
    filter: grayscale(1);
}

.team-full-page .position-mini-cloud-card.is-position-bucket-muted .position-mini-field {
    opacity: .22;
    filter: grayscale(1) blur(.35px);
}

.team-full-page .position-mini-cloud-card.is-position-bucket-muted::after {
    content: "ritmo nascosto";
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 4;
    padding: 5px 9px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 999px;
    color: rgba(207, 227, 234, .62);
    background: rgba(2, 8, 10, .78);
    font-size: .62rem;
    font-weight: 950;
    text-transform: uppercase;
}

.team-full-page .position-mini-cloud-card header,
.team-full-page .position-role-card header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 12px 0;
}

.team-full-page .position-mini-cloud-card header strong,
.team-full-page .position-role-card header strong,
.team-full-page .position-centroid-card header strong {
    color: var(--team-text);
    font-size: .86rem;
    font-weight: 950;
}

.team-full-page .position-mini-cloud-card header em,
.team-full-page .position-role-card header em {
    margin-left: auto;
    color: var(--team-muted);
    font-size: .66rem;
    font-style: normal;
    font-weight: 850;
}

.team-full-page .position-bucket-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--bucket-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--bucket-color) 56%, transparent);
}

.team-full-page .position-mini-field,
.team-full-page .position-role-field {
    position: relative;
    aspect-ratio: 105 / 68;
    min-height: 210px;
    height: auto;
    margin: 10px 12px 12px;
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .14);
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(17, 82, 49, .20) 0 10%, rgba(7, 47, 35, .26) 10% 20%, rgba(17, 82, 49, .20) 20% 30%, rgba(7, 47, 35, .26) 30% 40%, rgba(17, 82, 49, .20) 40% 50%, rgba(7, 47, 35, .26) 50% 60%, rgba(17, 82, 49, .20) 60% 70%, rgba(7, 47, 35, .26) 70% 80%, rgba(17, 82, 49, .20) 80% 90%, rgba(7, 47, 35, .26) 90% 100%),
        #020908;
}

.team-full-page .position-role-field {
    min-height: 190px;
    margin: 0;
}

.team-full-page .position-mini-field-svg,
.team-full-page .position-mini-cloud-canvas {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
}

.team-full-page .position-mini-field-svg {
    z-index: 1;
}

.team-full-page .position-mini-cloud-canvas {
    z-index: 2;
    mix-blend-mode: screen;
}

.team-full-page .position-mini-cloud-canvas canvas {
    mix-blend-mode: screen;
    filter: saturate(1.14) contrast(1.05);
}

.team-full-page .position-mini-heat-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
}

.team-full-page .position-mini-heat-cell {
    position: absolute;
    border-radius: 2px;
    outline: 1px solid rgba(244, 247, 248, .025);
    transition: opacity .16s ease, filter .16s ease;
}

.team-full-page .position-mini-pitch-bg {
    fill: rgba(2, 9, 8, .45);
}

.team-full-page .position-mini-pitch-line {
    stroke: rgba(221, 246, 230, .32);
    stroke-width: .24;
    vector-effect: non-scaling-stroke;
}

.team-full-page .position-mini-pitch-dot {
    fill: rgba(221, 246, 230, .65);
}

.team-full-page .position-role-switcher {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding: 4px 0 8px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
}

.team-full-page .position-role-switcher::-webkit-scrollbar {
    display: none;
}

.team-full-page .position-role-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(120, 169, 184, .28);
    border-radius: 999px;
    color: var(--team-text);
    background: rgba(2, 9, 12, .66);
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .04);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.team-full-page .position-role-tab:hover,
.team-full-page .position-role-tab.is-active {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--role-color) 72%, white 8%);
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--role-color) 30%, transparent), transparent 58%),
        rgba(2, 9, 12, .72);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18), 0 0 0 1px color-mix(in srgb, var(--role-color) 24%, transparent);
}

.team-full-page .position-role-tab span {
    color: var(--role-color);
    font-size: .75rem;
    font-weight: 950;
    text-transform: uppercase;
}

.team-full-page .position-role-tab strong {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 999px;
    color: #031009;
    background: linear-gradient(135deg, #25d4ff, #7cff2a);
    font-size: .68rem;
    font-weight: 950;
}

.team-full-page .position-role-focus {
    display: grid;
    grid-template-columns: minmax(250px, .45fr) minmax(0, 1.55fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--role-color) 14%, transparent), transparent 38%),
        linear-gradient(135deg, rgba(6, 24, 28, .78), rgba(2, 8, 10, .62));
}

.team-full-page .position-role-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(120, 169, 184, .14);
    border-radius: 14px;
    background: rgba(1, 7, 9, .42);
}

.team-full-page .position-role-summary header {
    display: grid;
    gap: 5px;
}

.team-full-page .position-role-summary header span {
    color: var(--role-color);
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.team-full-page .position-role-summary header strong {
    color: var(--team-text);
    font-size: 1.05rem;
    font-weight: 950;
}

.team-full-page .position-role-summary header em {
    color: var(--team-muted);
    font-size: .72rem;
    font-style: normal;
    font-weight: 850;
}

.team-full-page .position-role-bars {
    display: grid;
    gap: 7px;
}

.team-full-page .position-role-bar-row {
    display: grid;
    grid-template-columns: 58px minmax(70px, 1fr) 48px;
    align-items: center;
    gap: 8px;
}

.team-full-page .position-role-bar-row span,
.team-full-page .position-role-bar-row strong {
    color: var(--team-muted);
    font-size: .68rem;
    font-weight: 900;
}

.team-full-page .position-role-bar-row strong {
    color: var(--team-text);
    text-align: right;
}

.team-full-page .position-role-player-detail {
    display: grid;
    gap: 9px;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid rgba(120, 169, 184, .13);
}

.team-full-page .position-role-player-detail > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.team-full-page .position-role-player-detail > header span {
    color: var(--team-text);
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.team-full-page .position-role-player-detail > header em {
    color: var(--team-muted);
    font-size: .64rem;
    font-style: normal;
    font-weight: 850;
}

.team-full-page .position-role-player-list {
    display: grid;
    gap: 8px;
    max-height: 360px;
    overflow: auto;
    padding-right: 2px;
    scrollbar-width: thin;
}

.team-full-page .position-role-player-card {
    display: grid;
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(120, 169, 184, .12);
    border-radius: 12px;
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--player-color) 12%, transparent), transparent 48%),
        rgba(2, 8, 10, .38);
}

.team-full-page .position-role-player-head {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.team-full-page .position-role-player-head strong {
    overflow: hidden;
    color: var(--team-text);
    font-size: .74rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-full-page .position-role-player-head em {
    color: var(--team-soft);
    font-size: .66rem;
    font-style: normal;
    font-weight: 900;
}

.team-full-page .position-role-player-buckets {
    display: grid;
    gap: 5px;
}

.team-full-page .position-role-player-buckets span {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 45px;
    align-items: center;
    gap: 7px;
    color: var(--team-muted);
    font-size: .61rem;
    font-weight: 900;
}

.team-full-page .position-role-player-buckets b {
    overflow: hidden;
    color: var(--team-muted);
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-full-page .position-role-player-buckets i {
    display: block;
    height: 5px;
    min-width: 2px;
    border-radius: 999px;
    box-shadow: 0 0 10px color-mix(in srgb, currentColor 18%, transparent);
}

.team-full-page .position-role-player-buckets em {
    color: var(--team-text);
    font-style: normal;
    text-align: right;
}

.team-full-page .position-role-gait-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 12px;
    min-width: 0;
}

.team-full-page .position-mini-cloud-card.is-role-gait .position-mini-field {
    min-height: 185px;
}

.team-full-page .heat-performance-detail {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.team-full-page .heat-performance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.team-full-page .heat-performance-summary-card,
.team-full-page .heat-role-card {
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--metric-color, var(--role-color, #10c8ea)) 12%, transparent), transparent 34%),
        rgba(2, 8, 10, .46);
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .035);
}

.team-full-page .heat-performance-summary-card > header,
.team-full-page .heat-role-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 0;
}

.team-full-page .heat-performance-summary-card > header span,
.team-full-page .heat-role-card > header span {
    color: var(--team-soft);
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.team-full-page .heat-performance-summary-card > header strong,
.team-full-page .heat-role-card > header strong {
    display: block;
    margin-top: 3px;
    color: var(--team-text);
    font-size: .9rem;
    font-weight: 950;
    line-height: 1.25;
}

.team-full-page .heat-performance-summary-card > header em,
.team-full-page .heat-role-card > header em {
    color: var(--team-muted);
    font-size: .68rem;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

.team-full-page .heat-performance-summary-body {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
    gap: 14px;
    padding: 10px 16px 16px;
}

.team-full-page .heat-performance-table-wrap,
.team-full-page .heat-role-table-wrap {
    align-self: stretch;
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 216, 239, .42) rgba(3, 12, 15, .62);
}

.team-full-page .heat-role-table-wrap {
    max-height: 430px;
}

.team-full-page .heat-performance-table-wrap::-webkit-scrollbar,
.team-full-page .heat-role-table-wrap::-webkit-scrollbar {
    width: 8px;
}

.team-full-page .heat-performance-table-wrap::-webkit-scrollbar-track,
.team-full-page .heat-role-table-wrap::-webkit-scrollbar-track {
    background: rgba(3, 12, 15, .62);
    border-radius: 999px;
}

.team-full-page .heat-performance-table-wrap::-webkit-scrollbar-thumb,
.team-full-page .heat-role-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(37, 216, 239, .42);
    border-radius: 999px;
}

.team-full-page .heat-performance-table {
    min-width: 100%;
}

.team-full-page .heat-performance-table.is-compact {
    min-width: 0;
}

.team-full-page .heat-performance-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(2, 13, 16, .96);
    box-shadow: 0 1px 0 rgba(120, 169, 184, .16);
}

.team-full-page .heat-performance-cell-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 999px;
    background: rgba(2, 8, 10, .56);
    color: var(--team-text);
    font-size: .68rem;
    font-weight: 950;
    white-space: nowrap;
}

.team-full-page .heat-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.team-full-page .heat-role-body {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(250px, .9fr);
    gap: 12px;
    padding: 10px 16px 16px;
}

.team-full-page .heat-role-side {
    display: grid;
    align-content: start;
    gap: 12px;
}

.team-full-page .heat-performance-card {
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--metric-color) 12%, transparent), transparent 34%),
        rgba(2, 8, 10, .46);
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .035);
}

.team-full-page .heat-performance-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 0;
}

.team-full-page .heat-performance-card header span {
    color: var(--team-soft);
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.team-full-page .heat-performance-card header strong {
    display: block;
    margin-top: 3px;
    color: var(--team-text);
    font-size: .9rem;
    font-weight: 950;
    line-height: 1.25;
}

.team-full-page .heat-performance-card header em {
    color: var(--team-muted);
    font-size: .68rem;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

.team-full-page .heat-performance-body {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(220px, .92fr);
    gap: 12px;
    padding: 10px 16px 16px;
}

.team-full-page .heat-performance-field {
    position: relative;
    aspect-ratio: 105 / 68;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .14);
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(17, 82, 49, .16) 0 10%, rgba(7, 47, 35, .24) 10% 20%, rgba(17, 82, 49, .16) 20% 30%, rgba(7, 47, 35, .24) 30% 40%, rgba(17, 82, 49, .16) 40% 50%, rgba(7, 47, 35, .24) 50% 60%, rgba(17, 82, 49, .16) 60% 70%, rgba(7, 47, 35, .24) 70% 80%, rgba(17, 82, 49, .16) 80% 90%, rgba(7, 47, 35, .24) 90% 100%),
        #020908;
}

.team-full-page .heat-performance-field.is-role {
    min-height: 180px;
}

.team-full-page .heat-performance-cell-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.team-full-page .heat-performance-cell {
    position: absolute;
    display: block;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 6px;
    mix-blend-mode: screen;
}

.team-full-page .heat-performance-side {
    display: grid;
    align-content: start;
    gap: 12px;
}

.team-full-page .heat-performance-zone-row span {
    color: var(--team-muted);
    font-size: .66rem;
    font-weight: 850;
}

.team-full-page .heat-performance-zone-row strong {
    display: block;
    margin-top: 8px;
    color: var(--team-text);
    font-size: .88rem;
    font-weight: 950;
}

.team-full-page .heat-performance-zone-chart {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 14px;
    background: rgba(2, 8, 10, .54);
}

.team-full-page .heat-performance-zone-row {
    display: grid;
    grid-template-columns: minmax(0, 108px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.team-full-page .heat-performance-zone-track {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(120, 169, 184, .14);
}

.team-full-page .heat-performance-zone-fill {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
}

.team-full-page .cloud-metric-detail {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(120, 169, 184, .14);
}

.team-full-page .cloud-metric-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.team-full-page .cloud-metric-section-head.is-controls-only {
    justify-content: flex-end;
}

.team-full-page .cloud-metric-section-head.is-sub {
    padding-top: 4px;
}

.team-full-page .cloud-metric-section-head > div:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.team-full-page .cloud-metric-section-head span,
.team-full-page .cloud-metric-table-card header span,
.team-full-page .cloud-metric-chart-card header span {
    color: var(--team-muted);
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.team-full-page .cloud-metric-section-head strong,
.team-full-page .cloud-metric-table-card header strong,
.team-full-page .cloud-metric-chart-card header strong {
    color: var(--team-text);
    font-size: 1.02rem;
    font-weight: 950;
}

.team-full-page .cloud-metric-section-head em {
    color: var(--team-muted);
    font-size: .76rem;
    font-style: normal;
    font-weight: 850;
}

.team-full-page .cloud-metric-control-stack {
    display: grid;
    justify-items: end;
    gap: 8px;
    max-width: min(720px, 58vw);
}

.team-full-page .cloud-metric-select-wrap {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: min(300px, 42vw);
}

.team-full-page .cloud-metric-select-wrap.is-compact {
    min-width: 140px;
}

.team-full-page .cloud-metric-select-wrap span,
.team-full-page .cloud-metric-range-head span {
    color: var(--team-muted);
    font-size: .62rem;
    font-weight: 950;
    text-transform: uppercase;
}

.team-full-page .cloud-metric-select-wrap select {
    width: 100%;
    min-height: 38px;
    padding: 0 48px 0 14px;
    border: 1px solid color-mix(in srgb, var(--metric-color, #10c8ea) 36%, rgba(120, 169, 184, .22));
    border-radius: 999px;
    color: var(--team-text);
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--metric-color, #10c8ea) 16%, transparent), transparent 54%),
        rgba(2, 9, 12, .78);
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .04);
    font-size: .78rem;
    font-weight: 950;
    outline: none;
    cursor: pointer;
    appearance: none;
}

.team-full-page .cloud-metric-select-wrap::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--team-muted);
    border-bottom: 2px solid var(--team-muted);
    pointer-events: none;
    transform: rotate(45deg);
}

.team-full-page .cloud-metric-select-wrap select:focus {
    border-color: color-mix(in srgb, var(--metric-color, #10c8ea) 72%, white 8%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--metric-color, #10c8ea) 26%, transparent), inset 0 1px 0 rgba(244, 247, 248, .04);
}

.team-full-page .cloud-metric-range-control {
    display: grid;
    gap: 8px;
    width: min(420px, 48vw);
    padding: 10px 12px 12px;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 16px;
    background: rgba(2, 9, 12, .52);
}

.team-full-page .cloud-metric-range-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.team-full-page .cloud-metric-range-head strong {
    color: var(--team-text);
    font-size: .72rem;
    font-weight: 950;
}

.team-full-page .cloud-metric-range-slider {
    position: relative;
    height: 26px;
}

.team-full-page .cloud-metric-range-track,
.team-full-page .cloud-metric-range-fill {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 4px;
    border-radius: 999px;
    transform: translateY(-50%);
}

.team-full-page .cloud-metric-range-track {
    background: rgba(120, 169, 184, .18);
}

.team-full-page .cloud-metric-range-fill {
    left: var(--range-start);
    right: var(--range-end);
    background: linear-gradient(90deg, #25d4ff, color-mix(in srgb, var(--metric-color, #10c8ea) 72%, #7cff2a));
    box-shadow: 0 0 16px color-mix(in srgb, var(--metric-color, #10c8ea) 32%, transparent);
}

.team-full-page .cloud-metric-range-slider input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 26px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    appearance: none;
}

.team-full-page .cloud-metric-range-slider input[type="range"]::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(1, 9, 11, .92);
    border-radius: 999px;
    background: linear-gradient(135deg, #25d4ff, #7cff2a);
    box-shadow: 0 0 0 1px rgba(244, 247, 248, .14), 0 8px 20px rgba(0, 0, 0, .28);
    cursor: grab;
    pointer-events: auto;
    appearance: none;
}

.team-full-page .cloud-metric-range-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(1, 9, 11, .92);
    border-radius: 999px;
    background: linear-gradient(135deg, #25d4ff, #7cff2a);
    box-shadow: 0 0 0 1px rgba(244, 247, 248, .14), 0 8px 20px rgba(0, 0, 0, .28);
    cursor: grab;
    pointer-events: auto;
}

.team-full-page .cloud-metric-control-row {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
}

.team-full-page .cloud-metric-control-row.is-selects {
    align-items: end;
    justify-content: flex-end;
    gap: 10px;
    overflow: visible;
}

.team-full-page .cloud-metric-control-row::-webkit-scrollbar {
    display: none;
}

.team-full-page .cloud-metric-control-row.is-compact {
    max-width: 520px;
}

.team-full-page .cloud-metric-pill,
.team-full-page .cloud-metric-chart-switcher button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid rgba(120, 169, 184, .28);
    border-radius: 999px;
    color: var(--team-text);
    background: rgba(2, 9, 12, .68);
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .04);
    font-size: .7rem;
    font-weight: 950;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.team-full-page .cloud-metric-pill:hover,
.team-full-page .cloud-metric-pill.is-active,
.team-full-page .cloud-metric-chart-switcher button:hover,
.team-full-page .cloud-metric-chart-switcher button.is-active {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--metric-color, #10c8ea) 72%, white 8%);
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--metric-color, #10c8ea) 34%, transparent), transparent 58%),
        rgba(2, 9, 12, .74);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18), 0 0 0 1px color-mix(in srgb, var(--metric-color, #10c8ea) 22%, transparent);
}

.team-full-page .cloud-metric-main-grid {
    display: grid;
    grid-template-columns: minmax(320px, .78fr) minmax(0, 1.62fr);
    gap: 12px;
    min-width: 0;
}

.team-full-page .cloud-metric-main-grid.is-percentile-detail {
    grid-template-columns: minmax(260px, .52fr) minmax(0, 1.72fr);
}

.team-full-page .cloud-metric-table-card,
.team-full-page .cloud-metric-chart-card,
.team-full-page .cloud-metric-stage-card {
    min-width: 0;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 16px;
    background:
        radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--metric-color, #10c8ea) 13%, transparent), transparent 40%),
        rgba(2, 8, 10, .48);
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .035);
}

.team-full-page .cloud-metric-table-card,
.team-full-page .cloud-metric-chart-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 13px;
}

.team-full-page .cloud-metric-table-card header,
.team-full-page .cloud-metric-chart-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.team-full-page .cloud-metric-chart-card header.cloud-metric-chart-actions {
    justify-content: flex-end;
    min-height: 32px;
    margin-bottom: 8px;
}

.team-full-page .cloud-metric-fullscreen-button.mud-icon-button {
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--metric-color, #10c8ea) 34%, rgba(120, 169, 184, .18));
    border-radius: 999px;
    color: var(--team-text);
    background: rgba(2, 9, 12, .66);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.team-full-page .cloud-metric-fullscreen-button.mud-icon-button:hover,
.team-full-page .cloud-metric-fullscreen-button.mud-icon-button:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--metric-color, #10c8ea) 68%, white 8%);
    background: color-mix(in srgb, var(--metric-color, #10c8ea) 16%, rgba(2, 9, 12, .76));
}

.team-full-page .cloud-metric-table-card header div,
.team-full-page .cloud-metric-chart-card header div:first-child {
    display: grid;
    gap: 3px;
}

.team-full-page .cloud-metric-chart-card header > em {
    color: var(--team-muted);
    font-size: .68rem;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

.team-full-page .cloud-metric-table-wrap {
    min-height: 0;
    overflow: auto;
    border: 1px solid rgba(120, 169, 184, .12);
    border-radius: 12px;
    background: rgba(1, 7, 9, .36);
    scrollbar-width: thin;
}

.team-full-page .cloud-metric-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

.team-full-page .cloud-metric-percentile-table {
    min-width: 320px;
}

.team-full-page .cloud-metric-table th,
.team-full-page .cloud-metric-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(120, 169, 184, .10);
    color: var(--team-text);
    font-size: .74rem;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
}

.team-full-page .cloud-metric-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--team-muted);
    background: rgba(2, 12, 14, .92);
    font-size: .64rem;
    font-weight: 950;
    text-transform: uppercase;
}

.team-full-page .cloud-metric-percentile-table th:last-child,
.team-full-page .cloud-metric-percentile-table td:last-child {
    text-align: right;
}

.team-full-page .cloud-metric-table tr:last-child td {
    border-bottom: 0;
}

.team-full-page .cloud-metric-table tbody tr:hover {
    background: rgba(37, 216, 239, .035);
}

.team-full-page .cloud-metric-table .is-average-row td {
    border-top: 1px solid color-mix(in srgb, var(--metric-color, #10c8ea) 30%, rgba(120, 169, 184, .18));
    background:
        radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--metric-color, #10c8ea) 12%, transparent), transparent 56%),
        rgba(2, 12, 14, .56);
}

.team-full-page .cloud-metric-player-cell {
    display: inline-grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 170px;
}

.team-full-page .cloud-metric-player-cell strong,
.team-full-page .cloud-metric-player-cell em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-full-page .cloud-metric-player-cell strong {
    color: var(--team-text);
    font-size: .78rem;
    font-weight: 950;
}

.team-full-page .cloud-metric-player-cell em {
    color: var(--team-muted);
    font-size: .64rem;
    font-style: normal;
    font-weight: 850;
}

.team-full-page .cloud-metric-chart-switcher {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.team-full-page .cloud-metric-chart-switcher button {
    min-height: 28px;
    padding-inline: 10px;
    font-size: .65rem;
}

.team-full-page .cloud-metric-chart-shell {
    position: relative;
    min-height: 285px;
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .12);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(9, 32, 36, .62), rgba(1, 7, 9, .76)),
        radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--metric-color, #10c8ea) 13%, transparent), transparent 42%);
}

.team-full-page .cloud-metric-line-chart,
.team-full-page .cloud-metric-bar-chart {
    position: absolute;
    inset: 18px 18px 28px 18px;
    width: calc(100% - 36px);
    height: calc(100% - 46px);
    overflow: visible;
}

.team-full-page .cloud-chart-grid {
    stroke: rgba(120, 169, 184, .13);
    stroke-width: .35;
    vector-effect: non-scaling-stroke;
}

.team-full-page .cloud-chart-zero {
    stroke: rgba(180, 231, 242, .22);
    stroke-width: .48;
    stroke-dasharray: 2.4 2.4;
    vector-effect: non-scaling-stroke;
}

.team-full-page .cloud-chart-line {
    fill: none;
    stroke: var(--series-color);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .52;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--series-color) 34%, transparent));
    vector-effect: non-scaling-stroke;
}

.team-full-page .cloud-chart-line.is-average {
    stroke-width: 2.4;
    opacity: .96;
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--series-color) 55%, transparent));
}

.team-full-page .cloud-chart-bar {
    fill: var(--series-color);
    opacity: .82;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--series-color) 42%, transparent));
    vector-effect: non-scaling-stroke;
}

.team-full-page .cloud-chart-bar.is-average {
    opacity: .96;
    stroke: color-mix(in srgb, var(--series-color) 62%, rgba(224, 246, 250, .72));
    stroke-width: .42;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--series-color) 58%, transparent));
}

.team-full-page .cloud-metric-axis {
    position: absolute;
    inset: 16px 12px 16px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--team-muted);
    font-size: .63rem;
    font-weight: 950;
    pointer-events: none;
}

.team-full-page .cloud-metric-chart-legend {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.team-full-page .cloud-metric-legend-button {
    font: inherit;
    cursor: pointer;
    transition: opacity .18s ease, filter .18s ease, border-color .18s ease, background .18s ease;
}

.team-full-page .cloud-metric-legend-button.is-average {
    cursor: pointer;
}

.team-full-page .cloud-metric-legend-button.is-static {
    cursor: default;
}

.team-full-page .cloud-metric-legend-button.is-muted {
    opacity: .42;
    filter: grayscale(.86);
    border-style: dashed;
}

.team-full-page .cloud-metric-empty-state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    color: var(--team-muted);
    font-size: .78rem;
    font-weight: 900;
    text-align: center;
}

.team-full-page .cloud-metric-chart-legend .map-legend-chip.is-average {
    border-color: color-mix(in srgb, var(--metric-color, #10c8ea) 52%, rgba(120, 169, 184, .22));
    background: color-mix(in srgb, var(--metric-color, #10c8ea) 14%, rgba(2, 9, 12, .76));
}

.team-full-page .cloud-metric-chart-card:fullscreen,
.team-full-page .cloud-metric-chart-card:-webkit-full-screen {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100vw;
    height: 100vh;
    padding: clamp(16px, 2vw, 28px);
    border-radius: 0;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--metric-color, #10c8ea) 14%, transparent), transparent 38%),
        rgba(2, 8, 10, .96);
}

.team-full-page .cloud-metric-chart-card:fullscreen .cloud-metric-chart-shell,
.team-full-page .cloud-metric-chart-card:-webkit-full-screen .cloud-metric-chart-shell {
    min-height: 0;
    height: 100%;
}

.team-full-page .cloud-metric-stage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 12px;
}

.team-full-page .cloud-metric-role-switcher {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 6px 0 10px;
    scrollbar-width: none;
}

.team-full-page .cloud-metric-role-switcher::-webkit-scrollbar {
    display: none;
}

.team-full-page .cloud-metric-stage-card {
    padding: 10px;
}

.team-full-page .cloud-metric-stage-card header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}

.team-full-page .cloud-metric-stage-card header span {
    display: inline-grid;
    min-width: 58px;
    min-height: 26px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--metric-color, #10c8ea) 46%, rgba(120, 169, 184, .16));
    border-radius: 999px;
    color: #031009;
    background: linear-gradient(135deg, #25d4ff, #7cff2a);
    font-size: .66rem;
    font-weight: 950;
}

.team-full-page .cloud-metric-stage-card header strong {
    overflow: hidden;
    color: var(--team-text);
    font-size: .76rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-full-page .cloud-metric-stage-card header em {
    color: var(--team-muted);
    font-size: .64rem;
    font-style: normal;
    font-weight: 850;
}

.team-full-page .cloud-metric-stage-card .position-mini-field {
    min-height: 190px;
    margin: 0;
}

@media (max-width: 1280px) {
    .team-full-page .cloud-metric-main-grid {
        grid-template-columns: 1fr;
    }

    .team-full-page .cloud-metric-stage-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 860px) {
    .team-full-page .cloud-metric-section-head {
        display: grid;
    }

    .team-full-page .cloud-metric-control-stack {
        justify-items: start;
        max-width: 100%;
    }

    .team-full-page .cloud-metric-control-row {
        justify-content: flex-start;
    }

    .team-full-page .cloud-metric-stage-grid {
        grid-template-columns: 1fr;
    }
}

.team-full-page .position-shape-layout {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.08fr) minmax(260px, .72fr);
    gap: 12px;
    align-items: start;
    overflow: hidden;
}

.team-full-page .position-shape-visual-card {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    min-width: 0;
    overflow: hidden;
    padding: 13px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 16px;
    background:
        radial-gradient(circle at 22% 5%, rgba(16, 200, 234, .12), transparent 38%),
        rgba(2, 8, 10, .48);
}

.team-full-page .position-shape-visual-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.team-full-page .position-shape-visual-card header div {
    display: grid;
    gap: 4px;
}

.team-full-page .position-shape-visual-card header span {
    color: var(--team-muted);
    font-size: .67rem;
    font-weight: 950;
    letter-spacing: 0;
}

.team-full-page .position-shape-visual-card header strong {
    color: var(--team-text);
    font-size: .98rem;
    font-weight: 950;
}

.team-full-page .position-shape-visual-card header em {
    color: var(--team-muted);
    font-size: .66rem;
    font-style: normal;
    font-weight: 850;
}

.team-full-page .position-shape-field {
    position: relative;
    width: min(100%, 430px);
    aspect-ratio: 68 / 105;
    min-height: clamp(380px, 42vw, 620px);
    max-height: min(70vh, 660px);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .14);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(17, 82, 49, .20) 0 10%, rgba(7, 47, 35, .26) 10% 20%, rgba(17, 82, 49, .20) 20% 30%, rgba(7, 47, 35, .26) 30% 40%, rgba(17, 82, 49, .20) 40% 50%, rgba(7, 47, 35, .26) 50% 60%, rgba(17, 82, 49, .20) 60% 70%, rgba(7, 47, 35, .26) 70% 80%, rgba(17, 82, 49, .20) 80% 90%, rgba(7, 47, 35, .26) 90% 100%),
        #020908;
}

.team-full-page .position-shape-field .position-mini-field-svg {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
}

.team-full-page .position-shape-radial-svg {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.team-full-page .position-shape-radial-svg .position-shape-layer {
    position: static;
    pointer-events: none;
    transition: opacity .2s ease, filter .2s ease, stroke-width .2s ease, fill .2s ease;
}

.team-full-page .position-shape-centroid-hull {
    fill: rgba(37, 212, 255, .12);
    stroke: rgba(37, 212, 255, .72);
    stroke-width: .55;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 10px rgba(37, 212, 255, .18));
}

.team-full-page .position-shape-radial-svg .position-shape-player-link {
    position: static;
    height: auto;
    transform: none;
    stroke: var(--player-color);
    stroke-width: .42;
    stroke-linecap: round;
    background: none;
    box-shadow: none;
    opacity: .48;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--player-color) 34%, transparent));
}

.team-full-page .position-shape-layer,
.team-full-page .position-shape-stretch,
.team-full-page .position-shape-rail,
.team-full-page .position-shape-centroid,
.team-full-page .position-shape-label,
.team-full-page .position-shape-footprint,
.team-full-page .position-shape-ratio-badge,
.team-full-page .position-shape-player-link,
.team-full-page .position-shape-player-dot {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    transition: opacity .2s ease, filter .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.team-full-page .position-shape-footprint {
    z-index: 2;
    border: 1px dashed rgba(37, 212, 255, .42);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(37, 212, 255, .10), rgba(124, 255, 42, .055)),
        rgba(37, 212, 255, .035);
    box-shadow: inset 0 0 22px rgba(37, 212, 255, .08), 0 0 18px rgba(37, 212, 255, .08);
}

.team-full-page .position-shape-stretch {
    z-index: 4;
    border: 1px solid rgba(124, 255, 42, .58);
    border-radius: 999px;
    background: rgba(124, 255, 42, .08);
    box-shadow: 0 0 26px rgba(124, 255, 42, .16);
}

.team-full-page .position-shape-rail {
    z-index: 5;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37, 212, 255, .12), rgba(37, 212, 255, .92), rgba(37, 212, 255, .12));
    box-shadow: 0 0 18px rgba(37, 212, 255, .22);
}

.team-full-page .position-shape-rail.is-length {
    width: 4px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(37, 212, 255, .12), rgba(37, 212, 255, .92), rgba(37, 212, 255, .12));
}

.team-full-page .position-shape-rail.is-width {
    height: 4px;
    background: linear-gradient(90deg, rgba(245, 196, 0, .12), rgba(245, 196, 0, .92), rgba(245, 196, 0, .12));
    box-shadow: 0 0 18px rgba(245, 196, 0, .22);
}

.team-full-page .position-shape-centroid {
    z-index: 8;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(3, 16, 9, .9);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #25d4ff, #7cff2a);
    box-shadow: 0 0 0 5px rgba(37, 212, 255, .13), 0 0 22px rgba(124, 255, 42, .26);
}

.team-full-page .position-shape-label {
    z-index: 9;
    transform: translate(10px, -110%);
    color: var(--team-text);
    font-size: .64rem;
    font-weight: 950;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}

.team-full-page .position-shape-ratio-badge {
    z-index: 7;
    transform: translateY(-50%);
    padding: 5px 8px;
    border: 1px solid rgba(139, 92, 246, .46);
    border-radius: 999px;
    color: var(--team-text);
    background: rgba(15, 9, 28, .72);
    box-shadow: 0 0 18px rgba(139, 92, 246, .18);
    font-size: .62rem;
    font-weight: 950;
    white-space: nowrap;
}

.team-full-page .position-shape-player-link {
    z-index: 4;
    height: 2px;
    transform-origin: 0 50%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37, 212, 255, .10), var(--player-color));
    box-shadow: 0 0 12px color-mix(in srgb, var(--player-color) 32%, transparent);
    opacity: .32;
}

.team-full-page .position-shape-player-dot {
    z-index: 7;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 2px solid rgba(2, 8, 10, .86);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    color: #031009;
    background: var(--player-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--player-color) 14%, transparent), 0 0 16px color-mix(in srgb, var(--player-color) 38%, transparent);
    font-size: .52rem;
    font-weight: 950;
    opacity: .58;
}

.team-full-page .position-shape-field.has-shape-focus .position-shape-layer {
    opacity: .13;
    filter: grayscale(.86) blur(.2px);
}

.team-full-page .position-shape-field.is-shape-focus-centroid .position-shape-layer.is-centroid,
.team-full-page .position-shape-field.is-shape-focus-stretch .position-shape-layer.is-stretch,
.team-full-page .position-shape-field.is-shape-focus-width .position-shape-layer.is-width,
.team-full-page .position-shape-field.is-shape-focus-length .position-shape-layer.is-length,
.team-full-page .position-shape-field.is-shape-focus-hull .position-shape-layer.is-hull,
.team-full-page .position-shape-field.is-shape-focus-distance .position-shape-layer.is-distance,
.team-full-page .position-shape-field.is-shape-focus-ratio .position-shape-layer.is-ratio,
.team-full-page .position-shape-field.is-shape-focus-ratio .position-shape-layer.is-width,
.team-full-page .position-shape-field.is-shape-focus-ratio .position-shape-layer.is-length {
    opacity: 1;
    filter: none;
}

.team-full-page .position-shape-field.is-shape-focus-width .position-shape-layer.is-width,
.team-full-page .position-shape-field.is-shape-focus-length .position-shape-layer.is-length,
.team-full-page .position-shape-field.is-shape-focus-ratio .position-shape-layer.is-width,
.team-full-page .position-shape-field.is-shape-focus-ratio .position-shape-layer.is-length {
    box-shadow: 0 0 26px currentColor;
}

.team-full-page .position-shape-field.is-shape-focus-hull .position-shape-footprint {
    border-color: rgba(37, 212, 255, .92);
    background:
        linear-gradient(135deg, rgba(37, 212, 255, .20), rgba(124, 255, 42, .11)),
        rgba(37, 212, 255, .065);
    box-shadow: inset 0 0 30px rgba(37, 212, 255, .18), 0 0 30px rgba(37, 212, 255, .20);
}

.team-full-page .position-shape-field.is-shape-focus-hull .position-shape-centroid-hull {
    fill: rgba(37, 212, 255, .22);
    stroke: rgba(124, 255, 42, .88);
    stroke-width: .9;
    filter: drop-shadow(0 0 14px rgba(124, 255, 42, .26));
}

.team-full-page .position-shape-field.is-shape-focus-distance .position-shape-player-link,
.team-full-page .position-shape-field.is-shape-focus-distance .position-shape-player-dot {
    opacity: 1;
    filter: none;
}

.team-full-page .position-shape-field.is-shape-focus-distance .position-shape-radial-svg .position-shape-player-link {
    stroke-width: .7;
}

.team-full-page .position-shape-explain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.team-full-page .position-shape-explain-grid span {
    display: grid;
    gap: 3px;
    min-height: 48px;
    padding: 8px;
    border: 1px solid rgba(120, 169, 184, .12);
    border-radius: 12px;
    background: rgba(1, 7, 9, .42);
    cursor: default;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}

.team-full-page .position-shape-explain-grid span:hover,
.team-full-page .position-shape-explain-grid span.is-shape-card-active {
    transform: translateY(-1px);
    border-color: rgba(37, 212, 255, .42);
    background: rgba(6, 24, 28, .70);
}

.team-full-page .position-shape-explain-grid strong {
    color: var(--team-text);
    font-size: .72rem;
    font-weight: 950;
}

.team-full-page .position-shape-explain-grid em {
    color: var(--team-muted);
    font-size: .64rem;
    font-style: normal;
    font-weight: 820;
}

.team-full-page .position-shape-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.team-full-page .position-shape-card {
    position: relative;
    display: grid;
    gap: 7px;
    min-height: 128px;
    padding: 13px;
    cursor: default;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.team-full-page .position-shape-card-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.team-full-page .position-shape-card strong,
.team-full-page .position-shape-card em,
.team-full-page .position-shape-card small {
    pointer-events: none;
}

.team-full-page .position-shape-card:hover,
.team-full-page .position-shape-card.is-shape-card-active,
.team-full-page .position-centroid-card:hover,
.team-full-page .position-centroid-card.is-shape-card-active {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--shape-accent, #10c8ea) 58%, rgba(244, 247, 248, .12));
    background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--shape-accent, #10c8ea) 18%, transparent), transparent 42%),
        rgba(4, 16, 19, .70);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--shape-accent, #10c8ea) 12%, transparent);
}

.team-full-page .position-shape-card strong {
    color: var(--team-text);
    font-size: 1.18rem;
    font-weight: 950;
}

.team-full-page .position-shape-card em {
    color: var(--team-muted);
    font-size: .72rem;
    font-style: normal;
    font-weight: 820;
}

.team-full-page .position-shape-card small {
    max-width: 25ch;
    color: rgba(207, 227, 234, .74);
    font-size: .64rem;
    line-height: 1.32;
    font-weight: 760;
}

.team-full-page .position-centroid-card {
    padding: 13px;
    --shape-accent: #25d4ff;
    cursor: default;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.team-full-page .position-centroid-card header {
    display: grid;
    gap: 3px;
    margin-bottom: 10px;
}

.team-full-page .position-centroid-list {
    display: grid;
    gap: 7px;
}

.team-full-page .position-centroid-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 8px;
    border: 1px solid rgba(120, 169, 184, .12);
    border-radius: 10px;
    background: rgba(3, 9, 11, .42);
}

.team-full-page .position-centroid-row strong {
    color: var(--team-text);
    font-size: .78rem;
    font-weight: 950;
}

@media (max-width: 1420px) {
    .team-full-page .position-shape-layout {
        grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
    }

    .team-full-page .position-centroid-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .team-full-page .position-shape-layout,
    .team-full-page .position-shape-cards {
        grid-template-columns: 1fr;
    }

    .team-full-page .position-shape-field {
        width: min(100%, 360px);
        min-height: 420px;
    }
}

.team-full-page .sprint-insight-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.team-full-page .sprint-insight-panel {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--sprint-accent) 34%, var(--team-border));
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--sprint-accent) 18%, transparent), transparent 34%),
        rgba(8, 22, 27, .94);
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .04);
}

.team-full-page .sprint-insight-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.team-full-page .sprint-insight-panel-head span {
    display: block;
    color: var(--sprint-accent);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.team-full-page .sprint-insight-panel-head strong {
    display: block;
    margin-top: 3px;
    color: var(--team-text);
    font-size: .94rem;
    font-weight: 900;
}

.team-full-page .sprint-insight-panel-head .mud-icon-root {
    color: var(--sprint-accent);
    opacity: .92;
}

.team-full-page .sprint-insight-row-list {
    display: grid;
    gap: 7px;
}

.team-full-page .sprint-insight-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid rgba(120, 169, 184, .2);
    border-radius: 12px;
    background: rgba(3, 9, 11, .58);
    color: var(--team-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.team-full-page .sprint-insight-row:hover,
.team-full-page .sprint-insight-row:focus-visible {
    border-color: color-mix(in srgb, var(--sprint-accent) 58%, rgba(120, 169, 184, .2));
    background: rgba(12, 31, 37, .82);
    transform: translateY(-1px);
    outline: none;
}

.team-full-page .sprint-insight-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    box-shadow: 0 0 14px currentColor;
}

.team-full-page .sprint-insight-main {
    min-width: 0;
}

.team-full-page .sprint-insight-main strong,
.team-full-page .sprint-insight-main em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-full-page .sprint-insight-main strong {
    color: var(--team-text);
    font-size: .8rem;
    font-weight: 900;
}

.team-full-page .sprint-insight-main em {
    margin-top: 2px;
    color: var(--team-muted);
    font-size: .7rem;
    font-style: normal;
    font-weight: 750;
}

.team-full-page .sprint-insight-value {
    color: var(--sprint-accent);
    font-size: .82rem;
    font-weight: 950;
    white-space: nowrap;
}

.team-full-page .event-map-detail {
    margin-top: 16px;
    padding-top: 2px;
    border-top: 1px solid rgba(120, 169, 184, .16);
}

.team-full-page .event-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.team-full-page .event-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--event-card-color, var(--event-accent)) 32%, var(--team-border));
    border-radius: 16px;
    background:
        radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--event-card-color, var(--event-accent)) 24%, transparent), transparent 48%),
        linear-gradient(135deg, rgba(8, 22, 27, .98), rgba(3, 9, 11, .9));
    box-shadow: inset 0 1px 0 rgba(244, 247, 248, .045), 0 14px 30px rgba(0, 0, 0, .18);
}

.team-full-page .event-kpi-card .mud-icon-root {
    color: var(--event-card-color, var(--event-accent));
    font-size: 1.18rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--event-card-color, var(--event-accent)) 42%, transparent));
}

.team-full-page .event-kpi-card span,
.team-full-page .event-kpi-card em {
    display: block;
    color: var(--team-muted);
    font-size: .68rem;
    font-weight: 900;
    line-height: 1.25;
}

.team-full-page .event-kpi-card span {
    color: color-mix(in srgb, var(--event-card-color, var(--event-accent)) 72%, var(--team-muted));
    text-transform: uppercase;
}

.team-full-page .event-kpi-card strong {
    display: block;
    margin: 8px 0 4px;
    color: var(--team-text);
    font-size: 1.22rem;
    font-weight: 950;
    line-height: 1;
}

.team-full-page .event-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 14px;
    margin-top: 14px;
    align-items: start;
}

.team-full-page .event-table-card,
.team-full-page .event-chart-card {
    border-color: color-mix(in srgb, var(--event-accent) 32%, var(--team-border));
}

.team-full-page .event-metric-table th,
.team-full-page .event-metric-table td {
    white-space: nowrap;
}

.team-full-page .event-metric-table tbody tr.is-clickable {
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.team-full-page .event-metric-table tbody tr.is-clickable:hover {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--event-accent) 10%, transparent), transparent 62%),
        rgba(37, 216, 239, .045);
    box-shadow: inset 3px 0 0 var(--event-accent);
    transform: translateX(2px);
}

.team-full-page .sprint-event-table-card {
    margin-top: 14px;
    border-color: color-mix(in srgb, var(--event-accent) 28%, var(--team-border));
}

.team-full-page .cod-event-table-card {
    margin-top: 14px;
    border-color: color-mix(in srgb, var(--event-accent) 30%, var(--team-border));
}

.team-full-page .pitch-zone-table-card {
    margin-top: 18px;
}

.team-full-page .sprint-event-table {
    min-width: 820px;
}

.team-full-page .cod-event-table {
    min-width: 900px;
}

.team-full-page .sprint-table-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.team-full-page .sprint-table-pager button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--event-accent) 32%, var(--team-border));
    border-radius: 999px;
    color: var(--team-text);
    background: rgba(2, 12, 14, .68);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.team-full-page .sprint-table-pager button:not(:disabled):hover {
    border-color: var(--event-accent);
    background: color-mix(in srgb, var(--event-accent) 14%, rgba(2, 12, 14, .74));
    transform: translateY(-1px);
}

.team-full-page .sprint-table-pager button:disabled {
    cursor: default;
    opacity: .42;
}

.team-full-page .sprint-table-pager span {
    color: var(--team-muted);
    font-size: .72rem;
    font-weight: 950;
}

.team-full-page .event-bar-chart {
    display: grid;
    gap: 10px;
    padding: 4px 2px 2px;
}

.team-full-page .event-bar-row {
    display: grid;
    grid-template-columns: minmax(70px, .7fr) minmax(120px, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 34px;
}

.team-full-page .event-bar-row span,
.team-full-page .event-bar-row strong {
    overflow: hidden;
    color: var(--team-text);
    font-size: .75rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-full-page .event-bar-row strong {
    color: var(--bar-color, var(--event-accent));
    text-align: right;
}

.team-full-page .event-bar-row i {
    position: relative;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(120, 169, 184, .13);
}

.team-full-page .event-bar-row i b {
    position: absolute;
    inset: 0 auto 0 0;
    width: max(6px, var(--bar-width));
    border-radius: inherit;
    background: linear-gradient(90deg, var(--bar-color, var(--event-accent)), color-mix(in srgb, var(--bar-color, var(--event-accent)) 62%, white));
    box-shadow: 0 0 16px color-mix(in srgb, var(--bar-color, var(--event-accent)) 42%, transparent);
}

.team-full-page .sprint-duration-bucket-list {
    display: grid;
    gap: 10px;
}

.team-full-page .sprint-duration-bucket-row {
    display: grid;
    gap: 9px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--bucket-color) 30%, rgba(120, 169, 184, .16));
    border-radius: 12px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--bucket-color) 14%, transparent), transparent 42%),
        rgba(3, 9, 11, .58);
}

.team-full-page .sprint-duration-bucket-row.is-empty {
    opacity: .48;
    filter: grayscale(.8);
}

.team-full-page .sprint-duration-bucket-row header,
.team-full-page .sprint-duration-bucket-row footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.team-full-page .sprint-duration-bucket-row header span,
.team-full-page .sprint-duration-bucket-row header strong,
.team-full-page .sprint-duration-bucket-row header em {
    min-width: 0;
}

.team-full-page .sprint-duration-bucket-row header strong {
    display: block;
    color: var(--team-text);
    font-size: .84rem;
    font-weight: 950;
    line-height: 1.1;
}

.team-full-page .sprint-duration-bucket-row header em {
    display: block;
    margin-top: 2px;
    color: var(--team-muted);
    font-size: .68rem;
    font-style: normal;
    font-weight: 850;
}

.team-full-page .sprint-duration-bucket-row header b {
    color: var(--bucket-color);
    font-size: .8rem;
    font-weight: 950;
    white-space: nowrap;
}

.team-full-page .sprint-duration-bucket-bar {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(120, 169, 184, .13);
}

.team-full-page .sprint-duration-bucket-bar i {
    position: absolute;
    inset: 0 auto 0 0;
    width: max(4px, var(--bucket-width));
    border-radius: inherit;
    background: linear-gradient(90deg, var(--bucket-color), color-mix(in srgb, var(--bucket-color) 58%, white));
    box-shadow: 0 0 16px color-mix(in srgb, var(--bucket-color) 42%, transparent);
}

.team-full-page .sprint-duration-bucket-row footer {
    flex-wrap: wrap;
    justify-content: flex-start;
    color: var(--team-muted);
    font-size: .68rem;
    font-weight: 850;
}

.team-full-page .sprint-duration-bucket-row footer span {
    white-space: nowrap;
}

.team-full-page .event-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.team-full-page .event-role-card {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--role-color) 35%, var(--team-border));
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--role-color) 16%, transparent), transparent 36%),
        rgba(8, 22, 27, .9);
}

.team-full-page .event-role-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(120, 169, 184, .16);
}

.team-full-page .event-role-card header span,
.team-full-page .event-role-card header em {
    display: block;
    color: var(--role-color);
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.team-full-page .event-role-card header strong {
    display: block;
    margin-top: 4px;
    color: var(--team-text);
    font-size: .88rem;
    font-weight: 950;
}

.team-full-page .event-role-card header em {
    color: var(--team-text);
    font-style: normal;
    text-align: right;
}

.team-full-page .event-role-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.team-full-page .event-role-metrics div {
    min-height: 52px;
    padding: 9px;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 12px;
    background: rgba(3, 9, 11, .54);
}

.team-full-page .event-role-metrics span,
.team-full-page .event-role-metrics strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-full-page .event-role-metrics span {
    color: var(--team-muted);
    font-size: .66rem;
    font-weight: 900;
}

.team-full-page .event-role-metrics strong {
    margin-top: 5px;
    color: var(--team-text);
    font-size: .84rem;
    font-weight: 950;
}

.team-full-page .event-role-sprint-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.team-full-page .event-role-sprint-list button {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(88px, auto);
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 9px;
    border: 1px solid color-mix(in srgb, var(--role-color) 24%, rgba(120, 169, 184, .16));
    border-radius: 12px;
    color: var(--team-text);
    background:
        radial-gradient(circle at left, color-mix(in srgb, var(--role-color) 10%, transparent), transparent 58%),
        rgba(2, 12, 14, .52);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.team-full-page .event-role-sprint-list button:hover {
    border-color: var(--role-color);
    background:
        radial-gradient(circle at left, color-mix(in srgb, var(--role-color) 18%, transparent), transparent 62%),
        rgba(2, 12, 14, .68);
    transform: translateY(-1px);
}

.team-full-page .event-role-sprint-list span,
.team-full-page .event-role-sprint-list strong,
.team-full-page .event-role-sprint-list em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-full-page .event-role-sprint-list span {
    color: var(--role-color);
    font-size: .68rem;
    font-weight: 950;
}

.team-full-page .event-role-sprint-list strong {
    font-size: .76rem;
    font-weight: 950;
}

.team-full-page .event-role-sprint-list em {
    color: var(--team-muted);
    font-size: .64rem;
    font-style: normal;
    font-weight: 850;
    text-align: right;
}

@media (max-width: 1180px) {
    .team-full-page .event-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }

    .team-full-page .event-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .team-full-page .event-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.team-full-page .transition-filter-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.team-full-page .transition-filter-select {
    width: min(260px, 100%);
}

.team-full-page .transition-player-table-strip-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
}

.team-full-page .transition-player-table-nav {
    display: inline-grid;
    place-items: center;
    align-self: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    border: 1px solid rgba(37, 216, 239, .58);
    border-radius: 999px;
    color: #061013;
    background: linear-gradient(135deg, #25d8ef, #8af21f);
    box-shadow: 0 0 0 5px rgba(37, 216, 239, .08), 0 14px 30px rgba(0, 0, 0, .28);
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.team-full-page .transition-player-table-nav:hover:not(:disabled) {
    border-color: rgba(138, 242, 31, .78);
    color: #001012;
    background: linear-gradient(135deg, #8af21f, #25d8ef);
}

.team-full-page .transition-player-table-nav:disabled {
    cursor: default;
    opacity: .42;
}

.team-full-page .transition-player-table-nav .mud-icon-root {
    font-size: 1.35rem;
}

.team-full-page .transition-player-table-list {
    display: flex;
    gap: 12px;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.team-full-page .transition-player-table-list::-webkit-scrollbar {
    display: none;
}

.team-full-page .transition-player-table-card {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--player-color, #10c8ea) 34%, rgba(120, 169, 184, .16));
    border-radius: 16px;
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--player-color, #10c8ea) 18%, transparent), transparent 36%),
        rgba(2, 8, 10, .44);
}

.team-full-page .transition-player-table-list .transition-player-table-card {
    flex: 0 0 clamp(320px, 44vw, 560px);
    margin-top: 0;
    scroll-snap-align: start;
}

.team-full-page .transition-player-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.team-full-page .transition-player-table-head strong {
    color: var(--team-text);
    font-size: .9rem;
    font-weight: 950;
}

.team-full-page .transition-player-table-head em {
    color: var(--team-muted);
    font-size: .68rem;
    font-style: normal;
    font-weight: 850;
}

.team-full-page .transition-player-table-card .position-intensity-table-wrap {
    max-height: 480px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 216, 239, .42) rgba(3, 12, 15, .62);
}

.team-full-page .transition-player-table-card .position-intensity-table-wrap::-webkit-scrollbar {
    width: 8px;
}

.team-full-page .transition-player-table-card .position-intensity-table-wrap::-webkit-scrollbar-track {
    background: rgba(3, 12, 15, .62);
    border-radius: 999px;
}

.team-full-page .transition-player-table-card .position-intensity-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(37, 216, 239, .42);
    border-radius: 999px;
}

.team-full-page .transition-player-table {
    min-width: 420px;
}

.team-full-page .transition-player-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(2, 13, 16, .96);
    box-shadow: 0 1px 0 rgba(120, 169, 184, .16);
}

.team-full-page .transition-move-index {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(138, 242, 31, .28);
    border-radius: 999px;
    color: #dfffd2;
    background: rgba(138, 242, 31, .08);
    font-size: .72rem;
    font-weight: 950;
}

.team-full-page .pitch-zone-analytics {
    margin-top: 24px;
    background:
        radial-gradient(circle at 8% 0%, rgba(37, 216, 239, .07), transparent 34%),
        radial-gradient(circle at 94% 8%, rgba(138, 242, 31, .08), transparent 36%),
        rgba(3, 12, 15, .56) !important;
    border: 1px solid rgba(120, 169, 184, .18) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
}

.team-full-page .pitch-zone-header {
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.team-full-page .pitch-zone-card-list,
.team-full-page .pitch-zone-bars,
.team-full-page .pitch-zone-leaders {
    display: grid;
    gap: 12px;
}

.team-full-page .pitch-zone-bars {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.team-full-page .pitch-zone-leaders {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.team-full-page .pitch-zone-bar-row,
.team-full-page .pitch-zone-leader-card {
    padding: 12px;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 14px;
    background:
        radial-gradient(circle at left top, rgba(37, 216, 239, .06), transparent 46%),
        rgba(2, 8, 10, .5);
}

.team-full-page .pitch-zone-detail-card {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.team-full-page .pitch-zone-card-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
}

.team-full-page .pitch-zone-card-main {
    min-width: 0;
    flex: 1 1 auto;
}

.team-full-page .pitch-zone-chevron {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(120, 169, 184, .24);
    border-radius: 999px;
    background: rgba(7, 22, 27, .72);
    color: var(--team-accent);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.team-full-page .pitch-zone-chevron:hover {
    border-color: rgba(16, 200, 234, .58);
    background: rgba(16, 200, 234, .12);
}

.team-full-page .pitch-zone-chevron svg {
    transition: transform .24s ease;
}

.team-full-page .pitch-zone-detail-card.is-expanded .pitch-zone-chevron svg {
    transform: rotate(180deg);
}

.team-full-page .pitch-zone-card-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 14px;
    border-top: 1px solid transparent;
    transition: max-height .32s ease, opacity .22s ease, padding .32s ease, border-color .22s ease;
}

.team-full-page .pitch-zone-card-body.is-open {
    max-height: 900px;
    opacity: 1;
    padding: 0 14px 14px;
    border-top-color: rgba(120, 169, 184, .12);
}

.team-full-page .pitch-zone-bar-meta,
.team-full-page .pitch-zone-leader-title,
.team-full-page .pitch-zone-player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.team-full-page .pitch-zone-bar-meta,
.team-full-page .pitch-zone-leader-title {
    color: var(--team-text);
    font-weight: 900;
}

.team-full-page .pitch-zone-bar-track {
    position: relative;
    height: 9px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(120, 169, 184, .14);
}

.team-full-page .pitch-zone-bar-fill {
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
    box-shadow: 0 0 18px rgba(16, 200, 234, .24);
}

.team-full-page .pitch-zone-bar-detail,
.team-full-page .pitch-zone-player-row {
    margin-top: 6px;
    color: var(--team-muted);
    font-size: .78rem;
    font-weight: 800;
}

.team-full-page .pitch-zone-table-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    margin-bottom: 10px;
    color: var(--team-muted);
    font-size: .76rem;
    font-weight: 850;
}

.team-full-page .pitch-zone-filter-input {
    width: min(100%, 260px);
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(120, 169, 184, .2);
    border-radius: 10px;
    background: rgba(2, 8, 10, .55);
    color: var(--team-text);
    outline: 0;
}

.team-full-page .pitch-zone-filter-input:focus {
    border-color: rgba(37, 216, 239, .48);
    box-shadow: 0 0 0 3px rgba(37, 216, 239, .08);
}

.team-full-page .pitch-zone-sort-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.team-full-page .pitch-zone-player-table th:first-child .pitch-zone-sort-button {
    justify-content: flex-start;
}

.team-full-page .pitch-zone-sort-button:hover,
.team-full-page .pitch-zone-sort-button:focus-visible {
    color: var(--team-accent);
    outline: 0;
}

.team-full-page .pitch-zone-empty-row {
    padding: 16px !important;
    text-align: center !important;
    color: var(--team-muted) !important;
}

.team-full-page .pitch-zone-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(120, 169, 184, .14);
    border-radius: 12px;
    background: rgba(1, 7, 9, .46);
}

.team-full-page .pitch-zone-player-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
    color: var(--team-soft);
    font-size: .76rem;
}

.team-full-page .pitch-zone-player-table th,
.team-full-page .pitch-zone-player-table td {
    padding: 10px 11px;
    border-bottom: 1px solid rgba(120, 169, 184, .1);
    text-align: right;
    white-space: nowrap;
}

.team-full-page .pitch-zone-player-table th {
    color: var(--team-muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: rgba(120, 169, 184, .07);
}

.team-full-page .pitch-zone-player-table th:first-child,
.team-full-page .pitch-zone-player-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 190px;
    text-align: left;
    background: rgba(3, 12, 15, .96);
}

.team-full-page .pitch-zone-player-table tbody tr:hover td {
    background: rgba(16, 200, 234, .06);
}

.team-full-page .pitch-zone-player-table tbody tr:last-child td {
    border-bottom: 0;
}

.team-full-page .pitch-zone-player-name {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--team-text);
    font-weight: 900;
}

@media (max-width: 768px) {
    .team-full-page .soccer-field.team-map-surface {
        min-height: 280px;
    }

    .team-full-page .session-player-controls-floating {
        top: auto;
        bottom: 8px;
        width: calc(100% - 18px);
        grid-template-columns: auto minmax(120px, 1fr) auto;
        gap: 7px;
        padding: 8px;
    }

    .team-full-page .session-player-controls-toggle.mud-icon-button {
        right: 10px;
        bottom: 10px;
        width: 40px;
        height: 40px;
    }

    .team-full-page .session-player-controls-floating .session-track-metric-select {
        grid-column: 1 / -1;
    }

    .team-full-page .session-player-controls-floating .session-player-buttons {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .team-full-page .session-player-controls-floating .session-player-speed-control {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .team-full-page .pitch-zone-table-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .team-full-page .pitch-zone-filter-input {
        width: 100%;
    }

    .team-full-page .map-mode-toolbar .mud-button-root {
        flex: 1 1 calc(50% - 8px);
    }

    .team-full-page .pitch-zone-card-summary {
        align-items: flex-start;
    }

    .team-full-page .pitch-zone-player-table {
        min-width: 1040px;
    }
}

.session-list-page.session-list-modern-page {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 20px 34px 42px;
    background: radial-gradient(circle at 76% 4%, rgba(96, 235, 62, 0.055), transparent 30%),
        radial-gradient(circle at 18% 8%, rgba(0, 215, 255, 0.11), transparent 30%),
        linear-gradient(180deg, #061217 0%, #061014 48%, #040b0e 100%);
}

@media (max-width: 760px) {
    .session-list-page.session-list-modern-page {
        padding: 18px 14px 32px;
    }
}


.session-list-modern-page .session-strip-shell.is-session-expanded {
    z-index: 80;
    overflow: visible;
}


@media (min-width: 641px) {
    .session-list-modern-page .session-strip-card {
        padding-left: var(--session-card-inset, 10px) !important;
        padding-right: var(--session-card-inset, 10px) !important;
    }
}

.session-list-modern-page .session-strip-card > strong,
.session-list-modern-page .session-strip-card > small,
.session-list-modern-page .session-strip-card-top,
.session-list-modern-page .session-strip-metrics,
.session-list-modern-page .session-strip-date {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
}

.session-list-modern-page .session-strip-card > strong {
    display: -webkit-box !important;
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.14;
    font-weight: 950;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.session-list-modern-page .session-strip-card > small {
    display: block !important;
    margin: 0;
    min-height: 20px;
    color: #9bbdca;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-list-modern-page .session-strip-card-top {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.session-list-modern-page .session-strip-card-top > span:last-child {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid rgba(130, 184, 207, 0.26);
    border-radius: 999px;
    background: rgba(2, 10, 13, 0.45);
    color: #96d7ee;
    font-size: 0.68rem;
    line-height: 1;
}


.session-list-modern-page .session-strip-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 2px 0 0;
}

.session-list-modern-page .session-strip-metrics > span {
    display: block !important;
    min-width: 0;
    padding: 9px 8px;
    border: 1px solid rgba(109, 161, 181, 0.22);
    border-radius: 10px;
    background: rgba(2, 11, 14, 0.66);
}

.session-list-modern-page .session-strip-metrics em,
.session-list-modern-page .session-strip-metrics b {
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-list-modern-page .session-strip-date {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    padding-top: 2px;
}

@media (max-width: 1280px) {
    
}

@media (max-width: 760px) {
    .session-list-modern-page .session-strip {
        grid-auto-columns: minmax(290px, 86vw);
    }
}

/* Compact session cards: aligned to the player-card visual language. */


.session-list-modern-page .session-card-mini-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.session-list-modern-page .session-type-badge,
.session-list-modern-page .session-card-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: .72rem;
    line-height: 1;
    font-weight: 950;
}

.session-list-modern-page .session-type-badge {
    flex: 0 1 auto;
    max-width: 58%;
    background: color-mix(in srgb, var(--session-accent) 22%, rgba(3, 9, 11, .68));
    color: #f5fbff;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-list-modern-page .session-card-status {
    flex: 0 0 auto;
    border: 1px solid rgba(125, 178, 198, .18);
    background: rgba(2, 10, 13, .48);
    color: #9dd1e4;
    text-transform: uppercase;
}

.session-list-modern-page .session-card-status.is-live {
    border-color: rgba(109, 240, 59, .42);
    background: rgba(109, 240, 59, .13);
    color: #b7ff92;
}


.session-list-modern-page .session-card-mini-subtitle {
    position: relative;
    z-index: 1;
    margin-top: 4px;
    min-height: 16px;
    overflow: hidden;
    color: #91b7c7;
    font-size: .68rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.session-list-modern-page .session-card-mini-stats small,
.session-list-modern-page .session-card-mini-stats strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-list-modern-page .session-card-mini-stats small {
    color: #91b7c7;
    font-size: .58rem;
    font-weight: 850;
}

.session-list-modern-page .session-card-mini-stats strong {
    margin-top: 4px;
    color: #f5fbff;
    font-size: .72rem;
    font-weight: 950;
}


.session-list-modern-page .session-card-mini-footer span:first-child {
    justify-content: flex-start;
}

@media (max-width: 1280px) {
    
}

/* Session cards final pass: compact blue scale, expandable roster, no left shadow crop. */


.session-list-modern-page .session-strip-shell::before {
    display: none;
}

.session-list-modern-page .session-strip-shell::after {
    right: -2px;
    width: 34px;
    background: linear-gradient(270deg, rgba(3, 12, 16, .78), transparent);
}


.session-list-modern-page .session-strip-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(115deg,
            color-mix(in srgb, var(--session-accent) 11%, transparent),
            transparent 38%,
            rgba(255, 255, 255, .025) 62%,
            transparent);
    opacity: .9;
    pointer-events: none;
}

.session-list-modern-page .session-strip-card-glow {
    inset: -30px auto auto var(--session-flow-x, 18%);
    width: 124px;
    height: 124px;
    transform: translateX(-50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--session-accent) 30%, transparent), transparent 68%);
    opacity: .72;
}


.session-list-modern-page .session-card-player-count {
    min-width: 54px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--session-accent) 48%, rgba(120, 169, 184, .2));
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--session-accent) 18%, rgba(3, 9, 11, .82)), rgba(3, 9, 11, .68));
    color: #f5fbff;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.session-list-modern-page .session-card-player-count:hover,
.session-list-modern-page .session-card-player-count:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--session-accent) 86%, #ffffff 6%);
    background: linear-gradient(135deg, color-mix(in srgb, var(--session-accent) 28%, rgba(3, 9, 11, .72)), rgba(3, 9, 11, .74));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--session-accent) 18%, transparent);
    outline: none;
}

.session-list-modern-page .session-strip.has-expanded-session {
    display: flex;
    gap: 14px;
    position: relative;
    z-index: 2;
    overflow: visible;
    scroll-snap-type: none;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-fading-sessions):not(.is-restoring-sessions) {
    gap: 0;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-restoring-sessions) .session-strip-card.is-expanded {
    order: -1;
}

.session-list-modern-page .session-strip.has-expanded-session .session-strip-card {
    flex: 0 0 78px;
    min-width: 78px;
    min-height: 312px;
    overflow: hidden;
    opacity: .34;
    filter: saturate(.44) brightness(.58);
    transform: none;
}

.session-list-modern-page .session-strip.has-expanded-session .session-strip-card.is-before-expanded,
.session-list-modern-page .session-strip.has-expanded-session .session-strip-card.is-after-expanded {
    flex: 0 0 0;
    min-width: 0;
    width: 0;
    padding: 0;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(28px) scaleX(.72);
}

.session-list-modern-page .session-strip.has-expanded-session .session-strip-card.is-dimmed .session-card-mini-name,
.session-list-modern-page .session-strip.has-expanded-session .session-strip-card.is-dimmed .session-card-mini-stats,
.session-list-modern-page .session-strip.has-expanded-session .session-strip-card.is-dimmed .session-card-mini-footer {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

.session-list-modern-page .session-strip.has-expanded-session .session-strip-card.is-expanded {
    flex: 1 1 auto;
    min-width: min(980px, calc(100% - 92px));
    min-height: 352px;
    opacity: 1;
    filter: none;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(245, 251, 255, .055), 0 14px 32px color-mix(in srgb, var(--session-accent) 8%, rgba(0, 0, 0, .34));
}

.session-list-modern-page .session-strip-card.is-expanded .session-card-mini-name {
    max-width: 520px;
}

.session-list-modern-page .session-strip-card.is-expanded .session-card-mini-stats {
    max-width: 520px;
}

.session-list-modern-page .session-strip-card.is-expanded .session-card-mini-footer {
    max-width: 520px;
}

.session-list-modern-page .session-expanded-players {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin-top: 18px;
    padding: 2px 4px 12px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    animation: sessionFadeInUp .28s ease both;
}

.session-list-modern-page .session-expanded-players::-webkit-scrollbar {
    display: none;
}

.session-list-modern-page .session-expanded-player-card {
    flex: 0 0 118px;
    width: 118px;
    min-height: 162px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-items: center;
    justify-items: center;
    gap: 7px;
    padding: 11px 10px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--session-accent) 22%, transparent), transparent 48%),
        rgba(2, 10, 14, .64);
    color: #f5fbff;
    text-align: center;
    cursor: pointer;
    scroll-snap-align: start;
    animation: sessionPlayerCardIn .24s ease both;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.session-list-modern-page .session-expanded-player-card:hover,
.session-list-modern-page .session-expanded-player-card:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--session-accent) 72%, #ffffff 5%);
    background:
        radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--session-accent) 28%, transparent), transparent 48%),
        rgba(4, 18, 23, .82);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--session-accent) 13%, transparent);
    outline: none;
}

.session-list-modern-page .session-expanded-player-card span,
.session-list-modern-page .session-expanded-player-card strong,
.session-list-modern-page .session-expanded-player-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-list-modern-page .session-expanded-player-card span {
    width: max-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--session-accent) 22%, rgba(3, 9, 11, .76));
    color: #f5fbff;
    font-size: .66rem;
    font-weight: 950;
}

.session-list-modern-page .session-expanded-player-avatar {
    width: 54px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--session-accent) 36%, rgba(245, 251, 255, .14));
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 18%, rgba(245, 251, 255, .16), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--session-accent) 24%, rgba(4, 15, 20, .94)), rgba(1, 7, 10, .94));
    color: #f5fbff;
    font-size: 1.05rem;
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(245, 251, 255, .06);
}

.session-list-modern-page .session-expanded-player-card strong {
    width: 100%;
    margin-top: 0;
    font-size: .76rem;
    font-weight: 950;
    line-height: 1.1;
}

.session-list-modern-page .session-expanded-player-card small {
    color: #91b7c7;
    font-size: .57rem;
    font-weight: 850;
    line-height: 1.1;
    text-transform: uppercase;
}

.session-list-modern-page .session-player-preview-popover {
    position: relative;
    z-index: 120;
    top: auto;
    right: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    width: min(900px, 100%);
    max-height: min(420px, calc(100vh - 150px));
    margin-top: 6px;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid color-mix(in srgb, var(--session-accent) 42%, rgba(120, 169, 184, .22));
    border-radius: 18px;
    background:
        radial-gradient(circle at 84% 6%, color-mix(in srgb, var(--session-accent) 18%, transparent), transparent 38%),
        rgba(3, 13, 18, .96);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(245, 251, 255, .05);
    animation: sessionPreviewPop .18s ease both;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--session-accent) 55%, #7daebe 20%) rgba(255, 255, 255, .04);
}

.session-list-modern-page .session-player-preview-popover::-webkit-scrollbar {
    width: 8px;
}

.session-list-modern-page .session-player-preview-popover::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .035);
    border-radius: 999px;
}

.session-list-modern-page .session-player-preview-popover::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--session-accent) 55%, #7daebe 20%);
}

.session-list-modern-page .session-player-preview-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
    max-width: 360px;
}

.session-list-modern-page .session-player-preview-copy span {
    grid-row: 1 / 3;
    min-width: 42px;
    min-height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--team-selection-gradient);
    color: var(--team-selection-text);
    font-size: .72rem;
    font-weight: 950;
}

.session-list-modern-page .session-player-preview-copy strong,
.session-list-modern-page .session-player-preview-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-list-modern-page .session-player-preview-copy strong {
    color: #f5fbff;
    font-size: .95rem;
    font-weight: 950;
}

.session-list-modern-page .session-player-preview-copy small {
    color: #91b7c7;
    font-size: .66rem;
    font-weight: 850;
    text-transform: uppercase;
}

.session-list-modern-page .session-player-preview-mode-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    justify-content: flex-start;
}

.session-list-modern-page .session-player-preview-mode-tabs button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(120, 169, 184, .28);
    border-radius: 999px;
    background: rgba(3, 9, 11, .62);
    color: #dff7ff;
    font-size: .68rem;
    font-weight: 950;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.session-list-modern-page .session-player-preview-mode-tabs button:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 238, 255, .46);
}

.session-list-modern-page .session-player-preview-mode-tabs button.is-active,
.session-list-modern-page .session-player-preview-mode-tabs button[aria-selected="true"],
.session-list-modern-page .session-player-preview-mode-tabs button[aria-selected="True"] {
    border-color: var(--team-selection-border);
    background: var(--team-selection-gradient);
    color: var(--team-selection-text);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--team-selection-accent) 16%, transparent);
}

.session-list-modern-page .session-player-preview-body {
    display: grid;
    grid-template-columns: minmax(360px, 1.35fr) minmax(210px, .65fr);
    gap: 12px;
    align-items: stretch;
    min-width: 0;
}

.session-list-modern-page .session-player-preview-field {
    position: relative;
    width: 100%;
    aspect-ratio: 105 / 68;
    min-height: 0;
    height: auto;
    margin-top: 0;
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 14px;
    background:
        radial-gradient(circle at 64% 22%, color-mix(in srgb, var(--session-accent) 12%, transparent), transparent 42%),
        rgba(0, 5, 7, .76);
}

.session-list-modern-page .session-player-preview-cloud {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.session-list-modern-page .session-player-preview-cloud .heatmap-canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.session-list-modern-page .session-player-preview-field svg {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.session-list-modern-page .session-player-preview-field rect,
.session-list-modern-page .session-player-preview-field line,
.session-list-modern-page .session-player-preview-field circle {
    fill: none;
    stroke: rgba(219, 244, 250, .22);
    stroke-width: .42;
    vector-effect: non-scaling-stroke;
}

.session-list-modern-page .session-player-preview-side {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.session-list-modern-page .session-player-mini-analysis {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--session-accent) 32%, rgba(120, 169, 184, .16));
    border-radius: 12px;
    background: rgba(2, 10, 14, .62);
}

.session-list-modern-page .session-player-mini-analysis > span {
    color: #91b7c7;
    font-size: .58rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.session-list-modern-page .session-player-mini-analysis > strong {
    color: #f5fbff;
    font-size: .74rem;
    font-weight: 850;
    line-height: 1.28;
}

.session-list-modern-page .session-player-mini-analysis > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.session-list-modern-page .session-player-mini-analysis em {
    padding: 5px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--session-accent) 22%, rgba(3, 9, 11, .78));
    color: #e8f8ff;
    font-size: .58rem;
    font-style: normal;
    font-weight: 900;
}

.session-list-modern-page .session-player-preview-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 0;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--session-accent) 48%, #7daebe 18%) rgba(255, 255, 255, .035);
}

.session-list-modern-page .session-player-preview-stats::-webkit-scrollbar {
    width: 6px;
}

.session-list-modern-page .session-player-preview-stats::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--session-accent) 48%, #7daebe 18%);
}

.session-list-modern-page .session-player-preview-stats span {
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 10px;
    background: rgba(2, 10, 14, .66);
}

.session-list-modern-page .session-player-preview-stats small,
.session-list-modern-page .session-player-preview-stats strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-list-modern-page .session-player-preview-stats small {
    color: #91b7c7;
    font-size: .56rem;
    font-weight: 850;
}

.session-list-modern-page .session-player-preview-stats strong {
    margin-top: 4px;
    color: #f5fbff;
    font-size: .7rem;
    font-weight: 950;
}

.session-list-modern-page .session-player-preview-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: auto;
}

.session-list-modern-page .session-player-preview-actions button {
    width: 100%;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--session-accent) 48%, rgba(120, 169, 184, .18));
    border-radius: 999px;
    background: rgba(3, 14, 19, .78);
    color: #d9eff7;
    font-size: .76rem;
    font-weight: 950;
    cursor: pointer;
}

.session-list-modern-page .session-player-preview-actions button.primary {
    border-color: var(--team-selection-border);
    background: var(--team-selection-gradient);
    color: var(--team-selection-text);
}

@keyframes sessionFadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@keyframes sessionPlayerCardIn {
    from {
        opacity: 0;
        transform: translateY(7px) scale(.98);
    }

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

@keyframes sessionPreviewPop {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.985);
    }

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

@media (max-width: 1100px) {
    .session-list-modern-page .session-strip.has-expanded-session .session-strip-card.is-expanded {
        min-width: calc(100% - 92px);
    }

    .session-list-modern-page .session-strip-card.is-expanded .session-card-mini-name,
    .session-list-modern-page .session-strip-card.is-expanded .session-card-mini-stats,
    .session-list-modern-page .session-strip-card.is-expanded .session-card-mini-footer {
        max-width: 100%;
    }

    .session-list-modern-page .session-player-preview-popover {
        margin-top: 12px;
    }

    .session-list-modern-page .session-player-preview-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .session-list-modern-page .session-player-preview-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: none;
    }
}

/* Selected session expansion: the chosen card becomes the first full-width panel. */


.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions {
    display: grid;
    gap: 14px;
    height: auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
}

.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card,
.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card.is-expanded,
.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card.is-collapsing-away,
.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card.is-before-expanded,
.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card.is-after-expanded {
    flex: initial !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 156px;
    height: auto;
    padding: var(--session-card-inset, 10px) !important;
    border-width: 1px !important;
    opacity: 1;
    filter: none;
    transform: none;
    overflow: hidden;
    animation: none;
}

.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card.is-collapsing-away,
.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card.is-before-expanded,
.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card.is-after-expanded {
    pointer-events: none;
    animation: sessionCardFadeOnly .5s linear .05s both;
}

.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card.is-expanded {
    display: flex !important;
    flex-direction: column;
    border-color: color-mix(in srgb, var(--session-accent) 84%, #ffffff 6%);
}

.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card .session-card-mini-name,
.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card .session-card-mini-stats,
.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card .session-card-mini-footer {
    opacity: 1;
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    pointer-events: auto;
}

.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-expanded-players-shell,
.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-player-preview-popover {
    display: none;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session {
    align-items: stretch;
    gap: 0;
    height: var(--session-expanded-card-height);
    min-height: var(--session-expanded-card-height);
    overflow: visible;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-collapsing-away,
.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-before-expanded,
.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-after-expanded {
    --collapse-x: -34px;
    flex: 0 0 var(--session-card-compact-width);
    width: var(--session-card-compact-width);
    min-width: var(--session-card-compact-width);
    max-width: var(--session-card-compact-width);
    margin: 0;
    opacity: 1;
    pointer-events: none;
    overflow: hidden;
    filter: blur(0) saturate(1) brightness(1);
    transform: translateX(0) translateY(0) scale(1);
    animation: sessionCardCollapseHidden .42s linear both;
    will-change: opacity, flex-basis, width, min-width, max-width, padding, border-width, transform, filter;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-after-expanded {
    --collapse-x: 34px;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded {
    flex: 0 0 var(--session-card-compact-width);
    width: var(--session-card-compact-width);
    min-width: var(--session-card-compact-width);
    max-width: var(--session-card-compact-width);
    height: var(--session-expanded-card-height);
    min-height: var(--session-expanded-card-height);
    display: grid !important;
    grid-template-columns: minmax(430px, 560px) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    align-content: start;
    gap: 9px clamp(18px, 2.4vw, 36px);
    padding: var(--session-card-inset, 10px);
    overflow: visible;
    border-color: color-mix(in srgb, var(--session-accent) 72%, rgba(245, 251, 255, .12));
    box-shadow:
        inset 0 1px 0 rgba(245, 251, 255, .035),
        inset -90px 0 120px rgba(36, 84, 94, .08),
        0 14px 34px color-mix(in srgb, var(--session-accent) 7%, rgba(0, 0, 0, .30));
    background:
        radial-gradient(circle at 10% 2%, color-mix(in srgb, var(--session-accent) 36%, transparent), transparent 28%),
        radial-gradient(circle at 72% 48%, color-mix(in srgb, var(--session-accent) 8%, transparent), transparent 50%),
        linear-gradient(100deg,
            color-mix(in srgb, var(--session-accent) 21%, rgba(6, 32, 38, .84)) 0%,
            rgba(4, 22, 27, .64) 38%,
            rgba(3, 15, 19, .46) 68%,
            rgba(3, 13, 16, .28) 100%);
    animation: sessionCardOpenWide .62s linear both;
    will-change: flex-basis, width, min-width, max-width, transform, border-color;
}

.session-list-modern-page .session-strip.has-expanded-session .session-strip-card.is-selected.is-expanded {
    padding: var(--session-card-inset, 10px) !important;
}

.session-list-modern-page .session-strip.has-expanded-session.is-fading-sessions .session-strip-card.is-selected.is-expanded,
.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-selected.is-expanded {
    padding: var(--session-card-inset, 10px) !important;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded::before {
    background:
        linear-gradient(100deg,
            color-mix(in srgb, var(--session-accent) 8%, transparent),
            transparent 42%,
            rgba(119, 238, 255, .018) 72%,
            transparent);
    opacity: .46;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-strip-card-glow {
    opacity: .9;
    transform: translateX(-10%) scale(1.08);
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-card-mini-name,
.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-card-mini-stats,
.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-card-mini-footer {
    grid-column: 1;
    width: 100%;
    max-width: 560px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    transition: none;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-card-mini-name {
    grid-row: 1;
    align-self: end;
    min-width: 0;
    margin-top: 10px;
    white-space: nowrap;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-card-mini-stats {
    grid-row: 2;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-card-mini-footer {
    grid-row: 3;
    align-self: start;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-expanded-players-shell {
    position: relative;
    z-index: 3;
    grid-column: 2;
    grid-row: 1 / 4;
    min-width: 0;
    height: 144px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
    align-self: center;
    opacity: 0;
    transform: translateY(12px) scale(.985);
    animation: sessionPlayersEmerge .46s cubic-bezier(.19, 1, .22, 1) .72s both;
}

.session-list-modern-page .session-expanded-player-nav {
    width: 36px;
    height: 58px;
    display: inline-grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--session-accent) 32%, rgba(120, 169, 184, .22));
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--session-accent) 22%, transparent), transparent 62%),
        rgba(2, 10, 14, .74);
    color: #dff7ff;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.session-list-modern-page .session-expanded-player-nav:hover,
.session-list-modern-page .session-expanded-player-nav:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--session-accent) 72%, #ffffff 6%);
    background:
        radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--session-accent) 32%, transparent), transparent 62%),
        rgba(3, 18, 23, .86);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--session-accent) 12%, transparent);
    outline: none;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-expanded-players {
    min-width: 0;
    height: 144px;
    min-height: 0;
    margin: 0;
    padding: 0 2px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-expanded-players::-webkit-scrollbar {
    display: none;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-expanded-player-card {
    flex: 0 0 108px;
    width: 108px;
    min-height: 132px;
    height: 132px;
    grid-template-rows: 18px 46px 24px 14px;
    gap: 4px;
    padding: 8px;
    border-radius: 14px;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-expanded-player-avatar {
    width: 44px;
    height: 46px;
    border-radius: 15px;
    font-size: .95rem;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-expanded-player-card span {
    align-self: center;
    padding: 3px 7px;
    font-size: .6rem;
    line-height: 1;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-expanded-player-card strong {
    align-self: end;
    font-size: .7rem;
    line-height: 1.05;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-expanded-player-card small {
    align-self: start;
    font-size: .52rem;
    line-height: 1.05;
}


.session-list-modern-page .session-strip.has-expanded-session.is-closing-session {
    align-items: stretch;
    gap: 0;
    height: var(--session-expanded-card-height);
    min-height: var(--session-expanded-card-height);
    overflow: visible;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-collapsing-away,
.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-before-expanded,
.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-after-expanded {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    margin: 0;
    padding: 0 !important;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    filter: none;
    transform: none;
    animation: none;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: var(--session-expanded-card-height);
    min-height: var(--session-expanded-card-height);
    display: grid !important;
    grid-template-columns: minmax(430px, 560px) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    align-content: start;
    gap: 9px clamp(18px, 2.4vw, 36px);
    padding: var(--session-card-inset, 10px);
    overflow: visible;
    border-color: color-mix(in srgb, var(--session-accent) 72%, rgba(245, 251, 255, .12));
    box-shadow:
        inset 0 1px 0 rgba(245, 251, 255, .035),
        inset -90px 0 120px rgba(36, 84, 94, .08),
        0 14px 34px color-mix(in srgb, var(--session-accent) 7%, rgba(0, 0, 0, .30));
    background:
        radial-gradient(circle at 10% 2%, color-mix(in srgb, var(--session-accent) 36%, transparent), transparent 28%),
        radial-gradient(circle at 72% 48%, color-mix(in srgb, var(--session-accent) 8%, transparent), transparent 50%),
        linear-gradient(100deg,
            color-mix(in srgb, var(--session-accent) 21%, rgba(6, 32, 38, .84)) 0%,
            rgba(4, 22, 27, .64) 38%,
            rgba(3, 15, 19, .46) 68%,
            rgba(3, 13, 16, .28) 100%);
    animation:
        sessionExpandedBorderReturn .18s ease both,
        sessionCardCloseNarrow .52s linear .16s both;
    will-change: flex-basis, width, min-width, max-width, transform, border-color;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-card-mini-name,
.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-card-mini-stats,
.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-card-mini-footer {
    grid-column: 1;
    width: 100%;
    max-width: 560px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-card-mini-name {
    grid-row: 1;
    align-self: end;
    min-width: 0;
    margin-top: 10px;
    white-space: nowrap;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-card-mini-stats {
    grid-row: 2;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-card-mini-footer {
    grid-row: 3;
    align-self: start;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-expanded-players-shell {
    position: relative;
    z-index: 3;
    grid-column: 2;
    grid-row: 1 / 4;
    min-width: 0;
    height: 144px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
    align-self: center;
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: sessionPlayersLeave .2s ease both;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-expanded-players {
    min-width: 0;
    height: 144px;
    min-height: 0;
    margin: 0;
    padding: 0 2px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-expanded-players::-webkit-scrollbar {
    display: none;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-expanded-player-card {
    flex: 0 0 108px;
    width: 108px;
    min-height: 132px;
    height: 132px;
    grid-template-rows: 18px 46px 24px 14px;
    gap: 4px;
    padding: 8px;
    border-radius: 14px;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-expanded-player-avatar {
    width: 44px;
    height: 46px;
    border-radius: 15px;
    font-size: .95rem;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-expanded-player-card span {
    align-self: center;
    padding: 3px 7px;
    font-size: .6rem;
    line-height: 1;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-expanded-player-card strong {
    align-self: end;
    font-size: .7rem;
    line-height: 1.05;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-expanded-player-card small {
    align-self: start;
    font-size: .52rem;
    line-height: 1.05;
}

.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-player-preview-popover {
    display: none;
}

.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions {
    display: grid;
    gap: 14px;
    height: auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
}

.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-strip-card,
.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-strip-card.is-expanded,
.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-strip-card.is-collapsing-away,
.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-strip-card.is-before-expanded,
.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-strip-card.is-after-expanded {
    flex: initial !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 154px;
    height: auto;
    padding: var(--session-card-inset, 10px) !important;
    border-width: 1px !important;
    opacity: 1;
    filter: none;
    transform: none;
    overflow: hidden;
    animation: none;
}

.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-strip-card.is-collapsing-away,
.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-strip-card.is-before-expanded,
.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-strip-card.is-after-expanded {
    opacity: 0;
    pointer-events: none;
    animation: sessionCardFadeBack .46s ease .05s both;
}

.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-strip-card.is-expanded {
    display: flex !important;
    flex-direction: column;
    border-color: color-mix(in srgb, var(--session-accent) 84%, #ffffff 6%);
}

.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-strip-card .session-card-mini-name,
.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-strip-card .session-card-mini-stats,
.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-strip-card .session-card-mini-footer {
    opacity: 1;
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    pointer-events: auto;
}

.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-expanded-players-shell,
.session-list-modern-page .session-strip.has-expanded-session.is-restoring-sessions .session-player-preview-popover {
    display: none;
}

@keyframes sessionCardFadeOnly {
    from {
        opacity: 1;
        filter: none;
        transform: none;
    }

    to {
        opacity: 0;
        filter: none;
        transform: none;
    }
}

@keyframes sessionCardFadeBack {
    from {
        opacity: 0;
        filter: none;
        transform: none;
    }

    to {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

@keyframes sessionCardCollapseHidden {
    0% {
        opacity: 0;
        flex-basis: var(--session-card-compact-width);
        width: var(--session-card-compact-width);
        min-width: var(--session-card-compact-width);
        max-width: var(--session-card-compact-width);
        padding: var(--session-card-inset, 10px);
        border-width: 1px;
        filter: none;
        transform: translateX(0) translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        flex-basis: 0;
        width: 0;
        min-width: 0;
        max-width: 0;
        padding: 0;
        border-width: 0;
        filter: none;
        transform: none;
    }
}

@keyframes sessionCardCloseNarrow {
    0% {
        opacity: 1;
        flex-basis: 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    100% {
        opacity: 1;
        flex-basis: var(--session-card-compact-width);
        width: var(--session-card-compact-width);
        min-width: var(--session-card-compact-width);
        max-width: var(--session-card-compact-width);
    }
}

@keyframes sessionCardOpenWide {
    0% {
        opacity: 1;
        flex-basis: var(--session-card-compact-width);
        width: var(--session-card-compact-width);
        min-width: var(--session-card-compact-width);
        max-width: var(--session-card-compact-width);
    }

    100% {
        opacity: 1;
        flex-basis: 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

@keyframes sessionExpandedBorderReturn {
    from {
        border-color: color-mix(in srgb, var(--session-accent) 72%, rgba(245, 251, 255, .12));
    }

    to {
        border-color: color-mix(in srgb, var(--session-accent) 72%, rgba(245, 251, 255, .12));
    }
}

@keyframes sessionExpandedBorderFade {
    from {
        border-color: color-mix(in srgb, var(--session-accent) 72%, rgba(245, 251, 255, .12));
    }

    to {
        border-color: color-mix(in srgb, var(--session-accent) 72%, rgba(245, 251, 255, .12));
    }
}

@keyframes sessionPlayersLeave {
    0% {
        opacity: 1;
        filter: blur(0) saturate(1);
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        filter: blur(8px) saturate(.65);
        transform: translateY(10px) scale(.98);
    }
}

@keyframes sessionPlayersEmerge {
    0% {
        opacity: 0;
        filter: blur(10px) saturate(.6);
        transform: translateY(14px) scale(.97);
    }

    100% {
        opacity: 1;
        filter: blur(0) saturate(1);
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1100px) {
    .session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded,
    .session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded {
        grid-template-columns: minmax(330px, 430px) minmax(0, 1fr);
        min-height: var(--session-expanded-card-height);
    }

    .session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-expanded-players-shell,
    .session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-expanded-players-shell {
        grid-column: 2;
        grid-row: 1 / 4;
        margin-top: 0;
    }

    .session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-player-preview-popover,
    .session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-player-preview-popover {
        grid-row: auto;
    }
}

/* Session list page final alignment: same spatial rhythm as the single-session page. */
.team-content-shell:has(.session-list-modern-page) {
    background:
        radial-gradient(circle at 76% 4%, rgba(96, 235, 62, 0.05), transparent 30%),
        radial-gradient(circle at 18% 8%, rgba(0, 215, 255, 0.11), transparent 30%),
        linear-gradient(180deg, #061217 0%, #061014 48%, #040b0e 100%);
}

.team-content-shell .mud-container.session-list-page.session-list-modern-page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    min-height: calc(100vh - 96px);
}

.session-list-modern-page .session-list-hero,
.session-list-modern-page .session-list-search-row,
.session-list-modern-page .session-strip-shell,
.session-list-modern-page .session-smart-preview {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.session-list-modern-page .session-list-hero {
    gap: 12px;
    margin-bottom: 10px;
}

.session-list-modern-page .session-list-title-block h1 {
    margin: 0;
    font-size: clamp(1.7rem, 2.2vw, 2.45rem);
    line-height: 1.08;
    font-weight: 950;
}

.session-list-modern-page .session-list-actions {
    gap: 8px;
}

.session-list-modern-page .session-list-pill {
    min-height: 34px;
    padding: 0 13px;
    font-size: .84rem;
}

.session-list-modern-page .session-list-search-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
    z-index: 140;
}

.session-list-modern-page .session-list-search-input {
    min-height: 42px;
    padding: 0 14px;
    border-color: rgba(120, 169, 184, .18);
    background: rgba(4, 18, 23, .58);
    border-radius: 999px !important;
}

.session-list-modern-page .session-list-search-input .mud-input.mud-input-text {
    min-height: 42px;
}

.session-list-modern-page .session-list-search-input .mud-input.mud-input-text::before,
.session-list-modern-page .session-list-search-input .mud-input.mud-input-text::after {
    border-bottom: 0 !important;
}

.session-list-modern-page .session-list-search-input input.mud-input-root {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: .9rem;
}

.session-list-modern-page .session-list-card-nav {
    gap: 8px;
}

.session-list-modern-page .session-list-card-nav span {
    min-height: 32px;
    padding: 0 12px;
    font-size: .82rem;
}

.session-list-modern-page .session-list-card-nav button {
    width: 32px;
    min-height: 32px;
    padding: 6px;
}

.team-content-shell:has(.field-list-modern-page) {
    background:
        radial-gradient(circle at 76% 4%, rgba(96, 235, 62, 0.05), transparent 30%),
        radial-gradient(circle at 18% 8%, rgba(0, 215, 255, 0.11), transparent 30%),
        linear-gradient(180deg, #061217 0%, #061014 48%, #040b0e 100%);
}

.team-content-shell .mud-container.field-list-modern-page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    min-height: calc(100vh - 96px);
}

.field-list-modern-page .field-list-hero,
.field-list-modern-page .field-list-search-row,
.field-list-modern-page .field-list-filters,
.field-list-modern-page .field-strip-shell,
.field-list-modern-page .field-smart-preview,
.field-list-modern-page .field-list-empty {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.field-list-modern-page .field-list-hero {
    gap: 12px;
    margin-bottom: 10px;
}

.field-list-modern-page .field-list-title-block h1 {
    margin: 0;
    font-size: clamp(1.7rem, 2.2vw, 2.45rem);
    line-height: 1.08;
    font-weight: 950;
}

.field-list-modern-page .field-list-actions {
    gap: 8px;
}

.field-list-modern-page .field-list-pill {
    min-height: 34px;
    padding: 0 13px;
    font-size: .84rem;
}

.field-list-modern-page .field-list-search-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
    z-index: 140;
}

.field-list-modern-page .field-list-search-input {
    min-height: 42px;
    padding: 0 14px;
    border-color: rgba(120, 169, 184, .18);
    background: rgba(4, 18, 23, .58);
    border-radius: 999px !important;
}

.field-list-modern-page .field-list-search-input .mud-input.mud-input-text {
    min-height: 42px;
}

.field-list-modern-page .field-list-search-input .mud-input.mud-input-text::before,
.field-list-modern-page .field-list-search-input .mud-input.mud-input-text::after {
    border-bottom: 0 !important;
}

.field-list-modern-page .field-list-search-input input.mud-input-root {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: .9rem;
}

.field-list-modern-page .field-list-card-nav {
    gap: 8px;
}

.field-list-modern-page .field-list-card-nav span {
    min-height: 32px;
    padding: 0 12px;
    font-size: .82rem;
}

.field-list-modern-page .field-list-card-nav button {
    width: 32px;
    min-height: 32px;
    padding: 6px;
}

.session-list-modern-page .session-strip-shell {
    position: relative;
    overflow: visible;
    margin-top: 0;
    margin-bottom: 12px;
    z-index: 5;
    isolation: isolate;
}


.session-list-modern-page .session-strip-card:hover,
.session-list-modern-page .session-strip-card.is-selected {
    border-color: color-mix(in srgb, var(--session-accent) 84%, #ffffff 6%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--session-accent) 7%, transparent);
    transform: none;
}


.session-list-modern-page .session-card-mini-stats small,
.session-list-modern-page .session-card-mini-footer span,
.session-list-modern-page .session-card-player-count {
    font-size: .68rem;
}

.session-list-modern-page .session-smart-preview {
    gap: 12px;
}

.session-list-modern-page .session-preview-controls {
    margin-bottom: 8px;
}

.session-list-modern-page .session-preview-detail-pill {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 34px;
    white-space: nowrap;
}

.session-list-modern-page .session-preview-mode-tabs,
.session-list-modern-page .session-preview-style-tabs {
    padding: 3px;
}

.session-list-modern-page .session-preview-mode-tabs button,
.session-list-modern-page .session-preview-style-tabs button {
    min-height: 30px;
    padding: 0 12px;
    font-size: .74rem;
}

.session-list-modern-page .session-preview-field.is-checkered::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .018) 25%, transparent 25% 50%, rgba(255, 255, 255, .014) 50% 75%, transparent 75%) 0 0 / 15% 15%,
        linear-gradient(110deg, #082116, #0b2b1a 50%, #071b12);
}

@media (max-width: 760px) {
    .team-content-shell .mud-container.session-list-page.session-list-modern-page {
        padding: 0 !important;
    }

    .session-list-modern-page .session-list-search-row {
        grid-template-columns: 1fr;
    }
}

/* Session list polish: compact cards, centered roster, clean expanded edge. */
.session-list-modern-page .session-strip {
    align-items: stretch;
    padding: 2px 0 12px;
    --session-expanded-card-height: 184px;
    --session-card-inset: 10px;
    padding-top: 4px;
    padding-bottom: 8px;
    --session-card-compact-width: clamp(286px, calc((100% - 56px) / 5), 330px);
    grid-auto-columns: minmax(286px, calc((100% - 56px) / 5));
    gap: 14px;
}

.session-list-modern-page .session-strip-card {
    grid-template-rows: auto minmax(38px, auto) minmax(20px, auto) auto auto;
    align-content: start;
    width: 100%;
    display: flex !important;
    flex-direction: column;
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--session-accent) 44%, rgba(120, 169, 184, .18));
    cursor: pointer;
    isolation: isolate;
    padding: var(--session-card-inset, 10px);
    border-radius: 14px;
    background: radial-gradient(circle at var(--session-flow-x, 18%) -12%, rgba(119, 238, 255, var(--session-light, .26)), transparent 42%), linear-gradient(135deg, color-mix(in srgb, var(--session-accent) 22%, rgba(3, 13, 18, .92)) 0%, rgba(3, 10, 14, .91) 48%, color-mix(in srgb, var(--session-accent) 13%, rgba(1, 6, 10, .96)) 100%);
    box-shadow: inset 0 1px 0 rgba(245, 251, 255, .045), 0 12px 28px rgba(0, 0, 0, .22);
    transition: flex-basis .38s cubic-bezier(.2, .9, .2, 1), min-width .38s cubic-bezier(.2, .9, .2, 1), opacity .22s ease, filter .22s ease, transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    min-height: 156px;
}

.session-list-modern-page .session-card-mini-name {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #f5fbff;
    font-weight: 950;
    line-height: 1.18;
    text-overflow: ellipsis;
    margin-top: 0;
    align-items: flex-end;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 30px;
    font-size: .88rem;
}

.session-list-modern-page .session-card-mini-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 9px;
    gap: 7px;
}

.session-list-modern-page .session-card-mini-stats span {
    min-width: 0;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 10px;
    background: rgba(3, 9, 11, .52);
    padding: 7px;
}

.session-list-modern-page .session-card-mini-footer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 9px;
    gap: 7px;
}

.session-list-modern-page .session-card-mini-footer span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--session-accent) 42%, rgba(120, 169, 184, .18));
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--session-accent) 18%, rgba(3, 9, 11, .78)), rgba(3, 9, 11, .60));
    color: #f5fbff;
    font-size: .7rem;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 30px;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session,
.session-list-modern-page .session-strip.has-expanded-session.is-closing-session {
    overflow: hidden;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded,
.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded {
    box-shadow:
        inset 0 1px 0 rgba(245, 251, 255, .035),
        0 14px 34px color-mix(in srgb, var(--session-accent) 7%, rgba(0, 0, 0, .30));
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded::after,
.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded::after,
.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded::before,
.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded::before {
    right: 0;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-expanded-players-shell,
.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-expanded-players-shell {
    justify-self: center;
    width: min(100%, 920px);
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-expanded-players,
.session-list-modern-page .session-strip.has-expanded-session.is-closing-session .session-strip-card.is-expanded .session-expanded-players {
    justify-content: center;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-expanded-players-shell {
    justify-self: stretch;
    width: 100%;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-expanded-players {
    justify-content: safe center;
}

.session-list-modern-page .session-strip.has-expanded-session.is-expanding-session .session-strip-card.is-expanded .session-player-preview-popover {
    position: absolute;
    top: calc(100% + 10px);
    margin-top: 0;
    left: 50%;
    right: auto;
    width: min(1040px, calc(100% - 48px));
    transform: translateX(-50%);
}

.session-list-modern-page .session-strip-shell.is-session-expanded::after {
    display: none !important;
}


.session-list-modern-page .session-strip.has-expanded-session:not(.is-closing-session) .session-strip-card.is-expanded .session-player-preview-popover {
    position: absolute;
    left: 50%;
    right: auto;
    top: calc(100% + 10px);
    width: min(1040px, calc(100% - 48px));
    max-width: calc(100% - 48px);
    margin-top: 0;
    transform: translateX(-50%);
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions),
.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded {
    overflow: visible;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded {
    border-color: color-mix(in srgb, var(--session-accent) 72%, rgba(245, 251, 255, .12)) !important;
    z-index: 60;
    flex: 1 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: var(--session-expanded-card-height);
    min-height: var(--session-expanded-card-height);
    display: grid !important;
    grid-template-columns: minmax(430px, 560px) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    align-content: start;
    gap: 9px clamp(18px, 2.4vw, 36px);
    padding: var(--session-card-inset, 10px) !important;
    background: radial-gradient(circle at 10% 2%, color-mix(in srgb, var(--session-accent) 36%, transparent), transparent 28%), radial-gradient(circle at 72% 48%, color-mix(in srgb, var(--session-accent) 8%, transparent), transparent 50%), linear-gradient(100deg, color-mix(in srgb, var(--session-accent) 21%, rgba(6, 32, 38, .84)) 0%, rgba(4, 22, 27, .64) 38%, rgba(3, 15, 19, .46) 68%, rgba(3, 13, 16, .28) 100%);
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-player-preview-popover {
    z-index: 260;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-card-mini-name,
.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-card-mini-stats,
.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-card-mini-footer {
    grid-column: 1;
    width: 100%;
    max-width: 560px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-card-mini-name {
    grid-row: 1;
    align-self: end;
    min-width: 0;
    margin-top: 10px;
    white-space: nowrap;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-card-mini-stats {
    grid-row: 2;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-card-mini-footer {
    grid-row: 3;
    align-self: start;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-expanded-players-shell {
    position: relative;
    z-index: 3;
    grid-column: 2;
    grid-row: 1 / 4;
    min-width: 0;
    height: 144px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
    align-self: center;
    justify-self: stretch;
    width: 100%;
    margin-top: 0;
    opacity: 1;
    transform: none;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-expanded-players {
    min-width: 0;
    height: 144px;
    min-height: 0;
    margin: 0;
    padding: 0 2px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: safe center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-expanded-players::-webkit-scrollbar {
    display: none;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-expanded-player-card {
    flex: 0 0 108px;
    width: 108px;
    min-height: 132px;
    height: 132px;
    grid-template-rows: 18px 46px 24px 14px;
    gap: 4px;
    padding: 8px;
    border-radius: 14px;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-expanded-player-avatar {
    width: 44px;
    height: 46px;
    border-radius: 15px;
    font-size: .95rem;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-expanded-player-card span {
    align-self: center;
    padding: 3px 7px;
    font-size: .6rem;
    line-height: 1;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-expanded-player-card strong {
    align-self: end;
    font-size: .7rem;
    line-height: 1.05;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card.is-expanded .session-expanded-player-card small {
    align-self: start;
    font-size: .52rem;
    line-height: 1.05;
}

.session-list-modern-page .session-strip.has-expanded-session:not(.is-expanding-session):not(.is-closing-session):not(.is-fading-sessions):not(.is-restoring-sessions) .session-strip-card:not(.is-expanded) {
    height: var(--session-expanded-card-height);
    min-height: var(--session-expanded-card-height);
}

@media (max-width: 1280px) {
    .session-list-modern-page .session-strip {
    grid-auto-columns: minmax(280px, calc((100% - 42px) / 4));
}
}

/* Session list overlays: centered player preview and lightweight Traguard loaders. */
.session-list-modern-page > .session-player-preview-popover {
    --session-accent: #77eeff;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1400;
    width: min(980px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    max-height: min(78vh, 720px);
    margin: 0;
    background:
        radial-gradient(circle at 84% 6%, color-mix(in srgb, var(--session-accent) 18%, transparent), transparent 38%),
        linear-gradient(135deg, rgba(5, 22, 28, .99), rgba(2, 10, 14, .98));
    backdrop-filter: blur(12px);
    transform: translate(-50%, -50%);
    animation: sessionPreviewModalPop .18s ease both;
}

.traguard-simple-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #f5fbff;
    text-align: left;
}

.traguard-simple-loader > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.traguard-simple-loader strong,
.traguard-simple-loader small {
    display: block;
    min-width: 0;
}

.traguard-simple-loader strong {
    font-size: .98rem;
    line-height: 1.15;
    font-weight: 950;
}

.traguard-simple-loader small {
    color: #9cc5d4;
    font-size: .78rem;
    line-height: 1.25;
    font-weight: 750;
}

.traguard-simple-spinner {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 3px solid rgba(120, 169, 184, .18);
    border-top-color: #16d8ff;
    border-right-color: var(--team-selection-accent);
    background:
        radial-gradient(circle, rgba(22, 216, 255, .16) 0 28%, transparent 32%);
    box-shadow: 0 0 22px rgba(22, 216, 255, .16);
    animation: traguardSimpleSpinnerSpin .82s linear infinite;
}

.session-list-modern-page .session-list-simple-loader {
    width: 100%;
    min-height: 178px;
    padding: 22px;
    border: 1px solid rgba(120, 169, 184, .24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 18% 0%, rgba(22, 216, 255, .12), transparent 38%),
        radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--team-selection-accent) 9%, transparent), transparent 34%),
        rgba(3, 13, 18, .72);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}

.session-list-modern-page .session-preview-simple-loader,
.session-list-modern-page .session-player-preview-loader {
    position: absolute;
    inset: 0;
    z-index: 8;
    width: 100%;
    min-height: 100%;
    padding: 14px;
    background:
        radial-gradient(circle at 50% 42%, rgba(22, 216, 255, .12), transparent 40%),
        rgba(1, 7, 9, .58);
    backdrop-filter: blur(3px);
}

.session-list-modern-page .session-player-preview-loader {
    z-index: 4;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.session-list-modern-page .session-player-preview-loader .traguard-simple-spinner {
    width: 34px;
    height: 34px;
    border-width: 2px;
}

@keyframes traguardSimpleSpinnerSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sessionPreviewModalPop {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 8px)) scale(.985);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (max-width: 760px) {
    .session-list-modern-page > .session-player-preview-popover {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 72px);
    }

    .session-list-modern-page > .session-player-preview-popover .session-player-preview-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .session-list-modern-page > .session-player-preview-popover .session-player-preview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .traguard-simple-loader {
        text-align: center;
    }

    .session-list-modern-page .session-list-simple-loader {
        flex-direction: column;
    }
}

/* Player list modern page: aligned with the compact session list language. */
.player-list-page.player-list-modern-page {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 20px 34px 42px;
    background: transparent;
    color: #f5fbff;
}

.team-content-shell .mud-container.player-list-page.player-list-modern-page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    min-height: calc(100vh - 96px);
}

.player-list-modern-page .player-list-hero,
.player-list-modern-page .player-list-search-row,
.player-list-modern-page .player-list-filters,
.player-list-modern-page .player-strip-shell,
.player-list-modern-page .player-list-empty,
.player-list-modern-page .player-list-simple-loader {
    width: min(100%, 1760px);
    margin-left: auto;
    margin-right: auto;
}

.player-list-modern-page .player-list-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.player-list-modern-page .player-list-title-block h1 {
    margin: 0;
    color: #f5fbff;
    font-size: clamp(1.7rem, 2.2vw, 2.45rem);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: 0;
}

.player-list-modern-page .player-list-actions,
.player-list-modern-page .player-list-card-nav,
.player-list-modern-page .player-list-empty > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.player-list-modern-page .player-list-pill,
.player-list-modern-page .player-list-card-nav button,
.player-list-modern-page .player-list-filters button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid rgba(120, 169, 184, .2);
    border-radius: 999px;
    background: rgba(3, 13, 18, .68);
    color: #f5fbff;
    font-size: .78rem;
    font-weight: 950;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.player-list-modern-page .player-list-pill:not(:disabled):hover,
.player-list-modern-page .player-list-card-nav button:not(:disabled):hover,
.player-list-modern-page .player-list-card-nav button.is-active,
.player-list-modern-page .player-list-filters button:hover {
    transform: translateY(-1px);
    border-color: rgba(119, 238, 255, .56);
    background: rgba(9, 34, 41, .76);
    box-shadow: 0 10px 24px rgba(0, 215, 255, .1);
}

.player-list-modern-page .player-list-primary-pill {
    border-color: rgba(116, 243, 62, .36);
    background: linear-gradient(135deg, rgba(116, 243, 62, .16), rgba(3, 13, 18, .78));
}

.player-list-modern-page .player-list-pill:disabled,
.player-list-modern-page .player-list-card-nav button:disabled {
    cursor: default;
    opacity: .62;
}

.player-list-modern-page .player-list-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.player-list-modern-page .player-list-search-input {
    min-width: 0;
    padding: 0 12px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 999px;
    background: rgba(3, 13, 18, .66);
}

.player-list-modern-page .player-list-search-input .mud-input.mud-input-text {
    min-height: 42px;
}

.player-list-modern-page .player-list-search-input .mud-input.mud-input-text::before,
.player-list-modern-page .player-list-search-input .mud-input.mud-input-text::after {
    border-bottom: 0 !important;
}

.player-list-modern-page .player-list-search-input input.mud-input-root {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    color: #f5fbff;
    font-size: .9rem;
}

.player-list-modern-page .player-list-search-input input.mud-input-root::placeholder {
    color: #91b7c7;
    opacity: 1;
}

.player-list-modern-page .player-list-search-input .mud-input-adornment-start {
    color: #77eeff;
}

.player-list-modern-page .player-list-card-nav span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 999px;
    background: rgba(3, 13, 18, .58);
    color: #9cc5d4;
    font-size: .82rem;
    font-weight: 950;
}

.player-list-modern-page .player-list-card-nav button {
    width: 32px;
    min-height: 32px;
    padding: 6px;
}

.player-list-modern-page .player-list-filters {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(220px, 280px) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 16px;
    background: rgba(3, 13, 18, .62);
}

.player-list-modern-page .player-list-filter-select .mud-input-control-input-container {
    color: #f5fbff;
}

.player-list-modern-page .player-strip-shell {
    position: relative;
    z-index: 4;
    overflow: visible;
}

.player-list-modern-page .player-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
    align-items: stretch;
    padding: 4px 0 12px;
}

.player-list-modern-page .player-strip-card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 216px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--player-accent) 48%, rgba(120, 169, 184, .22));
    border-radius: 14px;
    background:
        radial-gradient(circle at var(--player-flow-x, 18%) -12%, rgba(119, 238, 255, var(--player-light, .26)), transparent 42%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--player-accent) 22%, rgba(3, 13, 18, .92)) 0%,
            rgba(3, 10, 14, .91) 48%,
            color-mix(in srgb, var(--player-accent) 13%, rgba(1, 6, 10, .96)) 100%);
    box-shadow: inset 0 1px 0 rgba(245, 251, 255, .045), 0 12px 28px rgba(0, 0, 0, .22);
    color: #f5fbff;
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}

.player-list-modern-page .player-strip-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(115deg,
            color-mix(in srgb, var(--player-accent) 11%, transparent),
            transparent 38%,
            rgba(255, 255, 255, .025) 62%,
            transparent);
    opacity: .9;
    pointer-events: none;
}

.player-list-modern-page .player-strip-card:hover,
.player-list-modern-page .player-strip-card:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--player-accent) 84%, #ffffff 6%);
    box-shadow: inset 0 1px 0 rgba(245, 251, 255, .055), 0 18px 42px color-mix(in srgb, var(--player-accent) 13%, rgba(0, 0, 0, .34));
    outline: none;
}

.player-list-modern-page .player-strip-card-glow {
    position: absolute;
    inset: -30px auto auto var(--player-flow-x, 18%);
    z-index: -1;
    width: 124px;
    height: 124px;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--player-accent) 30%, transparent), transparent 68%);
    opacity: .72;
    transform: translateX(-50%);
    pointer-events: none;
}

.player-list-modern-page .player-card-mini-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
}


.player-list-modern-page .player-role-badge {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .72rem;
    line-height: 1;
    font-weight: 950;
    max-width: 70%;
    background: color-mix(in srgb, var(--player-accent) 22%, rgba(3, 9, 11, .68));
    color: #f5fbff;
}

.player-list-modern-page .player-card-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    min-width: 0;
}

.player-list-modern-page .player-card-avatar {
    width: 70px;
    height: 76px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--player-accent) 36%, rgba(245, 251, 255, .14));
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 18%, rgba(245, 251, 255, .16), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--player-accent) 24%, rgba(4, 15, 20, .94)), rgba(1, 7, 10, .94));
    color: #f5fbff;
    font-size: 1.18rem;
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(245, 251, 255, .06);
}

.player-list-modern-page .player-card-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.player-list-modern-page .player-card-identity {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.player-list-modern-page .player-card-identity span,
.player-list-modern-page .player-card-identity strong,
.player-list-modern-page .player-card-identity small {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-list-modern-page .player-card-identity span {
    width: max-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--player-accent) 22%, rgba(3, 9, 11, .76));
    color: #f5fbff;
    font-size: .66rem;
    font-weight: 950;
}

.player-list-modern-page .player-card-identity strong {
    color: #f5fbff;
    font-size: 1rem;
    line-height: 1.08;
    font-weight: 950;
}

.player-list-modern-page .player-card-identity small {
    color: #91b7c7;
    font-size: .68rem;
    font-weight: 850;
}

.player-list-modern-page .player-card-mini-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 13px;
}

.player-list-modern-page .player-card-mini-stats span {
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 10px;
    background: rgba(3, 9, 11, .52);
}

.player-list-modern-page .player-card-mini-stats small,
.player-list-modern-page .player-card-mini-stats strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-list-modern-page .player-card-mini-stats small {
    color: #91b7c7;
    font-size: .58rem;
    font-weight: 850;
}

.player-list-modern-page .player-card-mini-stats strong {
    margin-top: 4px;
    color: #f5fbff;
    font-size: .72rem;
    font-weight: 950;
}

.player-list-modern-page .player-card-mini-footer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
    margin-top: 10px;
}

.player-list-modern-page .player-card-mini-footer span {
    min-width: 0;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--player-accent) 42%, rgba(120, 169, 184, .18));
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--player-accent) 18%, rgba(3, 9, 11, .78)), rgba(3, 9, 11, .60));
    color: #f5fbff;
    font-size: .68rem;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-list-modern-page .player-list-simple-loader,
.player-list-modern-page .player-list-empty {
    min-height: 178px;
    padding: 22px;
    border: 1px solid rgba(120, 169, 184, .24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 18% 0%, rgba(22, 216, 255, .12), transparent 38%),
        radial-gradient(circle at 84% 18%, rgba(116, 243, 62, .09), transparent 34%),
        rgba(3, 13, 18, .72);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}

.player-list-modern-page .player-list-empty {
    display: grid;
    place-items: center;
    gap: 10px;
    text-align: center;
}

.player-list-modern-page .player-list-empty .mud-icon-root {
    color: #77eeff;
}

.player-list-modern-page .player-list-empty strong,
.player-list-modern-page .player-list-empty small {
    display: block;
}

.player-list-modern-page .player-list-empty strong {
    color: #f5fbff;
    font-size: 1rem;
    font-weight: 950;
}

.player-list-modern-page .player-list-empty small {
    color: #9cc5d4;
    font-size: .78rem;
    font-weight: 750;
}

@media (max-width: 980px) {
    .player-list-modern-page .player-list-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .player-list-modern-page .player-list-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .player-list-modern-page .player-list-search-row,
    .player-list-modern-page .player-list-filters {
        grid-template-columns: 1fr;
    }

    .player-list-modern-page .player-list-card-nav {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .team-content-shell .mud-container.player-list-page.player-list-modern-page,
    .player-list-page.player-list-modern-page {
        padding: 0 !important;
    }

    .player-list-modern-page .player-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .player-list-modern-page .player-card-main {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .player-list-modern-page .player-card-avatar {
        width: 60px;
        height: 66px;
        border-radius: 16px;
    }

    .player-list-modern-page .player-card-mini-footer {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Browser-saved football pitch style */
.pitch-style-settings-card {
    overflow: hidden;
}

.pitch-style-settings-layout {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: stretch;
}

.pitch-style-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pitch-style-option {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 8px;
    background: rgba(2, 8, 10, .34);
    color: var(--team-text, #f4f7f8);
    font-weight: 900;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.pitch-style-option:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 216, 239, .42);
}

.pitch-style-option.is-active {
    border-color: rgba(37, 216, 239, .68);
    background: rgba(37, 216, 239, .10);
    box-shadow: inset 0 0 0 1px rgba(37, 216, 239, .16);
}

.pitch-style-option .mud-icon-root {
    color: var(--team-cyan, #25d8ef);
}

.pitch-style-custom-row {
    grid-column: 1;
    display: grid;
    grid-template-columns: auto minmax(130px, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.pitch-style-color-swatch {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 8px;
    background: rgba(2, 8, 10, .34);
    color: var(--team-muted, #91b7c7);
    font-size: .78rem;
    font-weight: 900;
}

.pitch-style-color-swatch input {
    width: 34px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--pitch-style-swatch);
    cursor: pointer;
}

.pitch-style-preview {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: relative;
    min-height: 220px;
    aspect-ratio: 105 / 68;
    overflow: hidden;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 12px;
    background: var(--pitch-preview-background);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

.pitch-style-preview.is-bands {
    --pitch-preview-background: var(--team-pitch-background);
}

.pitch-style-preview.is-uniform {
    --pitch-preview-background:
        radial-gradient(circle at 50% 50%, rgba(55, 123, 64, .16), transparent 48%),
        linear-gradient(135deg, #082016, #0d2e1a 52%, #071910);
}

.pitch-style-preview.is-black {
    --pitch-preview-background:
        radial-gradient(circle at 58% 22%, rgba(120, 169, 184, .075), transparent 36%),
        linear-gradient(135deg, #050607, #111315 52%, #020303);
}

.pitch-style-preview.is-custom {
    --pitch-preview-background:
        repeating-linear-gradient(
            90deg,
            color-mix(in srgb, var(--pitch-preview-custom-color) 74%, #000 26%) 0 10%,
            color-mix(in srgb, var(--pitch-preview-custom-color) 58%, #000 42%) 10% 20%),
        radial-gradient(circle at 48% 24%, color-mix(in srgb, var(--pitch-preview-custom-color) 35%, transparent), transparent 42%),
        color-mix(in srgb, var(--pitch-preview-custom-color) 42%, #000 58%);
}

.pitch-style-preview::after,
.soccer-field::after,
.player-analytics-detail-page .player-field::after,
.session-player-detail-page .player-field::after,
.team-full-page .position-mini-field::after,
.team-full-page .position-role-field::after,
.team-full-page .heat-performance-field::after,
.team-full-page .position-shape-field::after,
.session-preview-field::after,
.session-list-modern-page .session-player-preview-field::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .035), transparent 31%),
        linear-gradient(90deg, rgba(0, 0, 0, .20), transparent 18%, transparent 82%, rgba(0, 0, 0, .20));
    box-shadow: inset 0 0 70px rgba(0, 0, 0, .34);
}

.pitch-style-preview svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.pitch-style-preview rect,
.pitch-style-preview line,
.pitch-style-preview circle {
    fill: none;
    stroke: rgba(221, 246, 230, .62);
    stroke-width: .34;
    vector-effect: non-scaling-stroke;
}

.pitch-style-preview circle[r="0.35"],
.pitch-style-preview circle[r="0.45"] {
    fill: rgba(221, 246, 230, .84);
}

.soccer-field,
.player-analytics-detail-page .player-field,
.session-player-detail-page .player-field,
.team-full-page .soccer-field.team-map-surface,
.team-full-page .position-mini-field,
.team-full-page .position-role-field,
.team-full-page .heat-performance-field,
.team-full-page .position-shape-field,
.session-preview-field,
.session-list-modern-page .session-player-preview-field,
.documentation-visual-pitch {
    background: var(--team-pitch-background) !important;
}

.roster-field {
    background:
        linear-gradient(90deg,
            transparent 49.8%,
            color-mix(in srgb, var(--team-pitch-line-color) 30%, transparent) 50%,
            transparent 50.2%),
        radial-gradient(circle at 50% 50%,
            transparent 0 78px,
            color-mix(in srgb, var(--team-pitch-line-color) 26%, transparent) 80px 81px,
            transparent 83px),
        var(--team-pitch-background) !important;
}

.roster-expectation-field {
    background:
        linear-gradient(90deg,
            transparent 49.8%,
            color-mix(in srgb, var(--team-pitch-line-color) 30%, transparent) 50%,
            transparent 50.2%),
        radial-gradient(circle at 50% 50%,
            transparent 0 64px,
            color-mix(in srgb, var(--team-pitch-line-color) 26%, transparent) 66px 67px,
            transparent 69px),
        var(--team-pitch-background) !important;
}

.team-full-page .cod-zoom-field,
.team-full-page .sprint-zoom-field {
    background: var(--team-pitch-background) !important;
}

.session-preview-field::before,
.session-preview-field.is-bands::before,
.session-preview-field.is-uniform::before,
.session-preview-field.is-checkered::before {
    background: var(--team-pitch-background) !important;
}

.session-list-page.session-list-modern-page .session-preview-field {
    margin-top: 32px;
}

.field-svg > rect:first-of-type:not([fill="none"]),
.team-full-page .pitch-bg,
.player-analytics-detail-page .player-field .pitch-bg,
.session-player-detail-page .player-field .pitch-bg,
.team-full-page .position-mini-pitch-bg,
.documentation-visual-pitch .pitch-bg {
    fill: transparent !important;
}

.team-full-page .pitch-line,
.player-analytics-detail-page .player-field .pitch-line,
.session-player-detail-page .player-field .pitch-line,
.team-full-page .position-mini-pitch-line {
    stroke: var(--team-pitch-line-color) !important;
}

.team-full-page .pitch-dot,
.session-player-detail-page .player-field .pitch-dot,
.team-full-page .position-mini-pitch-dot {
    fill: var(--team-pitch-dot-color) !important;
}

@media (max-width: 900px) {
    .pitch-style-settings-layout {
        grid-template-columns: 1fr;
    }

    .pitch-style-preview {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 560px) {
    .pitch-style-options,
    .pitch-style-custom-row {
        grid-template-columns: 1fr;
    }
}

.wizard-map__wrapper--compact {
        min-height: 320px;
    }

    .wizard-map__wrapper--compact .wizard-map__canvas {
        min-height: 320px;
    }

    

    

    


    

    

    

    

    

    

    

    

    

    

.field-wizard__container {
        padding-bottom: 0.5rem;
    }

    .field-wizard__steps {
        border-radius: 12px;
        background-color: rgba(25, 118, 210, 0.08);
        padding: 0.75rem;
    }

    .wizard-step {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        border-radius: 10px;
        transition: all 0.2s ease;
    }

    .wizard-step__number {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(25, 118, 210, 0.15);
        color: #1565c0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }

    .wizard-step__labels {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .wizard-step__title {
        font-weight: 600;
        font-size: 0.95rem;
    }

    .wizard-step__caption {
        font-size: 0.75rem;
        color: whitesmoke;
    }

    .wizard-step--active {
        background-color: #3a4e6a;
        box-shadow: 0 2px 10px rgba(25, 118, 210, 0.18);
    }

    .wizard-step--done {
        opacity: 0.6;
    }

    .wizard-step--interactive {
        cursor: pointer;
        user-select: none;
    }

    .wizard-step--interactive:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.35);
        border-radius: 12px;
    }

    .wizard-step__divider {
        width: 16px;
        height: 2px;
        align-self: center;
        border-radius: 999px;
        background: rgba(25, 118, 210, 0.3);
    }

    .wizard-card {
        padding: 1.5rem;
        border-radius: 16px;
    }

    .field-location-search {
        display: block;
        padding: 1rem;
        border: 1px solid rgba(98, 220, 232, 0.24);
        border-radius: 8px;
        background: rgba(2, 18, 22, 0.34);
    }

    .field-location-search__bar {
        width: 100%;
    }

    .field-location-search__input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .field-location-results {
        display: grid;
        gap: 0.5rem;
    }

    .field-location-result {
        width: 100%;
        min-height: 48px;
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.75rem;
        padding: 0.65rem 0.75rem;
        border: 1px solid rgba(145, 180, 188, 0.24);
        border-radius: 6px;
        background: rgba(1, 13, 17, 0.5);
        color: inherit;
        text-align: left;
        cursor: pointer;
    }

    .field-location-result:hover,
    .field-location-result:focus-visible {
        border-color: rgba(98, 220, 232, 0.72);
        background: rgba(17, 73, 80, 0.32);
        outline: none;
    }

    .field-location-result.is-selected {
        border-color: #4fd0a5;
        background: rgba(34, 145, 111, 0.18);
    }

    .field-location-result span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .field-location-result small {
        white-space: nowrap;
        color: #a9c0c6;
    }

    .field-location-attribution {
        display: block;
        color: #9fb5bb;
    }

    @media (max-width: 600px) {
        .field-location-search__bar {
            flex-direction: column;
        }

        .field-location-result {
            grid-template-columns: 24px minmax(0, 1fr);
        }

        .field-location-result small {
            grid-column: 2;
        }
    }

    .wizard-map__wrapper {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        min-height: 420px;
    }

    .wizard-map__canvas {
        width: 100%;
        height: 100%;
        min-height: 420px;
    }

    .wizard-map__canvas.wizard-map__canvas--selecting,
    .wizard-map__canvas.wizard-map__canvas--selecting .leaflet-container {
        cursor: crosshair !important;
    }

    .wizard-map__overlay {
        position: absolute;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(13, 71, 161, 0.15);
        width: 33%;
        right: 0;
    }


    .overlay-card {
        padding: 1rem 1.5rem;
        border-radius: 16px;
        text-align: center;
        backdrop-filter: blur(8px);
        width: 100%;
        height: 96%;
        position: absolute;
        left: 2% !important;
        bottom: 2%;
    }


    .overlay-grid {
    height: 250px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 0.5rem;
    margin-top: 0.75rem;
}

    .overlay-grid > :nth-child(1) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .overlay-grid > :nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .overlay-grid > :nth-child(3) {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }

    .overlay-grid > :nth-child(4) {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }

    .corner-card {
        padding: 1.1rem 1rem;
        border-radius: 16px;
    }

    .corner-card .mud-button {
        width: 100%;
    }

    .corner-card .mud-icon-button {
        margin-left: auto;
    }

    .field-corner-icon .field-corner-pin {
        width: 26px;
        height: 26px;
        background: #1976d2;
        color: white;
        font-weight: 600;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
        box-shadow: 0 4px 10px rgba(25, 118, 210, 0.35);
    }

.mud-popover.mud-popover-open:not(.mud-tooltip) {
    border-radius: 3px !important;
    backdrop-filter: blur(8px);
    align-self: flex-start;
    opacity: 1!important;
    transition: opacity;
    z-index: 20000!important;
    background-color: black;
}

.traguard-transient-tooltip-target {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.mud-popover.mud-tooltip {
    pointer-events: none;
    z-index: var(--mud-zindex-tooltip) !important;
}

.session-doc-dialog-shell {
        display: grid;
        gap: 18px;
        width: min(1120px, 92vw);
        max-height: 84vh;
        padding: 20px;
        color: #eaf7f8;
        background:
            linear-gradient(135deg, rgba(10, 31, 38, .98), rgba(8, 19, 24, .98)),
            #081318;
        border: 1px solid rgba(16, 200, 234, .16);
        border-radius: 12px;
        overflow: hidden;
    }

    .session-doc-dialog-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .session-doc-dialog-head span {
        display: block;
        color: #10c8ea;
        font-size: .72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .session-doc-dialog-head h2 {
        margin: 4px 0 0;
        color: #f7ffff;
        font-size: 1.45rem;
        font-weight: 900;
        letter-spacing: 0;
    }

    .session-doc-dialog-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .session-doc-dialog-content {
        overflow: auto;
        max-height: calc(84vh - 105px);
        padding-right: 6px;
    }

    @media (max-width: 720px) {
        .session-doc-dialog-shell {
            width: 94vw;
            padding: 14px;
        }

        .session-doc-dialog-head {
            display: grid;
        }

        .session-doc-dialog-actions {
            justify-content: flex-start;
        }
    }

.chat-new-button {
        min-height: 44px;
        border-radius: 8px;
    }

    /* SHELL ORIZZONTALE */
    

    /* SIDEBAR APERTA */
    

        

        /* SIDEBAR CHIUSA → 0, la chat prende tutto */
        

    /* bottone dentro sidebar, a sinistra */
    

    

    

    

    

    /* AREA CHAT */
    

    

    

    .chat-media-stack {
        display: grid;
        gap: 12px;
        margin: 14px 0;
    }

    

    

    .chat-media-content {
        padding: 12px;
        overflow: auto;
    }

    .chat-media-content svg {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .session-summary-media {
        display: grid;
        gap: 14px;
    }

    .session-summary-header h3 {
        margin: 0;
        font-size: 1.05rem;
        line-height: 1.25;
    }

    .session-summary-header p {
        margin: 4px 0 0;
        color: #64748b;
    }

    .session-summary-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }

    .session-summary-card {
        border-left: 4px solid var(--summary-accent, #0f766e);
        border-radius: 8px;
        background: #f8fafc;
        padding: 12px;
        min-height: 96px;
        display: grid;
        align-content: start;
        gap: 4px;
    }

    .session-summary-card span {
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 700;
    }

    .session-summary-card strong {
        color: #0f172a;
        font-size: 1.35rem;
        line-height: 1.1;
    }

    .session-summary-card small {
        color: #475569;
    }

    .session-summary-highlights {
        margin: 0;
        padding-left: 18px;
        color: #334155;
    }

    /* responsive */
    @media (max-width: 992px) {
        .chat-shell

    {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .chat-command-center {
        align-items: stretch;
        flex-direction: column;
    }

    .chat-command-actions {
        justify-content: flex-start;
    }

    .chat-shell-sidebar.open {
        width: 100%;
        flex: 0 0 auto;
        border-radius: 12px;
    }

    .chat-shell-sidebar.closed {
        width: 0;
        flex: 0 0 0;
    }

    }

    @media (max-width: 768px) {
        

    }

/* === FIELD CONTAINER === */
    

    


    

    

    /* === HEAT MAP === */
    

    

        

    /* === PITCH MAP === */
    

    

        

    

    /* Zone molto piccole */
    

    /* Zone medie */
    

    /* Zone grandi */
    

    /* === PLAYER PATHS === */
    

    

    /* === PLAYER NUMBERS === */
    

    

    /* === MARKDOWN STYLING === */
    

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

            

        

    /* === CHAT MESSAGES CONTAINER === */
    

    /* Opzionale: margine diverso per mobile */
    @media (max-width: 768px) {
        
    }

.team-content-shell:has(.chat-agent-page) {
        padding: 0 !important;
        background:
            linear-gradient(90deg, rgba(16, 200, 234, .08) 1px, transparent 1px),
            linear-gradient(0deg, rgba(138, 242, 31, .045) 1px, transparent 1px),
            linear-gradient(145deg, #061014 0%, #07181d 42%, #03080b 100%) !important;
        background-size: 72px 72px, 72px 72px, auto !important;
    }

    .team-content-shell .mud-container.chat-agent-page {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .chat-agent-page {
        --chat-accent: #10c8ea;
        --chat-accent-soft: rgba(16, 200, 234, .14);
        --chat-panel: rgba(4, 16, 20, .92);
        --chat-panel-soft: rgba(9, 29, 35, .86);
        --chat-border: rgba(120, 169, 184, .22);
        --chat-border-strong: rgba(194, 230, 238, .36);
        --chat-text: #f5fbff;
        --chat-muted: #91adba;
        --chat-muted-strong: #c8dce3;
        width: 100%;
        min-height: 100vh;
        height: 100vh;
        display: flex;
        flex-direction: column;
        gap: clamp(18px, 2.1vw, 28px);
        padding: clamp(18px, 2.2vw, 34px);
        box-sizing: border-box;
        color: var(--chat-text);
        background:
            linear-gradient(90deg, rgba(16, 200, 234, .08) 1px, transparent 1px),
            linear-gradient(0deg, rgba(138, 242, 31, .045) 1px, transparent 1px),
            linear-gradient(120deg, transparent 0 26%, rgba(16, 200, 234, .08) 26% 27%, transparent 27% 72%, rgba(245, 196, 0, .08) 72% 73%, transparent 73%),
            linear-gradient(145deg, #061014 0%, #07181d 42%, #03080b 100%);
        background-size: 72px 72px, 72px 72px, auto, auto;
        overflow: hidden;
    }

    .chat-agent-page.theme-traintom {
        --chat-accent: #8af21f;
        --chat-accent-soft: rgba(138, 242, 31, .14);
    }

    .chat-agent-page.theme-session {
        --chat-accent: #f5c400;
        --chat-accent-soft: rgba(245, 196, 0, .14);
    }

    .chat-agent-page.theme-player {
        --chat-accent: #9b67e6;
        --chat-accent-soft: rgba(155, 103, 230, .14);
    }

    @supports (height: 100dvh) {
        .chat-agent-page {
            min-height: 100dvh;
            height: 100dvh;
        }
    }

    .chat-agent-page > .mud-grid {
        flex: 1 1 auto;
        min-height: 0;
        width: min(1680px, 100%) !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-content: stretch;
        gap: 22px;
    }

    .chat-agent-page > .mud-grid > .mud-grid-item {
        max-width: 100% !important;
        flex-basis: auto !important;
        padding: 0 !important;
    }

    .chat-agent-page > .mud-grid > .mud-grid-item:first-child {
        flex: 0 0 auto;
    }

    .chat-agent-page > .mud-grid > .mud-grid-item:last-child {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
    }

    .chat-command-center {
    justify-content: space-between;
    min-height: 150px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end !important;
    gap: clamp(18px, 3vw, 34px) !important;
    padding: 0 !important;
}

    .chat-eyebrow {
    color: #0f766e;
    font-weight: 700;
    display: none !important;
}

    .chat-page-title {
    margin: 0 0 18px !important;
    color: var(--chat-text) !important;
    font-size: clamp(2.7rem, 5vw, 5.6rem) !important;
    line-height: .9 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-transform: none;
}

    .chat-page-subtitle {
    margin-top: 6px;
    max-width: 760px;
    margin: 0 !important;
    color: var(--chat-muted-strong) !important;
    font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
    line-height: 1.48 !important;
    font-weight: 700 !important;
}

    .chat-command-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: wrap;
}

    .chat-agent-switcher {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px !important;
    border: 1px solid var(--chat-border) !important;
    border-radius: 8px !important;
    background: rgba(5, 18, 22, .72) !important;
    box-shadow: 0 20px 58px rgba(0, 0, 0, .24);
}

    .chat-agent-pill {
    min-height: 42px !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: transparent !important;
    color: var(--chat-muted-strong) !important;
    cursor: pointer;
    font: inherit;
    font-size: .88rem !important;
    font-weight: 900 !important;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

    .chat-agent-pill:hover,
    .chat-agent-pill:focus-visible {
        background: rgba(255, 255, 255, .07) !important;
        color: var(--chat-text) !important;
        outline: none;
    }

    .chat-agent-pill.selected {
    color: #041015 !important;
    background: var(--chat-accent) !important;
    box-shadow: 0 0 28px color-mix(in srgb, var(--chat-accent) 28%, transparent);
}

    .chat-agent-pill svg {
        fill: currentColor !important;
    }

    .chat-new-button.mud-button-root {
        min-height: 50px !important;
        border-radius: 8px !important;
        padding: 0 18px !important;
        color: #041015 !important;
        background: var(--chat-accent) !important;
        font-weight: 950 !important;
        box-shadow: 0 18px 42px color-mix(in srgb, var(--chat-accent) 24%, transparent) !important;
    }

    

    .chat-shell-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease;
    min-width: 0 !important;
    border: 1px solid var(--chat-border) !important;
    border-top: 2px solid var(--chat-accent) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(4, 16, 20, .94), rgba(8, 28, 33, .88)) !important;
    box-shadow: 0 26px 82px rgba(0, 0, 0, .28);
    height: 100%;
    overflow: hidden;
}

    .chat-shell-sidebar.open {
    width: auto !important;
    flex: none !important;
}

    .chat-shell-sidebar.closed {
    overflow: hidden;
    width: 56px !important;
    flex: none !important;
    display: grid !important;
    place-items: start center;
    padding-top: 14px;
}

    .chat-shell.sidebar-open {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .chat-shell:not(.sidebar-open) {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .sidebar-toggle-button {
    position: absolute !important;
    top: 14px !important;
    left: auto !important;
    right: 14px !important;
    z-index: 10;
}

    .sidebar-toggle-button .mud-icon-button,
    .chat-shell-sidebar.closed .mud-icon-button {
        width: 38px !important;
        height: 38px !important;
        border: 1px solid var(--chat-border) !important;
        border-radius: 8px !important;
        color: var(--chat-accent) !important;
        background: rgba(255, 255, 255, .055) !important;
    }

    .chat-sidebar-inner {
    overflow-y: auto;
    padding-top: 52px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 62px 14px 14px !important;
}

    

    

    

    

    

    .chat-session-item.mud-list-item {
        min-height: 82px;
        padding: 14px 16px !important;
        border: 1px solid rgba(255, 255, 255, .085) !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, .055) !important;
        color: var(--chat-muted-strong) !important;
        transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .chat-session-item.mud-list-item:hover,
    .chat-session-item.mud-list-item:focus-within {
        transform: translateY(-2px);
        border-color: var(--chat-border-strong) !important;
        background: rgba(255, 255, 255, .085) !important;
    }

    .chat-session-item.selected.mud-list-item {
        border-color: color-mix(in srgb, var(--chat-accent) 52%, transparent) !important;
        background: color-mix(in srgb, var(--chat-accent-soft) 62%, rgba(255, 255, 255, .04)) !important;
    }

    .chat-session-item .mud-typography-subtitle2 {
        color: var(--chat-text) !important;
        font-weight: 900 !important;
    }

    .chat-session-item .mud-typography-caption {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
        color: var(--chat-muted) !important;
        font-weight: 700;
    }

    .chat-session-item .mud-chip {
        height: 24px !important;
        border-radius: 999px !important;
        color: #041015 !important;
        background: var(--chat-accent) !important;
        font-weight: 950 !important;
    }

    .chat-empty-list,
    .chat-loading-state {
        min-height: 180px;
        display: grid;
        place-items: center;
        border: 1px dashed var(--chat-border);
        border-radius: 8px;
        color: var(--chat-muted-strong);
        background: rgba(255, 255, 255, .035);
        padding: 18px;
    }

    .chat-shell-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex !important;
}

    .chatbot-card.mud-card {
        flex: 1 1 auto;
        min-height: 0;
        display: flex !important;
        flex-direction: column !important;
        border: 1px solid var(--chat-border) !important;
        border-top: 2px solid var(--chat-accent) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: linear-gradient(180deg, rgba(3, 12, 15, .94), rgba(6, 18, 23, .92)) !important;
        box-shadow: 0 26px 82px rgba(0, 0, 0, .3) !important;
    }

    .chatbot-card .mud-card-header {
        min-height: 94px !important;
        padding: 20px 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
        background: linear-gradient(90deg, rgba(255, 255, 255, .035), transparent) !important;
    }

    .chatbot-card .mud-card-header .mud-typography-h6 {
        color: var(--chat-text) !important;
        font-size: 1.08rem !important;
        font-weight: 950 !important;
    }

    .chatbot-card .mud-card-header .mud-typography-caption {
        color: var(--chat-muted) !important;
        font-weight: 750;
    }

    .chatbot-card .mud-card-header .mud-icon-button {
        width: 42px !important;
        height: 42px !important;
        border: 1px solid rgba(239, 68, 68, .32);
        border-radius: 8px !important;
        color: #ff8c8c !important;
        background: rgba(239, 68, 68, .08) !important;
    }

    

    .chat-messages-container > .mb-3 {
        margin: 0 !important;
        display: flex;
    }

    .chat-messages-container > .mb-3:has([style*="margin-left: auto"]) {
        justify-content: flex-end;
    }

    .chat-messages-container > .mb-3:has([style*="margin-right: auto"]) {
        justify-content: flex-start;
    }

    .chat-messages-container .mud-paper {
        box-shadow: 0 18px 58px rgba(0, 0, 0, .24) !important;
    }

    .chat-messages-container .mud-paper .mud-typography-subtitle2 {
        font-weight: 950 !important;
    }

    .chat-messages-container .mud-paper .mud-typography-caption {
        color: var(--chat-muted) !important;
        font-weight: 750;
    }

    .markdown-content,
    .markdown-content p,
    .markdown-content li,
    .markdown-content span {
        color: var(--chat-text) !important;
        line-height: 1.58;
    }

    

    

    

    

    

    .chat-media-frame {
    overflow: hidden;
    border: 1px solid var(--chat-border) !important;
    border-radius: 8px !important;
    background: rgba(2, 8, 10, .54) !important;
}

    .chat-media-label {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--chat-text) !important;
    background: color-mix(in srgb, var(--chat-accent-soft) 55%, rgba(255, 255, 255, .035)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

    .chat-media-label svg {
        fill: var(--chat-accent) !important;
    }

    .chatbot-card > .mud-card-actions {
        padding: 16px 18px !important;
        border-top: 1px solid rgba(255, 255, 255, .09);
        background: rgba(2, 8, 10, .76) !important;
    }

    .chatbot-card > .mud-card-actions .mud-grid {
        width: 100% !important;
        margin: 0 !important;
        align-items: center;
    }

    .chatbot-card > .mud-card-actions .mud-grid-item {
        padding: 0 !important;
    }

    .chatbot-card > .mud-card-actions .mud-grid-item:first-child {
        padding-right: 12px !important;
    }

    .chatbot-card .mud-input-control {
        margin: 0 !important;
    }

    .chatbot-card .mud-input-root {
        min-height: 48px;
        color: var(--chat-text) !important;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 8px !important;
        background: rgba(255, 255, 255, .055) !important;
        padding: 0 14px !important;
    }

    .chatbot-card .mud-input-root::before,
    .chatbot-card .mud-input-root::after {
        display: none !important;
    }

    .chatbot-card .mud-input-label {
        color: var(--chat-muted) !important;
        font-weight: 800 !important;
        margin-left: 12px;
    }

    .chatbot-card > .mud-card-actions .mud-button-root {
        width: 100%;
        min-height: 48px;
        margin: 0 !important;
        border-radius: 8px !important;
        color: #041015 !important;
        background: var(--chat-accent) !important;
        font-weight: 950 !important;
    }

    .chatbot-card > .mud-card-actions .mud-button-root:disabled {
        color: rgba(255, 255, 255, .34) !important;
        background: rgba(255, 255, 255, .07) !important;
    }

    .chatbot-empty-state {
        flex: 1 1 auto;
        display: grid !important;
        place-items: center;
        min-height: 420px;
        color: var(--chat-muted-strong);
        background: rgba(2, 8, 10, .38) !important;
    }

    .chatbot-empty-state .mud-icon-root {
        color: var(--chat-accent) !important;
        fill: var(--chat-accent) !important;
    }

    .chatbot-empty-state .mud-typography-h6 {
        color: var(--chat-text) !important;
        font-weight: 950 !important;
    }

    @media (max-width: 1180px) {
        .chat-agent-page {
            height: auto;
            min-height: 100vh;
            overflow: visible;
        }

        .chat-command-center {
            grid-template-columns: 1fr;
            align-items: start !important;
            min-height: auto;
        }

        .chat-command-actions {
            justify-content: flex-start !important;
        }

        .chat-shell {
            grid-template-columns: 1fr !important;
        }

        .chat-shell-sidebar.open {
            width: 100% !important;
            max-height: 320px;
        }

        .chatbot-card.mud-card {
            min-height: 620px;
        }
    }

    @media (max-width: 720px) {
        .chat-agent-page {
            padding: 16px 12px 24px;
        }

        .chat-page-title {
            font-size: 2.65rem !important;
        }

        .chat-agent-switcher,
        .chat-command-actions,
        .chat-new-button.mud-button-root {
            width: 100%;
        }

        .chat-agent-switcher {
            overflow-x: auto;
        }

        .chat-agent-pill {
            flex: 1 0 auto;
            justify-content: center;
        }

        .chatbot-card .mud-card-header {
            padding: 16px !important;
        }

        .chat-messages-container {
            padding: 16px 12px !important;
        }

        .chatbot-card > .mud-card-actions .mud-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .chatbot-card > .mud-card-actions .mud-grid-item:first-child {
            padding-right: 0 !important;
        }
    }

/* === FIELD CONTAINER === */
    

    


    

    

    /* === HEAT MAP === */
    

    

        

    /* === PITCH MAP === */
    

    

        

    

    /* Zone molto piccole */
    

    /* Zone medie */
    

    /* Zone grandi */
    

    /* === PLAYER PATHS === */
    

    

    /* === PLAYER NUMBERS === */
    

    

    /* === MARKDOWN STYLING === */
    .markdown-content {
        line-height: 1.6;
        font-family: inherit;
        color: inherit;
        overflow-wrap: anywhere;
        word-break: normal;
    }

        .markdown-content h1,
        .markdown-content h2,
        .markdown-content h3,
        .markdown-content h4,
        .markdown-content h5,
        .markdown-content h6 {
            margin: 1em 0 0.5em 0;
            font-weight: 700 !important;
            line-height: 1.3;
            color: var(--mud-palette-text-primary) !important;
        }

        .markdown-content h1 {
            font-size: 1.6em !important;
        }

        .markdown-content h2 {
            font-size: 1.4em !important;
        }

        .markdown-content h3 {
            font-size: 1.25em !important;
            color: var(--mud-palette-primary) !important;
        }

        .markdown-content h4 {
            font-size: 1.15em !important;
        }

        .markdown-content h5, .markdown-content h6 {
            font-size: 1.05em !important;
        }

        .markdown-content p {
    margin: 0.8em 0 !important;
    line-height: 1.6;
}

        .markdown-content strong,
        .markdown-content b {
            font-weight: 700 !important;
            color: var(--mud-palette-text-primary) !important;
        }

        .markdown-content em,
        .markdown-content i {
            font-style: italic !important;
        }

        .markdown-content ul,
        .markdown-content ol {
    margin: 1em 0 !important;
    padding-left: 1.8em !important;
}

        .markdown-content li {
            margin: 0.4em 0 !important;
            line-height: 1.5;
        }

        .markdown-content ul li {
            list-style-type: disc !important;
        }

        .markdown-content ol li {
            list-style-type: decimal !important;
        }

        .markdown-content code {
    color: var(--chat-text) !important;
    background: rgba(255, 255, 255, .085) !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
    padding: 0.15em 0.4em !important;
    border-radius: 4px !important;
    font-family: 'Courier New', Consolas, monospace !important;
    font-size: 0.9em !important;
}

        .markdown-content pre {
    color: var(--chat-text) !important;
    background: rgba(2, 8, 10, .72) !important;
    border-left-color: var(--chat-accent) !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    padding: 1em !important;
    border-radius: 6px !important;
    overflow-x: auto !important;
    margin: 1em 0 !important;
    border-left: 4px solid var(--mud-palette-primary) !important;
}

            .markdown-content pre code {
                background-color: transparent !important;
                padding: 0 !important;
                border-radius: 0 !important;
            }

        .markdown-content blockquote {
    background: rgba(255, 255, 255, .055) !important;
    border-left-color: var(--chat-accent) !important;
    border-left: 4px solid var(--mud-palette-primary) !important;
    padding-left: 1em !important;
    margin: 1em 0 !important;
    color: var(--mud-palette-text-secondary) !important;
    font-style: italic;
    background-color: rgba(0, 0, 0, 0.02);
    padding: 0.8em 1em;
    border-radius: 0 4px 4px 0;
}

    /* === CHAT MESSAGES CONTAINER === */
    

    /* Opzionale: margine diverso per mobile */
    @media (max-width: 768px) {
        

    }

.team-content-shell:has(.agents-page) {
        padding: 0 !important;
        background:
            linear-gradient(90deg, rgba(16, 200, 234, .08) 1px, transparent 1px),
            linear-gradient(0deg, rgba(138, 242, 31, .045) 1px, transparent 1px),
            linear-gradient(145deg, #061014 0%, #07181d 42%, #03080b 100%) !important;
        background-size: 72px 72px, 72px 72px, auto !important;
    }

    .team-content-shell .mud-container.agents-page {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .agents-page {
        --agents-bg: linear-gradient(145deg, #061014 0%, #07181d 42%, #03080b 100%);
        --agents-border: rgba(120, 169, 184, .2);
        --agents-border-strong: rgba(194, 230, 238, .36);
        --agents-text: #f5fbff;
        --agents-muted: #91adba;
        --agents-muted-strong: #c8dce3;
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        gap: clamp(18px, 2.4vw, 28px);
        padding: clamp(14px, 2vw, 24px) clamp(10px, 1.4vw, 18px) clamp(26px, 3vw, 42px);
        box-sizing: border-box;
        color: var(--agents-text);
        background:
            linear-gradient(90deg, rgba(16, 200, 234, .08) 1px, transparent 1px),
            linear-gradient(0deg, rgba(138, 242, 31, .045) 1px, transparent 1px),
            var(--agents-bg);
        background-size: 72px 72px, 72px 72px, auto;
        border: 0;
        border-radius: 0;
        overflow: hidden;
        position: relative;
        isolation: isolate;
    }

    @supports (height: 100dvh) {
        .agents-page {
            min-height: 100dvh;
        }
    }

    .agents-page::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            linear-gradient(120deg, transparent 0 26%, rgba(16, 200, 234, .08) 26% 27%, transparent 27% 72%, rgba(245, 196, 0, .08) 72% 73%, transparent 73%),
            linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 38%);
        pointer-events: none;
    }

    .agents-hero,
    .agents-grid {
        width: min(1680px, 100%);
        margin-inline: auto;
    }

    .agents-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: clamp(18px, 3vw, 34px);
    }

    .agents-hero-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 176px;
        padding: clamp(10px, 1.3vw, 18px) 0;
    }

    .agent-role,
    .agent-section-label,
    .agent-output span {
        color: var(--agents-muted);
        font-size: .73rem;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .agents-hero h1 {
        margin: 0 0 22px;
        color: var(--agents-text);
        font-size: clamp(2.65rem, 5vw, 5.7rem);
        line-height: .91;
        font-weight: 950;
        letter-spacing: 0;
    }

    .agents-hero p {
        max-width: 760px;
        margin: 0;
        color: var(--agents-muted-strong);
        font-size: clamp(1rem, 1.4vw, 1.18rem);
        line-height: 1.55;
        font-weight: 650;
    }

    .agents-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(16px, 2.2vw, 28px);
        align-items: stretch;
    }

    .agent-panel {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(230px, 36%) minmax(0, 1fr);
        min-height: 610px;
        border: 1px solid var(--agents-border);
        border-top: 2px solid var(--agent-accent);
        border-radius: 8px;
        background: var(--agent-panel);
        box-shadow: 0 26px 82px rgba(0, 0, 0, .28);
        overflow: hidden;
        position: relative;
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .agent-panel.is-max {
        --agent-accent: #10c8ea;
        --agent-accent-soft: rgba(16, 200, 234, .14);
        --agent-panel: linear-gradient(145deg, rgba(7, 33, 43, .96), rgba(5, 19, 24, .96) 46%, rgba(8, 33, 32, .94) 100%);
    }

    .agent-panel.is-traintom {
        --agent-accent: #8af21f;
        --agent-accent-soft: rgba(138, 242, 31, .14);
        --agent-panel: linear-gradient(145deg, rgba(20, 39, 24, .96), rgba(5, 18, 17, .96) 48%, rgba(47, 38, 10, .9) 100%);
    }

    .agent-panel.is-lara {
        --agent-accent: #ffcf5a;
        --agent-accent-soft: rgba(255, 207, 90, .15);
        --agent-panel: linear-gradient(145deg, rgba(35, 31, 14, .96), rgba(5, 18, 17, .96) 48%, rgba(29, 28, 38, .92) 100%);
    }

    .agent-panel:hover,
    .agent-panel:focus-within {
        transform: translateY(-4px);
        border-color: var(--agents-border-strong);
        box-shadow: 0 34px 98px rgba(0, 0, 0, .38);
    }

    .agent-visual {
        min-height: 100%;
        position: relative;
        overflow: hidden;
        background: #071015;
    }

    .agent-visual img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center top;
        transform: scale(1.02);
        transition: transform .35s ease, filter .35s ease;
    }

    .agent-panel:hover .agent-visual img,
    .agent-panel:focus-within .agent-visual img {
        transform: scale(1.055);
        filter: saturate(1.1) contrast(1.06);
    }

    .agent-visual-shade {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, transparent 34%, rgba(3, 8, 11, .86) 100%),
            linear-gradient(90deg, transparent 0%, rgba(5, 17, 22, .2) 78%, rgba(5, 17, 22, .82) 100%);
    }

    .agent-content {
        display: flex;
        flex-direction: column;
        gap: 18px;
        min-width: 0;
        padding: clamp(20px, 2.4vw, 30px);
    }

    .agent-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }

    .agent-header h2 {
        margin: 2px 0 0;
        color: var(--agents-text);
        font-size: clamp(2.1rem, 3.2vw, 3.6rem);
        line-height: .88;
        font-weight: 950;
        letter-spacing: 0;
    }

    .agent-icon {
        width: 52px;
        height: 52px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border: 1px solid color-mix(in srgb, var(--agent-accent) 52%, transparent);
        border-radius: 8px;
        color: #041015;
        background: var(--agent-accent);
        box-shadow: 0 0 28px color-mix(in srgb, var(--agent-accent) 38%, transparent);
    }

    .agent-icon svg {
        fill: currentColor;
    }

    .agent-description {
        margin: 0;
        color: var(--agents-muted-strong);
        font-size: .98rem;
        line-height: 1.55;
        font-weight: 600;
    }

    .agent-focus {
        display: grid;
        gap: 10px;
    }

    .agent-chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .agent-chip-row span {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 11px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 999px;
        color: #dcecf1;
        background: rgba(255, 255, 255, .055);
        font-size: .78rem;
        font-weight: 800;
    }

    .agent-output {
        margin-top: auto;
        display: grid;
        gap: 6px;
        padding-block: 16px;
        border-top: 1px solid rgba(255, 255, 255, .09);
        border-bottom: 1px solid rgba(255, 255, 255, .09);
    }

    .agent-output strong {
        color: var(--agents-text);
        font-size: 1rem;
        font-weight: 950;
    }

    .agent-output p {
        margin: 0;
        color: var(--agents-muted);
        font-size: .88rem;
        line-height: 1.45;
        font-weight: 650;
    }

    .agent-actions {
        display: grid;
        grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
        gap: 12px;
        align-items: center;
    }

    .agent-primary-action {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 18px;
        border: 0;
        border-radius: 8px;
        color: #041015;
        background: var(--agent-accent);
        font: inherit;
        font-size: .9rem;
        font-weight: 950;
        cursor: pointer;
        transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
        box-shadow: 0 14px 38px color-mix(in srgb, var(--agent-accent) 24%, transparent);
    }

    .agent-primary-action:hover,
    .agent-primary-action:focus-visible {
        transform: translateY(-2px);
        filter: brightness(1.06);
        outline: none;
        box-shadow: 0 20px 48px color-mix(in srgb, var(--agent-accent) 32%, transparent);
    }

    .agent-primary-action.is-disabled {
        color: #92a4aa;
        background: #1a282e;
        cursor: not-allowed;
        box-shadow: none;
    }

    .agent-primary-action svg {
        fill: currentColor;
    }

    .agent-prompt-preview {
        min-width: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 9px;
        color: var(--agents-muted-strong);
        font-size: .82rem;
        font-weight: 760;
        line-height: 1.35;
    }

    .agent-prompt-preview svg {
        fill: var(--agent-accent);
    }

    .agent-prompt-preview span {
        min-width: 0;
    }

    @media (max-width: 1500px) {
        .agents-grid {
            grid-template-columns: 1fr;
        }

        .agent-panel {
            min-height: 520px;
        }
    }

    @media (max-width: 980px) {
        .agents-page {
            min-height: auto;
            border-radius: 0;
        }

        .agents-hero {
            grid-template-columns: 1fr;
        }

        .agent-panel {
            grid-template-columns: 1fr;
            min-height: 0;
        }

        .agent-visual {
            height: min(440px, 56vw);
            min-height: 320px;
        }

        .agent-visual-shade {
            background: linear-gradient(180deg, transparent 34%, rgba(3, 8, 11, .9) 100%);
        }
    }

    @media (max-width: 680px) {
        .agents-page {
            padding: 16px 12px 24px;
        }

        .agents-hero-copy {
            min-height: 0;
        }

        .agent-content {
            padding: 16px;
        }

        .agent-actions {
            grid-template-columns: 1fr;
        }

        .agent-header {
            align-items: center;
        }

        .agent-header h2 {
            font-size: 2.45rem;
        }

        .agent-icon {
            width: 46px;
            height: 46px;
            border-radius: 8px;
        }

        .agent-visual {
            height: 360px;
            min-height: 300px;
        }

        .agent-primary-action {
            width: 100%;
        }
    }

.field-svg rect, .field-svg circle, .field-svg line {
            vector-effect: non-scaling-stroke;
        }

        .field-svg circle {
            filter: url(#glow);
        }

        .field-svg line {
            stroke-width: 2;
        }

        .field-svg rect {
            stroke-width: 1;
        }

.documentation-page {
        --doc-bg: #071116;
        --doc-surface: rgba(12, 25, 31, .88);
        --doc-surface-strong: rgba(15, 34, 42, .96);
        --doc-border: rgba(120, 169, 184, .24);
        --doc-text: #f4f7f8;
        --doc-soft: #a7c4cf;
        --doc-muted: #78a9b8;
        --doc-cyan: #10c8ea;
        --doc-green: #8af21f;
        --doc-yellow: #f5c400;
        --doc-red: #ef4444;
        width: 100%;
        min-height: 100vh;
        padding: clamp(18px, 2.4vw, 32px);
        color: var(--doc-text);
        background:
            linear-gradient(180deg, rgba(9, 20, 26, .98), rgba(5, 12, 16, .98));
    }

    .documentation-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
        gap: 18px;
        align-items: end;
        padding: clamp(18px, 3vw, 34px);
        border: 1px solid var(--doc-border);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(16, 200, 234, .13), rgba(138, 242, 31, .055)),
            rgba(6, 18, 22, .92);
    }

    .documentation-kicker {
        display: inline-flex;
        margin-bottom: 10px;
        color: var(--doc-green);
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .documentation-hero h1,
    .documentation-section h2,
    .documentation-section h3,
    .documentation-card h3,
    .documentation-toc strong,
    .documentation-hero-note strong {
        margin: 0;
        color: var(--doc-text);
        letter-spacing: 0;
    }

    .documentation-hero h1 {
        max-width: 900px;
        font-size: clamp(2rem, 4vw, 4.2rem);
        line-height: 1.02;
        font-weight: 800;
    }

    .documentation-hero p,
    .documentation-section p,
    .documentation-card p,
    .documentation-callout p,
    .documentation-hero-note span,
    .documentation-card li {
        color: var(--doc-soft);
        line-height: 1.66;
    }

    .documentation-hero p {
        max-width: 940px;
        margin: 14px 0 0;
        font-size: 1rem;
    }

    .documentation-hero-note {
        display: grid;
        gap: 8px;
        padding: 16px;
        border: 1px solid rgba(245, 196, 0, .28);
        border-radius: 8px;
        background: rgba(245, 196, 0, .07);
    }

    .documentation-shell {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
        margin-top: 22px;
    }

    .documentation-toc {
        position: sticky;
        top: 22px;
        display: grid;
        gap: 8px;
        max-height: calc(100vh - 44px);
        overflow: auto;
        padding: 14px;
        border: 1px solid var(--doc-border);
        border-radius: 8px;
        background: var(--doc-surface);
    }

    .documentation-toc strong {
        margin-bottom: 6px;
        font-size: .92rem;
    }

    .documentation-toc a {
        display: grid;
        gap: 3px;
        padding: 10px;
        color: var(--doc-text);
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, .06);
        border-radius: 8px;
        background: rgba(255, 255, 255, .03);
    }

    .documentation-toc a:hover,
    .documentation-toc a:focus-visible {
        border-color: rgba(16, 200, 234, .55);
        background: rgba(16, 200, 234, .08);
    }

    .documentation-toc small {
        color: var(--doc-muted);
        font-size: .76rem;
    }

    .documentation-content {
        display: grid;
        gap: 22px;
        min-width: 0;
    }

    .documentation-section {
        display: grid;
        gap: 18px;
        padding: clamp(18px, 2.4vw, 28px);
        border: 1px solid var(--doc-border);
        border-radius: 8px;
        background: var(--doc-surface);
    }

    .documentation-section-head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }

    .documentation-section-head > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 8px;
        color: #041014;
        font-weight: 900;
        background: var(--doc-cyan);
    }

    .documentation-section h2 {
        font-size: clamp(1.35rem, 2vw, 2.1rem);
        line-height: 1.18;
        font-weight: 800;
    }

    .documentation-section h3 {
        font-size: 1.05rem;
        font-weight: 800;
    }

    .documentation-section-head p,
    .documentation-section > p {
        margin: 8px 0 0;
    }

    .documentation-callout {
        display: grid;
        gap: 6px;
        padding: 14px 16px;
        border: 1px solid rgba(138, 242, 31, .25);
        border-radius: 8px;
        background: rgba(138, 242, 31, .055);
    }

    .documentation-callout strong {
        color: var(--doc-green);
    }

    .documentation-grid {
        display: grid;
        gap: 14px;
    }

    .documentation-grid.two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .documentation-grid.three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .documentation-card {
        display: grid;
        gap: 9px;
        padding: 16px;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 8px;
        background: var(--doc-surface-strong);
    }

    .documentation-card ul {
        display: grid;
        gap: 6px;
        margin: 0;
        padding-left: 18px;
    }

    .documentation-table-wrap {
        width: 100%;
        overflow-x: auto;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 8px;
    }

    .documentation-table {
        width: 100%;
        min-width: 940px;
        border-collapse: collapse;
        background: rgba(5, 14, 18, .68);
    }

    .documentation-table th,
    .documentation-table td {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, .075);
        text-align: left;
        vertical-align: top;
    }

    .documentation-table th {
        color: var(--doc-cyan);
        font-size: .76rem;
        font-weight: 900;
        text-transform: uppercase;
        background: rgba(16, 200, 234, .07);
    }

    .documentation-table td {
        color: var(--doc-soft);
        font-size: .92rem;
    }

    .documentation-table td:first-child {
        color: var(--doc-text);
        font-weight: 800;
    }

    .documentation-table tr:last-child td {
        border-bottom: 0;
    }

    .documentation-table code {
        display: inline-block;
        max-width: 520px;
        white-space: normal;
        color: #dffcff;
        font-size: .84rem;
        line-height: 1.5;
        background: rgba(16, 200, 234, .08);
        border: 1px solid rgba(16, 200, 234, .16);
        border-radius: 6px;
        padding: 2px 6px;
    }

    @media (max-width: 1180px) {
        .documentation-hero,
        .documentation-shell,
        .documentation-grid.two,
        .documentation-grid.three {
            grid-template-columns: 1fr;
        }

        .documentation-toc {
            position: static;
            max-height: none;
        }
    }

    @media (max-width: 720px) {
        .documentation-page {
            padding: 12px;
        }

        .documentation-hero,
        .documentation-section {
            padding: 16px;
        }

        .documentation-section-head {
            grid-template-columns: 1fr;
        }
    }
    .documentation-page.documentation-compact {
        min-height: auto;
        padding: 0;
        background: transparent;
    }

    .documentation-compact .documentation-shell {
        display: block;
        max-width: none;
        margin: 0;
    }

    .documentation-compact .documentation-content {
        gap: 0;
    }

    

    .documentation-compact .documentation-section-head {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .documentation-compact .documentation-section h2 {
        font-size: 1.35rem;
    }

    .documentation-compact .documentation-table {
        min-width: 760px;
    }

.documentation-compact .documentation-section {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
}

/* Documentation page refresh: aligned to session/player/field list headers, no left index. */
.team-content-shell:has(.documentation-page) {
    background:
        radial-gradient(circle at 76% 4%, rgba(96, 235, 62, 0.05), transparent 30%),
        radial-gradient(circle at 18% 8%, rgba(0, 215, 255, 0.11), transparent 30%),
        linear-gradient(180deg, #061217 0%, #061014 48%, #040b0e 100%);
}

.documentation-page {
    --doc-surface: rgba(7, 20, 25, .66);
    --doc-surface-strong: rgba(10, 27, 34, .86);
    --doc-border: rgba(120, 169, 184, .18);
    --doc-border-strong: rgba(119, 238, 255, .42);
    --doc-text: #f5fbff;
    --doc-soft: #a7c4cf;
    --doc-muted: #78a9b8;
    --doc-cyan: #77eeff;
    --doc-blue: #10c8ea;
    --doc-green: #74f33e;
    --doc-yellow: #f5c400;
    --doc-red: #ef4444;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 20px 34px 42px;
    color: var(--doc-text);
    background:
        radial-gradient(circle at 76% 4%, rgba(96, 235, 62, 0.05), transparent 30%),
        radial-gradient(circle at 18% 8%, rgba(0, 215, 255, 0.11), transparent 30%),
        linear-gradient(180deg, #061217 0%, #061014 48%, #040b0e 100%);
}

.team-content-shell .mud-container.documentation-page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    min-height: calc(100vh - 96px);
}

.documentation-list-hero,
.documentation-context-row,
.documentation-content {
    width: min(100%, 1760px);
    margin-left: auto;
    margin-right: auto;
}

.documentation-list-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.documentation-list-title-block span,
.documentation-context-panel span,
.documentation-section-head small {
    color: #91b7c7;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.documentation-list-title-block h1 {
    margin: 0;
    color: var(--doc-text);
    font-size: clamp(1.7rem, 2.2vw, 2.45rem);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: 0;
}

.documentation-list-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.documentation-list-pill {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid rgba(120, 169, 184, .2);
    border-radius: 999px;
    background: rgba(3, 13, 18, .68);
    color: #f5fbff;
    font-size: .78rem;
    font-weight: 950;
    white-space: nowrap;
}

.documentation-context-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
    gap: 12px;
    margin-bottom: 18px;
}

.documentation-context-panel {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--doc-border);
    border-radius: 8px;
    background: rgba(3, 13, 18, .58);
}

.documentation-context-panel.is-warning {
    border-color: rgba(245, 196, 0, .26);
    background: rgba(245, 196, 0, .055);
}

.documentation-context-panel strong,
.documentation-section h2,
.documentation-section h3,
.documentation-card h3,
.documentation-callout strong,
.documentation-table-block h3 {
    margin: 0;
    color: var(--doc-text);
    letter-spacing: 0;
}

.documentation-context-panel p,
.documentation-section p,
.documentation-card p,
.documentation-card li,
.documentation-callout p {
    margin: 0;
    color: var(--doc-soft);
    line-height: 1.62;
}

.documentation-content {
    display: grid;
    gap: 0;
    min-width: 0;
}

.documentation-section {
    display: grid;
    gap: 16px;
    padding: 24px 0;
    border: 0;
    border-top: 1px solid var(--doc-border);
    border-radius: 0;
    background: transparent;
}

.documentation-section.is-reference {
    border-top-color: rgba(119, 238, 255, .22);
}

.documentation-section-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.documentation-section-head > span {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #041014;
    font-weight: 950;
    background: linear-gradient(135deg, var(--doc-cyan), var(--doc-green));
}

.documentation-section h2 {
    font-size: clamp(1.35rem, 1.65vw, 2rem);
    line-height: 1.18;
    font-weight: 950;
}

.documentation-section-head p {
    max-width: 1120px;
    margin-top: 7px;
}

.documentation-grid {
    display: grid;
    gap: 12px;
}

.documentation-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.documentation-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.documentation-card {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--doc-border);
    border-radius: 8px;
    background: var(--doc-surface);
}

.documentation-card h3,
.documentation-table-block h3 {
    font-size: 1rem;
    font-weight: 950;
}

.documentation-card ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
}

.documentation-callout {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid rgba(116, 243, 62, .26);
    border-radius: 8px;
    background: rgba(116, 243, 62, .055);
}

.documentation-callout strong {
    color: var(--doc-green);
}

.documentation-table-block {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.documentation-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--doc-border);
    border-radius: 8px;
    background: rgba(3, 13, 18, .58);
}

.documentation-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    background: transparent;
}

.documentation-table th,
.documentation-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
    text-align: left;
    vertical-align: top;
}

.documentation-table th {
    color: var(--doc-cyan);
    font-size: .74rem;
    font-weight: 950;
    text-transform: uppercase;
    background: rgba(119, 238, 255, .07);
}

.documentation-table td {
    color: var(--doc-soft);
    font-size: .9rem;
}

.documentation-table td:first-child {
    color: var(--doc-text);
    font-weight: 950;
}

.documentation-table tr:last-child td {
    border-bottom: 0;
}

.documentation-table code {
    display: inline-block;
    max-width: 560px;
    white-space: normal;
    color: #dffcff;
    font-size: .82rem;
    line-height: 1.48;
    background: rgba(119, 238, 255, .08);
    border: 1px solid rgba(119, 238, 255, .14);
    border-radius: 6px;
    padding: 2px 6px;
}

.documentation-page.documentation-compact {
    min-height: auto;
    padding: 0;
    background: transparent;
}

.documentation-compact .documentation-content {
    width: 100%;
}

.documentation-compact .documentation-section {
    padding: 0;
    border-top: 0;
}

.documentation-compact .documentation-section-head {
    grid-template-columns: 42px minmax(0, 1fr);
}

.documentation-compact .documentation-section h2 {
    font-size: 1.35rem;
}

.documentation-compact .documentation-grid.three,
.documentation-compact .documentation-grid.two {
    grid-template-columns: 1fr;
}

.documentation-compact .documentation-table {
    min-width: 760px;
}

@media (max-width: 1180px) {
    .documentation-context-row,
    .documentation-grid.two,
    .documentation-grid.three {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .documentation-page {
        padding: 18px 14px 32px;
    }

    .documentation-list-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .documentation-list-actions {
        justify-content: flex-start;
    }

    .documentation-section-head {
        grid-template-columns: 1fr;
    }
}

.team-home-page {
        --team-home-card-padding: 14px;
        --team-home-metric-padding: 8px;
        color: #f4f7f8;
        background: transparent;
        overflow-x: hidden;
        padding: 14px clamp(10px, 1.25vw, 18px) 34px;
    }

    .team-home-page.player-analytics-detail-page {
        padding: 14px clamp(14px, 1.6vw, 26px) 34px;
    }

    .team-home-page .team-home-shell {
        width: min(1680px, 100%);
        max-width: 100%;
        margin: 0 auto;
        display: grid;
        gap: 14px;
        min-width: 0;
        overflow-x: hidden;
    }

    .team-home-page .player-detail-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px;
        align-items: start;
        padding: clamp(16px, 2vw, 24px);
        border: 1px solid rgba(120, 169, 184, .2);
        border-radius: 18px;
        background:
            radial-gradient(circle at 10% 0%, rgba(16, 200, 234, .14), transparent 34%),
            linear-gradient(135deg, rgba(8, 25, 30, .92), rgba(4, 13, 16, .84));
        box-shadow: 0 20px 54px rgba(0, 0, 0, .22);
    }

    .team-home-page .player-detail-title {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: center;
    }

    .team-home-page .player-number-badge {
        width: 66px;
        height: 66px;
        border: 1px solid rgba(138, 242, 31, .42);
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(138, 242, 31, .08);
        color: #f4f7f8;
        font-size: 1.45rem;
        font-weight: 950;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .team-home-page .player-detail-title h1 {
        margin: 0;
        font-size: 3.6rem;
        line-height: .95;
        font-weight: 950;
        letter-spacing: 0;
    }

    .team-home-page .player-detail-title p {
        margin: 8px 0 0;
        color: #91b7c7;
        font-weight: 800;
    }

    .team-home-page .player-detail-meta,
    .team-home-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .team-home-page .player-detail-meta {
        margin-top: 14px;
    }

    .team-home-hero-actions {
        justify-content: flex-end;
    }

    .team-home-page .player-section-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        padding: 8px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .team-home-page .player-section-nav a,
    .team-home-section-action {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 0 12px;
        border: 1px solid rgba(120, 169, 184, .22);
        border-radius: 999px;
        background: rgba(3, 9, 11, .46);
        color: #d9eef5;
        font-size: .74rem;
        font-weight: 900;
        text-decoration: none;
        cursor: pointer;
    }

    .team-home-page .player-section-nav a:hover,
    .team-home-page .player-section-nav a:focus-visible,
    .team-home-section-action:hover,
    .team-home-section-action:focus-visible {
        border-color: rgba(16, 200, 234, .56);
        background: rgba(16, 200, 234, .1);
        outline: none;
    }

    .team-home-page .player-analysis-section,
    .team-home-page .player-report-section-card {
        width: auto;
        min-width: 0;
        max-width: 100%;
        margin: 0;
    }

    .team-home-page .player-stats-stack,
    .team-home-page .player-context-strip,
    .team-home-page .player-kpi-grid,
    .team-home-page .player-insight-grid {
        display: grid;
        gap: 10px;
    }

    .team-home-page .player-context-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .team-home-page .player-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .team-home-page.player-analytics-detail-page .team-home-kpi-stack .player-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .team-home-page .player-insight-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .team-home-page .player-context-card,
    .team-home-page .player-kpi-card,
    .team-home-page .player-finding-card {
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .team-home-page .player-context-card {
        min-width: 0;
        padding: 13px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }

    .team-home-page .player-context-icon {
        display: inline-grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(120, 169, 184, .2);
        border-radius: 50%;
        background: rgba(3, 9, 11, .52);
        color: #8af21f;
    }

    .team-home-page .player-context-card small,
    .team-home-page .player-kpi-card span,
    .team-home-page .player-finding-card span {
        display: block;
        color: #91b7c7;
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .team-home-page .player-context-card strong,
    .team-home-page .player-kpi-card strong {
        display: block;
        margin-top: 6px;
        color: #f8fdff;
        font-size: 1.18rem;
        line-height: 1.05;
        font-weight: 950;
    }

    .team-home-page .player-context-card em,
    .team-home-page .player-kpi-card em,
    .team-home-page .player-finding-card em {
        display: block;
        margin-top: 6px;
        color: #b8ced8;
        font-size: .78rem;
        font-style: normal;
        font-weight: 700;
    }

    .team-home-page .player-kpi-card,
    .team-home-page .player-finding-card {
        min-height: 86px;
        padding: 12px;
    }

    .team-home-page.player-analytics-detail-page .player-kpi-card {
        min-height: 112px;
        padding: var(--team-home-card-padding);
    }

    .team-home-page .player-finding-card strong {
        color: #f8fdff;
        font-weight: 950;
    }

    .team-home-overview-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(420px, .85fr);
        gap: 18px;
        align-items: start;
        justify-content: stretch;
        min-width: 0;
    }

    .team-home-kpi-stack {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .team-home-access-panel {
        align-self: start;
        width: 100%;
        min-width: 0;
        max-width: none;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .team-home-access-head {
        margin: 0;
        padding: 0;
    }

    .team-home-access-head .mud-icon-root {
        color: #8af21f;
    }

    .team-home-access-table-wrap {
        min-width: 0;
        overflow: auto;
        scrollbar-width: thin;
    }

    .team-home-access-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 7px;
        color: #f5fbff;
        table-layout: fixed;
    }

    .team-home-access-table th {
        padding: 0 8px 2px;
        color: #91b7c7;
        font-size: .66rem;
        font-weight: 900;
        letter-spacing: 0;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .team-home-access-table th:nth-child(1) {
        width: 42%;
    }

    .team-home-access-table th:nth-child(2) {
        width: 40%;
    }

    .team-home-access-table th:nth-child(3) {
        width: 18%;
    }

    .team-home-access-table td {
        min-width: 0;
        padding: 8px;
        border-top: 1px solid rgba(120, 169, 184, .14);
        border-bottom: 1px solid rgba(120, 169, 184, .14);
        background: rgba(3, 9, 11, .5);
        color: #d9eef5;
        font-size: .72rem;
        font-weight: 850;
        vertical-align: middle;
    }

    .team-home-access-table td:first-child {
        border-left: 1px solid rgba(120, 169, 184, .14);
        border-radius: 12px 0 0 12px;
    }

    .team-home-access-table td:last-child {
        border-right: 1px solid rgba(120, 169, 184, .14);
        border-radius: 0 12px 12px 0;
        white-space: nowrap;
    }

    .team-home-access-user {
        min-width: 0;
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
        align-items: center;
    }

    .team-home-access-user > span {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(16, 200, 234, .32);
        border-radius: 50%;
        background: rgba(16, 200, 234, .1);
        color: #f8fdff;
        font-size: .7rem;
        font-weight: 950;
    }

    .team-home-access-user strong,
    .team-home-access-origin strong,
    .team-home-access-user small,
    .team-home-access-origin small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .team-home-access-user strong,
    .team-home-access-origin strong {
        color: #f8fdff;
        font-size: .74rem;
        font-weight: 950;
    }

    .team-home-access-user small,
    .team-home-access-origin small {
        margin-top: 2px;
        color: #91b7c7;
        font-size: .66rem;
        font-weight: 800;
    }

    .team-home-alert {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .team-home-alert strong {
        display: block;
        color: #f8fdff;
        font-weight: 950;
    }

    .team-home-alert span {
        color: #b8ced8;
        font-weight: 750;
    }

    .team-home-alert.is-warning {
        border-color: rgba(255, 193, 7, .28);
        background: rgba(58, 45, 12, .7);
    }

    .team-home-alert.is-danger {
        border-color: rgba(244, 67, 54, .28);
        background: rgba(68, 21, 23, .72);
    }

    .team-home-session-section,
    .team-home-leader-section {
        display: grid;
        gap: 10px;
        min-width: 0;
        max-width: 100%;
    }

    .team-home-page .team-home-session-strip-shell {
        width: 100%;
        max-width: 100%;
        margin: 0;
        overflow: hidden;
    }

    .team-home-page .team-home-session-strip,
    .team-home-page .team-home-leader-grid {
        display: grid;
        grid-auto-flow: column;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .team-home-page .team-home-session-strip::-webkit-scrollbar,
    .team-home-page .team-home-leader-grid::-webkit-scrollbar {
        display: none;
    }

    .team-home-page .team-home-session-strip {
        grid-auto-columns: minmax(290px, calc((100% - 30px) / 4));
        padding: 2px 0 8px;
    }

    .team-home-page.session-list-modern-page .team-home-session-strip .session-strip-card {
        min-height: 166px;
        padding: var(--team-home-card-padding);
    }

    .team-home-page.session-list-modern-page .team-home-session-strip .session-card-mini-name {
        min-height: 30px;
        font-size: .92rem;
    }

    .team-home-page.session-list-modern-page .team-home-session-strip .session-card-mini-stats {
        gap: 6px;
        margin-top: 9px;
    }

    .team-home-page.session-list-modern-page .team-home-session-strip .session-card-mini-stats span {
        padding: var(--team-home-metric-padding);
    }

    .team-home-page.session-list-modern-page .team-home-session-strip .session-card-mini-footer {
        margin-top: 9px;
    }

    .team-home-page .session-card-player-count {
        min-width: 54px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 10px;
    }

    .team-home-strip-actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        flex: 0 0 auto;
    }

    .team-home-scroll-button {
        width: 36px;
        height: 36px;
        display: inline-grid;
        place-items: center;
        border: 1px solid rgba(120, 169, 184, .22);
        border-radius: 999px;
        background: rgba(3, 9, 11, .46);
        color: #d9eef5;
        cursor: pointer;
    }

    .team-home-scroll-button:hover,
    .team-home-scroll-button:focus-visible {
        border-color: rgba(16, 200, 234, .56);
        background: rgba(16, 200, 234, .1);
        outline: none;
    }

    .team-home-page .team-home-leader-grid {
        grid-auto-columns: minmax(290px, calc((100% - 30px) / 4));
        padding: 2px 0 8px;
    }

    .team-home-leader-card {
        position: relative;
        min-width: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 9px;
        min-height: 166px;
        padding: var(--team-home-card-padding);
        border: 1px solid color-mix(in srgb, var(--leader-accent) 48%, rgba(120, 169, 184, .16));
        border-radius: 14px;
        background:
            radial-gradient(circle at var(--leader-flow-x, 18%) -14%, color-mix(in srgb, var(--leader-accent) 18%, transparent), transparent 42%),
            linear-gradient(135deg, color-mix(in srgb, var(--leader-accent) 14%, rgba(7, 20, 25, .82)), rgba(3, 9, 11, .76));
        color: #f5fbff;
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
        cursor: pointer;
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .team-home-leader-card:hover,
    .team-home-leader-card:focus-visible {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--leader-accent) 84%, #ffffff 6%);
        box-shadow: 0 18px 36px color-mix(in srgb, var(--leader-accent) 14%, transparent);
        outline: none;
    }

    .team-home-leader-rank {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border: 1px solid color-mix(in srgb, var(--leader-accent) 46%, rgba(245, 251, 255, .14));
        border-radius: 14px;
        background: color-mix(in srgb, var(--leader-accent) 18%, rgba(3, 9, 11, .72));
        font-weight: 950;
    }

    .team-home-leader-main {
        min-width: 0;
    }

    .team-home-leader-main span,
    .team-home-leader-main em,
    .team-home-leader-metrics small {
        display: block;
        overflow: hidden;
        color: #91b7c7;
        font-size: .68rem;
        font-style: normal;
        font-weight: 850;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .team-home-leader-main strong {
        display: block;
        margin-top: 3px;
        overflow: hidden;
        color: #f8fdff;
        font-size: .92rem;
        font-weight: 950;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .team-home-leader-metrics {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .team-home-leader-metrics span {
        min-width: 0;
        padding: var(--team-home-metric-padding);
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 10px;
        background: rgba(3, 9, 11, .52);
    }

    .team-home-leader-metrics strong {
        display: block;
        margin-top: 4px;
        overflow: hidden;
        color: #f5fbff;
        font-size: .78rem;
        font-weight: 950;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .team-home-panel-empty {
        min-height: 150px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        color: #91b7c7;
        font-weight: 850;
        text-align: center;
    }

    .team-home-panel-empty.is-compact {
        min-height: 100%;
        padding: 20px 12px;
    }

    @media (max-width: 1400px) {
        .team-home-overview-layout {
            grid-template-columns: minmax(0, 1.25fr) minmax(360px, .9fr);
        }

        .team-home-page .player-kpi-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .team-home-page .team-home-session-strip,
        .team-home-page .team-home-leader-grid {
            grid-auto-columns: minmax(290px, calc((100% - 30px) / 4));
        }

        .team-home-page .player-context-strip,
        .team-home-page .player-insight-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 980px) {
        .team-home-overview-layout {
            grid-template-columns: 1fr;
        }

        .team-home-kpi-stack,
        .team-home-access-panel {
            max-width: none;
        }

        .team-home-page .player-detail-hero {
            grid-template-columns: 1fr;
        }

        .team-home-hero-actions,
        .team-home-page .player-detail-meta {
            justify-content: flex-start;
        }

        .team-home-page .player-kpi-grid,
        .team-home-page.player-analytics-detail-page .team-home-kpi-stack .player-kpi-grid,
        .team-home-page .player-context-strip,
        .team-home-page .player-insight-grid {
            grid-template-columns: 1fr;
        }

        .team-home-page .team-home-session-strip,
        .team-home-page .team-home-leader-grid {
            grid-auto-columns: minmax(290px, 86vw);
        }
    }

/* === GLOBAL RESET === */
    * {
        box-sizing: border-box;
    }

    

    /* === BACKGROUND EFFECTS === */
    .background-grid {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
            linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: grid-move 20s linear infinite;
        z-index: 1;
    }

    @keyframes grid-move {
        0% { transform: translate(0, 0); }
        100% { transform: translate(50px, 50px); }
    }

    .floating-orbs {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .orb {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, rgba(0, 255, 255, 0.2), rgba(0, 122, 255, 0.1));
        animation: float 6s ease-in-out infinite;
        filter: blur(1px);
    }

    .orb-1 {
        width: 100px;
        height: 100px;
        top: 10%;
        left: 10%;
        animation-delay: 0s;
    }

    .orb-2 {
        width: 150px;
        height: 150px;
        top: 60%;
        right: 15%;
        animation-delay: 2s;
    }

    .orb-3 {
        width: 80px;
        height: 80px;
        bottom: 20%;
        left: 20%;
        animation-delay: 4s;
    }

    .orb-4 {
        width: 120px;
        height: 120px;
        top: 30%;
        right: 40%;
        animation-delay: 1s;
    }

    .orb-5 {
        width: 60px;
        height: 60px;
        bottom: 40%;
        right: 10%;
        animation-delay: 3s;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        33% { transform: translateY(-20px) rotate(120deg); }
        66% { transform: translateY(10px) rotate(240deg); }
    }

    /* === SOCCER BALL ANIMATION === */
    .soccer-ball-container {
        position: absolute;
        top: 20%;
        right: 10%;
        z-index: 2;
        animation: ball-bounce 8s ease-in-out infinite;
    }

    .soccer-ball {
        width: 60px;
        height: 60px;
        background: linear-gradient(145deg, #ffffff, #e6e6e6);
        border-radius: 50%;
        position: relative;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        animation: ball-spin 4s linear infinite;
    }

    .pentagon {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #000;
        clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .pentagon-2 {
        transform: translate(-30%, -30%) scale(0.6);
        opacity: 0.8;
    }

    .pentagon-3 {
        transform: translate(-70%, -70%) scale(0.4);
        opacity: 0.6;
    }

    @keyframes ball-bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-30px); }
    }

    @keyframes ball-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* === STADIUM LINES === */
    .stadium-lines {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .line {
        position: absolute;
        background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
        height: 2px;
        width: 100%;
        animation: line-move 15s linear infinite;
    }

    .line-1 {
        top: 20%;
        animation-delay: 0s;
    }

    .line-2 {
        top: 40%;
        animation-delay: 3s;
    }

    .line-3 {
        top: 60%;
        animation-delay: 6s;
    }

    .line-4 {
        top: 80%;
        animation-delay: 9s;
    }

    @keyframes line-move {
        0% { transform: translateX(-100%); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: translateX(100%); opacity: 0; }
    }

    /* === MAIN CONTENT === */
    

    /* === BRANDING SECTION === */
    .branding-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 40px;
        padding-top: 0px;
    }

    .brand-container {
        text-align:center;
    }

    

    .logo-circle {
        width: 80px;
        height: 80px;
        background: linear-gradient(145deg, #00ffff, #007acc);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        animation: logo-glow 3s ease-in-out infinite;
    }

    .logo-inner {
        width: 60px;
        height: 60px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(20px);
    }

    .logo-icon {
        width: 40px;
        height: 40px;
        color: white;
    }

    @keyframes logo-glow {
        0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); }
        50% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.6); }
    }

    .logo-text {
        flex: 1;
    }

    .brand-title {
        font-size: 3rem;
        font-weight: 900;
        background: linear-gradient(145deg, #ffffff, #00ffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
        letter-spacing: -1px;
        line-height: 1;
    }

    .brand-subtitle {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.7);
        margin: 8px 0 0 0;
        font-weight: 400;
        letter-spacing: 0.5px;
    }

    

    

    

    

    

    .stats-banner {
        display: flex;
        gap: 40px;
        padding: 30px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
    }

    .stat {
        text-align: center;
    }

    .stat-number {
        font-size: 2rem;
        font-weight: 800;
        color: #00ffff;
        line-height: 1;
    }

    .stat-label {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 5px;
    }

    /* === FORM SECTION === */
    .form-section {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px;
        padding-top: 0px;
    }

    

    .form-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .form-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: white;
        margin: 0 0 10px 0;
        line-height: 1.2;
    }

    .form-subtitle {
        color: rgba(255, 255, 255, 0.7);
        margin: 0;
        font-size: 1rem;
    }

    .login-form {
        width: 100%;
    }

    

    .input-wrapper {
        width:100%;
        position: relative;
    }

    .modern-input {
        --mud-palette-text-primary: rgba(255, 255, 255, 0.9);
        --mud-palette-text-secondary: rgba(255, 255, 255, 0.6);
        --mud-palette-background: rgba(255, 255, 255, 0.05);
        --mud-palette-surface: rgba(255, 255, 255, 0.05);
    }

    

    .modern-input .mud-input-root:hover {
        border-color: rgba(0, 255, 255, 0.5) !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }

    .modern-input .mud-input-root.mud-input-root-outlined.mud-input-root-adorned-start {
        padding-left: 14px !important;
    }

    

    .form-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    .forgot-password {
        color: #00ffff !important;
        text-decoration: none;
        font-size: 0.9rem;
        transition: color 0.3s ease;
    }

    .forgot-password:hover {
        color: #66ffff !important;
    }

    

    

    

    

    .elite-login-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .elite-login-btn:hover::before {
        left: 100%;
    }

    .button-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        position: relative;
        z-index: 1;
    }

    .button-arrow {
        transition: transform 0.3s ease;
    }

    .elite-login-btn:hover .button-arrow {
        transform: translateX(5px);
    }

    .loading-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .spinner {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .error-alert {
        margin-top: 20px;
        background: rgba(255, 0, 0, 0.1) !important;
        border: 1px solid rgba(255, 0, 0, 0.3) !important;
        border-radius: 12px !important;
        color: #ff6b6b !important;
    }

    .validation-summary {
        color: #ff6b6b;
        margin-top: 15px;
        font-size: 0.9rem;
    }

    .form-footer {
        margin-top: 40px;
    }

    .divider {
        text-align: center;
        position: relative;
        margin-bottom: 25px;
    }

    .divider span {
        background: linear-gradient(135deg, #0a0f1c 0%, #1a2332 50%, #0a0f1c 100%);
        padding: 0 20px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.9rem;
    }

    .divider::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
    }

    .social-login {
        display: flex;
        gap: 15px;
    }

    .social-btn {
        flex: 1;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: rgba(255, 255, 255, 0.8) !important;
        border-radius: 10px !important;
        height: 45px !important;
        transition: all 0.3s ease !important;
    }

    .social-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(0, 255, 255, 0.4) !important;
        transform: translateY(-1px) !important;
    }

    /* === FOOTER === */
    

    .footer-text {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .footer-text a {
        color: rgba(255, 255, 255, 0.72);
        text-decoration: none;
    }

    .footer-text a:hover,
    .footer-text a:focus-visible {
        color: #10c8ea;
        text-decoration: underline;
    }

    .separator {
        color: rgba(255, 255, 255, 0.3);
    }

    /* === LOGIN POLISH OVERRIDES === */
    .sports-login-container {
    min-height: 100vh;
    width: 100%;
    position: absolute;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    top: 0px;
    background: radial-gradient(circle at 18% 35%, rgba(109, 177, 182, 0.16), transparent 30%), radial-gradient(circle at 82% 10%, rgba(109, 177, 182, 0.10), transparent 24%), linear-gradient(135deg, #080d18 0%, #172232 52%, #07101d 100%);
}

    .sports-login-container::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
        background-size: 72px 72px;
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 72%);
        pointer-events: none;
    }

    .ambient-blob {
        position: absolute;
        z-index: 0;
        pointer-events: none;
        opacity: 0.92;
        filter: drop-shadow(0 0 22px rgba(125, 213, 219, 0.28));
    }

    .ambient-blob-svg {
        display: block;
        max-width: 100%;
        height: auto;
        transform-origin: center;
    }

    .ambient-blob-top {
        width: 18vw;
        right: 5vh;
        top: 0;
    }

    .ambient-blob-bottom {
        width: 22vw;
        right: 65vh;
        top: 73vh;
    }

    .ambient-blob-hero {
        width: 54vw;
        left: -1vh;
        top: -7vh;
    }

    .ambient-blob-top .ambient-blob-svg {
        transform: rotate(18deg) scaleX(0.88) scaleY(1.12);
    }

    .ambient-blob-bottom .ambient-blob-svg {
        transform: rotate(-38deg) scaleX(-1.18) scaleY(0.82);
        opacity: 0.78;
    }

    .ambient-blob-hero .ambient-blob-svg {
        transform: rotate(-8deg) scaleX(1.08);
    }

    .logo-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    position: absolute;
    top: 28vh;
    left: 16vw;
    width: 35vw;
    z-index: 1;
}

    .login-logo-mark {
        display: block;
        width: 60%;
        height: auto;
        filter: drop-shadow(0 22px 50px rgba(0, 0, 0, 0.26));
    }

    .login-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    z-index: 10;
    position: relative;
    padding-top: 0px;
    align-items: center;
    padding: 56px 44px 20px;
    gap: clamp(32px, 6vw, 96px);
}

    .form-container {
    width: 100%;
    max-width: 430px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)), rgba(12, 20, 34, 0.74);
    border: 1px solid rgba(167, 231, 235, 0.16);
    border-radius: 22px;
    padding: 42px 38px;
    backdrop-filter: blur(26px);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

    .form-container::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(125, 213, 219, 0.12), transparent 32%, rgba(255, 255, 255, 0.035));
        pointer-events: none;
    }

    .form-container > * {
        position: relative;
        z-index: 1;
    }

    .login-title {
        display: flex;
        justify-content: center;
        line-height: 0;
        margin: -22px 0 34px;
    }

    .login-title svg,
    .login-wordmark {
        display: block;
        width: min(100%, 330px);
        height: auto;
        filter: drop-shadow(0 0 18px rgba(109, 177, 182, 0.16));
    }

    .input-group {
    margin-bottom: 20px;
}

    .modern-input .mud-input-root {
    transition: all 0.3s ease !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border-radius: 10px !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

    .modern-input .mud-input-root:hover,
    .modern-input .mud-input-root:focus-within {
        border-color: rgba(141, 229, 234, 0.68) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 0 0 3px rgba(109, 177, 182, 0.10);
    }

    .modern-input .mud-input-adornment .mud-icon-root {
    color: #13d7df !important;
}

    .submit-section {
    margin-bottom: 24px;
}

    .elite-login-btn {
    color: white !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    background: linear-gradient(135deg, #1b2a42 0%, #5eaab1 100%) !important;
    border-radius: 10px !important;
    height: 52px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 14px 34px rgba(57, 137, 146, 0.18) !important;
}

    .elite-login-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 36px rgba(109, 177, 182, 0.28) !important;
}

    .elite-forgotpassword-btn {
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    background: rgba(255, 255, 255, 0.025) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 10px !important;
    height: 50px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin-top: 26px;
}

    .elite-forgotpassword-btn:hover {
        border-color: #9be7eb !important;
        color: #9be7eb !important;
        background: rgba(125, 213, 219, 0.08) !important;
    }

    .features-list {
    display: flex;
    align-items: center;
    width: min(94%, 1440px);
    margin: 0 auto 22px;
    justify-content: space-between;
    gap: 24px;
    z-index: 1;
    position: relative;
}

    .feature-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 14px 16px;
    margin-bottom: 0;
    border-radius: 18px;
    background: rgba(10, 16, 28, 0.42);
    border: 1px solid rgba(125, 213, 219, 0.16);
    backdrop-filter: blur(14px);
}

    .feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    background: linear-gradient(145deg, rgba(18, 51, 78, 0.95), rgba(109, 177, 182, 0.26));
    border-radius: 14px;
    border: 1px solid rgba(125, 213, 219, 0.34);
    color: #8de5ea;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

    .feature-text h3 {
    color: white;
    margin: 0 0 5px 0;
    font-weight: 600;
    font-size: 1rem;
}

    .feature-text p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.35;
}

    .footer-content {
    text-align: center;
    z-index: 10;
    position: relative;
    padding: 18px 30px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

    /* === RESPONSIVE === */
    @media (max-width: 1200px) {
        .login-content {
            grid-template-columns: 1fr;
            gap: 40px;
            text-align: center;
        }
        
        .branding-section {
            padding: 20px;
        }
        
        .stats-banner {
            gap: 20px;
        }
    }

    @media (max-width: 768px) {
        
        
        
        
        .brand-title {
            font-size: 2.5rem;
        }
        
        
        
        .stats-banner {
            flex-direction: column;
            gap: 15px;
        }
        
        .social-login {
            flex-direction: column;
        }
        
        .form-options {
            flex-direction: column;
            gap: 15px;
            align-items: flex-start;
        }
    }

    @media (max-width: 480px) {
        .form-container {
            padding: 30px 20px;
            margin: 20px;
        }
        
        .brand-title {
            font-size: 2rem;
        }
        
        .form-title {
            font-size: 2rem;
        }
    }

    @media (max-width: 768px) {
        .sports-login-container {
            min-height: 100dvh;
            overflow-y: auto;
        }

        .ambient-blob-top {
            width: 48vw !important;
            right: -16vw !important;
            top: 2vh !important;
        }

        .ambient-blob-bottom {
            width: 58vw !important;
            right: -14vw !important;
            top: 76vh !important;
        }

        .ambient-blob-hero {
            width: 118vw !important;
            left: -46vw !important;
            top: 6vh !important;
            opacity: 0.66;
        }

        .logo-wrapper {
    flex-direction: column;
    text-align: center;
    gap: 15px;
    display: none;
}

        .login-content {
    min-height: auto;
    display: block;
    padding: 42px 16px 22px;
}

        .branding-section {
            display: none;
        }

        .form-section {
            padding: 0;
        }

        .form-container {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 34px 22px;
}

        .login-title {
            margin: -12px 0 28px;
        }

        .features-list {
            width: calc(100% - 32px);
            flex-direction: column;
            margin: 0 auto 18px;
            gap: 12px;
        }

        .feature-item {
            width: 100%;
            padding: 12px 14px;
        }

        .footer-text {
            flex-wrap: wrap;
            row-gap: 4px;
        }
    }

.player-analytics-detail-page {
        color: #f4f7f8;
        background: transparent;
        padding: clamp(16px, 2vw, 24px) clamp(14px, 2.4vw, 34px) 46px;
    }

    .player-analytics-detail-page .player-detail-shell {
        width: min(1760px, 100%);
        margin: 0 auto;
        display: grid;
        gap: 18px;
    }

    .player-analytics-detail-page .player-analytics-report-header {
        order: 0;
    }

    .player-analytics-detail-page .player-analytics-report-side {
        min-width: min(100%, 760px);
    }

    .player-analytics-detail-page .player-analytics-header-filters {
        align-items: stretch;
    }

    .player-analytics-detail-page .player-analytics-header-filters .player-scope-field {
        min-width: 160px;
        padding: 8px 10px;
    }

    .player-analytics-detail-page .player-analytics-header-filters .player-scope-field.is-wide {
        min-width: 240px;
    }

    .player-analytics-detail-page .player-analytics-header-filters .player-scope-field select,
    .player-analytics-detail-page .player-analytics-header-filters .player-scope-field input {
        min-height: 34px;
    }

    .player-analytics-detail-page .player-detail-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px;
        align-items: start;
        padding: clamp(16px, 2vw, 24px);
        border: 1px solid rgba(120, 169, 184, .2);
        border-radius: 18px;
        background:
            radial-gradient(circle at 10% 0%, rgba(16, 200, 234, .14), transparent 34%),
            linear-gradient(135deg, rgba(8, 25, 30, .92), rgba(4, 13, 16, .84));
        box-shadow: 0 20px 54px rgba(0, 0, 0, .22);
        order: 0;
    }

    .player-analytics-detail-page .player-detail-title {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: center;
    }

    .player-analytics-detail-page .player-number-badge {
        width: 66px;
        height: 66px;
        border: 1px solid rgba(138, 242, 31, .42);
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(138, 242, 31, .08);
        color: #f4f7f8;
        font-size: 1.45rem;
        font-weight: 950;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .player-analytics-detail-page .player-detail-title h1 {
        margin: 0;
        font-size: 3.6rem;
        line-height: .95;
        font-weight: 950;
        letter-spacing: 0;
    }

    .player-analytics-detail-page .player-detail-title p {
        margin: 8px 0 0;
        color: #91b7c7;
        font-weight: 800;
    }

    .player-analytics-detail-page .player-detail-actions,
    .player-analytics-detail-page .player-detail-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
    }

    .player-analytics-detail-page .player-detail-meta {
        margin-top: 14px;
    }

    .player-analytics-detail-page .player-benchmark-entry {
        order: 1;
        scroll-margin-top: 18px;
    }

    .player-analytics-detail-page .player-section-nav {
        order: 2;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        padding: 8px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .player-analytics-detail-page #player-operational {
        order: 3;
    }

    .player-analytics-detail-page #player-map {
        order: 4;
    }

    .player-analytics-detail-page #player-stats {
        order: 5;
    }

    .player-analytics-detail-page #player-expectation {
        order: 6;
    }

    .player-analytics-detail-page #player-metrics {
        order: 7;
    }

    .player-analytics-detail-page #player-segments {
        order: 8;
    }

    .player-analytics-detail-page .player-analysis-section,
    .player-analytics-detail-page .player-report-section-card {
        width: auto;
        margin: 0;
    }

    .player-analytics-detail-page .player-analytics-trend-section,
    .player-analytics-detail-page .player-analytics-sprint-segments {
        display: grid;
        gap: 14px;
        min-width: 0;
    }

    .player-analytics-detail-page .player-analytics-trend-section {
        padding: 16px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 8px;
        background: rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .player-analytics-detail-page .player-analytics-trend-section .mud-tabs-toolbar,
    .player-analytics-detail-page .player-analytics-trend-section .mud-tabs-panels {
        background: transparent;
    }

    .player-analytics-detail-page .player-analytics-line-chart-panel {
        min-width: 0;
        padding: 14px;
        border-radius: 8px;
        background:
            linear-gradient(180deg, rgba(8, 22, 27, .82), rgba(3, 11, 14, .68));
    }

    .player-analytics-detail-page .player-analytics-line-chart-panel header {
        margin-bottom: 8px;
    }

    .player-analytics-detail-page .player-analytics-line-chart-panel .mud-chart {
        min-height: 320px;
    }

    .player-analytics-detail-page .player-analytics-line-chart-panel svg {
        overflow: visible;
    }

    .player-analytics-detail-page .player-analytics-sprint-segments {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid color-mix(in srgb, var(--event-accent, #10c8ea) 30%, rgba(120, 169, 184, .16));
    }

    .player-analytics-detail-page .player-analytics-segment-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 2px;
    }

    .player-analytics-detail-page .player-analytics-segment-duration-head {
        align-items: center;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid color-mix(in srgb, var(--event-accent, #10c8ea) 24%, rgba(120, 169, 184, .14));
    }

    .player-analytics-detail-page .player-analytics-segment-duration-head + .player-analytics-segment-toolbar {
        margin-top: 10px;
    }

    .player-analytics-detail-page .segment-duration-control {
        min-width: 0;
        width: 100%;
    }

    .player-analytics-detail-page .segment-duration-metric-select {
        flex: 0 1 320px;
        max-width: 360px;
    }

    .player-analytics-detail-page .player-analytics-segment-toolbar .mud-input-control,
    .player-analytics-detail-page .segment-duration-filter-panel .mud-input-control {
        margin: 0 !important;
    }

    .player-analytics-detail-page .segment-duration-filter-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 112px;
        height: 42px;
        padding: 0 14px;
        border: 1px solid color-mix(in srgb, var(--event-accent, #10c8ea) 36%, rgba(120, 169, 184, .2));
        border-radius: 999px;
        color: #dff5fb;
        background: rgba(3, 11, 14, .72);
        font: inherit;
        font-size: .76rem;
        font-weight: 950;
        cursor: pointer;
        transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .player-analytics-detail-page .segment-duration-filter-toggle:hover,
    .player-analytics-detail-page .segment-duration-filter-toggle:focus-visible,
    .player-analytics-detail-page .segment-duration-filter-toggle.is-open {
        border-color: var(--event-accent, #10c8ea);
        background: color-mix(in srgb, var(--event-accent, #10c8ea) 12%, rgba(3, 11, 14, .76));
        box-shadow: 0 0 18px color-mix(in srgb, var(--event-accent, #10c8ea) 14%, transparent);
        outline: none;
    }

    .player-analytics-detail-page .segment-duration-filter-toggle b {
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        color: #061014;
        background: var(--event-accent, #10c8ea);
        font-size: .68rem;
        font-weight: 950;
    }

    .player-analytics-detail-page .segment-duration-filter-panel {
        display: grid;
        grid-template-columns: repeat(4, minmax(170px, 1fr)) auto;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border: 1px solid color-mix(in srgb, var(--event-accent, #10c8ea) 24%, rgba(120, 169, 184, .16));
        border-radius: 8px;
        background:
            linear-gradient(180deg, rgba(8, 22, 27, .82), rgba(3, 11, 14, .66));
    }

    .player-analytics-detail-page .segment-duration-reset-button {
        min-width: 104px !important;
        height: 40px !important;
        align-self: center;
        white-space: nowrap;
    }

    .player-analytics-detail-page .player-analytics-segment-duration-grid {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        gap: 14px;
        align-items: stretch;
        margin-top: 0;
        overflow: hidden;
    }

    .player-analytics-detail-page .player-analytics-segment-duration-table-card,
    .player-analytics-detail-page .player-analytics-segment-chart-card {
        min-width: 0;
        min-height: 100%;
        overflow: hidden;
    }

    .player-analytics-detail-page .player-analytics-segment-duration-table-card.mud-table {
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .player-analytics-detail-page .player-analytics-segment-duration-table .mud-table-container {
        max-width: 100%;
        max-height: 390px;
        overflow: auto;
    }

    .player-analytics-detail-page .player-analytics-segment-duration-table .mud-table-root,
    .player-analytics-detail-page .player-analytics-segment-duration-table .mud-table {
        width: 100%;
        min-width: 0;
    }

    .player-analytics-detail-page .player-analytics-segment-duration-table table {
        min-width: 760px;
    }

    .player-analytics-detail-page .player-analytics-segment-chart-card .mud-chart {
        min-height: 300px;
    }

    .player-analytics-detail-page .segment-intensity-card header {
        align-items: flex-start;
        gap: 12px;
    }

    .player-analytics-detail-page .segment-intensity-card header > em {
        max-width: 360px;
        color: #9fb8c3;
        font-size: .72rem;
        font-style: normal;
        font-weight: 850;
        line-height: 1.35;
        text-align: right;
    }

    .player-analytics-detail-page .segment-intensity-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin: 12px 0;
    }

    .player-analytics-detail-page .segment-intensity-summary span {
        display: grid;
        gap: 3px;
        padding: 11px 12px;
        border: 1px solid color-mix(in srgb, var(--event-accent, #10c8ea) 22%, rgba(120, 169, 184, .16));
        border-radius: 8px;
        background: rgba(3, 11, 14, .54);
    }

    .player-analytics-detail-page .segment-intensity-summary strong {
        color: #f7fbff;
        font-size: .98rem;
        font-weight: 950;
        line-height: 1;
    }

    .player-analytics-detail-page .segment-intensity-summary em {
        color: #91aebb;
        font-size: .66rem;
        font-style: normal;
        font-weight: 900;
        text-transform: uppercase;
    }

    .player-analytics-detail-page .segment-intensity-table {
        min-width: 980px;
    }

    .player-analytics-detail-page .sprint-top-card .player-native-table-wrap {
        max-width: 100%;
        overflow-x: auto;
    }

    .player-analytics-detail-page .sprint-intensity-table {
        min-width: 900px;
    }

    .player-analytics-detail-page .sprint-top-card tbody tr.is-clickable {
        cursor: pointer;
    }

    .player-analytics-detail-page .segment-intensity-table th:first-child,
    .player-analytics-detail-page .segment-intensity-table td:first-child {
        width: 58px;
        text-align: center;
    }

    .player-analytics-detail-page .segment-intensity-rank {
        display: inline-grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border: 1px solid color-mix(in srgb, var(--event-accent, #10c8ea) 44%, rgba(120, 169, 184, .2));
        border-radius: 999px;
        color: #061014;
        background: var(--event-accent, #10c8ea);
        font-size: .78rem;
        font-weight: 950;
        box-shadow: 0 0 18px color-mix(in srgb, var(--event-accent, #10c8ea) 18%, transparent);
    }

    .player-analytics-detail-page .segment-intensity-main,
    .player-analytics-detail-page .segment-intensity-meter {
        display: grid;
        gap: 4px;
    }

    .player-analytics-detail-page .segment-intensity-main strong,
    .player-analytics-detail-page .segment-intensity-meter strong {
        color: #f7fbff;
        font-size: .84rem;
        font-weight: 950;
        line-height: 1;
        white-space: nowrap;
    }

    .player-analytics-detail-page .segment-intensity-main em,
    .player-analytics-detail-page .segment-intensity-meter em,
    .player-analytics-detail-page .segment-intensity-note {
        color: #91aebb;
        font-size: .68rem;
        font-style: normal;
        font-weight: 850;
        line-height: 1.25;
    }

    .player-analytics-detail-page .segment-intensity-profile {
        display: inline-flex;
        width: fit-content;
        max-width: 100%;
        padding: 5px 9px;
        border: 1px solid color-mix(in srgb, var(--event-accent, #10c8ea) 36%, rgba(120, 169, 184, .16));
        border-radius: 999px;
        color: #dff8ff;
        background: color-mix(in srgb, var(--event-accent, #10c8ea) 10%, rgba(3, 11, 14, .72));
        font-size: .7rem;
        font-weight: 950;
        line-height: 1;
        white-space: nowrap;
    }

    .player-analytics-detail-page .segment-intensity-meter i {
        position: relative;
        display: block;
        width: min(180px, 100%);
        height: 8px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(120, 169, 184, .14);
    }

    .player-analytics-detail-page .segment-intensity-meter i b {
        position: absolute;
        inset: 0 auto 0 0;
        width: max(7px, var(--intensity-width, 0%));
        border-radius: inherit;
        background: linear-gradient(90deg, var(--event-accent, #10c8ea), color-mix(in srgb, var(--event-accent, #10c8ea) 62%, white));
        box-shadow: 0 0 14px color-mix(in srgb, var(--event-accent, #10c8ea) 34%, transparent);
    }

    @media (max-width: 1180px) {
        .player-analytics-detail-page .segment-duration-filter-panel,
        .player-analytics-detail-page .player-analytics-segment-duration-grid {
            grid-template-columns: 1fr;
        }

        .player-analytics-detail-page .segment-duration-metric-select {
            flex-basis: min(100%, 360px);
        }

        .player-analytics-detail-page .segment-duration-reset-button {
            width: 100%;
        }

        .player-analytics-detail-page .segment-intensity-summary {
            grid-template-columns: 1fr;
        }

        .player-analytics-detail-page .segment-intensity-card header > em {
            max-width: none;
            text-align: left;
        }
    }

    .player-analytics-detail-page .player-kpi-grid,
    .player-analytics-detail-page .player-map-layout,
    .player-analytics-detail-page .player-context-strip,
    .player-analytics-detail-page .player-map-summary-grid,
    .player-analytics-detail-page .player-insight-grid,
    .player-analytics-detail-page .player-stats-stack {
        display: grid;
        gap: 14px;
    }

    .player-analytics-detail-page .player-kpi-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .player-analytics-detail-page .player-context-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .player-analytics-detail-page .player-insight-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .player-analytics-detail-page .player-map-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
        gap: 14px;
    }

    .player-analytics-detail-page .player-analytics-map-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .player-analytics-detail-page .player-map-summary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 14px;
    }

    .player-analytics-detail-page .player-panel {
        padding: 16px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .player-analytics-detail-page .player-panel header {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 14px;
    }

    .player-analytics-detail-page .player-panel header span,
    .player-analytics-detail-page .movement-row span,
    .player-analytics-detail-page .zone-row span {
        display: block;
        color: #91b7c7;
        font-size: .72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .player-analytics-detail-page .player-panel header strong {
        display: block;
        margin-top: 3px;
        font-size: 1.08rem;
        font-weight: 950;
    }

    .player-analytics-detail-page .player-panel header em {
        color: #91b7c7;
        font-style: normal;
        font-weight: 800;
    }

    .player-analytics-detail-page .player-field-card {
        min-height: 520px;
    }

    .player-analytics-detail-page .player-field {
        position: relative;
        aspect-ratio: 105 / 68;
        min-height: 430px;
        overflow: hidden;
        border: 1px solid rgba(120, 169, 184, .2);
        border-radius: 16px;
        background:
            radial-gradient(circle at 18% 18%, rgba(138, 242, 31, .12), transparent 30%),
            linear-gradient(135deg, rgba(3, 52, 43, .94), rgba(2, 25, 30, .95));
    }

    .player-analytics-detail-page .player-field .field-svg,
    .player-analytics-detail-page .analytics-heat-layer {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .player-analytics-detail-page .player-field .field-svg {
        z-index: 1;
    }

    .player-analytics-detail-page .analytics-heat-layer {
        z-index: 3;
        pointer-events: none;
    }

    .player-analytics-detail-page .analytics-heat-layer .heat-cell {
        position: absolute;
        opacity: .78;
        mix-blend-mode: screen;
    }

    .player-analytics-detail-page .player-field .pitch-bg {
        fill: rgba(4, 72, 55, .48);
    }

    .player-analytics-detail-page .player-field .pitch-line {
        stroke: rgba(236, 255, 246, .42);
        stroke-width: .32;
    }

    .player-analytics-detail-page .player-field .pitch-dot {
        fill: rgba(236, 255, 246, .58);
    }

    .player-analytics-detail-page .player-analytics-map-detail-grid {
        display: grid;
        grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
        gap: 14px;
        align-items: start;
    }

    .player-analytics-detail-page .player-analytics-map-detail-grid.is-cloudmap-position {
        grid-template-columns: minmax(260px, .52fr) minmax(0, 1.48fr);
    }

    .player-analytics-detail-page .player-analytics-rhythm-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .player-analytics-detail-page .player-analytics-cloud-detail,
    .player-analytics-detail-page .player-analytics-heat-detail {
        display: grid;
        gap: 14px;
    }

    .player-analytics-detail-page .player-analytics-minimap-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .player-analytics-detail-page .player-analytics-cloud-minimap-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .player-analytics-detail-page .player-analytics-mini-card {
        min-height: 174px;
    }

    .player-analytics-detail-page .player-analytics-mini-card .position-mini-field {
        min-height: 106px;
        aspect-ratio: 105 / 68;
    }

    .player-analytics-detail-page .player-analytics-cloud-mini-card {
        min-height: 430px;
    }

    .player-analytics-detail-page .player-analytics-cloud-mini-card .position-mini-field {
        min-height: 360px;
    }

    .player-analytics-detail-page .player-analytics-position-heat-detail {
        gap: 14px;
    }

    .player-analytics-detail-page .player-analytics-position-intensity-table {
        min-width: 860px;
    }

    .player-analytics-detail-page .player-analytics-position-rhythm-grid {
        grid-template-columns: repeat(2, minmax(360px, 1fr));
        gap: 14px;
    }

    .player-analytics-detail-page .player-analytics-position-rhythm-card {
        min-height: 430px;
    }

    .player-analytics-detail-page .player-analytics-position-rhythm-card .position-mini-field {
        min-height: 360px;
        aspect-ratio: 105 / 68;
    }

    .player-analytics-detail-page .position-bucket-head.is-static {
        cursor: default;
        pointer-events: none;
    }

    .player-analytics-detail-page .player-analytics-mini-card header {
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 8px;
    }

    .player-analytics-detail-page .player-analytics-mini-card header strong {
        margin-top: 0;
        font-size: .86rem;
        line-height: 1;
    }

    .player-analytics-detail-page .player-analytics-mini-card header em {
        margin-left: auto;
        font-size: .66rem;
        line-height: 1;
    }

    .player-analytics-detail-page .player-analytics-mini-card header .position-bucket-dot {
        align-self: center;
    }

    .player-analytics-detail-page .player-analytics-mini-card header strong,
    .player-analytics-detail-page .player-analytics-mini-card header em {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    @media (max-width: 1180px) {
        .player-analytics-detail-page .player-analytics-map-detail-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .player-analytics-detail-page .player-analytics-rhythm-grid,
        .player-analytics-detail-page .player-analytics-minimap-grid,
        .player-analytics-detail-page .player-analytics-position-rhythm-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 680px) {
        .player-analytics-detail-page .player-analytics-rhythm-grid,
        .player-analytics-detail-page .player-analytics-minimap-grid,
        .player-analytics-detail-page .player-analytics-position-rhythm-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .player-analytics-detail-page .player-analytics-cloud-mini-card {
            min-height: 310px;
        }

        .player-analytics-detail-page .player-analytics-cloud-mini-card .position-mini-field,
        .player-analytics-detail-page .player-analytics-position-rhythm-card .position-mini-field {
            min-height: 240px;
        }
    }

    .player-analytics-detail-page .movement-list,
    .player-analytics-detail-page .zone-list {
        display: grid;
        gap: 10px;
    }

    .player-analytics-detail-page .movement-row,
    .player-analytics-detail-page .zone-row {
        display: grid;
        gap: 8px;
        padding: 10px;
        border: 1px solid rgba(120, 169, 184, .14);
        border-radius: 12px;
        background: rgba(3, 12, 15, .48);
    }

    .player-analytics-detail-page .movement-row header,
    .player-analytics-detail-page .zone-row header {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        margin: 0;
    }

    .player-analytics-detail-page .movement-row strong,
    .player-analytics-detail-page .zone-row strong {
        font-size: .95rem;
    }

    .player-analytics-detail-page .movement-bar,
    .player-analytics-detail-page .zone-bar {
        height: 8px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(120, 169, 184, .16);
    }

    .player-analytics-detail-page .movement-bar i,
    .player-analytics-detail-page .zone-bar i {
        display: block;
        height: 100%;
        width: var(--bar-width);
        background: var(--bar-color);
        box-shadow: 0 0 16px var(--bar-color);
    }

    .player-analytics-detail-page .player-benchmark-launch,
    .player-analytics-detail-page .player-benchmark-active-head {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: center;
        padding: clamp(14px, 2vw, 18px);
        border: 1px solid rgba(120, 169, 184, .18);
        border-radius: 8px;
        background: rgba(7, 20, 25, .66);
    }

    .player-analytics-detail-page .player-benchmark-launch > div,
    .player-analytics-detail-page .player-benchmark-active-head > div {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .player-analytics-detail-page .player-benchmark-launch span,
    .player-analytics-detail-page .player-benchmark-active-head span {
        color: #91b7c7;
        font-size: .72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .player-analytics-detail-page .player-benchmark-launch strong,
    .player-analytics-detail-page .player-benchmark-active-head strong {
        color: #f4f7f8;
        font-size: 1.24rem;
        line-height: 1.1;
        font-weight: 950;
    }

    .player-analytics-detail-page .player-benchmark-launch em,
    .player-analytics-detail-page .player-benchmark-active-head em {
        color: #b8ced8;
        font-size: .82rem;
        font-style: normal;
        font-weight: 800;
    }

    .player-analytics-detail-page .player-section-nav a,
    .player-analytics-detail-page .player-map-mode-tabs button {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border: 1px solid rgba(120, 169, 184, .22);
        border-radius: 999px;
        background: rgba(3, 9, 11, .46);
        color: #d9eef5;
        font-size: .74rem;
        font-weight: 900;
        text-decoration: none;
        cursor: pointer;
    }

    .player-analytics-detail-page .player-section-nav a {
        padding: 0 12px;
    }

    .player-analytics-detail-page .player-map-mode-tabs button {
        padding: 0 11px;
    }

    .player-analytics-detail-page .player-section-nav a:hover,
    .player-analytics-detail-page .player-section-nav a:focus-visible,
    .player-analytics-detail-page .player-map-mode-tabs button:hover,
    .player-analytics-detail-page .player-map-mode-tabs button:focus-visible {
        border-color: rgba(16, 200, 234, .56);
        background: rgba(16, 200, 234, .1);
        outline: none;
    }

    .player-analytics-detail-page .player-map-mode-tabs button.is-active {
        border-color: var(--team-selection-border);
        background: var(--team-selection-gradient);
        color: var(--team-selection-text);
    }

    .player-analytics-detail-page .player-map-mode-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, auto));
        gap: 10px;
        justify-content: end;
    }

    .player-analytics-detail-page .player-context-card,
    .player-analytics-detail-page .player-kpi-card,
    .player-analytics-detail-page .player-map-summary-card,
    .player-analytics-detail-page .player-section-nav,
    .player-analytics-detail-page .player-finding-card {
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .player-analytics-detail-page .player-context-card {
        min-width: 0;
        padding: 13px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }

    .player-analytics-detail-page .player-context-icon {
        display: inline-grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(120, 169, 184, .2);
        border-radius: 50%;
        background: rgba(3, 9, 11, .52);
    }

    .player-analytics-detail-page .player-kpi-card,
    .player-analytics-detail-page .player-finding-card {
        padding: 14px;
        min-height: 112px;
    }

    .player-analytics-detail-page .player-kpi-card span,
    .player-analytics-detail-page .player-finding-card span {
        display: block;
        color: #91b7c7;
        font-size: .72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .player-analytics-detail-page .player-kpi-card strong {
        display: block;
        margin-top: 8px;
        font-size: 1.35rem;
        line-height: 1.05;
        font-weight: 950;
    }

    .player-analytics-detail-page .player-kpi-card em,
    .player-analytics-detail-page .player-finding-card em {
        display: block;
        margin-top: 6px;
        color: #b8ced8;
        font-size: .78rem;
        font-style: normal;
        font-weight: 700;
    }

    .player-analytics-detail-page .player-scope-tools {
        display: grid;
        grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(170px, .8fr));
        gap: 10px;
    }

    .player-analytics-detail-page .player-scope-summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    @media (max-width: 1400px) {
        .player-analytics-detail-page .player-kpi-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .player-analytics-detail-page .player-context-strip {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .player-analytics-detail-page .player-map-layout {
            grid-template-columns: 1fr;
        }

        .player-analytics-detail-page .player-insight-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 980px) {
        .player-analytics-detail-page .player-detail-hero {
            grid-template-columns: 1fr;
        }

        .player-analytics-detail-page .player-detail-actions,
        .player-analytics-detail-page .player-detail-meta,
        .player-analytics-detail-page .player-benchmark-launch,
        .player-analytics-detail-page .player-benchmark-active-head {
            justify-content: flex-start;
        }

        .player-analytics-detail-page .player-benchmark-launch,
        .player-analytics-detail-page .player-benchmark-active-head {
            align-items: flex-start;
            flex-direction: column;
        }

        .player-analytics-detail-page .player-kpi-grid,
        .player-analytics-detail-page .player-context-strip,
        .player-analytics-detail-page .player-map-summary-grid,
        .player-analytics-detail-page .player-insight-grid,
        .player-analytics-detail-page .player-scope-summary-grid,
        .player-analytics-detail-page .player-scope-tools {
            grid-template-columns: 1fr;
        }

        .player-analytics-detail-page .player-detail-title h1 {
            font-size: 2.35rem;
        }

        .player-analytics-detail-page .player-map-mode-tabs {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            justify-content: stretch;
        }
    }

    

    .player-report-title,
    .player-report-meta,
    .player-report-nav,
    .player-report-actions,
    .player-scope-tabs {
        display: flex;
        align-items: center;
    }

    .player-report-hero {
        width: min(1760px, 100%);
        margin: 0 auto 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px;
        align-items: start;
        padding: clamp(16px, 2vw, 24px);
        border: 1px solid rgba(120, 169, 184, .2);
        border-radius: 18px;
        background:
            radial-gradient(circle at 10% 0%, rgba(16, 200, 234, .14), transparent 34%),
            linear-gradient(135deg, rgba(8, 25, 30, .92), rgba(4, 13, 16, .84));
        box-shadow: 0 20px 54px rgba(0, 0, 0, .22);
    }

    .player-report-title {
        gap: 14px;
        flex-wrap: wrap;
        min-width: 0;
    }

    .player-report-number {
        width: 66px;
        height: 66px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        color: #f8fff4;
        font-size: 1.45rem;
        font-weight: 950;
        border: 1px solid rgba(138, 242, 31, .42);
        background: rgba(138, 242, 31, .08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .player-report-title span,
    .player-report-actions span,
    .player-scope-head span,
    .player-scope-field span,
    .player-scope-summary-card small,
    .player-context-card small,
    .player-report-insight small,
    .player-kpi-card span {
        color: #91b7c7;
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .player-report-title h1 {
        margin: 0;
        color: #f8fdff;
        font-size: 3.6rem;
        line-height: .95;
        font-weight: 950;
    }

    .player-report-title p {
        max-width: 840px;
        margin: 8px 0 0;
        color: #91b7c7;
        font-weight: 800;
    }

    .player-report-meta,
    .player-report-nav {
        gap: 10px;
        flex-wrap: wrap;
    }

    .player-report-meta {
        margin-top: 12px;
    }

    .player-report-actions {
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
        max-width: 420px;
    }

    .player-report-actions > div {
        min-width: 220px;
        padding: 12px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(3, 9, 11, .38);
    }

    .player-report-actions strong,
    .player-scope-head strong,
    .player-scope-summary-card strong {
        display: block;
        margin-top: 4px;
        color: #f4f7f8;
        font-weight: 950;
        line-height: 1.1;
    }

    .player-report-actions em,
    .player-scope-head em,
    .player-scope-summary-card em {
        display: block;
        margin-top: 4px;
        color: #b8ced8;
        font-style: normal;
        font-weight: 800;
        line-height: 1.25;
    }

    .player-report-meta em,
    .player-report-nav a {
        border: 1px solid rgba(120, 169, 184, .22);
        border-radius: 999px;
        background: rgba(3, 9, 11, .46);
        color: #d9eef5;
        font-style: normal;
        font-weight: 900;
    }

    .player-report-meta em {
        padding: 7px 11px;
        font-size: .78rem;
    }

    .player-report-nav {
        width: min(1760px, 100%);
        margin: 10px auto 16px;
        padding: 8px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .player-report-nav a {
        min-height: 38px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        font-size: .74rem;
    }

    .player-report-nav a:hover,
    .player-report-nav a:focus-visible {
        border-color: rgba(16, 200, 234, .56);
        background: rgba(16, 200, 234, .1);
        outline: none;
    }

    .player-report-context,
    .player-report-kpi-grid,
    .player-report-main-grid {
        width: min(1760px, 100%);
        margin-inline: auto;
        display: grid;
        gap: 12px;
    }

    .player-report-context {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-bottom: 22px;
    }

    .player-report-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-bottom: 18px;
    }

    .player-report-main-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    }

    .player-scope-panel {
        display: grid;
        gap: 14px;
        padding: clamp(14px, 2vw, 18px);
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .player-scope-head {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: flex-start;
    }

    .player-scope-tabs {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
    }

    .player-scope-tabs button {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 0 12px;
        border: 1px solid rgba(120, 169, 184, .22);
        border-radius: 999px;
        background: rgba(3, 9, 11, .46);
        color: #d9eef5;
        font-size: .74rem;
        font-weight: 900;
        cursor: pointer;
    }

    .player-scope-tabs button:hover,
    .player-scope-tabs button:focus-visible {
        border-color: rgba(16, 200, 234, .56);
        background: rgba(16, 200, 234, .1);
        outline: none;
    }

    .player-scope-tabs button.is-active {
        border-color: var(--team-selection-border);
        background: var(--team-selection-gradient);
        color: var(--team-selection-text);
    }

    .player-scope-tools {
        display: grid;
        grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(170px, .8fr));
        gap: 10px;
    }

    .player-scope-field {
        display: grid;
        gap: 7px;
        min-width: 0;
        padding: 12px;
        border: 1px solid rgba(120, 169, 184, .14);
        border-radius: 12px;
        background: rgba(3, 12, 15, .48);
    }

    .player-scope-field.is-active {
        border-color: rgba(138, 242, 31, .32);
        background: rgba(138, 242, 31, .06);
    }

    .player-scope-field select,
    .player-scope-field input {
        min-height: 38px;
        width: 100%;
        border: 1px solid rgba(120, 169, 184, .18);
        border-radius: 8px;
        background: rgba(3, 9, 11, .72);
        color: #f4f7f8;
        padding: 0 10px;
        font-weight: 850;
        outline: none;
    }

    .player-scope-field select:disabled,
    .player-scope-field input:disabled {
        color: rgba(184, 206, 216, .52);
        cursor: not-allowed;
    }

    .player-scope-summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .player-scope-summary-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        min-width: 0;
        padding: 13px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(3, 12, 15, .48);
    }

    .player-expectation-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
        gap: 16px;
        align-items: start;
    }

    .player-expectation-panel {
        min-width: 0;
        padding: 16px;
        border: 1px solid rgba(130, 184, 207, .18);
        border-radius: 8px;
        background: rgba(4, 18, 24, .70);
        box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
    }

    .player-expectation-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }

    .player-expectation-card {
        min-width: 0;
        padding: 14px;
        border: 1px solid rgba(130, 184, 207, .14);
        border-radius: 8px;
        background: rgba(237, 247, 247, .04);
    }

    .player-expectation-card span,
    .player-expectation-table th {
        color: #8ca9b5;
        font-size: .72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .player-expectation-card strong {
        display: block;
        margin-top: 4px;
        color: #f8fdff;
        font-size: 1.18rem;
        font-weight: 950;
    }

    .player-expectation-card em {
        display: block;
        margin-top: 3px;
        color: #8ca9b5;
        font-style: normal;
        font-weight: 800;
    }

    .player-expectation-table-wrap {
        overflow: auto;
        border: 1px solid rgba(130, 184, 207, .1);
        border-radius: 8px;
    }

    .player-expectation-table {
        width: 100%;
        min-width: 500px;
        border-collapse: collapse;
    }

    .player-expectation-table th,
    .player-expectation-table td {
        padding: 11px 12px;
        border-bottom: 1px solid rgba(130, 184, 207, .1);
        text-align: left;
    }

    .player-expectation-table td {
        color: #d7e8ef;
        font-weight: 750;
    }

    .player-expectation-role-dot {
        display: inline-flex;
        width: 10px;
        height: 10px;
        margin-right: 8px;
        border-radius: 999px;
        vertical-align: middle;
        background: var(--role-color, #6db1b6);
    }

    .player-analysis-section,
    .player-report-section-card {
        width: min(1760px, 100%);
        margin: 28px auto 0;
    }

    .player-context-card,
    .player-kpi-card,
    .player-report-insight {
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .player-context-card {
        display: flex;
        gap: 12px;
        padding: 14px;
    }

    .player-context-icon {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #8af21f;
        border: 1px solid rgba(120, 169, 184, .2);
        background: rgba(3, 9, 11, .52);
        flex: 0 0 auto;
    }

    .player-context-card strong,
    .player-kpi-card strong,
    .player-report-insight strong {
        display: block;
        margin-top: 3px;
        color: #f8fdff;
        font-size: 1.18rem;
        font-weight: 950;
    }

    .player-context-card em,
    .player-kpi-card em,
    .player-report-insight em {
        display: block;
        margin-top: 4px;
        color: #8ca9b5;
        font-size: .82rem;
        font-style: normal;
    }

    

    .player-report-insight-list {
        display: grid;
        gap: 10px;
    }

    .player-report-insight {
        padding: 14px;
    }

    

    .player-report-native-card {
        margin-top: 18px;
    }

    .player-report-template-page .mud-card,
    .player-report-template-page .mud-paper:not(.mud-popover):not(.mud-menu-paper) {
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        color: #f5fbff;
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .player-report-template-page .mud-card-header {
        border-bottom: 1px solid rgba(130, 184, 207, .12);
    }

    .player-report-template-page .mud-typography-h6 {
        color: #f8fdff;
        font-weight: 950;
    }

    .player-report-template-page .mud-table-root,
    .player-report-template-page .mud-table,
    .player-report-template-page .mud-table-container {
        background: transparent;
        color: #e9f7fb;
    }

    .player-report-template-page .mud-table th,
    .player-report-template-page .mud-table td {
        border-color: rgba(130, 184, 207, .12);
        color: #e9f7fb;
    }

    .player-report-template-page .mud-table th {
        color: #91b7c7;
        font-size: .72rem;
        font-weight: 950;
        text-transform: uppercase;
    }

    .player-report-template-page .mud-tabs-toolbar,
    .player-report-template-page .mud-tabs-panels {
        background: transparent;
    }

    .player-report-template-page .mud-tab {
        color: #a9c2cc;
        min-height: 42px;
    }

    .player-report-template-page .mud-tab.mud-tab-active {
        color: #8af21f;
    }

    @media (max-width: 1180px) {
        .player-report-context,
        .player-report-kpi-grid,
        .player-report-main-grid,
        .player-expectation-grid,
        .player-scope-tools,
        .player-scope-summary-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 760px) {
        .player-analytics-container {
            padding: 18px 14px 36px;
        }

        .player-report-hero,
        .player-report-title,
        .player-scope-head,
        .player-report-actions {
            align-items: flex-start;
            flex-direction: column;
        }

        .player-report-hero {
            grid-template-columns: 1fr;
        }

        .player-report-title h1 {
            font-size: 2.35rem;
        }

        .player-report-context,
        .player-report-kpi-grid,
        .player-report-main-grid,
        .player-expectation-grid,
        .player-expectation-card-grid,
        .player-scope-tools,
        .player-scope-summary-grid {
            grid-template-columns: 1fr;
        }
    }

    .advanced-alert {
        border-left: 4px dashed var(--mud-palette-primary);
        background: rgba(var(--mud-palette-primary-rgb), 0.08);
        animation: pop-in 0.6s ease-out;
        position: relative;
    }

        .advanced-alert::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 12px;
            border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.15);
            pointer-events: none;
        }

        .advanced-alert .alert-icon {
            font-size: 2.2rem;
            animation: wiggle 1.6s ease-in-out infinite;
        }

    @keyframes pop-in {
        0% {
            transform: translateY(-6px);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes wiggle {
        0%, 100% {
            transform: rotate(-5deg) translateY(0);
        }

        50% {
            transform: rotate(5deg) translateY(-2px);
        }
    }

    .stat-card {
        border-left: 4px solid var(--mud-palette-primary);
        border-radius: 12px;
        min-height: 140px;
        display: flex;
        align-items: flex-start;
    }

    

    

        

            

            

    .legend-chip-set {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 6px 0;
    }

    .legend-chip {
        font-weight: 600;
        color: #fff;
        text-transform: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .legend-chip-dark-text {
        color: #0b0b0b;
    }

    .legend-chip-hidden {
        opacity: 0.35;
        filter: grayscale(0.3);
    }

    .legend-chip:hover {
        transform: translateY(-2px);
    }

    .session-view-chip-set {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .session-view-chip {
        font-weight: 600;
        opacity: 0.6;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

        .session-view-chip.active {
            opacity: 1;
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(25, 118, 210, 0.28);
        }

    .bubble-fullscreen-button {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 5;
        backdrop-filter: blur(6px);
        background: rgba(9, 17, 29, 0.45);
        border-radius: 999px;
        transition: background 0.2s ease, transform 0.2s ease;
    }

        .bubble-fullscreen-button:hover {
            background: rgba(25, 118, 210, 0.55);
            color: #fff;
            transform: scale(1.04);
        }

    .bubble-chart-container:fullscreen,
    .bubble-chart-container:-webkit-full-screen {
        background: rgba(6, 12, 20, 0.95);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
    }

        .bubble-chart-container:fullscreen .bubble-chart,
        .bubble-chart-container:-webkit-full-screen .bubble-chart {
            width: 100vw;
            height: 100vh;
            max-width: 100%;
            max-height: 100%;
        }

    

    

    

    .session-area-card {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 12px;
        height: 100%;
    }

        .session-area-card .mud-chart {
            min-height: 260px;
        }

    .bubble-chart .bubble.dataset-0,
    .bubble-color.dataset-0,
    .legend-chip.dataset-0 {
        background: linear-gradient(135deg, rgba(25, 118, 210, 0.9), rgba(25, 118, 210, 0.55));
        box-shadow: 0 8px 20px rgba(25, 118, 210, 0.25);
    }

    .bubble-chart .bubble.dataset-1,
    .bubble-color.dataset-1,
    .legend-chip.dataset-1 {
        background: linear-gradient(135deg, rgba(67, 160, 71, 0.9), rgba(67, 160, 71, 0.55));
        box-shadow: 0 8px 20px rgba(67, 160, 71, 0.25);
    }

    .bubble-chart .bubble.dataset-2,
    .bubble-color.dataset-2,
    .legend-chip.dataset-2 {
        background: linear-gradient(135deg, rgba(245, 124, 0, 0.9), rgba(245, 124, 0, 0.55));
        box-shadow: 0 8px 20px rgba(245, 124, 0, 0.25);
    }

    .bubble-chart .bubble.dataset-3,
    .bubble-color.dataset-3,
    .legend-chip.dataset-3 {
        background: linear-gradient(135deg, rgba(211, 47, 47, 0.9), rgba(211, 47, 47, 0.55));
        box-shadow: 0 8px 20px rgba(211, 47, 47, 0.25);
    }

    .bubble-chart .bubble.dataset-4,
    .bubble-color.dataset-4,
    .legend-chip.dataset-4 {
        background: linear-gradient(135deg, rgba(123, 31, 162, 0.9), rgba(123, 31, 162, 0.55));
        box-shadow: 0 8px 20px rgba(123, 31, 162, 0.25);
    }

    .bubble-chart .bubble.dataset-5,
    .bubble-color.dataset-5,
    .legend-chip.dataset-5 {
        background: linear-gradient(135deg, rgba(0, 137, 123, 0.9), rgba(0, 137, 123, 0.55));
        box-shadow: 0 8px 20px rgba(0, 137, 123, 0.25);
    }

    .bubble-chart .bubble.dataset-6,
    .bubble-color.dataset-6,
    .legend-chip.dataset-6 {
        background: linear-gradient(135deg, rgba(255, 202, 40, 0.95), rgba(255, 202, 40, 0.55));
        box-shadow: 0 8px 20px rgba(255, 202, 40, 0.3);
        color: #0b0b0b;
    }

    .bubble-chart .bubble.dataset-7,
    .bubble-color.dataset-7,
    .legend-chip.dataset-7 {
        background: linear-gradient(135deg, rgba(236, 64, 122, 0.9), rgba(236, 64, 122, 0.55));
        box-shadow: 0 8px 20px rgba(236, 64, 122, 0.25);
    }

    .bubble-chart .bubble.dataset-8,
    .bubble-color.dataset-8,
    .legend-chip.dataset-8 {
        background: linear-gradient(135deg, rgba(94, 53, 177, 0.9), rgba(94, 53, 177, 0.55));
        box-shadow: 0 8px 20px rgba(94, 53, 177, 0.25);
    }

    .bubble-chart .bubble.dataset-9,
    .bubble-color.dataset-9,
    .legend-chip.dataset-9 {
        background: linear-gradient(135deg, rgba(0, 131, 143, 0.9), rgba(0, 131, 143, 0.55));
        box-shadow: 0 8px 20px rgba(0, 131, 143, 0.25);
    }

    .bubble-chart .bubble.dataset-10,
    .bubble-color.dataset-10,
    .legend-chip.dataset-10 {
        background: linear-gradient(135deg, rgba(192, 202, 51, 0.95), rgba(192, 202, 51, 0.55));
        box-shadow: 0 8px 20px rgba(192, 202, 51, 0.25);
        color: #0b0b0b;
    }

    .bubble-chart .bubble.dataset-11,
    .bubble-color.dataset-11,
    .legend-chip.dataset-11 {
        background: linear-gradient(135deg, rgba(239, 83, 80, 0.9), rgba(239, 83, 80, 0.55));
        box-shadow: 0 8px 20px rgba(239, 83, 80, 0.25);
    }

    .bubble-chart .bubble.dataset-12,
    .bubble-color.dataset-12,
    .legend-chip.dataset-12 {
        background: linear-gradient(135deg, rgba(38, 166, 154, 0.9), rgba(38, 166, 154, 0.55));
        box-shadow: 0 8px 20px rgba(38, 166, 154, 0.25);
    }

    .bubble-chart .bubble.dataset-13,
    .bubble-color.dataset-13,
    .legend-chip.dataset-13 {
        background: linear-gradient(135deg, rgba(255, 112, 67, 0.9), rgba(255, 112, 67, 0.55));
        box-shadow: 0 8px 20px rgba(255, 112, 67, 0.25);
    }

    .bubble-chart .bubble.dataset-14,
    .bubble-color.dataset-14,
    .legend-chip.dataset-14 {
        background: linear-gradient(135deg, rgba(156, 204, 101, 0.9), rgba(156, 204, 101, 0.55));
        box-shadow: 0 8px 20px rgba(156, 204, 101, 0.25);
        color: #0b0b0b;
    }

    .bubble-chart .bubble.dataset-15,
    .bubble-color.dataset-15,
    .legend-chip.dataset-15 {
        background: linear-gradient(135deg, rgba(171, 71, 188, 0.9), rgba(171, 71, 188, 0.55));
        box-shadow: 0 8px 20px rgba(171, 71, 188, 0.25);
    }

    .bubble-chart .bubble.dataset-16,
    .bubble-color.dataset-16,
    .legend-chip.dataset-16 {
        background: linear-gradient(135deg, rgba(41, 182, 246, 0.9), rgba(41, 182, 246, 0.55));
        box-shadow: 0 8px 20px rgba(41, 182, 246, 0.25);
    }

    .bubble-chart .bubble.dataset-17,
    .bubble-color.dataset-17,
    .legend-chip.dataset-17 {
        background: linear-gradient(135deg, rgba(141, 110, 99, 0.9), rgba(141, 110, 99, 0.55));
        box-shadow: 0 8px 20px rgba(141, 110, 99, 0.25);
    }

    .bubble-chart .bubble.dataset-18,
    .bubble-color.dataset-18,
    .legend-chip.dataset-18 {
        background: linear-gradient(135deg, rgba(255, 167, 38, 0.95), rgba(255, 167, 38, 0.55));
        box-shadow: 0 8px 20px rgba(255, 167, 38, 0.25);
        color: #0b0b0b;
    }

    .bubble-chart .bubble.dataset-19,
    .bubble-color.dataset-19,
    .legend-chip.dataset-19 {
        background: linear-gradient(135deg, rgba(38, 198, 218, 0.9), rgba(38, 198, 218, 0.55));
        box-shadow: 0 8px 20px rgba(38, 198, 218, 0.25);
    }

    .radar-chart-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px 0;
        min-height: 420px;
    }

        .radar-chart-container canvas {
            max-width: 100%;
        }

    

    


    

    

    /* === HEAT MAP === */
    

    

        

    

    

    

    

    

        

    

    /* Zone molto piccole */
    

    /* Zone medie */
    

    /* Zone grandi */
    

.player-profile-template-page {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        padding: 12px 0 42px !important;
        box-sizing: border-box;
        background: transparent !important;
        color: #f5fbff;
    }

    .player-analytics-container {
    margin-bottom: 32px;
    padding: clamp(16px, 2vw, 24px) clamp(14px, 2.4vw, 34px) 46px;
    background: radial-gradient(circle at 80% 4%, rgba(138, 242, 31, 0.08), transparent 30%), radial-gradient(circle at 18% 8%, rgba(16, 200, 234, 0.12), transparent 32%), linear-gradient(180deg, #061217 0%, #061014 48%, #040b0e 100%);
    color: #f5fbff;
}

    .player-profile-shell {
        width: min(100%, 1760px);
        margin: 0 auto;
        padding: 0;
    }

    .player-profile-hero,
    .player-profile-title,
    .player-profile-actions,
    .player-profile-meta {
        display: flex;
        align-items: center;
    }

    .player-profile-hero {
        justify-content: space-between;
        gap: 18px;
        padding: 0;
        margin-bottom: 16px;
    }

    .player-profile-title {
        gap: 16px;
        min-width: 0;
    }

    .player-profile-avatar {
        width: 86px;
        height: 86px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        overflow: hidden;
        border: 1px solid rgba(144, 218, 233, .42);
        background: linear-gradient(135deg, rgba(16, 200, 234, .18), rgba(138, 242, 31, .16));
        box-shadow: 0 16px 38px rgba(0, 0, 0, .36);
    }

    .player-profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .player-profile-avatar span {
        color: #f8fff4;
        font-size: 2.25rem;
        font-weight: 950;
    }

    .player-profile-title span {
        color: #91b7c7;
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .player-profile-title h1 {
        margin: 2px 0 0;
        font-size: 3.15rem;
        line-height: .95;
        font-weight: 950;
    }

    .player-profile-title p {
        max-width: 760px;
        margin: 8px 0 0;
        color: #b8cad2;
    }

    .player-profile-meta,
    .player-profile-actions {
        gap: 10px;
        flex-wrap: wrap;
    }

    .player-profile-meta {
        margin-top: 12px;
    }

    .player-profile-meta em,
    .player-profile-actions .mud-icon-button {
        border: 1px solid rgba(130, 184, 207, .34);
        border-radius: 999px;
        background: rgba(5, 17, 22, .66);
        color: #f2fbff;
    }

    .player-profile-meta em {
        padding: 7px 11px;
        font-style: normal;
        font-size: .78rem;
        font-weight: 850;
    }

    .player-overview-layout,
    .player-kpi-grid,
    .player-fact-list {
        display: grid;
        gap: 16px;
    }

    .player-overview-layout {
        grid-template-columns: minmax(360px, .95fr) minmax(0, 1.45fr);
        align-items: start;
    }

    .player-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
        margin-top: 16px;
    }

    .player-overview-card,
    .player-kpi-card,
    .player-empty-panel {
        border: 1px solid rgba(130, 184, 207, .18);
        border-radius: 14px;
        background: rgba(4, 18, 24, .70);
        box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
    }

    .player-overview-card {
        padding: 20px;
    }

    .player-overview-card header,
    .player-overview-subhead,
    .player-kpi-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .player-overview-card header span,
    .player-overview-subhead span,
    .player-kpi-card-head span,
    .player-fact-row > span {
        color: #91b7c7;
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .player-overview-card header strong,
    .player-overview-subhead strong,
    .player-fact-row strong,
    .player-kpi-card strong {
        display: block;
        color: #f8fdff;
        font-weight: 950;
    }

    .player-overview-card header strong,
    .player-overview-subhead strong {
        margin-top: 3px;
        font-size: 1.08rem;
    }

    .player-overview-subhead em,
    .player-fact-row em,
    .player-kpi-card em {
        display: block;
        margin-top: 4px;
        color: #8ca9b5;
        font-size: .82rem;
        font-style: normal;
    }

    .player-overview-subhead {
        min-height: 54px;
    }

    .player-overview-subhead em {
        margin-top: 0;
        text-align: right;
    }

    .player-fact-list {
        gap: 0;
        margin-top: 14px;
    }

    .player-fact-row {
        display: grid;
        grid-template-columns: minmax(128px, .48fr) minmax(0, 1fr);
        gap: 14px;
        padding: 12px 0;
        border-top: 1px solid rgba(120, 169, 184, .13);
    }

    .player-fact-row:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .player-fact-row:last-child {
        padding-bottom: 0;
    }

    .player-fact-row strong,
    .player-fact-row em {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .player-fact-row strong {
        font-size: .95rem;
    }

    .player-kpi-card {
    min-height: 118px;
    padding: 16px;
    box-shadow: none;
    background: radial-gradient(circle at 16% 0%, rgba(119, 238, 255, .08), transparent 38%), rgba(4, 18, 24, .70);
}

    .player-kpi-card-head .mud-icon-root {
        color: #8af21f;
    }

    .player-kpi-card strong {
        margin-top: 14px;
        font-size: 1.18rem;
    }

    .player-analysis-section {
        margin-top: 28px;
    }

    .player-native-table-wrap {
        overflow-x: auto;
    }

    .player-native-table tr {
        cursor: default;
    }

    .player-native-table tbody tr[onclick],
    .player-native-table tbody tr[blazor\:onclick] {
        cursor: pointer;
    }

    .player-comparison-frame,
    .player-notes-frame {
        border-radius: 14px;
        overflow: visible;
    }

    .player-session-strip-panel {
        padding: 16px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background:
            radial-gradient(circle at 18% 0%, rgba(119, 238, 255, .08), transparent 34%),
            rgba(4, 14, 18, .58);
        box-shadow: inset 0 1px 0 rgba(245, 251, 255, .04), 0 18px 42px rgba(0, 0, 0, .18);
    }

    .player-session-strip-tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 14px;
    }

    .player-session-strip-tools > div:first-child {
        min-width: 0;
    }

    .player-session-strip-tools span {
        display: block;
        color: #9dd1e4;
        font-size: .68rem;
        font-weight: 950;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .player-session-strip-tools strong {
        display: block;
        margin-top: 3px;
        color: #f5fbff;
        font-size: 1rem;
        font-weight: 950;
    }

    .player-session-strip-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
    }

    .player-session-scroll-button {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(125, 178, 198, .28);
        border-radius: 999px;
        background: rgba(5, 17, 22, .74);
        color: #f5fbff;
        cursor: pointer;
        transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .player-session-scroll-button:hover,
    .player-session-scroll-button:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(119, 238, 255, .62);
        background: rgba(10, 39, 47, .82);
        outline: none;
    }

    .player-session-strip-viewport {
        position: relative;
        overflow: hidden;
    }

    .player-session-strip-viewport::before,
    .player-session-strip-viewport::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 10px;
        z-index: 2;
        width: 34px;
        pointer-events: none;
    }

    .player-session-strip-viewport::before {
        left: 0;
        background: linear-gradient(90deg, rgba(4, 14, 18, .94), transparent);
    }

    .player-session-strip-viewport::after {
        right: 0;
        background: linear-gradient(270deg, rgba(4, 14, 18, .94), transparent);
    }

    .player-session-card-list {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1px 2px 12px;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .player-session-card-list::-webkit-scrollbar {
        display: none;
    }

    

    .player-session-card-modern {
    font: inherit;
    color: inherit;
    position: relative;
    isolation: isolate;
    flex: 0 0 clamp(278px, 26vw, 352px);
    min-height: 172px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px;
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid color-mix(in srgb, var(--profile-accent) 46%, rgba(120, 169, 184, .2));
    border-radius: 14px;
    background: radial-gradient(circle at var(--profile-flow-x, 18%) -14%, color-mix(in srgb, var(--profile-accent) 28%, transparent), transparent 42%), linear-gradient(135deg, color-mix(in srgb, var(--profile-accent) 20%, rgba(3, 13, 18, .92)) 0%, rgba(3, 10, 14, .91) 50%, color-mix(in srgb, var(--profile-accent) 12%, rgba(1, 6, 10, .96)) 100%);
    box-shadow: inset 0 1px 0 rgba(245, 251, 255, .045), 0 12px 28px rgba(0, 0, 0, .22);
    text-align: left;
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

    .player-session-card-modern:hover,
    .player-session-card-modern:focus-visible {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--profile-accent) 82%, white 8%);
        box-shadow: inset 0 1px 0 rgba(245, 251, 255, .055), 0 18px 42px color-mix(in srgb, var(--profile-accent) 13%, rgba(0, 0, 0, .34));
        outline: none;
    }

    .player-session-card-glow {
        position: absolute;
        inset: -34px auto auto var(--profile-flow-x, 18%);
        z-index: -1;
        width: 120px;
        height: 120px;
        border-radius: 999px;
        background: radial-gradient(circle, color-mix(in srgb, var(--profile-accent) 28%, transparent), transparent 68%);
        opacity: .74;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .player-session-card-top,
    .player-session-card-stats,
    .player-session-card-footer,
    .player-session-card-modern > strong {
        position: relative;
        z-index: 1;
        min-width: 0;
    }

    .player-session-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .player-session-card-top span,
    .player-session-card-top em {
        min-height: 26px;
        display: inline-flex;
        align-items: center;
        padding: 3px 9px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--profile-accent) 18%, rgba(3, 9, 11, .72));
        color: #f5fbff;
        font-size: .68rem;
        line-height: 1;
        font-style: normal;
        font-weight: 950;
        white-space: nowrap;
    }

    .player-session-card-top em {
        border: 1px solid rgba(125, 178, 198, .18);
        background: rgba(2, 10, 13, .48);
        color: #9dd1e4;
    }

    .player-session-card-modern > strong {
        display: block;
        margin-top: 12px;
        overflow: hidden;
        color: #f5fbff;
        font-size: 1rem;
        line-height: 1.16;
        font-weight: 950;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .player-session-card-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-top: 12px;
    }

    .player-session-card-stats span {
        min-width: 0;
        padding: 8px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 10px;
        background: rgba(3, 9, 11, .52);
    }

    .player-session-card-stats small,
    .player-session-card-stats b {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .player-session-card-stats small {
        color: #91b7c7;
        font-size: .58rem;
        font-weight: 850;
    }

    .player-session-card-stats b {
        margin-top: 4px;
        color: #f5fbff;
        font-size: .72rem;
        font-weight: 950;
    }

    .player-session-card-footer {
        display: flex;
        margin-top: 11px;
    }

    .player-session-card-footer span {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 10px;
        border: 1px solid color-mix(in srgb, var(--profile-accent, #77eeff) 42%, rgba(120, 169, 184, .18));
        border-radius: 999px;
        background: linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #77eeff) 18%, rgba(3, 9, 11, .78)), rgba(3, 9, 11, .60));
        color: #f5fbff;
        font-size: .7rem;
        font-weight: 950;
        white-space: nowrap;
    }

    .player-empty-panel {
        min-height: 230px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 10px;
        padding: 28px;
        text-align: center;
        color: #bdd4dd;
    }

    .player-empty-panel.is-large {
        min-height: 520px;
    }

    .player-empty-panel .mud-icon-root {
        color: #78dce8;
        font-size: 3rem;
    }

    .player-empty-panel strong {
        color: #fff;
        font-size: 1.35rem;
        font-weight: 950;
    }

    .player-profile-detail-page .player-detail-shell {
        gap: 12px;
    }

    .player-profile-detail-page .player-analysis-section {
        margin-top: 16px;
        gap: 16px;
    }

    .player-profile-detail-page .position-cloud-section-head {
        margin-bottom: 2px;
    }

    .player-profile-detail-page .player-profile-detail-avatar {
        width: 74px;
        height: 74px;
        border-radius: 18px;
    }

    .player-profile-detail-page .player-profile-detail-avatar span {
        font-size: 1.45rem;
    }

    .player-profile-table-card,
    .player-performance-table-card {
        min-width: 0;
    }

    .player-performance-table-card {
        --metric-color: #10c8ea;
        background:
            linear-gradient(120deg, rgba(16, 200, 234, .10), rgba(116, 243, 62, .045) 46%, rgba(255, 122, 89, .04)),
            rgba(2, 8, 10, .58);
    }

    .player-profile-table-wrap {
        max-height: none;
    }

    .player-profile-info-table {
        min-width: 720px;
    }

    .player-profile-info-table td:nth-child(2),
    .player-profile-info-table td:nth-child(3) {
        color: #f5fbff;
        font-weight: 850;
    }

    .player-performance-table-wrap {
        max-height: none;
        border: 1px solid rgba(120, 169, 184, .12);
        border-radius: 12px;
        background:
            linear-gradient(115deg, rgba(16, 200, 234, .08), rgba(116, 243, 62, .035) 52%, rgba(255, 122, 89, .035)),
            rgba(1, 7, 9, .46);
    }

    .player-performance-trend-table {
        min-width: 1040px;
        border-collapse: separate;
        border-spacing: 0;
    }

    .player-performance-trend-table th {
        text-align: center;
        vertical-align: middle;
        background: rgba(2, 12, 14, .88);
    }

    .player-performance-trend-table th:first-child,
    .player-performance-trend-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        min-width: 210px;
        text-align: left;
        background: rgba(5, 19, 24, .97);
    }

    .player-performance-trend-table td {
        text-align: center;
        background: rgba(2, 10, 12, .18);
    }

    .player-performance-trend-table .player-performance-session-head,
    .player-performance-trend-table .player-performance-session-start {
        border-left: 1px solid rgba(120, 169, 184, .24);
    }

    .player-performance-trend-table .player-performance-session-head {
        color: #b7dce8;
        box-shadow: inset 1px 0 0 rgba(119, 238, 255, .05);
    }

    .player-performance-value-cell {
        color: #f8fdff;
        font-weight: 950;
    }

    .player-performance-delta-cell {
        background: rgba(1, 7, 9, .20);
    }

    .player-performance-data-row {
        cursor: pointer;
    }

    .player-performance-data-row:hover td,
    .player-performance-data-row.is-expanded td {
        background: rgba(119, 238, 255, .055);
    }

    .player-performance-data-row:hover td:first-child,
    .player-performance-data-row.is-expanded td:first-child {
        background: rgba(5, 19, 24, .98);
    }

    .player-performance-data-row td:first-child strong,
    .player-performance-data-row td:first-child em {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .player-performance-data-row td:first-child strong {
        color: #f8fdff;
        font-size: .92rem;
        font-weight: 950;
    }

    .player-performance-data-row td:first-child em {
        margin-top: 3px;
        color: #91b7c7;
        font-size: .7rem;
        font-style: normal;
        font-weight: 800;
    }

    .player-performance-delta {
        min-width: 62px;
        min-height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        border: 1px solid rgba(120, 169, 184, .18);
        border-radius: 999px;
        background: rgba(3, 9, 11, .46);
        color: #b8ced8;
        font-size: .68rem;
        font-weight: 950;
        white-space: nowrap;
    }

    .player-performance-delta.is-up {
        border-color: rgba(116, 243, 62, .34);
        background: rgba(116, 243, 62, .09);
        color: #b7ff92;
    }

    .player-performance-delta.is-down {
        border-color: rgba(255, 122, 89, .36);
        background: rgba(255, 122, 89, .10);
        color: #ffb28e;
    }

    .player-performance-expanded-row td {
        padding: 0;
        background: rgba(2, 8, 10, .62);
    }

    .player-performance-expanded-content {
        display: grid;
        gap: 12px;
        padding: 16px;
    }

    .player-performance-sparkline {
        position: relative;
        height: 178px;
        border: 1px solid rgba(120, 169, 184, .13);
        border-radius: 12px;
        background:
            linear-gradient(180deg, rgba(3, 13, 16, .58), rgba(2, 8, 11, .74)),
            repeating-linear-gradient(0deg, transparent 0, transparent 42px, rgba(120, 169, 184, .06) 43px);
        overflow: hidden;
    }

    .player-performance-sparkline svg {
        position: absolute;
        inset: 12px;
        width: calc(100% - 24px);
        height: calc(100% - 24px);
    }

    .player-performance-sparkline polyline {
        fill: none;
        stroke: #77eeff;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 0 8px rgba(119, 238, 255, .34));
    }

    .player-performance-sparkline span {
        position: absolute;
        width: 12px;
        height: 12px;
        transform: translate(-50%, -50%);
        border: 2px solid #031014;
        border-radius: 999px;
        background: #8af21f;
        box-shadow: 0 0 16px rgba(138, 242, 31, .36);
    }

    .player-performance-sparkline-labels {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
    }

    .player-performance-sparkline-labels span {
        min-width: 0;
        padding: 9px 10px;
        border: 1px solid rgba(120, 169, 184, .14);
        border-radius: 10px;
        background: rgba(3, 9, 11, .42);
    }

    .player-performance-sparkline-labels small,
    .player-performance-sparkline-labels strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .player-performance-sparkline-labels small {
        color: #91b7c7;
        font-size: .66rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .player-performance-sparkline-labels strong {
        margin-top: 4px;
        color: #f4f7f8;
        font-size: .82rem;
        font-weight: 950;
    }

    .player-session-air-section {
        display: grid;
        gap: 14px;
        padding: 4px 0 0;
    }

    .player-session-air-section .player-session-strip-tools {
        margin-bottom: 0;
    }

    @media (max-width: 1180px) {
        .player-overview-layout {
            grid-template-columns: 1fr;
        }

        .player-kpi-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 760px) {
        .player-profile-template-page {
            padding: 18px 0 32px !important;
        }

        .player-profile-shell {
            padding: 0;
        }

        .player-profile-hero,
        .player-profile-title {
            align-items: flex-start;
            flex-direction: column;
        }

        .player-profile-title h1 {
            font-size: 2.25rem;
        }

        .player-kpi-grid {
            grid-template-columns: 1fr;
        }

        .player-overview-subhead {
            align-items: flex-start;
            flex-direction: column;
            min-height: 0;
        }

        .player-overview-subhead em {
            text-align: left;
        }

        .player-fact-row {
            grid-template-columns: 1fr;
            gap: 5px;
        }

        .player-session-strip-tools {
            align-items: flex-start;
            flex-direction: column;
        }

        .player-session-strip-actions {
            align-self: flex-end;
        }

        .player-session-card-modern {
            flex-basis: min(84vw, 318px);
        }
    }

.roster-page {
        color: #edf7f7;
    }

    .roster-hero,
    .roster-tabs,
    .roster-panel {
        border: 1px solid rgba(109, 177, 182, 0.18);
        border-radius: 8px;
        background: rgba(9, 18, 26, 0.78);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(14px);
    }

    .roster-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        padding: 28px;
        margin-bottom: 16px;
    }

    .roster-hero span,
    .roster-panel header span,
    .roster-form-grid label,
    .roster-form-stack label,
    .roster-slot-tools label {
        display: block;
        color: rgba(237, 247, 247, 0.64);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .roster-hero h1 {
        margin: 6px 0;
        font-size: clamp(2rem, 4vw, 4.5rem);
        line-height: 0.95;
        font-weight: 900;
    }

    .roster-hero p,
    .roster-list em,
    .roster-empty {
        color: rgba(237, 247, 247, 0.66);
        font-style: normal;
    }

    .roster-actions,
    .roster-header-actions,
    .roster-panel header,
    .roster-slot-tools,
    .roster-painter-toolbar,
    .roster-painter-tabs {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .roster-pill,
    .roster-panel header button,
    .roster-slot-tools button,
    .roster-painter-toolbar button,
    .roster-tabs button,
    .roster-painter-tabs button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        border: 1px solid rgba(237, 247, 247, 0.16);
        border-radius: 999px;
        background: rgba(237, 247, 247, 0.06);
        color: #edf7f7;
        padding: 0 14px;
        font-weight: 800;
    }

    .roster-pill.is-primary,
    .roster-tabs button.is-active,
    .roster-painter-toolbar button.is-active,
    .roster-painter-tabs button.is-active {
        background: #6db1b6;
        color: #081319;
        border-color: #6db1b6;
    }

    .roster-panel header button.is-danger {
        color: #ffd9d9;
        border-color: rgba(255, 136, 136, 0.38);
        background: rgba(255, 105, 105, 0.12);
    }

    .roster-tabs {
        display: flex;
        gap: 8px;
        padding: 10px;
        margin-bottom: 16px;
    }

    .roster-grid {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr) 360px;
        gap: 14px;
        align-items: start;
    }

    .roster-grid.is-roles {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .roster-panel {
        padding: 18px;
        min-width: 0;
    }

    .roster-panel header {
        justify-content: space-between;
        margin-bottom: 14px;
    }

    .roster-list {
        display: grid;
        gap: 8px;
        max-height: 640px;
        overflow: auto;
    }

    .roster-list button {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px 10px;
        width: 100%;
        border: 1px solid rgba(237, 247, 247, 0.08);
        border-radius: 8px;
        background: rgba(237, 247, 247, 0.04);
        color: #edf7f7;
        padding: 12px;
        text-align: left;
    }

    .roster-list button.is-active {
        border-color: rgba(109, 177, 182, 0.7);
        background: rgba(109, 177, 182, 0.14);
    }

    .roster-list i {
        width: 12px;
        height: 12px;
        border-radius: 999px;
        margin-top: 4px;
    }

    .roster-list span,
    .roster-list em {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .roster-list em {
        grid-column: 2;
        font-size: 0.78rem;
    }

    .roster-form-grid,
    .roster-form-stack {
        display: grid;
        gap: 12px;
    }

    .roster-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 18px;
    }

    .roster-form-grid .is-wide {
        grid-column: 1 / -1;
    }

    .roster-form-grid input,
    .roster-form-grid select,
    .roster-form-grid textarea,
    .roster-form-stack input,
    .roster-form-stack select,
    .roster-form-stack textarea,
    .roster-slot-tools select {
        width: 100%;
        margin-top: 6px;
        border: 1px solid rgba(237, 247, 247, 0.12);
        border-radius: 8px;
        background: rgba(3, 10, 14, 0.78);
        color: #edf7f7;
        padding: 10px 12px;
        outline: none;
    }

    .roster-workbench {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 14px;
        align-items: start;
    }

    .roster-field {
        position: relative;
        min-height: 520px;
        overflow: hidden;
        border: 1px solid rgba(237, 247, 247, 0.14);
        border-radius: 8px;
        background:
            linear-gradient(90deg, transparent 49.8%, rgba(237, 247, 247, 0.18) 50%, transparent 50.2%),
            radial-gradient(circle at 50% 50%, transparent 0 78px, rgba(237, 247, 247, 0.16) 80px 81px, transparent 83px),
            linear-gradient(180deg, rgba(84, 214, 146, 0.18), rgba(4, 45, 39, 0.84));
    }

    .roster-field-lines::before,
    .roster-field-lines::after {
        content: "";
        position: absolute;
        left: 28%;
        right: 28%;
        height: 90px;
        border: 1px solid rgba(237, 247, 247, 0.16);
    }

    .roster-field-lines::before {
        top: -1px;
        border-top: 0;
    }

    .roster-field-lines::after {
        bottom: -1px;
        border-bottom: 0;
    }

    .roster-field-heat {
        position: absolute;
        width: 8.333%;
        height: 12.5%;
        border-radius: 8px;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .roster-slot-dot {
        position: absolute;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        transform: translate(-50%, -50%);
        border: 2px solid rgba(255, 255, 255, 0.82);
        border-radius: 999px;
        background: rgba(8, 19, 25, 0.86);
        color: #fff;
        font-size: 0.74rem;
        font-weight: 900;
        z-index: 3;
    }

    .roster-slot-dot.is-active {
        box-shadow: 0 0 0 5px rgba(109, 177, 182, 0.24);
        background: #6db1b6;
        color: #081319;
    }

    .roster-slot-tools {
        align-content: start;
    }

    .roster-empty {
        display: grid;
        place-items: center;
        min-height: 220px;
        text-align: center;
    }

    .roster-painter {
        margin-top: 12px;
    }

    .roster-painter-toolbar {
        margin-bottom: 10px;
    }

    .roster-heatmap-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 3px;
        padding: 10px;
        border: 1px solid rgba(237, 247, 247, 0.1);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(84, 214, 146, 0.12), rgba(5, 33, 32, 0.7));
        user-select: none;
    }

    .roster-heatmap-cell {
        aspect-ratio: 1;
        border: 1px solid rgba(237, 247, 247, 0.05);
        border-radius: 4px;
        background: rgba(237, 247, 247, 0.04);
        cursor: crosshair;
    }

    .roster-heatmap-cell:hover {
        outline: 2px solid rgba(237, 247, 247, 0.3);
    }

    @media (max-width: 1200px) {
        .roster-grid,
        .roster-grid.is-roles,
        .roster-workbench {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 760px) {
        .roster-hero,
        .roster-form-grid {
            grid-template-columns: 1fr;
            display: grid;
        }

        .roster-field {
            min-height: 420px;
        }
    }

.heatmapContainerWrapper { position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; }
      .heatmapContainer { width:100%; height:100%; position:absolute!important; inset:0; }
      .map-mode-controls { flex-wrap: wrap; }
      .map-mode-button-group .mud-button-root { height: 40px; }
      .map-mode-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
      .map-mode-select .mud-input { --mud-field-input-height: 20px; padding-bottom:0px }
      .map-mode-select .mud-input-slot { min-height: 20px; padding-bottom:0px }
      .time-controls-row { flex-wrap: wrap; gap: 12px; }
      .time-controls-row .time-slider { flex: 1 1 320px; max-width: 480px; }
      .time-controls-row .mud-button-group { white-space: nowrap; }
      .time-controls-row .speed-select { min-width: 120px; max-width: 160px }
      .session-doc-help-button {
          width: 32px;
          height: 32px;
          border: 1px solid rgba(16, 200, 234, .28);
          background: rgba(3, 10, 14, .68);
          color: #10c8ea;
          backdrop-filter: blur(10px);
      }
      .session-map-doc-button {
          position: absolute;
          top: 14px;
          right: 14px;
          z-index: 45;
      }
      .session-doc-section-row {
          display: flex;
          justify-content: flex-end;
          margin-bottom: 10px;
      }
      .team-full-page .session-expectation-section {
          display: grid;
          gap: 16px;
          padding: clamp(16px, 2vw, 22px);
          border: 1px solid rgba(120,169,184,.22);
          border-radius: 8px;
          background: rgba(9,18,26,.78);
          box-shadow: 0 18px 42px rgba(0,0,0,.22);
          color: #f4f7f8;
      }
      .team-full-page .session-expectation-tools {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          align-items: center;
      }
      .team-full-page .session-expectation-select {
          min-width: min(320px, 100%);
          border: 1px solid rgba(237,247,247,.14);
          border-radius: 8px;
          background: rgba(3,10,14,.78);
          color: #edf7f7;
          padding: 10px 12px;
          font-weight: 800;
          outline: none;
      }
      .team-full-page .session-expectation-grid {
          display: grid;
          grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
          gap: 16px;
          align-items: start;
      }
      .team-full-page .session-expectation-panel {
          min-width: 0;
          padding: 16px;
          border: 1px solid rgba(237,247,247,.1);
          border-radius: 8px;
          background: rgba(237,247,247,.04);
      }
      .team-full-page .session-expectation-card-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
          margin-bottom: 14px;
      }
      .team-full-page .session-expectation-card {
          min-width: 0;
          padding: 14px;
          border: 1px solid rgba(237,247,247,.1);
          border-radius: 8px;
          background: rgba(3,10,14,.44);
      }
      .team-full-page .session-expectation-card span,
      .team-full-page .session-expectation-table th {
          color: rgba(237,247,247,.58);
          font-size: .72rem;
          font-weight: 900;
          letter-spacing: 0;
          text-transform: uppercase;
      }
      .team-full-page .session-expectation-card strong {
          display: block;
          margin-top: 4px;
          color: #f4f7f8;
          font-size: 1.25rem;
          font-weight: 950;
      }
      .team-full-page .session-expectation-card em {
          display: block;
          margin-top: 2px;
          color: rgba(237,247,247,.66);
          font-style: normal;
          font-weight: 700;
      }
      .team-full-page .session-expectation-table-wrap {
          overflow: auto;
          border: 1px solid rgba(237,247,247,.08);
          border-radius: 8px;
      }
      .team-full-page .session-expectation-table {
          width: 100%;
          border-collapse: collapse;
          min-width: 480px;
      }
      .team-full-page .session-expectation-table th,
      .team-full-page .session-expectation-table td {
          padding: 11px 12px;
          border-bottom: 1px solid rgba(237,247,247,.08);
          text-align: left;
      }
      .team-full-page .session-expectation-table td {
          color: rgba(237,247,247,.82);
          font-weight: 750;
      }
      .team-full-page .session-expectation-role-dot {
          display: inline-flex;
          width: 10px;
          height: 10px;
          margin-right: 8px;
          border-radius: 999px;
          vertical-align: middle;
          background: var(--role-color, #6db1b6);
      }
      .team-full-page .track-map-legend {
    position: absolute;
    left: 14px;
    top: 14px;
    bottom: auto;
    z-index: 10;
    width: min(330px, calc(100% - 28px));
    max-height: min(310px, calc(100% - 28px));
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(120,169,184,.32);
    border-radius: 16px;
    background: rgba(8,22,27,.96);
    box-shadow: 0 18px 46px rgba(0,0,0,.46);
    backdrop-filter: blur(10px);
    color: #f4f7f8;
    pointer-events: auto;
    user-select: none;
    touch-action: none;
}
      .team-full-page .track-map-legend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #78a9b8;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: grab;
}
      .team-full-page .track-map-legend.is-dragging .track-map-legend-head { cursor:grabbing; }
      .team-full-page .track-map-legend-head strong {
    color: #f4f7f8;
    font-size: .82rem;
    text-transform: none;
}
      .team-full-page .track-map-scale {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 10px 0 12px;
    color: #78a9b8;
    font-size: .64rem;
    font-weight: 800;
}
      .team-full-page .track-map-scale i {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,#10c8ea,#8af21f,#f5c400,#ef4444,#8b5cf6);
    box-shadow: 0 0 18px rgba(16,200,234,.18);
}
      .team-full-page .track-map-player-list { display:grid; gap:8px; max-height:190px; overflow:auto; padding-right:2px; touch-action:auto; }
      .team-full-page .track-map-player-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) minmax(118px,auto);
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 7px 8px;
    border: 1px solid rgba(120,169,184,.18);
    border-radius: 12px;
    background: rgba(3,9,11,.42);
    color: #cfe3ea;
    font-size: .72rem;
    font-weight: 850;
}
      .team-full-page .track-map-player-dot { width:10px; height:10px; border-radius:999px; box-shadow:0 0 12px currentColor; }
      .team-full-page .track-map-player-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .team-full-page .track-map-player-live {
    display: grid;
    grid-template-columns: 50px minmax(58px,auto);
    align-items: end;
    justify-content: end;
    gap: 7px;
    min-width: 0;
}
      .team-full-page .track-map-player-gauge {
    --track-gauge-angle: -180deg;
    position: relative;
    width: 50px;
    height: 27px;
    overflow: hidden;
}
      .team-full-page .track-map-player-gauge-dial {
    position: absolute;
    left: 0;
    top: 1px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(from 270deg,#10c8ea 0deg,#8af21f 45deg,#f5c400 90deg,#ef4444 135deg,#8b5cf6 180deg,transparent 180deg);
    -webkit-mask: radial-gradient(circle at center,transparent 0 18px,#000 19px 24px,transparent 25px);
    mask: radial-gradient(circle at center,transparent 0 18px,#000 19px 24px,transparent 25px);
    opacity: .92;
}
      .team-full-page .track-map-player-gauge i {
    position: absolute;
    left: 25px;
    bottom: 1px;
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: #f4f7f8;
    box-shadow: 0 0 8px var(--track-player-color,#10c8ea);
    transform: rotate(var(--track-gauge-angle));
    transform-origin: 0 50%;
    transition: transform .2s ease-out;
}
      .team-full-page .track-map-player-gauge b {
    position: absolute;
    left: 21px;
    bottom: 0;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(3,9,11,.88);
    border-radius: 50%;
    background: var(--track-player-color,#10c8ea);
    box-shadow: 0 0 8px var(--track-player-color,#10c8ea);
}
      .team-full-page .track-map-player-readout {
    display: grid;
    justify-items: end;
    min-width: 0;
    line-height: 1.05;
}
      .team-full-page .track-map-player-readout > span {
    color: #78a9b8;
    font-size: .52rem;
    font-weight: 900;
    text-transform: uppercase;
}
      .team-full-page .track-map-player-readout strong {
    color: #f4f7f8;
    font-size: .72rem;
    font-weight: 900;
}
      .team-full-page .track-map-player-readout small {
    margin-top: 3px;
    color: rgba(207,227,234,.72);
    font-size: .54rem;
    font-weight: 800;
    white-space: nowrap;
}
      .team-full-page .cod-map-svg { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; z-index:9; overflow:visible; pointer-events:none; }
      .team-full-page .cod-angle-group { cursor:pointer; pointer-events:auto; }
      .team-full-page .cod-angle-group line, .team-full-page .cod-angle-group path { stroke-linecap:round; stroke-linejoin:round; vector-effect:none; }
      .team-full-page .cod-entry-line {
    stroke-dasharray: 1.2 1;
    filter: drop-shadow(0 0 3px rgba(0,0,0,.72));
}
      .team-full-page .cod-exit-line, .team-full-page .cod-angle-arc { filter:drop-shadow(0 0 5px currentColor); }
      .team-full-page .cod-angle-node {
    stroke: rgba(3,9,11,.84);
    stroke-width: .22;
    vector-effect: none;
    filter: drop-shadow(0 0 5px currentColor);
}
      .team-full-page .cod-angle-label div {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244, 247, 248, .46);
    border-radius: 999px;
    background: rgba(3, 9, 11, .84);
    color: var(--team-text);
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .38);
    font-size: 1.25px;
}
      .team-full-page .cod-angle-label.cod-cluster-label div {
    font-size: 1.15px;
    border-color: rgba(138,242,31,.72);
    background: linear-gradient(135deg,rgba(16,200,234,.92),rgba(138,242,31,.96));
    color: #041015;
    box-shadow: 0 0 14px rgba(138,242,31,.35),0 10px 22px rgba(0,0,0,.42);
}

      .bubble-chart-container {
          position: relative;
          width: 100%;
      }

      .bubble-chart {
    position: relative;
    min-height: 380px;
    height: 420px;
    background: linear-gradient(180deg, rgba(25, 118, 210, 0.12) 0%, rgba(25, 118, 210, 0.03) 100%);
    border-radius: 12px;
    padding: 24px 32px 40px 32px;
    overflow: hidden;
}

      .bubble-chart .bubble {
          position: absolute;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 0.75rem;
          font-weight: 600;
          background: rgba(25, 118, 210, 0.15);
          box-shadow: 0 8px 20px rgba(25, 118, 210, 0.15);
          transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
          padding: 6px;
          text-align: center;
      }

      .bubble-chart .bubble span {
          transform: none;
      }

      .bubble-chart .bubble:hover {
          transform: scale(1.06);
          z-index: 3;
          box-shadow: 0 12px 28px rgba(25, 118, 210, 0.25);
      }

      .bubble-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
}

      .bubble-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(21, 28, 38, 0.35);
}

      .bubble-color {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
}

      .bubble-chart .bubble.dataset-0,
      .bubble-color.dataset-0 { background: rgba(25, 118, 210, 0.8); }
      .bubble-chart .bubble.dataset-1,
      .bubble-color.dataset-1 { background: rgba(67, 160, 71, 0.8); }
      .bubble-chart .bubble.dataset-2,
      .bubble-color.dataset-2 { background: rgba(245, 124, 0, 0.8); }
      .bubble-chart .bubble.dataset-3,
      .bubble-color.dataset-3 { background: rgba(211, 47, 47, 0.8); }
      .bubble-chart .bubble.dataset-4,
      .bubble-color.dataset-4 { background: rgba(123, 31, 162, 0.8); }
      .bubble-chart .bubble.dataset-5,
      .bubble-color.dataset-5 { background: rgba(0, 137, 123, 0.8); }
      .bubble-chart .bubble.dataset-6,
      .bubble-color.dataset-6 { background: rgba(255, 202, 40, 0.85); color: #151c26; }
      .bubble-chart .bubble.dataset-7,
      .bubble-color.dataset-7 { background: rgba(236, 64, 122, 0.8); }
      .bubble-chart .bubble.dataset-8,
      .bubble-color.dataset-8 { background: rgba(94, 53, 177, 0.8); }
      .bubble-chart .bubble.dataset-9,
      .bubble-color.dataset-9 { background: rgba(0, 131, 143, 0.8); }
      .bubble-chart .bubble.dataset-10,
      .bubble-color.dataset-10 { background: rgba(192, 202, 51, 0.85); color: #151c26; }
      .bubble-chart .bubble.dataset-11,
      .bubble-color.dataset-11 { background: rgba(239, 83, 80, 0.8); }
      .bubble-chart .bubble.dataset-12,
      .bubble-color.dataset-12 { background: rgba(38, 166, 154, 0.8); }
      .bubble-chart .bubble.dataset-13,
      .bubble-color.dataset-13 { background: rgba(255, 112, 67, 0.8); }
      .bubble-chart .bubble.dataset-14,
      .bubble-color.dataset-14 { background: rgba(156, 204, 101, 0.85); color: #151c26; }
      .bubble-chart .bubble.dataset-15,
      .bubble-color.dataset-15 { background: rgba(171, 71, 188, 0.8); }
      .bubble-chart .bubble.dataset-16,
      .bubble-color.dataset-16 { background: rgba(41, 182, 246, 0.8); }
      .bubble-chart .bubble.dataset-17,
      .bubble-color.dataset-17 { background: rgba(141, 110, 99, 0.8); }
      .bubble-chart .bubble.dataset-18,
      .bubble-color.dataset-18 { background: rgba(255, 167, 38, 0.85); color: #151c26; }
      .bubble-chart .bubble.dataset-19,
      .bubble-color.dataset-19 { background: rgba(38, 198, 218, 0.8); }

      .minute-chart-grid {
          margin-top: 12px;
      }

      .minute-chart-card {
          background: rgba(21, 28, 38, 0.55);
          border-radius: 12px;
          padding: 16px;
          height: 100%;
          display: flex;
          flex-direction: column;
      }

      .minute-chart-card .chart-wrapper {
          flex: 1 1 auto;
          min-height: 200px;
      }

      .minute-chart-card .bubble-chart {
          min-height: 280px;
      }

      .session-chat-wrapper {
          margin-top: 24px;
          padding: 16px;
          height: 70vh;
          min-height: 480px;
          display: flex;
          flex-direction: column;
      }

      .session-chat-container {
          display: flex;
          gap: 16px;
          flex: 1 1 auto;
          min-height: 0;
      }

      .session-chat-container .chat-sidebar,
      .session-chat-container .chat-main {
          height: 100%;
      }

      .session-chat-container .chat-main {
          flex: 1 1 auto;
      }

      .session-chat-container .chat-main .chat-main-content,
      .session-chat-container .chat-main .chat-container {
          height: 100%;
      }

      .session-chat-container .chat-container {
          padding: 16px 24px 24px;
      }

      .session-chat-container .chatbot-card {
          height: 100%;
      }

      .segment-insight-grid {
    margin-top: 10px !important;
    margin-bottom: 18px;
}

      .segment-kpi-card,
      .segment-macro-card {
          height: 100%;
          border-radius: 12px;
      }

      .segment-kpi-card {
          padding: 16px;
      }

      .segment-kpi-value {
          font-size: 1.55rem;
          font-weight: 700;
          line-height: 1.15;
      }

      .segment-kpi-label {
          color: rgba(255,255,255,.72);
          font-size: .82rem;
      }

      .segment-macro-card {
          padding: 18px;
      }

      .segment-table-card {
          min-height: 100%;
      }

      .segment-table-card .mud-table-container {
          max-height: 360px;
      }

/* === FIELD CONTAINER === */
    

    


    

    

    /* === HEAT MAP === */
    .heat-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

    .heat-cell {
        position: absolute;
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        pointer-events: auto;
        cursor: pointer;
    }

        .heat-cell:hover {
    transform: scale(1.2);
    z-index: 10;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

    /* === PITCH MAP === */
    .pitch-grid {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }

    .pitch-zone {
        position: absolute;
        border: 2px solid rgba(255, 255, 255, 0.6);
        border-radius: 4px;
        transition: all 0.3s ease;
        pointer-events: auto;
        cursor: pointer;
        /* CENTRAGGIO PERFETTO */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* Evita overflow */
        overflow: hidden;
        /* Dimensioni minime per zone piccole */
        min-height: 15px;
        min-width: 30px;
    }

        .pitch-zone:hover {
            border-color: rgba(255, 215, 0, 1);
            z-index: 10;
        }

    .zone-label {
        color: white;
        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
        pointer-events: none;
        /* CENTRAGGIO TESTO */
        text-align: center !important;
        vertical-align: middle !important;
        /* Dimensioni responsive */
        font-size: clamp(0.4rem, 1vw, 0.8rem);
        line-height: 1.1;
        /* Evita che il testo esca dalla zona */
        max-width: 95%;
        max-height: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /* Padding minimo */
        padding: 1px 3px;
        /* Assicura che sia centrato */
        margin: 0 !important;
        /* Fallback per centraggio */
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Zone molto piccole */
    .pitch-zone[style*="width: 1%"] .zone-label,
    .pitch-zone[style*="width: 2%"] .zone-label,
    .pitch-zone[style*="width: 3%"] .zone-label {
        font-size: 0.3rem;
        padding: 0;
    }

    /* Zone medie */
    .pitch-zone[style*="width: 4%"] .zone-label,
    .pitch-zone[style*="width: 5%"] .zone-label,
    .pitch-zone[style*="width: 6%"] .zone-label {
        font-size: 0.5rem;
        padding: 1px;
    }

    /* Zone grandi */
    .pitch-zone[style*="width: 1"] .zone-label,
    .pitch-zone[style*="width: 2"] .zone-label {
        font-size: 0.7rem;
        padding: 2px 4px;
    }

    /* === PLAYER PATHS === */
    .player-paths {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

    .paths-svg {
        width: 100%;
        height: 100%;
    }

    /* === PLAYER NUMBERS === */
    .player-numbers {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 4;
        pointer-events: none;
    }

    .player-number {
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 0.7rem;
        transform: translate(-50%, -50%);
        border: 2px solid rgba(255, 255, 255, 0.8);
        animation: player-pulse 2s infinite;
    }

    @keyframes player-pulse {
        0%, 100% {
            transform: translate(-50%, -50%) scale(1);
        }

        50% {
            transform: translate(-50%, -50%) scale(1.1);
        }
    }

    /* === STATS CARDS === */
    .stats-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 12px;
}

        .stats-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
        }

    .player-detail-card {
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

        .player-detail-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

    /* === LEGEND === */
    .field-legend {
    padding: 1px;
}

    .legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

    .zone-stat {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

        .zone-stat:last-child {
            border-bottom: none;
        }

    /* === ANIMATIONS === */
    .pulse-animation {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
        }

        70% {
            box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
        }
    }

    /* === UTILITIES === */
    .font-weight-bold {
        font-weight: 600;
    }

    /* === RESPONSIVE === */
    @media (max-width: 1024px) {
        .field-container {
    height: 400px;
}

        .field-wrapper {
    height: 350px;
}

        .team-full-page .session-expectation-grid,
        .team-full-page .session-expectation-card-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .field-container {
    height: 350px;
}

        .field-wrapper {
    height: 300px;
}

        .player-number {
            width: 20px;
            height: 20px;
            font-size: 0.6rem;
        }
    }

    @media (max-width: 600px) {
        .field-container {
    height: 300px;
}

        .field-wrapper {
    height: 250px;
}
    }

.session-player-detail-page {
        color: #f4f7f8;
    }

    .session-player-detail-page .player-detail-shell {
        display: grid;
        gap: 18px;
    }

    .session-player-detail-page .player-detail-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        align-items: start;
        padding: clamp(16px, 2vw, 24px);
        border: 1px solid rgba(120, 169, 184, .2);
        border-radius: 18px;
        background:
            radial-gradient(circle at 10% 0%, rgba(16, 200, 234, .14), transparent 34%),
            linear-gradient(135deg, rgba(8, 25, 30, .92), rgba(4, 13, 16, .84));
        box-shadow: 0 20px 54px rgba(0, 0, 0, .22);
    }

    .session-player-detail-page .player-detail-title {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: center;
    }

    .session-player-detail-page .player-detail-back-button {
        flex: 0 0 auto;
    }

    .session-player-detail-page .player-number-badge {
        width: 66px;
        height: 66px;
        border: 1px solid rgba(138, 242, 31, .42);
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(138, 242, 31, .08);
        color: #f4f7f8;
        font-size: 1.45rem;
        font-weight: 950;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .session-player-detail-page .player-detail-title h1 {
        margin: 0;
        font-size: 3.6rem;
        line-height: .95;
        font-weight: 950;
        letter-spacing: 0;
    }

    .session-player-detail-page .player-detail-title p {
        margin: 8px 0 0;
        color: #91b7c7;
        font-weight: 800;
    }

    .session-player-detail-page .player-detail-actions,
    .session-player-detail-page .player-detail-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: flex-start;
    }

    .session-player-detail-page .player-detail-meta {
        margin-top: 14px;
    }

    .session-player-detail-page .player-detail-actions {
        margin-top: 12px;
    }

    .session-player-detail-page .player-kpi-grid,
    .session-player-detail-page .player-map-layout,
    .session-player-detail-page .player-context-strip,
    .session-player-detail-page .player-map-summary-grid,
    .session-player-detail-page .player-insight-grid,
    .session-player-detail-page .player-stats-stack {
        display: grid;
        gap: 14px;
    }

    .session-player-detail-page .player-kpi-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .session-player-detail-page .player-map-layout {
        grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
    }

    .session-player-detail-page .player-context-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .session-player-detail-page .player-map-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 14px;
    }

    .session-player-detail-page .player-insight-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .session-player-detail-page .player-panel,
    .session-player-detail-page .player-context-card,
    .session-player-detail-page .player-kpi-card,
    .session-player-detail-page .player-map-summary-card,
    .session-player-detail-page .player-section-nav,
    .session-player-detail-page .player-finding-card {
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .session-player-detail-page .player-section-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        padding: 8px;
    }

    .session-player-detail-page .player-section-nav a,
    .session-player-detail-page .player-map-mode-tabs button {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border: 1px solid rgba(120, 169, 184, .22);
        border-radius: 999px;
        background: rgba(3, 9, 11, .46);
        color: #d9eef5;
        font-size: .74rem;
        font-weight: 900;
        text-decoration: none;
        cursor: pointer;
    }

    .session-player-detail-page .player-section-nav a {
        padding: 0 12px;
    }

    .session-player-detail-page .player-section-nav a:hover,
    .session-player-detail-page .player-section-nav a:focus-visible,
    .session-player-detail-page .player-map-mode-tabs button:hover,
    .session-player-detail-page .player-map-mode-tabs button:focus-visible {
        border-color: rgba(16, 200, 234, .56);
        background: rgba(16, 200, 234, .1);
        outline: none;
    }

    .session-player-detail-page .player-map-mode-tabs button.is-active {
        border-color: var(--team-selection-border);
        background: var(--team-selection-gradient);
        color: var(--team-selection-text);
    }

    .session-player-detail-page .player-context-card,
    .session-player-detail-page .player-map-summary-card {
        min-width: 0;
        padding: 13px;
    }

    .session-player-detail-page .player-context-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }

    .session-player-detail-page .player-context-icon,
    .session-player-detail-page .player-map-summary-card > span {
        display: inline-grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(120, 169, 184, .2);
        border-radius: 50%;
        background: rgba(3, 9, 11, .52);
    }

    .session-player-detail-page .player-context-card small,
    .session-player-detail-page .player-context-card strong,
    .session-player-detail-page .player-context-card em,
    .session-player-detail-page .player-map-summary-card small,
    .session-player-detail-page .player-map-summary-card strong,
    .session-player-detail-page .player-map-summary-card em {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .session-player-detail-page .player-context-card small,
    .session-player-detail-page .player-map-summary-card small {
        color: #91b7c7;
        font-size: .66rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .session-player-detail-page .player-context-card strong,
    .session-player-detail-page .player-map-summary-card strong {
        margin-top: 4px;
        color: #f4f7f8;
        font-size: .98rem;
        font-weight: 950;
        line-height: 1.1;
    }

    .session-player-detail-page .player-context-card em,
    .session-player-detail-page .player-map-summary-card em {
        margin-top: 4px;
        color: #b8ced8;
        font-size: .72rem;
        font-style: normal;
        font-weight: 800;
        line-height: 1.25;
    }

    .session-player-detail-page .player-kpi-card,
    .session-player-detail-page .player-finding-card {
        padding: 14px;
        min-height: 112px;
    }

    .session-player-detail-page .player-kpi-card span,
    .session-player-detail-page .player-finding-card span,
    .session-player-detail-page .player-panel header span,
    .session-player-detail-page .movement-row span,
    .session-player-detail-page .zone-row span {
        display: block;
        color: #91b7c7;
        font-size: .72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .session-player-detail-page .player-kpi-card strong {
        display: block;
        margin-top: 8px;
        font-size: 1.35rem;
        line-height: 1.05;
        font-weight: 950;
    }

    .session-player-detail-page .player-kpi-card em,
    .session-player-detail-page .player-finding-card em {
        display: block;
        margin-top: 6px;
        color: #b8ced8;
        font-size: .78rem;
        font-style: normal;
        font-weight: 700;
    }

    .session-player-detail-page .player-panel {
        padding: 16px;
    }

    .session-player-detail-page .player-panel header {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 14px;
    }

    .session-player-detail-page .player-panel header strong {
        display: block;
        margin-top: 3px;
        font-size: 1.08rem;
        font-weight: 950;
    }

    .session-player-detail-page .player-panel header em {
        color: #91b7c7;
        font-style: normal;
        font-weight: 800;
    }

    .session-player-detail-page .player-field-card {
        min-height: 520px;
    }

    .session-player-detail-page .player-field {
        position: relative;
        aspect-ratio: 105 / 68;
        min-height: 430px;
        overflow: hidden;
        border: 1px solid rgba(120, 169, 184, .2);
        border-radius: 16px;
        background:
            radial-gradient(circle at 18% 18%, rgba(138, 242, 31, .12), transparent 30%),
            linear-gradient(135deg, rgba(3, 52, 43, .94), rgba(2, 25, 30, .95));
    }

    .session-player-detail-page .player-field .field-svg,
    .session-player-detail-page .player-field .player-track-svg,
    .session-player-detail-page .player-field .player-map-points {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .session-player-detail-page .player-field .field-svg {
        z-index: 1;
    }

    .session-player-detail-page .player-field .pitch-bg {
        fill: rgba(4, 72, 55, .48);
    }

    .session-player-detail-page .player-field .pitch-line {
        stroke: rgba(236, 255, 246, .42);
        stroke-width: .32;
    }

    .session-player-detail-page .player-field .pitch-dot {
        fill: rgba(236, 255, 246, .58);
    }

    .session-player-detail-page .player-track-svg {
        z-index: 3;
        overflow: visible;
        pointer-events: none;
    }

    .session-player-detail-page .player-track-line {
        stroke-linecap: round;
        filter: drop-shadow(0 0 5px rgba(16, 200, 234, .38));
    }

    .session-player-detail-page .player-map-points {
        z-index: 4;
        pointer-events: none;
    }

    .session-player-detail-page .player-map-point {
        position: absolute;
        width: var(--point-size);
        height: var(--point-size);
        margin-left: calc(var(--point-size) / -2);
        margin-top: calc(var(--point-size) / -2);
        border: 1px solid rgba(3, 9, 11, .74);
        border-radius: 999px;
        background: var(--point-color);
        opacity: var(--point-opacity);
        box-shadow: 0 0 18px var(--point-color);
    }

    .session-player-detail-page .player-map-point.is-cod {
        border-color: rgba(255, 255, 255, .72);
        background: #f5c400;
    }

    .session-player-detail-page .movement-list,
    .session-player-detail-page .zone-list {
        display: grid;
        gap: 10px;
    }

    .session-player-detail-page .movement-row,
    .session-player-detail-page .zone-row {
        display: grid;
        gap: 8px;
        padding: 10px;
        border: 1px solid rgba(120, 169, 184, .14);
        border-radius: 12px;
        background: rgba(3, 12, 15, .48);
    }

    .session-player-detail-page .movement-row header,
    .session-player-detail-page .zone-row header {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        margin: 0;
    }

    .session-player-detail-page .movement-row strong,
    .session-player-detail-page .zone-row strong {
        font-size: .95rem;
    }

    .session-player-detail-page .movement-bar,
    .session-player-detail-page .zone-bar {
        height: 8px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(120, 169, 184, .16);
    }

    .session-player-detail-page .movement-bar i,
    .session-player-detail-page .zone-bar i {
        display: block;
        height: 100%;
        width: var(--bar-width);
        background: var(--bar-color);
        box-shadow: 0 0 16px var(--bar-color);
    }

    .session-player-detail-page .player-chart-panel .mud-chart,
    .session-player-detail-page .player-chart-panel svg {
        max-height: 360px;
    }

    .session-player-detail-page .player-table-wrap {
        max-height: 380px;
        overflow: auto;
    }

    .session-player-detail-page .player-map-mode-tabs,
    .session-player-detail-page .player-metric-card-list,
    .session-player-detail-page .player-phase-grid,
    .session-player-detail-page .player-focus-grid {
        display: grid;
        gap: 10px;
    }

    .session-player-detail-page .player-map-mode-tabs {
        grid-template-columns: repeat(4, minmax(0, auto));
        justify-content: end;
    }

    .session-player-detail-page .player-map-mode-tabs button {
        padding: 0 11px;
    }

    .session-player-detail-page .player-analysis-section {
        display: grid;
        gap: 14px;
    }

    .session-player-detail-page .player-expectation-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
        gap: 14px;
        align-items: start;
    }

    .session-player-detail-page .player-expectation-panel {
        min-width: 0;
        padding: 16px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 8px;
        background: rgba(3, 12, 15, .52);
    }

    .session-player-detail-page .player-expectation-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }

    .session-player-detail-page .player-expectation-card {
        min-width: 0;
        padding: 14px;
        border: 1px solid rgba(120, 169, 184, .14);
        border-radius: 8px;
        background: rgba(237, 247, 247, .04);
    }

    .session-player-detail-page .player-expectation-card span,
    .session-player-detail-page .player-expectation-table th {
        color: #91b7c7;
        font-size: .7rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .session-player-detail-page .player-expectation-card strong {
        display: block;
        margin-top: 4px;
        color: #f4f7f8;
        font-size: 1.2rem;
        font-weight: 950;
    }

    .session-player-detail-page .player-expectation-card em {
        display: block;
        margin-top: 2px;
        color: #b8ced8;
        font-style: normal;
        font-weight: 800;
    }

    .session-player-detail-page .player-expectation-table-wrap {
        overflow: auto;
        border: 1px solid rgba(120, 169, 184, .1);
        border-radius: 8px;
    }

    .session-player-detail-page .player-expectation-table {
        width: 100%;
        min-width: 480px;
        border-collapse: collapse;
    }

    .session-player-detail-page .player-expectation-table th,
    .session-player-detail-page .player-expectation-table td {
        padding: 11px 12px;
        border-bottom: 1px solid rgba(120, 169, 184, .1);
        text-align: left;
    }

    .session-player-detail-page .player-expectation-table td {
        color: #d8e6eb;
        font-weight: 750;
    }

    .session-player-detail-page .player-expectation-role-dot {
        display: inline-flex;
        width: 10px;
        height: 10px;
        margin-right: 8px;
        border-radius: 999px;
        vertical-align: middle;
        background: var(--role-color, #6db1b6);
    }

    .session-player-detail-page .player-metric-main-grid,
    .session-player-detail-page .player-range-table-grid,
    .session-player-detail-page .player-segment-main-grid {
        display: grid;
        grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
        gap: 14px;
        align-items: stretch;
    }

    .session-player-detail-page .player-chart-grid,
    .session-player-detail-page .player-segment-kpi-grid,
    .session-player-detail-page .player-segment-insight-grid,
    .session-player-detail-page .player-phase-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .session-player-detail-page .player-segment-insight-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .session-player-detail-page .player-focus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .session-player-detail-page .player-native-table-wrap {
        max-height: 420px;
        overflow: auto;
        border-radius: 12px;
    }

    .session-player-detail-page .player-native-table th,
    .session-player-detail-page .player-native-table td {
        white-space: nowrap;
    }

    .session-player-detail-page .player-native-table .is-strong td,
    .session-player-detail-page .player-native-table tr.is-strong td {
        background: rgba(138, 242, 31, .08);
    }

    .session-player-detail-page .player-phase-card,
    .session-player-detail-page .player-focus-card {
        min-width: 0;
        padding: 14px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background: rgba(3, 12, 15, .52);
    }

    .session-player-detail-page .player-phase-card header,
    .session-player-detail-page .player-focus-card header,
    .session-player-detail-page .player-map-summary-card header {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        margin-bottom: 10px;
    }

    .session-player-detail-page .player-phase-card span,
    .session-player-detail-page .player-focus-card span {
        color: #91b7c7;
        font-size: .7rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .session-player-detail-page .player-phase-card strong,
    .session-player-detail-page .player-focus-card strong {
        display: block;
        color: #f4f7f8;
        font-weight: 950;
    }

    .session-player-detail-page .player-phase-card em,
    .session-player-detail-page .player-focus-card em {
        color: #b8ced8;
        font-style: normal;
        font-weight: 800;
    }

    .session-player-detail-page .segment-table-row.is-highlight td {
        background: rgba(138, 242, 31, .08);
    }

    @media (max-width: 1400px) {
        .session-player-detail-page .player-kpi-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .session-player-detail-page .player-context-strip {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .session-player-detail-page .player-metric-main-grid,
        .session-player-detail-page .player-range-table-grid,
        .session-player-detail-page .player-segment-main-grid,
        .session-player-detail-page .player-expectation-grid {
            grid-template-columns: 1fr;
        }

        .session-player-detail-page .player-chart-grid,
        .session-player-detail-page .player-segment-kpi-grid,
        .session-player-detail-page .player-segment-insight-grid,
        .session-player-detail-page .player-phase-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .session-player-detail-page .player-insight-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 980px) {
        .session-player-detail-page .player-detail-hero,
        .session-player-detail-page .player-map-layout {
            grid-template-columns: 1fr;
        }

        .session-player-detail-page .player-detail-actions,
        .session-player-detail-page .player-detail-meta {
            justify-content: flex-start;
        }

        .session-player-detail-page .player-kpi-grid,
        .session-player-detail-page .player-context-strip,
        .session-player-detail-page .player-map-summary-grid,
        .session-player-detail-page .player-chart-grid,
        .session-player-detail-page .player-segment-kpi-grid,
        .session-player-detail-page .player-segment-insight-grid,
        .session-player-detail-page .player-phase-grid,
        .session-player-detail-page .player-focus-grid,
        .session-player-detail-page .player-insight-grid,
        .session-player-detail-page .player-expectation-card-grid {
            grid-template-columns: 1fr;
        }

        .session-player-detail-page .player-detail-title h1 {
            font-size: 2.35rem;
        }

        .session-player-detail-page .player-map-mode-tabs {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            justify-content: stretch;
        }

        .session-player-detail-page .player-field {
            min-height: 300px;
        }
    }

.session-player-detail-page.player-profile-detail-page .player-detail-hero {
    padding: 0 0 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.session-player-detail-page.player-profile-detail-page .player-detail-hero > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "title meta actions";
    gap: 8px 12px;
    align-items: center;
}

.session-player-detail-page.player-profile-detail-page .player-detail-title {
    grid-area: title;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.session-player-detail-page.player-profile-detail-page .player-detail-title > div:last-child {
    min-width: 0;
}

.session-player-detail-page.player-profile-detail-page .player-number-badge {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: .96rem;
}

.session-player-detail-page.player-profile-detail-page .player-detail-eyebrow {
    display: none;
    margin-bottom: 0;
    color: #91d8ee;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: 0;
}

.session-player-detail-page.player-profile-detail-page .player-detail-title h1 {
    max-width: min(780px, 56vw);
    font-size: clamp(1.7rem, 2.2vw, 2.45rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.session-player-detail-page.player-profile-detail-page .player-detail-title p {
    margin-top: 3px;
    color: #aac7d2;
    font-size: .9rem;
    line-height: 1.16;
}

.session-player-detail-page.player-profile-detail-page .player-detail-meta {
    grid-area: meta;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-top: 0;
    white-space: nowrap;
}

.session-player-detail-page.player-profile-detail-page .player-detail-actions {
    grid-area: actions;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-top: 0;
}

.session-player-detail-page.player-profile-detail-page .player-detail-meta .mud-chip {
    min-height: 34px;
    border-radius: 999px;
    background: rgba(4, 16, 20, .68);
    font-size: .84rem;
    font-weight: 900;
}

.session-player-detail-page.player-profile-detail-page .player-detail-back-button,
.session-player-detail-page.player-profile-detail-page .player-detail-actions .mud-icon-button {
    width: 36px;
    height: 36px;
    padding: 6px;
}

@media (max-width: 1180px) {
    .session-player-detail-page.player-profile-detail-page .player-detail-hero > div {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "meta"
            "actions";
    }

    .session-player-detail-page.player-profile-detail-page .player-detail-title {
        flex-wrap: wrap;
    }

    .session-player-detail-page.player-profile-detail-page .player-detail-title h1 {
        max-width: 100%;
        font-size: 2.1rem;
    }

    .session-player-detail-page.player-profile-detail-page .player-detail-meta,
    .session-player-detail-page.player-profile-detail-page .player-detail-actions {
        justify-content: flex-start;
    }
}

.field-preview__wrapper {
    height: var(--field-preview-height, auto);
    position: relative;
    width: 100%;
    min-height: 320px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    background: #0d47a1;
}

    .field-preview__canvas {
        width: 100%;
        height: 100%;
        min-height: 320px;
    }

.team-notes-panel {
        min-width: 0;
        display: grid;
        gap: 12px;
        padding: 13px;
        border: 1px solid rgba(120, 169, 184, .18);
        border-radius: 16px;
        background:
            radial-gradient(circle at 16% 0%, rgba(119, 238, 255, .11), transparent 40%),
            rgba(2, 8, 10, .48);
        box-shadow: inset 0 1px 0 rgba(244, 247, 248, .035);
        color: #f5fbff;
    }

    .team-notes-head,
    .team-notes-title,
    .team-note-card header {
        display: flex;
        align-items: center;
    }

    .team-notes-head {
        justify-content: space-between;
        gap: 12px;
    }

    .team-notes-title {
        min-width: 0;
        gap: 11px;
    }

    .team-notes-icon {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border: 1px solid rgba(119, 238, 255, .28);
        border-radius: 12px;
        background: rgba(119, 238, 255, .10);
        color: #77eeff;
    }

    .team-notes-title div {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    .team-notes-title span {
        color: #91b7c7;
        font-size: .68rem;
        font-weight: 950;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .team-notes-title strong {
        min-width: 0;
        color: #f5fbff;
        font-size: 1.02rem;
        font-weight: 950;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .team-notes-title em {
        color: #8ca9b5;
        font-size: .72rem;
        font-style: normal;
        font-weight: 850;
    }

    .team-notes-add,
    .team-notes-empty button,
    .team-note-delete,
    .team-note-action {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid rgba(120, 169, 184, .24);
        border-radius: 999px;
        background: rgba(2, 9, 12, .68);
        color: #f5fbff;
        font: inherit;
        font-size: .7rem;
        font-weight: 950;
        white-space: nowrap;
        cursor: pointer;
        transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .team-notes-add,
    .team-notes-empty button {
        padding: 0 12px;
        border-color: rgba(116, 243, 62, .32);
        background: linear-gradient(135deg, rgba(116, 243, 62, .14), rgba(2, 9, 12, .76));
    }

    .team-note-delete {
        width: 32px;
        padding: 0;
        color: #ffb28e;
    }

    .team-note-actions {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
    }

    .team-note-action {
        width: 32px;
        padding: 0;
        color: #d9eef5;
    }

    .team-note-action.is-danger {
        color: #ffb28e;
    }

    .team-notes-add:hover,
    .team-notes-add:focus-visible,
    .team-notes-empty button:hover,
    .team-notes-empty button:focus-visible,
    .team-note-delete:hover,
    .team-note-delete:focus-visible,
    .team-note-action:hover,
    .team-note-action:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(119, 238, 255, .56);
        background: rgba(9, 34, 41, .76);
        box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
        outline: none;
    }

    .team-notes-body {
        min-height: 260px;
        max-height: 540px;
        overflow: auto;
        padding: 2px 2px 2px 0;
        scrollbar-width: thin;
    }

    .team-notes-list {
        position: relative;
        display: grid;
        gap: 10px;
    }

    .team-notes-list::before {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 13px;
        width: 1px;
        background: linear-gradient(180deg, rgba(119, 238, 255, .46), rgba(116, 243, 62, .12));
    }

    .team-note-card {
        position: relative;
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 10px;
        min-width: 0;
    }

    .team-note-marker {
        position: relative;
        z-index: 1;
        width: 27px;
        height: 27px;
        margin-top: 12px;
        border: 1px solid rgba(119, 238, 255, .42);
        border-radius: 999px;
        background:
            radial-gradient(circle, #77eeff 0 28%, rgba(119, 238, 255, .13) 30% 100%),
            rgba(2, 9, 12, .88);
        box-shadow: 0 0 18px rgba(119, 238, 255, .12);
    }

    .team-note-content {
        min-width: 0;
        padding: 12px;
        border: 1px solid rgba(120, 169, 184, .15);
        border-radius: 12px;
        background:
            radial-gradient(circle at 100% 0%, rgba(116, 243, 62, .07), transparent 42%),
            rgba(3, 9, 11, .50);
    }

    .team-note-card header {
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
    }

    .team-note-card header div {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    .team-note-card strong {
        min-width: 0;
        color: #f5fbff;
        font-size: .92rem;
        font-weight: 950;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .team-note-card span {
        color: #8ca9b5;
        font-size: .68rem;
        font-weight: 850;
    }

    .team-note-card p {
        margin: 0;
        color: #c8dde4;
        font-size: .82rem;
        line-height: 1.5;
        white-space: pre-wrap;
    }

    .team-notes-empty {
        min-height: 260px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 10px;
        padding: 24px;
        border: 1px solid rgba(120, 169, 184, .14);
        border-radius: 14px;
        background: rgba(1, 7, 9, .34);
        text-align: center;
        color: #9cc5d4;
    }

    .team-notes-empty .mud-icon-root {
        color: #77eeff;
    }

    .team-notes-empty strong {
        color: #f5fbff;
        font-size: 1rem;
        font-weight: 950;
    }

    .team-notes-empty span {
        color: #9cc5d4;
        font-size: .78rem;
        font-weight: 760;
    }

    @media (max-width: 760px) {
        .team-notes-head {
            align-items: flex-start;
            flex-direction: column;
        }

        .team-notes-add {
            width: 100%;
        }
    }

/* === CAMPO DA CALCIO === */
    .field-container {
    border: 1px solid var(--team-border) !important;
    overflow: hidden;
    border-radius: 16px;
    padding: 12px;
    position: relative;
    height: 100%;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
    
    .field-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    max-height: 90vh;
    margin: auto;
    position: relative;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    height: 100%;
    min-height: 250px;
}
    
    .soccer-field {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    aspect-ratio: 2.22;
    /* oppure 105/68 = 1.544 per standard uefa */
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}
    
    

    /* Zone overlay */
    .zones-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }

    .zone-area {
        position: absolute;
        border: 2px solid rgba(255,255,255,0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 10px;
        text-align: center;
        color: white;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
        transition: all 0.3s ease;
        pointer-events: auto;
        cursor: pointer;
        backdrop-filter: blur(1px);
        word-wrap: break-word;
        overflow: hidden;
    }

    .zone-area:hover {
        transform: scale(1.05);
        border-color: #FFD700;
        border-width: 3px;
        z-index: 10;
        box-shadow: 0 0 15px rgba(255,215,0,0.6);
    }

    .zone-area.selected {
        border-color: #FFD700;
        border-width: 3px;
        box-shadow: 0 0 10px rgba(255,215,0,0.8);
        z-index: 10;
    }

    /* Stili dinamici per gli schemi */
    .zones-overlay .zone-area:nth-child(odd) { 
        background-color: rgba(99, 102, 241, var(--zone-opacity)); 
    }
    .zones-overlay .zone-area:nth-child(even) { 
        background-color: rgba(67, 56, 202, var(--zone-opacity)); 
    }

    /* Stili specifici per schemi conosciuti */
    .basic-build .zone-area:nth-child(1) { background-color: rgba(239, 68, 68, var(--zone-opacity)); }
    .basic-build .zone-area:nth-child(2) { background-color: rgba(245, 158, 11, var(--zone-opacity)); }
    .basic-build .zone-area:nth-child(3) { background-color: rgba(250, 204, 21, var(--zone-opacity)); }
    .basic-build .zone-area:nth-child(4) { background-color: rgba(34, 197, 94, var(--zone-opacity)); }

    .five-vertical-zones .zone-area:nth-child(1) { background-color: rgba(239, 68, 68, var(--zone-opacity)); }
    .five-vertical-zones .zone-area:nth-child(2) { background-color: rgba(245, 158, 11, var(--zone-opacity)); }
    .five-vertical-zones .zone-area:nth-child(3) { background-color: rgba(6, 182, 212, var(--zone-opacity)); }
    .five-vertical-zones .zone-area:nth-child(4) { background-color: rgba(245, 158, 11, var(--zone-opacity)); }
    .five-vertical-zones .zone-area:nth-child(5) { background-color: rgba(239, 68, 68, var(--zone-opacity)); }

    .pep-guardiola-zones .zone-area { 
        background-color: rgba(236, 72, 153, var(--zone-opacity)); 
        font-size: 7px;
    }

    .custom-analysis .zone-area { 
        background-color: rgba(34, 197, 94, var(--zone-opacity)); 
        font-size: 9px;
    }
    .custom-analysis .zone-area:nth-child(even) { background-color: rgba(22, 163, 74, var(--zone-opacity)); }

.player-comparison-panel {
        min-width: 0;
        display: grid;
        gap: 13px;
        padding: 13px;
        border: 1px solid rgba(120, 169, 184, .18);
        border-radius: 16px;
        background:
            radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--metric-color, #10c8ea) 13%, transparent), transparent 40%),
            rgba(2, 8, 10, .48);
        box-shadow: inset 0 1px 0 rgba(244, 247, 248, .035);
        color: #f5fbff;
    }

    .player-comparison-panel.is-speed {
        --metric-color: #77eeff;
    }

    .player-comparison-panel.is-duration {
        --metric-color: #f4d35e;
    }

    .player-comparison-panel.is-distance {
        --metric-color: #74f33e;
    }

    .player-comparison-head,
    .player-comparison-title,
    .player-comparison-controls,
    .player-comparison-periods,
    .player-comparison-summary {
        display: flex;
        align-items: center;
    }

    .player-comparison-head {
        justify-content: space-between;
        gap: 12px;
    }

    .player-comparison-title {
        gap: 11px;
        min-width: 0;
    }

    .player-comparison-icon {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border: 1px solid color-mix(in srgb, var(--metric-color, #10c8ea) 34%, rgba(120, 169, 184, .18));
        border-radius: 12px;
        background: color-mix(in srgb, var(--metric-color, #10c8ea) 14%, rgba(2, 9, 12, .76));
        color: var(--metric-color, #10c8ea);
    }

    .player-comparison-title div {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    .player-comparison-title span,
    .player-comparison-summary span {
        color: #91b7c7;
        font-size: .68rem;
        font-weight: 950;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .player-comparison-title strong {
        color: #f5fbff;
        font-size: 1.02rem;
        font-weight: 950;
    }

    .player-comparison-title em,
    .player-comparison-summary em {
        color: #8ca9b5;
        font-size: .72rem;
        font-style: normal;
        font-weight: 850;
    }

    .player-comparison-controls,
    .player-comparison-periods {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .player-comparison-controls button,
    .player-comparison-periods button,
    .player-comparison-empty button {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 12px;
        border: 1px solid rgba(120, 169, 184, .24);
        border-radius: 999px;
        background: rgba(2, 9, 12, .68);
        color: #f5fbff;
        font: inherit;
        font-size: .7rem;
        font-weight: 950;
        white-space: nowrap;
        cursor: pointer;
        transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .player-comparison-controls button:hover,
    .player-comparison-controls button.is-active,
    .player-comparison-periods button:hover,
    .player-comparison-periods button.is-active,
    .player-comparison-empty button:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--metric-color, #10c8ea) 72%, white 8%);
        background:
            radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--metric-color, #10c8ea) 34%, transparent), transparent 58%),
            rgba(2, 9, 12, .74);
        box-shadow: 0 14px 34px rgba(0, 0, 0, .18), 0 0 0 1px color-mix(in srgb, var(--metric-color, #10c8ea) 22%, transparent);
    }

    .player-comparison-periods {
        justify-content: flex-start;
    }

    .player-comparison-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .player-comparison-summary article {
        min-width: 0;
        padding: 12px;
        border: 1px solid rgba(120, 169, 184, .15);
        border-radius: 12px;
        background: rgba(3, 9, 11, .50);
    }

    .player-comparison-summary strong {
        display: block;
        margin-top: 4px;
        color: #f8fdff;
        font-size: 1.15rem;
        font-weight: 950;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .player-comparison-summary article.is-up strong {
        color: #b7ff92;
    }

    .player-comparison-summary article.is-down strong {
        color: #ffb28e;
    }

    .player-comparison-chart-card {
        min-width: 0;
        padding: 16px;
        border: 1px solid rgba(120, 169, 184, .16);
        border-radius: 14px;
        background:
            radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--metric-color, #10c8ea) 10%, transparent), transparent 38%),
            rgba(7, 20, 25, .74);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    }

    .player-comparison-chart-card header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 12px;
    }

    .player-comparison-chart-card header div {
        min-width: 0;
    }

    .player-comparison-chart-card header span {
        display: block;
        color: #91b7c7;
        font-size: .72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .player-comparison-chart-card header strong {
        display: block;
        margin-top: 4px;
        color: #f4f7f8;
        font-size: 1.08rem;
        font-weight: 950;
    }

    .player-comparison-chart-card header em {
        color: #b8ced8;
        font-size: .78rem;
        font-style: normal;
        font-weight: 800;
        text-align: right;
    }

    .player-comparison-mud-chart {
        min-height: 330px;
        padding: 8px 4px 0;
        overflow: visible;
        border: 1px solid rgba(120, 169, 184, .12);
        border-radius: 12px;
        background:
            linear-gradient(180deg, rgba(3, 13, 16, .58), rgba(2, 8, 11, .74)),
            repeating-linear-gradient(0deg, transparent 0, transparent 54px, rgba(120, 169, 184, .055) 55px);
    }

    .player-comparison-mud-chart .mud-chart {
        width: 100% !important;
        height: 100% !important;
        color: #d9eef5;
    }

    .player-comparison-mud-chart .mud-chart svg {
        width: 100% !important;
        height: 100% !important;
        display: block;
        overflow: visible;
    }

    .player-comparison-mud-chart svg text {
        fill: #91b7c7 !important;
        font-size: 11px !important;
        font-weight: 800;
    }

    .player-comparison-mud-chart svg path,
    .player-comparison-mud-chart svg polyline {
        filter: drop-shadow(0 0 8px color-mix(in srgb, var(--metric-color, #10c8ea) 34%, transparent));
    }

    .player-comparison-point-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
        gap: 8px;
        margin-top: 12px;
    }

    .player-comparison-point-list span {
        min-width: 0;
        padding: 10px;
        border: 1px solid rgba(120, 169, 184, .14);
        border-radius: 10px;
        background: rgba(3, 9, 11, .42);
    }

    .player-comparison-point-list small,
    .player-comparison-point-list strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .player-comparison-point-list small {
        color: #91b7c7;
        font-size: .66rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .player-comparison-point-list strong {
        margin-top: 4px;
        color: #f4f7f8;
        font-size: .82rem;
        font-weight: 950;
    }

    .player-comparison-empty {
        min-height: 260px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 10px;
        padding: 24px;
        border: 1px solid rgba(120, 169, 184, .14);
        border-radius: 14px;
        background: rgba(1, 7, 9, .34);
        text-align: center;
        color: #9cc5d4;
    }

    .player-comparison-empty .mud-icon-root {
        color: var(--metric-color, #10c8ea);
    }

    .player-comparison-empty strong {
        color: #f5fbff;
        font-size: 1rem;
        font-weight: 950;
    }

    .player-comparison-empty span {
        color: #9cc5d4;
        font-size: .78rem;
        font-weight: 760;
    }

    .player-comparison-panel-minimal {
        gap: 16px;
        padding: 16px;
    }

    .player-comparison-data-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(380px, .46fr);
        gap: 14px;
        align-items: stretch;
    }

    .player-comparison-data-grid .player-comparison-mud-chart {
        min-width: 0;
    }

    .player-comparison-side-table {
        min-width: 0;
        min-height: 500px;
        height: clamp(430px, 52vh, 560px);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        padding: 14px;
        border: 1px solid rgba(120, 169, 184, .14);
        border-radius: 12px;
        background:
            radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--metric-color, #10c8ea) 10%, transparent), transparent 38%),
            linear-gradient(180deg, rgba(3, 13, 16, .58), rgba(2, 8, 11, .76));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    .player-comparison-side-table header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    .player-comparison-side-table header span,
    .player-comparison-data-table th {
        color: #91b7c7;
        font-size: .68rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .player-comparison-side-table header strong {
        display: block;
        margin-top: 4px;
        color: #f5fbff;
        font-size: .95rem;
        font-weight: 950;
    }

    .player-comparison-side-table header em {
        color: #b8ced8;
        font-size: .76rem;
        font-style: normal;
        font-weight: 850;
        white-space: nowrap;
    }

    .player-comparison-table-wrap {
        min-height: 0;
        overflow: auto;
        border: 1px solid rgba(120, 169, 184, .11);
        border-radius: 10px;
        background: rgba(1, 7, 9, .32);
    }

    .player-comparison-data-table {
        width: 100%;
        min-width: 720px;
        border-collapse: separate;
        border-spacing: 0;
    }

    .player-comparison-data-table th,
    .player-comparison-data-table td {
        padding: 11px 12px;
        border-bottom: 1px solid rgba(120, 169, 184, .10);
        text-align: left;
        white-space: nowrap;
    }

    .player-comparison-data-table th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: rgba(3, 13, 16, .96);
    }

    .player-comparison-data-table th:first-child,
    .player-comparison-data-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        min-width: 118px;
        background: rgba(4, 17, 22, .98);
    }

    .player-comparison-data-table td {
        color: #d8e6eb;
        font-size: .78rem;
        font-weight: 850;
    }

    .player-comparison-data-table td:first-child strong,
    .player-comparison-data-table td:first-child em {
        display: block;
    }

    .player-comparison-data-table td:first-child strong {
        color: #f5fbff;
        font-size: .82rem;
        font-weight: 950;
    }

    .player-comparison-data-table td:first-child em {
        margin-top: 3px;
        color: #91b7c7;
        font-size: .66rem;
        font-style: normal;
        font-weight: 800;
    }

    .player-comparison-data-table tbody tr:hover td {
        background: rgba(119, 238, 255, .045);
    }

    .player-comparison-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        justify-content: flex-end;
    }

    .player-comparison-select {
        min-width: 210px;
    }

    .player-comparison-panel-minimal .player-comparison-mud-chart {
        min-height: 500px;
        height: clamp(430px, 52vh, 560px);
        padding: 14px 18px 8px;
        border-radius: 12px;
    }

    .player-comparison-panel-minimal .mud-chart {
        width: 100% !important;
        min-height: 0;
    }

    @media (max-width: 1280px) {
        .player-comparison-data-grid {
            grid-template-columns: 1fr;
        }

        .player-comparison-side-table {
            min-height: 340px;
            height: 360px;
        }
    }

    @media (max-width: 980px) {
        .player-comparison-head {
            align-items: flex-start;
            flex-direction: column;
        }

        .player-comparison-controls {
            justify-content: flex-start;
        }

        .player-comparison-summary {
            grid-template-columns: 1fr;
        }

        .player-comparison-toolbar {
            justify-content: flex-start;
        }

        .player-comparison-select {
            width: 100%;
            min-width: 0;
        }

        .player-comparison-panel-minimal .player-comparison-mud-chart {
            min-height: 360px;
            height: 380px;
            padding: 12px 8px 6px;
        }

        .player-comparison-side-table {
            min-height: 320px;
            height: 340px;
            padding: 12px;
        }
    }

.roster-expectation-pitch {
        display: grid;
        gap: 12px;
        min-width: 0;
        color: #edf7f7;
    }

    .roster-expectation-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
    }

    .roster-expectation-head div {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .roster-expectation-head span {
        color: rgba(237, 247, 247, .58);
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .roster-expectation-head strong {
        color: #f4f7f8;
        font-size: clamp(1.1rem, 2vw, 1.45rem);
        line-height: 1.05;
        font-weight: 950;
    }

    .roster-expectation-head em,
    .roster-expectation-head small {
        color: rgba(237, 247, 247, .68);
        font-style: normal;
        font-weight: 700;
    }

    .roster-expectation-head small {
        white-space: nowrap;
        padding: 7px 10px;
        border: 1px solid rgba(237, 247, 247, .12);
        border-radius: 999px;
        background: rgba(237, 247, 247, .05);
    }

    .roster-expectation-field {
        position: relative;
        min-height: var(--roster-pitch-min-height, 360px);
        overflow: hidden;
        border: 1px solid rgba(120, 169, 184, .22);
        border-radius: 8px;
        background:
            linear-gradient(90deg, transparent 49.8%, rgba(237, 247, 247, .18) 50%, transparent 50.2%),
            radial-gradient(circle at 50% 50%, transparent 0 64px, rgba(237, 247, 247, .16) 66px 67px, transparent 69px),
            linear-gradient(180deg, rgba(84, 214, 146, .16), rgba(4, 45, 39, .88));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    }

    .roster-expectation-lines::before,
    .roster-expectation-lines::after {
        content: "";
        position: absolute;
        left: 28%;
        right: 28%;
        height: 26%;
        border: 1px solid rgba(237, 247, 247, .16);
        pointer-events: none;
    }

    .roster-expectation-lines::before {
        top: -1px;
        border-top: 0;
    }

    .roster-expectation-lines::after {
        bottom: -1px;
        border-bottom: 0;
    }

    .roster-expectation-cell {
        position: absolute;
        width: 8.333%;
        height: 12.5%;
        border-radius: 7px;
        background: var(--cell-color);
        opacity: var(--cell-alpha);
        pointer-events: none;
        mix-blend-mode: screen;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    }

    .roster-expectation-cell.is-intensity {
        border-radius: 999px;
        transform: scale(.72);
        transform-origin: center;
        box-shadow: 0 0 18px rgba(245, 196, 0, .2);
    }

    .roster-expectation-slot {
        position: absolute;
        z-index: 4;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);
        border: 2px solid var(--slot-color, rgba(255, 255, 255, .82));
        border-radius: 999px;
        background: rgba(8, 19, 25, .88);
        color: #fff;
        font-size: .72rem;
        font-weight: 950;
        box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
    }

    .roster-expectation-slot.is-empty {
        opacity: .58;
    }

    .roster-expectation-slot.is-highlighted {
        background: #f4f7f8;
        color: #081319;
        box-shadow: 0 0 0 6px rgba(138, 242, 31, .22), 0 14px 28px rgba(0, 0, 0, .28);
    }

    .roster-expectation-empty {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 18px;
        color: rgba(237, 247, 247, .72);
        text-align: center;
        font-weight: 800;
    }

    .roster-expectation-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        color: rgba(237, 247, 247, .68);
        font-size: .78rem;
        font-weight: 800;
    }

    .roster-expectation-legend span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .roster-expectation-legend i {
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: #6db1b6;
    }

    .roster-expectation-legend i.is-intensity {
        background: #f5c400;
    }

    .roster-expectation-legend i.is-slot {
        border: 2px solid #edf7f7;
        background: transparent;
    }

    @media (max-width: 760px) {
        .roster-expectation-field {
            min-height: var(--roster-pitch-mobile-height, 300px);
        }

        .roster-expectation-head {
            display: grid;
        }
    }

.heatmap-scroll {
        overflow: auto;
        width: 100%;
        height: 0;
        padding-bottom: 66.66%; /* 4:3 aspect ratio */
        position: relative;
    }
    .heatmap-field {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .field-svg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        background: transparent !important;
    }

.radar-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        padding: 20px 0;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

/* ========================================================================== 
   Chat Page Styles
   ========================================================================== */

.chat-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    box-sizing: border-box;
    height: calc(100vh - 64px);
    min-height: 640px;
    background: radial-gradient(circle at 10% -10%, #f8fbff 0%, #eef1f7 45%, #e8ebf2 100%);
    color: var(--mud-palette-text-primary, #0f172a);
}

@supports (height: 100dvh) {
    .chat-page {
        height: calc(100dvh - 64px);
    }
}

.chat-page-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 8px;
}

.chat-shell {
    width: 100%;
    align-items: stretch !important;
    height: 100% !important;
    flex: 1;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    min-height: 0;
    position: relative;
}

.chat-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    box-shadow: 0 28px 80px -60px rgba(15, 23, 42, 0.68);
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.chat-sidebar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 24px 20px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.chat-sidebar-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-collapse {
    display: none !important;
}

.chat-sidebar-body {
    height: 100%;
    min-height: 0;
    padding-right: 4px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 24px 24px;
    overflow-y: auto;
}

.chat-sidebar-create {
    justify-content: flex-start;
    gap: 10px;
    border-radius: 14px;
    font-weight: 600;
    box-shadow: 0 24px 60px -40px rgba(21, 94, 239, 0.65);
}

.chat-loading-state {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0;
}

.chat-empty-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    background: rgba(248, 250, 252, 0.6);
}

.chat-session-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
}

.chat-session-item {
    background: #ffffff;
    cursor: pointer;
    border-radius: 18px;
    padding: 16px 18px;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease, background 0.2s ease;
}

.chat-session-item:hover {
    transform: translateY(-2px);
    background: rgba(248, 250, 252, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.25);
    box-shadow: 0 18px 60px -48px rgba(99, 102, 241, 0.6);
}

.chat-session-item.selected {
    border-color: rgba(15, 118, 110, 0.42);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(56, 189, 248, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.35);
    box-shadow: 0 22px 70px -50px rgba(56, 189, 248, 0.75);
}

.chat-session-item-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-session-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.session-title {
    flex: 1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-chevron {
    color: rgba(15, 23, 42, 0.35);
}

.chat-session-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: rgba(71, 85, 105, 0.9);
}

.session-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(21, 94, 239, 0.12);
    color: #155eef;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.session-date {
    opacity: 0.8;
}

.chat-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 28px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 249, 252, 0.92) 100%);
    box-shadow: 0 36px 100px -70px rgba(15, 23, 42, 0.85);
    overflow: hidden;
}

.chat-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(18px);
}

.chat-toolbar-texts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-toggle {
    display: none !important;
}

.new-session-button {
    border-radius: 12px;
    font-weight: 600;
    padding: 0 18px;
}

.chat-main-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 32px;
}

.chat-container > * {
    flex: 1;
    min-height: 0;
}

.empty-chat-state {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px;
    border-radius: 24px;
    border: 1px dashed rgba(99, 102, 241, 0.35);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(14, 165, 233, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    max-width: 420px;
}

.empty-chat-state .mud-button-root {
    align-self: flex-start;
}

.empty-chat-subtitle {
    line-height: 1.5;
}

.chatbot-card {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    border-radius: 24px;
    background: transparent;
    box-shadow: none;
    border: none;
}

.chat-messages-container {
    background-color: transparent;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background-size: 58px 58px, 58px 58px, auto !important;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    overflow-y: auto;
    background: transparent;
}

.chat-input-area {
    padding: 20px 28px;
    backdrop-filter: blur(16px);
}

.chat-input-area .mud-input-root {
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.8);
}

.chat-input-area .mud-button-root {
    border-radius: 14px;
    padding: 0 18px;
    font-weight: 600;
}

.chat-shell-overlay {
    display: none;
}

.chat-sidebar-body::-webkit-scrollbar,
.chat-messages-container::-webkit-scrollbar {
    width: 8px;
}

.chat-sidebar-body::-webkit-scrollbar-track,
.chat-messages-container::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.6);
    border-radius: 8px;
}

.chat-sidebar-body::-webkit-scrollbar-thumb,
.chat-messages-container::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.7);
    border-radius: 8px;
}

.chat-sidebar-body::-webkit-scrollbar-thumb:hover,
.chat-messages-container::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.8);
}

@media (max-width: 1400px) {
    .chat-shell {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 1024px) {
    .chat-page {
        padding: 24px 20px;
        height: auto;
        min-height: calc(100vh - 56px);
    }

    .chat-shell {
        display: flex;
    }

    .chat-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(340px, 90vw);
        max-width: 90vw;
        z-index: 6;
        box-shadow: 0 32px 100px -60px rgba(15, 23, 42, 0.85);
    }

    .chat-sidebar.collapsed {
        transform: translateX(-110%);
        opacity: 0;
        pointer-events: none;
    }

.chat-input-area {
    padding: 16px 24px;
}

    .sidebar-collapse {
        display: inline-flex !important;
    }

    .chat-shell-overlay {
        display: block;
        position: absolute;
        inset: 0;
        border-radius: 28px;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(4px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 5;
    }

    .chat-shell-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .chat-toolbar {
        gap: 12px;
    }

    .sidebar-toggle {
        display: inline-flex !important;
    }

    .chat-main {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .chat-page {
        padding: 16px;
    }

    .chat-toolbar {
        padding: 20px;
    }

    .chat-container {
        padding: 24px 16px;
    }

    .chat-messages-container {
    padding-left: 12px;
    padding-right: 12px;
    padding: 24px 16px;
}

    .chat-input-area {
        padding: 16px 20px;
    }

    .empty-chat-state {
        padding: 32px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .chat-toolbar {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .new-session-button {
        width: 100%;
    }
}

/* Chatbot rich media refresh */
.chat-agent-page .chat-media-frame.media-summary .chat-media-content {
    padding: 12px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 0%, rgba(16, 200, 234, .12), transparent 34%),
        linear-gradient(145deg, rgba(5, 20, 24, .98), rgba(2, 9, 12, .98));
}

.chat-agent-page .chat-media-frame.media-summary .session-summary-media {
    gap: 12px;
    color: var(--chat-text);
}

.chat-agent-page .chat-media-frame.media-summary .session-summary-header h3 {
    color: var(--chat-text);
    font-size: 1rem;
}

.chat-agent-page .chat-media-frame.media-summary .session-summary-header p {
    color: var(--chat-muted);
}

.chat-agent-page .chat-media-frame.media-summary .session-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    align-items: start;
    gap: 10px;
}

.chat-agent-page .chat-media-frame.media-summary .session-summary-card {
    min-height: 0;
    padding: 11px 12px 12px;
    overflow: hidden;
    border: 1px solid rgba(120, 197, 218, .16);
    border-left: 3px solid var(--summary-accent, var(--chat-accent));
    background:
        linear-gradient(145deg, rgba(18, 43, 49, .92), rgba(5, 16, 20, .96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.chat-agent-page .chat-media-frame.media-summary .session-summary-card span {
    color: #9fc2ce;
    font-size: .72rem;
}

.chat-agent-page .chat-media-frame.media-summary .session-summary-card strong {
    color: #f4fbff;
    font-size: clamp(1rem, 1.8vw, 1.22rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.chat-agent-page .chat-media-frame.media-summary .session-summary-card small {
    color: #86a9b5;
}

.chat-agent-page .chat-media-frame.media-summary .session-summary-highlights {
    color: #a8c8d4;
}

.chat-media-frame.media-chart .chat-media-content {
    background: #ffffff;
    padding: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
}

.chat-media-frame.media-chart .chat-media-content svg {
    width: auto;
    min-width: 760px;
    max-width: none;
    height: auto;
    border-radius: 6px;
}

.chat-media-frame.media-heatmap .chat-media-content,
.chat-media-frame.media-pitchmap .chat-media-content,
.chat-media-frame.media-track .chat-media-content,
.chat-media-frame.media-generic .chat-media-content:has(.field-wrapper) {
    overflow: hidden;
    padding: 12px;
    background:
        radial-gradient(circle at 16% 12%, rgba(23, 215, 255, .13), transparent 32%),
        linear-gradient(135deg, rgba(4, 24, 28, .96), rgba(2, 10, 12, .98));
}

.chat-media-stack.is-upload-stack {
    margin-top: 10px;
}

.chat-media-frame.media-upload .chat-media-content {
    padding: 10px;
    background: rgba(255, 255, 255, .045);
}

.chat-upload-preview {
    min-width: 0;
    margin: 0;
    color: #d9edf3;
}

.chat-upload-preview.is-image img {
    display: block;
    width: min(100%, 520px);
    max-height: 360px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(0, 0, 0, .18);
}

.chat-upload-preview figcaption,
.chat-upload-file-head {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-size: .76rem;
    font-weight: 850;
}

.chat-upload-preview figcaption span,
.chat-upload-file-head span,
.chat-upload-preview.is-file small {
    flex: 0 0 auto;
    color: #8ea8b3;
    font-size: .7rem;
    font-weight: 800;
}

.chat-upload-file-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-upload-preview.is-text pre {
    max-height: 220px;
    margin: 8px 0 0;
    padding: 10px;
    overflow: auto;
    border-radius: 6px;
    color: #dff6fb;
    background: rgba(0, 0, 0, .22);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .76rem;
    line-height: 1.35;
}

.chat-upload-preview.is-file {
    display: grid;
    gap: 4px;
}

.chat-media-content .field-wrapper {
    display: block;
    width: min(100%, 920px);
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0 auto;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(90, 214, 235, .22);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(6, 25, 24, .92), rgba(1, 9, 11, .98)),
        #061112;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

.chat-media-content .soccer-field {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 260px;
    max-height: min(64vh, 470px);
    aspect-ratio: 200 / 90;
    overflow: hidden;
    border-radius: 10px;
    background:
        repeating-linear-gradient(90deg, rgba(16, 185, 129, .08) 0 10%, rgba(6, 95, 70, .11) 10% 20%),
        linear-gradient(135deg, #05241e, #06171a 58%, #031012);
    box-shadow:
        inset 0 0 0 1px rgba(210, 255, 239, .12),
        inset 0 18px 60px rgba(255,255,255,.035),
        0 18px 36px rgba(0,0,0,.24);
}

.chat-media-content .field-svg,
.chat-media-content .paths-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.chat-media-content .field-svg {
    fill: rgba(0, 24, 21, .48) !important;
}

.chat-media-content .field-svg rect,
.chat-media-content .field-svg circle,
.chat-media-content .field-svg line {
    vector-effect: non-scaling-stroke;
}

.chat-media-content .heat-grid,
.chat-media-content .pitch-grid,
.chat-media-content .player-paths,
.chat-media-content .player-numbers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.chat-media-content .heat-cell {
    position: absolute;
    pointer-events: none;
    filter: blur(3px) saturate(1.24);
    mix-blend-mode: screen;
    opacity: .96;
}

.chat-media-content .heat-cell:hover {
    transform: translate(-50%, -50%) scale(1.12);
}

.chat-media-content .pitch-zone {
    position: absolute;
    display: grid !important;
    place-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 5px;
    box-shadow: inset 0 0 18px rgba(255,255,255,.08);
}

.chat-media-content .zone-label {
    position: static;
    max-width: 92%;
    margin: 0 !important;
    padding: 2px 5px;
    overflow: hidden;
    color: #f8fafc;
    font-size: clamp(.56rem, 1vw, .78rem);
    font-weight: 800;
    line-height: 1.1;
    text-align: center !important;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,.85);
    transform: none;
    white-space: nowrap;
}

.chat-media-content .player-paths {
    filter: drop-shadow(0 0 7px rgba(23, 215, 255, .48));
}

.chat-media-content .player-number {
    width: 30px;
    height: 30px;
    color: #031014;
    border: 2px solid rgba(255,255,255,.84);
    box-shadow:
        0 0 0 4px rgba(23, 215, 255, .14),
        0 10px 22px rgba(0,0,0,.34);
    font-size: .78rem;
    font-weight: 900;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    .chat-media-frame.media-chart .chat-media-content svg {
        min-width: 680px;
    }

    .chat-media-content .field-wrapper {
        padding: 8px;
    }

    .chat-media-content .soccer-field {
        min-height: 188px;
        max-height: 360px;
    }

    .chat-media-content .player-number {
        width: 26px;
        height: 26px;
        font-size: .72rem;
    }
}

/* Chatbot layout refresh */
.team-content-shell:has(.agents-page),
.team-content-shell:has(.chat-agent-page) {
    padding: 0 !important;
    background:
        linear-gradient(90deg, rgba(48, 210, 235, .08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(138, 242, 31, .045) 1px, transparent 1px),
        #050d11 !important;
    background-size: 72px 72px, 72px 72px, auto !important;
}

.team-content-shell .mud-container.agents-page,
.team-content-shell .mud-container.chat-agent-page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.agents-page {
    padding: clamp(26px, 4vw, 54px) clamp(18px, 5vw, 92px) clamp(28px, 4vw, 52px) !important;
    background:
        linear-gradient(90deg, rgba(48, 210, 235, .08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(138, 242, 31, .045) 1px, transparent 1px),
        linear-gradient(145deg, #061014 0%, #07181d 42%, #03080b 100%) !important;
    background-size: 72px 72px, 72px 72px, auto !important;
}

.agents-hero,
.agents-grid {
    width: min(1280px, 100%) !important;
}

.agents-hero-copy {
    position: relative;
    min-height: 170px !important;
    padding: 0 !important;
}

.agents-hero-copy::before {
    content: "TRAGUAR / ESPERTI VIRTUALI";
    display: inline-flex;
    width: fit-content;
    margin-bottom: 14px;
    color: #a9c7d3;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .28em;
}

.agents-hero-copy::after {
    content: "Sistema online";
    position: absolute;
    top: 4px;
    left: min(430px, 58vw);
    margin: 0;
    color: #28dfff;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.agents-hero h1 {
    font-size: clamp(3.1rem, 5.2vw, 5.45rem) !important;
}

.agents-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2vw, 30px) !important;
}

.agent-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 640px !important;
    border-top-width: 1px !important;
    border-radius: 8px !important;
    background: rgba(4, 14, 18, .94) !important;
}

.agent-visual {
    min-height: 0 !important;
    height: clamp(280px, 26vw, 392px) !important;
}

.agent-visual img {
    object-position: center top !important;
}

.agent-visual-shade {
    background:
        linear-gradient(180deg, transparent 18%, rgba(3, 8, 11, .18) 42%, rgba(3, 8, 11, .92) 100%),
        linear-gradient(90deg, rgba(2, 8, 10, .08), rgba(2, 8, 10, .18)) !important;
}

.agent-content {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    margin-top: -96px;
    padding: 0 clamp(22px, 2.2vw, 30px) clamp(22px, 2.2vw, 30px) !important;
}

.agent-header {
    min-height: 96px;
    align-items: flex-end !important;
}

.agent-header h2 {
    font-size: clamp(2.2rem, 3.3vw, 3.55rem) !important;
    text-transform: uppercase;
}

.agent-icon {
    position: absolute;
    top: 18px;
    right: 18px;
    width: auto !important;
    height: 28px !important;
    padding: 0 12px;
    border-radius: 999px !important;
    color: var(--agent-accent) !important;
    background: rgba(2, 8, 10, .5) !important;
}

.agent-icon svg {
    width: 15px !important;
    height: 15px !important;
}

.agent-description {
    margin-top: 18px !important;
}

.agent-output {
    margin-top: 12px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 8px;
    background: rgba(2, 10, 13, .36);
}

.chat-agent-page.chat-conversation-page {
    --chat-accent: #28dfff;
    --chat-accent-soft: rgba(40, 223, 255, .14);
    --chat-line: rgba(115, 163, 181, .18);
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        linear-gradient(90deg, rgba(48, 210, 235, .08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(138, 242, 31, .045) 1px, transparent 1px),
        linear-gradient(145deg, #061014 0%, #06151a 48%, #03080b 100%) !important;
    background-size: 72px 72px, 72px 72px, auto !important;
}

.chat-agent-page.chat-conversation-page.theme-traintom {
    --chat-accent: #9af545;
    --chat-accent-soft: rgba(154, 245, 69, .14);
}

.chat-agent-page.chat-conversation-page.theme-lara {
    --chat-accent: #ffcf5a;
    --chat-accent-soft: rgba(255, 207, 90, .13);
    --chat-line: rgba(255, 207, 90, .16);
}

.chat-agent-page.chat-conversation-page.theme-session {
    --chat-accent: #65d7ff;
    --chat-accent-soft: rgba(101, 215, 255, .13);
    --chat-line: rgba(105, 191, 224, .20);
}

.chat-conversation-header {
    min-height: 96px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px clamp(22px, 3vw, 40px);
    border-bottom: 1px solid var(--chat-line);
    background: rgba(3, 12, 16, .78);
    backdrop-filter: blur(16px);
}

.chat-conversation-header.is-session-chat {
    min-height: 82px;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    padding-block: 14px;
    background: rgba(3, 14, 18, .88);
}

.chat-round-action,
.chat-header-action,
.chat-composer-send,
.chat-composer-shortcuts button {
    border: 1px solid rgba(137, 182, 198, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    color: #dff5fb;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.chat-round-action {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
}

.chat-conversation-avatar {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--chat-accent) 44%, transparent);
    border-radius: 8px;
    box-shadow: 0 0 30px color-mix(in srgb, var(--chat-accent) 18%, transparent);
}

.chat-session-avatar,
.chat-message-agent-symbol {
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--chat-accent) 42%, transparent);
    color: var(--chat-accent);
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--chat-accent) 22%, transparent), transparent 58%),
        rgba(4, 18, 23, .94);
}

.chat-session-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.chat-message-agent-symbol {
    width: 38px;
    height: 38px;
    border-radius: 8px;
}

.chat-conversation-heading {
    min-width: 0;
}

.chat-conversation-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.chat-conversation-title-row h1 {
    margin: 0;
    color: #f7fbff;
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
}

.chat-agent-badge {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--chat-accent) 54%, transparent);
    border-radius: 5px;
    color: var(--chat-accent);
    background: color-mix(in srgb, var(--chat-accent) 10%, rgba(2, 9, 12, .8));
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.chat-session-state {
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
    border: 1px solid rgba(105, 191, 224, .22);
    border-radius: 5px;
    color: #a9c6d2;
    background: rgba(255, 255, 255, .035);
    font-size: .67rem;
    font-weight: 920;
    text-transform: uppercase;
}

.chat-session-state::before {
    width: 6px;
    height: 6px;
    content: "";
    border-radius: 999px;
    background: var(--chat-accent);
}

.chat-session-state.is-waiting::before {
    animation: chat-thinking-pulse 1s ease-in-out infinite;
}

.chat-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--chat-accent);
    box-shadow: 0 0 14px var(--chat-accent);
}

.chat-online-label,
.chat-conversation-heading p,
.chat-message-meta,
.chat-composer-shortcuts {
    color: #94adba;
    font-size: .78rem;
    font-weight: 800;
}

.chat-conversation-heading p {
    margin: 8px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-conversation-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-header-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    text-transform: uppercase;
    font-size: .74rem;
}

.chat-header-action.is-danger {
    border-color: rgba(239, 68, 68, .26);
    color: #adbbc4;
}

.chat-conversation-stage {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(960px, calc(100% - 36px));
    margin: 0 auto;
    padding: 34px 0 20px;
}

.chat-session-start-banner {
    width: min(850px, 100%);
    margin: 0 auto 26px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--chat-accent) 36%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--chat-accent) 9%, rgba(3, 13, 17, .9));
}

.chat-session-start-banner > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--chat-accent);
    background: color-mix(in srgb, var(--chat-accent) 17%, transparent);
}

.chat-session-start-banner strong {
    color: var(--chat-accent);
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.chat-session-start-banner p {
    margin: 4px 0 0;
    color: #b7cbd4;
    font-size: .84rem;
    font-weight: 700;
}

.chat-conversation-messages {
    min-height: 0 !important;
    padding: 0 0 30px !important;
    background: transparent !important;
    overflow-y: auto;
}

.chat-message-row {
    display: grid;
    gap: 8px;
    margin-bottom: 24px;
}

.chat-message-row.is-user {
    justify-items: end;
}

.chat-message-row.is-assistant {
    justify-items: start;
}

.chat-message-author {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.chat-message-author img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--chat-accent) 40%, transparent);
}

.chat-message-author strong,
.chat-message-author span {
    display: block;
}

.chat-message-author strong {
    color: var(--chat-accent);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.chat-message-author span {
    color: #8099a7;
    font-size: .72rem;
    font-weight: 800;
}

.chat-agent-page .chat-message-bubble {
    max-width: min(720px, 78vw) !important;
    padding: 18px 20px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.chat-agent-page .chat-message-bubble.is-user {
    border: 1px solid rgba(255, 255, 255, .1) !important;
    background: rgba(255, 255, 255, .085) !important;
    color: #f7fbff !important;
}

.chat-agent-page .chat-message-bubble.is-assistant {
    border: 1px solid color-mix(in srgb, var(--chat-accent) 35%, transparent) !important;
    background: rgba(5, 17, 22, .92) !important;
    color: #f7fbff !important;
}

.chat-message-meta {
    display: block;
    margin-top: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.chat-thinking-row {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #91a9b5;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: none;
}

.chat-thinking-row span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--chat-accent);
    animation: chat-thinking-pulse 1s ease-in-out infinite;
}

.chat-thinking-row span:nth-child(2) {
    animation-delay: .12s;
}

.chat-thinking-row span:nth-child(3) {
    animation-delay: .24s;
}

.chat-thinking-row p {
    margin: 0 0 0 6px;
    color: color-mix(in srgb, #f7fbff 72%, var(--chat-accent));
}

.chat-thinking-row.is-session-thinking,
.chat-session-waiting-state {
    width: min(520px, 100%);
    margin: 4px 0 24px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--chat-accent) 30%, transparent);
    border-radius: 8px;
    background: rgba(5, 18, 23, .76);
}

.chat-session-waiting-state {
    align-self: center;
    justify-self: center;
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    color: #e8f8fc;
}

.chat-session-waiting-state .traguard-simple-spinner {
    width: 28px;
    height: 28px;
    border-width: 2px;
}

.chat-session-waiting-state strong,
.chat-session-waiting-state small {
    display: block;
}

.chat-session-waiting-state strong {
    font-size: .9rem;
    font-weight: 950;
}

.chat-session-waiting-state small {
    margin-top: 3px;
    color: #93afba;
    font-size: .74rem;
    font-weight: 760;
}

@keyframes chat-thinking-pulse {
    0%, 100% {
        opacity: .35;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.chat-composer-shell {
    width: min(850px, 100%);
    margin: 0 auto;
}

.chatbot-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 9px 8px 0;
    color: #9fb4bd;
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.4;
}

.chatbot-disclaimer .mud-icon-root {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--chat-accent, #28dfff);
}

.chatbot-disclaimer p {
    margin: 0;
}

.chatbot-disclaimer strong {
    color: #dcebef;
    font-weight: 900;
}

.chatbot-disclaimer.is-compact {
    grid-column: 1 / -1;
    margin: 0;
    color: #94aeb8;
    font-size: .66rem;
    line-height: 1.35;
}

.chatbot-disclaimer.is-compact .mud-icon-root {
    color: var(--panel-agent-accent, #28dfff);
}

.chat-composer {
    min-height: 64px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 18px;
    border: 1px solid color-mix(in srgb, var(--chat-accent) 38%, rgba(255, 255, 255, .12));
    border-radius: 8px;
    background: rgba(6, 18, 24, .92);
    box-shadow: 0 -16px 42px rgba(0, 0, 0, .28), 0 0 42px color-mix(in srgb, var(--chat-accent) 10%, transparent);
}

.chat-composer > svg {
    color: #9ab1bd;
}

.chat-composer .mud-input-control,
.chat-composer .mud-input {
    margin: 0 !important;
}

.chat-composer .mud-input-root {
    color: #f6fbff !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.chat-composer .mud-input-root::before,
.chat-composer .mud-input-root::after {
    display: none !important;
}

.chat-composer-send {
    min-width: 112px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #061014;
    background: var(--chat-accent);
    border-color: transparent;
    text-transform: uppercase;
}

.chat-composer-send:disabled {
    color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .07);
    cursor: not-allowed;
}

.chat-composer-shortcuts {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 8px 0;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.chat-composer-shortcuts button {
    min-height: 24px;
    padding: 0;
    border: 0;
    color: #a4bbc6;
    background: transparent;
    text-transform: uppercase;
}

.chat-conversation-empty {
    min-height: min(620px, 70vh) !important;
    display: grid !important;
    place-items: center;
    background: transparent !important;
}

.chat-conversation-empty > div {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 440px;
    text-align: center;
}

.chat-conversation-empty h2,
.chat-conversation-empty p {
    margin: 0;
}

.chat-conversation-empty h2 {
    color: #f7fbff;
    font-size: 1.3rem;
}

.chat-conversation-empty p {
    color: #9fb7c2;
}

.chat-conversation-hint {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    padding: 11px 14px;
    border: 1px solid rgba(138, 186, 203, .18);
    border-radius: 8px;
    color: #a9c1cc;
    background: rgba(255, 255, 255, .04);
}

.layout-chat-control {
    position: fixed;
    inset: auto 22px 22px auto;
    z-index: 1400;
    pointer-events: none;
}

.layout-chat-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(40, 223, 255, .42);
    border-radius: 999px;
    color: #28dfff;
    background: linear-gradient(145deg, rgba(5, 28, 35, .96), rgba(4, 13, 17, .96));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .36), 0 0 30px rgba(40, 223, 255, .16);
    cursor: pointer;
    pointer-events: auto;
    transition: transform .2s ease, right .24s ease, background .2s ease;
}

.layout-chat-fab:hover,
.layout-chat-fab:focus-visible {
    transform: translateY(-2px);
    outline: none;
}

.layout-chat-control.is-open .layout-chat-fab {
    right: min(452px, calc(100vw - 78px));
}

.layout-chat-panel {
    position: fixed;
    top: 16px;
    right: 16px;
    bottom: 16px;
    width: min(410px, calc(100vw - 32px));
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    border: 1px solid rgba(117, 159, 177, .18);
    border-radius: 8px;
    background: rgba(5, 14, 19, .97);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .45);
    overflow: hidden;
    transform: translateX(calc(100% + 28px));
    opacity: 0;
    pointer-events: none;
    transition: transform .24s ease, opacity .2s ease;
}

.layout-chat-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.layout-chat-panel-header,
.layout-chat-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(117, 159, 177, .16);
}

.layout-chat-panel-header span,
.layout-chat-section-title span,
.layout-mini-chat-head span {
    color: #91aab7;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.layout-chat-panel-header h2 {
    margin: 4px 0 0;
    color: #f7fbff;
    font-size: 1.2rem;
    font-weight: 950;
}

.layout-chat-panel-actions {
    display: flex;
    gap: 8px;
}

.layout-chat-panel-actions button,
.layout-chat-panel-footer button,
.layout-mini-chat-head button,
.layout-mini-chat-composer button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(137, 182, 198, .18);
    border-radius: 999px;
    color: #cfe7ef;
    background: rgba(255, 255, 255, .055);
    cursor: pointer;
}

.layout-chat-agent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(117, 159, 177, .16);
}

.layout-chat-agent-card {
    --panel-agent-accent: #28dfff;
    min-width: 0;
    min-height: 70px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(137, 182, 198, .14);
    border-radius: 8px;
    color: #d9eef5;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
}

.layout-chat-agent-card.is-traintom {
    --panel-agent-accent: #9af545;
}

.layout-chat-agent-card.is-lara {
    --panel-agent-accent: #ffcf5a;
}

.layout-chat-agent-card.is-active {
    border-color: color-mix(in srgb, var(--panel-agent-accent) 66%, transparent);
    box-shadow: 0 0 28px color-mix(in srgb, var(--panel-agent-accent) 14%, transparent);
}

.layout-chat-agent-card img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 8px;
}

.layout-chat-agent-card strong,
.layout-chat-agent-card small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.layout-chat-agent-card strong {
    color: var(--panel-agent-accent);
    font-size: .78rem;
    font-weight: 950;
}

.layout-chat-agent-card small {
    margin-top: 3px;
    color: #91aab7;
    font-size: .68rem;
    font-weight: 750;
}

.layout-chat-agent-card i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--panel-agent-accent);
    box-shadow: 0 0 12px var(--panel-agent-accent);
}

.layout-chat-panel-body {
    min-height: 0;
    overflow-y: auto;
    padding: 18px 14px;
}

.layout-chat-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 6px 12px;
}

.layout-chat-section-title button {
    border: 0;
    color: #28dfff;
    background: transparent;
    font: inherit;
    font-size: .75rem;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}

.layout-chat-session-list {
    display: grid;
    gap: 10px;
}

.layout-chat-session-card {
    --panel-agent-accent: #28dfff;
    width: 100%;
    min-height: 80px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    align-items: start;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #e9f6fa;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.layout-chat-session-card.is-traintom {
    --panel-agent-accent: #9af545;
}

.layout-chat-session-card.is-lara {
    --panel-agent-accent: #ffcf5a;
}

.layout-chat-session-card.is-active {
    border-color: color-mix(in srgb, var(--panel-agent-accent) 48%, transparent);
    background: rgba(255, 255, 255, .06);
}

.layout-chat-session-card.is-waiting {
    border-color: color-mix(in srgb, var(--panel-agent-accent) 36%, transparent);
}

.layout-chat-session-dot {
    width: 8px;
    height: 8px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--panel-agent-accent);
}

.layout-chat-session-copy {
    min-width: 0;
}

.layout-chat-session-copy strong,
.layout-chat-session-copy small,
.layout-chat-session-copy em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layout-chat-session-copy strong {
    color: #f7fbff;
    font-size: .92rem;
    font-weight: 950;
    white-space: nowrap;
}

.layout-chat-session-copy small {
    margin-top: 5px;
    color: #9db5c0;
    font-size: .78rem;
    font-weight: 750;
    white-space: nowrap;
}

.layout-chat-session-copy em {
    width: fit-content;
    margin-top: 9px;
    padding: 3px 8px;
    border-radius: 5px;
    color: #061014;
    background: var(--panel-agent-accent);
    font-size: .66rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.layout-chat-session-card time {
    color: #8ca5b0;
    font-size: .7rem;
    font-weight: 850;
    text-transform: uppercase;
    white-space: nowrap;
}

.layout-chat-session-status {
    width: 44px;
    min-width: 44px;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
}

.layout-chat-session-status.is-waiting {
    padding-top: 1px;
}

.layout-chat-session-spinner {
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 16px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--panel-agent-accent) 22%, transparent);
    border-top-color: var(--panel-agent-accent);
    border-right-color: color-mix(in srgb, var(--panel-agent-accent) 72%, #ffffff);
    box-shadow: 0 0 14px color-mix(in srgb, var(--panel-agent-accent) 18%, transparent);
    animation: traguardSimpleSpinnerSpin .82s linear infinite;
}

.layout-chat-loading,
.layout-chat-empty {
    min-height: 140px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 18px;
    border: 1px dashed rgba(137, 182, 198, .18);
    border-radius: 8px;
    color: #9fb8c3;
    text-align: center;
}

.layout-mini-chat {
    --panel-agent-accent: #28dfff;
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--panel-agent-accent) 34%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-agent-accent) 7%, rgba(3, 11, 15, .95));
}

.layout-mini-chat.is-traintom {
    --panel-agent-accent: #9af545;
}

.layout-mini-chat.is-lara {
    --panel-agent-accent: #ffcf5a;
}

.layout-mini-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.layout-mini-chat-head strong {
    display: block;
    max-width: 220px;
    margin-top: 3px;
    overflow: hidden;
    color: #f7fbff;
    font-size: .92rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-mini-chat-head button {
    width: auto;
    min-width: 86px;
    padding: 0 10px;
    color: #061014;
    background: var(--panel-agent-accent);
    border-color: transparent;
    font-size: .7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.layout-mini-chat-messages {
    display: grid;
    gap: 8px;
    max-height: 160px;
    overflow: auto;
}

.layout-mini-chat-messages p {
    margin: 0;
    padding: 9px 10px;
    border-radius: 8px;
    color: #dceff5;
    background: rgba(255, 255, 255, .055);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.35;
}

.layout-mini-chat-messages p.is-user {
    margin-left: 24px;
    background: rgba(255, 255, 255, .09);
}

.layout-mini-chat-messages p.is-agent {
    margin-right: 24px;
    border: 1px solid color-mix(in srgb, var(--panel-agent-accent) 26%, transparent);
}

.layout-mini-chat-messages p span {
    display: block;
    margin-bottom: 3px;
    color: var(--panel-agent-accent);
    font-size: .66rem;
    font-weight: 950;
    text-transform: uppercase;
}

.layout-mini-chat-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.layout-mini-chat-composer input {
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(137, 182, 198, .16);
    border-radius: 8px;
    color: #f7fbff;
    background: rgba(255, 255, 255, .055);
    font: inherit;
    font-size: .82rem;
    outline: none;
}

.layout-mini-chat-composer input:focus {
    border-color: color-mix(in srgb, var(--panel-agent-accent) 56%, transparent);
}

.layout-mini-chat-composer button {
    color: #061014;
    background: var(--panel-agent-accent);
    border-color: transparent;
}

.layout-mini-chat-composer button:disabled {
    color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .07);
    cursor: not-allowed;
}

.layout-chat-panel-footer {
    border-top: 1px solid rgba(117, 159, 177, .16);
    border-bottom: 0;
}

.layout-chat-panel-footer > span {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--team-selection-gradient);
    opacity: .78;
}

.layout-chat-panel-footer strong,
.layout-chat-panel-footer small {
    display: block;
}

.layout-chat-panel-footer strong {
    color: #f7fbff;
    font-size: .88rem;
    font-weight: 950;
}

.layout-chat-panel-footer small {
    color: #8fa8b4;
    font-size: .7rem;
    font-weight: 750;
}

.session-report-question-block {
    padding: 13px;
    border: 1px solid rgba(109, 161, 181, .22);
    border-radius: 8px;
    background: rgba(3, 12, 16, .48);
}

.session-report-question-block > span::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: #22dfff;
    box-shadow: 0 0 12px rgba(34, 223, 255, .55);
}

.session-report-question-grid {
    gap: 9px !important;
}

.session-report-question-grid button {
    position: relative;
    justify-content: flex-start !important;
    min-height: 48px !important;
    padding: 10px 12px 10px 24px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .055) !important;
}

.session-report-question-grid button::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 17px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22dfff;
}

.session-report-actions button {
    border-radius: 8px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.session-report-actions button.primary {
    box-shadow: 0 14px 32px rgba(34, 223, 255, .14);
}

@media (max-width: 1180px) {
    .agents-grid {
        grid-template-columns: 1fr !important;
    }

    .chat-conversation-header {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .chat-conversation-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 720px) {
    .agents-page {
        padding: 18px 12px 28px !important;
    }

    .agents-hero-copy::after {
        position: static;
        margin: 8px 0 0;
    }

    .agent-panel {
        min-height: 0 !important;
    }

    .agent-content {
        margin-top: -78px;
    }

    .chat-agent-page.chat-conversation-page {
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }

    .chat-conversation-header {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .chat-conversation-avatar {
        display: none;
    }

    .chat-conversation-title-row {
        flex-wrap: wrap;
    }

    .chat-conversation-stage {
        width: calc(100% - 24px);
        min-height: 70vh;
        padding-top: 22px;
    }

    .chat-composer {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
    }

    .chat-composer > svg {
        display: none;
    }

    .chat-composer-send {
        width: 100%;
    }

    .layout-chat-panel {
        inset: 10px;
        width: auto;
    }

    .layout-chat-control.is-open .layout-chat-fab {
        right: 22px;
        bottom: 22px;
    }
}

/* Chatbot refinement pass */
.agent-visual {
    height: clamp(310px, 29vw, 430px) !important;
    width: 100% !important;
}

.agent-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: scale(1.14) !important;
}

.agent-panel:hover .agent-visual img,
.agent-panel:focus-within .agent-visual img {
    transform: scale(1.18) !important;
}

.agent-content {
    margin-top: -128px !important;
}

.agent-header {
    min-height: 128px !important;
    align-items: center !important;
    padding-bottom: 18px;
}

.agent-header > div {
    transform: translateY(-10px);
}

.agent-chip-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.agent-chip-row span {
    flex: 0 0 auto;
    white-space: nowrap;
}

.agent-suggestion-panel {
    margin-top: auto;
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: rgba(2, 10, 13, .36);
}

.agent-suggestion-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.agent-suggestion-list button,
.chat-suggestion-grid button {
    position: relative;
    min-height: 48px;
    padding: 10px 12px 10px 24px;
    border: 1px solid rgba(137, 182, 198, .18);
    border-radius: 8px;
    color: #dff5fb;
    background: rgba(255, 255, 255, .055);
    font: inherit;
    font-size: .76rem;
    font-weight: 850;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.agent-suggestion-list button::before,
.chat-suggestion-grid button::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 18px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--agent-accent, var(--chat-accent));
    box-shadow: 0 0 12px var(--agent-accent, var(--chat-accent));
}

.agent-suggestion-list button:hover,
.agent-suggestion-list button:focus-visible,
.chat-suggestion-grid button:hover,
.chat-suggestion-grid button:focus-visible {
    border-color: color-mix(in srgb, var(--agent-accent, var(--chat-accent)) 52%, transparent);
    background: color-mix(in srgb, var(--agent-accent, var(--chat-accent)) 10%, rgba(255, 255, 255, .055));
    outline: none;
}

.chat-conversation-stage {
    grid-template-rows: minmax(0, 1fr) auto !important;
    width: min(1240px, calc(100% - 48px)) !important;
    height: calc(100vh - 97px) !important;
    padding: 26px 0 22px !important;
}

.chat-conversation-messages {
    padding: 0 4px 22px !important;
}

.chat-agent-page .chat-message-bubble {
    max-width: min(920px, 74vw) !important;
}

.chat-composer-shell {
    width: min(980px, 100%) !important;
    padding-bottom: 4px;
}

.chat-composer {
    min-height: 68px !important;
}

.chat-composer .mud-input-control-input-container,
.chat-composer .mud-input-slot,
.chat-composer input,
.chat-composer textarea {
    min-height: 42px !important;
    color: #f7fbff !important;
}

.chat-draft-state {
    min-height: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.chat-draft-state.is-compact {
    min-height: 420px;
}

.chat-draft-state h2,
.chat-draft-state p {
    margin: 0;
}

.chat-draft-state h2 {
    color: #f7fbff;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 950;
}

.chat-draft-state p {
    color: #a9bfca;
    font-weight: 760;
}

.chat-suggestion-grid {
    width: min(760px, 100%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.chat-suggestion-grid button {
    --agent-accent: var(--chat-accent);
    min-height: 72px;
}

.layout-chat-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

.layout-chat-panel.is-thread-open {
    width: min(760px, calc(100vw - 32px));
    grid-template-rows: auto minmax(0, 1fr) !important;
}

.layout-chat-control.is-thread-open.is-open .layout-chat-fab {
    right: min(802px, calc(100vw - 78px));
}

.layout-chat-control.is-thread-open.is-open .layout-chat-fab-badges {
    right: min(786px, calc(100vw - 94px));
}

.layout-chat-panel-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.layout-chat-panel-heading > div {
    min-width: 0;
}

.layout-chat-panel-heading h2 {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-thread-back {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(137, 182, 198, .18);
    border-radius: 999px;
    color: #cfe7ef;
    background: rgba(255, 255, 255, .055);
    cursor: pointer;
}

.layout-chat-panel-body {
    padding-bottom: 14px !important;
}

.layout-panel-thread {
    --panel-agent-accent: #28dfff;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(48, 210, 235, .055) 1px, transparent 1px),
        linear-gradient(0deg, rgba(138, 242, 31, .035) 1px, transparent 1px);
    background-size: 54px 54px;
}

.layout-panel-thread.is-traintom {
    --panel-agent-accent: #9af545;
}

.layout-panel-thread.is-lara {
    --panel-agent-accent: #ffcf5a;
}

.layout-panel-thread-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(117, 159, 177, .14);
    background: rgba(4, 13, 17, .76);
}

.layout-panel-thread-meta img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
}

.layout-panel-thread-meta strong,
.layout-panel-thread-meta small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-panel-thread-meta strong {
    color: var(--panel-agent-accent);
    font-size: .8rem;
    font-weight: 950;
    letter-spacing: .1em;
}

.layout-panel-thread-meta small {
    margin-top: 2px;
    color: #91aab7;
    font-size: .72rem;
    font-weight: 760;
}

.layout-panel-thread-messages {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 16px;
    overflow-y: auto;
    padding: 18px;
}

.layout-panel-message {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.layout-panel-message.is-user {
    justify-items: end;
}

.layout-panel-message.is-agent {
    justify-items: start;
}

.layout-panel-message-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #96b5c1;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.layout-panel-message-author img {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    object-fit: cover;
}

.layout-panel-message-bubble {
    max-width: min(92%, 640px);
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid rgba(117, 159, 177, .2);
    border-radius: 8px;
    color: #edf8fc;
    background: rgba(5, 16, 21, .92);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}

.layout-panel-message.is-user .layout-panel-message-bubble {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .09);
}

.layout-panel-message-bubble p {
    margin: 0;
    color: #f3fbff;
    font-size: .9rem;
    line-height: 1.45;
    font-weight: 720;
}

.layout-panel-message-bubble small {
    display: block;
    margin-top: 8px;
    color: #93adba;
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.layout-panel-message-bubble .markdown-content {
    color: #e9f7fb;
    font-size: .9rem;
    line-height: 1.55;
}

.layout-panel-message-bubble .markdown-content p:first-child,
.layout-panel-message-bubble .markdown-content ul:first-child,
.layout-panel-message-bubble .markdown-content ol:first-child {
    margin-top: 0;
}

.layout-panel-message-bubble .markdown-content p:last-child,
.layout-panel-message-bubble .markdown-content ul:last-child,
.layout-panel-message-bubble .markdown-content ol:last-child {
    margin-bottom: 0;
}

.layout-panel-media-stack {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.layout-panel-media-stack .chat-media-frame {
    max-width: 100%;
}

.layout-panel-media-stack .chat-media-content {
    max-height: 420px;
    overflow: auto;
}

.layout-panel-thinking {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--panel-agent-accent) 32%, transparent);
    border-radius: 8px;
    color: #dff5fb;
    background: rgba(255, 255, 255, .055);
    font-size: .78rem;
    font-weight: 850;
}

.layout-panel-thread-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid rgba(117, 159, 177, .16);
    background: rgba(3, 11, 15, .96);
}

.layout-panel-thread-composer textarea {
    min-width: 0;
    max-height: 130px;
    resize: vertical;
    padding: 12px 13px;
    border: 1px solid rgba(137, 182, 198, .18);
    border-radius: 8px;
    color: #f7fbff;
    background: rgba(255, 255, 255, .055);
    font: inherit;
    font-size: .86rem;
    line-height: 1.35;
    outline: none;
}

.layout-panel-thread-composer textarea:focus {
    border-color: color-mix(in srgb, var(--panel-agent-accent) 58%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--panel-agent-accent) 12%, transparent);
}

.layout-panel-thread-composer button {
    width: 46px;
    height: 46px;
    align-self: end;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #061014;
    background: var(--panel-agent-accent);
    cursor: pointer;
}

.layout-panel-thread-composer button:disabled,
.layout-panel-thread-composer textarea:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.layout-mini-chat-footer {
    --panel-agent-accent: #28dfff;
    display: grid;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid rgba(117, 159, 177, .16);
    background: rgba(3, 11, 15, .96);
}

.layout-mini-chat-footer.is-traintom {
    --panel-agent-accent: #9af545;
}

.layout-mini-chat-footer.is-lara {
    --panel-agent-accent: #ffcf5a;
}

.layout-mini-chat-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
}

.layout-mini-chat-summary > span {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--team-selection-gradient);
    opacity: .82;
}

.layout-mini-chat-summary strong,
.layout-mini-chat-summary small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-mini-chat-summary strong {
    color: #f7fbff;
    font-size: .88rem;
    font-weight: 950;
}

.layout-mini-chat-summary small {
    color: #8fa8b4;
    font-size: .7rem;
    font-weight: 750;
}

.layout-mini-chat-summary button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(137, 182, 198, .18);
    border-radius: 999px;
    color: #cfe7ef;
    background: rgba(255, 255, 255, .055);
    cursor: pointer;
}

.layout-mini-chat-summary button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.layout-mini-chat-footer.is-expanded {
    border-color: color-mix(in srgb, var(--panel-agent-accent) 34%, transparent);
    box-shadow: 0 -18px 42px rgba(0, 0, 0, .25);
}

.layout-mini-chat-footer .layout-mini-chat-messages {
    max-height: 190px;
}

.layout-mini-thinking {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    font-style: normal;
}

.layout-mini-thinking i {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 999px;
    background: var(--panel-agent-accent);
    animation: chat-thinking-pulse .9s ease-in-out infinite;
}

.layout-mini-thinking i:nth-child(2) {
    animation-delay: .12s;
}

.layout-mini-thinking i:nth-child(3) {
    animation-delay: .24s;
}

.layout-chat-fab-badges {
    position: fixed;
    right: 6px;
    bottom: 58px;
    z-index: 1402;
    display: grid;
    gap: 8px;
    pointer-events: auto;
}

.layout-chat-control.is-open .layout-chat-fab-badges {
    right: min(436px, calc(100vw - 94px));
}

.layout-chat-fab-badge {
    --panel-agent-accent: #28dfff;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 2px solid color-mix(in srgb, var(--panel-agent-accent) 78%, #ffffff 10%);
    border-radius: 999px;
    color: #f7fbff;
    background:
        radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--panel-agent-accent) 24%, transparent), transparent 54%),
        rgba(4, 14, 18, .96);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, .36),
        0 0 20px color-mix(in srgb, var(--panel-agent-accent) 28%, transparent);
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
    animation: chat-unread-pop .24s ease-out;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.layout-chat-fab-badge.is-traintom {
    --panel-agent-accent: #9af545;
}

.layout-chat-fab-badge:hover,
.layout-chat-fab-badge:focus-visible {
    transform: translateY(-1px) scale(1.04);
    outline: none;
}

@keyframes chat-unread-pop {
    0% {
        opacity: 0;
        transform: scale(.72);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 1180px) {
    .agent-suggestion-list,
    .chat-suggestion-grid {
        grid-template-columns: 1fr;
    }

    .chat-agent-page .chat-message-bubble {
        max-width: min(860px, 86vw) !important;
    }
}

@media (max-width: 720px) {
    .layout-chat-control.is-open .layout-chat-fab-badges {
        right: 6px;
    }

    .layout-chat-panel.is-thread-open {
        width: calc(100vw - 20px);
        top: 10px;
        right: 10px;
        bottom: 10px;
    }

    .layout-chat-control.is-thread-open.is-open .layout-chat-fab {
        right: 22px;
    }

    .layout-chat-control.is-thread-open.is-open .layout-chat-fab-badges {
        right: 6px;
    }

    .layout-panel-message-bubble {
        max-width: 96%;
    }

    .agent-visual {
        height: 300px !important;
    }

    .agent-content {
        margin-top: -104px !important;
    }

    .agent-header {
        min-height: 112px !important;
    }

    .chat-conversation-stage {
        width: calc(100% - 24px) !important;
        height: auto !important;
        min-height: calc(100vh - 120px);
        padding-bottom: 18px !important;
    }
}

/* Chatbot final polish */
.agent-panel {
    border: 1px solid color-mix(in srgb, var(--agent-accent) 26%, rgba(255, 255, 255, .08)) !important;
    padding: 0 !important;
}

.agent-panel:hover,
.agent-panel:focus-within {
    border-color: var(--agent-accent) !important;
    box-shadow:
        inset 0 0 0 1px var(--agent-accent),
        0 34px 98px rgba(0, 0, 0, .38),
        0 0 44px color-mix(in srgb, var(--agent-accent) 15%, transparent) !important;
}

.agent-visual {
    margin: 0 !important;
    border-radius: 0 !important;
}

.agent-visual img {
    display: block !important;
    object-position: center top !important;
}

.agent-content {
    padding-inline: clamp(22px, 2.2vw, 30px) !important;
}

.agent-focus {
    display: none !important;
}

.agent-suggestion-panel {
    margin-top: 18px !important;
}

.chat-route-loader {
    min-height: 100%;
    display: grid;
    place-items: center;
}

.chat-soft-loader {
    width: min(420px, calc(100% - 32px));
    margin: auto;
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 8px;
    color: #e7f8ff;
    background: rgba(5, 18, 23, .78);
    box-shadow: 0 18px 52px rgba(0, 0, 0, .24);
}

.chat-soft-loader .traguard-simple-spinner {
    width: 30px;
    height: 30px;
    border-width: 2px;
    box-shadow: 0 0 16px rgba(22, 216, 255, .14);
}

.chat-soft-loader strong,
.chat-soft-loader small {
    display: block;
    min-width: 0;
}

.chat-soft-loader strong {
    font-size: .92rem;
    font-weight: 950;
    line-height: 1.15;
}

.chat-soft-loader small {
    margin-top: 3px;
    color: #93afba;
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.25;
}

.chat-conversation-stage {
    width: min(1320px, calc(100% - 48px)) !important;
}

.chat-agent-page .chat-message-bubble {
    max-width: min(1040px, 82vw) !important;
}

.chat-composer-shell {
    width: min(1040px, 100%) !important;
}

.chat-composer {
    min-height: 72px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
}

.chat-composer.has-no-attachments {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.chat-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.chat-attach-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(137, 182, 198, .16);
    border-radius: 999px;
    color: #9ab1bd;
    background: rgba(255, 255, 255, .045);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.chat-attach-button:hover,
.chat-attach-button:focus-within {
    color: var(--chat-accent);
    border-color: color-mix(in srgb, var(--chat-accent) 52%, transparent);
    background: color-mix(in srgb, var(--chat-accent) 10%, rgba(255, 255, 255, .045));
}

.chat-composer .mud-input-control {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 46px !important;
}

.chat-composer .mud-input-slot,
.chat-composer textarea {
    min-height: 42px !important;
}

.chat-composer textarea {
    max-height: 98px !important;
    overflow-y: auto !important;
    resize: none !important;
    line-height: 1.35 !important;
}

.chat-attachment-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}

.lara-picker-dialog .mud-dialog-content {
    min-width: min(560px, calc(100vw - 34px));
}

.lara-picker-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin-bottom: 14px;
}

.lara-picker-head svg {
    color: #ffcf5a;
}

.lara-picker-head h2,
.lara-picker-head p {
    margin: 0;
}

.lara-picker-head h2 {
    color: #f7fbff;
    font-size: 1rem;
    font-weight: 950;
}

.lara-picker-head p {
    margin-top: 4px;
    color: #8fa8b4;
    font-size: .78rem;
    font-weight: 760;
}

.lara-picker-search {
    margin-bottom: 12px !important;
}

.lara-picker-list {
    max-height: min(52vh, 420px);
    overflow: auto;
    display: grid;
    gap: 8px;
}

.lara-picker-item {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(137, 182, 198, .15);
    border-radius: 8px;
    color: #dff5fb;
    background: rgba(255, 255, 255, .045);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lara-picker-item:hover,
.lara-picker-item:focus-visible {
    border-color: rgba(255, 207, 90, .56);
    background: rgba(255, 207, 90, .10);
    outline: none;
}

.lara-picker-item strong,
.lara-picker-item small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lara-picker-item strong {
    font-size: .86rem;
    font-weight: 950;
}

.lara-picker-item small {
    margin-top: 2px;
    color: #92aeb9;
    font-size: .72rem;
    font-weight: 760;
}

.lara-picker-empty {
    min-height: 92px;
    display: grid;
    place-items: center;
    gap: 8px;
    border: 1px dashed rgba(137, 182, 198, .2);
    border-radius: 8px;
    color: #9fb8c3;
    font-size: .82rem;
    font-weight: 820;
}

.chat-attachment-chip {
    min-width: 0;
    max-width: min(100%, 360px);
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid color-mix(in srgb, var(--chat-accent) 34%, rgba(255, 255, 255, .12));
    border-radius: 8px;
    color: #dff5fb;
    background: rgba(255, 255, 255, .055);
}

.chat-attachment-chip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 850;
}

.chat-attachment-chip small {
    color: #91aab7;
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

.chat-attachment-chip button {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #b9ccd5;
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
}

.chat-attachment-chip button:hover,
.chat-attachment-chip button:focus-visible {
    color: #061014;
    background: var(--chat-accent);
    outline: none;
}

@media (max-width: 720px) {
    .chat-conversation-stage {
        width: calc(100% - 24px) !important;
    }

    .chat-composer {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .chat-composer.has-no-attachments {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .chat-composer-send {
        grid-column: 1 / -1;
    }
}

/* Session AI briefing refresh */
.session-preview-report-panel:has(.session-ai-briefing) {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 8px !important;
}

.session-ai-briefing {
    --session-ai-accent: #22dfff;
    --session-ai-accent-soft: rgba(34, 223, 255, .12);
    min-height: 100%;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(124, 173, 190, .24);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(6, 22, 27, .94), rgba(2, 10, 13, .98));
}

.session-ai-briefing.is-ai {
    --session-ai-accent: #65d7ff;
    --session-ai-accent-soft: rgba(101, 215, 255, .10);
}

.session-ai-briefing-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.session-ai-briefing-copy {
    min-width: 0;
}

.session-ai-briefing-copy small {
    display: -webkit-box;
    margin-top: 0;
    overflow: hidden;
    color: #9eb9c5;
    font-size: .76rem;
    font-weight: 760;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.session-ai-progress {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--session-ai-accent) 26%, rgba(255, 255, 255, .08));
    border-radius: 8px;
    background: var(--session-ai-accent-soft);
}

.session-ai-progress .traguard-simple-spinner {
    width: 24px;
    height: 24px;
    border-width: 2px;
}

.session-ai-progress strong,
.session-ai-progress small {
    display: block;
    min-width: 0;
}

.session-ai-progress strong {
    color: #effcff;
    font-size: .82rem;
    font-weight: 950;
}

.session-ai-progress small {
    margin-top: 2px;
    color: #9cb7c4;
    font-size: .7rem;
    font-weight: 760;
    line-height: 1.28;
}

.session-ai-media-strip {
    display: grid;
    gap: 10px;
}

.session-ai-media-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(124, 173, 190, .20);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.session-ai-media-label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 7px 9px;
    border-bottom: 1px solid rgba(124, 173, 190, .14);
    color: #d9f5fb;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.session-ai-media-label svg {
    color: var(--session-ai-accent);
}

.session-ai-media-content {
    max-height: 260px;
    overflow: auto;
    padding: 10px;
    background: rgba(1, 8, 10, .58);
}

.session-ai-media-card.is-chart .session-ai-media-content {
    background: #f8fbff;
}

.session-ai-media-card.is-summary .session-ai-media-content {
    background:
        radial-gradient(circle at 18% 0%, rgba(101, 215, 255, .11), transparent 34%),
        rgba(1, 8, 10, .58);
}

.session-ai-media-content svg,
.session-ai-media-content .field-wrapper,
.session-ai-media-content .session-summary-media {
    width: 100%;
    max-width: 100%;
}

.session-ai-media-content .session-summary-media {
    gap: 12px;
    color: #d8eef6;
}

.session-ai-media-content .session-summary-header h3 {
    color: #f6fdff;
    font-size: .92rem;
}

.session-ai-media-content .session-summary-header p {
    color: #93afba;
    font-size: .74rem;
}

.session-ai-media-content .session-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
}

.session-ai-media-content .session-summary-card {
    min-height: 0;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(124, 173, 190, .16);
    border-left: 3px solid var(--summary-accent, var(--session-ai-accent));
    background: rgba(255, 255, 255, .04);
}

.session-ai-media-content .session-summary-card span {
    color: #9db9c5;
    font-size: .68rem;
}

.session-ai-media-content .session-summary-card strong {
    color: #f8fdff;
    font-size: .98rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.session-ai-media-content .session-summary-card small,
.session-ai-media-content .session-summary-highlights {
    color: #8daab7;
}

.session-ai-media-content .field-wrapper {
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
}

.session-ai-core {
    display: grid;
    gap: 10px;
}

.session-ai-section-title {
    color: #e9fbff;
    font-size: .74rem;
    font-weight: 950;
    line-height: 1.2;
    text-transform: uppercase;
}

.session-ai-chat-message {
    display: grid;
    gap: 9px;
    padding: 10px;
    border: 1px solid rgba(124, 173, 190, .18);
    border-radius: 8px;
    background: rgba(1, 8, 10, .46);
}

.session-ai-chat-message .session-ai-section-title {
    color: #a8cbd7;
    font-size: .68rem;
}

.session-ai-chat-message > small {
    display: block;
    color: #88aab7;
    font-size: .68rem;
    font-weight: 760;
    line-height: 1.28;
}

.session-ai-chat-markdown {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #d4eaf1;
    font-size: .78rem;
    font-weight: 760;
    line-height: 1.42;
}

.session-ai-chat-markdown p,
.session-ai-chat-markdown ul,
.session-ai-chat-markdown ol {
    margin: 0;
}

.session-ai-chat-markdown p + p,
.session-ai-chat-markdown p + ul,
.session-ai-chat-markdown p + ol,
.session-ai-chat-markdown ul + p,
.session-ai-chat-markdown ol + p {
    margin-top: 8px;
}

.session-ai-chat-markdown h1,
.session-ai-chat-markdown h2,
.session-ai-chat-markdown h3 {
    margin: 0 0 7px;
    color: #f4fbff;
    font-size: .9rem;
    line-height: 1.18;
    font-weight: 950;
}

.session-ai-chat-markdown ul,
.session-ai-chat-markdown ol {
    padding-left: 18px;
}

.session-ai-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.session-ai-metric-grid span {
    min-width: 0;
    min-height: 86px;
    padding: 10px;
    border: 1px solid rgba(124, 173, 190, .19);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.session-ai-metric-grid em,
.session-ai-metric-grid b,
.session-ai-metric-grid small {
    display: block;
    min-width: 0;
}

.session-ai-metric-grid em {
    overflow: hidden;
    color: #9fbac5;
    font-size: .67rem;
    font-style: normal;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.session-ai-metric-grid b {
    margin-top: 6px;
    overflow-wrap: anywhere;
    color: #f8fdff;
    font-size: 1.02rem;
    font-weight: 950;
    line-height: 1.08;
}

.session-ai-metric-grid small {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: #8daab7;
    font-size: .68rem;
    font-weight: 780;
    line-height: 1.24;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.session-ai-question-block {
    display: grid;
    gap: 9px;
}

.session-ai-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
}

.session-ai-section-title svg {
    color: var(--session-ai-accent);
}

.session-ai-question-grid {
    display: grid;
    gap: 8px;
}

.session-ai-question-grid button {
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(124, 173, 190, .22);
    border-radius: 8px;
    color: #ddf5fb;
    background: rgba(255, 255, 255, .045);
    font: inherit;
    font-size: .76rem;
    font-weight: 850;
    line-height: 1.24;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.session-ai-question-grid button span {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.session-ai-question-grid button svg {
    color: var(--session-ai-accent);
}

.session-ai-question-grid button:not(:disabled):hover,
.session-ai-question-grid button:not(:disabled):focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--session-ai-accent) 56%, rgba(255, 255, 255, .14));
    background: var(--session-ai-accent-soft);
    outline: none;
}

.session-ai-question-grid button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.session-ai-question-grid button.is-asked {
    color: #061014;
    border-color: transparent;
    background: linear-gradient(135deg, #d9f8ff, #65d7ff);
    opacity: 1;
}

.session-ai-question-grid button.is-asked svg {
    color: #061014;
}

.session-ai-question-grid button.is-sending svg {
    animation: sessionPreviewSpin 1s linear infinite;
}

.session-ai-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 9px;
}

.session-ai-actions button {
    min-width: 0;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid rgba(124, 173, 190, .24);
    border-radius: 8px;
    color: #e1f5fb;
    background: rgba(255, 255, 255, .045);
    font: inherit;
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
    cursor: pointer;
}

.session-ai-actions button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-ai-actions button.primary {
    color: #061014;
    border-color: transparent;
    background: linear-gradient(135deg, #d9f8ff, #65d7ff);
    box-shadow: 0 14px 30px rgba(34, 223, 255, .16);
}

.session-ai-actions button:disabled {
    cursor: not-allowed;
    opacity: .52;
}

.session-ai-chat-hint {
    color: #8ca9b5;
    font-size: .7rem;
    font-weight: 760;
    line-height: 1.3;
}

@media (max-width: 1280px) {
    .session-ai-media-content {
        max-height: 340px;
    }
}

@media (max-width: 720px) {
    .session-ai-briefing {
        padding: 13px;
    }

    .session-ai-briefing-head,
    .session-ai-actions {
        grid-template-columns: 1fr;
    }

    .session-ai-metric-grid {
        grid-template-columns: 1fr;
    }
}

/* Documentation hub, contextual help and Lara onboarding. */
.documentation-list-actions .mud-button-root,
.demo-session-header-actions .mud-button-root,
.settings-guidance-actions .mud-button-root {
    min-height: 38px;
    border-radius: 8px;
    letter-spacing: 0;
}

.documentation-directory {
    width: min(100%, 1760px);
    margin: 0 auto 24px;
    padding: 22px 0 26px;
    border-top: 1px solid rgba(120, 169, 184, .18);
    border-bottom: 1px solid rgba(120, 169, 184, .18);
}

.documentation-directory > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.documentation-directory > header > div {
    display: grid;
    gap: 5px;
}

.documentation-directory > header span,
.documentation-visual figcaption > span,
.demo-session-header > div > span,
.demo-session-lara header span,
.demo-session-analysis header span,
.settings-guidance-panel > div > span {
    color: #77eeff;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.documentation-directory h2,
.documentation-directory h3,
.documentation-directory p {
    margin: 0;
    letter-spacing: 0;
}

.documentation-directory h2 {
    color: #f5fbff;
    font-size: 1.45rem;
}

.documentation-directory > header p {
    color: #9bb9c5;
}

.documentation-search {
    width: min(420px, 100%);
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid rgba(119, 238, 255, .24);
    border-radius: 8px;
    background: rgba(3, 13, 18, .76);
    color: #77eeff;
}

.documentation-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f5fbff;
}

.documentation-search input::placeholder {
    color: #718f9b;
}

.documentation-directory-group {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.documentation-directory-group h3 {
    color: #8af21f;
    font-size: .8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.documentation-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.documentation-directory-item {
    min-width: 0;
    min-height: 92px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 8px;
    background: rgba(5, 17, 22, .7);
    color: #edf9fc;
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease;
}

.documentation-directory-item:hover,
.documentation-directory-item:focus-visible {
    border-color: rgba(119, 238, 255, .58);
    background: rgba(9, 31, 38, .92);
    color: #fff;
}

.documentation-directory-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(119, 238, 255, .24);
    border-radius: 8px;
    background: rgba(16, 200, 234, .08);
    color: #77eeff;
}

.documentation-directory-item > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.documentation-directory-item strong {
    font-size: .96rem;
    line-height: 1.2;
}

.documentation-directory-item small {
    color: #91adb8;
    line-height: 1.35;
}

.documentation-empty-index {
    min-height: 150px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    color: #8da9b4;
}

.documentation-section-navigation {
    width: min(100%, 1760px);
    margin: 12px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.documentation-section-navigation a {
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(120, 169, 184, .2);
    border-radius: 8px;
    color: #effbff;
    text-decoration: none;
}

.documentation-section-navigation a.is-next {
    justify-content: flex-end;
    text-align: right;
}

.documentation-section-navigation a span {
    display: grid;
}

.documentation-section-navigation small {
    color: #7f9eaa;
}

.documentation-visual {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(210px, .34fr) minmax(0, 1fr);
    gap: 14px;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(119, 238, 255, .18);
    border-radius: 8px;
    background: rgba(2, 12, 16, .68);
}

.documentation-visual figcaption {
    display: grid;
    align-content: center;
    gap: 6px;
}

.documentation-visual figcaption strong {
    color: #f5fbff;
    font-size: 1.05rem;
}

.documentation-visual figcaption small {
    color: #90acb8;
    line-height: 1.45;
}

.documentation-visual-pitch {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid rgba(126, 199, 157, .22);
    border-radius: 8px;
    background: #06331d;
}

.documentation-visual-pitch .field-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.documentation-visual-pitch .pitch-bg { fill: #06331d; }
.documentation-visual-pitch .pitch-line { stroke: rgba(208, 244, 224, .46); stroke-width: .22; }
.documentation-visual-pitch .pitch-dot { fill: rgba(224, 252, 235, .8); }

.documentation-map-point {
    position: absolute;
    width: var(--point-size);
    height: var(--point-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: var(--point-alpha);
    background: rgba(255, 208, 35, .58);
    box-shadow: 0 0 13px 8px rgba(76, 233, 82, .3), 0 0 4px 2px rgba(255, 70, 88, .65) inset;
}

.is-cloud-metric .documentation-map-point,
.is-heat .documentation-map-point {
    background: rgba(187, 91, 244, .72);
    box-shadow: 0 0 11px 7px rgba(255, 92, 53, .42), 0 0 4px 2px rgba(65, 220, 255, .78) inset;
}

.documentation-player-marker {
    position: absolute;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
    z-index: 3;
}

.documentation-player-marker.marker-a { left: 52%; top: 39%; background: #3a91ff; }
.documentation-player-marker.marker-b { left: 66%; top: 31%; background: #1fcdb9; }

.documentation-track-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.documentation-track-overlay polyline {
    fill: none;
    stroke: #ffcf25;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.documentation-track-overlay circle:first-of-type { fill: #ff4d5e; }
.documentation-track-overlay circle:last-of-type { fill: #21d6ef; }

.documentation-zone {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .34);
    color: #fff;
    font-weight: 900;
}

.documentation-zone.z-one { left: 16%; top: 17%; width: 29%; height: 31%; background: rgba(40, 204, 221, .24); }
.documentation-zone.z-two { left: 45%; top: 17%; width: 34%; height: 64%; background: rgba(255, 201, 27, .2); }
.documentation-zone.z-three { left: 16%; top: 48%; width: 29%; height: 33%; background: rgba(139, 242, 31, .2); }

.documentation-visual-legend {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    color: #8ba7b2;
    font-size: .72rem;
}

.documentation-visual-legend span { display: inline-flex; align-items: center; gap: 5px; }
.documentation-visual-legend i { width: 8px; height: 8px; border-radius: 50%; }
.documentation-visual-legend i.is-low { background: #21d6ef; }
.documentation-visual-legend i.is-mid { background: #8af21f; }
.documentation-visual-legend i.is-high { background: #ff4d5e; }

.documentation-chart-mock,
.documentation-list-mock,
.documentation-flow-mock,
.documentation-chat-mock {
    min-height: 230px;
    border: 1px solid rgba(120, 169, 184, .16);
    border-radius: 8px;
    background: rgba(4, 18, 23, .84);
}

.documentation-chart-mock {
    position: relative;
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 16px;
}

.documentation-chart-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #6f929f;
    font-size: .68rem;
}

.documentation-chart-mock svg {
    width: 100%;
    height: 150px;
    border-bottom: 1px solid rgba(120, 169, 184, .22);
}

.documentation-chart-mock polyline { fill: none; stroke-width: .75; vector-effect: non-scaling-stroke; }
.documentation-chart-mock .series-main { stroke: #20cfe9; }
.documentation-chart-mock .series-secondary { stroke: #8af21f; opacity: .68; }

.documentation-chart-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 10px;
}

.documentation-chart-stats span { display: grid; }
.documentation-chart-stats small { color: #789aa7; }
.documentation-chart-stats strong { color: #eefbff; }

.documentation-list-mock,
.documentation-flow-mock {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 14px;
}

.documentation-list-mock > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 9px;
    padding: 10px;
    border-bottom: 1px solid rgba(120, 169, 184, .14);
}

.documentation-list-avatar {
    grid-row: 1 / 3;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(32, 207, 233, .16);
    color: #77eeff;
    font-weight: 900;
}

.documentation-list-mock strong { color: #f1fbff; }
.documentation-list-mock small { color: #7898a4; }
.documentation-list-mock b { grid-column: 3; grid-row: 1 / 3; color: #8af21f; }

.documentation-flow-mock > div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.documentation-flow-mock i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(119, 238, 255, .34);
    border-radius: 50%;
    color: #77eeff;
    font-style: normal;
    font-weight: 900;
}

.documentation-flow-mock span { display: grid; }
.documentation-flow-mock strong { color: #f2fbff; }
.documentation-flow-mock small { color: #809da8; }

.documentation-chat-mock {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 18px;
}

.documentation-chat-mock img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
}

.documentation-chat-mock > div { display: grid; gap: 8px; }
.documentation-chat-mock strong { color: #8af21f; }
.documentation-chat-mock p { color: #d8e8ed; }
.documentation-chat-mock span { color: #77eeff; font-size: .78rem; font-weight: 800; }

.documentation-compact .documentation-visual {
    grid-template-columns: 1fr;
}

.documentation-compact .documentation-visual figcaption {
    display: none;
}

.documentation-compact .documentation-visual-legend {
    grid-column: 1;
}

.contextual-documentation-help {
    position: fixed;
    right: 24px;
    bottom: 104px;
    z-index: 900;
}

.documentation-help-button,
.session-doc-help-button {
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    background: rgba(4, 17, 22, .88) !important;
    backdrop-filter: blur(8px);
}

.documentation-help-dialog.mud-dialog {
    width: min(1180px, calc(100vw - 40px));
    height: min(88dvh, 900px);
    max-width: none;
    overflow: hidden;
    border: 1px solid rgba(119, 238, 255, .24);
    border-radius: 8px;
    background: #081318;
}

.documentation-help-dialog .mud-dialog-content {
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.session-doc-dialog-shell {
    width: 100%;
    height: 100%;
    max-height: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #081318;
}

.session-doc-dialog-head {
    align-items: center;
    padding: 16px 18px;
}

.session-doc-dialog-head > div:first-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.session-doc-dialog-head p {
    max-width: 690px;
    margin: 4px 0 0;
    color: #91adb8;
    line-height: 1.4;
}

.session-doc-dialog-content {
    min-height: 0;
    max-height: none;
    overflow: auto;
    padding: 18px;
    scrollbar-gutter: stable;
}

.documentation-help-backdrop {
    background: rgba(1, 8, 11, .78) !important;
    backdrop-filter: blur(5px);
}

.settings-hero-actions,
.demo-session-header-actions,
.settings-guidance-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.settings-guidance-panel {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border: 1px solid rgba(119, 238, 255, .22);
    border-radius: 8px;
    background: rgba(6, 23, 29, .74);
}

.settings-guidance-icon,
.settings-guidance-icon img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.settings-guidance-icon img { object-fit: cover; }
.settings-guidance-panel h2 { margin: 2px 0; color: #f5fbff; font-size: 1.2rem; }
.settings-guidance-panel p { margin: 0; color: #91adb8; }

.demo-session-page {
    min-height: 100vh;
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 22px 34px 46px;
    color: #f4fbfd;
    background: #061116;
}

.demo-session-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.demo-session-header h1 {
    margin: 3px 0 4px;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0;
}

.demo-session-header p { max-width: 760px; margin: 0; color: #9ab5bf; }

.demo-session-summary {
    display: grid;
    grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(119, 238, 255, .22);
    border-radius: 8px;
    background: rgba(7, 27, 34, .76);
}

.demo-session-title { display: flex; align-items: center; gap: 12px; }
.demo-session-title > span { padding: 5px 9px; border: 1px solid rgba(138, 242, 31, .4); border-radius: 999px; color: #8af21f; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.demo-session-title > div { display: grid; gap: 3px; }
.demo-session-title strong { font-size: 1.15rem; }
.demo-session-title small { color: #8eaab5; }

.demo-summary-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.demo-summary-metrics article {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid rgba(120, 169, 184, .18);
    border-radius: 8px;
    background: rgba(3, 14, 18, .72);
}

.demo-summary-metrics small { color: #83a4b0; text-transform: uppercase; font-weight: 800; }
.demo-summary-metrics strong { color: #fff; font-size: 1.2rem; }
.demo-summary-metrics span { color: #77eeff; font-size: .72rem; }

.demo-session-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;
}

.demo-session-map,
.demo-session-lara,
.demo-session-analysis {
    min-width: 0;
    border: 1px solid rgba(120, 169, 184, .2);
    border-radius: 8px;
    background: rgba(5, 20, 25, .76);
}

.demo-session-map { position: relative; padding: 13px; }
.demo-session-map > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; }
.demo-session-map > header > div:first-child { display: grid; }
.demo-session-map > header span { color: #7f9da9; font-size: .72rem; text-transform: uppercase; }
.demo-map-tabs { display: flex; align-items: center; gap: 12px; }
.demo-map-tabs b { color: #77eeff; }
.demo-map-tabs span { color: #7f9da9; }
.demo-session-map .documentation-visual { grid-template-columns: 1fr; padding: 0; border: 0; }
.demo-session-map .documentation-visual figcaption { display: none; }
.demo-session-map .documentation-visual-pitch { min-height: 470px; }
.demo-session-map .documentation-visual-legend { grid-column: 1; }

.demo-timeline {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 33px;
    min-height: 46px;
    display: grid;
    grid-template-columns: 34px auto minmax(100px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid rgba(119, 238, 255, .3);
    border-radius: 8px;
    background: rgba(3, 13, 18, .9);
}

.demo-timeline button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #77eeff; border-radius: 50%; background: transparent; color: #77eeff; }
.demo-timeline strong,
.demo-timeline > span { font-size: .72rem; }
.demo-timeline > i { position: relative; height: 3px; background: #24424d; }
.demo-timeline > i span { position: absolute; left: 52%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: #20cfe9; }

.demo-session-lara { display: grid; align-content: start; gap: 14px; padding: 16px; }
.demo-session-lara header { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 10px; }
.demo-session-lara header img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.demo-session-lara header div { display: grid; }
.demo-session-lara p,
.demo-session-lara li { color: #aec3cb; line-height: 1.5; }
.demo-session-lara p { margin: 0; }
.demo-session-lara ol { display: grid; gap: 8px; margin: 0; padding-left: 20px; }

.demo-session-analysis { display: grid; gap: 14px; padding: 16px; }
.demo-session-analysis > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo-session-analysis h2 { margin: 2px 0 0; font-size: 1.35rem; }
.demo-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr); gap: 12px; }
.demo-analysis-chart { min-height: 250px; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: 1fr auto; padding: 14px; border: 1px solid rgba(120, 169, 184, .16); border-radius: 8px; background: #051419; }
.demo-analysis-chart svg { width: 100%; height: 205px; border-bottom: 1px solid rgba(120, 169, 184, .2); }
.demo-analysis-chart polyline { fill: none; stroke-width: .75; vector-effect: non-scaling-stroke; }
.demo-series-a { stroke: #3aa4ff; }
.demo-series-b { stroke: #23d8c5; }
.demo-chart-y { display: flex; flex-direction: column; justify-content: space-between; color: #7897a3; font-size: .68rem; }
.demo-chart-legend { grid-column: 1 / -1; display: flex; gap: 12px; padding-top: 10px; color: #9cb5be; }
.demo-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.demo-chart-legend i { width: 9px; height: 9px; border-radius: 50%; }
.demo-chart-legend i.a { background: #3aa4ff; }
.demo-chart-legend i.b { background: #23d8c5; }

.demo-player-table { display: grid; align-content: start; border: 1px solid rgba(120, 169, 184, .16); border-radius: 8px; overflow: hidden; }
.demo-player-table > div { min-height: 56px; display: grid; grid-template-columns: minmax(170px, 1fr) repeat(3, 85px); align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid rgba(120, 169, 184, .14); }
.demo-player-table > div:last-child { border-bottom: 0; }
.demo-player-table .is-head { min-height: 38px; color: #77eeff; font-size: .68rem; font-weight: 900; text-transform: uppercase; background: rgba(119, 238, 255, .05); }
.demo-player-table > div > span:first-child { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 0 8px; }
.demo-player-table > div > span:first-child i { grid-row: 1 / 3; align-self: center; width: 9px; height: 9px; border-radius: 50%; }
.demo-player-table strong { color: #f4fbfd; }
.demo-player-table small { color: #7898a4; }
.demo-player-table b { color: #dcebef; }

.demo-reading-rule { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(138, 242, 31, .22); border-radius: 8px; color: #8af21f; background: rgba(138, 242, 31, .04); }
.demo-reading-rule p { margin: 0; color: #b6cbd2; }
.demo-reading-rule strong { color: #eaffdd; }

.lara-tour-layer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
}

.lara-tour-guard,
.lara-tour-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: auto;
}

.lara-tour-guard { z-index: 0; background: transparent; }
.lara-tour-backdrop { z-index: 1; background: rgba(1, 8, 11, .82); backdrop-filter: blur(3px); }

.lara-tour-spotlight {
    position: fixed;
    z-index: 1;
    border: 2px solid #77eeff;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(1, 8, 11, .82), 0 0 0 5px rgba(119, 238, 255, .12);
    pointer-events: none;
    transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}

.lara-tour-popover {
    position: fixed;
    z-index: 2;
    width: min(430px, calc(100vw - 24px));
    max-height: min(670px, calc(100dvh - 24px));
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(119, 238, 255, .42);
    border-radius: 8px;
    background: #07171d;
    color: #f4fbfd;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .46);
    pointer-events: auto;
}

.lara-tour-popover > header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
}

.lara-tour-popover > header img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; }
.lara-tour-popover > header > div { display: grid; }
.lara-tour-popover > header span { color: #8af21f; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.lara-tour-popover > header strong { font-size: 1rem; }
.lara-tour-popover > header button,
.lara-tour-question button { display: grid; place-items: center; border: 0; background: transparent; color: #b8cbd2; }

.lara-tour-progress { height: 3px; background: #193039; }
.lara-tour-progress i { display: block; height: 100%; background: #20cfe9; transition: width .18s ease; }

.lara-tour-copy { display: grid; gap: 7px; padding: 13px 14px 8px; }
.lara-tour-copy span { color: #6f95a2; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.lara-tour-copy p { margin: 0; color: #c2d5dc; line-height: 1.48; }

.lara-tour-chat { min-height: 0; display: grid; grid-template-rows: minmax(84px, 1fr) auto auto auto; gap: 9px; padding: 10px 14px 14px; overflow: hidden; }
.lara-tour-thread { min-height: 84px; max-height: 245px; display: grid; align-content: start; gap: 8px; overflow: auto; padding-right: 3px; scrollbar-width: thin; }
.lara-tour-message { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; }
.lara-tour-message > img { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; }
.lara-tour-message > div { min-width: 0; display: grid; gap: 3px; padding: 8px 9px; border: 1px solid rgba(119, 238, 255, .16); border-radius: 8px; background: rgba(4, 17, 22, .92); }
.lara-tour-message span { color: #75a4b4; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.lara-tour-message p { margin: 0; color: #c8d9de; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.lara-tour-message.is-guide > div { border-color: rgba(138, 242, 31, .24); background: rgba(138, 242, 31, .045); }
.lara-tour-message.is-guide span { color: #8af21f; }
.lara-tour-message.is-user { grid-template-columns: minmax(0, 1fr); padding-left: 38px; }
.lara-tour-message.is-user > div { justify-self: end; border-color: rgba(32, 207, 233, .32); background: rgba(32, 207, 233, .09); }
.lara-tour-message.is-user span { color: #77eeff; }
.lara-tour-message.is-error > div { border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .08); }
.lara-tour-message.is-error span { color: #ff7a82; }
.lara-tour-message.is-typing p { display: flex; align-items: center; gap: 4px; min-height: 14px; }
.lara-tour-message.is-typing p i { width: 5px; height: 5px; border-radius: 50%; background: #8af21f; animation: lara-tour-typing 1s infinite ease-in-out; }
.lara-tour-message.is-typing p i:nth-child(2) { animation-delay: .14s; }
.lara-tour-message.is-typing p i:nth-child(3) { animation-delay: .28s; }
.lara-tour-chat-error { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 7px; align-items: center; padding: 8px 9px; border: 1px solid rgba(239, 68, 68, .32); border-radius: 8px; color: #ff8c92; background: rgba(239, 68, 68, .07); font-size: .74rem; }
.lara-tour-question { min-height: 40px; display: grid; grid-template-columns: 1fr 36px; align-items: center; border: 1px solid rgba(119, 238, 255, .22); border-radius: 8px; background: #041116; }
.lara-tour-question input { min-width: 0; border: 0; outline: 0; padding: 0 10px; background: transparent; color: #f4fbfd; }
.lara-tour-question button { width: 36px; height: 36px; color: #77eeff; }
.lara-tour-question button:disabled { color: #49636d; }
.lara-tour-full-chat { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #77eeff; font-size: .75rem; font-weight: 800; }

.lara-tour-popover > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-top: 1px solid rgba(120, 169, 184, .16); }
.lara-tour-popover > footer button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border-radius: 8px; font-weight: 800; }
.lara-tour-popover > footer button.is-secondary { border: 1px solid rgba(120, 169, 184, .3); background: transparent; color: #b8ccd3; }
.lara-tour-popover > footer button.is-chapter { margin-inline: auto; border: 0; background: transparent; color: #77eeff; font-size: .68rem; text-transform: uppercase; }
.lara-tour-popover > footer button.is-primary { border: 1px solid #20cfe9; background: #20cfe9; color: #031014; }
.lara-tour-popover > footer button:disabled { opacity: .42; }

@keyframes lara-tour-typing {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-2px); }
}

@media (max-width: 1180px) {
    .documentation-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-session-workspace,
    .demo-analysis-grid { grid-template-columns: 1fr; }
    .demo-session-lara { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
    .demo-session-lara > p,
    .demo-session-lara > ol,
    .demo-session-lara > .mud-button-root { grid-column: 2; }
}

@media (max-width: 820px) {
    .documentation-directory > header,
    .demo-session-header { align-items: stretch; flex-direction: column; }
    .documentation-search { width: 100%; }
    .documentation-directory-grid,
    .documentation-section-navigation,
    .documentation-visual,
    .demo-session-summary,
    .demo-summary-metrics { grid-template-columns: 1fr; }
    .documentation-visual-legend { grid-column: 1; }
    .demo-summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-session-page { padding: 18px 14px 36px; }
    .demo-session-map .documentation-visual-pitch { min-height: 360px; }
    .settings-guidance-panel { grid-template-columns: 50px minmax(0, 1fr); }
    .settings-guidance-icon,
    .settings-guidance-icon img { width: 48px; height: 48px; }
    .settings-guidance-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .contextual-documentation-help { right: 14px; bottom: 116px; }
    .session-doc-dialog-head { display: grid; }
    .session-doc-dialog-actions { justify-content: flex-start; }
    .documentation-help-dialog.mud-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
}

@media (max-width: 560px) {
    .documentation-directory-grid { grid-template-columns: 1fr; }
    .documentation-visual-pitch { min-height: 220px; }
    .documentation-chart-stats { grid-template-columns: 1fr; }
    .demo-summary-metrics { grid-template-columns: 1fr 1fr; }
    .demo-session-lara { grid-template-columns: 1fr; }
    .demo-session-lara > p,
    .demo-session-lara > ol,
    .demo-session-lara > .mud-button-root { grid-column: 1; }
    .demo-player-table { overflow-x: auto; }
    .demo-player-table > div { min-width: 610px; }
    .demo-timeline { left: 4%; right: 4%; grid-template-columns: 32px auto minmax(60px, 1fr) auto; }
    .demo-timeline > span { display: none; }
    .lara-tour-popover { left: 12px !important; right: 12px; bottom: 12px; top: auto !important; width: auto; max-height: calc(100dvh - 24px); transform: none !important; }
}
.settings-commercial-panel { border: 1px solid var(--border-color, #24434a); background: #0b1b1f; padding: 22px; border-radius: 6px; }
.settings-commercial-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.settings-commercial-heading span { color: #63dce7; font-size: .72rem; font-weight: 800; }
.settings-commercial-heading h2 { margin: 4px 0; font-size: 1.35rem; }
.settings-commercial-heading p, .token-balance-row small, .token-request-item span, .token-request-item small, .settings-empty { color: #93abb0; }
.commercial-snapshot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 18px; background: #24434a; border: 1px solid #24434a; }
.commercial-snapshot > div { display: flex; flex-direction: column; gap: 5px; padding: 14px; background: #0d2227; }
.commercial-snapshot span { color: #93abb0; font-size: .72rem; text-transform: uppercase; font-weight: 700; }
.token-balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.token-balance-row { display: flex; flex-direction: column; gap: 8px; }
.token-balance-row > div { display: flex; justify-content: space-between; gap: 10px; }
.token-request-area { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 24px; padding-top: 22px; margin-top: 22px; border-top: 1px solid #24434a; }
.token-request-form, .token-request-history { display: flex; flex-direction: column; gap: 14px; }
.token-request-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #203b42; }
.token-request-item > div { display: flex; flex-direction: column; }
.token-request-item > small { grid-column: 1 / 3; }
@media (max-width: 800px) { .commercial-snapshot { grid-template-columns: 1fr 1fr; } .token-balance-grid, .token-request-area { grid-template-columns: 1fr; } }