/* ========== CUSTOMER VIEW PAGE ========== */

.cv-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Back button */
.cv-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
    margin-bottom: 16px;
    transition: transform 0.2s ease;
}
.cv-back:hover {
    transform: translateX(-3px);
}

/* ========== PROFILE HEADER ========== */
.cv-profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(100, 160, 220, 0.30);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 20px rgba(60, 100, 180, 0.10);
    margin-bottom: 16px;
    gap: 20px;
    flex-wrap: wrap;
}

.cv-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cv-contact-inline {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cv-contact-inline .cv-contact-row {
    padding: 6px 0;
    border-bottom: none;
}

.cv-profile-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cv-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    color: white;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
    flex-shrink: 0;
}

.cv-profile-info h1 {
    font-size: 22px;
    font-weight: 700;
    color: #0d2a52;
    margin: 0;
}

.cv-profile-id {
    font-size: 12px;
    color: rgba(30, 70, 130, 0.45);
    font-weight: 500;
    display: inline-block;
    margin-top: 2px;
}

.cv-profile-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.cv-action-btn {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
}

.cv-btn-call {
    background: rgba(34, 197, 94, 0.1);
    color: #16A34A;
    border-color: rgba(34, 197, 94, 0.3);
}
.cv-btn-call:hover { background: rgba(34, 197, 94, 0.18); }

.cv-btn-text {
    background: rgba(37, 99, 235, 0.08);
    color: #2563EB;
    border-color: rgba(37, 99, 235, 0.2);
}
.cv-btn-text:hover { background: rgba(37, 99, 235, 0.15); }

.cv-btn-edit {
    background: rgba(249, 115, 22, 0.08);
    color: #EA580C;
    border-color: rgba(249, 115, 22, 0.25);
}
.cv-btn-edit:hover { background: rgba(249, 115, 22, 0.15); }

/* Points card */
/* Reward tier chip — sits in the profile header, before the points chip */
.cv-tier-chip {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(100, 160, 220, 0.30);
    border-radius: 14px;
    padding: 16px 20px;
    min-width: 172px;
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(60, 100, 180, 0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.cv-tier-chip-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(30, 70, 130, 0.6);
}
.cv-tier-chip-badge {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(30, 60, 110, 0.18);
}
.cv-tier-chip-bar {
    width: 100%;
    height: 5px;
    border-radius: 4px;
    background: rgba(100, 160, 220, 0.20);
    overflow: hidden;
}
.cv-tier-chip-bar span { display: block; height: 100%; border-radius: 4px; }
.cv-tier-chip-note {
    font-size: 11px;
    color: rgba(30, 70, 130, 0.65);
    white-space: nowrap;
}
.cv-tier-chip-note b { color: #0d2a52; font-family: var(--font-num); }

.cv-points-card {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    border-radius: 14px;
    padding: 20px 28px;
    text-align: center;
    min-width: 180px;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}

.cv-points-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.7);
}

.cv-points-value {
    font-size: 36px;
    font-weight: 800;
    color: white;
    font-family: var(--font-num);
    line-height: 1.1;
    margin: 4px 0;
}

.cv-points-dollar {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

/* Spend card */
.cv-spend-card {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: 14px;
    padding: 20px 28px;
    text-align: center;
    min-width: 180px;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.cv-spend-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.7);
}

.cv-spend-value {
    font-size: 36px;
    font-weight: 800;
    color: white;
    font-family: var(--font-num);
    line-height: 1.1;
    margin: 4px 0;
}

.cv-spend-orders {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

/* ========== STAT TILES (Style B) ========== */
.cv-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.cv-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(100, 160, 220, 0.30);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 4px 20px rgba(60, 100, 180, 0.10);
}

