/* ═══════════════════════════════════════════════════════════
   MODALS — nouveau style dark, cohérent avec landing.css
════════════════════════════════════════════════════════════ */

/* ── Modal base ───────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.modal-box {
    background: rgba(15, 14, 26, .96);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    padding: 2em;
    max-width: 420px;
    width: 90%;
    position: relative;
    box-shadow: 0 8px 48px rgba(0, 0, 0, .6);
    max-height: 90vh;
    overflow-y: auto;
    color: rgba(255, 255, 255, .85);
}

.modal-box strong {
    color: #fff;
}

.modal-box span {
    color: inherit;
}

.modal-box input::placeholder {
    color: rgba(255, 255, 255, .25);
}

.modal-close {
    position: absolute;
    top: 1em;
    right: 1em;
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: rgba(255, 255, 255, .35);
    line-height: 1;
}

.modal-close:hover {
    color: #fff;
}

/* ── Auth modal ───────────────────────────────────────────────── */
.modal-tabs {
    display: flex;
    gap: .5em;
    margin-bottom: 1.5em;
}

.modal-tab {
    flex: 1;
    padding: .6em;
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: none;
    font-size: .95em;
    font-weight: 600;
    color: rgba(255, 255, 255, .35);
    transition: all .2s;
    cursor: pointer;
}

.modal-tab.active {
    border-color: var(--vc);
    color: var(--vc);
    background: rgba(196, 181, 253, .1);
}

.modal-input {
    width: 100%;
    padding: .75em 1em;
    border: 1.5px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    font-size: 1em;
    margin-bottom: .8em;
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.modal-input:focus {
    border-color: var(--vc);
}

.modal-input::placeholder {
    color: rgba(255, 255, 255, .25);
}

/* ── Modal buttons ────────────────────────────────────────────── */
.modal-btn {
    width: 100%;
    padding: .8em;
    border: none;
    border-radius: 12px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
    margin-bottom: .6em;
    box-sizing: border-box;
}

.modal-btn:hover {
    opacity: .85;
}

.modal-btn-primary {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    color: #fff;
}

.modal-btn-google {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
    border: 1.5px solid rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
}

.modal-btn-github {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
}

.modal-divider {
    text-align: center;
    color: rgba(255, 255, 255, .3);
    font-size: .85em;
    margin: .8em 0;
    position: relative;
}

.modal-divider::before,
.modal-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background: rgba(255, 255, 255, .1);
}

/* ── Avis modal : sélecteur d'étoiles + textarea ─────────────────── */
.avis-star-picker {
    display: flex;
    gap: .3em;
    margin-bottom: 1em;
}

.avis-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.8em;
    line-height: 1;
    color: rgba(255, 255, 255, .2);
    transition: color .15s, transform .1s;
    padding: 0;
}

.avis-star-btn:hover {
    transform: scale(1.1);
}

.avis-star-btn.filled {
    color: var(--amber);
}

textarea.modal-input {
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
}

.avis-form-note {
    font-size: .78em;
    color: rgba(255, 255, 255, .4);
    margin: -.4em 0 1em;
}

.modal-divider::before {
    left: 0;
}

.modal-divider::after {
    right: 0;
}

.modal-error {
    color: #fc8181;
}

.modal-success {
    color: #68d391;
}

/* ── Payment modal ────────────────────────────────────────────── */
#paymentModal .modal-box {
    max-width: 560px;
    padding: 2.5em;
}

#payment-submit-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ── Payment methods ──────────────────────────────────────────── */
.pm-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .9em 1em;
    border: 1.5px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    margin-bottom: .6em;
    gap: .5em;
}

.pm-card-default {
    border-color: var(--vc);
    background: rgba(196, 181, 253, .08);
}

.pm-card-info {
    display: flex;
    align-items: center;
    gap: .7em;
    flex-wrap: wrap;
    font-size: .92em;
}

.pm-brand {
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.pm-last4 {
    color: rgba(255, 255, 255, .55);
}

.pm-expiry {
    color: rgba(255, 255, 255, .35);
    font-size: .88em;
}

.pm-default-badge {
    background: rgba(196, 181, 253, .15);
    color: var(--vc);
    font-size: .78em;
    font-weight: 600;
    padding: .2em .6em;
    border-radius: 20px;
}

.pm-card-actions {
    display: flex;
    gap: .4em;
    flex-shrink: 0;
}

.pm-btn-default,
.pm-btn-delete {
    border: none;
    border-radius: 8px;
    padding: .4em .8em;
    font-size: .8em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
}

.pm-btn-default {
    background: rgba(196, 181, 253, .15);
    color: var(--vc);
}

.pm-btn-delete {
    background: rgba(252, 129, 129, .15);
    color: #fc8181;
}

.pm-btn-default:hover,
.pm-btn-delete:hover {
    opacity: .75;
}

.pm-btn-default:disabled,
.pm-btn-delete:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ── Invoices ─────────────────────────────────────────────────── */
.invoice-row {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .65em 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: .88em;
    flex-wrap: wrap;
}

.invoice-row:last-child {
    border-bottom: none;
}

.invoice-date {
    color: rgba(255, 255, 255, .5);
    flex: 1;
    min-width: 80px;
}

.invoice-amount {
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.invoice-status {
    padding: .2em .6em;
    border-radius: 20px;
    font-size: .82em;
    font-weight: 600;
}

.invoice-actions {
    display: flex;
    gap: .4em;
    margin-left: auto;
}

.invoice-btn {
    padding: .25em .65em;
    border-radius: 8px;
    font-size: .8em;
    font-weight: 600;
    text-decoration: none;
    background: rgba(102, 126, 234, .15);
    color: var(--vc);
    transition: opacity .2s;
}

.invoice-btn-view {
    background: rgba(196, 181, 253, .15);
    color: var(--vc);
}

.invoice-btn:hover {
    opacity: .75;
}

/* ── Account dashboard ────────────────────────────────────────── */
.account-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .65em 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: .95em;
}

.plan-badge {
    display: inline-block;
    padding: .2em .8em;
    border-radius: 20px;
    font-size: .85em;
    font-weight: 700;
}

.plan-badge-free {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .5);
}

