.page-teams main > .container > .surface.section {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 250, 252, 0.94)),
        url("../assets/graphics/stadium-bat-ball.svg") center top / cover no-repeat;
}

.team-layout {
    display: grid;
    gap: 0.62rem;
    align-items: start;
}

.team-mobile-switch {
    display: none;
}

.team-mobile-switch-btn {
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--white) 94%, transparent);
    color: var(--ink-700);
    min-height: 40px;
    padding: 0.42rem 0.72rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.team-mobile-switch-btn.active {
    border-color: color-mix(in srgb, var(--teal-500) 48%, var(--border));
    background: color-mix(in srgb, var(--teal-500) 14%, #ffffff);
    color: #0f5f69;
    box-shadow: 0 10px 20px rgba(20, 49, 69, 0.1);
}

.team-mobile-switch-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal-500) 45%, var(--border));
    outline-offset: 1px;
}

.team-sidebar,
.team-main {
    display: grid;
    gap: 0.62rem;
    min-width: 0;
}

.team-panel {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
    background: color-mix(in srgb, var(--white) 90%, rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(16px);
}

.selected-team-panel {
    scroll-margin-top: 5.4rem;
}

.team-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.58rem;
    flex-wrap: wrap;
}

.team-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(8.75rem, 1fr));
    align-items: center;
    gap: 0.38rem;
    width: min(100%, 18rem);
}

.team-header-actions .btn-compact {
    min-height: 2.42rem;
    padding: 0.42rem 0.72rem;
    font-size: 0.82rem;
    justify-content: center;
    width: 100%;
}

.team-page-copy {
    display: grid;
    gap: 0.08rem;
    max-width: 38rem;
}

.team-page-kicker {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-700);
}

#team-notice {
    margin-top: 0.58rem;
}

.team-list {
    display: grid;
    gap: 0.42rem;
    max-height: 620px;
    overflow: auto;
    padding-right: 0.16rem;
}

.team-list-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--white) 93%, transparent);
    padding: 0.56rem;
    display: grid;
    gap: 0.24rem;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.team-list-select {
    appearance: none;
    width: auto;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 0;
}

.team-list-item:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--teal-500) 34%, var(--border));
    box-shadow: 0 16px 24px rgba(18, 30, 46, 0.08);
}

.team-list-item.is-active {
    border-color: color-mix(in srgb, var(--teal-500) 42%, var(--border));
    background: linear-gradient(180deg, rgba(229, 248, 246, 0.9), rgba(255, 255, 255, 0.96));
    box-shadow: 0 18px 28px rgba(12, 36, 48, 0.12);
}

.team-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.team-list-kicker {
    display: inline-flex;
    margin-bottom: 0.14rem;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.team-list-name {
    font-size: 0.98rem;
    line-height: 1.12;
    color: var(--ui-text);
}

.team-list-name:hover {
    color: var(--teal-700);
}

.team-list-name:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal-500) 45%, var(--border));
    outline-offset: 2px;
    border-radius: 0.35rem;
}

.team-list-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.team-manage-btn {
    min-height: 38px;
}

.team-list-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--ui-muted);
}

.team-detail-shell {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.selected-team-label {
    margin: 0;
    font-size: clamp(0.94rem, 1.8vw, 1.14rem);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-600);
}

.team-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.52rem 0.8rem;
    flex-wrap: wrap;
    min-width: 0;
}

.team-head-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    min-width: 0;
}

.pending-requests-btn {
    position: relative;
    min-height: 2.18rem;
    padding: 0.34rem 0.72rem;
    overflow: visible;
    white-space: nowrap;
}

