.sports-page{display:grid;gap:18px;padding:18px}.sports-panel,.sports-empty{background:var(--surface,#fff);border:1px solid rgba(73,62,49,.12);border-radius:22px;padding:20px}.sports-panel summary{cursor:pointer;font-weight:800;list-style:none}.sports-panel summary::-webkit-details-marker,.sports-panel summary::marker{display:none;content:""}.sports-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:16px}.sports-form label,.evidence-form label{display:grid;gap:6px;font-size:.82rem;font-weight:700}.sports-form input,.sports-form select,.sports-form textarea,.evidence-form input{width:100%;min-height:46px;box-sizing:border-box;border:1px solid #cfc6b9;border-radius:12px;padding:10px 14px;background-color:#fff;color:var(--color-text,#3a302a);font:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.sports-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23756a63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;padding-right:38px}.sports-form select:focus{border-color:rgba(194,101,42,.54);outline:0;box-shadow:0 0 0 4px rgba(194,101,42,.08);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c2652a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}.sports-form__wide{grid-column:1/-1}.sports-form button,.evidence-form button,.achievement-grid>button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 18px;border:1px solid transparent;border-radius:999px;background:var(--color-primary,#c2652a);color:#fff;font-weight:650;line-height:1;box-shadow:0 8px 20px rgba(194,101,42,.16);cursor:pointer;transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease}.sports-form button:hover,.evidence-form button:hover,.achievement-grid>button:hover{background:var(--color-primary-dark,#9e4c1e);transform:translateY(-1px)}.sports-form--compact{grid-template-columns:repeat(2,minmax(0,1fr))}.sports-list{display:grid;gap:14px}.sports-danger{display:inline-flex;align-items:center;justify-content:center;border:0;background:none;color:var(--color-tertiary,#8c3c3c);font-weight:650;padding:8px 0;cursor:pointer;transition:color .18s ease}.sports-danger:hover{color:#702f2f}.sports-alert{margin:0;border-radius:12px;padding:12px 16px;background:#fff0ed;color:#8b2f28}.achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.achievement-card{position:relative;display:grid;gap:7px;border:1px solid #d9d1c7;border-radius:18px;padding:18px;background:#f7f4ef;opacity:.68}.achievement-card.is-earned{background:#fff;opacity:1;border-color:#b8cbbd}.achievement-card input{position:absolute;right:15px;top:15px}.achievement-card__tier{font-size:.72rem;color:#7b6a51}.achievement-progress{height:6px;border-radius:999px;background:#e5dfd6;overflow:hidden}.achievement-progress i{display:block;height:100%;background:#4f7a5e}.achievement-card em{font-size:.75rem}.milestone-card{border-left:5px solid #8fae96}.evidence-form{display:grid;gap:10px;margin:14px 0;padding:13px;background:#f7f4ef;border-radius:14px}.profile-sports-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:18px}.profile-sports-links a{display:grid;gap:4px;text-decoration:none;color:inherit;background:#fff;border:1px solid rgba(73,62,49,.12);border-radius:16px;padding:14px}.profile-sports-links span{font-size:.78rem;color:#756d63}@media(max-width:640px){.sports-form,.sports-form--compact,.achievement-grid,.profile-sports-links{grid-template-columns:1fr}.sports-page{padding:12px}}

/* Profile achievements and sports copy need their own surrounding space. */
.profile-featured-achievements { padding: 0 18px 24px; }
.profile-featured-achievements .section-heading { padding-top: 0; }
.sports-empty > p { margin-top: 8px; }
.sports-card > p + p { margin-top: 8px; }
.milestone-card > p + form { margin-top: 14px; }
@media (max-width: 640px) {
    .profile-sports-links { padding: 16px; }
    .profile-featured-achievements { padding: 0 16px 20px; }
}

.sports-time{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:12px;min-width:0;margin:0;padding:12px;border:1px solid #cfc6b9;border-radius:14px}.sports-time legend{padding:0 6px;font-size:.82rem;font-weight:700}.sports-time label{min-width:0}.sports-time input{min-width:0}
@media(max-width:380px){.sports-time{grid-template-columns:repeat(2,minmax(0,1fr))}.sports-time label:first-of-type{grid-column:1/-1}}

.sports-hero {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: linear-gradient(135deg, #f7f3ec 0%, #edf5eb 100%);
    border: 1px solid rgba(73, 62, 49, .12);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 4px 20px -4px rgba(49, 92, 69, .06);
}

.sports-hero__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.sports-hero__body {
    flex: 1;
    min-width: 0;
}

.sports-hero__tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: #27563d;
    background: rgba(39, 86, 61, .08);
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.sports-hero h2 {
    margin: 0 0 6px;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.35;
    color: #2b231d;
}

.sports-hero__privacy {
    margin: 0;
    font-size: .82rem;
    color: #756d63;
}

.sports-hero__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.sports-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    min-height: 44px;
    padding: 10px 18px;
    background: var(--color-primary, #c2652a);
    color: #fff;
    font-size: .92rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(194, 101, 42, .16);
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.sports-create-btn:hover {
    background: var(--color-primary-dark, #9e4c1e);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(194, 101, 42, .22);
}

.sports-create-btn:active {
    transform: translateY(0);
}

.sports-create-btn svg {
    width: 16px;
    height: 16px;
}

.sports-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
}

.sports-stat-card {
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(49, 92, 69, .04);
}

.sports-stat-card dt {
    font-size: .78rem;
    font-weight: 600;
    color: #756d63;
    margin-bottom: 4px;
}

.sports-stat-card dd {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.sports-stat-card dd strong {
    font-size: 1.55rem;
    font-weight: 800;
    color: #1e3327;
    line-height: 1.1;
}

.sports-stat-card dd span {
    font-size: .8rem;
    font-weight: 600;
    color: #756d63;
}

.sports-card {
    background: #fff;
    border: 1px solid rgba(73, 62, 49, .1);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(43, 29, 22, .03);
    transition: transform .15s ease, box-shadow .15s ease;
}

.sports-card:hover {
    box-shadow: 0 6px 18px rgba(43, 29, 22, .06);
}

.sports-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sports-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .76rem;
    font-weight: 800;
    background: #e7efe8;
    color: #27563d;
}

.sports-chip--R {
    background: #eaf4ed;
    color: #235836;
}

.sports-chip--T {
    background: #fdf2e9;
    color: #a84f1e;
}

.sports-chip--W {
    background: #e8f3f8;
    color: #1d5773;
}

.sports-card time {
    font-size: .82rem;
    color: #8a8075;
    font-weight: 500;
}

.sports-card__main {
    margin-bottom: 12px;
}

.sports-card__distance {
    margin: 0 0 4px;
    font-size: 1.85rem;
    font-weight: 800;
    color: #231c17;
    letter-spacing: -.01em;
}

.sports-card__meta {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: #5f5449;
    font-weight: 500;
}

.sports-card__dot {
    color: #b5aba1;
}

.sports-card__location {
    margin: 8px 0 0;
    font-size: .84rem;
    color: #6b6257;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sports-card__notes {
    margin: 10px 0 0;
    padding: 8px 12px;
    background: #fbf9f6;
    border-left: 3px solid #d5cbbf;
    border-radius: 4px 10px 10px 4px;
    font-size: .84rem;
    color: #5c534a;
    line-height: 1.45;
}

.sports-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(73, 62, 49, .08);
}

.sports-card__edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: .84rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.sports-card__edit-btn:hover {
    background: var(--color-surface-muted);
    border-color: rgba(194, 101, 42, .35);
    color: var(--color-primary-dark);
    transform: translateY(-1px);
}

.sports-card__edit-btn svg {
    width: 14px;
    height: 14px;
}

.sports-card__delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-tertiary, #8c3c3c);
    font-size: .84rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.sports-card__delete-btn:hover {
    background: rgba(140, 60, 60, .08);
    color: #702f2f;
}

@keyframes sportsDrawerUp {
    from {
        transform: translateY(100%);
        opacity: .7;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.sports-drawer {
    position: fixed;
    inset: auto 0 0 0;
    width: min(100%, 640px);
    max-width: none;
    max-height: 90dvh;
    margin: 0 auto;
    padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 24px 24px 0 0;
    background: var(--surface, #fff);
    color: var(--color-text, #3a302a);
    box-shadow: 0 -18px 50px rgba(43, 29, 22, .24);
    animation: sportsDrawerUp .24s cubic-bezier(.16, 1, .3, 1);
    box-sizing: border-box;
}

.sports-drawer::backdrop {
    background: rgba(30, 24, 20, .46);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.sports-drawer__handle {
    width: 42px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 99px;
    background: #d8cfc4;
}

.sports-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(73, 62, 49, .08);
}

.sports-drawer__header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text, #3a302a);
}

.sports-drawer__header .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(73, 62, 49, .06);
    color: #63574c;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.sports-drawer__header .icon-button:hover {
    background: rgba(73, 62, 49, .14);
    color: #2b231d;
}

.sports-drawer-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 18px;
    border: 1px solid var(--color-border) !important;
    border-radius: 999px !important;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.sports-drawer-cancel:hover {
    background: var(--color-surface-muted) !important;
    border-color: rgba(194, 101, 42, .35) !important;
    color: var(--color-primary-dark) !important;
    transform: translateY(-1px);
}

.sports-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 640px) {
    .sports-hero {
        padding: 20px 16px;
        gap: 16px;
    }
    .sports-hero__header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .sports-hero h2 {
        font-size: 1.25rem;
    }
    .sports-create-btn {
        width: 100%;
        padding: 12px 18px;
    }
    .sports-stat-card {
        padding: 10px 12px;
    }
    .sports-stat-card dd strong {
        font-size: 1.35rem;
    }
    .sports-card {
        padding: 16px;
    }
    .sports-card__distance {
        font-size: 1.6rem;
    }
    .sports-drawer {
        width: 100%;
        padding-inline: 16px;
        border-radius: 20px 20px 0 0;
    }
}