.plan-badge-premium {
    background: linear-gradient(135deg, #764ba2, #667eea);
    color: #fff;
}

.traces-list {
    margin-top: .75em;
    max-height: 200px;
    overflow-y: auto;
}

.trace-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5em 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: .9em;
    gap: .5em;
}

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

.trace-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.trace-actions {
    display: flex;
    gap: .4em;
    flex-shrink: 0;
}

.btn-trace-view,
.btn-trace-pdf,
.btn-trace-dl,
.btn-trace-del,
.btn-trace-toggle-on,
.btn-trace-toggle-off {
    padding: .3em .75em;
    border-radius: 8px;
    border: none;
    font-size: .78em;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, transform .1s;
}

.btn-trace-view:hover,
.btn-trace-pdf:hover,
.btn-trace-dl:hover,
.btn-trace-del:hover,
.btn-trace-toggle-on:hover,
.btn-trace-toggle-off:hover {
    filter: brightness(.88);
    transform: translateY(-1px);
}

.btn-trace-view {
    background: #4f46e5;
    color: #fff;
}

.btn-trace-pdf {
    background: #16a34a;
    color: #fff;
}

.btn-trace-dl {
    background: #2b7ab3;
    color: #fff;
}

.btn-trace-del {
    background: #c53030;
    color: #fff;
}

.btn-trace-toggle-on {
    background: #059669;
    color: #fff;
}

.btn-trace-toggle-off {
    background: #d97706;
    color: #fff;
}

/* ── Account button ───────────────────────────────────────────── */
#accountBtn {
    display: flex;
    align-items: center;
    gap: .45em;
    padding: .4rem .85rem;
    background: transparent;
    color: rgba(255, 255, 255, .55);
    border: 1.5px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    font-family: 'Syne', sans-serif;
    transition: border-color .2s, background .2s, color .2s;
    cursor: pointer;
}

#accountBtn:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.account-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

#accountBtn.logged-in {
    background: linear-gradient(135deg, #764ba2, #667eea);
    color: #fff;
    border-color: transparent;
    padding: .3rem .75rem .3rem .3rem;
}

#accountBtn.logged-in:hover {
    background: linear-gradient(135deg, #6a3f96, #5a6fd6);
    color: #fff;
}

.account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    font-size: .85rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0;
    margin-right: 10px;
}

.account-name {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
}

/* ── Pricing modal ────────────────────────────────────────────── */
.pricing-option {
    display: flex;
    align-items: center;
    gap: .8em;
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    padding: .9em 1em;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.pricing-option:has(input:checked) {
    border-color: var(--vc);
    background: rgba(196, 181, 253, .1);
}

.pricing-option input[type="radio"] {
    accent-color: var(--vc);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.pricing-option-content {
    display: flex;
    flex-direction: column;
    gap: .1em;
    flex: 1;
}

.pricing-option-title {
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: .4em;
}

.pricing-option-price {
    font-size: 1.15em;
    font-weight: 800;
    color: var(--vc);
}

.pricing-option-sub {
    font-size: .8em;
    color: rgba(255, 255, 255, .4);
}

.pricing-badge {
    background: linear-gradient(135deg, #764ba2, #667eea);
    color: #fff;
    font-size: .72em;
    padding: .15em .5em;
    border-radius: 20px;
    font-weight: 700;
}

/* ── Share modal ──────────────────────────────────────────────── */
.share-type-selector {
    display: flex;
    gap: 1em;
    margin-bottom: 1.2em;
    justify-content: center;
}

.share-type-option {
    display: flex;
    align-items: center;
    gap: .5em;
    cursor: pointer;
    user-select: none;
}

.share-type-option input[type="radio"] {
    display: none;
}

.share-type-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(196, 181, 253, .5);
    background: rgba(196, 181, 253, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, border-color .2s;
    position: relative;
}

.share-type-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--vc);
    opacity: .3;
    transition: opacity .2s, transform .2s;
    transform: scale(.7);
}

.share-type-option input[type="radio"]:checked+.share-type-radio {
    background: var(--vc);
    border-color: var(--vc);
}

.share-type-option input[type="radio"]:checked+.share-type-radio::after {
    background: #fff;
    opacity: 1;
    transform: scale(1);
}

.share-type-label {
    font-size: .95em;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
    transition: color .2s;
}

.share-type-option input[type="radio"]:checked~.share-type-label {
    color: var(--vc);
}

.share-type-desc {
    font-size: .8em;
    color: rgba(255, 255, 255, .35);
    margin: .1em 0 0;
}

.share-type-option input[type="radio"]:checked~div .share-type-desc {
    color: rgba(196, 181, 253, .7);
}

/* ── Pré-analyse modal ───────────────────────────────────────── */
.pa-modal-box {
    max-width: 560px;
    padding: 1.8em;
    overflow: hidden;
}

.pa-modal-title {
    font-size: 1.1em;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 1.4em;
    padding-right: 1.5em;
}

.pa-section {
    margin-bottom: 1.4em;
}

.pa-section-label {
    font-size: .72em;
    font-weight: 700;
    color: rgba(255, 255, 255, .35);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .7em;
}

/* Cartes météo / terrain */
.pa-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6em;
}