.pending-requests-btn.has-pending {
    border-color: color-mix(in srgb, var(--gold-500) 58%, var(--border));
    background: color-mix(in srgb, var(--gold-500) 17%, #ffffff);
    color: #745100;
    box-shadow: 0 12px 22px rgba(150, 105, 4, 0.12);
}

.pending-request-badge {
    position: absolute;
    top: -0.54rem;
    right: -0.52rem;
    min-width: 1.32rem;
    height: 1.32rem;
    padding: 0 0.28rem;
    border: 2px solid var(--white);
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: var(--red-500);
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(141, 35, 44, 0.28);
}

.team-name-hero {
    margin: 0;
    font-size: clamp(1.52rem, 1.24rem + 1.25vw, 2.18rem);
    letter-spacing: 0.02em;
    line-height: 1.08;
    color: var(--ink-900);
}

.team-detail-description {
    margin: 0.24rem 0 0;
    max-width: 48rem;
    color: var(--ink-600);
    line-height: 1.45;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.team-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.7rem;
    flex-wrap: wrap;
    min-width: 0;
}

.team-section-head h4 {
    margin: 0.08rem 0 0;
    font-size: 0.96rem;
    line-height: 1.15;
    color: var(--ink-900);
}

.team-pending-panel,
.team-roster-section,
.team-add-player-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
    padding: 0.62rem;
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.team-pending-panel {
    border-color: color-mix(in srgb, var(--gold-500) 42%, var(--border));
    background: color-mix(in srgb, var(--gold-500) 9%, var(--surface-strong));
}

.pending-count-chip {
    border-color: color-mix(in srgb, var(--gold-500) 48%, var(--border));
    background: color-mix(in srgb, var(--gold-500) 15%, #ffffff);
    color: #745100;
}

.team-ready-helper {
    padding: 0.7rem 0.78rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
}

.team-ready-helper strong {
    display: block;
    margin-bottom: 0.18rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.team-ready-helper p {
    margin: 0;
    line-height: 1.35;
}

.team-ready-helper-warning {
    border-color: color-mix(in srgb, var(--gold-500) 55%, var(--border));
    background: color-mix(in srgb, var(--gold-500) 15%, transparent);
}

.team-ready-helper-ok {
    border-color: color-mix(in srgb, var(--green-500) 45%, var(--border));
    background: color-mix(in srgb, var(--green-500) 14%, transparent);
}

.team-ready-helper-top {
    margin-top: 0.12rem;
}

.team-create-helper {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    color: var(--ink-500);
    font-weight: 700;
}

.roster-scroll {
    max-height: 418px;
    overflow: auto;
    padding-right: 0.14rem;
}

.team-roster-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.team-roster-table th,
.team-roster-table td {
    padding: 0.58rem 0.46rem;
    line-height: 1.2;
    vertical-align: middle;
}

.team-roster-table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.05em;
}

.team-roster-table td {
    white-space: nowrap;
}

.team-roster-table td:not(:last-child) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-roster-table td:nth-child(1) .player-name-btn {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.team-roster-table th:nth-child(1),
.team-roster-table td:nth-child(1) {
    width: 17%;
}

.team-roster-table th:nth-child(2),
.team-roster-table td:nth-child(2) {
    width: 13%;
}

.team-roster-table th:nth-child(3),
.team-roster-table td:nth-child(3) {
    width: 11%;
}

.team-roster-table th:nth-child(4),
.team-roster-table td:nth-child(4) {
    width: 17%;
}

.team-roster-table th:nth-child(5),
.team-roster-table td:nth-child(5) {
    width: 8%;
}

.team-roster-table th:nth-child(6),
.team-roster-table td:nth-child(6) {
    width: 34%;
}

.ops-title {
    margin: 0;
    font-size: 0.94rem;
    letter-spacing: 0.02em;
    color: var(--ink-900);
}

.mark-ready-btn {
    padding: 0.31rem 0.62rem;
    font-size: 0.73rem;
    font-weight: 700;
    min-height: 0;
    white-space: nowrap;
    box-shadow: none;
}

.inline-add-member {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
    padding: 0.62rem;
    display: grid;
    gap: 0.48rem;
}

.team-add-player-toggle {
    justify-self: start;
    min-width: 9.2rem;
}

.team-add-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}

.team-add-option {
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--white) 86%, transparent);
    padding: 0.58rem;
    display: grid;
    align-content: start;
    gap: 0.48rem;
    min-width: 0;
}

.team-add-option-head,
.team-add-option-button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
}

.team-add-option h4 {
    margin: 0.08rem 0 0;
    font-size: 0.92rem;
    line-height: 1.18;
    color: var(--ink-900);
}

.team-add-option-icon {
    width: 2.34rem;
    height: 2.34rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--teal-500) 14%, #ffffff);
    color: var(--teal-700);
    border: 1px solid color-mix(in srgb, var(--teal-500) 24%, var(--border));
}

.team-add-option-icon svg,
.team-share-icon-btn svg {
    width: 1.16rem;
    height: 1.16rem;
    display: block;
    fill: currentColor;
}

.team-add-option-button {
    appearance: none;
    width: 100%;
    height: 100%;
    min-height: 5rem;
    color: var(--ink-900);
    text-align: left;
    cursor: pointer;
}

.team-add-option-button strong {
    display: block;
    margin-top: 0.08rem;
    font-size: 0.9rem;
    line-height: 1.18;
    color: var(--ink-900);
}

.team-add-option-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal-500) 42%, var(--border));
    outline-offset: 2px;
    border-radius: 0.46rem;
}

.team-share-icon-btn {
    min-width: 2.5rem;
    width: 2.5rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
}

.team-add-player-panel .inline-add-member {
    background: color-mix(in srgb, var(--white) 80%, transparent);
}

.team-details-modal,
.team-add-modal,
.team-requests-modal {
    width: min(29rem, calc(100vw - 1.7rem));
    max-height: min(86vh, 42rem);
    display: grid;
    gap: 0.72rem;
    padding: 0.88rem;
}

