.member-dashboard-page,
.member-order-page{
    padding:52px 0 80px;
}

.member-dashboard-head h1{
    margin:5px 0 24px;
    font-size:40px;
}

.member-dashboard-grid{
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:18px;
    align-items:start;
}

.customer-card,
.history-card,
.order-detail-card{
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shadow);
}

.customer-card{
    padding:20px;
    position:sticky;
    top:96px;
}

.customer-card h2,
.history-card h2{
    margin:0 0 18px;
}

.customer-line{
    padding:11px 0;
    border-bottom:1px solid var(--line);
}

.customer-line span,
.customer-line strong{
    display:block;
}

.customer-line span{
    color:var(--muted);
    font-size:12px;
}

.history-card{
    padding:20px;
}

.history-head p{
    color:var(--muted);
    margin-top:-10px;
}

.history-order{
    padding:18px 0;
    border-top:1px solid var(--line);
}

.history-order-top,
.order-detail-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
}

.order-label{
    display:block;
    color:var(--muted);
    font-size:10px;
    letter-spacing:.12em;
}

.history-order-top a{
    font-size:17px;
    font-weight:700;
}

.order-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    font-size:12px;
    white-space:nowrap;
}

.status-paid{
    background:rgba(45,210,137,.1);
    color:#7df0b8;
}

.status-failed{
    background:rgba(255,68,93,.1);
    color:#ff8797;
}

.status-pending{
    background:rgba(255,184,77,.1);
    color:#ffd08a;
}

.history-order-grid,
.order-detail-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:14px 0;
}

.history-order-grid div,
.order-detail-grid div{
    padding:11px;
    border-radius:13px;
    background:rgba(255,255,255,.03);
}

.history-order-grid span,
.order-detail-grid span{
    display:block;
    color:var(--muted);
    font-size:11px;
}

.history-pack-list{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.history-pack-list span{
    padding:6px 9px;
    background:#0b111c;
    border:1px solid var(--line);
    border-radius:9px;
    font-size:12px;
}

.history-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
}

.history-actions a,
.receipt-button{
    padding:9px 13px;
    border:1px solid var(--line);
    border-radius:11px;
    font-size:13px;
}

.empty-history{
    padding:25px 0;
    color:var(--muted);
}

.back-link{
    display:inline-block;
    color:var(--muted);
    margin-bottom:14px;
}

.order-detail-card{
    padding:24px;
}

.order-detail-head h1{
    margin:4px 0;
    font-size:30px;
}

.order-detail-head p{
    color:var(--muted);
    margin:0;
}

.order-pack-table{
    margin:18px 0;
    border-top:1px solid var(--line);
}

.order-pack-table>div{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
}

.receipt-button{
    display:inline-flex;
    background:linear-gradient(135deg,var(--red),var(--red2));
    border:0;
    font-weight:700;
}

.admin-pack-list{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.admin-pack-list span{
    font-size:12px;
}

.status-chip{
    display:inline-flex;
    padding:6px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
}

.status-chip.paid{
    color:#75ebb0;
    background:rgba(45,210,137,.1);
}

.status-chip.failed{
    color:#ff7e90;
    background:rgba(255,68,93,.1);
}

.status-chip.pending{
    color:#ffd08a;
    background:rgba(255,184,77,.1);
}

.admin-receipt-link{
    color:#ff8190;
    font-weight:700;
}

@media(max-width:900px){
    .member-dashboard-grid{
        grid-template-columns:1fr;
    }

    .customer-card{
        position:static;
    }

    .history-order-grid,
    .order-detail-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:560px){
    .member-dashboard-page,
    .member-order-page{
        padding:28px 0 48px;
    }

    .history-card,
    .customer-card,
    .order-detail-card{
        padding:14px;
        border-radius:16px;
    }

    .history-order-top,
    .order-detail-head{
        flex-direction:column;
    }

    .history-order-grid,
    .order-detail-grid{
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .history-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .history-actions a{
        text-align:center;
    }
}