.pa-card {
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    padding: .9em .5em;
    text-align: center;
    cursor: pointer;
    background: rgba(255, 255, 255, .03);
    transition: border-color .15s, background .15s, transform .1s;
    user-select: none;
}

.pa-card:hover {
    border-color: rgba(196, 181, 253, .4);
    background: rgba(196, 181, 253, .06);
    transform: translateY(-1px);
}

.pa-card--selected {
    border-color: var(--vc);
    background: rgba(196, 181, 253, .12);
}

.pa-card--selected .pa-card-icon,
.pa-card--selected .pa-card-label {
    color: var(--vc);
}

.pa-card-icon {
    font-size: 1.6em;
    margin-bottom: .3em;
    line-height: 1;
}

.pa-card-label {
    font-size: .88em;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
}

.pa-card-sub {
    font-size: .72em;
    color: rgba(255, 255, 255, .35);
    margin-top: .2em;
}

.pa-auto-label {
    font-size: .82em;
    color: var(--vc);
    margin-top: .5em;
    padding: .55em .8em;
    background: rgba(196, 181, 253, .12);
    border: 1.5px solid rgba(196, 181, 253, .3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: .6em;
}

.pa-meteo-modify-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .3em;
    font-size: .82em;
    font-weight: 600;
    font-family: inherit;
    background: rgba(196, 181, 253, .15);
    border: 1.5px solid rgba(196, 181, 253, .4);
    color: var(--vc);
    border-radius: 8px;
    padding: .25em .65em;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}

.pa-meteo-modify-btn:hover {
    background: rgba(196, 181, 253, .28);
    border-color: var(--vc);
}

.pa-meteo-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    width: 100%;
    margin-top: .5em;
    padding: .55em;
    border: 1.5px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .45);
    font-size: .82em;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.pa-meteo-cancel-btn:hover {
    border-color: rgba(196, 181, 253, .4);
    color: var(--vc);
    background: rgba(196, 181, 253, .08);
}

/* Indicateur d'étapes */
.pa-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.4em;
}

.pa-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .3);
    font-size: .75em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}

.pa-step-dot--active {
    background: var(--vc);
    color: #0a0a14;
}

.pa-step-dot--done {
    background: rgba(196, 181, 253, .4);
    color: #fff;
}

.pa-step-line {
    flex: 0 0 56px;
    height: 2px;
    background: rgba(255, 255, 255, .1);
    margin: 0 6px;
}

/* Bouton Suivant */
.pa-btn-next {
    width: 100%;
    margin-top: .4em;
    padding: .9em;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #764ba2, #667eea);
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    font-family: 'Syne', sans-serif;
}

.pa-btn-next:hover {
    opacity: .88;
}

/* Tuiles données */
.pa-data-tiles-wrap {
    background: rgba(255, 255, 255, .04);
    border-radius: 16px;
    padding: .9em;
    margin-bottom: .8em;
}

.pa-data-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55em;
}

.pa-data-tile {
    background: rgba(255, 255, 255, .04);
    border-radius: 12px;
    padding: .75em .9em;
    border: 1px solid rgba(255, 255, 255, .08);
}

.pa-data-tile--hl {
    background: rgba(196, 181, 253, .1);
    border-color: rgba(196, 181, 253, .2);
}

.pa-data-tile-lbl {
    font-size: .65em;
    font-weight: 700;
    color: rgba(255, 255, 255, .35);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .3em;
}

.pa-data-tile-val {
    font-size: .95em;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
}

.pa-data-tile--hl .pa-data-tile-val {
    color: var(--vc);
}

/* Formulaire édition */
.pa-form-wrap {
    background: rgba(255, 255, 255, .04);
    border-radius: 16px;
    padding: .9em;
    margin-bottom: .6em;
}

.pa-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75em;
}

.pa-form-field {
    display: flex;
    flex-direction: column;
    gap: .3em;
}

.pa-form-label {
    font-size: .78em;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
}

.pa-form-unit {
    font-weight: 400;
    color: rgba(255, 255, 255, .35);
}

.pa-form-field input {
    padding: .6em .85em;
    border: 1.5px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    font-size: .9em;
    color: #fff;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: none;
    font-family: inherit;
    color-scheme: dark;
}