.team-details-modal-content,
.team-add-modal-content,
.team-requests-modal-content {
    display: grid;
    gap: 0.62rem;
    min-width: 0;
    overflow: auto;
    padding-right: 0.1rem;
}

.team-add-modal .inline-add-member {
    margin-top: 0.12rem;
}

.team-requests-modal-summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
}

.team-details-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.72rem;
}

.team-details-identity h3 {
    margin: 0;
    color: var(--ink-900);
    font-size: 1.2rem;
    line-height: 1.12;
}

.team-details-identity p {
    margin: 0.2rem 0 0;
}

.team-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
}

.team-detail-item,
.team-detail-note {
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--white) 86%, transparent);
    padding: 0.58rem;
    display: grid;
    gap: 0.18rem;
}

.team-detail-item span,
.team-detail-note span {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.team-detail-item strong {
    color: var(--ink-900);
    font-size: 0.88rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.team-detail-note p {
    margin: 0;
    color: var(--ink-700);
    font-size: 0.86rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.inline-add-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--ink-900);
}

.inline-add-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.62rem;
    flex-wrap: wrap;
}

.inline-add-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: 0.42rem;
}

#add-member-inline-notice {
    margin-top: 0.1rem;
}

.team-join-strip {
    border: 1px solid color-mix(in srgb, var(--teal-500) 20%, var(--border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
    padding: 0.52rem;
    display: grid;
    gap: 0.48rem;
}

.team-join-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.5rem;
}

.team-join-field {
    min-width: 0;
}

.team-join-field input {
    width: 100%;
}

#join-team-notice {
    margin: 0;
}

.team-invite-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 0.62rem;
}

.team-invite-box,
.team-join-requests-box {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
    padding: 0.62rem;
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
}

.team-invite-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.team-invite-head h4 {
    margin: 0.08rem 0 0;
    font-size: 0.96rem;
    line-height: 1.15;
}

.team-invite-copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.42rem;
}

.team-invite-copy-row input {
    min-width: 0;
    font-size: 0.82rem;
    cursor: pointer;
}

.team-share-btn {
    min-width: 3.2rem;
    padding: 0.32rem 0.56rem;
    font-size: 0.74rem;
}

.team-share-modal-overlay,
.team-details-modal-overlay,
.team-add-modal-overlay,
.team-requests-modal-overlay {
    z-index: 1450;
    top: clamp(4.7rem, 8vw, 5.8rem);
    bottom: 0.9rem;
    left: 0;
    right: 0;
    padding: 0.85rem;
    align-items: center;
    align-content: center;
    background: rgba(16, 32, 58, 0.28);
}

.team-share-modal {
    width: min(24rem, calc(100vw - 1.7rem));
    max-height: 100%;
    display: grid;
    gap: 0.72rem;
    padding: 0.88rem;
}

.team-share-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.team-share-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.team-share-head-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.team-share-head-copy h4 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.15;
    color: var(--ink-900);
}

.team-share-modal-card {
    border: 1px solid color-mix(in srgb, var(--teal-500) 18%, var(--border));
    border-radius: 1rem;
    background:
        radial-gradient(circle at top right, rgba(21, 163, 155, 0.08), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 250, 252, 0.98));
    padding: 0.78rem;
    display: grid;
    justify-items: center;
    gap: 0.56rem;
    text-align: center;
}

.team-share-modal-link-only .team-share-modal {
    width: min(22rem, calc(100vw - 1.7rem));
}

.team-share-modal-link-only #team-share-preview {
    display: none;
}

.team-qr-card-preview {
    gap: 0.42rem;
}

.team-qr-avatar {
    width: 4.3rem;
    height: 4.3rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, #0ea5e9, #15a39b);
    color: #ffffff;
    font-size: 1.72rem;
    font-weight: 900;
    letter-spacing: 0;
}

.team-qr-team-name {
    color: var(--ink-900);
    font-size: 1rem;
    line-height: 1.15;
}

.team-qr-location {
    margin-top: -0.22rem;
    color: var(--ink-500);
    font-size: 0.78rem;
    line-height: 1.2;
}

.team-share-qr-frame {
    width: min(10.5rem, 54vw);
    aspect-ratio: 1;
    padding: 0.38rem;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(17, 37, 63, 0.12);
}

.team-share-qr-frame img {
    display: block;
    width: 100%;
    height: 100%;
}

.team-share-modal-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.42rem;
}

.team-share-modal-option {
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 252, 0.98));
    color: var(--ink-900);
    min-height: 5.1rem;
    padding: 0.56rem 0.28rem 0.48rem;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.36rem;
    text-align: center;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.team-share-modal-option:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--teal-500) 34%, var(--border));
    box-shadow: 0 12px 24px rgba(17, 37, 63, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(237, 246, 248, 0.98));
}