.cv-tile-chip {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cv-tile-chip svg { width: 22px; height: 22px; }

.cv-chip-blue   { background: rgba(37, 99, 235, 0.12);  color: #2563EB; }
.cv-chip-green  { background: rgba(16, 185, 129, 0.14); color: #059669; }
.cv-chip-amber  { background: rgba(217, 119, 6, 0.13);  color: #D97706; }
.cv-chip-violet { background: rgba(124, 58, 237, 0.12); color: #7C3AED; }

.cv-tile-body { min-width: 0; }

.cv-tile-lbl {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(30, 70, 130, 0.45);
}

.cv-tile-val {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.15;
    margin-top: 3px;
    color: #0d2a52;
    font-variant-numeric: tabular-nums;
}
.cv-tile-val-sm { font-size: 19px; }

.cv-tile-foot {
    font-size: 11px;
    color: rgba(30, 70, 130, 0.62);
    margin-top: 1px;
}

.cv-trend { font-weight: 700; }
.cv-trend-up { color: #059669; }
.cv-trend-dn { color: #DC2626; }


/* ========== MAIN GRID ========== */
.cv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.cv-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(100, 160, 220, 0.1);
}

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

.cv-contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cv-contact-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(30, 70, 130, 0.45);
    margin-bottom: 2px;
}

.cv-contact-value {
    font-size: 14px;
    font-weight: 600;
    color: #0d2a52;
}

/* ========== PURCHASE HISTORY ========== */
.cv-history-card {
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(100, 160, 220, 0.30);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(60, 100, 180, 0.10);
}

.cv-history-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0d2a52;
    margin: 0 0 16px;
    padding-left: 12px;
    border-left: 3px solid #2563EB;
}


/* Status badges */
.cv-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cv-status-paid {
    background: rgba(34, 197, 94, 0.1);
    color: #16A34A;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.cv-status-pending {
    background: rgba(37, 99, 235, 0.08);
    color: #2563EB;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.cv-status-deposit {
    background: rgba(217, 119, 6, 0.1);
    color: #D97706;
    border: 1px solid rgba(217, 119, 6, 0.25);
}

.cv-status-default {
    background: rgba(148, 163, 184, 0.1);
    color: #64748B;
    border: 1px solid rgba(148, 163, 184, 0.2);
}


/* History pagination */
.cv-hist-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(100, 160, 220, 0.12);
}

.cv-hist-page-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: #2563EB;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    transition: all 0.2s ease;
}

.cv-hist-page-btn:hover {
    background: rgba(37, 99, 235, 0.15);
}

.cv-hist-page-info {
    font-size: 12px;
    color: rgba(30, 70, 130, 0.5);
    font-weight: 500;
}

.cv-no-data {
    text-align: center;
    color: rgba(30, 70, 130, 0.4);
    padding: 30px;
    font-size: 13px;
}

/* ========== MODAL ========== */
.cv-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(13, 42, 82, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

.cv-modal-overlay.open {
    display: flex;
}

.cv-modal {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(100, 160, 220, 0.30);
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 50px rgba(13, 42, 82, 0.2);
    animation: cvSlide 0.3s ease;
}

@keyframes cvSlide {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.cv-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(100, 160, 220, 0.2);
}

.cv-modal-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #0d2a52;
    margin: 0;
}

.cv-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #94A3B8;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.cv-modal-close:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #EF4444;
}

.cv-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cv-form-group {
    margin-bottom: 14px;
}

.cv-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #0d2a52;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cv-form-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 10px;
    font-size: 14px;
    font-family: var(--font-ui);
    color: #0d2a52;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.cv-form-input:focus {
    background: #fff;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cv-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.cv-btn-cancel {
    flex: 0.5;
    padding: 11px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-ui);
    cursor: pointer;
    background: rgba(148, 163, 184, 0.08);
    color: #0d2a52;
    border: 1px solid rgba(148, 163, 184, 0.25);
    transition: all 0.2s ease;
}

.cv-btn-cancel:hover { background: rgba(148, 163, 184, 0.15); }

.cv-btn-save {
    flex: 1;
    padding: 11px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-ui);
    cursor: pointer;
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    transition: all 0.2s ease;
}