.pa-form-field input::placeholder {
    color: rgba(255, 255, 255, .25);
}

.pa-form-field input:focus {
    border-color: var(--vc);
    box-shadow: 0 0 0 3px rgba(196, 181, 253, .12);
}

.pa-form-level {
    margin-top: .7em;
}

.pa-form-level-pill {
    font-size: .8em;
    color: var(--vc);
    font-weight: 600;
    padding: .3em .8em;
    background: rgba(196, 181, 253, .12);
    border-radius: 8px;
    display: inline-block;
    border: 1px solid rgba(196, 181, 253, .25);
}

/* Sauvegarde niveau */
.pa-save-check {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: .82em;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    user-select: none;
    margin-top: .5em;
}

.pa-save-check input[type=checkbox] {
    accent-color: var(--vc);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Bouton modifier */
.pa-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    width: 100%;
    margin-top: .7em;
    padding: .6em 1em;
    border: 1.5px solid rgba(196, 181, 253, .25);
    border-radius: 10px;
    background: rgba(196, 181, 253, .1);
    color: var(--vc);
    font-size: .85em;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}

.pa-edit-btn:hover {
    background: rgba(196, 181, 253, .18);
    border-color: var(--vc);
}

/* Confirmer / Annuler */
.pa-edit-actions {
    display: flex;
    gap: .5em;
    margin-top: .6em;
}

.pa-confirm-btn {
    flex: 1;
    padding: .6em;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #764ba2, #667eea);
    color: #fff;
    font-size: .85em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    font-family: inherit;
}

.pa-confirm-btn:hover {
    opacity: .88;
}

.pa-cancel-btn {
    flex: 1;
    padding: .6em;
    border: 1.5px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .4);
    font-size: .85em;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    font-family: inherit;
}

.pa-cancel-btn:hover {
    border-color: rgba(196, 181, 253, .4);
    color: rgba(255, 255, 255, .7);
    background: rgba(196, 181, 253, .06);
}

/* Bouton lancer + précédent */
.pa-launch-btn {
    margin-top: .8em;
    font-size: 1em;
    padding: .9em;
    width: 100%;
}

.pa-back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    width: 100%;
    margin-top: .6em;
    padding: .55em;
    border: 1.5px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .4);
    font-size: .85em;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    font-family: inherit;
}

.pa-back-link:hover {
    border-color: rgba(196, 181, 253, .4);
    color: var(--vc);
    background: rgba(196, 181, 253, .06);
}

/* Résumé données sportives */
.athlete-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6em .9em;
    background: rgba(196, 181, 253, .1);
    border: 1px solid rgba(196, 181, 253, .2);
    border-radius: 10px;
}

.athlete-summary-text {
    font-size: .88em;
    font-weight: 600;
    color: var(--vc);
}

.athlete-toggle-btn {
    background: none;
    border: none;
    color: var(--vc);
    font-size: .78em;
    font-weight: 600;
    cursor: pointer;
    padding: .2em .5em;
    border-radius: 6px;
    transition: background .15s;
    font-family: inherit;
    white-space: nowrap;
}

.athlete-toggle-btn:hover {
    background: rgba(196, 181, 253, .15);
}

/* Formulaire données sportives (compte) */
.athlete-form {
    margin-top: .6em;
}

.athlete-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6em;
    margin-bottom: .6em;
}

.athlete-form-field {
    display: flex;
    flex-direction: column;
    gap: .3em;
}

.athlete-form-label {
    font-size: .78em;
    color: rgba(255, 255, 255, .45);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Spinner chargement modal ────────────────────────────────── */
.spinner-mini-wrapper {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: 1.5em 0;
    color: rgba(255, 255, 255, .5);
    font-size: .9em;
    justify-content: center;
}

.spinner-mini {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(196, 181, 253, .2);
    border-top-color: var(--vc);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}

/* ── Nutrition section (étape 2 pré-analyse) ─────────────────── */

/* Grille 2 colonnes pour les champs nutrition */
.pa-nutri-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7em;
    margin-bottom: .6em;
}

.pa-nutri-field {
    margin-bottom: 0;
}

.pa-nutri-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35em;
}

.pa-nutri-label {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: .88em;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
}

.pa-nutri-icon {
    font-size: 1.1em;
    width: 22px;
    text-align: center;
}

.pa-nutri-help {
    font-size: .72em;
    color: rgba(255, 255, 255, .35);
    margin-bottom: .4em;
    padding-left: 1.8em;
}

.pa-nutri-input-row {
    display: flex;
    align-items: center;
    gap: .65em;
}

.pa-nutri-box {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1.5px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: .55em .85em;
    background: rgba(255, 255, 255, .06);
    transition: border-color .15s, background .15s;
}

.pa-nutri-box:focus-within {
    border-color: var(--vc);
    background: rgba(255, 255, 255, .08);
}

.pa-nutri-box--disabled {
    background: rgba(255, 255, 255, .025);
    opacity: .5;
    pointer-events: none;
}

.pa-nutri-box input {
    border: none;
    background: none;
    outline: none;
    font-size: .95em;
    font-weight: 700;
    color: #fff;
    width: 100%;
    color-scheme: dark;
    font-family: 'DM Mono', monospace;
}