.team-share-modal-option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal-500) 42%, var(--border));
    outline-offset: 2px;
}

.team-share-modal-icon {
    width: 2.34rem;
    height: 2.34rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    color: #ffffff;
    box-shadow: inset 0 -7px 12px rgba(0, 0, 0, 0.1), 0 10px 18px rgba(17, 37, 63, 0.12);
}

.team-share-modal-icon svg {
    width: 1.18rem;
    height: 1.18rem;
    display: block;
    fill: currentColor;
}

.team-share-option-whatsapp .team-share-modal-icon {
    background: #25d366;
}

.team-share-option-sms .team-share-modal-icon {
    background: #0ea5e9;
}

.team-share-option-x .team-share-modal-icon {
    background: #111827;
}

.team-share-option-email .team-share-modal-icon {
    background: #f97316;
}

.team-share-option-instagram .team-share-modal-icon {
    background: linear-gradient(135deg, #f58529 0%, #dd2a7b 48%, #8134af 100%);
}

.team-share-modal-label {
    font-size: 0.71rem;
    line-height: 1.15;
    font-weight: 800;
    color: var(--ink-700);
}

.team-share-message {
    margin: 0;
    font-size: 0.81rem;
    line-height: 1.4;
    color: var(--ink-600);
}

.team-share-message strong {
    color: var(--ink-900);
}

.team-share-link-highlight {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 0.44rem 0.72rem;
    border: 1px solid color-mix(in srgb, var(--teal-500) 32%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--teal-500) 10%, #ffffff);
    color: #0f5f69;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.team-share-link-highlight:hover {
    border-color: color-mix(in srgb, var(--teal-500) 48%, var(--border));
    background: color-mix(in srgb, var(--teal-500) 16%, #ffffff);
    color: #0c4f58;
    box-shadow: 0 10px 18px rgba(17, 37, 63, 0.1);
}

.team-share-link-highlight:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal-500) 42%, var(--border));
    outline-offset: 2px;
}

.team-join-request-list {
    display: grid;
    gap: 0.45rem;
}

.team-join-empty {
    padding: 0.62rem;
}

.team-join-request-item {
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 0.6rem;
    padding: 0.55rem;
    display: grid;
    gap: 0.48rem;
    background: color-mix(in srgb, var(--white) 78%, transparent);
}

.team-join-request-copy {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.team-join-request-copy strong {
    color: var(--ink-900);
    font-size: 0.9rem;
    line-height: 1.2;
}

.team-join-request-copy span,
.team-join-request-copy p {
    margin: 0;
    color: var(--ink-500);
    font-size: 0.78rem;
    line-height: 1.32;
}

.team-join-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.team-join-request-actions .btn {
    min-height: 2.05rem;
    padding: 0.3rem 0.62rem;
    font-size: 0.74rem;
}

.team-code-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.compact-form {
    row-gap: 0.5rem;
}

.compact-form > button,
.team-create-form > button {
    grid-column: 1 / -1;
    justify-self: start;
}

.team-create-form textarea {
    min-height: 72px;
}

.team-create-modal {
    width: min(920px, 100%);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 249, 252, 0.96)),
        url("../assets/graphics/stadium-bat-ball.svg") center top / cover no-repeat;
}

#create-team-modal .modal-form-actions,
#edit-team-modal .modal-form-actions {
    position: static;
    bottom: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.92);
    border-top: 1px solid var(--border);
    padding-top: 0.48rem;
    margin-top: 0.12rem;
    backdrop-filter: blur(12px);
}

.roster-action-btn {
    padding: 0.22rem 0.48rem;
    font-size: 0.67rem;
    font-weight: 700;
    white-space: nowrap;
}

.roster-action-captain {
    color: #f2fffa;
    background: #14885e;
    border: 1px solid color-mix(in srgb, #14885e 72%, var(--border));
}

.roster-action-leave {
    color: #f3f6ff;
    background: #3b5f9f;
    border: 1px solid color-mix(in srgb, #3b5f9f 72%, var(--border));
}

.roster-action-remove {
    color: #fff4f4;
    background: #be4a50;
    border: 1px solid color-mix(in srgb, #be4a50 72%, var(--border));
}

.roster-action-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.16rem;
}

.captain-chip {
    font-size: 0.7rem;
    padding: 0.24rem 0.54rem;
}

.player-name-btn {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--ink-900);
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.player-name-btn:hover {
    color: var(--teal-700);
}

.player-name-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal-500) 42%, var(--border));
    outline-offset: 2px;
}

.player-profile-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
    padding: 0.72rem;
}

