.coco-referrals {
    --coco-ink: #312b28;
    --coco-muted: #756a64;
    --coco-line: #e8dfd9;
    --coco-blush: #f8f2ef;
    --coco-accent: #a55f58;
    color: var(--coco-ink);
    display: grid;
    gap: 1.25rem;
}

.coco-referrals * { box-sizing: border-box; }
.coco-referrals__intro h2 { margin: .15rem 0 .6rem; }
.coco-referrals__intro p:last-child { max-width: 48rem; color: var(--coco-muted); }
.coco-referrals__eyebrow { color: var(--coco-accent); font-size: .72rem; font-weight: 700; letter-spacing: .14em; margin: 0; }
.coco-referrals__note { color: var(--coco-muted); font-size: .88rem; margin-bottom: 0; }

.coco-referral-share,
.coco-referral-panel {
    background: #fff;
    border: 1px solid var(--coco-line);
    border-radius: 16px;
    padding: clamp(1rem, 3vw, 1.6rem);
}

.coco-referral-share__row + .coco-referral-share__row { margin-top: .9rem; }
.coco-referral-share__row > label { display: block; font-weight: 700; margin-bottom: .55rem; }
.coco-referral-share__controls { display: flex; flex-wrap: wrap; gap: .55rem; }
.coco-referral-share__controls input { flex: 1 1 18rem; min-width: 0; }
.coco-referral-share__status { color: var(--coco-accent); font-size: .85rem; margin: .45rem 0 0; min-height: 1.25em; }

.coco-referral-balances,
.coco-referral-metrics,
.coco-referral-tier,
.coco-referral-state-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coco-referral-balances article {
    background: linear-gradient(145deg, #3a3330, #5b4944);
    border-radius: 16px;
    color: #fff;
    display: grid;
    gap: .3rem;
    min-height: 8.5rem;
    padding: 1.25rem;
}

.coco-referral-balances article:last-child { background: linear-gradient(145deg, #9a5b55, #c4877d); }
.coco-referral-balances strong { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.coco-referral-balances small { align-self: end; opacity: .78; }
.coco-referral-panel h3 { margin-top: 0; }
.coco-referral-panel__heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.coco-referral-panel__heading > p { color: var(--coco-muted); font-size: .85rem; margin: 0; text-align: right; }
.coco-referral-status {
    background: #f1e5df;
    border-radius: 999px;
    color: #7b433e;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 700;
    padding: .4rem .75rem;
    white-space: nowrap;
}
.coco-referral-quarter-picker {
    align-items: end;
    border-top: 1px solid var(--coco-line);
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem;
    padding-top: 1rem;
}
.coco-referral-quarter-picker label { flex-basis: 100%; font-size: .82rem; font-weight: 700; }
.coco-referral-quarter-picker select { margin: 0; min-width: 10rem; }

.coco-referral-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1rem 0; }
.coco-referral-metrics div,
.coco-referral-tier div,
.coco-referral-state-grid div {
    background: var(--coco-blush);
    border-radius: 11px;
    display: grid;
    gap: .3rem;
    padding: .85rem;
}
.coco-referral-metrics span,
.coco-referral-tier span,
.coco-referral-state-grid span { color: var(--coco-muted); font-size: .8rem; }
.coco-referral-state-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.coco-referral-state-grid strong { font-size: 1.5rem; }
.coco-referral-details { border-top: 1px solid var(--coco-line); margin-top: 1rem; padding-top: 1rem; }
.coco-referral-details summary { cursor: pointer; font-weight: 700; }
.coco-referral-details dl { display: grid; gap: .45rem; margin-bottom: 0; }
.coco-referral-details dl div { display: flex; gap: 1rem; justify-content: space-between; }
.coco-referral-details dd { margin: 0; }

.coco-referral-tax-notice { background: #fff8e8; border-left: 4px solid #c8953b; padding: .85rem 1rem; }
.coco-referral-choice__quarter { border-top: 1px solid var(--coco-line); margin-top: 1rem; padding-top: 1rem; }
.coco-referral-choice__grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coco-referral-choice__grid form { background: var(--coco-blush); border-radius: 12px; display: grid; gap: .7rem; padding: 1rem; }
.coco-referral-choice__grid h5 { font-size: 1rem; margin: 0; }
.coco-referral-choice__grid label { font-size: .88rem; line-height: 1.45; }
.coco-referral-fields { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coco-referral-fields label { display: grid; gap: .25rem; }
.coco-referral-fields input,
.coco-referral-fields select { margin: 0; max-width: 100%; min-width: 0; width: 100%; }

.coco-referral-table { overflow-x: auto; }
.coco-referral-table table { border-collapse: collapse; font-size: .86rem; margin: 0; width: 100%; }
.coco-referral-table th,
.coco-referral-table td { border-bottom: 1px solid var(--coco-line); padding: .7rem .55rem; text-align: left; vertical-align: top; }
.coco-referral-table th { color: var(--coco-muted); white-space: nowrap; }
.coco-referral-table code { color: var(--coco-ink); font-size: .78rem; white-space: nowrap; }
.coco-referral-pagination { align-items: center; display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; margin-top: 1rem; }
.coco-referral-pagination span { color: var(--coco-muted); font-size: .85rem; }
.coco-referral-rules ul { margin-bottom: 0; padding-left: 1.2rem; }
.coco-referral-rules li + li { margin-top: .45rem; }

@media (max-width: 800px) {
    .coco-referral-metrics,
    .coco-referral-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coco-referral-choice__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .coco-referrals { gap: 1rem; }
    .coco-referral-balances,
    .coco-referral-tier,
    .coco-referral-fields { grid-template-columns: 1fr; }
    .coco-referral-panel__heading { display: block; }
    .coco-referral-panel__heading > p { margin-top: .35rem; text-align: left; }
    .coco-referral-status { margin-top: .65rem; }
    .coco-referral-quarter-picker select,
    .coco-referral-quarter-picker button { width: 100%; }
    .coco-referral-pagination .button { flex: 1 1 8rem; text-align: center; }
    .coco-referral-pagination span { flex-basis: 100%; order: -1; text-align: center; }
    .coco-referral-share__controls { align-items: stretch; flex-direction: column; }
    .coco-referral-share__controls input,
    .coco-referral-share__controls button { flex: none; width: 100%; }
    .coco-referral-table { overflow: visible; }
    .coco-referral-table thead { display: none; }
    .coco-referral-table table,
    .coco-referral-table tbody,
    .coco-referral-table tr,
    .coco-referral-table td { display: block; width: 100%; }
    .coco-referral-table tr { border: 1px solid var(--coco-line); border-radius: 10px; margin-bottom: .75rem; padding: .45rem .75rem; }
    .coco-referral-table td { align-items: baseline; border-bottom: 1px dashed var(--coco-line); display: flex; gap: 1rem; justify-content: space-between; padding: .5rem 0; text-align: right; }
    .coco-referral-table td:last-child { border-bottom: 0; }
    .coco-referral-table td::before { color: var(--coco-muted); content: attr(data-label); font-weight: 600; text-align: left; }
}

@media (max-width: 390px) {
    .coco-referral-metrics,
    .coco-referral-state-grid { grid-template-columns: 1fr; }
}