.pfx-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
    align-items: start;
}


.pfx-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.pfx-col--s5 { grid-column: span 5; }
.pfx-col--s7 { grid-column: span 7; }

.pfx-c {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-10);
    overflow: hidden;
    min-width: 0;
}

.pfx-c--s3  { grid-column: span 3; }
.pfx-c--s4  { grid-column: span 4; }
.pfx-c--s5  { grid-column: span 5; }
.pfx-c--s7  { grid-column: span 7; }
.pfx-c--s12 { grid-column: span 12; }


.pfx-ch {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.pfx-ch-ic {
    color: var(--teal);
    display: flex;
    align-items: center;
    flex: none;
}

.pfx-ch-t {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .01em;
}

.pfx-ch-sp { flex: 1 1 auto; }

.pfx-cb { padding: 13px 14px; }


.pfx-g {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 11px 12px;
}

.pfx-f {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pfx-f--w2   { grid-column: span 2; }
.pfx-f--full { grid-column: 1 / -1; }

.pfx-f label {
    font-size: 12px;
    color: var(--slate);
    font-weight: 500;
    margin: 0;
}

.pfx-hint {
    font-size: 11.5px;
    color: var(--slate);
    line-height: 1.4;
}


.pfx-opt {
    margin-top: 11px;
    border-top: 1px dashed var(--line);
    padding-top: 10px;
}

.pfx-opt summary {
    cursor: pointer;
    color: var(--teal);
    font-size: 12.5px;
    font-weight: 550;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pfx-opt summary::-webkit-details-marker { display: none; }

.pfx-opt summary::before {
    content: "\25B8";
    display: inline-block;
    transition: transform .15s ease;
}

.pfx-opt[open] summary::before { transform: rotate(90deg); }

.pfx-opt-n {
    color: var(--slate);
    font-weight: 400;
}

.pfx-opt .pfx-g { margin-top: 11px; }


.pfx-solde {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.pfx-solde:last-of-type { border-bottom: 0; }

.pfx-solde-l {
    font-size: 12.5px;
    color: var(--slate);
}

.pfx-solde-v {
    font-size: 17px;
    font-weight: 640;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
}


.pfx-solde-v--du  { color: var(--amber); }
.pfx-solde-v--nil { color: var(--slate); }


.pfx-sw {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-8);
    background: var(--paper);
}

.pfx-sw-t { font-size: 13px; font-weight: 550; }
.pfx-sw-d { font-size: 11.5px; color: var(--slate); margin-top: 1px; }


.pfx-vide {
    color: var(--slate);
    font-size: 12.5px;
    padding: 9px 11px;
    background: var(--paper);
    border: 1px dashed var(--line);
    border-radius: var(--r-8);
}


.pfx-code {
    font-size: 12px;
    color: #9fb0c6;
    background: rgba(255, 255, 255, .09);
    padding: 2px 9px;
    border-radius: var(--r-20);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pfx-dirty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--amber);
    white-space: nowrap;
}


.pfx-toast {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--green);
    border-radius: var(--r-9);
    background: var(--surface);
}

.pfx-toast-t { font-weight: 640; font-size: 13.5px; color: var(--ink); }
.pfx-toast-d { color: var(--slate); font-size: 12.5px; margin-top: 2px; }


.pfx-gps {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-8);
    padding: 9px 11px;
}

.pfx-gps-co {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 550;
    color: var(--ink);
}

.pfx-gps-me { font-size: 11.5px; color: var(--slate); margin-top: 2px; }

.pfx-gps-btns {
    display: flex;
    gap: 8px;
    margin-top: 9px;
    flex-wrap: wrap;
}


.pfx-note {
    margin-top: 9px;
    font-size: 11.5px;
    color: var(--slate);
    line-height: 1.45;
}


@media (max-width: 1100px) {
    .pfx-c--s3, .pfx-c--s4, .pfx-c--s5 { grid-column: span 6; }
    .pfx-c--s7 { grid-column: span 12; }
    .pfx-col--s5, .pfx-col--s7 { grid-column: span 12; }
}

@media (max-width: 768px) {
    .pfx-grid { gap: 11px; }

    .pfx-c--s3, .pfx-c--s4, .pfx-c--s5, .pfx-c--s7, .pfx-c--s12 {
        grid-column: span 12;
    }

    .pfx-col--s5, .pfx-col--s7 { grid-column: span 12; }

    .pfx-g { grid-template-columns: 1fr; }

    .pfx-f--w2 { grid-column: span 1; }
}