.player-profile-grid {
    display: grid;
    gap: 0.34rem;
}

.request-center {
    display: grid;
    gap: 0.7rem;
}

.request-center-shell {
    background:
        radial-gradient(circle at top right, rgba(21, 163, 155, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 251, 253, 0.95));
}

.request-center-topbar {
    display: grid;
    gap: 0.8rem;
}

.request-center-kicker {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-700);
}

.request-center-controls {
    display: grid;
    gap: 0.56rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
}

.request-team-field {
    min-width: 0;
}

.request-load-btn {
    min-height: 44px;
    width: 100%;
    justify-self: stretch;
}

.request-overview-grid {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.request-mobile-segments {
    display: none;
}

.request-segment-btn {
    border: 1px solid color-mix(in srgb, var(--teal-500) 18%, var(--border));
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--white) 94%, transparent);
    color: var(--ink-700);
    min-height: 40px;
    padding: 0.38rem 0.62rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.request-segment-btn.active {
    border-color: color-mix(in srgb, var(--teal-500) 50%, var(--border));
    background: color-mix(in srgb, var(--teal-500) 14%, #ffffff);
    color: #0f5f69;
    box-shadow: 0 10px 20px rgba(20, 49, 69, 0.1);
}

.request-segment-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal-500) 44%, var(--border));
    outline-offset: 1px;
}

.request-segment-unread {
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0 0.3rem;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--teal-500) 35%, var(--border));
    background: color-mix(in srgb, var(--teal-500) 12%, transparent);
    color: #0f5f69;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

.request-segment-unread.is-zero {
    border-color: var(--border);
    background: color-mix(in srgb, var(--surface-strong) 75%, transparent);
    color: var(--ink-500);
}

.request-overview-card {
    border: 1px solid color-mix(in srgb, var(--teal-500) 18%, var(--border));
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 246, 250, 0.94));
    padding: 0.82rem 0.9rem;
    display: grid;
    gap: 0.2rem;
}

.request-overview-label {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.request-overview-value {
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    line-height: 1;
    color: var(--ui-text);
}

.request-overview-card p {
    font-size: 0.8rem;
    line-height: 1.34;
}

#load-requests-btn {
    min-height: 44px;
}

.request-columns {
    display: grid;
    gap: 0.78rem;
    align-content: start;
    align-items: stretch;
    grid-template-columns: 1fr;
}

.request-column {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    gap: 0.34rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 252, 0.94));
    padding: 0.72rem;
    min-height: 0;
}

.request-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.request-columns h3 {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
}

.request-column-head .chip {
    min-width: 2.2rem;
    justify-content: center;
}

.request-column-subtitle {
    margin: 0;
}

.request-feed {
    display: grid;
    gap: 0.42rem;
    max-height: 460px;
    overflow: auto;
    padding-right: 0.15rem;
    align-content: start;
    min-height: 0;
    scrollbar-gutter: stable;
}

.request-pagination-summary {
    margin: 0;
    min-height: 1.1rem;
}

.request-feed-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.request-feed-pagination .btn {
    min-height: 34px;
    padding: 0.34rem 0.72rem;
}

.request-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 253, 0.96));
    padding: 0.74rem;
    display: grid;
    gap: 0.44rem;
    min-height: 0;
    overflow: hidden;
    box-shadow: 0 10px 18px rgba(20, 33, 47, 0.05);
}

.request-card-pending {
    border-left: 4px solid color-mix(in srgb, var(--gold-500) 72%, var(--border));
}

.request-card-accepted {
    border-left: 4px solid color-mix(in srgb, var(--green-500) 72%, var(--border));
}

.request-card-rejected {
    border-left: 4px solid color-mix(in srgb, var(--red-500) 68%, var(--border));
}

.request-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.request-card-kicker {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-700);
}

.request-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.46rem;
}

.request-card-copy {
    display: grid;
    gap: 0.2rem;
}

.request-card h3 {
    margin: 0;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
    line-height: 1.22;
    min-width: 0;
    overflow-wrap: anywhere;
}

.request-versus {
    color: var(--ui-muted);
    font-weight: 700;
}

.request-team-line {
    font-size: 0.8rem;
    line-height: 1.35;
}

.request-meta-grid {
    display: grid;
    gap: 0.28rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.request-meta-item {
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-sm) - 2px);
    background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
    padding: 0.28rem 0.4rem;
    display: grid;
    gap: 0.1rem;
}

.request-meta-label {
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-500);
    font-weight: 700;
}

