.cl-page { display:flex; flex-direction:column; gap:22px; }

/* ── Hero ── */
.cl-hero { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.cl-eyebrow { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--g); margin-bottom:6px; }
.cl-title { font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:800; color:var(--text-1); margin-bottom:4px; }
.cl-sub { font-size:.78rem; color:var(--text-3); }
.cl-export {
    display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
    border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--border);
    color:var(--text-2); font-family:'Inter',sans-serif; font-size:.8rem; font-weight:600;
    cursor:pointer; transition:all .15s; white-space:nowrap; flex-shrink:0;
}
.cl-export:hover { background:rgba(255,255,255,.08); color:var(--text-1); }

/* ── Stats ── */
.cl-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.cl-stat {
    background:rgba(255,255,255,.022); border:1px solid var(--border); border-radius:18px;
    padding:20px 22px; display:flex; flex-direction:column; gap:4px;
    position:relative; overflow:hidden; transition:border-color .2s,transform .18s;
}
.cl-stat:hover { border-color:rgba(0,230,118,.22); transform:translateY(-2px); }
.cl-stat-glow { position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,230,118,.55) 50%,transparent);
    opacity:0; transition:opacity .2s; }
.cl-stat:hover .cl-stat-glow { opacity:1; }
.cl-stat-icon { width:36px; height:36px; border-radius:11px; margin-bottom:8px;
    display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.si-g { background:rgba(0,230,118,.08); border:1px solid rgba(0,230,118,.14); color:#00e676; }
.si-b { background:rgba(96,165,250,.08); border:1px solid rgba(96,165,250,.14); color:#60a5fa; }
.si-p { background:rgba(167,139,250,.08); border:1px solid rgba(167,139,250,.14); color:#a78bfa; }
.si-a { background:rgba(251,191,36,.08);  border:1px solid rgba(251,191,36,.14);  color:#fbbf24; }
.cl-stat-val { font-family:'Space Grotesk',sans-serif; font-size:1.65rem; font-weight:800; color:var(--text-1); line-height:1; }
.cl-stat-lbl { font-size:.69rem; color:var(--text-3); font-weight:500; margin-top:2px; }

/* ── Main card ── */
.cl-card { background:rgba(255,255,255,.018); border:1px solid var(--border); border-radius:22px; overflow:hidden; }

/* ── Toolbar ── */
.cl-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:16px 20px; border-bottom:1px solid var(--border); }
.cl-search-wrap { flex:1; min-width:200px; max-width:320px; position:relative; }
.cl-search-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:.75rem; pointer-events:none; }
.cl-search {
    width:100%; padding:9px 13px 9px 36px;
    background:rgba(255,255,255,.04); border:1px solid var(--border);
    border-radius:11px; color:var(--text-1); font-size:.81rem;
    font-family:'Inter',sans-serif; outline:none; transition:border-color .15s,background .15s;
}
.cl-search::placeholder { color:var(--text-3); }
.cl-search:focus { border-color:rgba(0,230,118,.38); background:rgba(0,230,118,.02); }

.cl-filters { display:flex; gap:6px; }
.cl-filter {
    display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
    border-radius:9px; font-size:.74rem; font-weight:600; font-family:'Inter',sans-serif;
    background:rgba(255,255,255,.04); border:1px solid var(--border);
    color:var(--text-3); cursor:pointer; transition:all .14s; white-space:nowrap;
}
.cl-filter:hover { color:var(--text-2); background:rgba(255,255,255,.07); }
.cl-filter.active { background:rgba(0,230,118,.07); border-color:rgba(0,230,118,.22); color:var(--g); }
.fd { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.fd-all    { background:var(--text-3); }
.fd-active { background:#00e676; }
.fd-new    { background:#60a5fa; }

.cl-sort {
    padding:9px 12px; background:rgba(255,255,255,.04); border:1px solid var(--border);
    border-radius:11px; color:var(--text-2); font-size:.78rem; font-family:'Inter',sans-serif;
    outline:none; cursor:pointer; transition:border-color .15s;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center; padding-right:30px;
}
.cl-sort:focus { border-color:rgba(0,230,118,.35); }
.cl-sort option { background:#1a1a1a; }

.cl-spacer { flex:1; }
.cl-count { font-size:.74rem; color:var(--text-3); white-space:nowrap; }
.cl-count strong { color:var(--text-1); font-weight:700; }

/* ── Table ── */
.cl-table-wrap { overflow-x:auto; }
.cl-table { width:100%; border-collapse:collapse; min-width:520px; }
.cl-table th {
    padding:11px 18px; font-size:.65rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--text-3); text-align:left; white-space:nowrap;
    border-bottom:1px solid var(--border); background:rgba(255,255,255,.012);
    cursor:pointer; user-select:none;
}
.cl-table th:hover { color:var(--text-2); }
.cl-table th .si { margin-left:4px; opacity:.35; font-size:.58rem; }
.cl-table th.sorted { color:var(--g); }
.cl-table th.sorted .si { opacity:1; color:var(--g); }
.cl-table td { padding:15px 18px; vertical-align:middle; border-bottom:1px solid rgba(255,255,255,.03); }
.cl-table tbody tr { transition:background .1s; }
.cl-table tbody tr:hover { background:rgba(255,255,255,.025); }
.cl-table tbody tr:last-child td { border-bottom:none; }

/* ── Customer cell ── */
.cust-cell { display:flex; align-items:center; gap:13px; min-width:0; }
.cust-av {
    width:44px; height:44px; border-radius:14px; flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk',sans-serif; font-size:.84rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.5px;
    transition:transform .15s;
}
.cl-table tbody tr:hover .cust-av { transform:scale(1.07); }
.cust-av img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.av-g { background:rgba(0,230,118,.08);   border:1px solid rgba(0,230,118,.18);   color:#00e676; }
.av-b { background:rgba(96,165,250,.08);  border:1px solid rgba(96,165,250,.18);  color:#60a5fa; }
.av-p { background:rgba(167,139,250,.08); border:1px solid rgba(167,139,250,.18); color:#a78bfa; }
.av-a { background:rgba(251,191,36,.08);  border:1px solid rgba(251,191,36,.18);  color:#fbbf24; }
.av-r { background:rgba(239,68,68,.08);   border:1px solid rgba(239,68,68,.18);   color:#ef4444; }
.cust-name {
    font-size:.86rem; font-weight:700; color:var(--text-1);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;
}
.cust-id { font-size:.7rem; color:var(--text-3); margin-top:2px; }

/* ── Phone ── */
.phone-tag { font-size:.8rem; color:var(--text-3); font-feature-settings:'tnum'; }

/* ── Joined date ── */
.joined-main { font-size:.8rem; color:var(--text-2); white-space:nowrap; }
.joined-rel  { font-size:.68rem; color:var(--text-3); margin-top:2px; }

/* ── Status badge ── */
.sbadge {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 11px; border-radius:100px; font-size:.7rem; font-weight:700; white-space:nowrap;
}
.sb-active { background:rgba(0,230,118,.08); border:1px solid rgba(0,230,118,.18); color:#00e676; }
.sb-new    { background:rgba(96,165,250,.08); border:1px solid rgba(96,165,250,.18); color:#60a5fa; }
.sb-inactive { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:var(--text-3); }
.sb-dot { width:5px; height:5px; border-radius:50%; background:currentColor; }

/* ── Profile badge ── */
.prof-badge {
    display:inline-flex; align-items:center; gap:5px;
    font-size:.7rem; color:var(--text-3);
}
.prof-badge.done { color:var(--g); }
.prof-badge i { font-size:.65rem; }

/* ── Empty ── */
.cl-empty { padding:80px 20px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.cl-empty-ring {
    width:64px; height:64px; border-radius:20px;
    background:rgba(255,255,255,.04); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--text-3);
}
.cl-empty-title { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem; color:var(--text-2); }
.cl-empty-sub { font-size:.79rem; color:var(--text-3); max-width:260px; line-height:1.65; }

/* ── Skeleton ── */
.skel { background:rgba(255,255,255,.06); border-radius:6px; animation:sk-pulse 1.4s ease-in-out infinite; }
@keyframes sk-pulse { 0%,100%{opacity:.7} 50%{opacity:.25} }
.sk-av   { width:44px; height:44px; border-radius:14px; flex-shrink:0; }
.sk-lg   { height:13px; border-radius:4px; }
.sk-sm   { height:10px; border-radius:4px; margin-top:6px; }
.sk-badge{ height:24px; border-radius:100px; }

/* ── Pagination ── */
.cl-pagination { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-top:1px solid var(--border); flex-wrap:wrap; gap:10px; }
.pg-info { font-size:.74rem; color:var(--text-3); }
.pg-info strong { color:var(--text-2); }
.pg-btns { display:flex; gap:5px; }
.pg-btn {
    min-width:32px; height:32px; padding:0 6px; border-radius:8px; border:1px solid var(--border);
    background:rgba(255,255,255,.03); color:var(--text-2);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:.77rem; cursor:pointer; transition:all .13s; font-family:inherit;
}
.pg-btn:hover:not(:disabled) { background:rgba(255,255,255,.08); color:var(--text-1); }
.pg-btn:disabled { opacity:.25; cursor:not-allowed; }
.pg-btn.active { background:rgba(0,230,118,.1); border-color:rgba(0,230,118,.28); color:var(--g); font-weight:700; }

html[data-theme="light"] .cl-stat { background:#fff; }
html[data-theme="light"] .cl-card  { background:#fff; }
html[data-theme="light"] .cl-sort option { background:#fff; }
html[data-theme="light"] .cl-table th { background:rgba(0,0,0,.018); }

@media(max-width:900px) {
    .cl-stats { grid-template-columns:repeat(2,1fr); }
    .cl-table th:nth-child(5), .cl-table td:nth-child(5) { display:none; }
}
@media(max-width:600px) {
    .cl-stats { grid-template-columns:1fr 1fr; }
    .cl-table th:nth-child(3), .cl-table td:nth-child(3) { display:none; }
    .cl-filter span:not(.fd) { display:none; }
}