.pa-nutri-box input:disabled {
    color: rgba(255, 255, 255, .4);
    cursor: not-allowed;
}

.pa-nutri-unit {
    font-size: .75em;
    color: rgba(255, 255, 255, .35);
    font-weight: 600;
    white-space: nowrap;
    min-width: 36px;
}

/* Unité inline dans la box */
.pa-nutri-unit-inline {
    font-size: .72em;
    color: rgba(255, 255, 255, .3);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: .3em;
}

.pa-nutri-toggle {
    display: flex;
    align-items: center;
    gap: .35em;
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(255, 255, 255, .1);
    border-radius: 99px;
    padding: .28em .7em;
    cursor: pointer;
    font-size: .72em;
    font-weight: 700;
    color: rgba(255, 255, 255, .35);
    user-select: none;
    transition: background .15s, border-color .15s, color .15s;
}

.pa-nutri-toggle--active {
    background: rgba(196, 181, 253, .15);
    border-color: rgba(196, 181, 253, .4);
    color: var(--vc);
}

.pa-nutri-note {
    display: flex;
    align-items: flex-start;
    gap: .5em;
    background: rgba(99, 120, 220, .1);
    border: 1px solid rgba(99, 120, 220, .2);
    border-radius: 8px;
    padding: .45em .7em;
    margin-top: .45em;
    font-size: .73em;
    color: rgba(147, 190, 253, .85);
    line-height: 1.45;
}

.pa-nutri-divider {
    height: 1px;
    background: rgba(255, 255, 255, .07);
    margin: .8em 0 .9em;
}

/* ── Responsive modals ───────────────────────────────────────── */
@media (max-width: 600px) {
    .modal-box {
        padding: 1.5em 1em;
        border-radius: 14px;
    }

    #paymentModal .modal-box {
        padding: 1.5em 1em;
    }

    .pm-card {
        flex-direction: column;
        align-items: flex-start;
        gap: .8em;
    }

    .pm-card-actions {
        flex-wrap: wrap;
        width: 100%;
    }

    .pm-btn-default,
    .pm-btn-delete {
        flex: 1;
        text-align: center;
    }

    .trace-actions {
        flex-wrap: wrap;
        gap: .3em;
    }

    .btn-trace-view,
    .btn-trace-pdf,
    .btn-trace-dl,
    .btn-trace-del,
    .btn-trace-toggle-on,
    .btn-trace-toggle-off {
        padding: .3em .5em;
        font-size: .72em;
    }

    .invoice-row {
        flex-wrap: wrap;
    }

    .invoice-actions {
        margin-left: 0;
        width: 100%;
    }

    .share-type-selector {
        flex-direction: column;
        align-items: flex-start;
        gap: .8em;
    }

    .pa-modal-box {
        padding: 1.2em .9em;
    }

    .pa-card {
        padding: .7em .3em;
    }

    .pa-card-icon {
        font-size: 1.3em;
    }

    .pa-card-label {
        font-size: .78em;
    }

    .pa-card-sub {
        display: none;
    }

    .pa-form-grid {
        grid-template-columns: 1fr;
        gap: .5em;
    }

    .pa-nutri-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pa-nutri-toggle {
        font-size: .65em;
        padding: .22em .45em;
    }

    .athlete-form-row {
        grid-template-columns: 1fr;
        gap: .5em;
    }

    .athlete-summary-bar {
        flex-wrap: wrap;
        gap: .4em;
    }

    .athlete-toggle-btn {
        width: 100%;
        text-align: center;
        padding: .35em;
    }
}

@media (max-width: 400px) {
    .pa-cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-height: 500px) {
    .modal-box {
        max-height: 95vh;
        padding: 1em;
    }

    .pa-modal-box {
        padding: .8em;
    }

    .pa-section {
        margin-bottom: .8em;
    }

    .pa-steps {
        margin-bottom: .8em;
    }

    .pa-data-tiles-wrap,
    .pa-form-wrap {
        padding: .6em;
    }
}