.request-meta-value {
    font-size: 0.76rem;
    color: var(--ink-900);
    font-weight: 700;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.request-message {
    display: grid;
    gap: 0.14rem;
}

.request-message p {
    margin: 0;
    line-height: 1.28;
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.request-card .row {
    gap: 0.45rem;
}

.request-actions {
    margin-top: 0.1rem;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.34rem;
}

.request-actions:empty {
    display: none;
}

.request-card .row .btn {
    min-height: 34px;
    padding: 0.34rem 0.66rem;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
}

.contact-board {
    display: grid;
    gap: 0.7rem;
}

.confirmed-match-card {
    display: grid;
    gap: 0.9rem;
}

.confirmed-match-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.confirmed-match-head h3 {
    margin: 0.35rem 0 0;
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem);
    line-height: 1.12;
}

.confirmed-match-summary-line {
    margin: 0.32rem 0 0;
}

.confirmed-match-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.captain-contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.contact-panel {
    border: 1px solid color-mix(in srgb, var(--green-500) 40%, var(--border));
    background: color-mix(in srgb, var(--green-500) 10%, transparent);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    display: grid;
    gap: 0.5rem;
}

.captain-contact-card h4 {
    margin: 0;
    font-size: 1.05rem;
}

.captain-contact-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.captain-contact-label {
    margin: 0 0 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.captain-team-chip {
    align-self: flex-start;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.captain-contact-lines {
    display: grid;
    gap: 0.2rem;
}

.captain-contact-lines p {
    margin: 0;
}

.captain-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.captain-action-btn {
    min-height: 36px;
    padding: 0.38rem 0.72rem;
    font-size: 0.8rem;
    text-decoration: none;
}

.captain-action-whatsapp {
    border-color: color-mix(in srgb, #179f5b 60%, var(--border));
    color: #0d6b3c;
}

.captain-note-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
    padding: 0.8rem;
    display: grid;
    gap: 0.55rem;
}

.captain-note-card h4 {
    margin: 0;
}

.captain-note-input {
    width: 100%;
    min-height: 110px;
    resize: vertical;
}

.captain-note-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.captain-note-actions p {
    margin: 0;
}

.match-room-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--surface-strong) 82%, transparent);
}

.match-room-confirmation-row,
.match-room-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.match-room-confirmation-row {
    margin: 0.8rem 0;
}

.match-room-details-form,
.match-room-chat,
.match-room-result,
.match-room-rating {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--surface-strong) 72%, transparent);
}

.match-room-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.match-room-field-wide {
    grid-column: span 3;
}

.match-room-details-form textarea,
.match-room-message-form textarea,
.match-room-result-form textarea,
.match-room-rating-form textarea {
    resize: vertical;
}

.match-room-actions {
    margin-top: 0.85rem;
}

.match-room-message-list {
    display: grid;
    gap: 0.65rem;
    max-height: 260px;
    margin-top: 0.8rem;
    padding-right: 0.25rem;
    overflow: auto;
}

.match-room-message {
    max-width: 82%;
    padding: 0.7rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--surface-strong) 82%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--white) 94%, transparent);
}

.match-room-message.is-own {
    justify-self: end;
    background: color-mix(in srgb, var(--teal-500) 10%, var(--white));
}

.match-room-message-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.match-room-message p {
    margin: 0.3rem 0 0;
}

.match-room-message-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: stretch;
    margin-top: 0.8rem;
}

.match-room-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.match-room-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--surface-strong) 82%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--white) 94%, transparent);
    font-size: 0.88rem;
}

@media (max-width: 720px) {
    .match-room-form-grid {
        grid-template-columns: 1fr;
    }

    .match-room-field-wide {
        grid-column: span 1;
    }

    .match-room-message {
        max-width: 100%;
    }

    .match-room-message-form {
        grid-template-columns: 1fr;
    }
}

.confirmed-match-squads {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--white) 96%, transparent);
    padding: 0.72rem 0.8rem;
}

.confirmed-match-squad-shell {
    display: grid;
    gap: 0.7rem;
}

.confirmed-match-squad-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.confirmed-match-squad-nav .btn {
    min-height: 2.2rem;
    padding-inline: 0.78rem;
}

.confirmed-match-squad-grid {
    gap: 0.7rem;
}

.confirmed-squad-card {
    display: grid;
    gap: 0.45rem;
    scroll-margin-top: 1rem;
}

.confirmed-squad-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.confirmed-squad-label {
    margin-bottom: 0.35rem;
}

.confirmed-match-squads > summary {
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--ink-800);
    list-style: none;
}

.confirmed-match-squads > summary::-webkit-details-marker {
    display: none;
}

.confirmed-match-squads > summary::after {
    content: "+";
    float: right;
    color: var(--ink-500);
}

.confirmed-match-squads[open] > summary::after {
    content: "-";
}

@media (min-width: 768px) {
    .request-center-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

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

    .request-center-controls {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #load-requests-btn {
        min-width: 160px;
    }

    .request-load-btn {
        width: auto;
        min-width: 170px;
    }

    .request-feed {
        max-height: 500px;
    }
}