.cv-btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .cv-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .cv-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
    .cv-header-right {
        flex-direction: column;
        align-items: flex-end;
    }
}

@media (max-width: 768px) {
    .cv-profile-header {
        flex-direction: column;
        text-align: center;
    }
    .cv-profile-left {
        flex-direction: column;
    }
    .cv-profile-actions {
        justify-content: center;
    }
    .cv-header-right {
        align-items: center;
        width: 100%;
    }
    .cv-stats-row {
        grid-template-columns: 1fr 1fr;
    }
    .cv-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .cv-tiles {
        grid-template-columns: 1fr;
    }
}

/* ============ Purchase History table — matches Completed Repairs / Sold Devices ============ */
.cvh-tablewrap {
    --ink:#0d2a52; --ink-mid:#51607a; --ink-soft:#8496b0;
    --line:rgba(120,140,170,.22); --accent:#1a5fa8;
    --green:#059669; --amber:#CA8A04; --red:#DC2626;
    --panel:#fff;
    background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 10px 30px rgba(30,60,110,.08); overflow:hidden;
    color:var(--ink);
    font-family:var(--font-ui);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.cvh-scroll { overflow-x:auto; }
.cvh-table { width:100%; border-collapse:collapse; min-width:820px; }

.cvh-table thead th {
    text-align:left; font-size:11px; letter-spacing:.5px; text-transform:uppercase;
    color:var(--ink-soft); font-weight:700; padding:14px 14px 12px;
    border-bottom:1px solid var(--line); white-space:nowrap;
}
.cvh-caret-cell { width:34px; padding-right:0 !important; }
.cvh-total-cell { text-align:right; }

.cvh-row { cursor:pointer; transition:background .14s ease; }
.cvh-row:hover { background:rgba(26,95,168,.04); }
.cvh-row > td { padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
.cvh-row.open { background:rgba(26,95,168,.06); }
.cvh-row.open > td { border-bottom-color:transparent; }

.cvh-caret { color:var(--ink-soft); transition:transform .18s ease; }
.cvh-row.open .cvh-caret { transform:rotate(90deg); color:var(--accent); }

.cvh-sub { font-size:11.5px; color:var(--ink-soft); }
.cvh-ord {
    font-family:var(--font-num); font-size:10.5px; font-weight:500; color:#b07020;
    background:rgba(249,115,22,.06); border:1.4px dashed rgba(249,115,22,.45);
    border-radius:7px; padding:3px 8px; white-space:nowrap;
}
.cvh-money { font-family:var(--font-num); font-weight:800; color:var(--green);
    font-variant-numeric:tabular-nums; white-space:nowrap; }

.cvh-type { font-size:11px; font-weight:700; padding:3px 9px; border-radius:11px; white-space:nowrap; }
.cvh-t-repair { color:#b45309; background:rgba(202,138,4,.12); }
.cvh-t-sale   { color:var(--accent); background:rgba(26,95,168,.10); }

.cvh-dev { display:flex; align-items:center; gap:10px; }
.cvh-dev img { width:34px; height:34px; border-radius:9px; object-fit:cover;
    background:#e5ecf5; flex:0 0 auto; border:1px dashed var(--line); }
.cvh-dev .cvh-n { font-size:13px; line-height:1.3; }

/* ── drawer ── */
.cvh-detail > td { padding:0 !important; border:0 !important; }
.cvh-drawer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s ease; }
.cvh-detail.open .cvh-drawer { grid-template-rows:1fr; }
.cvh-drawer-in { overflow:hidden; }
.cvh-detail.open .cvh-drawer-in { border-bottom:1px solid var(--line); }
.cvh-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:26px;
    padding:20px 22px 24px; background:linear-gradient(180deg, rgba(26,95,168,.035), transparent 60%);
}

.cvh-block-label {
    font-size:11px; letter-spacing:.5px; text-transform:uppercase;
    color:var(--ink-soft); font-weight:700; margin-bottom:10px;
}

.cvh-specs { display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; }
.cvh-spec { display:flex; justify-content:space-between; gap:10px; align-items:baseline;
    padding:6px 0; border-bottom:1px dotted rgba(120,140,170,.28); font-size:13px; }
.cvh-spec span { color:var(--ink-mid); }
.cvh-spec b { color:var(--ink); text-align:right; }
.cvh-pts { color:var(--accent) !important; font-family:var(--font-num); }

.cvh-notes { font-size:13px; color:var(--ink-mid); background:#f8fafc;
    border:1px solid var(--line); border-radius:10px; padding:11px 13px; line-height:1.5; }

.cvh-idetail { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.cvh-irow { display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 13px; border-bottom:1px solid var(--line); font-size:13px; }
.cvh-idev { display:flex; align-items:center; gap:10px; min-width:0; }
.cvh-idev img { width:30px; height:30px; border-radius:8px; object-fit:cover;
    background:#e5ecf5; flex:0 0 auto; border:1px dashed var(--line); }
.cvh-iname { color:var(--ink); line-height:1.3; }
.cvh-imei { font-family:var(--font-num); font-size:11px; color:var(--ink-soft); margin-top:1px; }
.cvh-pill { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:9px;
    color:var(--green); background:rgba(5,150,105,.12); white-space:nowrap; }

.cvh-sum { background:#f8fafc; padding:10px 13px; }
.cvh-sr { display:flex; justify-content:space-between; font-size:13px; padding:4px 0;
    color:var(--ink-mid); font-variant-numeric:tabular-nums; }
.cvh-sr span:last-child { font-family:var(--font-num); }
.cvh-tax span:last-child { color:var(--amber); }
.cvh-tot b, .cvh-tot span { color:var(--ink); font-weight:700; }
.cvh-dep span:last-child { color:var(--amber); }
.cvh-paid { border-top:1px solid var(--line); margin-top:4px; padding-top:8px; }
.cvh-paid b { color:var(--ink); }
.cvh-paid span:last-child { color:var(--green); font-weight:800; }
.cvh-method { border-top:1px solid var(--line); margin-top:4px; padding-top:8px; color:var(--ink-soft); }

@media (max-width: 900px) {
    .cvh-grid { grid-template-columns:1fr; gap:18px; }
    .cvh-specs { grid-template-columns:1fr; }
}

/* ============================================================
   NEUMORPHIC SURFACE — pilot on the customer view page only.
   Soft UI needs an OPAQUE surface whose colour the button shares
   exactly: a light shadow up-left + a dark one down-right sculpt
   the edge. That cannot work over frosted glass, so every panel
   below drops its translucency and becomes a solid slab.
   ============================================================ */
:root {
    --neu-bg:    #e4e9f2;
    --neu-light: rgba(255, 255, 255, 0.95);
    --neu-dark:  rgba(148, 167, 196, 0.55);
    --neu-ink:   #0d2a52;

    /* raised */
    --neu-out:    -6px -6px 12px var(--neu-light),  6px  6px 14px var(--neu-dark);
    --neu-out-sm: -3px -3px  7px var(--neu-light),  3px  3px  8px var(--neu-dark);
    /* pressed / carved in */
    --neu-in:     inset -3px -3px 7px var(--neu-light), inset 3px 3px 7px var(--neu-dark);
    --neu-in-deep:inset -5px -5px 10px var(--neu-light), inset 5px 5px 11px var(--neu-dark);
}

/* Page canvas — one continuous soft surface instead of the photo backdrop.
   Safe to target .main-content directly: this stylesheet only loads on view.php. */
.main-content { background: var(--neu-bg); }

/* ── Raised panels ── */
.cv-profile-header,
.cv-tile,
.cv-history-card,
.cvh-tablewrap,
.cv-tier-chip {
    background: var(--neu-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: var(--neu-out) !important;
}

/* Keep the two colour chips coloured, but soften their shadow to match */
.cv-points-card { box-shadow: -5px -5px 11px var(--neu-light), 6px 6px 14px rgba(37, 99, 235, 0.35) !important; }
.cv-spend-card  { box-shadow: -5px -5px 11px var(--neu-light), 6px 6px 14px rgba(16, 185, 129, 0.35) !important; }

.cv-avatar { box-shadow: var(--neu-out-sm), 0 4px 14px rgba(37, 99, 235, 0.28); }

/* Stat-tile icon squares read better carved into the tile */
.cv-tile-chip { box-shadow: var(--neu-in); }

/* ── Buttons: raised by default, pressed on click ── */
.cv-action-btn,
.cv-hist-page-btn,
.cv-btn-cancel,
.cv-btn-save {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: var(--neu-out-sm);
    transition: box-shadow .13s ease, transform .13s ease, color .13s ease;
}
.cv-action-btn:hover,
.cv-hist-page-btn:hover,
.cv-btn-cancel:hover,
.cv-btn-save:hover {
    box-shadow: -4px -4px 9px var(--neu-light), 4px 4px 10px var(--neu-dark);
}
/* The pressed state — same shadows, turned inward */
.cv-action-btn:active,
.cv-hist-page-btn:active,
.cv-btn-cancel:active,
.cv-btn-save:active {
    box-shadow: var(--neu-in);
    transform: translateY(1px);
}
/* Colour survives as the label, since the fill is now the surface */
.cv-btn-call { color: #16A34A !important; }
.cv-btn-text { color: #2563EB !important; }
.cv-btn-edit { color: #EA580C !important; }
.cv-btn-save { color: #2563EB !important; font-weight: 800; }
.cv-btn-cancel { color: #64748B !important; }

.cv-modal-close { border-radius: 50%; width: 32px; height: 32px; box-shadow: var(--neu-out-sm); }
.cv-modal-close:active { box-shadow: var(--neu-in); }

/* ── Inset for persistent "on" states ── */
/* Expanded purchase-history row: the drawer reads as carved into the table */
.cvh-row.open {
    background: var(--neu-bg) !important;
    box-shadow: var(--neu-in);
}
.cvh-detail.open .cvh-drawer-in {
    background: var(--neu-bg);
    box-shadow: var(--neu-in-deep);
    border-bottom: none;
}
.cvh-grid { background: none; }
.cvh-table thead th { border-bottom: 1px solid rgba(148, 167, 196, 0.35); }
.cvh-row > td { border-bottom: 1px solid rgba(148, 167, 196, 0.28); }
.cvh-idetail, .cvh-notes { border: none; box-shadow: var(--neu-in); background: var(--neu-bg); }
.cvh-sum { background: none; }

/* Inputs are wells, not raised */
.cv-form-input {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: var(--neu-in);
    color: var(--neu-ink);
}
.cv-form-input:focus { box-shadow: var(--neu-in-deep); outline: none; }

/* Modal itself is a raised slab */
.cv-modal {
    background: var(--neu-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: var(--neu-out), 0 24px 60px rgba(20, 45, 90, 0.25) !important;
}
/* the dimmed overlay behind the modal keeps its blur — that one still helps */

/* ============================================================
   House type stack (--font-ui / --font-num live in ../index.css).
   Text is Apple SF Pro; figures are SF Mono. "Figures" means money,
   counts, IDs and percentages — anything read as a number. Word-valued
   fields ("2 days ago", "Aug 2026", "Page 1 of 2") stay on --font-ui.
   ============================================================ */
.cv-points-value,
.cv-spend-value,
.cv-tile-val,
.cv-profile-id,
.cv-trend {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

/* These share .cv-tile-val but hold words, so send them back to the UI face */
.cv-tile-val-sm { font-family: var(--font-ui); }

/* Pagination reads as a sentence ("Page 1 of 2"), so it stays on the UI face */
.cv-hist-page-btn, .cv-hist-page-info { font-family: var(--font-ui); }