/* ═══════════════════════════════════════════════════════════
   ANCIEN STYLE (conservé) — remplacé par le style dark ci-dessus
════════════════════════════════════════════════════════════ */
/*

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9000; }
.modal-box { background: #fff; border-radius: 20px; padding: 2em; max-width: 420px; width: 90%; position: relative; box-shadow: 0 8px 32px rgba(102,126,234,0.2); max-height: 90vh; overflow-y: auto; }
.modal-close { position: absolute; top: 1em; right: 1em; background: none; border: none; font-size: 1.2em; cursor: pointer; color: #aaa; line-height: 1; }
.modal-close:hover { color: #333; }
.modal-tabs { display: flex; gap: .5em; margin-bottom: 1.5em; }
.modal-tab { flex: 1; padding: .6em; border: 2px solid #e0e0e0; border-radius: 10px; background: none; font-size: .95em; font-weight: 600; color: #aaa; transition: all .2s; }
.modal-tab.active { border-color: #764ba2; color: #764ba2; background: #f5eeff; }
.modal-input { width: 100%; padding: .75em 1em; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 1em; margin-bottom: .8em; outline: none; transition: border-color .2s; box-sizing: border-box; }
.modal-input:focus { border-color: #764ba2; }
.modal-btn { width: 100%; padding: .8em; border: none; border-radius: 12px; font-size: 1em; font-weight: 600; cursor: pointer; transition: opacity .2s; margin-bottom: .6em; box-sizing: border-box; }
.modal-btn:hover { opacity: .85; }
.modal-btn-primary { background: linear-gradient(135deg,#764ba2 0%,#667eea 100%); color: white; }
.modal-btn-google { background: #fff; color: #333; border: 1.5px solid #ddd; display: flex; align-items: center; justify-content: center; gap: .5em; }
.modal-btn-github { background: #24292e; color: white; display: flex; align-items: center; justify-content: center; gap: .5em; }
.modal-divider { text-align: center; color: #aaa; font-size: .85em; margin: .8em 0; position: relative; }
.modal-divider::before, .modal-divider::after { content: ''; position: absolute; top: 50%; width: 42%; height: 1px; background: #e0e0e0; }
.modal-divider::before { left: 0; } .modal-divider::after { right: 0; }
.modal-error { color: #e53e3e; } .modal-success { color: #38a169; }
#paymentModal .modal-box { max-width: 560px; padding: 2.5em; }
#payment-submit-btn:disabled { opacity: .6; cursor: not-allowed; }
.pm-card { display: flex; justify-content: space-between; align-items: center; padding: .9em 1em; border: 1.5px solid #e0e0e0; border-radius: 12px; margin-bottom: .6em; gap: .5em; }
.pm-card-default { border-color: #764ba2; background: #f9f5ff; }
.pm-card-info { display: flex; align-items: center; gap: .7em; flex-wrap: wrap; font-size: .92em; }
.pm-brand { font-weight: 600; color: #333; } .pm-last4 { color: #555; } .pm-expiry { color: #888; font-size: .88em; }
.pm-default-badge { background: #ede9fe; color: #764ba2; font-size: .78em; font-weight: 600; padding: .2em .6em; border-radius: 20px; }
.pm-card-actions { display: flex; gap: .4em; flex-shrink: 0; }
.pm-btn-default, .pm-btn-delete { border: none; border-radius: 8px; padding: .4em .8em; font-size: .8em; font-weight: 600; cursor: pointer; transition: opacity .2s; }
.pm-btn-default { background: #ede9fe; color: #764ba2; } .pm-btn-delete { background: #fee2e2; color: #c53030; }
.pm-btn-default:hover, .pm-btn-delete:hover { opacity: .75; } .pm-btn-default:disabled, .pm-btn-delete:disabled { opacity: .4; cursor: not-allowed; }
.invoice-row { display: flex; align-items: center; gap: .6em; padding: .65em 0; border-bottom: 1px solid #f0f0f0; font-size: .88em; flex-wrap: wrap; }
.invoice-row:last-child { border-bottom: none; } .invoice-date { color: #555; flex: 1; min-width: 80px; } .invoice-amount { font-weight: 600; color: #333; }
.invoice-status { padding: .2em .6em; border-radius: 20px; font-size: .82em; font-weight: 600; }
.invoice-actions { display: flex; gap: .4em; margin-left: auto; }
.invoice-btn { padding: .25em .65em; border-radius: 8px; font-size: .8em; font-weight: 600; text-decoration: none; background: #f0f4ff; color: #667eea; transition: opacity .2s; }
.invoice-btn-view { background: #ede9fe; color: #764ba2; } .invoice-btn:hover { opacity: .75; }
.account-info-row { display: flex; justify-content: space-between; align-items: center; padding: .65em 0; border-bottom: 1px solid #f0f0f0; font-size: .95em; }
.plan-badge { display: inline-block; padding: .2em .8em; border-radius: 20px; font-size: .85em; font-weight: 700; }
.plan-badge-free { background: #f0f0f0; color: #666; } .plan-badge-premium { background: linear-gradient(135deg,#764ba2,#667eea); color: white; }
.traces-list { margin-top: .75em; max-height: 200px; overflow-y: auto; }
.trace-item { display: flex; justify-content: space-between; align-items: center; padding: .5em 0; border-bottom: 1px solid #f5f5f5; font-size: .9em; gap: .5em; }
.trace-item:last-child { border-bottom: none; }
.trace-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.trace-actions { display: flex; gap: .4em; flex-shrink: 0; }
.btn-trace-view, .btn-trace-pdf, .btn-trace-dl, .btn-trace-del, .btn-trace-toggle-on, .btn-trace-toggle-off { padding: .3em .75em; border-radius: 8px; border: none; font-size: .78em; font-weight: 600; cursor: pointer; transition: filter .15s, transform .1s; }
.btn-trace-view:hover, .btn-trace-pdf:hover, .btn-trace-dl:hover, .btn-trace-del:hover, .btn-trace-toggle-on:hover, .btn-trace-toggle-off:hover { filter: brightness(.88); transform: translateY(-1px); }
.btn-trace-view { background: #4f46e5; color: #fff; } .btn-trace-pdf { background: #16a34a; color: #fff; } .btn-trace-dl { background: #2b7ab3; color: #fff; }
.btn-trace-del { background: #c53030; color: #fff; } .btn-trace-toggle-on { background: #059669; color: #fff; } .btn-trace-toggle-off { background: #d97706; color: #fff; }
#accountBtn { display: flex; align-items: center; gap: .45em; padding: .4rem .85rem; background: transparent; color: #555; border: 1.5px solid #ccc; border-radius: 999px; font-weight: 600; transition: border-color .2s, background .2s, color .2s; }
#accountBtn:hover { background: #f5f5f5; border-color: #999; color: #222; }
.account-icon { width: 18px; height: 18px; flex-shrink: 0; }
#accountBtn.logged-in { background: linear-gradient(135deg,#764ba2,#667eea); color: white; border-color: transparent; padding: .3rem .75rem .3rem .3rem; }
#accountBtn.logged-in:hover { background: linear-gradient(135deg,#6a3f96,#5a6fd6); color: white; }
.account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.25); font-size: .85rem; font-weight: 700; flex-shrink: 0; letter-spacing: 0; margin-right: 10px; }
.account-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.pricing-option { display: flex; align-items: center; gap: .8em; border: 2px solid #e0e0e0; border-radius: 14px; padding: .9em 1em; cursor: pointer; transition: border-color .2s, background .2s; }
.pricing-option:has(input:checked) { border-color: #764ba2; background: #f9f0ff; }
.pricing-option input[type="radio"] { accent-color: #764ba2; width: 18px; height: 18px; flex-shrink: 0; }
.pricing-option-content { display: flex; flex-direction: column; gap: .1em; flex: 1; }
.pricing-option-title { font-weight: 700; color: #333; font-size: 1em; display: flex; align-items: center; gap: .4em; }
.pricing-option-price { font-size: 1.15em; font-weight: 800; color: #764ba2; }
.pricing-option-sub { font-size: .8em; color: #888; }
.pricing-badge { background: linear-gradient(135deg,#764ba2,#667eea); color: white; font-size: .72em; padding: .15em .5em; border-radius: 20px; font-weight: 700; }
.share-type-selector { display: flex; gap: 1em; margin-bottom: 1.2em; justify-content: center; }
.share-type-option { display: flex; align-items: center; gap: .5em; cursor: pointer; user-select: none; }
.share-type-option input[type="radio"] { display: none; }
.share-type-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #764ba2; background: #e8d5f5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, border-color .2s; position: relative; }
.share-type-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #764ba2; opacity: .3; transition: opacity .2s, transform .2s; transform: scale(.7); }
.share-type-option input[type="radio"]:checked + .share-type-radio { background: #764ba2; border-color: #764ba2; }
.share-type-option input[type="radio"]:checked + .share-type-radio::after { background: white; opacity: 1; transform: scale(1); }
.share-type-label { font-size: .95em; font-weight: 600; color: #555; transition: color .2s; }
.share-type-option input[type="radio"]:checked ~ .share-type-label { color: #764ba2; }
.share-type-desc { font-size: .8em; color: #aaa; margin: .1em 0 0; }
.share-type-option input[type="radio"]:checked ~ div .share-type-desc { color: #9b72c0; }
.pa-modal-box { max-width: 560px; padding: 1.8em; }
.pa-modal-title { font-size: 1.1em; font-weight: 700; color: #333; margin-bottom: 1.4em; padding-right: 1.5em; }
.pa-section { margin-bottom: 1.4em; }
.pa-section-label { font-size: .72em; font-weight: 700; color: #999; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .7em; }
.pa-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: .6em; }
.pa-card { border: 2px solid #e8e8e8; border-radius: 14px; padding: .9em .5em; text-align: center; cursor: pointer; background: #fafafa; transition: border-color .15s, background .15s, transform .1s; user-select: none; }
.pa-card:hover { border-color: #c4a8e0; background: #faf4ff; transform: translateY(-1px); }
.pa-card--selected { border-color: #764ba2; background: #f5eeff; }
.pa-card--selected .pa-card-icon, .pa-card--selected .pa-card-label { color: #764ba2; }
.pa-card-icon { font-size: 1.6em; margin-bottom: .3em; line-height: 1; }
.pa-card-label { font-size: .88em; font-weight: 600; color: #444; }
.pa-card-sub { font-size: .72em; color: #999; margin-top: .2em; }
.pa-auto-label { font-size: .82em; color: #764ba2; margin-top: .5em; padding: .55em .8em; background: #f5eeff; border-radius: 10px; border: 1.5px solid #d4b8f0; display: flex; align-items: center; gap: .6em; }
.pa-meteo-modify-btn { margin-left: auto; display: flex; align-items: center; gap: .3em; font-size: .82em; font-weight: 600; font-family: inherit; background: #fff; border: 1.5px solid #d4b8f0; color: #764ba2; border-radius: 8px; padding: .25em .65em; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; flex-shrink: 0; }
.pa-meteo-modify-btn:hover { background: #ede0ff; border-color: #764ba2; }
.pa-meteo-cancel-btn { display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; margin-top: .5em; padding: .55em; border: 1.5px solid #e8e8e8; border-radius: 10px; background: transparent; color: #888; font-size: .82em; font-weight: 500; font-family: inherit; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.pa-meteo-cancel-btn:hover { border-color: #c4a8e0; color: #764ba2; background: #faf4ff; }
.pa-steps { display: flex; align-items: center; justify-content: center; margin-bottom: 1.4em; }
.pa-step-dot { width: 28px; height: 28px; border-radius: 50%; background: #e8e8e8; color: #bbb; font-size: .75em; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, color .2s; }
.pa-step-dot--active { background: #764ba2; color: #fff; } .pa-step-dot--done { background: #c4a8e0; color: #fff; }
.pa-step-line { flex: 0 0 56px; height: 2px; background: #e8e8e8; margin: 0 6px; }
.pa-btn-next { width: 100%; margin-top: .4em; padding: .9em; border: none; border-radius: 12px; background: linear-gradient(135deg,#764ba2,#667eea); color: #fff; font-size: 1em; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.pa-btn-next:hover { opacity: .88; }
.pa-data-tiles-wrap { background: #f5f3f0; border-radius: 16px; padding: .9em; margin-bottom: .8em; }
.pa-data-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; }
.pa-data-tile { background: #fff; border-radius: 12px; padding: .75em .9em; border: 1px solid #ede8e0; }
.pa-data-tile--hl { background: #f5eeff; border-color: #d4b8f0; }
.pa-data-tile-lbl { font-size: .65em; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3em; }
.pa-data-tile-val { font-size: .95em; font-weight: 700; color: #333; }
.pa-data-tile--hl .pa-data-tile-val { color: #764ba2; }
.pa-form-wrap { background: #f5f3f0; border-radius: 16px; padding: .9em; margin-bottom: .6em; }
.pa-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75em; }
.pa-form-field { display: flex; flex-direction: column; gap: .3em; }
.pa-form-label { font-size: .78em; font-weight: 600; color: #555; }
.pa-form-unit { font-weight: 400; color: #aaa; }
.pa-form-field input { padding: .6em .85em; border: 1.5px solid #e0d8d0; border-radius: 10px; background: #fff; font-size: .9em; color: #333; outline: none; width: 100%; box-sizing: border-box; transition: border-color .2s, box-shadow .2s; box-shadow: 0 1px 3px rgba(0,0,0,.04); font-family: inherit; }
.pa-form-field input::placeholder { color: #c8bfb5; }
.pa-form-field input:focus { border-color: #764ba2; box-shadow: 0 0 0 3px rgba(118,75,162,.12); }
.pa-form-level { margin-top: .7em; }
.pa-form-level-pill { font-size: .8em; color: #764ba2; font-weight: 600; padding: .3em .8em; background: #f0e8fa; border-radius: 8px; display: inline-block; border: 1px solid #d4b8f0; }
.pa-save-check { display: flex; align-items: center; gap: .5em; font-size: .82em; color: #666; cursor: pointer; user-select: none; margin-top: .5em; }
.pa-save-check input[type=checkbox] { accent-color: #764ba2; width: 15px; height: 15px; flex-shrink: 0; }
.pa-edit-btn { display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; margin-top: .7em; padding: .6em 1em; border: 1.5px solid #d4b8f0; border-radius: 10px; background: #f5eeff; color: #764ba2; font-size: .85em; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; font-family: inherit; }
.pa-edit-btn:hover { background: #ede0ff; border-color: #764ba2; }
.pa-edit-actions { display: flex; gap: .5em; margin-top: .6em; }
.pa-confirm-btn { flex: 1; padding: .6em; border: none; border-radius: 10px; background: linear-gradient(135deg,#764ba2,#667eea); color: #fff; font-size: .85em; font-weight: 600; cursor: pointer; transition: opacity .15s; font-family: inherit; }
.pa-confirm-btn:hover { opacity: .88; }
.pa-cancel-btn { flex: 1; padding: .6em; border: 1.5px solid #e8e8e8; border-radius: 10px; background: transparent; color: #888; font-size: .85em; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s, background .15s; font-family: inherit; }
.pa-cancel-btn:hover { border-color: #c4a8e0; color: #555; background: #faf4ff; }
.pa-launch-btn { margin-top: .8em; font-size: 1em; padding: .9em; width: 100%; }
.pa-back-link { display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; margin-top: .6em; padding: .55em; border: 1.5px solid #e8e8e8; border-radius: 10px; background: transparent; color: #888; font-size: .85em; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s, background .15s; font-family: inherit; }
.pa-back-link:hover { border-color: #c4a8e0; color: #764ba2; background: #faf4ff; }
.athlete-summary-bar { display: flex; align-items: center; justify-content: space-between; padding: .6em .9em; background: #f5eeff; border: 1px solid #d4b8f0; border-radius: 10px; }
.athlete-summary-text { font-size: .88em; font-weight: 600; color: #764ba2; }
.athlete-toggle-btn { background: none; border: none; color: #764ba2; font-size: .78em; font-weight: 600; cursor: pointer; padding: .2em .5em; border-radius: 6px; transition: background .15s; font-family: inherit; white-space: nowrap; }
.athlete-toggle-btn:hover { background: #ede0ff; }
.athlete-form { margin-top: .6em; }
.athlete-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin-bottom: .6em; }
.athlete-form-field { display: flex; flex-direction: column; gap: .3em; }
.athlete-form-label { font-size: .78em; color: #777; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

*/