@media (min-width: 1100px) {
    .team-layout {
        grid-template-columns: 320px minmax(0, 1fr);
    }

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

    .request-feed {
        max-height: 520px;
    }
}

@media (min-width: 1280px) {
    .team-create-form.form-grid.two {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .team-create-form .team-description {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .team-mobile-switch {
        position: sticky;
        top: calc(var(--mobile-shell-header, 0rem) + 0.2rem);
        z-index: 16;
        display: grid;
        gap: 0.34rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0.34rem;
        border: 1px solid color-mix(in srgb, var(--teal-500) 18%, var(--border));
        border-radius: 0.96rem;
        background: color-mix(in srgb, var(--white) 92%, transparent);
        box-shadow: 0 12px 24px rgba(20, 38, 56, 0.12);
        backdrop-filter: blur(10px);
    }

    body.has-mobile-nav .team-mobile-switch {
        top: 0;
    }

    .team-mobile-switch-btn {
        width: 100%;
        min-height: var(--mobile-touch-target);
        font-size: 0.76rem;
        padding: 0.42rem 0.56rem;
    }

    .team-layout {
        margin-top: 0.48rem !important;
    }

    .team-layout[data-mobile-view="list"] [data-team-pane="detail"],
    .team-layout[data-mobile-view="detail"] [data-team-pane="list"] {
        display: none;
    }

    .team-page-copy {
        width: 100%;
    }

    .team-page-copy .page-title {
        font-size: 1.55rem;
    }

    .team-panel {
        gap: 0.5rem;
    }

    .team-list {
        gap: 0.48rem;
        max-height: none;
        padding-right: 0;
    }

    .team-list-item {
        padding: 0.58rem;
    }

    .team-list-name {
        font-size: 1rem;
    }

    .team-list-actions {
        align-items: stretch;
    }

    .team-manage-btn {
        width: 100%;
    }

    .team-header-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .team-header-actions .btn {
        width: 100%;
    }

    .team-head-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .pending-requests-btn {
        width: 100%;
        justify-content: center;
    }

    .team-name-hero {
        font-size: clamp(1.36rem, 7vw, 1.8rem);
    }

    .team-pending-panel,
    .team-roster-section,
    .team-add-player-panel {
        padding: 0.56rem;
        gap: 0.46rem;
    }

    .team-add-player-toggle {
        width: 100%;
        justify-content: center;
    }

    .team-add-options {
        grid-template-columns: 1fr;
        gap: 0.42rem;
    }

    .team-add-option {
        padding: 0.52rem;
    }

    .team-add-option-button {
        min-height: 3.8rem;
    }

    .team-details-grid {
        grid-template-columns: 1fr;
    }

    .team-details-modal,
    .team-add-modal,
    .team-requests-modal {
        width: min(100%, 23rem);
        max-height: 100%;
        padding: 0.76rem;
        gap: 0.62rem;
    }

    .inline-add-form {
        grid-template-columns: 1fr;
    }

    .team-join-strip {
        padding: 0.56rem;
        gap: 0.4rem;
    }

    .team-join-form,
    .team-invite-panel {
        grid-template-columns: 1fr;
    }

    .team-invite-copy-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .team-join-form .btn {
        width: 100%;
        justify-content: center;
    }

    .team-share-modal {
        width: min(100%, 24rem);
        max-height: 100%;
        padding: 0.76rem;
        gap: 0.62rem;
    }

    .team-share-modal-overlay,
    .team-details-modal-overlay,
    .team-add-modal-overlay,
    .team-requests-modal-overlay {
        top: calc(var(--app-viewport-offset-top, 0px) + var(--mobile-shell-header, 0px) + 0.35rem);
        left: var(--app-viewport-offset-left, 0px);
        width: var(--app-layout-width, 100vw);
        height: calc(var(--app-height, 100svh) - var(--mobile-shell-header, 0px) - max(0px, calc(var(--mobile-shell-footer, 0px) - var(--app-viewport-bottom-gap, 0px))) - 0.55rem);
        padding: 0.5rem var(--mobile-page-gutter) 0.6rem;
        place-items: center;
        align-content: center;
    }

    body.has-mobile-nav .team-share-modal-overlay.player-modal-overlay-centered,
    body.has-mobile-nav .team-details-modal-overlay.player-modal-overlay-centered,
    body.has-mobile-nav .team-add-modal-overlay.player-modal-overlay-centered,
    body.has-mobile-nav .team-requests-modal-overlay.player-modal-overlay-centered {
        top: calc(var(--app-viewport-offset-top, 0px) + var(--mobile-shell-header, 0px) + 0.35rem);
        left: var(--app-viewport-offset-left, 0px);
        width: var(--app-layout-width, 100vw);
        height: calc(var(--app-height, 100svh) - var(--mobile-shell-header, 0px) - max(0px, calc(var(--mobile-shell-footer, 0px) - var(--app-viewport-bottom-gap, 0px))) - 0.55rem);
        padding: 0.5rem var(--mobile-page-gutter) 0.6rem;
        place-items: center;
        align-content: center;
    }

    .team-share-modal-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.28rem;
    }

    .team-share-modal-option {
        min-height: 4.45rem;
        padding: 0.42rem 0.08rem 0.34rem;
    }

    .team-share-modal-icon {
        width: 1.95rem;
        height: 1.95rem;
    }

    .team-share-modal-label {
        font-size: 0.58rem;
    }

    .team-share-link-highlight {
        width: 100%;
        font-size: 0.7rem;
    }

    .team-invite-box,
    .team-join-requests-box {
        padding: 0.56rem;
    }

    .team-join-request-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .inline-add-member {
        padding: 0.56rem;
        gap: 0.4rem;
    }

    #create-team-modal .player-modal,
    #edit-team-modal .player-modal {
        width: min(100%, calc(100vw - 0.7rem));
        max-height: 96vh;
        padding: 0.82rem;
        gap: 0.5rem;
    }

    body.has-mobile-nav #create-team-modal.player-modal-overlay,
    body.has-mobile-nav #edit-team-modal.player-modal-overlay {
        top: calc(var(--app-viewport-offset-top, 0px) + var(--mobile-shell-header, 0px));
        height: calc(var(--app-height, 100svh) - var(--mobile-shell-header, 0px));
        padding: 0.35rem var(--mobile-page-gutter) 0.35rem;
        place-items: stretch center;
        align-content: stretch;
    }

    body.has-mobile-nav #create-team-modal .player-modal,
    body.has-mobile-nav #edit-team-modal .player-modal {
        max-height: 100%;
        min-height: 0;
        overflow-y: auto;
        scroll-padding-bottom: 0.75rem;
    }

    body.has-mobile-nav #create-team-modal .team-create-form,
    body.has-mobile-nav #edit-team-modal .team-create-form {
        padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
    }

    body.has-mobile-nav #create-team-modal .team-create-form .field,
    body.has-mobile-nav #edit-team-modal .team-create-form .field {
        scroll-margin-bottom: 0.75rem;
    }

    #create-team-modal .section-subtitle,
    #edit-team-modal .section-subtitle {
        margin: 0;
        font-size: 0.86rem;
        line-height: 1.28;
    }

    .team-create-helper {
        font-size: 0.74rem;
        line-height: 1.3;
    }

    .team-create-form {
        gap: 0.5rem;
    }

    .team-create-form .field {
        gap: 0.2rem;
    }

    .team-create-form input,
    .team-create-form select,
    .team-create-form textarea {
        min-height: var(--mobile-touch-target);
        padding: 0.5rem 0.62rem;
    }

    .team-create-form textarea {
        min-height: 62px;
    }

    .team-create-form .row {
        gap: 0.4rem;
    }

    .team-create-form .row .btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .request-actions .btn {
        width: 100%;
    }

    .request-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .request-overview-card {
        padding: 0.6rem 0.64rem;
    }

    .request-overview-value {
        font-size: clamp(1.2rem, 5vw, 1.45rem);
    }

    .request-overview-card p {
        display: none;
    }

    .request-mobile-segments {
        position: sticky;
        top: calc(var(--mobile-shell-header, 0rem) + 0.2rem);
        z-index: 15;
        display: grid;
        gap: 0.34rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0.34rem;
        border: 1px solid color-mix(in srgb, var(--teal-500) 18%, var(--border));
        border-radius: 0.96rem;
        background: color-mix(in srgb, var(--white) 92%, transparent);
        box-shadow: 0 12px 24px rgba(20, 38, 56, 0.12);
        backdrop-filter: blur(10px);
    }

    body.has-mobile-nav .request-mobile-segments {
        top: 0;
    }

    .request-segment-btn {
        width: 100%;
        min-height: var(--mobile-touch-target);
        font-size: 0.76rem;
        padding: 0.42rem 0.56rem;
    }

    .request-columns {
        margin-top: 0.45rem !important;
    }

    .request-columns[data-active-segment="received"] [data-segment-panel="sent"],
    .request-columns[data-active-segment="sent"] [data-segment-panel="received"] {
        display: none;
    }

    .request-column {
        padding: 0.62rem;
    }

    .request-feed {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .request-feed-pagination {
        justify-content: space-between;
    }

    .request-meta-grid {
        grid-template-columns: 1fr;
    }

    .captain-contact-actions .captain-action-btn,
    .captain-note-actions .btn {
        width: 100%;
        justify-content: center;
    }
}